@clayui/css 3.74.0 → 3.76.0

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.
Files changed (75) hide show
  1. package/lib/css/atlas.css +1215 -626
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +1263 -650
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +670 -358
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/lib/images/icons/mobile-device-rules.svg +5 -7
  9. package/lib/images/icons/mobile-devices.svg +10 -0
  10. package/lib/images/icons/mobile-landscape.svg +2 -1
  11. package/lib/images/icons/mobile-portrait.svg +2 -1
  12. package/package.json +2 -2
  13. package/src/images/icons/mobile-device-rules.svg +5 -7
  14. package/src/images/icons/mobile-devices.svg +10 -0
  15. package/src/images/icons/mobile-landscape.svg +2 -1
  16. package/src/images/icons/mobile-portrait.svg +2 -1
  17. package/src/scss/_license-text.scss +1 -1
  18. package/src/scss/atlas/variables/_application-bar.scss +1 -1
  19. package/src/scss/atlas/variables/_buttons.scss +2 -3
  20. package/src/scss/atlas/variables/_dropdowns.scss +6 -2
  21. package/src/scss/atlas/variables/_globals.scss +6 -0
  22. package/src/scss/atlas/variables/_labels.scss +1 -1
  23. package/src/scss/atlas/variables/_links.scss +3 -13
  24. package/src/scss/atlas/variables/_management-bar.scss +1 -1
  25. package/src/scss/atlas/variables/_navigation-bar.scss +5 -5
  26. package/src/scss/atlas/variables/_quick-action.scss +1 -1
  27. package/src/scss/atlas/variables/_tables.scss +2 -2
  28. package/src/scss/cadmin/components/_custom-forms.scss +1 -1
  29. package/src/scss/cadmin/variables/_badges.scss +1 -1
  30. package/src/scss/cadmin/variables/_buttons.scss +2 -4
  31. package/src/scss/cadmin/variables/_cards.scss +1 -1
  32. package/src/scss/cadmin/variables/_date-picker.scss +4 -4
  33. package/src/scss/cadmin/variables/_globals.scss +6 -0
  34. package/src/scss/cadmin/variables/_labels.scss +2 -2
  35. package/src/scss/cadmin/variables/_links.scss +13 -22
  36. package/src/scss/cadmin/variables/_management-bar.scss +1 -1
  37. package/src/scss/cadmin/variables/_multi-step-nav.scss +1 -1
  38. package/src/scss/cadmin/variables/_navigation-bar.scss +5 -5
  39. package/src/scss/cadmin/variables/_quick-action.scss +1 -1
  40. package/src/scss/cadmin/variables/_tables.scss +2 -2
  41. package/src/scss/cadmin/variables/_utilities.scss +4 -4
  42. package/src/scss/components/_custom-forms.scss +1 -1
  43. package/src/scss/components/_links.scss +1 -1
  44. package/src/scss/functions/_global-functions.scss +23 -25
  45. package/src/scss/functions/_lx-icons-generated.scss +5 -3
  46. package/src/scss/mixins/_forms.scss +361 -322
  47. package/src/scss/mixins/_grid.scss +74 -67
  48. package/src/scss/mixins/_highlight.scss +91 -69
  49. package/src/scss/mixins/_list-group.scss +216 -192
  50. package/src/scss/mixins/_loaders.scss +142 -134
  51. package/src/scss/mixins/_menubar.scss +300 -296
  52. package/src/scss/mixins/_modals.scss +101 -92
  53. package/src/scss/mixins/_navbar.scss +811 -738
  54. package/src/scss/mixins/_slideout.scss +34 -30
  55. package/src/scss/mixins/_stickers.scss +30 -28
  56. package/src/scss/mixins/_tables.scss +44 -40
  57. package/src/scss/mixins/_tbar.scss +467 -425
  58. package/src/scss/mixins/_utilities.scss +41 -39
  59. package/src/scss/variables/_alerts.scss +30 -7
  60. package/src/scss/variables/_badges.scss +1 -1
  61. package/src/scss/variables/_buttons.scss +2 -3
  62. package/src/scss/variables/_cards.scss +1 -1
  63. package/src/scss/variables/_clay-color.scss +2 -2
  64. package/src/scss/variables/_date-picker.scss +4 -4
  65. package/src/scss/variables/_dropdowns.scss +6 -2
  66. package/src/scss/variables/_forms.scss +232 -44
  67. package/src/scss/variables/_globals.scss +6 -0
  68. package/src/scss/variables/_labels.scss +1 -1
  69. package/src/scss/variables/_links.scss +52 -20
  70. package/src/scss/variables/_multi-step-nav.scss +1 -1
  71. package/src/scss/variables/_navbar.scss +1 -1
  72. package/src/scss/variables/_navs.scss +25 -4
  73. package/src/scss/variables/_tables.scss +6 -1
  74. package/src/scss/variables/_tbar.scss +2 -2
  75. package/src/scss/variables/_time.scss +6 -1
@@ -3,804 +3,875 @@
3
3
  // @param $map - Sass map that contain Navbar properties to modify
4
4
 
5
5
  @mixin clay-navbar-size($map) {
6
- $enabled: setter(map-get($map, enabled), true);
7
-
8
- $enable-c-inner: if(
9
- variable-exists(enable-c-inner),
10
- $enable-c-inner,
11
- if(variable-exists(cadmin-enable-c-inner), $cadmin-enable-c-inner, true)
12
- );
13
-
14
- $breakpoints: if(
15
- variable-exists(grid-breakpoints),
16
- $grid-breakpoints,
17
- if(
18
- variable-exists(cadmin-grid-breakpoints),
19
- $cadmin-grid-breakpoints,
20
- (
21
- xs: 0,
22
- sm: 576px,
23
- md: 768px,
24
- lg: 992px,
25
- xl: 1280px,
6
+ @if (type-of($map) == 'map') {
7
+ $enabled: setter(map-get($map, enabled), true);
8
+
9
+ $enable-c-inner: if(
10
+ variable-exists(enable-c-inner),
11
+ $enable-c-inner,
12
+ if(
13
+ variable-exists(cadmin-enable-c-inner),
14
+ $cadmin-enable-c-inner,
15
+ true
26
16
  )
27
- )
28
- );
29
-
30
- $_line-height-base: if(
31
- variable-exists(line-height-base),
32
- $line-height-base,
33
- if(
34
- variable-exists(cadmin-line-height-base),
35
- $cadmin-line-height-base,
36
- 1.5
37
- )
38
- );
39
-
40
- $scaling-navbar: setter(map-get($map, scaling-navbar), false);
41
- $container-padding-x: map-get($map, container-padding-x);
42
- $container-padding-x-mobile: setter(
43
- map-get($map, container-padding-x-mobile),
44
- $container-padding-x
45
- );
46
-
47
- $height: setter(map-get($map, height), 3.5rem);
48
- $border-bottom-width: setter(map-get($map, border-bottom-width), 0px);
49
- $border-left-width: setter(map-get($map, border-left-width), 0px);
50
- $border-right-width: setter(map-get($map, border-right-width), 0px);
51
- $border-top-width: setter(map-get($map, border-top-width), 0px);
52
- $box-shadow: map-get($map, box-shadow);
53
- $font-size: setter(
54
- map-get($map, font-size),
55
- if(
56
- variable-exists(font-size-base),
57
- $font-size-base,
17
+ );
18
+
19
+ $breakpoints: if(
20
+ variable-exists(grid-breakpoints),
21
+ $grid-breakpoints,
58
22
  if(
59
- variable-exists(cadmin-font-size-base),
60
- $cadmin-font-size-base,
61
- 1rem
23
+ variable-exists(cadmin-grid-breakpoints),
24
+ $cadmin-grid-breakpoints,
25
+ (
26
+ xs: 0,
27
+ sm: 576px,
28
+ md: 768px,
29
+ lg: 992px,
30
+ xl: 1280px,
31
+ )
62
32
  )
63
- )
64
- );
65
- $min-height: map-get($map, min-height);
66
- $padding-x: setter(
67
- map-get($map, padding-x),
68
- if(
69
- variable-exists(navbar-padding-x),
70
- $navbar-padding-x,
33
+ );
34
+
35
+ $_line-height-base: if(
36
+ variable-exists(line-height-base),
37
+ $line-height-base,
71
38
  if(
72
- variable-exists(cadmin-navbar-padding-x),
73
- $cadmin-navbar-padding-x,
74
- null
39
+ variable-exists(cadmin-line-height-base),
40
+ $cadmin-line-height-base,
41
+ 1.5
75
42
  )
76
- )
77
- );
78
- $padding-y: setter(
79
- map-get($map, padding-y),
80
- if(
81
- variable-exists(navbar-padding-y),
82
- $navbar-padding-y,
43
+ );
44
+
45
+ $scaling-navbar: setter(map-get($map, scaling-navbar), false);
46
+ $container-padding-x: map-get($map, container-padding-x);
47
+ $container-padding-x-mobile: setter(
48
+ map-get($map, container-padding-x-mobile),
49
+ $container-padding-x
50
+ );
51
+
52
+ $height: setter(map-get($map, height), 3.5rem);
53
+ $border-bottom-width: setter(map-get($map, border-bottom-width), 0px);
54
+ $border-left-width: setter(map-get($map, border-left-width), 0px);
55
+ $border-right-width: setter(map-get($map, border-right-width), 0px);
56
+ $border-top-width: setter(map-get($map, border-top-width), 0px);
57
+ $box-shadow: map-get($map, box-shadow);
58
+ $font-size: setter(
59
+ map-get($map, font-size),
83
60
  if(
84
- variable-exists(cadmin-navbar-padding-y),
85
- $cadmin-navbar-padding-y,
86
- null
61
+ variable-exists(font-size-base),
62
+ $font-size-base,
63
+ if(
64
+ variable-exists(cadmin-font-size-base),
65
+ $cadmin-font-size-base,
66
+ 1rem
67
+ )
87
68
  )
88
- )
89
- );
90
- $padding-y: if($padding-y == 0 or $padding-y == null, 0px, $padding-y);
91
- $link-height: setter(
92
- map-get($map, link-height),
93
- '#{$height} - #{$border-bottom-width} - #{$border-top-width} - #{$padding-y} * 2'
94
- );
95
-
96
- $link-margin-x: map-get($map, link-margin-x);
97
- $link-margin-y: setter(
98
- map-get($map, link-margin-y),
99
- calc(
100
- (
101
- (
102
- #{$height} - #{$border-bottom-width} - #{$border-top-width}
103
- ) - #{$link-height}
104
- ) * 0.5
105
- )
106
- );
107
- $link-padding-x: setter(
108
- map-get($map, link-padding-x),
109
- if(
110
- variable-exists(navbar-nav-link-padding-x),
111
- $navbar-nav-link-padding-x,
69
+ );
70
+ $min-height: map-get($map, min-height);
71
+ $padding-x: setter(
72
+ map-get($map, padding-x),
112
73
  if(
113
- variable-exists(cadmin-navbar-nav-link-padding-x),
114
- $cadmin-navbar-nav-link-padding-x,
115
- null
74
+ variable-exists(navbar-padding-x),
75
+ $navbar-padding-x,
76
+ if(
77
+ variable-exists(cadmin-navbar-padding-x),
78
+ $cadmin-navbar-padding-x,
79
+ null
80
+ )
81
+ )
82
+ );
83
+ $padding-y: setter(
84
+ map-get($map, padding-y),
85
+ if(
86
+ variable-exists(navbar-padding-y),
87
+ $navbar-padding-y,
88
+ if(
89
+ variable-exists(cadmin-navbar-padding-y),
90
+ $cadmin-navbar-padding-y,
91
+ null
92
+ )
116
93
  )
117
- )
118
- );
119
- $link-padding-y: setter(
120
- map-get($map, link-padding-y),
121
- (
94
+ );
95
+ $padding-y: if($padding-y == 0 or $padding-y == null, 0px, $padding-y);
96
+ $link-height: setter(
97
+ map-get($map, link-height),
98
+ '#{$height} - #{$border-bottom-width} - #{$border-top-width} - #{$padding-y} * 2'
99
+ );
100
+
101
+ $link-margin-x: map-get($map, link-margin-x);
102
+ $link-margin-y: setter(
103
+ map-get($map, link-margin-y),
122
104
  calc(
123
- (#{$link-height} - (#{$font-size} * #{$_line-height-base})) *
105
+ (
106
+ (
107
+ #{$height} -
108
+ #{$border-bottom-width} -
109
+ #{$border-top-width}
110
+ ) -
111
+ #{$link-height}
112
+ ) *
124
113
  0.5
125
114
  )
126
- )
127
- );
128
- $btn-font-size: setter(map-get($map, btn-font-size), $font-size);
129
- $btn-monospaced-font-size: map-get($map, btn-monospaced-font-size);
130
- $btn-monospaced-size: map-get($map, btn-monospaced-size);
131
- $btn-margin-x: setter(map-get($map, btn-margin-x), $link-padding-x);
132
- $btn-margin-y: setter(
133
- map-get($map, btn-margin-y),
134
- calc(
115
+ );
116
+ $link-padding-x: setter(
117
+ map-get($map, link-padding-x),
118
+ if(
119
+ variable-exists(navbar-nav-link-padding-x),
120
+ $navbar-nav-link-padding-x,
121
+ if(
122
+ variable-exists(cadmin-navbar-nav-link-padding-x),
123
+ $cadmin-navbar-nav-link-padding-x,
124
+ null
125
+ )
126
+ )
127
+ );
128
+ $link-padding-y: setter(
129
+ map-get($map, link-padding-y),
135
130
  (
136
- #{$height} - #{$border-bottom-width} - #{$border-top-width} -
137
- #{$padding-y} * 2 - #{if(
138
- $btn-monospaced-size,
139
- $btn-monospaced-size,
140
- if(
141
- variable-exists(nav-item-monospaced-size),
142
- $nav-item-monospaced-size,
131
+ calc(
132
+ (
133
+ #{$link-height} -
134
+ (#{$font-size} * #{$_line-height-base})
135
+ ) *
136
+ 0.5
137
+ )
138
+ )
139
+ );
140
+ $btn-font-size: setter(map-get($map, btn-font-size), $font-size);
141
+ $btn-monospaced-font-size: map-get($map, btn-monospaced-font-size);
142
+ $btn-monospaced-size: map-get($map, btn-monospaced-size);
143
+ $btn-margin-x: setter(map-get($map, btn-margin-x), $link-padding-x);
144
+ $btn-margin-y: setter(
145
+ map-get($map, btn-margin-y),
146
+ calc(
147
+ (
148
+ #{$height} -
149
+ #{$border-bottom-width} -
150
+ #{$border-top-width} -
151
+ #{$padding-y} *
152
+ 2 -
153
+ #{if(
154
+ $btn-monospaced-size,
155
+ $btn-monospaced-size,
143
156
  if(
144
- variable-exists(
145
- cadmin-nav-item-monospaced-size
146
- ),
147
- $cadmin-nav-item-monospaced-size,
148
- 2rem
157
+ variable-exists(nav-item-monospaced-size),
158
+ $nav-item-monospaced-size,
159
+ if(
160
+ variable-exists(
161
+ cadmin-nav-item-monospaced-size
162
+ ),
163
+ $cadmin-nav-item-monospaced-size,
164
+ 2rem
165
+ )
149
166
  )
150
- )
151
- )}
152
- ) * 0.5
153
- )
154
- );
155
- $btn-padding-x: setter(map-get($map, btn-padding-x), $link-padding-x);
156
- $btn-padding-y: setter(map-get($map, btn-padding-y), $link-padding-y);
157
- $form-control-height: map-get($map, form-control-height);
158
- $brand-font-size: setter(
159
- map-get($map, brand-font-size),
160
- if(
161
- variable-exists(navbar-brand-font-size),
162
- $navbar-brand-font-size,
167
+ )}
168
+ ) *
169
+ 0.5
170
+ )
171
+ );
172
+ $btn-padding-x: setter(map-get($map, btn-padding-x), $link-padding-x);
173
+ $btn-padding-y: setter(map-get($map, btn-padding-y), $link-padding-y);
174
+ $form-control-height: map-get($map, form-control-height);
175
+ $brand-font-size: setter(
176
+ map-get($map, brand-font-size),
163
177
  if(
164
- variable-exists(cadmin-navbar-brand-font-size),
165
- $cadmin-navbar-brand-font-size,
166
- 1rem
178
+ variable-exists(navbar-brand-font-size),
179
+ $navbar-brand-font-size,
180
+ if(
181
+ variable-exists(cadmin-navbar-brand-font-size),
182
+ $cadmin-navbar-brand-font-size,
183
+ 1rem
184
+ )
167
185
  )
168
- )
169
- );
170
- $brand-max-width: map-get($map, brand-max-width);
171
- $brand-margin-right: setter(
172
- map-get($map, brand-margin-right),
173
- $link-padding-x
174
- );
175
- $brand-padding-x: setter(map-get($map, brand-padding-x), $link-padding-x);
176
- $brand-padding-y: setter(
177
- map-get($map, brand-padding-y),
178
- (
186
+ );
187
+ $brand-max-width: map-get($map, brand-max-width);
188
+ $brand-margin-right: setter(
189
+ map-get($map, brand-margin-right),
190
+ $link-padding-x
191
+ );
192
+ $brand-padding-x: setter(
193
+ map-get($map, brand-padding-x),
194
+ $link-padding-x
195
+ );
196
+ $brand-padding-y: setter(
197
+ map-get($map, brand-padding-y),
198
+ (
199
+ calc(
200
+ (
201
+ #{$height} -
202
+ #{$border-bottom-width} -
203
+ #{$border-top-width} -
204
+ #{$padding-y} *
205
+ 2 -
206
+ (#{$brand-font-size} * #{$_line-height-base})
207
+ ) *
208
+ 0.5
209
+ )
210
+ )
211
+ );
212
+ $title-font-size: map-get($map, title-font-size);
213
+ $title-font-weight: map-get($map, title-font-weight);
214
+ $title-margin-bottom: map-get($map, title-margin-bottom);
215
+ $title-text-transform: map-get($map, title-text-transform);
216
+ $nav-item-dropdown-margin-top: map-get(
217
+ $map,
218
+ nav-item-dropdown-margin-top
219
+ );
220
+
221
+ $height-mobile: setter(map-get($map, height-mobile), $height);
222
+ $font-size-mobile: setter(map-get($map, font-size-mobile), $font-size);
223
+ $min-height-mobile: map-get($map, min-height-mobile);
224
+ $link-height-mobile: setter(
225
+ map-get($map, link-height-mobile),
226
+ '#{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} - #{$padding-y} * 2'
227
+ );
228
+ $link-margin-x-mobile: setter(
229
+ map-get($map, link-margin-x-mobile),
230
+ $link-margin-x
231
+ );
232
+ $link-margin-y-mobile: setter(
233
+ map-get($map, link-margin-y-mobile),
179
234
  calc(
180
235
  (
181
- #{$height} - #{$border-bottom-width} - #{$border-top-width} -
182
- #{$padding-y} * 2 -
183
- (#{$brand-font-size} * #{$_line-height-base})
184
- ) * 0.5
236
+ (
237
+ #{$height-mobile} -
238
+ #{$border-bottom-width} -
239
+ #{$border-top-width}
240
+ ) -
241
+ #{$link-height-mobile}
242
+ ) *
243
+ 0.5
185
244
  )
186
- )
187
- );
188
- $title-font-size: map-get($map, title-font-size);
189
- $title-font-weight: map-get($map, title-font-weight);
190
- $title-margin-bottom: map-get($map, title-margin-bottom);
191
- $title-text-transform: map-get($map, title-text-transform);
192
- $nav-item-dropdown-margin-top: map-get($map, nav-item-dropdown-margin-top);
193
-
194
- $height-mobile: setter(map-get($map, height-mobile), $height);
195
- $font-size-mobile: setter(map-get($map, font-size-mobile), $font-size);
196
- $min-height-mobile: map-get($map, min-height-mobile);
197
- $link-height-mobile: setter(
198
- map-get($map, link-height-mobile),
199
- '#{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} - #{$padding-y} * 2'
200
- );
201
- $link-margin-x-mobile: setter(
202
- map-get($map, link-margin-x-mobile),
203
- $link-margin-x
204
- );
205
- $link-margin-y-mobile: setter(
206
- map-get($map, link-margin-y-mobile),
207
- calc(
208
- (
209
- (
210
- #{$height-mobile} - #{$border-bottom-width} - #{$border-top-width}
211
- ) - #{$link-height-mobile}
212
- ) * 0.5
213
- )
214
- );
215
- $link-padding-x-mobile: setter(
216
- map-get($map, link-padding-x-mobile),
217
- $link-padding-x
218
- );
219
- $link-padding-y-mobile: setter(
220
- map-get($map, link-padding-y-mobile),
221
- calc(
222
- (
223
- #{$link-height-mobile} - (#{$font-size-mobile} * #{$_line-height-base})
224
- ) * 0.5
225
- )
226
- );
227
- $btn-font-size-mobile: setter(
228
- map-get($map, btn-font-size-mobile),
229
- $font-size-mobile
230
- );
231
- $btn-monospaced-font-size-mobile: setter(
232
- map-get($map, btn-monospaced-font-size-mobile),
233
- $btn-monospaced-font-size
234
- );
235
- $btn-monospaced-size-mobile: setter(
236
- map-get($map, btn-monospaced-size-mobile),
237
- $btn-monospaced-size
238
- );
239
- $btn-margin-x-mobile: setter(
240
- map-get($map, btn-margin-x-mobile),
241
- $link-padding-x-mobile
242
- );
243
- $btn-margin-y-mobile: setter(
244
- map-get($map, btn-margin-y-mobile),
245
- calc(
246
- (
247
- #{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} -
248
- #{$padding-y} * 2 - #{if(
249
- $btn-monospaced-size-mobile,
250
- $btn-monospaced-size-mobile,
251
- if(
252
- variable-exists(nav-item-monospaced-size),
253
- $nav-item-monospaced-size,
254
- if(
255
- variable-exists(
256
- cadmin-nav-item-monospaced-size
257
- ),
258
- $cadmin-nav-item-monospaced-size,
259
- 2rem
260
- )
261
- )
262
- )}
263
- ) * 0.5
264
- )
265
- );
266
- $btn-padding-x-mobile: setter(
267
- map-get($map, btn-padding-x-mobile),
268
- $link-padding-x-mobile
269
- );
270
- $btn-padding-y-mobile: setter(
271
- map-get($map, btn-padding-y-mobile),
272
- $link-padding-x-mobile
273
- );
274
- $form-control-height-mobile: map-get($map, form-control-height-mobile);
275
- $brand-font-size-mobile: setter(
276
- map-get($map, brand-font-size-mobile),
277
- if(
278
- variable-exists(font-size-lg-mobile),
279
- $font-size-lg-mobile,
280
- if(
281
- variable-exists(cadmin-font-size-lg-mobile),
282
- $cadmin-font-size-lg-mobile,
283
- null
245
+ );
246
+ $link-padding-x-mobile: setter(
247
+ map-get($map, link-padding-x-mobile),
248
+ $link-padding-x
249
+ );
250
+ $link-padding-y-mobile: setter(
251
+ map-get($map, link-padding-y-mobile),
252
+ calc(
253
+ (
254
+ #{$link-height-mobile} -
255
+ (#{$font-size-mobile} * #{$_line-height-base})
256
+ ) *
257
+ 0.5
284
258
  )
285
- )
286
- );
287
- $brand-margin-right-mobile: setter(
288
- map-get($map, brand-margin-right-mobile),
289
- 0
290
- );
291
- $brand-padding-x-mobile: setter(
292
- map-get($map, brand-padding-x-mobile),
293
- $link-padding-x-mobile
294
- );
295
- $brand-padding-y-mobile: setter(
296
- map-get($map, brand-padding-y-mobile),
297
- (
259
+ );
260
+ $btn-font-size-mobile: setter(
261
+ map-get($map, btn-font-size-mobile),
262
+ $font-size-mobile
263
+ );
264
+ $btn-monospaced-font-size-mobile: setter(
265
+ map-get($map, btn-monospaced-font-size-mobile),
266
+ $btn-monospaced-font-size
267
+ );
268
+ $btn-monospaced-size-mobile: setter(
269
+ map-get($map, btn-monospaced-size-mobile),
270
+ $btn-monospaced-size
271
+ );
272
+ $btn-margin-x-mobile: setter(
273
+ map-get($map, btn-margin-x-mobile),
274
+ $link-padding-x-mobile
275
+ );
276
+ $btn-margin-y-mobile: setter(
277
+ map-get($map, btn-margin-y-mobile),
298
278
  calc(
299
279
  (
300
- #{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} -
301
- #{$padding-y} * 2 - #{$brand-font-size-mobile} * #{$_line-height-base}
302
- ) * 0.5
280
+ #{$height-mobile} -
281
+ #{$border-bottom-width} -
282
+ #{$border-top-width} -
283
+ #{$padding-y} *
284
+ 2 -
285
+ #{if(
286
+ $btn-monospaced-size-mobile,
287
+ $btn-monospaced-size-mobile,
288
+ if(
289
+ variable-exists(nav-item-monospaced-size),
290
+ $nav-item-monospaced-size,
291
+ if(
292
+ variable-exists(
293
+ cadmin-nav-item-monospaced-size
294
+ ),
295
+ $cadmin-nav-item-monospaced-size,
296
+ 2rem
297
+ )
298
+ )
299
+ )}
300
+ ) *
301
+ 0.5
303
302
  )
304
- )
305
- );
306
- $collapse-dropdown-item-padding-x-mobile: map-get(
307
- $map,
308
- collapse-dropdown-item-padding-x-mobile
309
- );
310
- $collapse-dropdown-item-padding-y-mobile: map-get(
311
- $map,
312
- collapse-dropdown-item-padding-y-mobile
313
- );
314
-
315
- $toggler-font-size: setter(
316
- map-get($map, toggler-font-size),
317
- if(
318
- variable-exists(navbar-toggler-font-size),
319
- $navbar-toggler-font-size,
303
+ );
304
+ $btn-padding-x-mobile: setter(
305
+ map-get($map, btn-padding-x-mobile),
306
+ $link-padding-x-mobile
307
+ );
308
+ $btn-padding-y-mobile: setter(
309
+ map-get($map, btn-padding-y-mobile),
310
+ $link-padding-x-mobile
311
+ );
312
+ $form-control-height-mobile: map-get($map, form-control-height-mobile);
313
+ $brand-font-size-mobile: setter(
314
+ map-get($map, brand-font-size-mobile),
320
315
  if(
321
- variable-exists(cadmin-navbar-toggler-font-size),
322
- $cadmin-navbar-toggler-font-size,
323
- null
316
+ variable-exists(font-size-lg-mobile),
317
+ $font-size-lg-mobile,
318
+ if(
319
+ variable-exists(cadmin-font-size-lg-mobile),
320
+ $cadmin-font-size-lg-mobile,
321
+ null
322
+ )
323
+ )
324
+ );
325
+ $brand-margin-right-mobile: setter(
326
+ map-get($map, brand-margin-right-mobile),
327
+ 0
328
+ );
329
+ $brand-padding-x-mobile: setter(
330
+ map-get($map, brand-padding-x-mobile),
331
+ $link-padding-x-mobile
332
+ );
333
+ $brand-padding-y-mobile: setter(
334
+ map-get($map, brand-padding-y-mobile),
335
+ (
336
+ calc(
337
+ (
338
+ #{$height-mobile} -
339
+ #{$border-bottom-width} -
340
+ #{$border-top-width} -
341
+ #{$padding-y} *
342
+ 2 -
343
+ #{$brand-font-size-mobile} *
344
+ #{$_line-height-base}
345
+ ) *
346
+ 0.5
347
+ )
324
348
  )
325
- )
326
- );
327
- $toggler-height: setter(
328
- map-get($map, toggler-height),
329
- calc(#{$height-mobile} * 0.66667)
330
- );
331
- $toggler-margin-x: setter(
332
- map-get($map, toggler-margin-x),
333
- $link-padding-x-mobile
334
- );
335
- $toggler-margin-y: map-get($map, toggler-margin-y);
336
- $toggler-padding-x: setter(
337
- map-get($map, toggler-padding-x),
338
- if(
339
- variable-exists(navbar-toggler-padding-x),
340
- $navbar-toggler-padding-x,
349
+ );
350
+ $collapse-dropdown-item-padding-x-mobile: map-get(
351
+ $map,
352
+ collapse-dropdown-item-padding-x-mobile
353
+ );
354
+ $collapse-dropdown-item-padding-y-mobile: map-get(
355
+ $map,
356
+ collapse-dropdown-item-padding-y-mobile
357
+ );
358
+
359
+ $toggler-font-size: setter(
360
+ map-get($map, toggler-font-size),
341
361
  if(
342
- variable-exists(cadmin-navbar-toggler-padding-x),
343
- $cadmin-navbar-toggler-padding-x,
344
- null
362
+ variable-exists(navbar-toggler-font-size),
363
+ $navbar-toggler-font-size,
364
+ if(
365
+ variable-exists(cadmin-navbar-toggler-font-size),
366
+ $cadmin-navbar-toggler-font-size,
367
+ null
368
+ )
345
369
  )
346
- )
347
- );
348
- $toggler-padding-y: setter(
349
- map-get($map, toggler-padding-y),
350
- if(
351
- variable-exists(navbar-toggler-padding-y),
352
- $navbar-toggler-padding-y,
370
+ );
371
+ $toggler-height: setter(
372
+ map-get($map, toggler-height),
373
+ calc(#{$height-mobile} * 0.66667)
374
+ );
375
+ $toggler-margin-x: setter(
376
+ map-get($map, toggler-margin-x),
377
+ $link-padding-x-mobile
378
+ );
379
+ $toggler-margin-y: map-get($map, toggler-margin-y);
380
+ $toggler-padding-x: setter(
381
+ map-get($map, toggler-padding-x),
353
382
  if(
354
- variable-exists(cadmin-navbar-toggler-padding-y),
355
- $cadmin-navbar-toggler-padding-y,
356
- null
383
+ variable-exists(navbar-toggler-padding-x),
384
+ $navbar-toggler-padding-x,
385
+ if(
386
+ variable-exists(cadmin-navbar-toggler-padding-x),
387
+ $cadmin-navbar-toggler-padding-x,
388
+ null
389
+ )
357
390
  )
358
- )
359
- );
360
-
361
- $toggler-link-font-size: setter(
362
- map-get($map, toggler-link-font-size),
363
- $font-size-mobile
364
- );
365
- $toggler-link-height: setter(map-get($map, toggler-link-height), auto);
366
- $toggler-link-line-height: setter(
367
- map-get($map, toggler-link-line-height),
368
- $_line-height-base
369
- );
370
- $toggler-link-margin-x: setter(map-get($map, toggler-link-margin-x), 0);
371
- $toggler-link-margin-y: map-get($map, toggler-link-margin-y);
372
- $toggler-link-padding-x: setter(
373
- map-get($map, toggler-link-padding-x),
374
- $link-padding-x-mobile
375
- );
376
- $toggler-link-padding-y: setter(
377
- map-get($map, toggler-link-padding-y),
378
- calc(
379
- (
380
- #{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} -
381
- #{$padding-y} * 2 - #{$toggler-link-font-size} * #{$toggler-link-line-height}
382
- ) * 0.5
383
- )
384
- );
385
-
386
- $active-border-bottom-width: setter(
387
- map-get($map, active-border-bottom-width),
388
- 0.125rem
389
- );
390
- $active-border-offset-x: map-get($map, active-border-offset-x);
391
- $active-border-offset-bottom: setter(
392
- map-get($map, active-border-offset-bottom),
393
- calc((#{$border-bottom-width} + #{$padding-y} + #{$link-margin-y}) * -1)
394
- );
395
- $active-border-offset-top: map-get($map, active-border-offset-top);
396
-
397
- $active-border-offset-bottom-mobile: setter(
398
- map-get($map, active-border-offset-bottom-mobile),
399
- calc(
400
- (#{$border-bottom-width} + #{$padding-y} + #{$link-margin-y-mobile}) *
401
- -1
402
- )
403
- );
404
-
405
- @if ($enabled) {
406
- @include border-radius(
391
+ );
392
+ $toggler-padding-y: setter(
393
+ map-get($map, toggler-padding-y),
407
394
  if(
408
- variable-exists(navbar-border-radius),
409
- $navbar-border-radius,
395
+ variable-exists(navbar-toggler-padding-y),
396
+ $navbar-toggler-padding-y,
410
397
  if(
411
- variable-exists(cadmin-navbar-border-radius),
412
- $cadmin-navbar-border-radius,
398
+ variable-exists(cadmin-navbar-toggler-padding-y),
399
+ $cadmin-navbar-toggler-padding-y,
413
400
  null
414
401
  )
415
402
  )
416
403
  );
417
404
 
418
- border-width: $border-top-width
419
- $border-right-width
420
- $border-bottom-width
421
- $border-left-width;
405
+ $toggler-link-font-size: setter(
406
+ map-get($map, toggler-link-font-size),
407
+ $font-size-mobile
408
+ );
409
+ $toggler-link-height: setter(map-get($map, toggler-link-height), auto);
410
+ $toggler-link-line-height: setter(
411
+ map-get($map, toggler-link-line-height),
412
+ $_line-height-base
413
+ );
414
+ $toggler-link-margin-x: setter(map-get($map, toggler-link-margin-x), 0);
415
+ $toggler-link-margin-y: map-get($map, toggler-link-margin-y);
416
+ $toggler-link-padding-x: setter(
417
+ map-get($map, toggler-link-padding-x),
418
+ $link-padding-x-mobile
419
+ );
420
+ $toggler-link-padding-y: setter(
421
+ map-get($map, toggler-link-padding-y),
422
+ calc(
423
+ (
424
+ #{$height-mobile} -
425
+ #{$border-bottom-width} -
426
+ #{$border-top-width} -
427
+ #{$padding-y} *
428
+ 2 -
429
+ #{$toggler-link-font-size} *
430
+ #{$toggler-link-line-height}
431
+ ) *
432
+ 0.5
433
+ )
434
+ );
422
435
 
423
- @include box-shadow($box-shadow);
436
+ $active-border-bottom-width: setter(
437
+ map-get($map, active-border-bottom-width),
438
+ 0.125rem
439
+ );
440
+ $active-border-offset-x: map-get($map, active-border-offset-x);
441
+ $active-border-offset-bottom: setter(
442
+ map-get($map, active-border-offset-bottom),
443
+ calc(
444
+ (#{$border-bottom-width} + #{$padding-y} + #{$link-margin-y}) *
445
+ -1
446
+ )
447
+ );
448
+ $active-border-offset-top: map-get($map, active-border-offset-top);
424
449
 
425
- font-size: $font-size;
426
- min-height: $min-height;
427
- padding: $padding-y $padding-x;
450
+ $active-border-offset-bottom-mobile: setter(
451
+ map-get($map, active-border-offset-bottom-mobile),
452
+ calc(
453
+ (
454
+ #{$border-bottom-width} +
455
+ #{$padding-y} +
456
+ #{$link-margin-y-mobile}
457
+ ) *
458
+ -1
459
+ )
460
+ );
428
461
 
429
- .container,
430
- .container-fluid {
431
- padding-left: $container-padding-x-mobile;
432
- padding-right: $container-padding-x-mobile;
433
- }
462
+ @if ($enabled) {
463
+ @include border-radius(
464
+ if(
465
+ variable-exists(navbar-border-radius),
466
+ $navbar-border-radius,
467
+ if(
468
+ variable-exists(cadmin-navbar-border-radius),
469
+ $cadmin-navbar-border-radius,
470
+ null
471
+ )
472
+ )
473
+ );
434
474
 
435
- .navbar-toggler {
436
- font-size: $toggler-font-size;
437
- height: $toggler-height;
438
- margin-bottom: $toggler-margin-y;
439
- margin-left: $toggler-margin-x;
440
- margin-right: $toggler-margin-x;
441
- margin-top: $toggler-margin-y;
442
- padding-bottom: $toggler-padding-y;
443
- padding-left: $toggler-padding-x;
444
- padding-right: $toggler-padding-x;
445
- padding-top: $toggler-padding-y;
446
-
447
- @if ($enable-c-inner) {
448
- .c-inner {
449
- margin-bottom: math-sign($toggler-padding-y);
450
- margin-left: math-sign($toggler-padding-x);
451
- margin-right: math-sign($toggler-padding-x);
452
- margin-top: math-sign($toggler-padding-y);
453
- }
454
- }
455
- }
475
+ border-width: $border-top-width
476
+ $border-right-width
477
+ $border-bottom-width
478
+ $border-left-width;
456
479
 
457
- .navbar-toggler-link {
458
- font-size: $toggler-link-font-size;
459
- height: $toggler-link-height;
460
- line-height: $toggler-link-line-height;
461
- margin-bottom: $toggler-link-margin-y;
462
- margin-left: $toggler-link-margin-x;
463
- margin-right: $toggler-link-margin-x;
464
- margin-top: $toggler-link-margin-y;
465
- padding-bottom: $toggler-link-padding-y;
466
- padding-left: $toggler-link-padding-x;
467
- padding-right: $toggler-link-padding-x;
468
- padding-top: $toggler-link-padding-y;
469
-
470
- @if ($enable-c-inner) {
471
- .c-inner {
472
- margin-bottom: math-sign($toggler-link-padding-y);
473
- margin-left: math-sign($toggler-link-padding-x);
474
- margin-right: math-sign($toggler-link-padding-x);
475
- margin-top: math-sign($toggler-link-padding-y);
476
- }
480
+ @include box-shadow($box-shadow);
481
+
482
+ font-size: $font-size;
483
+ min-height: $min-height;
484
+ padding: $padding-y $padding-x;
485
+
486
+ .container,
487
+ .container-fluid {
488
+ padding-left: $container-padding-x-mobile;
489
+ padding-right: $container-padding-x-mobile;
477
490
  }
478
- }
479
491
 
480
- .navbar-brand {
481
- font-size: $brand-font-size-mobile;
482
- margin-right: $brand-margin-right-mobile;
483
- max-width: $brand-max-width;
484
- padding-bottom: $brand-padding-y-mobile;
485
- padding-left: $brand-padding-x-mobile;
486
- padding-right: $brand-padding-x-mobile;
487
- padding-top: $brand-padding-y-mobile;
488
-
489
- @if ($enable-c-inner) {
490
- .c-inner {
491
- margin-bottom: math-sign($brand-padding-y-mobile);
492
- margin-left: math-sign($brand-padding-x-mobile);
493
- margin-right: math-sign($brand-padding-x-mobile);
494
- margin-top: math-sign($brand-padding-y-mobile);
492
+ .navbar-toggler {
493
+ font-size: $toggler-font-size;
494
+ height: $toggler-height;
495
+ margin-bottom: $toggler-margin-y;
496
+ margin-left: $toggler-margin-x;
497
+ margin-right: $toggler-margin-x;
498
+ margin-top: $toggler-margin-y;
499
+ padding-bottom: $toggler-padding-y;
500
+ padding-left: $toggler-padding-x;
501
+ padding-right: $toggler-padding-x;
502
+ padding-top: $toggler-padding-y;
503
+
504
+ @if ($enable-c-inner) {
505
+ .c-inner {
506
+ margin-bottom: math-sign($toggler-padding-y);
507
+ margin-left: math-sign($toggler-padding-x);
508
+ margin-right: math-sign($toggler-padding-x);
509
+ margin-top: math-sign($toggler-padding-y);
510
+ }
495
511
  }
496
512
  }
497
- }
498
-
499
- .navbar-title {
500
- font-size: $title-font-size;
501
- font-weight: $title-font-weight;
502
- margin-bottom: $title-margin-bottom;
503
- text-transform: $title-text-transform;
504
- }
505
513
 
506
- .navbar-nav {
507
- .nav-btn {
508
- font-size: $btn-font-size-mobile;
509
- height: $btn-monospaced-size-mobile;
510
- margin-bottom: $btn-margin-y-mobile;
511
- margin-left: $btn-margin-x-mobile;
512
- margin-right: $btn-margin-x-mobile;
513
- margin-top: $btn-margin-y-mobile;
514
- padding-bottom: $btn-padding-y-mobile;
515
- padding-left: $btn-padding-x-mobile;
516
- padding-right: $btn-padding-x-mobile;
517
- padding-top: $btn-padding-y-mobile;
518
- min-width: $btn-monospaced-size-mobile;
514
+ .navbar-toggler-link {
515
+ font-size: $toggler-link-font-size;
516
+ height: $toggler-link-height;
517
+ line-height: $toggler-link-line-height;
518
+ margin-bottom: $toggler-link-margin-y;
519
+ margin-left: $toggler-link-margin-x;
520
+ margin-right: $toggler-link-margin-x;
521
+ margin-top: $toggler-link-margin-y;
522
+ padding-bottom: $toggler-link-padding-y;
523
+ padding-left: $toggler-link-padding-x;
524
+ padding-right: $toggler-link-padding-x;
525
+ padding-top: $toggler-link-padding-y;
519
526
 
520
527
  @if ($enable-c-inner) {
521
528
  .c-inner {
522
- margin-bottom: math-sign($btn-padding-y-mobile);
523
- margin-left: math-sign($btn-padding-x-mobile);
524
- margin-right: math-sign($btn-padding-x-mobile);
525
- margin-top: math-sign($btn-padding-y-mobile);
529
+ margin-bottom: math-sign($toggler-link-padding-y);
530
+ margin-left: math-sign($toggler-link-padding-x);
531
+ margin-right: math-sign($toggler-link-padding-x);
532
+ margin-top: math-sign($toggler-link-padding-y);
526
533
  }
527
534
  }
528
535
  }
529
536
 
530
- .nav-btn-monospaced {
531
- font-size: $btn-monospaced-font-size-mobile;
532
- padding: 0;
537
+ .navbar-brand {
538
+ font-size: $brand-font-size-mobile;
539
+ margin-right: $brand-margin-right-mobile;
540
+ max-width: $brand-max-width;
541
+ padding-bottom: $brand-padding-y-mobile;
542
+ padding-left: $brand-padding-x-mobile;
543
+ padding-right: $brand-padding-x-mobile;
544
+ padding-top: $brand-padding-y-mobile;
533
545
 
534
546
  @if ($enable-c-inner) {
535
547
  .c-inner {
536
- margin: 0;
548
+ margin-bottom: math-sign($brand-padding-y-mobile);
549
+ margin-left: math-sign($brand-padding-x-mobile);
550
+ margin-right: math-sign($brand-padding-x-mobile);
551
+ margin-top: math-sign($brand-padding-y-mobile);
537
552
  }
538
553
  }
539
554
  }
540
555
 
541
- .nav-item {
542
- > .custom-control,
543
- > .form-check {
556
+ .navbar-title {
557
+ font-size: $title-font-size;
558
+ font-weight: $title-font-weight;
559
+ margin-bottom: $title-margin-bottom;
560
+ text-transform: $title-text-transform;
561
+ }
562
+
563
+ .navbar-nav {
564
+ .nav-btn {
565
+ font-size: $btn-font-size-mobile;
566
+ height: $btn-monospaced-size-mobile;
567
+ margin-bottom: $btn-margin-y-mobile;
544
568
  margin-left: $btn-margin-x-mobile;
545
569
  margin-right: $btn-margin-x-mobile;
570
+ margin-top: $btn-margin-y-mobile;
571
+ padding-bottom: $btn-padding-y-mobile;
572
+ padding-left: $btn-padding-x-mobile;
573
+ padding-right: $btn-padding-x-mobile;
574
+ padding-top: $btn-padding-y-mobile;
575
+ min-width: $btn-monospaced-size-mobile;
576
+
577
+ @if ($enable-c-inner) {
578
+ .c-inner {
579
+ margin-bottom: math-sign($btn-padding-y-mobile);
580
+ margin-left: math-sign($btn-padding-x-mobile);
581
+ margin-right: math-sign($btn-padding-x-mobile);
582
+ margin-top: math-sign($btn-padding-y-mobile);
583
+ }
584
+ }
546
585
  }
547
- }
548
586
 
549
- .nav-link,
550
- .navbar-text {
551
- margin-bottom: $link-margin-y-mobile;
552
- margin-left: $link-margin-x-mobile;
553
- margin-right: $link-margin-x-mobile;
554
- margin-top: $link-margin-y-mobile;
555
- padding-bottom: $link-padding-y-mobile;
556
- padding-left: $link-padding-x-mobile;
557
- padding-right: $link-padding-x-mobile;
558
- padding-top: $link-padding-y-mobile;
587
+ .nav-btn-monospaced {
588
+ font-size: $btn-monospaced-font-size-mobile;
589
+ padding: 0;
559
590
 
560
- @if ($enable-c-inner) {
561
- .c-inner {
562
- margin-bottom: math-sign($link-padding-y-mobile);
563
- margin-left: math-sign($link-padding-x-mobile);
564
- margin-right: math-sign($link-padding-x-mobile);
565
- margin-top: math-sign($link-padding-y-mobile);
591
+ @if ($enable-c-inner) {
592
+ .c-inner {
593
+ margin: 0;
594
+ }
566
595
  }
567
596
  }
568
- }
569
-
570
- .nav-link-monospaced {
571
- font-size: $btn-monospaced-font-size-mobile;
572
- margin-bottom: $btn-margin-y-mobile;
573
- margin-left: $btn-margin-x-mobile;
574
- margin-right: $btn-margin-x-mobile;
575
- margin-top: $btn-margin-y-mobile;
576
- padding: 0;
577
597
 
578
- @if ($enable-c-inner) {
579
- .c-inner {
580
- margin: 0;
598
+ .nav-item {
599
+ > .custom-control,
600
+ > .form-check {
601
+ margin-left: $btn-margin-x-mobile;
602
+ margin-right: $btn-margin-x-mobile;
581
603
  }
582
604
  }
583
- }
584
- }
585
605
 
586
- .dropdown-menu {
587
- margin-top: $nav-item-dropdown-margin-top;
588
- }
606
+ .nav-link,
607
+ .navbar-text {
608
+ margin-bottom: $link-margin-y-mobile;
609
+ margin-left: $link-margin-x-mobile;
610
+ margin-right: $link-margin-x-mobile;
611
+ margin-top: $link-margin-y-mobile;
612
+ padding-bottom: $link-padding-y-mobile;
613
+ padding-left: $link-padding-x-mobile;
614
+ padding-right: $link-padding-x-mobile;
615
+ padding-top: $link-padding-y-mobile;
616
+
617
+ @if ($enable-c-inner) {
618
+ .c-inner {
619
+ margin-bottom: math-sign($link-padding-y-mobile);
620
+ margin-left: math-sign($link-padding-x-mobile);
621
+ margin-right: math-sign($link-padding-x-mobile);
622
+ margin-top: math-sign($link-padding-y-mobile);
623
+ }
624
+ }
625
+ }
589
626
 
590
- // Navbar Expand
627
+ .nav-link-monospaced {
628
+ font-size: $btn-monospaced-font-size-mobile;
629
+ margin-bottom: $btn-margin-y-mobile;
630
+ margin-left: $btn-margin-x-mobile;
631
+ margin-right: $btn-margin-x-mobile;
632
+ margin-top: $btn-margin-y-mobile;
633
+ padding: 0;
591
634
 
592
- &.navbar-expand {
593
- @each $breakpoint in map-keys($breakpoints) {
594
- $next: breakpoint-next($breakpoint, $breakpoints);
595
- $infix: breakpoint-infix($next, $breakpoints);
635
+ @if ($enable-c-inner) {
636
+ .c-inner {
637
+ margin: 0;
638
+ }
639
+ }
640
+ }
641
+ }
596
642
 
597
- &#{$infix} {
598
- // .navbar-expand, sm, md, lg, xl
599
- @if not($infix == '') {
600
- // .navbar-expand-sm, md, lg, xl
601
- @include media-breakpoint-down($breakpoint) {
602
- min-height: $min-height-mobile;
643
+ .dropdown-menu {
644
+ margin-top: $nav-item-dropdown-margin-top;
645
+ }
603
646
 
604
- &.navbar-collapse-absolute {
605
- .navbar-collapse {
606
- border-color: transparent;
607
- border-style: solid;
608
- border-width: 0 $border-right-width
609
- $border-bottom-width $border-left-width;
610
-
611
- @include box-shadow($box-shadow);
612
-
613
- left: -$border-left-width;
614
- margin-top: $border-bottom-width;
615
- padding-bottom: $padding-y;
616
- padding-left: $padding-x;
617
- padding-right: $padding-x;
618
- padding-top: $padding-y;
619
- right: -$border-right-width;
647
+ // Navbar Expand
648
+
649
+ &.navbar-expand {
650
+ @each $breakpoint in map-keys($breakpoints) {
651
+ $next: breakpoint-next($breakpoint, $breakpoints);
652
+ $infix: breakpoint-infix($next, $breakpoints);
653
+
654
+ &#{$infix} {
655
+ // .navbar-expand, sm, md, lg, xl
656
+ @if not($infix == '') {
657
+ // .navbar-expand-sm, md, lg, xl
658
+ @include media-breakpoint-down($breakpoint) {
659
+ min-height: $min-height-mobile;
660
+
661
+ &.navbar-collapse-absolute {
662
+ .navbar-collapse {
663
+ border-color: transparent;
664
+ border-style: solid;
665
+ border-width: 0 $border-right-width
666
+ $border-bottom-width
667
+ $border-left-width;
668
+
669
+ @include box-shadow($box-shadow);
670
+
671
+ left: -$border-left-width;
672
+ margin-top: $border-bottom-width;
673
+ padding-bottom: $padding-y;
674
+ padding-left: $padding-x;
675
+ padding-right: $padding-x;
676
+ padding-top: $padding-y;
677
+ right: -$border-right-width;
678
+ }
620
679
  }
621
- }
622
680
 
623
- .navbar-collapse {
624
- .navbar-nav {
625
- .dropdown-divider {
626
- margin-left: -$padding-x;
627
- margin-right: -$padding-x;
628
- }
681
+ .navbar-collapse {
682
+ .navbar-nav {
683
+ .dropdown-divider {
684
+ margin-left: -$padding-x;
685
+ margin-right: -$padding-x;
686
+ }
629
687
 
630
- .dropdown-item {
631
- padding-bottom: $collapse-dropdown-item-padding-y-mobile;
632
- padding-left: $collapse-dropdown-item-padding-x-mobile;
633
- padding-right: $collapse-dropdown-item-padding-x-mobile;
634
- padding-top: $collapse-dropdown-item-padding-y-mobile;
688
+ .dropdown-item {
689
+ padding-bottom: $collapse-dropdown-item-padding-y-mobile;
690
+ padding-left: $collapse-dropdown-item-padding-x-mobile;
691
+ padding-right: $collapse-dropdown-item-padding-x-mobile;
692
+ padding-top: $collapse-dropdown-item-padding-y-mobile;
693
+ }
635
694
  }
636
695
  }
637
- }
638
696
 
639
- .navbar-form {
640
- height: calc(
641
- #{$height-mobile} - #{$border-bottom-width} -
642
- #{$border-top-width}
643
- );
644
- padding-bottom: $link-padding-y-mobile;
645
- padding-left: $link-padding-x-mobile;
646
- padding-right: $link-padding-x-mobile;
647
- padding-top: $link-padding-y-mobile;
648
-
649
- .form-control {
650
- height: $form-control-height-mobile;
651
- padding-bottom: 0;
652
- padding-top: 0;
697
+ .navbar-form {
698
+ height: calc(
699
+ #{$height-mobile} - #{$border-bottom-width} -
700
+ #{$border-top-width}
701
+ );
702
+ padding-bottom: $link-padding-y-mobile;
703
+ padding-left: $link-padding-x-mobile;
704
+ padding-right: $link-padding-x-mobile;
705
+ padding-top: $link-padding-y-mobile;
706
+
707
+ .form-control {
708
+ height: $form-control-height-mobile;
709
+ padding-bottom: 0;
710
+ padding-top: 0;
711
+ }
653
712
  }
654
713
  }
655
714
  }
656
- }
657
715
 
658
- @include media-breakpoint-up($next) {
659
- .container,
660
- .container-fluid {
661
- @if ($scaling-navbar) {
662
- padding-left: $container-padding-x;
663
- padding-right: $container-padding-x;
716
+ @include media-breakpoint-up($next) {
717
+ .container,
718
+ .container-fluid {
719
+ @if ($scaling-navbar) {
720
+ padding-left: $container-padding-x;
721
+ padding-right: $container-padding-x;
722
+ }
664
723
  }
665
- }
666
724
 
667
- .navbar-brand {
668
- @if ($scaling-navbar) {
669
- font-size: $brand-font-size;
670
- margin-right: $brand-margin-right;
671
- padding-bottom: $brand-padding-y;
672
- padding-left: $brand-padding-x;
673
- padding-right: $brand-padding-x;
674
- padding-top: $brand-padding-y;
675
-
676
- @if ($enable-c-inner) {
677
- .c-inner {
678
- margin-bottom: math-sign(
679
- $brand-padding-y
680
- );
681
- margin-left: math-sign(
682
- $brand-padding-x
683
- );
684
- margin-right: math-sign(
685
- $brand-padding-x
686
- );
687
- margin-top: math-sign($brand-padding-y);
725
+ .navbar-brand {
726
+ @if ($scaling-navbar) {
727
+ font-size: $brand-font-size;
728
+ margin-right: $brand-margin-right;
729
+ padding-bottom: $brand-padding-y;
730
+ padding-left: $brand-padding-x;
731
+ padding-right: $brand-padding-x;
732
+ padding-top: $brand-padding-y;
733
+
734
+ @if ($enable-c-inner) {
735
+ .c-inner {
736
+ margin-bottom: math-sign(
737
+ $brand-padding-y
738
+ );
739
+ margin-left: math-sign(
740
+ $brand-padding-x
741
+ );
742
+ margin-right: math-sign(
743
+ $brand-padding-x
744
+ );
745
+ margin-top: math-sign(
746
+ $brand-padding-y
747
+ );
748
+ }
688
749
  }
689
750
  }
690
751
  }
691
- }
692
752
 
693
- .navbar-form {
694
- @if ($scaling-navbar) {
695
- height: calc(
696
- #{$height} -
697
- #{$border-bottom-width} -
698
- #{$border-top-width}
699
- );
700
- padding-left: $link-padding-x;
701
- padding-right: $link-padding-x;
702
-
703
- > .container,
704
- > .container-fluid {
705
- padding-left: 0;
706
- padding-right: 0;
707
- }
753
+ .navbar-form {
754
+ @if ($scaling-navbar) {
755
+ height: calc(
756
+ #{$height} -
757
+ #{$border-bottom-width} -
758
+ #{$border-top-width}
759
+ );
760
+ padding-left: $link-padding-x;
761
+ padding-right: $link-padding-x;
762
+
763
+ > .container,
764
+ > .container-fluid {
765
+ padding-left: 0;
766
+ padding-right: 0;
767
+ }
708
768
 
709
- .form-control {
710
- height: $form-control-height;
769
+ .form-control {
770
+ height: $form-control-height;
771
+ }
711
772
  }
712
773
  }
713
- }
714
774
 
715
- .nav-btn {
716
- @if ($scaling-navbar) {
717
- font-size: $btn-font-size;
718
- height: $btn-monospaced-size;
719
- margin-bottom: $btn-margin-y;
720
- margin-left: $btn-margin-x;
721
- margin-right: $btn-margin-x;
722
- margin-top: $btn-margin-y;
723
- padding-bottom: $btn-padding-y;
724
- padding-left: $btn-padding-x;
725
- padding-right: $btn-padding-x;
726
- padding-top: $btn-padding-y;
727
- min-width: $btn-monospaced-size;
728
-
729
- @if ($enable-c-inner) {
730
- .c-inner {
731
- margin-bottom: math-sign(
732
- $btn-padding-y
733
- );
734
- margin-left: math-sign($btn-padding-x);
735
- margin-right: math-sign($btn-padding-x);
736
- margin-top: math-sign($btn-padding-y);
775
+ .nav-btn {
776
+ @if ($scaling-navbar) {
777
+ font-size: $btn-font-size;
778
+ height: $btn-monospaced-size;
779
+ margin-bottom: $btn-margin-y;
780
+ margin-left: $btn-margin-x;
781
+ margin-right: $btn-margin-x;
782
+ margin-top: $btn-margin-y;
783
+ padding-bottom: $btn-padding-y;
784
+ padding-left: $btn-padding-x;
785
+ padding-right: $btn-padding-x;
786
+ padding-top: $btn-padding-y;
787
+ min-width: $btn-monospaced-size;
788
+
789
+ @if ($enable-c-inner) {
790
+ .c-inner {
791
+ margin-bottom: math-sign(
792
+ $btn-padding-y
793
+ );
794
+ margin-left: math-sign(
795
+ $btn-padding-x
796
+ );
797
+ margin-right: math-sign(
798
+ $btn-padding-x
799
+ );
800
+ margin-top: math-sign(
801
+ $btn-padding-y
802
+ );
803
+ }
737
804
  }
738
805
  }
739
806
  }
740
- }
741
807
 
742
- .nav-btn-monospaced {
743
- @if ($scaling-navbar) {
744
- font-size: $btn-monospaced-font-size;
745
- padding: 0;
808
+ .nav-btn-monospaced {
809
+ @if ($scaling-navbar) {
810
+ font-size: $btn-monospaced-font-size;
811
+ padding: 0;
746
812
 
747
- @if ($enable-c-inner) {
748
- .c-inner {
749
- margin: 0;
813
+ @if ($enable-c-inner) {
814
+ .c-inner {
815
+ margin: 0;
816
+ }
750
817
  }
751
818
  }
752
819
  }
753
- }
754
820
 
755
- .nav-item {
756
- > .custom-control,
757
- > .form-check {
758
- @if ($scaling-navbar) {
759
- margin-left: $btn-margin-x;
760
- margin-right: $btn-margin-x;
821
+ .nav-item {
822
+ > .custom-control,
823
+ > .form-check {
824
+ @if ($scaling-navbar) {
825
+ margin-left: $btn-margin-x;
826
+ margin-right: $btn-margin-x;
827
+ }
761
828
  }
762
829
  }
763
- }
764
830
 
765
- .nav-link,
766
- .navbar-text {
767
- @if ($scaling-navbar) {
768
- margin-bottom: $link-margin-y;
769
- margin-left: $link-margin-x;
770
- margin-right: $link-margin-x;
771
- margin-top: $link-margin-y;
772
- padding-bottom: $link-padding-y;
773
- padding-left: $link-padding-x;
774
- padding-right: $link-padding-x;
775
- padding-top: $link-padding-y;
776
-
777
- @if ($enable-c-inner) {
778
- .c-inner {
779
- margin-bottom: math-sign(
780
- $link-padding-y
781
- );
782
- margin-left: math-sign($link-padding-x);
783
- margin-right: math-sign(
784
- $link-padding-x
785
- );
786
- margin-top: math-sign($link-padding-y);
831
+ .nav-link,
832
+ .navbar-text {
833
+ @if ($scaling-navbar) {
834
+ margin-bottom: $link-margin-y;
835
+ margin-left: $link-margin-x;
836
+ margin-right: $link-margin-x;
837
+ margin-top: $link-margin-y;
838
+ padding-bottom: $link-padding-y;
839
+ padding-left: $link-padding-x;
840
+ padding-right: $link-padding-x;
841
+ padding-top: $link-padding-y;
842
+
843
+ @if ($enable-c-inner) {
844
+ .c-inner {
845
+ margin-bottom: math-sign(
846
+ $link-padding-y
847
+ );
848
+ margin-left: math-sign(
849
+ $link-padding-x
850
+ );
851
+ margin-right: math-sign(
852
+ $link-padding-x
853
+ );
854
+ margin-top: math-sign(
855
+ $link-padding-y
856
+ );
857
+ }
787
858
  }
788
859
  }
789
860
  }
790
- }
791
861
 
792
- .nav-link-monospaced {
793
- @if ($scaling-navbar) {
794
- font-size: $btn-monospaced-font-size;
795
- margin-bottom: $btn-margin-y;
796
- margin-left: $btn-margin-x;
797
- margin-right: $btn-margin-x;
798
- margin-top: $btn-margin-y;
799
- padding: 0;
800
-
801
- @if ($enable-c-inner) {
802
- .c-inner {
803
- margin: 0;
862
+ .nav-link-monospaced {
863
+ @if ($scaling-navbar) {
864
+ font-size: $btn-monospaced-font-size;
865
+ margin-bottom: $btn-margin-y;
866
+ margin-left: $btn-margin-x;
867
+ margin-right: $btn-margin-x;
868
+ margin-top: $btn-margin-y;
869
+ padding: 0;
870
+
871
+ @if ($enable-c-inner) {
872
+ .c-inner {
873
+ margin: 0;
874
+ }
804
875
  }
805
876
  }
806
877
  }
@@ -808,72 +879,74 @@
808
879
  }
809
880
  }
810
881
  }
811
- }
812
882
 
813
- // Navbar Overlay Styles for `.navbar-overlay-xs-down`,
814
- // `.navbar-overlay-sm-down`, `.navbar-overlay-md-down`,
815
- // `.navbar-overlay-lg-down`, `.navbar-overlay-up`
883
+ // Navbar Overlay Styles for `.navbar-overlay-xs-down`,
884
+ // `.navbar-overlay-sm-down`, `.navbar-overlay-md-down`,
885
+ // `.navbar-overlay-lg-down`, `.navbar-overlay-up`
816
886
 
817
- @each $breakpoint in map-keys($breakpoints) {
818
- $index: index(map-keys($breakpoints), $breakpoint);
819
- $length: length(map-keys($breakpoints));
820
- $infix: '.navbar-overlay-#{$breakpoint}-down';
887
+ @each $breakpoint in map-keys($breakpoints) {
888
+ $index: index(map-keys($breakpoints), $breakpoint);
889
+ $length: length(map-keys($breakpoints));
890
+ $infix: '.navbar-overlay-#{$breakpoint}-down';
821
891
 
822
- @if ($index == $length) {
823
- $infix: '.navbar-overlay-up';
824
- }
892
+ @if ($index == $length) {
893
+ $infix: '.navbar-overlay-up';
894
+ }
825
895
 
826
- #{$infix} {
827
- @include media-breakpoint-down($breakpoint) {
828
- @include border-radius(
829
- if(
830
- variable-exists(navbar-border-radius),
831
- $navbar-border-radius,
896
+ #{$infix} {
897
+ @include media-breakpoint-down($breakpoint) {
898
+ @include border-radius(
832
899
  if(
833
- variable-exists(cadmin-navbar-border-radius),
834
- $cadmin-navbar-border-radius,
835
- null
900
+ variable-exists(navbar-border-radius),
901
+ $navbar-border-radius,
902
+ if(
903
+ variable-exists(
904
+ cadmin-navbar-border-radius
905
+ ),
906
+ $cadmin-navbar-border-radius,
907
+ null
908
+ )
836
909
  )
837
- )
838
- );
910
+ );
839
911
 
840
- padding-bottom: $padding-y;
841
- padding-left: $padding-x;
842
- padding-right: $padding-x;
843
- padding-top: $padding-y;
912
+ padding-bottom: $padding-y;
913
+ padding-left: $padding-x;
914
+ padding-right: $padding-x;
915
+ padding-top: $padding-y;
916
+ }
844
917
  }
845
918
  }
846
- }
847
919
 
848
- // Navbar Underline
920
+ // Navbar Underline
849
921
 
850
- &.navbar-underline {
851
- .navbar-toggler-link {
852
- &:after {
853
- bottom: $active-border-offset-bottom-mobile;
854
- height: $active-border-bottom-width;
855
- left: $active-border-offset-x;
856
- right: $active-border-offset-x;
857
- top: $active-border-offset-top;
922
+ &.navbar-underline {
923
+ .navbar-toggler-link {
924
+ &:after {
925
+ bottom: $active-border-offset-bottom-mobile;
926
+ height: $active-border-bottom-width;
927
+ left: $active-border-offset-x;
928
+ right: $active-border-offset-x;
929
+ top: $active-border-offset-top;
930
+ }
858
931
  }
859
932
  }
860
- }
861
933
 
862
- &.navbar-underline.navbar-expand {
863
- @each $breakpoint in map-keys($breakpoints) {
864
- $next: breakpoint-next($breakpoint, $breakpoints);
865
- $infix: breakpoint-infix($next, $breakpoints);
866
-
867
- &#{$infix} {
868
- // .navbar-expand, sm, md, lg, xl
869
- @include media-breakpoint-up($next) {
870
- .navbar-nav .nav-link {
871
- &.active:after {
872
- bottom: $active-border-offset-bottom;
873
- height: $active-border-bottom-width;
874
- left: $active-border-offset-x;
875
- right: $active-border-offset-x;
876
- top: $active-border-offset-top;
934
+ &.navbar-underline.navbar-expand {
935
+ @each $breakpoint in map-keys($breakpoints) {
936
+ $next: breakpoint-next($breakpoint, $breakpoints);
937
+ $infix: breakpoint-infix($next, $breakpoints);
938
+
939
+ &#{$infix} {
940
+ // .navbar-expand, sm, md, lg, xl
941
+ @include media-breakpoint-up($next) {
942
+ .navbar-nav .nav-link {
943
+ &.active:after {
944
+ bottom: $active-border-offset-bottom;
945
+ height: $active-border-bottom-width;
946
+ left: $active-border-offset-x;
947
+ right: $active-border-offset-x;
948
+ top: $active-border-offset-top;
949
+ }
877
950
  }
878
951
  }
879
952
  }