Dynamic Styling

By using d-style class, you can dynamically change a child's state depending on a parent's state (classname).
The parent is .d-style and the child should be one of the of classes described below.
Take a look at the following example:

<ul class="nav nav-tabs" role="tablist">

  <a class="d-style nav-link active" data-toggle="tab" href="#tab-1" role="tab" aria-selected="true">
    Tab1
    <i class="fa fa-check d-active"></i>
    <i class="fa fa-times d-n-active"></i>
  </a>

  <a class="d-style nav-link" data-toggle="tab" href="#tab-2" role="tab" aria-selected="true">
    ...
  </a>

</ul>

The fa-check icon is .d-active (displayed when active) and therefore it is displayed only when the parent .nav-link (which is .d-style) is .active .
The fa-times icon is .d-n-active (displayed when not active) and therefore is displayed only when the parent .nav-link (.d-style) is NOT .active .

Button Groups

Dynamic styling classes can be used in button groups to show/hide text, icons, etc when an item(button) is active(selected) or not:

<div class="btn-group btn-group-toggle" data-toggle="buttons">

    <div role="button" class="d-style btn btn-outline-default">
        <input type="radio" name="options" id="option1" />
        Option 1
        <i class="fa fa-check text-success-l4 v-active position-tr"></i>
    </div>

    <div role="button" class="d-style btn btn-outline-default">
        <input type="radio" name="options" id="option2" />
        Option 2
        <i class="fa fa-check text-success-l4 v-active position-tr"></i>
    </div>

    <div role="button" class="d-style btn btn-outline-default">
        <input type="radio" name="options" id="option3" />
        Option 3
        <i class="fa fa-check text-success-l4 v-active position-tr"></i>
    </div>

</div>

In the above example when one of the options gets selected (i.e. becomes .active) a check mark will appear on top right of it.

Available Classes:

.d-style The parent element which has dynamically shown/hidden children

.d-active This element will be shown only when a .d-style parent becomes .active

.d-n-active This element will be shown when a .d-style parent is not .active

.v-active This element will be visible (faded in) only when a .d-style parent becomes .active

.v-n-active This element will be visible when a .d-style parent is not .active

.d-hover This element will be shown only when a .d-style parent is hovered

.d-n-hover This element will be shown when a .d-style parent is not hovered

.v-hover This element will be visible (faded in) only when a .d-style parent is hovered

.v-n-hover This element will be visible when a .d-style parent is not hovered

.d-show This element will be shown only when a .d-style parent becomes .show . For example a .modal parent

.d-n-show This element will be shown when a .d-style parent is not .show

.v-show This element will be visible (faded in) only when a .d-style parent becomes .show

.v-n-show This element will be visible when a .d-style parent is not .show

.d-collapsed This element will be shown only when a .d-style parent becomes .collapsed . For example in accordions

.d-n-collapsed This element will be shown when a .d-style parent is not .collapsed

.v-collapsed This element will be visible (faded in) only when a .d-style parent becomes .collapsed

.v-n-collapsed This element will be visible when a .d-style parent is not .collapsed

.mb-hover This element will move down 100% (as much as its height) when mouse hovers its .d-style parent . Used in gallery for example

.mb-n-hover This element is moved down by 100% (as much as its height) by default. But will move back to its original place when mouse hovers its .d-style parent

.mt-hover , .mt-n-hover , .mr-hover , .mr-n-hover , .ml-hover and .ml-n-hover are similar for other directions

.d-zoom-1 , .d-zoom-2 and .d-zoom-3: This element will be scaled up when mouse hovers its .d-style parent . Used in gallery for example

.dh-zoom-1 , .dh-zoom-2 and .dh-zoom-3: This element will be scaled up when mouse hovers it (no need for a ".d-style" parent in this case)

.f-hover-1 , .f-hover-2 and .f-hover-3: This element will be faded when mouse hovers its .d-style parent .

.f-n-hover-1 , .f-n-hover-2 and .f-n-hover-3: This element is faded when mouse is not over its .d-style parent .

In the following examples, there are 3 faded images and when mouse hovers a parent DIV.d-style, the image will scale up and will no more be faded:

<div class="gallery row">
    <div class="col-4 d-style overflow-hidden border-1 brc-secondary-l2 shadow-sm">
        <img src=" .. " class="dh-zoom-3 f-n-hover-2 w-100" />
    </div>

    <div class="col-4 d-style overflow-hidden border-1 brc-secondary-l2 shadow-sm">
        <img src=" .. " class="dh-zoom-3 f-n-hover-2 w-100" />
    </div>

    <div class="col-4 d-style overflow-hidden border-1 brc-secondary-l2 shadow-sm">
        <img src=" .. " class="dh-zoom-3 f-n-hover-2 w-100" />
    </div>
</div>