// Name: Divider // Description: Styles for dividers // // Component: `uk-divider-icon` // `uk-divider-small` // `uk-divider-vertical` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: Divider ========================================================================== */ /* * 1. Reset default `hr` * 2. Set margin if a `div` is used for semantical reason */ [class*='uk-divider'] { /* 1 */ border: none; /* 2 */ margin-bottom: $divider-margin-vertical; } /* Add margin if adjacent element */ * + [class*='uk-divider'] { margin-top: $divider-margin-vertical; } /* Icon ========================================================================== */ .uk-divider-icon { position: relative; height: $divider-icon-height; @include svg-fill($internal-divider-icon-image, "#000", $divider-icon-color); background-repeat: no-repeat; background-position: 50% 50%; @if(mixin-exists(hook-divider-icon)) {@include hook-divider-icon();} } .uk-divider-icon::before, .uk-divider-icon::after { content: ""; position: absolute; top: $divider-icon-line-top; max-width: unquote('calc(50% - (#{$divider-icon-width} / 2))'); border-bottom: $divider-icon-line-border-width solid $divider-icon-line-border; @if(mixin-exists(hook-divider-icon-line)) {@include hook-divider-icon-line();} } .uk-divider-icon::before { right: unquote('calc(50% + (#{$divider-icon-width} / 2))'); width: $divider-icon-line-width; @if(mixin-exists(hook-divider-icon-line-left)) {@include hook-divider-icon-line-left();} } .uk-divider-icon::after { left: unquote('calc(50% + (#{$divider-icon-width} / 2))'); width: $divider-icon-line-width; @if(mixin-exists(hook-divider-icon-line-right)) {@include hook-divider-icon-line-right();} } /* Small ========================================================================== */ /* * 1. Fix height because of `inline-block` * 2. Using ::after and inline-block to make `text-align` work */ /* 1 */ .uk-divider-small { line-height: 0; } /* 2 */ .uk-divider-small::after { content: ""; display: inline-block; width: $divider-small-width; max-width: 100%; border-top: $divider-small-border-width solid $divider-small-border; vertical-align: top; @if(mixin-exists(hook-divider-small)) {@include hook-divider-small();} } /* Vertical ========================================================================== */ .uk-divider-vertical { width: max-content; height: $divider-vertical-height; margin-left: auto; margin-right: auto; border-left: $divider-vertical-border-width solid $divider-vertical-border; @if(mixin-exists(hook-divider-vertical)) {@include hook-divider-vertical();} } // Hooks // ======================================================================== @if(mixin-exists(hook-divider-misc)) {@include hook-divider-misc();} // @mixin hook-divider-icon(){} // @mixin hook-divider-icon-line(){} // @mixin hook-divider-icon-line-left(){} // @mixin hook-divider-icon-line-right(){} // @mixin hook-divider-small(){} // @mixin hook-divider-vertical(){} // @mixin hook-divider-misc(){} // Inverse // ======================================================================== // @mixin hook-inverse-divider-icon(){} // @mixin hook-inverse-divider-icon-line(){} // @mixin hook-inverse-divider-small(){} // @mixin hook-inverse-divider-vertical(){}