ellipsis-compass 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +8 -8
- data/stylesheets/ellipsis/animation/_transitions.scss +0 -318
- data/stylesheets/ellipsis/base/_breakpoints.scss +1 -1
- data/stylesheets/ellipsis/base/_document.scss +21 -1
- data/stylesheets/ellipsis/base/_global.scss +9 -8
- data/stylesheets/ellipsis/component/_element.scss +81 -0
- data/stylesheets/ellipsis/component/_ui.scss +94 -22
- data/stylesheets/ellipsis/font/_icons.scss +229 -8
- data/stylesheets/ellipsis/form/_form.scss +284 -184
- data/stylesheets/ellipsis/grid/_grid.scss +21 -1
- data/stylesheets/ellipsis/helpers/_component.scss +9 -1
- data/stylesheets/ellipsis/helpers/_mixins.scss +13 -194
- data/stylesheets/ellipsis/helpers/_visibility.scss +3 -3
- data/stylesheets/ellipsis/touch/ui/_topbar.scss +11 -0
- data/stylesheets/ellipsis/typography/_typography.scss +1 -1
- data/stylesheets/ellipsis/ui/_carousel.scss +275 -132
- data/stylesheets/ellipsis/ui/_collapse.scss +174 -0
- data/stylesheets/ellipsis/ui/_container.scss +317 -1
- data/stylesheets/ellipsis/ui/_drawer.scss +29 -5
- data/stylesheets/ellipsis/ui/_dropdown.scss +103 -52
- data/stylesheets/ellipsis/ui/_gallery.scss +85 -81
- data/stylesheets/ellipsis/ui/_menu.scss +130 -82
- data/stylesheets/ellipsis/ui/_navbar.scss +82 -30
- data/stylesheets/ellipsis/ui/_pagination.scss +12 -9
- data/stylesheets/ellipsis/ui/_screentab.scss +109 -0
- data/stylesheets/ellipsis/ui/_slidingpanel.scss +1 -1
- data/stylesheets/ellipsis/ui/_social.scss +51 -49
- data/stylesheets/ellipsis/ui/_stepprogress.scss +219 -0
- data/stylesheets/ellipsis/ui/_toggle.scss +5 -2
- data/stylesheets/ellipsis/ui/_tooltip.scss +5 -3
- data/stylesheets/ellipsis/ui/_topbar.scss +90 -16
- data/stylesheets/ellipsis/ui/_window.scss +13 -8
- metadata +6 -3
- data/stylesheets/ellipsis/ui/_collapsible.scss +0 -61
|
@@ -7,28 +7,37 @@ $margin:null,
|
|
|
7
7
|
$padding:null,
|
|
8
8
|
$width:null,
|
|
9
9
|
$height:null,
|
|
10
|
-
$
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
16
|
-
$
|
|
17
|
-
$
|
|
18
|
-
$
|
|
10
|
+
$justification:null,
|
|
11
|
+
$alignment:null,
|
|
12
|
+
$item-margin:null,
|
|
13
|
+
$item-padding:null,
|
|
14
|
+
$item-divider-border:null,
|
|
15
|
+
$item-divider-padding:null,
|
|
16
|
+
$item-divider-margin:null,
|
|
17
|
+
$item-divider-height:null,
|
|
18
|
+
$item-label-font-size:null,
|
|
19
|
+
$item-label-padding:null,
|
|
20
|
+
$item-search-padding:null,
|
|
19
21
|
$z-index:null,
|
|
20
22
|
$top:null,
|
|
21
23
|
$left:null,
|
|
22
|
-
$
|
|
24
|
+
$item-stacked-padding:null
|
|
23
25
|
|
|
24
26
|
){
|
|
27
|
+
$item-selector:li;
|
|
28
|
+
@if $component-custom-tags==true{
|
|
29
|
+
$item-selector:menu-item;
|
|
30
|
+
}
|
|
25
31
|
|
|
26
|
-
@include flexbox($alignment
|
|
32
|
+
@include flexbox($alignment:$alignment,$justification:$justification);
|
|
27
33
|
list-style: none;
|
|
28
34
|
margin: $margin;
|
|
29
35
|
padding:$padding;
|
|
30
36
|
width:$width;
|
|
31
|
-
height
|
|
37
|
+
@if($height !=null){
|
|
38
|
+
height:$height;
|
|
39
|
+
}
|
|
40
|
+
|
|
32
41
|
@extend %#{$component}-background !optional;
|
|
33
42
|
|
|
34
43
|
|
|
@@ -36,12 +45,12 @@ $li-stacked-padding:null
|
|
|
36
45
|
@include flexbox-column();
|
|
37
46
|
&>li{
|
|
38
47
|
height:auto;
|
|
39
|
-
padding:$
|
|
48
|
+
padding:$item-stacked-padding;
|
|
40
49
|
}
|
|
41
50
|
}
|
|
42
|
-
|
|
43
|
-
@include flexbox($alignment
|
|
44
|
-
margin:$
|
|
51
|
+
&>#{$item-selector}{
|
|
52
|
+
@include flexbox($alignment:$alignment,$justification:$justification);
|
|
53
|
+
margin:$item-margin;
|
|
45
54
|
height:100%;
|
|
46
55
|
position:relative;
|
|
47
56
|
&:hover,&:focus{
|
|
@@ -53,16 +62,16 @@ $li-stacked-padding:null
|
|
|
53
62
|
}
|
|
54
63
|
&.label{
|
|
55
64
|
@extend %#{$component}-font-active !optional;
|
|
56
|
-
font-size:$
|
|
57
|
-
padding:$
|
|
65
|
+
font-size:$item-label-font-size;
|
|
66
|
+
padding:$item-label-padding;
|
|
58
67
|
}
|
|
59
68
|
&.divider{
|
|
60
69
|
width:0;
|
|
61
|
-
height:$
|
|
70
|
+
height:$item-divider-height;
|
|
62
71
|
border:0;
|
|
63
|
-
border-right: $
|
|
64
|
-
padding: $
|
|
65
|
-
margin:$
|
|
72
|
+
border-right: $item-divider-border;
|
|
73
|
+
padding: $item-divider-padding;
|
|
74
|
+
margin:$item-divider-margin;
|
|
66
75
|
@if $divider != null{
|
|
67
76
|
@extend %#{$divider}-border !optional;
|
|
68
77
|
}
|
|
@@ -70,7 +79,7 @@ $li-stacked-padding:null
|
|
|
70
79
|
&>a{
|
|
71
80
|
@extend %#{$component}-font !optional;
|
|
72
81
|
font-size:1em;
|
|
73
|
-
padding:$
|
|
82
|
+
padding:$item-padding;
|
|
74
83
|
}
|
|
75
84
|
&.active{
|
|
76
85
|
@extend %#{$component}-background-active !optional;
|
|
@@ -86,39 +95,59 @@ $li-stacked-padding:null
|
|
|
86
95
|
}
|
|
87
96
|
&.has-dropdown{
|
|
88
97
|
position:relative;
|
|
89
|
-
|
|
98
|
+
&.static{
|
|
99
|
+
position:static;
|
|
100
|
+
&.inactive{
|
|
101
|
+
&:hover,&:focus{
|
|
102
|
+
&>.ui-dropdown{
|
|
103
|
+
display:none !important;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
&>.ui-dropdown{
|
|
90
109
|
display:none;
|
|
91
110
|
}
|
|
92
111
|
&:hover,&:focus{
|
|
93
|
-
&>.ui-dropdown
|
|
94
|
-
display:
|
|
112
|
+
&>.ui-dropdown{
|
|
113
|
+
display:inherit !important;
|
|
95
114
|
}
|
|
96
115
|
}
|
|
97
116
|
}
|
|
98
117
|
&.has-search {
|
|
99
|
-
padding:$
|
|
118
|
+
padding:$item-search-padding;
|
|
100
119
|
margin-left:auto;
|
|
101
120
|
}
|
|
102
121
|
}
|
|
103
122
|
&>menu-divider{
|
|
104
123
|
width:0;
|
|
105
|
-
height:$
|
|
124
|
+
height:$item-divider-height;
|
|
106
125
|
border:0;
|
|
107
|
-
border-right: $
|
|
108
|
-
padding: $
|
|
109
|
-
margin:$
|
|
126
|
+
border-right: $item-divider-border;
|
|
127
|
+
padding: $item-divider-padding;
|
|
128
|
+
margin:$item-divider-margin;
|
|
110
129
|
@if $divider != null{
|
|
111
130
|
@extend %#{$divider}-border !optional;
|
|
112
131
|
}
|
|
113
132
|
}
|
|
114
133
|
&>menu-item-dropdown{
|
|
115
|
-
@include flexbox($alignment
|
|
134
|
+
@include flexbox($alignment:$alignment,$justification:$justification);
|
|
116
135
|
position:relative;
|
|
117
|
-
margin:$
|
|
118
|
-
padding:$
|
|
136
|
+
margin:$item-margin;
|
|
137
|
+
padding:$item-padding;
|
|
119
138
|
height:100%;
|
|
120
|
-
|
|
121
|
-
|
|
139
|
+
&.static{
|
|
140
|
+
position:static;
|
|
141
|
+
&.inactive{
|
|
142
|
+
&:hover,&:focus{
|
|
143
|
+
&>ui-dropdown,&>ui-mega-dropdown{
|
|
144
|
+
display:none !important;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
&>ui-dropdown,&>ui-mega-dropdown{
|
|
150
|
+
display:none !important;
|
|
122
151
|
}
|
|
123
152
|
&>a{
|
|
124
153
|
@extend %#{$component}-font !optional;
|
|
@@ -126,8 +155,8 @@ $li-stacked-padding:null
|
|
|
126
155
|
}
|
|
127
156
|
&:hover,&:focus{
|
|
128
157
|
cursor:pointer;
|
|
129
|
-
|
|
130
|
-
display:
|
|
158
|
+
&>ui-dropdown,&>ui-mega-dropdown{
|
|
159
|
+
display:inherit !important;
|
|
131
160
|
}
|
|
132
161
|
@extend %#{$component}-background-hover !optional;
|
|
133
162
|
&>a{
|
|
@@ -136,7 +165,7 @@ $li-stacked-padding:null
|
|
|
136
165
|
}
|
|
137
166
|
}
|
|
138
167
|
&>menu-item-search{
|
|
139
|
-
padding:$
|
|
168
|
+
padding:$item-search-padding;
|
|
140
169
|
margin-left:auto;
|
|
141
170
|
}
|
|
142
171
|
&.flex-start,&.left{
|
|
@@ -156,23 +185,30 @@ $margin:0,
|
|
|
156
185
|
$padding:0,
|
|
157
186
|
$width:auto,
|
|
158
187
|
$height:inherit,
|
|
159
|
-
$
|
|
160
|
-
$
|
|
161
|
-
$
|
|
162
|
-
$
|
|
163
|
-
$
|
|
164
|
-
$
|
|
165
|
-
$
|
|
166
|
-
$
|
|
167
|
-
$
|
|
188
|
+
$justification:flex-start,
|
|
189
|
+
$alignment:center,
|
|
190
|
+
$item-margin:0,
|
|
191
|
+
$item-padding:1em,
|
|
192
|
+
$item-divider-border:1px solid,
|
|
193
|
+
$item-divider-padding:0,
|
|
194
|
+
$item-divider-margin:0,
|
|
195
|
+
$item-divider-height:100%,
|
|
196
|
+
$item-label-font-size:1em,
|
|
197
|
+
$item-label-padding:$item-padding,
|
|
198
|
+
$item-search-padding:$item-padding,
|
|
168
199
|
$z-index:$global-z-index + 4,
|
|
169
200
|
$top:0,
|
|
170
201
|
$left:0,
|
|
171
|
-
$
|
|
202
|
+
$item-stacked-padding:.5em 0 .5em 0
|
|
172
203
|
|
|
173
204
|
){
|
|
174
205
|
|
|
175
|
-
.ui-menu
|
|
206
|
+
$menu-selector:'.ui-menu';
|
|
207
|
+
@if $component-custom-tags==true{
|
|
208
|
+
$menu-selector:ui-menu;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
#{$menu-selector} {
|
|
176
212
|
@if $class != null{
|
|
177
213
|
&.#{$class} {
|
|
178
214
|
@include _ui-menu($component,$divider,
|
|
@@ -180,19 +216,21 @@ $li-stacked-padding:.5em 0 .5em 0
|
|
|
180
216
|
$padding,
|
|
181
217
|
$width,
|
|
182
218
|
$height,
|
|
183
|
-
$
|
|
184
|
-
$
|
|
185
|
-
$
|
|
186
|
-
$
|
|
187
|
-
$
|
|
188
|
-
$
|
|
189
|
-
$
|
|
190
|
-
$
|
|
191
|
-
$
|
|
219
|
+
$justification,
|
|
220
|
+
$alignment,
|
|
221
|
+
$item-margin,
|
|
222
|
+
$item-padding,
|
|
223
|
+
$item-divider-border,
|
|
224
|
+
$item-divider-padding,
|
|
225
|
+
$item-divider-margin,
|
|
226
|
+
$item-divider-height,
|
|
227
|
+
$item-label-font-size,
|
|
228
|
+
$item-label-padding,
|
|
229
|
+
$item-search-padding,
|
|
192
230
|
$z-index,
|
|
193
231
|
$top,
|
|
194
232
|
$left,
|
|
195
|
-
$
|
|
233
|
+
$item-stacked-padding
|
|
196
234
|
);
|
|
197
235
|
@content;
|
|
198
236
|
}
|
|
@@ -202,19 +240,21 @@ $li-stacked-padding:.5em 0 .5em 0
|
|
|
202
240
|
$padding,
|
|
203
241
|
$width,
|
|
204
242
|
$height,
|
|
205
|
-
$
|
|
206
|
-
$
|
|
207
|
-
$
|
|
208
|
-
$
|
|
209
|
-
$
|
|
210
|
-
$
|
|
211
|
-
$
|
|
212
|
-
$
|
|
213
|
-
$
|
|
243
|
+
$justification,
|
|
244
|
+
$alignment,
|
|
245
|
+
$item-margin,
|
|
246
|
+
$item-padding,
|
|
247
|
+
$item-divider-border,
|
|
248
|
+
$item-divider-padding,
|
|
249
|
+
$item-divider-margin,
|
|
250
|
+
$item-divider-height,
|
|
251
|
+
$item-label-font-size,
|
|
252
|
+
$item-label-padding,
|
|
253
|
+
$item-search-padding,
|
|
214
254
|
$z-index,
|
|
215
255
|
$top,
|
|
216
256
|
$left,
|
|
217
|
-
$
|
|
257
|
+
$item-stacked-padding
|
|
218
258
|
);
|
|
219
259
|
@content;
|
|
220
260
|
}
|
|
@@ -222,7 +262,7 @@ $li-stacked-padding:.5em 0 .5em 0
|
|
|
222
262
|
}
|
|
223
263
|
|
|
224
264
|
@media #{$breakpoint-touch}{
|
|
225
|
-
|
|
265
|
+
#{$menu-selector}{
|
|
226
266
|
display:none;
|
|
227
267
|
}
|
|
228
268
|
}
|
|
@@ -233,9 +273,10 @@ $li-stacked-padding:.5em 0 .5em 0
|
|
|
233
273
|
@mixin touch-ui-menu($class:null,$component:css-touch-menu,
|
|
234
274
|
$z-index:$global-z-index + 98,
|
|
235
275
|
$padding:58px 0 0 0,
|
|
236
|
-
$
|
|
237
|
-
$
|
|
238
|
-
$
|
|
276
|
+
$item-border-bottom:1px solid,
|
|
277
|
+
$item-padding:20px 0 20px 20px,
|
|
278
|
+
$item-link-padding:0,
|
|
279
|
+
$item-link-transform:none,
|
|
239
280
|
$icon-font-size:1.5em,
|
|
240
281
|
$icon-padding:0 10px 0 0,
|
|
241
282
|
$icon-expand-top:20px,
|
|
@@ -244,16 +285,22 @@ $icon-expand-font-size:1em
|
|
|
244
285
|
|
|
245
286
|
){
|
|
246
287
|
|
|
288
|
+
$touch-menu-selector:'.touch-ui-menu';
|
|
289
|
+
@if $component-custom-tags==true{
|
|
290
|
+
$touch-menu-selector:touch-ui-menu;
|
|
291
|
+
}
|
|
292
|
+
|
|
247
293
|
@media #{$breakpoint-touch}{
|
|
248
|
-
|
|
294
|
+
#{$touch-menu-selector}{
|
|
249
295
|
@if $class != null{
|
|
250
296
|
&.#{$class} {
|
|
251
297
|
@include _touch-ui-menu($component,
|
|
252
298
|
$z-index,
|
|
253
299
|
$padding,
|
|
254
|
-
$
|
|
255
|
-
$
|
|
256
|
-
$
|
|
300
|
+
$item-border-bottom,
|
|
301
|
+
$item-padding,
|
|
302
|
+
$item-link-padding,
|
|
303
|
+
$item-link-transform,
|
|
257
304
|
$icon-font-size,
|
|
258
305
|
$icon-padding,
|
|
259
306
|
$icon-expand-top,
|
|
@@ -266,9 +313,10 @@ $icon-expand-font-size:1em
|
|
|
266
313
|
@include _touch-ui-menu($component,
|
|
267
314
|
$z-index,
|
|
268
315
|
$padding,
|
|
269
|
-
$
|
|
270
|
-
$
|
|
271
|
-
$
|
|
316
|
+
$item-border-bottom,
|
|
317
|
+
$item-padding,
|
|
318
|
+
$item-link-padding,
|
|
319
|
+
$item-link-transform,
|
|
272
320
|
$icon-font-size,
|
|
273
321
|
$icon-padding,
|
|
274
322
|
$icon-expand-top,
|
|
@@ -281,7 +329,7 @@ $icon-expand-font-size:1em
|
|
|
281
329
|
}
|
|
282
330
|
|
|
283
331
|
@media #{$breakpoint-desktop}{
|
|
284
|
-
|
|
332
|
+
#{$touch-menu-selector}{
|
|
285
333
|
display:none;
|
|
286
334
|
}
|
|
287
335
|
}
|
|
@@ -8,7 +8,11 @@
|
|
|
8
8
|
@mixin _ui-navbar($component:null,
|
|
9
9
|
$height:null,
|
|
10
10
|
$margin:null,
|
|
11
|
+
$nav-height:null,
|
|
11
12
|
$section-padding:null,
|
|
13
|
+
$section-height:null,
|
|
14
|
+
$section-justification:null,
|
|
15
|
+
$section-alignment:null,
|
|
12
16
|
$brand-font:null,
|
|
13
17
|
$brand-float:null,
|
|
14
18
|
$brand-margin:null,
|
|
@@ -25,19 +29,24 @@ $stacked-section-height:null
|
|
|
25
29
|
|
|
26
30
|
){
|
|
27
31
|
|
|
32
|
+
$brand-selector:'.brand';
|
|
33
|
+
@if $component-custom-tags==true{
|
|
34
|
+
$brand-selector:ui-brand
|
|
35
|
+
}
|
|
28
36
|
|
|
29
37
|
$_ui-navbar-contained-to-grid: $grid-width - $grid-column-gutter;
|
|
30
38
|
|
|
31
39
|
width: 100%;
|
|
32
40
|
position: relative;
|
|
33
|
-
|
|
41
|
+
max-height:$height;
|
|
42
|
+
display:block;
|
|
34
43
|
nav{
|
|
35
44
|
@extend %#{$component}-background !optional;
|
|
36
45
|
@extend %#{$component}-border !optional;
|
|
37
46
|
@extend %#{$component}-box-shadow !optional;
|
|
38
47
|
width:100%;
|
|
39
48
|
margin: $margin;
|
|
40
|
-
height: $height;
|
|
49
|
+
height: $nav-height;
|
|
41
50
|
min-height: 45px;
|
|
42
51
|
position: relative;
|
|
43
52
|
|
|
@@ -50,8 +59,13 @@ $stacked-section-height:null
|
|
|
50
59
|
margin:0 auto;
|
|
51
60
|
width:100%;
|
|
52
61
|
max-width: $_ui-navbar-contained-to-grid;
|
|
62
|
+
@include flexbox($justification:$section-justification,$alignment:$section-alignment);
|
|
63
|
+
@if $section-height != null{
|
|
64
|
+
height:$section-height;
|
|
65
|
+
}
|
|
66
|
+
|
|
53
67
|
}
|
|
54
|
-
|
|
68
|
+
&> #{$brand-selector}{
|
|
55
69
|
@extend %#{$component}-font !optional;
|
|
56
70
|
float: $brand-float;
|
|
57
71
|
display: block;
|
|
@@ -77,8 +91,8 @@ $stacked-section-height:null
|
|
|
77
91
|
&>.touch-brand{
|
|
78
92
|
display:none;
|
|
79
93
|
}
|
|
80
|
-
|
|
81
|
-
@extend %#{$component}-font;
|
|
94
|
+
&> #{$brand-selector}{
|
|
95
|
+
@extend %#{$component}-font !optional;
|
|
82
96
|
font: $stacked-brand-font;
|
|
83
97
|
float: $stacked-brand-float;
|
|
84
98
|
text-align: $stacked-brand-text-align;
|
|
@@ -87,9 +101,7 @@ $stacked-section-height:null
|
|
|
87
101
|
height: $stacked-brand-height;
|
|
88
102
|
background:$stacked-brand-background;
|
|
89
103
|
&.center{
|
|
90
|
-
@include
|
|
91
|
-
@include justify-content(center);
|
|
92
|
-
@include align-items(center);
|
|
104
|
+
@include flexbox($justification:center,$alignment:center);
|
|
93
105
|
}
|
|
94
106
|
&>section{
|
|
95
107
|
ul{
|
|
@@ -102,9 +114,7 @@ $stacked-section-height:null
|
|
|
102
114
|
height:$stacked-section-height;
|
|
103
115
|
padding:0;
|
|
104
116
|
&.center{
|
|
105
|
-
@include
|
|
106
|
-
@include justify-content(center);
|
|
107
|
-
@include align-items(center);
|
|
117
|
+
@include flexbox($justification:center,$alignment:center);
|
|
108
118
|
}
|
|
109
119
|
}
|
|
110
120
|
}
|
|
@@ -129,10 +139,14 @@ $stacked-section-height:null
|
|
|
129
139
|
|
|
130
140
|
/* public ------------------------------------------------------------------------------------------------------------*/
|
|
131
141
|
|
|
132
|
-
@mixin ui-navbar($class:null,$component:null,$touch-component:css-touch,
|
|
133
|
-
$height:
|
|
142
|
+
@mixin ui-navbar($class:null,$component:null,$touch-component:css-touch-black,
|
|
143
|
+
$height:none,
|
|
134
144
|
$margin:0 auto,
|
|
145
|
+
$nav-height:65px,
|
|
135
146
|
$section-padding:0,
|
|
147
|
+
$section-height:null,
|
|
148
|
+
$section-justification:space-between,
|
|
149
|
+
$section-alignment:center,
|
|
136
150
|
$brand-font:1.5em,
|
|
137
151
|
$brand-float:left,
|
|
138
152
|
$brand-margin:0,
|
|
@@ -150,19 +164,32 @@ $touch-position:fixed,
|
|
|
150
164
|
$touch-height:60px,
|
|
151
165
|
$touch-z-index:$global-z-index + 9999,
|
|
152
166
|
$touch-brand-font:inherit,
|
|
153
|
-
$touch-brand-margin:10px
|
|
167
|
+
$touch-brand-margin:10px,
|
|
168
|
+
$touch-icon-font-size:22px,
|
|
169
|
+
$touch-icon-margin:.8em
|
|
154
170
|
|
|
155
171
|
){
|
|
156
172
|
|
|
173
|
+
$navbar-selector:'.ui-navbar';
|
|
174
|
+
$topbar-selector:'.ui-topbar';
|
|
175
|
+
$brand-selector:'.brand';
|
|
176
|
+
@if $component-custom-tags==true{
|
|
177
|
+
$navbar-selector:ui-navbar;
|
|
178
|
+
$topbar-selector:ui-topbar;
|
|
179
|
+
$brand-selector:ui-brand
|
|
180
|
+
}
|
|
157
181
|
|
|
158
|
-
|
|
159
|
-
.ui-navbar,ui-navbar{
|
|
182
|
+
#{$navbar-selector}{
|
|
160
183
|
@if $class != null{
|
|
161
184
|
&.#{$class} {
|
|
162
185
|
@include _ui-navbar($component,
|
|
163
186
|
$height,
|
|
164
187
|
$margin,
|
|
188
|
+
$nav-height,
|
|
165
189
|
$section-padding,
|
|
190
|
+
$section-height,
|
|
191
|
+
$section-justification,
|
|
192
|
+
$section-alignment,
|
|
166
193
|
$brand-font,
|
|
167
194
|
$brand-float,
|
|
168
195
|
$brand-margin,
|
|
@@ -183,7 +210,11 @@ $touch-brand-margin:10px
|
|
|
183
210
|
@include _ui-navbar($component,
|
|
184
211
|
$height,
|
|
185
212
|
$margin,
|
|
213
|
+
$nav-height,
|
|
186
214
|
$section-padding,
|
|
215
|
+
$section-height,
|
|
216
|
+
$section-justification,
|
|
217
|
+
$section-alignment,
|
|
187
218
|
$brand-font,
|
|
188
219
|
$brand-float,
|
|
189
220
|
$brand-margin,
|
|
@@ -202,21 +233,30 @@ $touch-brand-margin:10px
|
|
|
202
233
|
}
|
|
203
234
|
|
|
204
235
|
}
|
|
205
|
-
|
|
236
|
+
@include desktop-content(){
|
|
237
|
+
#{$navbar-selector}{
|
|
238
|
+
.touch-ui-brand,touch-ui-brand,.touch-right,touch-icons{
|
|
239
|
+
display:none;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
206
243
|
@media #{$breakpoint-touch}{
|
|
207
|
-
|
|
208
|
-
|
|
244
|
+
#{$navbar-selector} #{$topbar-selector} + *{
|
|
245
|
+
margin-top:0 !important;
|
|
246
|
+
}
|
|
247
|
+
#{$navbar-selector}{
|
|
248
|
+
&>#{$topbar-selector}{
|
|
209
249
|
display:none !important;
|
|
210
250
|
}
|
|
211
251
|
&>nav{
|
|
212
|
-
|
|
252
|
+
&>#{$brand-selector}{
|
|
213
253
|
display:none;
|
|
214
254
|
}
|
|
215
255
|
&>section{
|
|
216
256
|
display:none;
|
|
217
257
|
}
|
|
218
258
|
&.stacked{
|
|
219
|
-
|
|
259
|
+
&>#{$brand-selector}{
|
|
220
260
|
display:none !important;
|
|
221
261
|
}
|
|
222
262
|
&>section{
|
|
@@ -232,7 +272,9 @@ $touch-brand-margin:10px
|
|
|
232
272
|
$touch-height,
|
|
233
273
|
$touch-z-index,
|
|
234
274
|
$touch-brand-font,
|
|
235
|
-
$touch-brand-margin
|
|
275
|
+
$touch-brand-margin,
|
|
276
|
+
$touch-icon-font-size,
|
|
277
|
+
$touch-icon-margin
|
|
236
278
|
);
|
|
237
279
|
}
|
|
238
280
|
|
|
@@ -242,23 +284,25 @@ $touch-brand-margin:10px
|
|
|
242
284
|
$touch-height,
|
|
243
285
|
$touch-z-index,
|
|
244
286
|
$touch-brand-font,
|
|
245
|
-
$touch-brand-margin
|
|
287
|
+
$touch-brand-margin,
|
|
288
|
+
$touch-icon-font-size,
|
|
289
|
+
$touch-icon-margin
|
|
246
290
|
);
|
|
247
291
|
}
|
|
248
292
|
|
|
249
293
|
}
|
|
250
294
|
|
|
251
295
|
@if $touch-position != relative{
|
|
296
|
+
[data-role=navigation] + *{
|
|
297
|
+
padding-top:$touch-height;
|
|
298
|
+
}
|
|
252
299
|
@if $class != null {
|
|
253
300
|
.ui-navbar.#{$class} + *,ui-navbar.#{$class} + *{
|
|
254
301
|
padding-top:$touch-height;
|
|
255
|
-
|
|
256
|
-
|
|
257
302
|
}
|
|
258
303
|
}@else{
|
|
259
304
|
.ui-navbar + *,ui-navbar + *{
|
|
260
305
|
padding-top:$touch-height;
|
|
261
|
-
|
|
262
306
|
}
|
|
263
307
|
}
|
|
264
308
|
}
|
|
@@ -266,9 +310,13 @@ $touch-brand-margin:10px
|
|
|
266
310
|
}
|
|
267
311
|
|
|
268
312
|
@mixin navbar-brand(){
|
|
313
|
+
$brand-selector:'.brand';
|
|
314
|
+
@if $component-custom-tags==true{
|
|
315
|
+
$brand-selector:ui-brand
|
|
316
|
+
}
|
|
269
317
|
&>nav{
|
|
270
318
|
&.stacked{
|
|
271
|
-
|
|
319
|
+
&>#{$brand-selector}{
|
|
272
320
|
@content;
|
|
273
321
|
}
|
|
274
322
|
}
|
|
@@ -276,9 +324,13 @@ $touch-brand-margin:10px
|
|
|
276
324
|
}
|
|
277
325
|
|
|
278
326
|
@mixin navbar-stacked-brand(){
|
|
327
|
+
$brand-selector:'.brand';
|
|
328
|
+
@if $component-custom-tags==true{
|
|
329
|
+
$brand-selector:ui-brand
|
|
330
|
+
}
|
|
279
331
|
&>nav{
|
|
280
332
|
&.stacked{
|
|
281
|
-
|
|
333
|
+
&>#{$brand-selector}{
|
|
282
334
|
@content;
|
|
283
335
|
}
|
|
284
336
|
}
|
|
@@ -287,14 +339,14 @@ $touch-brand-margin:10px
|
|
|
287
339
|
|
|
288
340
|
@mixin phone-navbar-brand(){
|
|
289
341
|
@media #{$breakpoint-phone}{
|
|
290
|
-
.touch-brand{
|
|
342
|
+
.touch-ui-brand,touch-ui-brand{
|
|
291
343
|
@content;
|
|
292
344
|
}
|
|
293
345
|
}
|
|
294
346
|
}
|
|
295
347
|
@mixin touch-navbar-brand(){
|
|
296
348
|
@media #{$breakpoint-touch}{
|
|
297
|
-
.touch-brand{
|
|
349
|
+
.touch-ui-brand,touch-ui-brand{
|
|
298
350
|
@content;
|
|
299
351
|
}
|
|
300
352
|
}
|