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
@@ -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
- .nav {
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
- i {
209
- color: $white;
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
- .navbar-minimize {
785
- button {
786
- margin-left: 10px;
787
- i {
788
- color: $white;
789
- font-size: 20px;
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 set-gradient-button($color);
86
- color: $light;
87
- // background-size: 300% 100%;
88
- transition: all 0.4s ease-in-out;
89
- &:hover {
90
- background-position: 100% 0;
91
- transition: all 0.4s ease-in-out;
92
- color: $light;
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
  }