| 1 | // Name: Leader
|
| 2 | // Description: Component to create dot leaders
|
| 3 | //
|
| 4 | // Component: `uk-leader`
|
| 5 | //
|
| 6 | // ========================================================================
|
| 7 |
|
| 8 |
|
| 9 | // Variables
|
| 10 | // ========================================================================
|
| 11 |
|
| 12 | $leader-fill-content: unquote('.') !default;
|
| 13 | $leader-fill-margin-left: $global-small-gutter !default;
|
| 14 |
|
| 15 |
|
| 16 | /* ========================================================================
|
| 17 | Component: Leader
|
| 18 | ========================================================================== */
|
| 19 |
|
| 20 | .uk-leader { overflow: hidden; }
|
| 21 |
|
| 22 | /*
|
| 23 | * 1. Place element in text flow
|
| 24 | * 2. Never break into a new line
|
| 25 | * 3. Get a string back with as many repeating characters to fill the container
|
| 26 | * 4. Prevent wrapping. Overflowing characters will be clipped by the container
|
| 27 | */
|
| 28 |
|
| 29 | .uk-leader-fill::after {
|
| 30 | /* 1 */
|
| 31 | display: inline-block;
|
| 32 | margin-left: $leader-fill-margin-left;
|
| 33 | /* 2 */
|
| 34 | width: 0;
|
| 35 | /* 3 */
|
| 36 | content: attr(data-fill);
|
| 37 | /* 4 */
|
| 38 | white-space: nowrap;
|
| 39 | @if(mixin-exists(hook-leader)) {@include hook-leader();}
|
| 40 | }
|
| 41 |
|
| 42 | /*
|
| 43 | * Hide if media does not match
|
| 44 | */
|
| 45 |
|
| 46 | .uk-leader-fill.uk-leader-hide::after { display: none; }
|
| 47 |
|
| 48 | /*
|
| 49 | * Pass fill character to JS
|
| 50 | */
|
| 51 |
|
| 52 | .uk-leader-fill-content::before { content: '#{$leader-fill-content}'; }
|
| 53 | :root { --uk-leader-fill-content: #{$leader-fill-content}; }
|
| 54 |
|
| 55 |
|
| 56 | // Hooks
|
| 57 | // ========================================================================
|
| 58 |
|
| 59 | @if(mixin-exists(hook-leader-misc)) {@include hook-leader-misc();}
|
| 60 |
|
| 61 | // @mixin hook-leader(){}
|
| 62 | // @mixin hook-leader-misc(){}
|
| 63 |
|
| 64 |
|
| 65 | // Inverse
|
| 66 | // ========================================================================
|
| 67 |
|
| 68 |
|
| 69 |
|
| 70 | // @mixin hook-inverse-leader(){}
|