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.
- checksums.yaml +4 -4
- data/lib/viniBaxter/desk_front/version.rb +6 -1
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/_mixins.scss +19 -15
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_variables.scss +923 -923
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_white-content.scss +319 -291
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_buttons.scss +358 -300
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_nav-setup-normal.scss +139 -0
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_nav-setup-ntf.scss +146 -0
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_nav-setup.scss +8 -0
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/caret-color.scss +10 -0
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/new_nav/_navbar.scss +213 -197
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/new_nav/_sidebar-and-main-panel.scss +119 -153
- data/lib/viniBaxter/sass/desk_front/beckyBaxter/new_nav/_white-content.scss +32 -6
- data/lib/viniBaxter/sass/desk_front/bootstrap/_buttons.scss +34 -8
- data/lib/viniBaxter/sass/desk_front/bootstrap/_card.scss +9 -8
- data/lib/viniBaxter/sass/desk_front/bootstrap/_custom-forms.scss +84 -51
- data/lib/viniBaxter/sass/desk_front/bootstrap/_grid.scss +14 -0
- data/lib/viniBaxter/sass/desk_front/bootstrap/_list-group.scss +8 -7
- data/lib/viniBaxter/sass/desk_front/bootstrap/_reboot.scss +2 -1
- data/lib/viniBaxter/sass/desk_front/bootstrap/bootstrap.scss +1 -2
- data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_sizing.scss +2 -11
- data/lib/viniBaxter/sass/desk_front/theme-dark.scss +1 -1
- data/lib/viniBaxter/sass/desk_front/theme.scss +1 -1
- metadata +7 -3
@@ -16,7 +16,7 @@
|
|
16
16
|
}
|
17
17
|
.sidebar,
|
18
18
|
.off-canvas-sidebar {
|
19
|
-
@include linear-gradient($primary-states, $primary);
|
19
|
+
// @include linear-gradient($primary-states, $primary);
|
20
20
|
height: calc(100vh - 90px);
|
21
21
|
width: 230px;
|
22
22
|
position: fixed;
|
@@ -126,141 +126,10 @@
|
|
126
126
|
}
|
127
127
|
}
|
128
128
|
|
129
|
-
|
130
|
-
// margin-top: 20px;
|
131
|
-
display: block;
|
132
|
-
|
133
|
-
.caret {
|
134
|
-
top: 14px;
|
135
|
-
position: absolute;
|
136
|
-
right: 10px;
|
137
|
-
}
|
138
|
-
|
139
|
-
li {
|
140
|
-
> a + div .nav {
|
141
|
-
margin-top: 5px;
|
142
|
-
li > a {
|
143
|
-
margin-top: 0px;
|
144
|
-
padding: 2px 8px;
|
145
|
-
}
|
146
|
-
}
|
147
|
-
|
148
|
-
> a {
|
149
|
-
margin: 2px 15px 0;
|
150
|
-
border-radius: $btn-round-radius;
|
151
|
-
color: $white;
|
152
|
-
display: block;
|
153
|
-
text-decoration: none;
|
154
|
-
position: relative;
|
155
|
-
text-transform: uppercase;
|
156
|
-
cursor: pointer;
|
157
|
-
font-size: $font-size-xs !important;
|
158
|
-
padding: 3px 8px;
|
159
|
-
line-height: $line-height-lg;
|
160
|
-
}
|
161
|
-
|
162
|
-
&:first-child > a {
|
163
|
-
margin: 0 15px;
|
164
|
-
}
|
165
|
-
|
166
|
-
&:last-child > a {
|
167
|
-
margin: 0 15px;
|
168
|
-
}
|
169
|
-
|
170
|
-
&:hover:not(.active) > a,
|
171
|
-
&:focus:not(.active) > a {
|
172
|
-
p,
|
173
|
-
i {
|
174
|
-
color: $white;
|
175
|
-
}
|
176
|
-
}
|
177
|
-
|
178
|
-
&:hover:not(.active) > a i,
|
179
|
-
&:focus:not(.active) > a i {
|
180
|
-
color: $white;
|
181
|
-
}
|
182
|
-
|
183
|
-
&.active > a:not([data-toggle='collapse']) {
|
184
|
-
background: transparent;
|
185
|
-
|
186
|
-
i,
|
187
|
-
p {
|
188
|
-
color: white;
|
189
|
-
}
|
190
|
-
|
191
|
-
&:before {
|
192
|
-
content: ' ';
|
193
|
-
position: absolute;
|
194
|
-
height: 6px;
|
195
|
-
width: 6px;
|
196
|
-
top: 11px;
|
197
|
-
left: -4px;
|
198
|
-
background: $white;
|
199
|
-
border-radius: 50%;
|
200
|
-
}
|
201
|
-
}
|
202
|
-
|
203
|
-
&.active > a[data-toggle='collapse'] {
|
204
|
-
background: transparent;
|
205
|
-
box-shadow: none;
|
206
|
-
color: $white;
|
129
|
+
@include nav-setup($white, 'normal');
|
207
130
|
|
208
|
-
|
209
|
-
|
210
|
-
}
|
211
|
-
|
212
|
-
& + div .nav .active a {
|
213
|
-
box-shadow: none;
|
214
|
-
.sidebar-mini-icon,
|
215
|
-
.sidebar-normal {
|
216
|
-
color: $white;
|
217
|
-
font-weight: $font-weight-normal;
|
218
|
-
}
|
219
|
-
|
220
|
-
&:before {
|
221
|
-
content: ' ';
|
222
|
-
position: absolute;
|
223
|
-
height: 6px;
|
224
|
-
width: 6px;
|
225
|
-
top: 17px;
|
226
|
-
left: -4px;
|
227
|
-
background: $white;
|
228
|
-
border-radius: 50%;
|
229
|
-
}
|
230
|
-
}
|
231
|
-
&:before {
|
232
|
-
content: ' ';
|
233
|
-
position: absolute;
|
234
|
-
height: 6px;
|
235
|
-
width: 6px;
|
236
|
-
top: 22px;
|
237
|
-
left: -4px;
|
238
|
-
background: rgba($white, 0.6);
|
239
|
-
border-radius: 50%;
|
240
|
-
}
|
241
|
-
}
|
242
|
-
}
|
243
|
-
|
244
|
-
p {
|
245
|
-
margin: 0;
|
246
|
-
line-height: 30px;
|
247
|
-
position: relative;
|
248
|
-
display: block;
|
249
|
-
height: auto;
|
250
|
-
white-space: nowrap;
|
251
|
-
@extend .animation-transition-general;
|
252
|
-
}
|
253
|
-
|
254
|
-
i {
|
255
|
-
font-size: 20px;
|
256
|
-
float: left;
|
257
|
-
margin-right: 12px;
|
258
|
-
line-height: 30px;
|
259
|
-
width: 34px;
|
260
|
-
text-align: center;
|
261
|
-
color: $opacity-8;
|
262
|
-
position: relative;
|
263
|
-
}
|
131
|
+
&.sidebar-dashboard-light {
|
132
|
+
@include nav-setup($nft-dark, 'ntf');
|
264
133
|
}
|
265
134
|
|
266
135
|
.sidebar-background {
|
@@ -365,24 +234,47 @@
|
|
365
234
|
&:before {
|
366
235
|
border-bottom-color: $info;
|
367
236
|
}
|
237
|
+
&:not(.sidebar-dashboard-light) {
|
238
|
+
&:before {
|
239
|
+
@include caret-color($info);
|
240
|
+
}
|
241
|
+
}
|
368
242
|
}
|
369
243
|
&[data='green'] {
|
370
244
|
@include linear-gradient($success-states, $success);
|
371
245
|
&:before {
|
372
246
|
border-bottom-color: $success;
|
373
247
|
}
|
248
|
+
&:not(.sidebar-dashboard-light) {
|
249
|
+
&:before {
|
250
|
+
@include caret-color($success);
|
251
|
+
}
|
252
|
+
}
|
374
253
|
}
|
375
254
|
&[data='orange'] {
|
376
255
|
@include linear-gradient($warning-states, $warning);
|
377
256
|
&:before {
|
378
257
|
border-bottom-color: $warning;
|
379
258
|
}
|
259
|
+
&:not(.sidebar-dashboard-light) {
|
260
|
+
&:before {
|
261
|
+
@include caret-color($warning);
|
262
|
+
}
|
263
|
+
}
|
380
264
|
}
|
381
265
|
&[data='red'] {
|
382
266
|
@include linear-gradient($danger-states, $danger);
|
383
267
|
&:before {
|
384
268
|
border-bottom-color: $danger;
|
385
269
|
}
|
270
|
+
&:not(.sidebar-dashboard-light) {
|
271
|
+
&:before {
|
272
|
+
@include caret-color($danger);
|
273
|
+
}
|
274
|
+
}
|
275
|
+
}
|
276
|
+
&[data='light'] {
|
277
|
+
// background-color: #fff !important;
|
386
278
|
}
|
387
279
|
|
388
280
|
.user {
|
@@ -445,17 +337,6 @@
|
|
445
337
|
}
|
446
338
|
}
|
447
339
|
}
|
448
|
-
|
449
|
-
&:before {
|
450
|
-
content: '';
|
451
|
-
position: absolute;
|
452
|
-
border-left: 5px solid transparent;
|
453
|
-
border-right: 5px solid transparent;
|
454
|
-
border-bottom: 5px solid $primary;
|
455
|
-
top: -5px;
|
456
|
-
left: 40px;
|
457
|
-
transform: translate(-50%);
|
458
|
-
}
|
459
340
|
}
|
460
341
|
|
461
342
|
.visible-on-sidebar-regular {
|
@@ -484,28 +365,46 @@
|
|
484
365
|
width: $full-width;
|
485
366
|
min-height: 100vh;
|
486
367
|
border-top: 2px solid $primary;
|
368
|
+
.fixed-top {
|
369
|
+
border-top: 2px solid $primary;
|
370
|
+
}
|
487
371
|
background: linear-gradient($background-black, $background-states-black);
|
488
372
|
|
489
373
|
@include transitions(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
490
374
|
|
491
375
|
&[data='blue'] {
|
492
376
|
border-top: 2px solid $info;
|
377
|
+
.fixed-top {
|
378
|
+
border-top: 2px solid $info;
|
379
|
+
}
|
493
380
|
}
|
494
381
|
|
495
382
|
&[data='green'] {
|
496
383
|
border-top: 2px solid $success;
|
384
|
+
.fixed-top {
|
385
|
+
border-top: 2px solid $success;
|
386
|
+
}
|
497
387
|
}
|
498
388
|
|
499
389
|
&[data='orange'] {
|
500
390
|
border-top: 2px solid $warning;
|
391
|
+
.fixed-top {
|
392
|
+
border-top: 2px solid $warning;
|
393
|
+
}
|
501
394
|
}
|
502
395
|
|
503
396
|
&[data='red'] {
|
504
397
|
border-top: 2px solid $danger;
|
398
|
+
.fixed-top {
|
399
|
+
border-top: 2px solid $danger;
|
400
|
+
}
|
505
401
|
}
|
506
402
|
|
507
403
|
&[data='primary'] {
|
508
404
|
border-top: 2px solid $primary;
|
405
|
+
.fixed-top {
|
406
|
+
border-top: 2px solid $primary;
|
407
|
+
}
|
509
408
|
}
|
510
409
|
|
511
410
|
> .content {
|
@@ -520,6 +419,46 @@
|
|
520
419
|
.header {
|
521
420
|
margin-bottom: 50px;
|
522
421
|
}
|
422
|
+
|
423
|
+
&.main-panel-dashboard-light {
|
424
|
+
&[data='light'] {
|
425
|
+
border-top: 2px solid $nft-dark;
|
426
|
+
.fixed-top {
|
427
|
+
border-top: 2px solid $nft-dark;
|
428
|
+
}
|
429
|
+
}
|
430
|
+
> .content {
|
431
|
+
padding: 80px 0px 30px 230px;
|
432
|
+
min-height: calc(100vh - 70px);
|
433
|
+
@include media-breakpoint-up(xl) {
|
434
|
+
.main-content-light {
|
435
|
+
border-radius: 30px 0px 0px 30px;
|
436
|
+
box-shadow: $material-shadow4;
|
437
|
+
height: calc(100vh - 15vh) !important;
|
438
|
+
// position: fixed;
|
439
|
+
// width: 90%;
|
440
|
+
overflow-y: auto;
|
441
|
+
overflow-x: hidden;
|
442
|
+
// background-image: url('https://cdn.dribbble.com/users/59947/screenshots/15084962/media/a57deba0874f256ddefdc17d39155385.jpg');
|
443
|
+
// background-image: url('https://vbaxt-fixed-assets.ams3.cdn.digitaloceanspaces.com/FIXED_for_all/images/dashboard-spafolly.jpg');
|
444
|
+
background-image: url('https://vbaxt-fixed-assets.ams3.cdn.digitaloceanspaces.com/FIXED_for_all/patterns/topography5.svg');
|
445
|
+
background-repeat: repeat;
|
446
|
+
background-size: contain;
|
447
|
+
// padding: 20px;
|
448
|
+
&:before {
|
449
|
+
// content: '';
|
450
|
+
width: 100%;
|
451
|
+
height: 80%;
|
452
|
+
position: absolute;
|
453
|
+
opacity: 0.3;
|
454
|
+
border-radius: 30px 0px 0px 30px;
|
455
|
+
overflow: hidden;
|
456
|
+
background-image: url('https://cdn.dribbble.com/users/3060738/screenshots/12765413/media/bf83f45bf3c1d6679bc39ff62b5e0f20.jpg');
|
457
|
+
}
|
458
|
+
}
|
459
|
+
}
|
460
|
+
}
|
461
|
+
}
|
523
462
|
}
|
524
463
|
|
525
464
|
.perfect-scrollbar-on {
|
@@ -667,6 +606,11 @@
|
|
667
606
|
.content {
|
668
607
|
padding-left: 30px;
|
669
608
|
}
|
609
|
+
&.main-panel-dashboard-light {
|
610
|
+
.content {
|
611
|
+
padding-left: 0px;
|
612
|
+
}
|
613
|
+
}
|
670
614
|
}
|
671
615
|
}
|
672
616
|
|
@@ -733,7 +677,7 @@
|
|
733
677
|
}
|
734
678
|
}
|
735
679
|
|
736
|
-
.sidebar:hover {
|
680
|
+
.sidebar:hover:not(.sidebar-dashboard-light) {
|
737
681
|
width: $sidebar-width;
|
738
682
|
|
739
683
|
.logo {
|
@@ -774,6 +718,15 @@
|
|
774
718
|
> .content {
|
775
719
|
padding-left: 130px;
|
776
720
|
}
|
721
|
+
|
722
|
+
&.main-panel-dashboard-light {
|
723
|
+
> .content {
|
724
|
+
padding-left: 80px;
|
725
|
+
position: absolute;
|
726
|
+
// z-index: 9999999;
|
727
|
+
width: 100%;
|
728
|
+
}
|
729
|
+
}
|
777
730
|
}
|
778
731
|
|
779
732
|
footer {
|
@@ -781,12 +734,25 @@
|
|
781
734
|
}
|
782
735
|
}
|
783
736
|
|
784
|
-
.
|
785
|
-
|
786
|
-
|
787
|
-
|
788
|
-
|
789
|
-
|
737
|
+
.main-panel {
|
738
|
+
.navbar-minimize {
|
739
|
+
button {
|
740
|
+
margin-left: 10px;
|
741
|
+
i {
|
742
|
+
color: $white;
|
743
|
+
font-size: 20px;
|
744
|
+
}
|
745
|
+
}
|
746
|
+
}
|
747
|
+
&.main-panel-dashboard-light {
|
748
|
+
.navbar-minimize {
|
749
|
+
button {
|
750
|
+
margin-left: 10px;
|
751
|
+
i {
|
752
|
+
color: $nft-dark;
|
753
|
+
font-size: 20px;
|
754
|
+
}
|
755
|
+
}
|
790
756
|
}
|
791
757
|
}
|
792
758
|
}
|
@@ -1,28 +1,34 @@
|
|
1
1
|
.white-content {
|
2
2
|
background: $light-bg;
|
3
3
|
|
4
|
-
.navbar.navbar-transparent .navbar-brand
|
4
|
+
.navbar.navbar-transparent .navbar-brand,
|
5
|
+
.navbar.bg-white .navbar-brand {
|
5
6
|
color: $black-states;
|
6
7
|
}
|
7
8
|
|
8
|
-
.navbar.navbar-transparent .navbar-toggler-bar
|
9
|
+
.navbar.navbar-transparent .navbar-toggler-bar,
|
10
|
+
.navbar.bg-white .navbar-toggler-bar {
|
9
11
|
background: $black-states;
|
10
12
|
}
|
11
|
-
.navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item)
|
13
|
+
.navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item),
|
14
|
+
.navbar.bg-white .navbar-nav li a:not(.dropdown-item) {
|
12
15
|
color: $black-states;
|
13
16
|
& i {
|
14
17
|
color: $black-states;
|
15
18
|
}
|
16
19
|
}
|
17
20
|
|
18
|
-
.navbar.navbar-transparent .navbar-minimize button i
|
21
|
+
.navbar.navbar-transparent .navbar-minimize button i,
|
22
|
+
.navbar.bg-white .navbar-minimize button i {
|
19
23
|
color: $black-states;
|
20
24
|
}
|
21
25
|
|
22
|
-
.navbar.navbar-transparent .search-bar.input-group i
|
26
|
+
.navbar.navbar-transparent .search-bar.input-group i,
|
27
|
+
.navbar.bg-white .search-bar.input-group i {
|
23
28
|
color: $black-states;
|
24
29
|
}
|
25
|
-
.navbar.navbar-transparent .search-bar.input-group .form-control
|
30
|
+
.navbar.navbar-transparent .search-bar.input-group .form-control,
|
31
|
+
.navbar.bg-white .search-bar.input-group .form-control {
|
26
32
|
color: $default;
|
27
33
|
&::placeholder {
|
28
34
|
color: $dark-gray;
|
@@ -32,9 +38,29 @@
|
|
32
38
|
.sidebar {
|
33
39
|
box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.1),
|
34
40
|
0 4px 20px 0 rgba(0, 0, 0, 0.15);
|
41
|
+
|
35
42
|
p {
|
36
43
|
color: $opacity-8;
|
37
44
|
}
|
45
|
+
|
46
|
+
&.sidebar-dashboard-light {
|
47
|
+
box-shadow: none !important;
|
48
|
+
margin-left: 0px !important;
|
49
|
+
|
50
|
+
ul > li {
|
51
|
+
p,
|
52
|
+
i {
|
53
|
+
color: $nft-grey;
|
54
|
+
}
|
55
|
+
.sidebar-normal,
|
56
|
+
.sidebar-mini-icon {
|
57
|
+
color: $nft-grey !important;
|
58
|
+
}
|
59
|
+
> a {
|
60
|
+
color: $nft-grey !important;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
}
|
38
64
|
}
|
39
65
|
|
40
66
|
.main-panel {
|
@@ -55,6 +55,10 @@
|
|
55
55
|
}
|
56
56
|
}
|
57
57
|
}
|
58
|
+
|
59
|
+
&.long {
|
60
|
+
padding: $btn-padding-y $btn-padding-x * 2;
|
61
|
+
}
|
58
62
|
}
|
59
63
|
|
60
64
|
// Future-proof disabling of clicks on `<a>` elements
|
@@ -73,6 +77,13 @@ fieldset:disabled a.btn {
|
|
73
77
|
}
|
74
78
|
}
|
75
79
|
|
80
|
+
@each $color, $value in $theme-colors {
|
81
|
+
.btn-rounded-#{$color} {
|
82
|
+
border-radius: 30px !important;
|
83
|
+
border: 1px solid $value !important;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
76
87
|
@each $color, $value in $theme-colors {
|
77
88
|
.btn-outline-#{$color} {
|
78
89
|
@include button-outline-variant($value);
|
@@ -80,16 +91,31 @@ fieldset:disabled a.btn {
|
|
80
91
|
}
|
81
92
|
|
82
93
|
// Gradient
|
94
|
+
@mixin local_mixin_for_gradient_active($color) {
|
95
|
+
@include set-gradient-button($color);
|
96
|
+
color: $light;
|
97
|
+
// background-size: 300% 100%;
|
98
|
+
transition: all 0.4s ease-in-out;
|
99
|
+
border: 0px solid transparent !important;
|
100
|
+
&:hover {
|
101
|
+
background-position: 100% 0;
|
102
|
+
transition: all 0.4s ease-in-out;
|
103
|
+
color: $light;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
83
107
|
@each $color, $value in $theme-gradient-colors {
|
84
108
|
.btn-gradient-#{$color} {
|
85
|
-
@include
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
109
|
+
@include local_mixin_for_gradient_active($color);
|
110
|
+
&[aria-selected='true'] {
|
111
|
+
border: 1px solid #fff !important;
|
112
|
+
}
|
113
|
+
&[aria-selected='false'] {
|
114
|
+
// display: none !important;
|
115
|
+
// @include button-outline-variant($value);
|
116
|
+
background: #fff !important;
|
117
|
+
border: 1px solid #454545 !important;
|
118
|
+
color: #454545 !important;
|
93
119
|
}
|
94
120
|
}
|
95
121
|
}
|