viniBaxter-desk_front 24.0.0 → 31.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/lib/viniBaxter/desk_front/version.rb +6 -1
  3. data/lib/viniBaxter/sass/desk_front/beckyBaxter/_mixins.scss +19 -15
  4. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_variables.scss +923 -923
  5. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_white-content.scss +319 -291
  6. data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_buttons.scss +358 -300
  7. data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_nav-setup-normal.scss +139 -0
  8. data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_nav-setup-ntf.scss +146 -0
  9. data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_nav-setup.scss +8 -0
  10. data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/caret-color.scss +10 -0
  11. data/lib/viniBaxter/sass/desk_front/beckyBaxter/new_nav/_navbar.scss +213 -197
  12. data/lib/viniBaxter/sass/desk_front/beckyBaxter/new_nav/_sidebar-and-main-panel.scss +119 -153
  13. data/lib/viniBaxter/sass/desk_front/beckyBaxter/new_nav/_white-content.scss +32 -6
  14. data/lib/viniBaxter/sass/desk_front/bootstrap/_buttons.scss +34 -8
  15. data/lib/viniBaxter/sass/desk_front/bootstrap/_card.scss +9 -8
  16. data/lib/viniBaxter/sass/desk_front/bootstrap/_custom-forms.scss +84 -51
  17. data/lib/viniBaxter/sass/desk_front/bootstrap/_grid.scss +14 -0
  18. data/lib/viniBaxter/sass/desk_front/bootstrap/_list-group.scss +8 -7
  19. data/lib/viniBaxter/sass/desk_front/bootstrap/_reboot.scss +2 -1
  20. data/lib/viniBaxter/sass/desk_front/bootstrap/bootstrap.scss +1 -2
  21. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_sizing.scss +2 -11
  22. data/lib/viniBaxter/sass/desk_front/theme-dark.scss +1 -1
  23. data/lib/viniBaxter/sass/desk_front/theme.scss +1 -1
  24. metadata +7 -3
@@ -12,6 +12,8 @@
12
12
  background-color: $card-bg;
13
13
  background-clip: border-box;
14
14
  border: $card-border-width solid $card-border-color;
15
+ backdrop-filter: saturate(101.8%) blur(7px) !important;
16
+ background-color: rgba(255, 255, 255, 0.1) !important;
15
17
  @include border-radius($card-border-radius);
16
18
 
17
19
  > hr {
@@ -28,7 +30,7 @@
28
30
  @include border-top-radius($card-inner-border-radius);
29
31
  }
30
32
 
31
- &:last-child {
33
+ &:last-child {
32
34
  border-bottom-width: 0;
33
35
  @include border-bottom-radius($card-inner-border-radius);
34
36
  }
@@ -88,7 +90,9 @@
88
90
  border-bottom: $card-border-width solid $card-border-color;
89
91
 
90
92
  &:first-child {
91
- @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
93
+ @include border-radius(
94
+ $card-inner-border-radius $card-inner-border-radius 0 0
95
+ );
92
96
  }
93
97
  }
94
98
 
@@ -99,11 +103,12 @@
99
103
  border-top: $card-border-width solid $card-border-color;
100
104
 
101
105
  &:last-child {
102
- @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
106
+ @include border-radius(
107
+ 0 0 $card-inner-border-radius $card-inner-border-radius
108
+ );
103
109
  }
104
110
  }
105
111
 
106
-
107
112
  //
108
113
  // Header navs
109
114
  //
@@ -148,7 +153,6 @@
148
153
  @include border-bottom-radius($card-inner-border-radius);
149
154
  }
150
155
 
151
-
152
156
  // Card deck
153
157
 
154
158
  .card-deck {
@@ -172,7 +176,6 @@
172
176
  }
173
177
  }
174
178
 
175
-
176
179
  //
177
180
  // Card groups
178
181
  //
@@ -235,7 +238,6 @@
235
238
  }
236
239
  }
237
240
 
238
-
239
241
  //
240
242
  // Columns
241
243
  //
@@ -258,7 +260,6 @@
258
260
  }
259
261
  }
260
262
 
261
-
262
263
  //
263
264
  // Accordion
264
265
  //
@@ -2,7 +2,6 @@
2
2
  // Released under MIT and copyright 2014 Waybury.
3
3
  // https://useiconic.com/open
4
4
 
5
-
6
5
  // Checkboxes and radios
7
6
  //
8
7
  // Base class takes care of all the key behavioral aspects.
@@ -25,24 +24,27 @@
25
24
  left: 0;
26
25
  z-index: -1; // Put the input behind the label so it doesn't overlay text
27
26
  width: $custom-control-indicator-size;
28
- height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
27
+ height: ($font-size-base * $line-height-base + $custom-control-indicator-size) /
28
+ 2;
29
29
  opacity: 0;
30
30
 
31
31
  &:checked ~ .custom-control-label::before {
32
32
  color: $custom-control-indicator-checked-color;
33
33
  border-color: $custom-control-indicator-checked-border-color;
34
34
  @include gradient-bg($custom-control-indicator-checked-bg);
35
- @include box-shadow($custom-control-indicator-checked-box-shadow);
35
+ // TODO: ERROR ☠️
36
+ // @include box-shadow($custom-control-indicator-checked-box-shadow);
36
37
  }
37
38
 
38
- &:focus ~ .custom-control-label::before {
39
- // the mixin is not used here to make sure there is feedback
40
- @if $enable-shadows {
41
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
42
- } @else {
43
- box-shadow: $custom-control-indicator-focus-box-shadow;
44
- }
45
- }
39
+ // TODO: ERROR ☠️
40
+ // &:focus ~ .custom-control-label::before {
41
+ // // the mixin is not used here to make sure there is feedback
42
+ // @if $enable-shadows {
43
+ // box-shadow: $input-box-shadow, $input-focus-box-shadow;
44
+ // } @else {
45
+ // box-shadow: $custom-control-indicator-focus-box-shadow;
46
+ // }
47
+ // }
46
48
 
47
49
  &:focus:not(:checked) ~ .custom-control-label::before {
48
50
  border-color: $custom-control-indicator-focus-border-color;
@@ -52,7 +54,8 @@
52
54
  color: $custom-control-indicator-active-color;
53
55
  background-color: $custom-control-indicator-active-bg;
54
56
  border-color: $custom-control-indicator-active-border-color;
55
- @include box-shadow($custom-control-indicator-active-box-shadow);
57
+ // TODO: ERROR ☠️
58
+ // @include box-shadow($custom-control-indicator-active-box-shadow);
56
59
  }
57
60
 
58
61
  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
@@ -67,6 +70,7 @@
67
70
  }
68
71
  }
69
72
  }
73
+ // first part end 1st 😇
70
74
 
71
75
  // Custom control indicators
72
76
  //
@@ -82,32 +86,34 @@
82
86
  // Background-color and (when enabled) gradient
83
87
  &::before {
84
88
  position: absolute;
85
- top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
89
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) /
90
+ 2;
86
91
  left: -($custom-control-gutter + $custom-control-indicator-size);
87
92
  display: block;
88
93
  width: $custom-control-indicator-size;
89
94
  height: $custom-control-indicator-size;
90
95
  pointer-events: none;
91
- content: "";
96
+ content: '';
92
97
  background-color: $custom-control-indicator-bg;
93
- border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
94
- @include box-shadow($custom-control-indicator-box-shadow);
98
+ border: $custom-control-indicator-border-color solid
99
+ $custom-control-indicator-border-width;
100
+ // @include box-shadow($custom-control-indicator-box-shadow);
95
101
  }
96
102
 
97
103
  // Foreground (icon)
98
104
  &::after {
99
105
  position: absolute;
100
- top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
106
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) /
107
+ 2;
101
108
  left: -($custom-control-gutter + $custom-control-indicator-size);
102
109
  display: block;
103
110
  width: $custom-control-indicator-size;
104
111
  height: $custom-control-indicator-size;
105
- content: "";
112
+ content: '';
106
113
  background: no-repeat 50% / #{$custom-control-indicator-bg-size};
107
114
  }
108
115
  }
109
116
 
110
-
111
117
  // Checkboxes
112
118
  //
113
119
  // Tweak just a few things for checkboxes.
@@ -127,10 +133,12 @@
127
133
  &::before {
128
134
  border-color: $custom-checkbox-indicator-indeterminate-border-color;
129
135
  @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
130
- @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
136
+ // @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
131
137
  }
132
138
  &::after {
133
- background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
139
+ background-image: escape-svg(
140
+ $custom-checkbox-indicator-icon-indeterminate
141
+ );
134
142
  }
135
143
  }
136
144
 
@@ -167,7 +175,6 @@
167
175
  }
168
176
  }
169
177
 
170
-
171
178
  // switches
172
179
  //
173
180
  // Tweak a few things for switches
@@ -185,21 +192,33 @@
185
192
  }
186
193
 
187
194
  &::after {
188
- top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
189
- left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
195
+ top: add(
196
+ ($font-size-base * $line-height-base - $custom-control-indicator-size) /
197
+ 2,
198
+ $custom-control-indicator-border-width * 2
199
+ );
200
+ left: add(
201
+ -($custom-switch-width + $custom-control-gutter),
202
+ $custom-control-indicator-border-width * 2
203
+ );
190
204
  width: $custom-switch-indicator-size;
191
205
  height: $custom-switch-indicator-size;
192
206
  background-color: $custom-control-indicator-border-color;
193
207
  // stylelint-disable-next-line property-blacklist
194
208
  border-radius: $custom-switch-indicator-border-radius;
195
- @include transition(transform .15s ease-in-out, $custom-forms-transition);
209
+ @include transition(
210
+ transform 0.15s ease-in-out,
211
+ $custom-forms-transition
212
+ );
196
213
  }
197
214
  }
198
215
 
199
216
  .custom-control-input:checked ~ .custom-control-label {
200
217
  &::after {
201
218
  background-color: $custom-control-indicator-bg;
202
- transform: translateX($custom-switch-width - $custom-control-indicator-size);
219
+ transform: translateX(
220
+ $custom-switch-width - $custom-control-indicator-size
221
+ );
203
222
  }
204
223
  }
205
224
 
@@ -210,7 +229,6 @@
210
229
  }
211
230
  }
212
231
 
213
-
214
232
  // Select
215
233
  //
216
234
  // Replaces the browser default select with a custom one, mostly pulled from
@@ -221,7 +239,9 @@
221
239
  display: inline-block;
222
240
  width: 100%;
223
241
  height: $custom-select-height;
224
- padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
242
+ padding: $custom-select-padding-y
243
+ ($custom-select-padding-x + $custom-select-indicator-padding)
244
+ $custom-select-padding-y $custom-select-padding-x;
225
245
  font-family: $custom-select-font-family;
226
246
  @include font-size($custom-select-font-size);
227
247
  font-weight: $custom-select-font-weight;
@@ -231,18 +251,21 @@
231
251
  background: $custom-select-bg $custom-select-background;
232
252
  border: $custom-select-border-width solid $custom-select-border-color;
233
253
  @include border-radius($custom-select-border-radius, 0);
234
- @include box-shadow($custom-select-box-shadow);
254
+ // @include box-shadow($custom-select-box-shadow);
235
255
  appearance: none;
236
256
 
237
257
  &:focus {
238
258
  border-color: $custom-select-focus-border-color;
239
259
  outline: 0;
240
- @if $enable-shadows {
241
- @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
242
- } @else {
243
- // Avoid using mixin so we can pass custom focus shadow properly
244
- box-shadow: $custom-select-focus-box-shadow;
245
- }
260
+ // @if $enable-shadows {
261
+ // @include box-shadow(
262
+ // $custom-select-box-shadow,
263
+ // $custom-select-focus-box-shadow
264
+ // );
265
+ // } @else {
266
+ // // Avoid using mixin so we can pass custom focus shadow properly
267
+ // box-shadow: $custom-select-focus-box-shadow;
268
+ // }
246
269
 
247
270
  &::-ms-value {
248
271
  // For visual consistency with other platforms/browsers,
@@ -256,7 +279,7 @@
256
279
  }
257
280
 
258
281
  &[multiple],
259
- &[size]:not([size="1"]) {
282
+ &[size]:not([size='1']) {
260
283
  height: auto;
261
284
  padding-right: $custom-select-padding-x;
262
285
  background-image: none;
@@ -295,7 +318,6 @@
295
318
  @include font-size($custom-select-font-size-lg);
296
319
  }
297
320
 
298
-
299
321
  // File
300
322
  //
301
323
  // Custom file input.
@@ -353,7 +375,7 @@
353
375
  background-color: $custom-file-bg;
354
376
  border: $custom-file-border-width solid $custom-file-border-color;
355
377
  @include border-radius($custom-file-border-radius);
356
- @include box-shadow($custom-file-box-shadow);
378
+ // @include box-shadow($custom-file-box-shadow);
357
379
 
358
380
  &::after {
359
381
  position: absolute;
@@ -366,10 +388,12 @@
366
388
  padding: $custom-file-padding-y $custom-file-padding-x;
367
389
  line-height: $custom-file-line-height;
368
390
  color: $custom-file-button-color;
369
- content: "Browse";
391
+ content: 'Browse';
370
392
  @include gradient-bg($custom-file-button-bg);
371
393
  border-left: inherit;
372
- @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
394
+ @include border-radius(
395
+ 0 $custom-file-border-radius $custom-file-border-radius 0
396
+ );
373
397
  }
374
398
  }
375
399
 
@@ -381,7 +405,10 @@
381
405
 
382
406
  .custom-range {
383
407
  width: 100%;
384
- height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
408
+ height: add(
409
+ $custom-range-thumb-height,
410
+ $custom-range-thumb-focus-box-shadow-width * 2
411
+ );
385
412
  padding: 0; // Need to reset padding
386
413
  background-color: transparent;
387
414
  appearance: none;
@@ -391,9 +418,15 @@
391
418
 
392
419
  // Pseudo-elements must be split across multiple rulesets to have an effect.
393
420
  // No box-shadow() mixin for focus accessibility.
394
- &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
395
- &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
396
- &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
421
+ &::-webkit-slider-thumb {
422
+ box-shadow: $custom-range-thumb-focus-box-shadow;
423
+ }
424
+ &::-moz-range-thumb {
425
+ box-shadow: $custom-range-thumb-focus-box-shadow;
426
+ }
427
+ &::-ms-thumb {
428
+ box-shadow: $custom-range-thumb-focus-box-shadow;
429
+ }
397
430
  }
398
431
 
399
432
  &::-moz-focus-outer {
@@ -407,7 +440,7 @@
407
440
  @include gradient-bg($custom-range-thumb-bg);
408
441
  border: $custom-range-thumb-border;
409
442
  @include border-radius($custom-range-thumb-border-radius);
410
- @include box-shadow($custom-range-thumb-box-shadow);
443
+ // @include box-shadow($custom-range-thumb-box-shadow);
411
444
  @include transition($custom-forms-transition);
412
445
  appearance: none;
413
446
 
@@ -424,7 +457,7 @@
424
457
  background-color: $custom-range-track-bg;
425
458
  border-color: transparent;
426
459
  @include border-radius($custom-range-track-border-radius);
427
- @include box-shadow($custom-range-track-box-shadow);
460
+ // @include box-shadow($custom-range-track-box-shadow);
428
461
  }
429
462
 
430
463
  &::-moz-range-thumb {
@@ -433,7 +466,7 @@
433
466
  @include gradient-bg($custom-range-thumb-bg);
434
467
  border: $custom-range-thumb-border;
435
468
  @include border-radius($custom-range-thumb-border-radius);
436
- @include box-shadow($custom-range-thumb-box-shadow);
469
+ // @include box-shadow($custom-range-thumb-box-shadow);
437
470
  @include transition($custom-forms-transition);
438
471
  appearance: none;
439
472
 
@@ -450,7 +483,7 @@
450
483
  background-color: $custom-range-track-bg;
451
484
  border-color: transparent; // Firefox specific?
452
485
  @include border-radius($custom-range-track-border-radius);
453
- @include box-shadow($custom-range-track-box-shadow);
486
+ // @include box-shadow($custom-range-track-box-shadow);
454
487
  }
455
488
 
456
489
  &::-ms-thumb {
@@ -458,11 +491,11 @@
458
491
  height: $custom-range-thumb-height;
459
492
  margin-top: 0; // Edge specific
460
493
  margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
461
- margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
494
+ margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
462
495
  @include gradient-bg($custom-range-thumb-bg);
463
496
  border: $custom-range-thumb-border;
464
497
  @include border-radius($custom-range-thumb-border-radius);
465
- @include box-shadow($custom-range-thumb-box-shadow);
498
+ // @include box-shadow($custom-range-thumb-box-shadow);
466
499
  @include transition($custom-forms-transition);
467
500
  appearance: none;
468
501
 
@@ -479,7 +512,7 @@
479
512
  background-color: transparent;
480
513
  border-color: transparent;
481
514
  border-width: $custom-range-thumb-height / 2;
482
- @include box-shadow($custom-range-track-box-shadow);
515
+ // @include box-shadow($custom-range-track-box-shadow);
483
516
  }
484
517
 
485
518
  &::-ms-fill-lower {
@@ -19,6 +19,9 @@
19
19
  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
20
20
  %responsive-container-#{$breakpoint} {
21
21
  max-width: $container-max-width;
22
+ &.container-nav-bar {
23
+ max-width: $container-max-width * 1.2;
24
+ }
22
25
  }
23
26
 
24
27
  // Extend each breakpoint which is smaller or equal to the current breakpoint
@@ -38,6 +41,17 @@
38
41
  }
39
42
  }
40
43
  }
44
+
45
+ .container-full-xs {
46
+ @include media-breakpoint-down(md) {
47
+ max-width: 100vw !important;
48
+ padding: 0px !important;
49
+ }
50
+ }
51
+
52
+ .container-full-xl {
53
+ max-width: 1300px !important;
54
+ }
41
55
  }
42
56
 
43
57
  // Row
@@ -12,6 +12,7 @@
12
12
  @include border-radius($list-group-border-radius);
13
13
  }
14
14
 
15
+
15
16
  // Interactive list items
16
17
  //
17
18
  // Use anchor or button elements instead of `li`s or `div`s to create interactive
@@ -36,6 +37,7 @@
36
37
  }
37
38
  }
38
39
 
40
+
39
41
  // Individual list items
40
42
  //
41
43
  // Use on `li`s or `div`s within the `.list-group` parent.
@@ -46,8 +48,8 @@
46
48
  padding: $list-group-item-padding-y $list-group-item-padding-x;
47
49
  color: $list-group-color;
48
50
  text-decoration: if($link-decoration == none, null, none);
49
- // background-color: $list-group-bg;
50
- border: none;
51
+ background-color: $list-group-bg;
52
+ border: $list-group-border-width solid $list-group-border-color;
51
53
 
52
54
  &:first-child {
53
55
  @include border-top-radius(inherit);
@@ -82,6 +84,7 @@
82
84
  }
83
85
  }
84
86
 
87
+
85
88
  // Horizontal
86
89
  //
87
90
  // Change the layout of list group items from vertical (default) to horizontal.
@@ -122,6 +125,7 @@
122
125
  }
123
126
  }
124
127
 
128
+
125
129
  // Flush list items
126
130
  //
127
131
  // Remove borders and border-radius to keep list group items edge-to-edge. Most
@@ -139,15 +143,12 @@
139
143
  }
140
144
  }
141
145
 
146
+
142
147
  // Contextual variants
143
148
  //
144
149
  // Add modifier classes to change text and background color on individual items.
145
150
  // Organizationally, this must come after the `:hover` states.
146
151
 
147
152
  @each $color, $value in $theme-colors {
148
- @include list-group-item-variant(
149
- $color,
150
- theme-color-level($color, -9),
151
- theme-color-level($color, 6)
152
- );
153
+ @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
153
154
  }