viniBaxter-desk_front 24.0.0 → 31.0.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 (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
  }