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