blob: b51708cf436d8a4a61305e898d73976b8643b7e8 (
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
// Name: Divider
// Description: Styles for dividers
//
// Component: `uk-divider-icon`
// `uk-divider-small`
//
// ========================================================================
// Variables
// ========================================================================
$divider-margin-vertical: $global-margin !default;
$divider-icon-width: 50px !default;
$divider-icon-height: 20px !default;
$divider-icon-color: $global-border !default;
$divider-icon-line-top: 50% !default;
$divider-icon-line-width: 100% !default;
$divider-icon-line-border-width: $global-border-width !default;
$divider-icon-line-border: $global-border !default;
$internal-divider-icon-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
$divider-small-width: 100px !default;
$divider-small-border-width: $global-border-width !default;
$divider-small-border: $global-border !default;
/* ========================================================================
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
========================================================================== */
/*
* Reset child height, caused by `inline-block`
*/
.uk-divider-small { line-height: 0; }
.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();}
}
// 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-misc(){}
// Inverse
// ========================================================================
$inverse-divider-icon-color: $inverse-global-border !default;
$inverse-divider-icon-line-border: $inverse-global-border !default;
$inverse-divider-small-border: $inverse-global-border !default;
// @mixin hook-inverse-divider-icon(){}
// @mixin hook-inverse-divider-icon-line(){}
// @mixin hook-inverse-divider-small(){}
|
