1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 | $divider-margin-vertical: $global-margin !default;
|
15 |
|
16 | $divider-icon-width: 50px !default;
|
17 | $divider-icon-height: 20px !default;
|
18 | $divider-icon-color: $global-border !default;
|
19 | $divider-icon-line-top: 50% !default;
|
20 | $divider-icon-line-width: 100% !default;
|
21 | $divider-icon-line-border-width: $global-border-width !default;
|
22 | $divider-icon-line-border: $global-border !default;
|
23 |
|
24 | $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;
|
25 |
|
26 | $divider-small-width: 100px !default;
|
27 | $divider-small-border-width: $global-border-width !default;
|
28 | $divider-small-border: $global-border !default;
|
29 |
|
30 | $divider-vertical-height: 100px !default;
|
31 | $divider-vertical-border-width: $global-border-width !default;
|
32 | $divider-vertical-border: $global-border !default;
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | [class*='uk-divider'] {
|
45 |
|
46 | border: none;
|
47 |
|
48 | margin-bottom: $divider-margin-vertical;
|
49 | }
|
50 |
|
51 |
|
52 | * + [class*='uk-divider'] { margin-top: $divider-margin-vertical; }
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 | .uk-divider-icon {
|
59 | position: relative;
|
60 | height: $divider-icon-height;
|
61 | @include svg-fill($internal-divider-icon-image, "#000", $divider-icon-color);
|
62 | background-repeat: no-repeat;
|
63 | background-position: 50% 50%;
|
64 | @if(mixin-exists(hook-divider-icon)) {@include hook-divider-icon();}
|
65 | }
|
66 |
|
67 | .uk-divider-icon::before,
|
68 | .uk-divider-icon::after {
|
69 | content: "";
|
70 | position: absolute;
|
71 | top: $divider-icon-line-top;
|
72 | max-width: unquote('calc(50% - (#{$divider-icon-width} / 2))');
|
73 | border-bottom: $divider-icon-line-border-width solid $divider-icon-line-border;
|
74 | @if(mixin-exists(hook-divider-icon-line)) {@include hook-divider-icon-line();}
|
75 | }
|
76 |
|
77 | .uk-divider-icon::before {
|
78 | right: unquote('calc(50% + (#{$divider-icon-width} / 2))');
|
79 | width: $divider-icon-line-width;
|
80 | @if(mixin-exists(hook-divider-icon-line-left)) {@include hook-divider-icon-line-left();}
|
81 | }
|
82 |
|
83 | .uk-divider-icon::after {
|
84 | left: unquote('calc(50% + (#{$divider-icon-width} / 2))');
|
85 | width: $divider-icon-line-width;
|
86 | @if(mixin-exists(hook-divider-icon-line-right)) {@include hook-divider-icon-line-right();}
|
87 | }
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 | .uk-divider-small { line-height: 0; }
|
100 |
|
101 |
|
102 | .uk-divider-small::after {
|
103 | content: "";
|
104 | display: inline-block;
|
105 | width: $divider-small-width;
|
106 | max-width: 100%;
|
107 | border-top: $divider-small-border-width solid $divider-small-border;
|
108 | vertical-align: top;
|
109 | @if(mixin-exists(hook-divider-small)) {@include hook-divider-small();}
|
110 | }
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | .uk-divider-vertical {
|
117 | width: 1px;
|
118 | height: $divider-vertical-height;
|
119 | margin-left: auto;
|
120 | margin-right: auto;
|
121 | border-left: $divider-vertical-border-width solid $divider-vertical-border;
|
122 | @if(mixin-exists(hook-divider-vertical)) {@include hook-divider-vertical();}
|
123 | }
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 | @if(mixin-exists(hook-divider-misc)) {@include hook-divider-misc();}
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 | $inverse-divider-icon-color: $inverse-global-border !default;
|
144 | $inverse-divider-icon-line-border: $inverse-global-border !default;
|
145 | $inverse-divider-small-border: $inverse-global-border !default;
|
146 | $inverse-divider-vertical-border: $inverse-global-border !default;
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|