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
@@ -1,357 +1,415 @@
1
1
  @mixin btn-styles($btn-color, $btn-states-color) {
2
- @include diagonal-gradient($btn-color, $btn-states-color);
3
- background-color: $btn-color;
4
- transition: all 0.15s ease;
5
- box-shadow: none;
6
-
7
- &.animation-on-hover:hover {
8
- background-position: bottom left;
9
- transition: 0.3s ease-in-out;
10
- }
11
-
12
- &:hover,
13
- &:focus,
14
- &:active,
15
- &.active,
16
- &:active:focus,
17
- &:active:hover,
18
- &.active:focus,
19
- &.active:hover {
20
- background-color: $btn-states-color !important;
21
- background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
22
- background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
23
- background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
24
- background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
25
- color: $white;
2
+ @include diagonal-gradient($btn-color, $btn-states-color);
3
+ background-color: $btn-color;
4
+ transition: all 0.15s ease;
26
5
  box-shadow: none;
27
- }
28
-
29
- &:active {
30
- box-shadow: none !important;
31
- transform: translateY(1px) !important;
32
- transition: all .15s ease;
33
- }
34
-
35
- &:not([data-action]):hover {
36
6
 
37
- box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
38
- transform: translateY(-1px);
39
- -webkit-transform: translateY(-1px);
40
- }
41
-
42
- &.disabled,
43
- &:disabled,
44
- &[disabled],
45
- fieldset[disabled] & {
7
+ &.animation-on-hover:hover {
8
+ background-position: bottom left;
9
+ transition: 0.3s ease-in-out;
10
+ }
46
11
 
47
- &,
48
12
  &:hover,
49
13
  &:focus,
50
- &.focus,
51
14
  &:active,
52
- &.active {
53
- background-color: $btn-color;
54
- border-color: $btn-color;
55
- }
56
- }
57
-
58
- // btn-neutral style
59
- @if $btn-color==$white {
60
- color: $primary;
61
-
62
- &.btn-danger {
63
- color: $danger;
64
-
65
- &:hover,
66
- &:focus,
67
- &:active,
68
- &:active:focus {
69
- color: $danger-states;
70
- }
71
- }
72
-
73
- &.btn-info {
74
- color: $info;
75
-
76
- &:hover,
77
- &:focus,
78
- &:active,
79
- &:active:focus {
80
- color: $info-states;
81
- }
82
- }
83
-
84
- &.btn-warning {
85
- color: $warning;
86
-
87
- &:hover,
88
- &:focus,
89
- &:active,
90
- &:active:focus {
91
- color: $warning-states;
92
- }
93
- }
94
-
95
- &.btn-success {
96
- color: $success;
97
-
98
- &:hover,
99
- &:focus,
100
- &:active,
101
- &:active:focus {
102
- color: $success-states;
103
- }
104
- }
105
-
106
- &.btn-default {
107
- color: $default;
108
-
109
- &:hover,
110
- &:focus,
111
- &:active,
112
- &:active:focus {
113
- color: $default-states;
114
- }
115
- }
116
-
117
15
  &.active,
118
- &:active,
119
16
  &:active:focus,
120
17
  &:active:hover,
121
18
  &.active:focus,
122
- &.active:hover,
123
- .show>&.dropdown-toggle,
124
- .show>&.dropdown-toggle:focus,
125
- .show>&.dropdown-toggle:hover {
126
- background-color: $white;
127
- color: $primary-states;
128
- box-shadow: none;
129
- }
130
-
131
- &:hover,
132
- &:focus {
133
- color: $primary-states;
134
-
135
- &:not(.nav-link) {
136
- box-shadow: none;
137
- }
138
-
139
- }
140
-
141
- }
142
-
143
- @else {
144
- color: $white;
145
- }
146
-
147
- &.btn-simple {
148
- color: $btn-color;
149
- border-color: $btn-color;
150
- background: $transparent-bg;
151
-
152
- &:hover,
153
- &:focus,
154
- &:active,
155
- &:not(:disabled):not(.disabled):active {
156
- color: $btn-color;
157
- border-color: $btn-color;
158
- background-color: $transparent-bg !important;
159
- background-image: none !important;
160
- box-shadow: none;
161
- }
162
-
163
- &.active {
164
- border-color: $btn-color !important;
165
-
166
- &:hover,
167
- &:focus,
168
- &:active,
169
- &:not(:disabled):not(.disabled):active {
170
- color: $white;
171
- border-color: $btn-color;
172
- background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
173
- background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
174
- background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
175
- background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
19
+ &.active:hover {
176
20
  background-color: $btn-states-color !important;
21
+ background-image: linear-gradient(
22
+ to bottom left,
23
+ $btn-color,
24
+ $btn-states-color,
25
+ $btn-color
26
+ ) !important;
27
+ background-image: -webkit-linear-gradient(
28
+ to bottom left,
29
+ $btn-color,
30
+ $btn-states-color,
31
+ $btn-color
32
+ ) !important;
33
+ background-image: -o-linear-gradient(
34
+ to bottom left,
35
+ $btn-color,
36
+ $btn-states-color,
37
+ $btn-color
38
+ ) !important;
39
+ background-image: -moz-linear-gradient(
40
+ to bottom left,
41
+ $btn-color,
42
+ $btn-states-color,
43
+ $btn-color
44
+ ) !important;
45
+ color: $white;
177
46
  box-shadow: none;
178
- }
179
47
  }
180
- }
181
48
 
182
- &.btn-link {
183
- color: $btn-color;
184
-
185
- &:hover,
186
- &:focus,
187
49
  &:active {
188
- background-color: $transparent-bg !important;
189
- background-image: none !important;
190
- color: $white !important;
191
- text-decoration: none;
192
- box-shadow: none;
50
+ box-shadow: none !important;
51
+ transform: translateY(1px) !important;
52
+ transition: all 0.15s ease;
193
53
  }
194
- }
195
- }
196
54
 
197
- @mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
198
- color: color-yiq($background);
199
- @include gradient-bg($background);
200
- border-color: $border;
201
- @include box-shadow($btn-box-shadow);
55
+ &:not([data-action]):hover {
56
+ box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
57
+ transform: translateY(-1px);
58
+ -webkit-transform: translateY(-1px);
59
+ }
202
60
 
203
- @include hover {
204
- color: color-yiq($hover-background);
205
- @include gradient-bg($hover-background);
206
- border-color: $hover-border;
207
- }
61
+ &.disabled,
62
+ &:disabled,
63
+ &[disabled],
64
+ fieldset[disabled] & {
65
+ &,
66
+ &:hover,
67
+ &:focus,
68
+ &.focus,
69
+ &:active,
70
+ &.active {
71
+ background-color: $btn-color;
72
+ border-color: $btn-color;
73
+ }
74
+ }
208
75
 
209
- &:focus,
210
- &.focus {
76
+ // btn-neutral style
77
+ @if $btn-color==$white {
78
+ color: $primary;
79
+
80
+ &.btn-danger {
81
+ color: $danger;
82
+
83
+ &:hover,
84
+ &:focus,
85
+ &:active,
86
+ &:active:focus {
87
+ color: $danger-states;
88
+ }
89
+ }
90
+
91
+ &.btn-info {
92
+ color: $info;
93
+
94
+ &:hover,
95
+ &:focus,
96
+ &:active,
97
+ &:active:focus {
98
+ color: $info-states;
99
+ }
100
+ }
101
+
102
+ &.btn-warning {
103
+ color: $warning;
104
+
105
+ &:hover,
106
+ &:focus,
107
+ &:active,
108
+ &:active:focus {
109
+ color: $warning-states;
110
+ }
111
+ }
112
+
113
+ &.btn-success {
114
+ color: $success;
115
+
116
+ &:hover,
117
+ &:focus,
118
+ &:active,
119
+ &:active:focus {
120
+ color: $success-states;
121
+ }
122
+ }
123
+
124
+ &.btn-default {
125
+ color: $default;
126
+
127
+ &:hover,
128
+ &:focus,
129
+ &:active,
130
+ &:active:focus {
131
+ color: $default-states;
132
+ }
133
+ }
134
+
135
+ &.active,
136
+ &:active,
137
+ &:active:focus,
138
+ &:active:hover,
139
+ &.active:focus,
140
+ &.active:hover,
141
+ .show > &.dropdown-toggle,
142
+ .show > &.dropdown-toggle:focus,
143
+ .show > &.dropdown-toggle:hover {
144
+ background-color: $white;
145
+ color: $primary-states;
146
+ box-shadow: none;
147
+ }
148
+
149
+ &:hover,
150
+ &:focus {
151
+ color: $primary-states;
152
+
153
+ &:not(.nav-link) {
154
+ box-shadow: none;
155
+ }
156
+ }
157
+ } @else {
158
+ color: $white;
159
+ }
211
160
 
212
- // Avoid using mixin so we can pass custom focus shadow properly
213
- @if $enable-shadows {
214
- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
161
+ &.btn-simple {
162
+ color: $btn-color;
163
+ border-color: $btn-color;
164
+ background: $transparent-bg;
165
+
166
+ &:hover,
167
+ &:focus,
168
+ &:active,
169
+ &:not(:disabled):not(.disabled):active {
170
+ color: $btn-color;
171
+ border-color: $btn-color;
172
+ background-color: $transparent-bg !important;
173
+ background-image: none !important;
174
+ box-shadow: none;
175
+ }
176
+
177
+ &.active {
178
+ border-color: $btn-color !important;
179
+
180
+ &:hover,
181
+ &:focus,
182
+ &:active,
183
+ &:not(:disabled):not(.disabled):active {
184
+ color: $white;
185
+ border-color: $btn-color;
186
+ background-image: linear-gradient(
187
+ to bottom left,
188
+ $btn-color,
189
+ $btn-states-color,
190
+ $btn-color
191
+ ) !important;
192
+ background-image: -webkit-linear-gradient(
193
+ to bottom left,
194
+ $btn-color,
195
+ $btn-states-color,
196
+ $btn-color
197
+ ) !important;
198
+ background-image: -o-linear-gradient(
199
+ to bottom left,
200
+ $btn-color,
201
+ $btn-states-color,
202
+ $btn-color
203
+ ) !important;
204
+ background-image: -moz-linear-gradient(
205
+ to bottom left,
206
+ $btn-color,
207
+ $btn-states-color,
208
+ $btn-color
209
+ ) !important;
210
+ background-color: $btn-states-color !important;
211
+ box-shadow: none;
212
+ }
213
+ }
215
214
  }
216
215
 
217
- @else {
218
- box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
216
+ &.btn-link {
217
+ color: $btn-color;
218
+
219
+ &:hover,
220
+ &:focus,
221
+ &:active {
222
+ background-color: $transparent-bg !important;
223
+ background-image: none !important;
224
+ color: $white !important;
225
+ text-decoration: none;
226
+ box-shadow: none;
227
+ }
219
228
  }
220
- }
229
+ }
221
230
 
222
- // Disabled comes first so active can properly restyle
223
- &.disabled,
224
- &:disabled {
231
+ @mixin button-variant(
232
+ $background,
233
+ $border,
234
+ $hover-background: darken($background, 0%),
235
+ $hover-border: darken($border, 0%),
236
+ $active-background: darken($background, 10%),
237
+ $active-border: darken($border, 0%)
238
+ ) {
225
239
  color: color-yiq($background);
226
- background-color: $background;
240
+ @include gradient-bg($background);
227
241
  border-color: $border;
228
- }
242
+ @include box-shadow($btn-box-shadow);
229
243
 
230
- &:not(:disabled):not(.disabled):active,
231
- &:not(:disabled):not(.disabled).active,
232
- .show>&.dropdown-toggle {
233
- color: color-yiq($active-background);
234
- background-color: $active-background;
235
-
236
- @if $enable-gradients {
237
- background-image: none; // Remove the gradient for the pressed/active state
244
+ @include hover {
245
+ color: color-yiq($hover-background);
246
+ @include gradient-bg($hover-background);
247
+ border-color: $hover-border;
238
248
  }
239
249
 
240
- border-color: $active-border;
241
-
242
- &:focus {
250
+ &:focus,
251
+ &.focus {
252
+ // Avoid using mixin so we can pass custom focus shadow properly
253
+ @if $enable-shadows {
254
+ box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5);
255
+ } @else {
256
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5);
257
+ }
258
+ }
243
259
 
244
- // Avoid using mixin so we can pass custom focus shadow properly
245
- @if $enable-shadows {
246
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
247
- }
260
+ // Disabled comes first so active can properly restyle
261
+ &.disabled,
262
+ &:disabled {
263
+ color: color-yiq($background);
264
+ background-color: $background;
265
+ border-color: $border;
266
+ }
248
267
 
249
- @else {
250
- box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
251
- }
268
+ &:not(:disabled):not(.disabled):active,
269
+ &:not(:disabled):not(.disabled).active,
270
+ .show > &.dropdown-toggle {
271
+ color: color-yiq($active-background);
272
+ background-color: $active-background;
273
+
274
+ @if $enable-gradients {
275
+ background-image: none; // Remove the gradient for the pressed/active state
276
+ }
277
+
278
+ border-color: $active-border;
279
+
280
+ &:focus {
281
+ // Avoid using mixin so we can pass custom focus shadow properly
282
+ @if $enable-shadows {
283
+ box-shadow: $btn-active-box-shadow,
284
+ 0 0 0 $btn-focus-width rgba($border, 0.5);
285
+ } @else {
286
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5);
287
+ }
288
+ }
252
289
  }
253
- }
254
290
  }
255
291
 
256
- @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
257
- color: $color;
258
- background-color: transparent;
259
- background-image: none;
260
- border-color: $color;
261
-
262
- &:hover {
263
- color: $color-hover;
264
- background-color: $active-background;
265
- border-color: $active-border;
266
- }
267
-
268
- &:focus,
269
- &.focus {
270
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
271
- }
272
-
273
- &.disabled,
274
- &:disabled {
292
+ @mixin button-outline-variant(
293
+ $color,
294
+ $color-hover: color-yiq($color),
295
+ $active-background: $color,
296
+ $active-border: $color
297
+ ) {
275
298
  color: $color;
276
299
  background-color: transparent;
277
- }
300
+ background-image: none;
301
+ border-color: $color;
278
302
 
279
- &:not(:disabled):not(.disabled):active,
280
- &:not(:disabled):not(.disabled).active,
281
- .show>&.dropdown-toggle {
282
- color: color-yiq($active-background);
283
- background-color: $active-background;
284
- border-color: $active-border;
303
+ &:hover {
304
+ color: $color-hover;
305
+ background-color: $active-background;
306
+ border-color: $active-border;
307
+ }
285
308
 
286
- &:focus {
309
+ &:focus,
310
+ &.focus {
311
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
312
+ }
287
313
 
288
- // Avoid using mixin so we can pass custom focus shadow properly
289
- @if $enable-shadows and $btn-active-box-shadow !=none {
290
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
291
- }
314
+ &.disabled,
315
+ &:disabled {
316
+ color: $color;
317
+ background-color: transparent;
318
+ }
292
319
 
293
- @else {
294
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
295
- }
320
+ &:not(:disabled):not(.disabled):active,
321
+ &:not(:disabled):not(.disabled).active,
322
+ .show > &.dropdown-toggle {
323
+ color: color-yiq($active-background);
324
+ background-color: $active-background;
325
+ border-color: $active-border;
326
+
327
+ &:focus {
328
+ // Avoid using mixin so we can pass custom focus shadow properly
329
+ @if $enable-shadows and $btn-active-box-shadow !=none {
330
+ box-shadow: $btn-active-box-shadow,
331
+ 0 0 0 $btn-focus-width rgba($color, 0.5);
332
+ } @else {
333
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
334
+ }
335
+ }
296
336
  }
297
- }
298
337
  }
299
338
 
300
339
  // Button sizes
301
340
  @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border) {
302
- font-size: $font-size;
303
- border-radius: $border;
304
- padding: $padding-vertical $padding-horizontal;
305
-
306
- &.btn-simple {
307
- padding: $padding-vertical - 1 $padding-horizontal - 1;
308
- }
341
+ font-size: $font-size;
342
+ border-radius: $border;
343
+ padding: $padding-vertical $padding-horizontal;
309
344
 
345
+ &.btn-simple {
346
+ padding: $padding-vertical - 1 $padding-horizontal - 1;
347
+ }
310
348
  }
311
349
 
312
350
  // for social buttons
313
- @mixin social-buttons-color ($color, $state-color) {
314
- @include diagonal-gradient($color, darken($color, 20%));
315
- //background-color: $color;
316
- color: $white;
317
- background-size: 210% 210%;
318
- background-position: top right;
319
- background-repeat: space;
320
-
321
- &:focus,
322
- &:active,
323
- &:hover {
324
- background-color: $state-color;
325
- background-image: linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
326
- background-image: -webkit-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
327
- background-image: -o-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
328
- background-image: -moz-linear-gradient(to bottom left, $color, darken($color, 20%), $color) !important;
351
+ @mixin social-buttons-color($color, $state-color) {
352
+ @include diagonal-gradient($color, darken($color, 20%));
353
+ //background-color: $color;
329
354
  color: $white;
330
- }
331
-
332
- &.btn-simple {
333
- color: $state-color;
334
- background-color: $transparent-bg;
335
- background-image: none !important;
336
- box-shadow: none;
337
- border-color: $state-color;
355
+ background-size: 210% 210%;
356
+ background-position: top right;
357
+ background-repeat: space;
338
358
 
339
- &:hover,
340
359
  &:focus,
341
- &:active {
342
- color: $state-color;
343
- border-color: $state-color;
360
+ &:active,
361
+ &:hover {
362
+ background-color: $state-color;
363
+ background-image: linear-gradient(
364
+ to bottom left,
365
+ $color,
366
+ darken($color, 20%),
367
+ $color
368
+ ) !important;
369
+ background-image: -webkit-linear-gradient(
370
+ to bottom left,
371
+ $color,
372
+ darken($color, 20%),
373
+ $color
374
+ ) !important;
375
+ background-image: -o-linear-gradient(
376
+ to bottom left,
377
+ $color,
378
+ darken($color, 20%),
379
+ $color
380
+ ) !important;
381
+ background-image: -moz-linear-gradient(
382
+ to bottom left,
383
+ $color,
384
+ darken($color, 20%),
385
+ $color
386
+ ) !important;
387
+ color: $white;
344
388
  }
345
- }
346
389
 
347
- &.btn-neutral {
348
- color: $color;
349
- background-color: $white;
390
+ &.btn-simple {
391
+ color: $state-color;
392
+ background-color: $transparent-bg;
393
+ background-image: none !important;
394
+ box-shadow: none;
395
+ border-color: $state-color;
396
+
397
+ &:hover,
398
+ &:focus,
399
+ &:active {
400
+ color: $state-color;
401
+ border-color: $state-color;
402
+ }
403
+ }
350
404
 
351
- &:hover,
352
- &:focus,
353
- &:active {
354
- color: $state-color;
405
+ &.btn-neutral {
406
+ color: $color;
407
+ background-color: $white;
408
+
409
+ &:hover,
410
+ &:focus,
411
+ &:active {
412
+ color: $state-color;
413
+ }
355
414
  }
356
- }
357
- }
415
+ }