viniBaxter-desk_front 26 → 30.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,139 @@
1
+ @mixin nav-setup-normal($color) {
2
+ .nav {
3
+ // margin-top: 20px;
4
+ display: block;
5
+
6
+ .caret {
7
+ top: 14px;
8
+ position: absolute;
9
+ right: 10px;
10
+ }
11
+
12
+ li {
13
+ > a + div .nav {
14
+ margin-top: 5px;
15
+ li > a {
16
+ margin-top: 0px;
17
+ padding: 2px 8px;
18
+ }
19
+ }
20
+
21
+ > a {
22
+ // change 🤍
23
+ margin: 2px 15px 0;
24
+ border-radius: $btn-round-radius;
25
+ color: $color;
26
+ display: block;
27
+ text-decoration: none;
28
+ position: relative;
29
+ text-transform: uppercase;
30
+ cursor: pointer;
31
+ font-size: $font-size-sm !important;
32
+ padding: 3px 8px;
33
+ line-height: $line-height-lg;
34
+ }
35
+ // change 🤍
36
+ &:first-child > a {
37
+ margin: 0 15px;
38
+ }
39
+
40
+ &:last-child > a {
41
+ margin: 0 15px;
42
+ }
43
+
44
+ &:hover:not(.active) > a,
45
+ &:focus:not(.active) > a {
46
+ p,
47
+ i {
48
+ color: $color;
49
+ }
50
+ }
51
+
52
+ &:hover:not(.active) > a i,
53
+ &:focus:not(.active) > a i {
54
+ color: $color;
55
+ }
56
+
57
+ &.active > a:not([data-toggle='collapse']) {
58
+ background: transparent;
59
+
60
+ i,
61
+ p {
62
+ color: white;
63
+ }
64
+ // change 🤍
65
+ &:before {
66
+ content: ' ';
67
+ position: absolute;
68
+ height: 6px;
69
+ width: 6px;
70
+ top: 11px;
71
+ left: -4px;
72
+ background: $color;
73
+ border-radius: 50%;
74
+ }
75
+ }
76
+
77
+ &.active > a[data-toggle='collapse'] {
78
+ background: transparent;
79
+ box-shadow: none;
80
+ color: $color;
81
+
82
+ i {
83
+ color: $color;
84
+ }
85
+
86
+ & + div .nav .active a {
87
+ box-shadow: none;
88
+ .sidebar-mini-icon,
89
+ .sidebar-normal {
90
+ color: $color;
91
+ font-weight: $font-weight-normal;
92
+ }
93
+ // change 🤍
94
+ &:before {
95
+ content: ' ';
96
+ position: absolute;
97
+ height: 6px;
98
+ width: 6px;
99
+ top: 17px;
100
+ left: -4px;
101
+ background: $color;
102
+ border-radius: 50%;
103
+ }
104
+ }
105
+ &:before {
106
+ content: ' ';
107
+ position: absolute;
108
+ height: 6px;
109
+ width: 6px;
110
+ top: 22px;
111
+ left: -4px;
112
+ background: rgba($color, 0.6);
113
+ border-radius: 50%;
114
+ }
115
+ }
116
+ }
117
+
118
+ p {
119
+ margin: 0;
120
+ line-height: 30px;
121
+ position: relative;
122
+ display: block;
123
+ height: auto;
124
+ white-space: nowrap;
125
+ @extend .animation-transition-general;
126
+ }
127
+
128
+ i {
129
+ font-size: 20px;
130
+ float: left;
131
+ margin-right: 12px;
132
+ line-height: 30px;
133
+ width: 34px;
134
+ text-align: center;
135
+ color: $opacity-8;
136
+ position: relative;
137
+ }
138
+ }
139
+ }
@@ -0,0 +1,146 @@
1
+ @mixin nav-setup-ntf($color) {
2
+ .nav {
3
+ // margin-top: 20px;
4
+ display: block;
5
+
6
+ .caret {
7
+ top: 14px;
8
+ position: absolute;
9
+ right: 10px;
10
+ }
11
+
12
+ li {
13
+ > a + div .nav {
14
+ margin-top: 5px;
15
+ li > a {
16
+ margin-top: 0px;
17
+ padding: 2px 8px;
18
+ }
19
+ }
20
+
21
+ > a {
22
+ // change 🤍
23
+ margin: 0px 5px;
24
+ padding: 7px 5px;
25
+ border-radius: $btn-round-radius;
26
+ color: $color;
27
+ display: block;
28
+ text-decoration: none;
29
+ position: relative;
30
+ text-transform: uppercase;
31
+ cursor: pointer;
32
+ font-size: $font-size-sm !important;
33
+ line-height: $line-height-lg;
34
+ }
35
+ // change 🤍
36
+ &:first-child > a {
37
+ margin: 0px 5px;
38
+ padding: 7px 5px;
39
+ }
40
+
41
+ &:last-child > a {
42
+ margin: 0px 5px;
43
+ padding: 7px 5px;
44
+ }
45
+
46
+ &:hover:not(.active) > a,
47
+ &:focus:not(.active) > a {
48
+ p,
49
+ i {
50
+ color: $color;
51
+ }
52
+ }
53
+
54
+ &:hover:not(.active) > a i,
55
+ &:focus:not(.active) > a i {
56
+ color: $color;
57
+ }
58
+
59
+ &.active > a:not([data-toggle='collapse']) {
60
+ background: transparent;
61
+
62
+ i {
63
+ color: $color;
64
+ }
65
+
66
+ p {
67
+ color: $color;
68
+ }
69
+ // change 🤍
70
+ // this is simple link 🤍
71
+ &:before {
72
+ content: ' ';
73
+ position: absolute;
74
+ height: 100%;
75
+ width: 12px;
76
+ top: 0px;
77
+ left: -12px;
78
+ background: $color;
79
+ border-radius: 10px;
80
+ }
81
+ }
82
+
83
+ &.active > a[data-toggle='collapse'] {
84
+ background: transparent;
85
+ box-shadow: none;
86
+ color: $color;
87
+
88
+ i {
89
+ color: $color;
90
+ }
91
+
92
+ & + div .nav .active a {
93
+ box-shadow: none;
94
+ .sidebar-mini-icon,
95
+ .sidebar-normal {
96
+ color: $color;
97
+ font-weight: $font-weight-normal;
98
+ }
99
+
100
+ &:before {
101
+ content: ' ';
102
+ position: absolute;
103
+ height: 6px;
104
+ width: 6px;
105
+ top: 17px;
106
+ left: -4px;
107
+ background: $color;
108
+ border-radius: 50%;
109
+ }
110
+ }
111
+ // this is sub menu toggle 🤍
112
+ &:before {
113
+ content: ' ';
114
+ position: absolute;
115
+ height: 100%;
116
+ width: 12px;
117
+ top: 0px;
118
+ left: -12px;
119
+ background: $color;
120
+ border-radius: 10px;
121
+ }
122
+ }
123
+ }
124
+
125
+ p {
126
+ margin: 0;
127
+ line-height: 30px;
128
+ position: relative;
129
+ display: block;
130
+ height: auto;
131
+ white-space: nowrap;
132
+ @extend .animation-transition-general;
133
+ }
134
+
135
+ i {
136
+ font-size: 20px;
137
+ float: left;
138
+ margin-right: 12px;
139
+ line-height: 30px;
140
+ width: 34px;
141
+ text-align: center;
142
+ color: $opacity-8;
143
+ position: relative;
144
+ }
145
+ }
146
+ }
@@ -0,0 +1,8 @@
1
+ @mixin nav-setup($color, $nav-style) {
2
+ @if ($nav-style == 'normal') {
3
+ @include nav-setup-normal($color);
4
+ }
5
+ @if ($nav-style == 'ntf') {
6
+ @include nav-setup-ntf($color);
7
+ }
8
+ }
@@ -0,0 +1,10 @@
1
+ @mixin caret-color($color) {
2
+ content: '';
3
+ position: absolute;
4
+ border-left: 5px solid transparent;
5
+ border-right: 5px solid transparent;
6
+ border-bottom: 5px solid $color;
7
+ top: -5px;
8
+ left: 40px;
9
+ transform: translate(-50%);
10
+ }
@@ -10,9 +10,9 @@
10
10
  border-radius: 50%;
11
11
  vertical-align: middle;
12
12
  overflow: hidden;
13
- img{
14
- width: 100%;
15
- }
13
+ img {
14
+ width: 100%;
15
+ }
16
16
  }
17
17
 
18
18
  .navbar-wrapper {
@@ -24,43 +24,42 @@
24
24
  color: $white;
25
25
  }
26
26
 
27
- .btn{
27
+ .btn {
28
28
  margin: 0 5px 0 10px;
29
29
  }
30
30
 
31
- &.navbar-absolute{
31
+ &.navbar-absolute {
32
32
  position: absolute;
33
33
  z-index: 1050;
34
34
  }
35
35
 
36
-
37
- &.navbar-transparent{
36
+ &.navbar-transparent {
38
37
  background: transparent !important;
39
38
  }
40
39
 
41
- &.bg-white{
42
- .navbar-nav{
43
- .search-bar.input-group{
44
- i{
40
+ &.bg-white {
41
+ .navbar-nav {
42
+ .search-bar.input-group {
43
+ i {
45
44
  color: $black;
46
45
  }
47
46
  }
48
47
 
49
- .search-bar.input-group .form-control{
50
- background: rgba($black,0.1);
48
+ .search-bar.input-group .form-control {
49
+ background: rgba($black, 0.1);
51
50
  border-radius: 4px;
52
51
  }
53
52
 
54
- a.nav-link{
53
+ a.nav-link {
55
54
  color: $black !important;
56
- p{
55
+ p {
57
56
  color: $black;
58
57
  }
59
58
  }
60
-
61
59
  }
62
60
 
63
- .navbar-text, .navbar-brand{
61
+ .navbar-text,
62
+ .navbar-brand {
64
63
  color: $black;
65
64
  }
66
65
 
@@ -71,7 +70,6 @@
71
70
  .form-control::placeholder {
72
71
  color: $dark-gray !important;
73
72
  }
74
-
75
73
  }
76
74
 
77
75
  &.bg-dark {
@@ -100,210 +98,208 @@
100
98
 
101
99
  .navbar-brand {
102
100
  position: relative;
103
- padding-top: .3125rem;
104
- padding-bottom: .3125rem;
101
+ padding-top: 0.3125rem;
102
+ padding-bottom: 0.3125rem;
105
103
  color: $white;
106
104
  margin-left: 17px;
107
105
  text-transform: uppercase;
108
106
  font-size: $font-paragraph;
109
107
  }
110
108
 
111
- .navbar-toggle button:focus, .navbar-toggler{
109
+ .navbar-toggle button:focus,
110
+ .navbar-toggler {
112
111
  outline: none;
113
112
  }
114
-
115
113
  }
116
114
 
117
115
  .navbar-minimize-fixed {
118
- position: fixed;
116
+ position: fixed;
119
117
  margin-left: 40px;
120
118
  margin-top: 14px;
121
- transition: 0.3s ease;
122
- color: white;
123
- z-index: 20;
124
- opacity: 0;
125
- transition: 0.2s ease;
126
- button{
127
- i {
128
- font-size: 20px;
129
- }
130
- }
119
+ transition: 0.3s ease;
120
+ color: white;
121
+ z-index: 20;
122
+ opacity: 0;
123
+ transition: 0.2s ease;
124
+ button {
125
+ i {
126
+ font-size: 20px;
127
+ }
128
+ }
131
129
  }
132
130
 
133
131
  .notification {
134
132
  background: $danger;
135
- color: $white;
136
- border-radius: $border-radius-xl;
137
- height: 6px;
138
- width: 6px;
139
- position: absolute;
140
- text-align: center;
141
- font-size: 12px;
142
- font-weight: 800;
133
+ color: $white;
134
+ border-radius: $border-radius-xl;
135
+ height: 6px;
136
+ width: 6px;
137
+ position: absolute;
138
+ text-align: center;
139
+ font-size: 12px;
140
+ font-weight: 800;
143
141
  top: 10px;
144
142
  right: 10px;
145
- border: 1px solid $danger;
143
+ border: 1px solid $danger;
146
144
  }
147
145
 
148
- .navbar-nav li{
146
+ .navbar-nav li {
149
147
  padding: 0 10px;
150
- a{
148
+ a {
151
149
  color: $white;
152
150
  }
153
- i{
151
+ i {
154
152
  vertical-align: middle;
155
153
  font-size: 20px;
156
154
  }
157
155
  }
158
156
 
159
- @include media-breakpoint-down(md){
157
+ @include media-breakpoint-down(md) {
160
158
  .navbar {
161
159
  top: -70px;
162
160
  }
163
161
 
164
- .navbar{
165
- .container-fluid{
166
- padding-right: 15px;
167
- padding-left: 15px;
168
- }
162
+ .navbar {
163
+ .container-fluid {
164
+ padding-right: 15px;
165
+ padding-left: 15px;
166
+ }
169
167
 
170
- .navbar-collapse{
171
- .input-group{
172
- margin: 0;
173
- margin-top: 5px;
174
- }
168
+ .navbar-collapse {
169
+ .input-group {
170
+ margin: 0;
171
+ margin-top: 5px;
175
172
  }
173
+ }
176
174
 
177
- .navbar-nav{
178
-
179
- .btn{
180
- margin-left: -3px;
181
- display: flex;
182
-
183
- i {
184
- margin-right: 12px;
185
- }
175
+ .navbar-nav {
176
+ .btn {
177
+ margin-left: -3px;
178
+ display: flex;
186
179
 
187
- span {
188
- margin: 0;
189
- text-transform: uppercase;
190
- font-weight: 300;
191
-
192
- &,
193
- &:hover,
194
- &:focus,
195
- &:active,
196
- &:active:focus {
197
- color: $black !important;
198
- }
199
- }
180
+ i {
181
+ margin-right: 12px;
200
182
  }
201
183
 
202
- a.nav-link{
203
- i{
204
- opacity: 1;
205
- margin-left: 4px;
206
- margin-right: 5px;
207
- }
208
- p{
209
- display: inline-block;
210
- text-transform: uppercase;
211
- margin-left: 7px;
212
- }
213
- }
214
-
215
- .modal-search .modal-dialog{
216
- padding: 0 40px;
217
- }
218
- .dropdown{
219
- margin: 5px 0;
220
- .nav-link{
221
- padding-bottom: 0;
222
- }
223
- .dropdown-menu{
224
- .dropdown-item{
225
- margin-top: 0;
226
- padding-left: 24px;
227
- }
228
- }
184
+ span {
185
+ margin: 0;
186
+ text-transform: uppercase;
187
+ font-weight: 300;
188
+
189
+ &,
190
+ &:hover,
191
+ &:focus,
192
+ &:active,
193
+ &:active:focus {
194
+ color: $black !important;
229
195
  }
196
+ }
230
197
  }
231
198
 
232
- .dropdown.show .dropdown-menu{
233
- display: block;
234
-
199
+ a.nav-link {
200
+ i {
201
+ opacity: 1;
202
+ margin-left: 4px;
203
+ margin-right: 5px;
204
+ }
205
+ p {
206
+ display: inline-block;
207
+ text-transform: uppercase;
208
+ margin-left: 7px;
209
+ }
235
210
  }
236
211
 
237
- .dropdown .dropdown-menu{
238
- display: none;
239
- li a{
240
- color: $black;
241
- }
212
+ .modal-search .modal-dialog {
213
+ padding: 0 40px;
242
214
  }
243
-
244
- .dropdown.show .dropdown-menu,
245
- .dropdown .dropdown-menu{
246
- background-color: transparent;
247
- border: 0;
248
- transition: none;
249
- -webkit-box-shadow: none;
250
- box-shadow: none;
251
- width: auto;
252
- margin: 0px 1rem;
253
- padding-top: 0;
254
- margin-top: 0px;
255
-
256
- &:before{
257
- display: none;
215
+ .dropdown {
216
+ margin: 5px 0;
217
+ .nav-link {
218
+ padding-bottom: 0;
219
+ }
220
+ .dropdown-menu {
221
+ .dropdown-item {
222
+ margin-top: 0;
223
+ padding-left: 24px;
258
224
  }
225
+ }
259
226
  }
227
+ }
228
+
229
+ .dropdown.show .dropdown-menu {
230
+ display: block;
231
+ }
260
232
 
261
- .dropdown-menu .dropdown-item:focus,
262
- .dropdown-menu .dropdown-item:hover{
263
- color: $white;
233
+ .dropdown .dropdown-menu {
234
+ display: none;
235
+ li a {
236
+ color: $black;
264
237
  }
238
+ }
265
239
 
266
- &.bg-white .dropdown-menu .dropdown-item:focus,
267
- &.bg-white .dropdown-menu .dropdown-item:hover{
268
- color: $default;
240
+ .dropdown.show .dropdown-menu,
241
+ .dropdown .dropdown-menu {
242
+ background-color: transparent;
243
+ border: 0;
244
+ transition: none;
245
+ -webkit-box-shadow: none;
246
+ box-shadow: none;
247
+ width: auto;
248
+ margin: 0px 1rem;
249
+ padding-top: 0;
250
+ margin-top: 0px;
251
+
252
+ &:before {
253
+ display: none;
269
254
  }
255
+ }
270
256
 
271
- .navbar-toggler-bar{
272
- display: block;
273
- position: relative;
274
- width: 22px;
275
- height: 1px;
276
- border-radius: 1px;
277
- background: $white;
278
-
279
- &.navbar-kebab{
280
- height: 4px;
281
- width: 4px;
282
- margin-bottom: 3px;
283
- border-radius: 50%;
284
- }
257
+ .dropdown-menu .dropdown-item:focus,
258
+ .dropdown-menu .dropdown-item:hover {
259
+ color: $white;
260
+ }
285
261
 
286
- & + .navbar-toggler-bar{
287
- margin-top: 7px;
288
- }
262
+ &.bg-white .dropdown-menu .dropdown-item:focus,
263
+ &.bg-white .dropdown-menu .dropdown-item:hover {
264
+ color: $default;
265
+ }
289
266
 
290
- & + .navbar-toggler-bar.navbar-kebab{
291
- margin-top: 0px;
292
- }
267
+ .navbar-toggler-bar {
268
+ display: block;
269
+ position: relative;
270
+ width: 22px;
271
+ height: 1px;
272
+ border-radius: 1px;
273
+ background: $white;
274
+
275
+ &.navbar-kebab {
276
+ height: 3px;
277
+ width: 3px;
278
+ margin-bottom: 5px;
279
+ border-radius: 50%;
280
+ }
293
281
 
294
- &.bar2{
295
- width: 17px;
296
- transition: width .2s linear;
297
- }
282
+ & + .navbar-toggler-bar {
283
+ margin-top: 7px;
298
284
  }
299
285
 
300
- &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
301
- background-color: $default;
286
+ & + .navbar-toggler-bar.navbar-kebab {
287
+ margin-top: 0px;
302
288
  }
303
289
 
304
- & .toggled .navbar-toggler-bar{
305
- width: 24px;
290
+ &.bar2 {
291
+ width: 17px;
292
+ transition: width 0.2s linear;
306
293
  }
294
+ }
295
+
296
+ &.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
297
+ background-color: $default;
298
+ }
299
+
300
+ & .toggled .navbar-toggler-bar {
301
+ width: 24px;
302
+ }
307
303
  }
308
304
 
309
305
  .bar1,
@@ -340,46 +336,56 @@
340
336
  @include bottombar-back-rotation();
341
337
 
342
338
  @-webkit-keyframes fadeIn {
343
- 0% {opacity: 0;}
344
- 100% {opacity: 1;}
339
+ 0% {
340
+ opacity: 0;
341
+ }
342
+ 100% {
343
+ opacity: 1;
344
+ }
345
345
  }
346
346
  @-moz-keyframes fadeIn {
347
- 0% {opacity: 0;}
348
- 100% {opacity: 1;}
347
+ 0% {
348
+ opacity: 0;
349
+ }
350
+ 100% {
351
+ opacity: 1;
352
+ }
349
353
  }
350
354
  @keyframes fadeIn {
351
- 0% {opacity: 0;}
352
- 100% {opacity: 1;}
355
+ 0% {
356
+ opacity: 0;
357
+ }
358
+ 100% {
359
+ opacity: 1;
360
+ }
353
361
  }
354
362
 
355
- .navbar-nav{
356
- .nav-link{
357
- i.fa,
358
- i.tim-icons{
359
- opacity: .5;
360
- }
363
+ .navbar-nav {
364
+ .nav-link {
365
+ i.fa,
366
+ i.tim-icons {
367
+ opacity: 0.5;
361
368
  }
369
+ }
362
370
  }
363
-
364
371
  }
365
372
 
366
373
  @include media-breakpoint-up(lg) {
367
374
  .navbar-collapse {
368
- background: none !important;
375
+ background: none !important;
369
376
  }
370
377
 
371
378
  .navbar .navbar-toggle {
372
- display: none;
373
-
379
+ display: none;
374
380
  }
375
381
 
376
382
  .navbar-nav {
377
- .nav-link {
378
- &.profile-photo {
379
- padding: 0;
380
- margin: 7px $padding-base-horizontal;
381
- }
383
+ .nav-link {
384
+ &.profile-photo {
385
+ padding: 0;
386
+ margin: 7px $padding-base-horizontal;
382
387
  }
388
+ }
383
389
  }
384
390
 
385
391
  .navbar {
@@ -395,7 +401,6 @@
395
401
  padding-right: $list-inline-padding;
396
402
  padding-left: $list-inline-padding;
397
403
  }
398
-
399
404
  }
400
405
 
401
406
  @include media-breakpoint-down(xs) {
@@ -403,10 +408,9 @@
403
408
  margin-left: 0;
404
409
  margin-right: 0;
405
410
  }
406
-
407
411
  }
408
412
 
409
- @include media-breakpoint-between (md, lg){
413
+ @include media-breakpoint-between(md, lg) {
410
414
  .bar1,
411
415
  .bar2,
412
416
  .bar3 {
@@ -441,22 +445,34 @@
441
445
  @include bottombar-back-rotation();
442
446
 
443
447
  @-webkit-keyframes fadeIn {
444
- 0% {opacity: 0;}
445
- 100% {opacity: 1;}
448
+ 0% {
449
+ opacity: 0;
450
+ }
451
+ 100% {
452
+ opacity: 1;
453
+ }
446
454
  }
447
455
  @-moz-keyframes fadeIn {
448
- 0% {opacity: 0;}
449
- 100% {opacity: 1;}
456
+ 0% {
457
+ opacity: 0;
458
+ }
459
+ 100% {
460
+ opacity: 1;
461
+ }
450
462
  }
451
463
  @keyframes fadeIn {
452
- 0% {opacity: 0;}
453
- 100% {opacity: 1;}
464
+ 0% {
465
+ opacity: 0;
466
+ }
467
+ 100% {
468
+ opacity: 1;
469
+ }
454
470
  }
455
471
 
456
472
  .navbar .navbar-toggler-bar.bar2 {
457
473
  width: 17px;
458
- transition: width .2s linear;
459
- }
474
+ transition: width 0.2s linear;
475
+ }
460
476
 
461
477
  .navbar .navbar-toggler-bar {
462
478
  display: block;
@@ -466,15 +482,15 @@
466
482
  border-radius: 1px;
467
483
  background: $white;
468
484
  }
469
- .navbar .navbar-toggler-bar+.navbar-toggler-bar {
485
+ .navbar .navbar-toggler-bar + .navbar-toggler-bar {
470
486
  margin-top: 7px;
471
487
  }
472
488
 
473
- .navbar .navbar-toggle .navbar-toggler{
489
+ .navbar .navbar-toggle .navbar-toggler {
474
490
  display: block;
475
491
  }
476
492
 
477
- .navbar-minimize-fixed{
493
+ .navbar-minimize-fixed {
478
494
  display: none;
479
495
  }
480
496
  }