@wizishop/angular-components 0.0.58 → 0.0.62

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 (22) hide show
  1. package/angular-components.scss +1965 -1650
  2. package/bundles/wizishop-angular-components.umd.js +121 -6
  3. package/bundles/wizishop-angular-components.umd.js.map +1 -1
  4. package/bundles/wizishop-angular-components.umd.min.js +1 -1
  5. package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
  6. package/esm2015/lib/components/button/button.component.js +39 -4
  7. package/esm2015/lib/components/search/search.component.js +75 -0
  8. package/esm2015/lib/components/search/shared/search-option.model.js +2 -0
  9. package/esm2015/lib/components/shared-components.module.js +4 -2
  10. package/esm2015/lib/components/tag/tag.component.js +5 -3
  11. package/esm2015/public-api.js +3 -1
  12. package/fesm2015/wizishop-angular-components.js +119 -7
  13. package/fesm2015/wizishop-angular-components.js.map +1 -1
  14. package/lib/components/button/button.component.d.ts +12 -2
  15. package/lib/components/search/search.component.d.ts +24 -0
  16. package/lib/components/search/shared/search-option.model.d.ts +5 -0
  17. package/lib/components/tag/tag.component.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/public-api.d.ts +2 -0
  20. package/wizishop-angular-components-0.0.62.tgz +0 -0
  21. package/wizishop-angular-components.metadata.json +1 -1
  22. package/wizishop-angular-components-0.0.58.tgz +0 -0
package/angular-components.scss CHANGED
@@ -192,186 +192,292 @@ $wac-color-success-popup-alert: #6DCC95!default;
192
192
  }
193
193
  }
194
194
  }
195
- .wac-radio {
196
- .is-checkradio[type='radio'] {
197
- outline: 0 !important;
198
- & + label {
195
+ .wac-search {
196
+ width: 100%;
197
+ min-height: 50px;
198
+ border-radius: 3px;
199
+ background-color: $wac-white;
200
+ position: relative;
201
+ z-index: 2;
202
+ border: 1px solid $wac-border-light;
203
+ transition: 0.3s ease;
204
+ &.open {
205
+ border-color: $wac-wizishop-blue;
206
+ }
207
+ &__wrapper {
208
+ position: relative;
209
+ display: flex;
210
+ justify-content: space-between;
211
+ align-items: stretch;
212
+ align-content: stretch;
213
+ flex-wrap: nowrap;
214
+ width: 100%;
215
+ min-height: 50px;
216
+ @include media('<tablet') {
217
+ padding: 0 12px;
218
+ }
219
+ input {
220
+ background: transparent;
221
+ border: none;
222
+ color: $wac-main-text;
199
223
  font-size: rem(14);
200
- line-height: rem(24);
201
- color: $wac-input-radio-color-label;
202
- padding-left: 30px;
203
- padding-right: 5px;
204
- margin-right: 0;
205
- outline: 0 !important;
206
- &:before {
207
- width: 16px;
208
- height: 16px;
209
- border: 1px solid $wac-border-form;
210
- border-radius: 23px;
211
- top: 3px;
212
- }
213
- &:after {
214
- width: 20px;
215
- height: 20px;
216
- background: $wac-input-active-color;
217
- top: 1px;
218
- left: -2px;
219
- }
220
- &:before,
221
- &:after {
222
- outline: 0 !important;
224
+ height: 50px;
225
+ line-height: 50px;
226
+ padding: 0 20px 0 48px;
227
+ font-weight: 400;
228
+ width: 100%;
229
+ @include media('<tablet') {
230
+ padding: 0 0 0 10px;
223
231
  }
224
- &:hover,
225
- &:focus {
226
- &:before {
227
- border-color: $wac-input-active-color !important;
232
+ &::-webkit-input-placeholder {
233
+ /* Chrome/Opera/Safari */
234
+ color: $wac-multiple-search-input-color;
235
+ opacity: 1;
236
+ font-weight: 400;
237
+ @include media('<tablet') {
238
+ font-size: rem(11);
228
239
  }
229
240
  }
230
- }
231
- &:hover {
232
- & + label {
233
- color: $wac-input-radio-color-active-label;
234
- &:before {
235
- border-color: $wac-input-active-color !important;
241
+ &::-moz-placeholder {
242
+ /* Firefox 19+ */
243
+ color: $wac-multiple-search-input-color;
244
+ opacity: 1;
245
+ font-weight: 400;
246
+ @include media('<tablet') {
247
+ font-size: rem(11);
236
248
  }
237
249
  }
238
- &:not([disabled]) {
239
- & + label {
240
- &:before {
241
- border-color: $wac-input-active-color !important;
242
- }
250
+ &:-ms-input-placeholder {
251
+ /* IE 10+ */
252
+ color: $wac-multiple-search-input-color;
253
+ opacity: 1;
254
+ font-weight: 400;
255
+ @include media('<tablet') {
256
+ font-size: rem(11);
243
257
  }
244
258
  }
245
- }
246
- &:checked + label {
247
- color: $wac-input-radio-color-active-label;
248
- &:before {
249
- border-color: $wac-input-active-color;
250
- }
251
- }
252
- }
253
-
254
-
255
- .wac-radio__row {
256
- min-width: 100%;
257
- margin: 0 0 7px;
258
- }
259
-
260
- &--nowrap {
261
- display: inline-block;
262
- width: auto;
263
- min-width: 0;
264
- margin: 0 10px 10px 0;
265
- .wac-radio {
266
- &__row {
267
- width: auto;
268
- display: inline-block;
269
- margin: 0;
259
+ &:-moz-placeholder {
260
+ /* Firefox 18- */
261
+ color: $wac-multiple-search-input-color;
262
+ opacity: 1;
263
+ font-weight: 400;
264
+ @include media('<tablet') {
265
+ font-size: rem(11);
266
+ }
270
267
  }
271
- }
272
- }
273
- & + .wac-radio {
274
- margin-top: rem(-6);
275
- }
276
-
277
- &.alone {
278
- label {
279
- padding-left: 7px;
280
- margin-right: 0;
281
- }
282
-
283
- }
284
-
285
- &__input {
286
- width: 100%;
287
- margin: rem(10) 0 0;
288
- border: none;
289
- padding: 0;
290
- input {
291
- height: 40px;
292
- max-height: 40px;
293
- padding: 0 20px;
294
- line-height: 40px;
295
- border: 1px solid $wac-border-form;
296
- border-radius: 3px;
297
- margin: 0 0 30px!important;
298
- font-size: rem(14) !important;
299
- color: $wac-main-text;
300
268
  &:focus {
301
- border-color: $wizishop-blue !important;
302
- box-shadow: 0px 0px 4px $wac-radio !important;
269
+ & + button i {
270
+ color: $wac-main-text;
271
+ }
303
272
  &::-webkit-input-placeholder {
304
273
  /* Chrome/Opera/Safari */
305
- opacity: 0;
274
+ color: $wac-white;
275
+ opacity: 1;
306
276
  }
307
277
  &::-moz-placeholder {
308
278
  /* Firefox 19+ */
309
- opacity: 0;
279
+ color: $wac-white;
280
+ opacity: 1;
310
281
  }
311
282
  &:-ms-input-placeholder {
312
283
  /* IE 10+ */
313
- opacity: 0;
284
+ color: $wac-white;
285
+ opacity: 1;
314
286
  }
315
287
  &:-moz-placeholder {
316
288
  /* Firefox 18- */
317
- opacity: 0;
289
+ color: $wac-white;
290
+ opacity: 1;
291
+ }
292
+ }
293
+ }
294
+ button {
295
+ display: flex;
296
+ align-items: center;
297
+ align-content: center;
298
+ justify-content: center;
299
+ width: 18px;
300
+ height: 18px;
301
+ border-radius: 3px;
302
+ position: absolute;
303
+ left: 20px;
304
+ top: 50%;
305
+ transform: translateY(-50%);
306
+ border: none;
307
+ cursor: pointer;
308
+ background-color: $wac-white;
309
+ i {
310
+ font-size: rem(18);
311
+ color: $wac-color-icon-search-multiple-search;
312
+ transition: 0.3s ease;
313
+ }
314
+ &:hover {
315
+ i {
316
+ color: $wac-wizishop-blue !important;
318
317
  }
319
318
  }
320
319
  }
321
320
  }
322
- }
323
- .wac {
324
- &-select-in-text {
321
+ &__absolute {
322
+ position: absolute;
323
+ top: 100%;
324
+ margin-top: rem(14);
325
+ left: -1px;
325
326
  width: auto;
326
- position: relative;
327
+ min-width: calc(100% - 38px);
328
+ max-width: calc(100% + 2px);
329
+ border: 1px solid $wac-border-light;
330
+ border-radius: 3px;
327
331
  display: flex;
328
- align-items: center;
329
- padding: 20px 0;
330
- &:hover,
331
- &:focus {
332
- z-index: 4;
333
- }
334
- &__prepend,
335
- &__after {
336
- font-size: rem(14);
337
- line-height: rem(16);
338
- color: $wac-main-text;
332
+ flex-direction: column;
333
+ justify-content: flex-start;
334
+ align-items: flex-start;
335
+ background-color: $wac-white;
336
+ max-height: 260px;
337
+ height: auto;
338
+ visibility: visible;
339
+ opacity: 1;
340
+ box-shadow: 3px 3px 20px $wac-select-box-shadow;
341
+ padding: 10px;
342
+ &.hidden {
343
+ visibility: hidden;
344
+ opacity: 0;
345
+ & > * {
346
+ opacity: 0;
347
+ transition: 0s;
348
+ }
339
349
  }
340
- &__prepend {
341
- margin: 0 rem(4) 0 0;
350
+ .ps {
351
+ max-height: 240px;
342
352
  }
343
- &__after {
344
- margin: 0 0 0 rem(4);
353
+ &.open,
354
+ &.open.hidden {
355
+ position: relative;
356
+ left: auto;
357
+ top: 0;
358
+ transform: translateX(-1px);
359
+ visibility: visible;
360
+ opacity: 1;
361
+ & > * {
362
+ opacity: 1;
363
+ transition: 0s;
364
+ }
345
365
  }
346
- &__current {
347
- display: flex;
348
- width: auto;
349
- justify-content: space-between;
350
- align-items: center;
351
- align-content: center;
366
+ &__item {
367
+ width: 100%;
352
368
  font-size: rem(14);
353
- line-height: rem(16);
354
- color: $wac-main-text;
369
+ line-height: rem(30);
355
370
  cursor: pointer;
356
- white-space: nowrap;
357
- text-overflow: ellipsis;
358
- font-weight: 500;
371
+ transition: 0.3s ease;
359
372
  position: relative;
360
- span {
361
- position: relative;
362
- white-space: nowrap;
363
- &:before {
364
- content: '';
365
- display: block;
366
- position: absolute;
367
- bottom: -3px;
368
- left: 0;
369
- width: 100%;
370
- height: 1px;
371
- background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23e95656' stroke-width='1' stroke-dasharray='3%2c 6' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e");
372
- background-position: left top;
373
- }
374
- &:after {
373
+ display: flex;
374
+ justify-content: flex-start;
375
+ align-content: center;
376
+ align-items: center;
377
+ color: $wac-second-color;
378
+ > div {
379
+ width: 100%;
380
+ display: flex;
381
+ align-items: center;
382
+ align-content: center;
383
+ }
384
+ .icon {
385
+ width: 24px;
386
+ margin: 0 10px 0 0;
387
+ height: auto;
388
+ max-height: 24px;
389
+ }
390
+ &:not(:last-child) {
391
+ margin: 0 0 rem(10);
392
+ }
393
+ &:empty {
394
+ display: none;
395
+ }
396
+ &:first-child {
397
+ border-width: 1px 0 1px;
398
+ }
399
+ &:hover,
400
+ &:focus {
401
+ background-color: $wac-gray-background;
402
+ color: $wac-main-text;
403
+ }
404
+ > div {
405
+ padding: 0 10px;
406
+ &.selected {
407
+ background-color: $wac-gray-background;
408
+ color: $wac-main-text;
409
+ }
410
+ }
411
+ }
412
+ &__empty {
413
+ display: flex;
414
+ width: 100%;
415
+ justify-content: center;
416
+ align-items: center;
417
+ padding: 10px;
418
+ span {
419
+ font-size: rem(16);
420
+ font-weight: 400;
421
+ text-align: center;
422
+ color: $wac-second-color;
423
+ display: inline-block;
424
+ line-height: rem(25);
425
+ }
426
+ }
427
+ }
428
+ }
429
+ .wac {
430
+ &-select-in-text {
431
+ width: auto;
432
+ position: relative;
433
+ display: flex;
434
+ align-items: center;
435
+ padding: 20px 0;
436
+ &:hover,
437
+ &:focus {
438
+ z-index: 4;
439
+ }
440
+ &__prepend,
441
+ &__after {
442
+ font-size: rem(14);
443
+ line-height: rem(16);
444
+ color: $wac-main-text;
445
+ }
446
+ &__prepend {
447
+ margin: 0 rem(4) 0 0;
448
+ }
449
+ &__after {
450
+ margin: 0 0 0 rem(4);
451
+ }
452
+ &__current {
453
+ display: flex;
454
+ width: auto;
455
+ justify-content: space-between;
456
+ align-items: center;
457
+ align-content: center;
458
+ font-size: rem(14);
459
+ line-height: rem(16);
460
+ color: $wac-main-text;
461
+ cursor: pointer;
462
+ white-space: nowrap;
463
+ text-overflow: ellipsis;
464
+ font-weight: 500;
465
+ position: relative;
466
+ span {
467
+ position: relative;
468
+ white-space: nowrap;
469
+ &:before {
470
+ content: '';
471
+ display: block;
472
+ position: absolute;
473
+ bottom: -3px;
474
+ left: 0;
475
+ width: 100%;
476
+ height: 1px;
477
+ background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23e95656' stroke-width='1' stroke-dasharray='3%2c 6' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e");
478
+ background-position: left top;
479
+ }
480
+ &:after {
375
481
  content: '';
376
482
  display: block;
377
483
  position: absolute;
@@ -1472,8 +1578,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
1472
1578
  }
1473
1579
  }
1474
1580
  }
1475
- .wac-dropdown {
1476
- display: inline-block;
1581
+ .wac-delete {
1477
1582
  width: 40px;
1478
1583
  height: 40px;
1479
1584
 
@@ -1483,74 +1588,24 @@ $wac-color-success-popup-alert: #6DCC95!default;
1483
1588
  @include align-items(center);
1484
1589
  width: 100%;
1485
1590
  height: 100%;
1486
- position: relative;
1487
-
1488
- &__icon {
1489
- font-size: 30px;
1490
- line-height: 18px;
1491
- color: $wac-second-color;
1492
- transition: color 0.3s ease, transform 0.3s ease;
1493
- }
1494
-
1495
- &__sublevel {
1496
- position: absolute;
1497
- width: 160px;
1498
- top: 100%;
1499
- right: 0;
1500
- z-index: -1;
1501
- opacity: 0;
1502
- background-color: $wac-white;
1503
- border-radius: rem(3);
1504
- box-shadow: 0px 2px 5px $wac-info-box-shadow;
1505
- visibility: hidden;
1506
- transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
1507
-
1508
- &__container {
1509
- padding: 10px 10px;
1510
- border: 1px solid $wac-border-color;
1511
-
1512
- &__item {
1513
- padding: 5.7px 10px;
1514
- font-size: 14px;
1515
- line-height: 24px;
1516
- color: $wac-second-color;
1517
- cursor: pointer;
1518
- transition: background-color 0.3s ease, color 0.3s ease;
1519
- display: flex;
1520
- justify-content: flex-start;
1521
- align-items: center;
1522
- align-content: center;
1523
-
1524
- i {
1525
- min-width: 15px;
1526
- margin-right: 5px;
1527
- text-align: center;
1528
- }
1529
- span {
1530
- white-space: nowrap;
1531
- }
1591
+ border-radius: 3px;
1592
+ background-color: transparent;
1593
+ transition: background-color 0.3s ease-in-out;
1532
1594
 
1533
- &:hover {
1534
- background-color: $wac-gray-background;
1535
- transition: background-color 0.3s ease, color 0.3s ease;
1536
- color: $wac-input-active-color;
1537
- }
1538
- }
1539
- }
1595
+ i {
1596
+ color: $wac-border-form;
1597
+ font-size: 14px;
1598
+ line-height: 23px;
1599
+ transition: color 0.3s ease-in-out;
1540
1600
  }
1541
1601
 
1542
1602
  &:hover {
1543
- .wac-dropdown__wrapper__icon {
1544
- color: $wac-wizishop-blue;
1545
- transform: rotate(90deg);
1546
- transition: color 0.3s ease, transform 0.3s ease;
1547
- }
1603
+ background-color: $wac-primary-button;
1604
+ transition: background-color 0.3s ease-in-out;
1548
1605
 
1549
- .wac-dropdown__wrapper__sublevel {
1550
- visibility: visible;
1551
- opacity: 1;
1552
- z-index: 2;
1553
- transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
1606
+ i {
1607
+ color: $wac-white;
1608
+ transition: color 0.3s ease-in-out;
1554
1609
  }
1555
1610
  }
1556
1611
  }
@@ -2280,6 +2335,18 @@ $wac-color-success-popup-alert: #6DCC95!default;
2280
2335
  font-weight: 500;
2281
2336
  transition: 0.3s ease;
2282
2337
 
2338
+ &.big {
2339
+ padding: rem(11) rem(15);
2340
+ font-size: rem(14);
2341
+ font-weight: 500;
2342
+ &.wac-tag--default {
2343
+ i {
2344
+ color: $wac-second-color;
2345
+ font-size: rem(14);
2346
+ }
2347
+ }
2348
+ }
2349
+
2283
2350
  &.hover {
2284
2351
  cursor: pointer;
2285
2352
  }
@@ -2954,32 +3021,107 @@ span.wac-tooltip {
2954
3021
  }
2955
3022
  }
2956
3023
  }
2957
- .wac-upload {
2958
- width: auto;
2959
- &__wrapper {
2960
- width: 100%;
2961
- display: flex;
2962
- align-items: center;
2963
- button {
2964
- padding: 10.5px 20px;
2965
- border: none;
2966
- background-color: $wac-green-color;
2967
- border-radius: 3px;
2968
- color: $wac-white;
2969
- font-size: rem(14);
2970
- line-height: rem(16);
2971
- transition: 0.3s ease;
2972
- font-weight: 500;
2973
- cursor: pointer;
2974
- i {
2975
- font-size: rem(18);
2976
- margin: 0 rem(10) 0 0;
3024
+ .wac-wrapper {
3025
+ width: 100%;
3026
+ &.max-width {
3027
+ max-width: 1080px;
3028
+ margin: 0 auto;
3029
+ }
3030
+ }
3031
+ .wac-alert {
3032
+ width: 100%;
3033
+ background-color: transparentize($wac-link-color, 0.85);
3034
+ color: $wac-link-color;
3035
+ border-radius: 3px;
3036
+ display: flex;
3037
+ flex-wrap: nowrap;
3038
+ justify-content: space-between;
3039
+ padding: 20px;
3040
+ &.success {
3041
+ background-color: transparentize($wac-green-color, 0.85);
3042
+ p {
3043
+ color: $wac-p-alert-color-success;
3044
+ > * {
3045
+ color: $wac-p-alert-color-success;
2977
3046
  }
2978
- &:hover {
2979
- background-color: $wac-green-color-darken;
3047
+ }
3048
+ i {
3049
+ color: $wac-green-color;
3050
+ }
3051
+ }
3052
+ &.warning {
3053
+ background-color: transparentize($wac-primary-button, 0.85);
3054
+ p {
3055
+ color: $wac-p-alert-color-warning;
3056
+ > * {
3057
+ color: $wac-p-alert-color-warning;
2980
3058
  }
2981
- &:focus {
2982
- background-color: $wac-green-color-focus;
3059
+ }
3060
+ i {
3061
+ color: $wac-primary-button;
3062
+ }
3063
+ }
3064
+ &.alert {
3065
+ background-color: transparentize($wac-orange-color, 0.85);
3066
+ p {
3067
+ color: $wac-p-alert-color-alert;
3068
+ > * {
3069
+ color: $wac-p-alert-color-alert;
3070
+ }
3071
+ }
3072
+ i {
3073
+ color: $wac-orange-color;
3074
+ }
3075
+ }
3076
+ p {
3077
+ width: 100%;
3078
+ font-size: rem(14);
3079
+ line-height: rem(25);
3080
+ margin: 0;
3081
+ padding: 0;
3082
+ color: $wac-p-alert-color-default;
3083
+ > * {
3084
+ color: $wac-p-alert-color-default;
3085
+ }
3086
+ }
3087
+ i {
3088
+ width: auto;
3089
+ margin: 0 10px 0 0;
3090
+ color: inherit;
3091
+ font-size: rem(14);
3092
+ line-height: rem(25);
3093
+ }
3094
+
3095
+ .wac-button i {
3096
+ color: $wac-white;
3097
+ }
3098
+ }
3099
+ .wac-upload {
3100
+ width: auto;
3101
+ &__wrapper {
3102
+ width: 100%;
3103
+ display: flex;
3104
+ align-items: center;
3105
+ button {
3106
+ padding: 10.5px 20px;
3107
+ border: none;
3108
+ background-color: $wac-green-color;
3109
+ border-radius: 3px;
3110
+ color: $wac-white;
3111
+ font-size: rem(14);
3112
+ line-height: rem(16);
3113
+ transition: 0.3s ease;
3114
+ font-weight: 500;
3115
+ cursor: pointer;
3116
+ i {
3117
+ font-size: rem(18);
3118
+ margin: 0 rem(10) 0 0;
3119
+ }
3120
+ &:hover {
3121
+ background-color: $wac-green-color-darken;
3122
+ }
3123
+ &:focus {
3124
+ background-color: $wac-green-color-focus;
2983
3125
  }
2984
3126
  }
2985
3127
  }
@@ -3050,1430 +3192,1198 @@ span.wac-tooltip {
3050
3192
  }
3051
3193
  }
3052
3194
  }
3053
- .wac-alert {
3054
- width: 100%;
3055
- background-color: transparentize($wac-link-color, 0.85);
3056
- color: $wac-link-color;
3057
- border-radius: 3px;
3058
- display: flex;
3059
- flex-wrap: nowrap;
3060
- justify-content: space-between;
3061
- padding: 20px;
3062
- &.success {
3063
- background-color: transparentize($wac-green-color, 0.85);
3064
- p {
3065
- color: $wac-p-alert-color-success;
3066
- > * {
3067
- color: $wac-p-alert-color-success;
3068
- }
3069
- }
3195
+ .wac-back {
3196
+ width: 40px;
3197
+ height: 40px;
3198
+
3199
+ &__wrapper {
3200
+ @include flexbox();
3201
+ @include justify-content(center);
3202
+ @include align-items(center);
3203
+ width: 100%;
3204
+ height: 100%;
3205
+ border-radius: 3px;
3206
+ border: 1px solid $wac-border-light;
3207
+ background-color: transparent;
3208
+ transition: border-color 0.3s ease-in-out;
3209
+
3070
3210
  i {
3071
- color: $wac-green-color;
3072
- }
3073
- }
3074
- &.warning {
3075
- background-color: transparentize($wac-primary-button, 0.85);
3076
- p {
3077
- color: $wac-p-alert-color-warning;
3078
- > * {
3079
- color: $wac-p-alert-color-warning;
3080
- }
3211
+ color: $wac-second-color;
3212
+ font-size: 11px;
3213
+ line-height: 14px;
3081
3214
  }
3082
- i {
3083
- color: $wac-primary-button;
3215
+
3216
+ &:hover {
3217
+ border-color: $wac-back-border-hover;
3218
+ transition: border-color 0.3s ease-in-out;
3084
3219
  }
3085
3220
  }
3086
- &.alert {
3087
- background-color: transparentize($wac-orange-color, 0.85);
3088
- p {
3089
- color: $wac-p-alert-color-alert;
3090
- > * {
3091
- color: $wac-p-alert-color-alert;
3221
+ }
3222
+ .wac-wrapper-blocs {
3223
+ &.sidebar {
3224
+ width: calc(100% + 30px);
3225
+ transform: translateX(-15px);
3226
+ display: flex;
3227
+ flex-wrap: nowrap;
3228
+ align-items: flex-start;
3229
+ align-content: flex-start;
3230
+ & > :first-child {
3231
+ @include media('>=desktop') {
3232
+ width: 100%;
3092
3233
  }
3093
3234
  }
3094
- i {
3095
- color: $wac-orange-color;
3235
+ & > :last-child:not(:first-child) {
3236
+ min-width: 340px;
3096
3237
  }
3097
- }
3098
- p {
3099
- width: 100%;
3100
- font-size: rem(14);
3101
- line-height: rem(25);
3102
- margin: 0;
3103
- padding: 0;
3104
- color: $wac-p-alert-color-default;
3105
- > * {
3106
- color: $wac-p-alert-color-default;
3238
+ & > * {
3239
+ margin: 0 15px;
3107
3240
  }
3108
3241
  }
3109
- i {
3110
- width: auto;
3111
- margin: 0 10px 0 0;
3112
- color: inherit;
3113
- font-size: rem(14);
3114
- line-height: rem(25);
3115
- }
3116
-
3117
- .wac-button i {
3118
- color: $wac-white;
3119
- }
3120
- }
3121
- .wac-wrapper {
3122
- width: 100%;
3123
- &.max-width {
3124
- max-width: 1080px;
3125
- margin: 0 auto;
3126
- }
3127
3242
  }
3128
- .wac-button {
3129
- @include flexbox();
3130
- @include justify-content(center);
3131
- @include align-items(center);
3132
- position: relative;
3133
- display: block;
3134
- padding: 7px 19px;
3135
- border-style: solid;
3136
- border-width: 1px;
3137
- border-radius: 3px;
3138
- box-sizing: border-box;
3139
-
3140
- * {
3141
- box-sizing: border-box;
3243
+ .wac-field-checkbox {
3244
+ &__row {
3245
+ min-width: 100%;
3246
+ margin: 0;
3142
3247
  }
3143
-
3144
- &.width-auto {
3248
+ &--nowrap {
3145
3249
  display: inline-block;
3146
3250
  width: auto;
3147
- margin: 0 auto;
3148
- }
3149
-
3150
- &.white-space-no-wrap {
3151
- white-space: nowrap;
3251
+ min-width: 0;
3252
+ margin: 0 10px 10px 0;
3253
+ .field {
3254
+ &__row {
3255
+ width: auto;
3256
+ display: inline-block;
3257
+ margin: 0;
3258
+ }
3259
+ }
3152
3260
  }
3153
3261
 
3154
- &.animationText {
3155
- width: rem(40);
3156
- height: rem(40);
3157
- padding: 0!important;
3262
+ input[type='text'] {
3263
+ height: 40px;
3264
+ max-height: 40px;
3265
+ padding: 0 20px;
3266
+ line-height: 40px;
3267
+ border: 1px solid $wac-border-form;
3158
3268
  border-radius: 3px;
3159
- transition: 0s linear .3s!important;
3160
- display: flex;
3161
- justify-content: center;
3162
- align-items: center;
3163
- cursor: pointer;
3164
- border: none;
3165
- position: relative;
3166
- &:hover, &:focus {
3167
- transition: 0s!important;
3168
- border-radius: 3px 0 0 3px;
3169
- &.animation-right {
3170
- border-radius: 0 3px 3px 0;
3269
+ margin: 15px 0 10px !important;
3270
+ font-size: rem(14) !important;
3271
+ color: $wac-main-text;
3272
+ &:focus {
3273
+ border-color: $wac-wizishop-blue !important;
3274
+ box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
3275
+ &::-webkit-input-placeholder {
3276
+ /* Chrome/Opera/Safari */
3277
+ opacity: 0;
3171
3278
  }
3172
- .wac-button__animation {
3173
- transition: .3s ease!important;
3279
+ &::-moz-placeholder {
3280
+ /* Firefox 19+ */
3281
+ opacity: 0;
3282
+ }
3283
+ &:-ms-input-placeholder {
3284
+ /* IE 10+ */
3285
+ opacity: 0;
3286
+ }
3287
+ &:-moz-placeholder {
3288
+ /* Firefox 18- */
3289
+ opacity: 0;
3174
3290
  }
3175
3291
  }
3176
3292
  }
3293
+ &.alone {
3294
+ .is-checkradio[type='checkbox'] {
3295
+ & + label {
3296
+ padding-left: 9px;
3297
+ margin-right: 0px;
3177
3298
 
3178
- &.small {
3179
- padding: rem(4) rem(15);
3299
+ &:before {
3300
+ border-width: 1px;
3301
+ width: 16px;
3302
+ height: 16px;
3303
+ border-radius: 2px;
3304
+ }
3305
+ }
3306
+ &:checked + label {
3307
+ &:after {
3308
+ top: 7px;
3309
+ transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
3310
+ }
3311
+ }
3312
+ }
3180
3313
  }
3181
3314
 
3182
- &__wrapper {
3183
- position: relative;
3184
- z-index: 2;
3185
- color: $wac-white;
3186
- font-size: 14px;
3187
- line-height: 16px;
3188
- font-weight: 500;
3189
-
3190
- i {
3191
- margin-right: 1.4px;
3192
- }
3193
- }
3194
-
3195
- &__animation {
3196
- overflow: hidden;
3197
- max-width: 0;
3198
- height: 40px;
3199
- position: absolute;
3200
- top: 0;
3201
- left: 95%;
3202
- z-index: 2;
3203
- transition: .3s ease!important;
3204
- .animation-right & {
3205
- left: auto;
3206
- right: 94%;
3207
- > span {
3208
- border-radius: 3px 0 0 3px;
3209
- padding: 0 0 0 20px;
3210
- }
3211
- }
3212
- &__text {
3213
- position: absolute;
3214
- top: 0;
3215
- left: 0;
3216
- width: auto;
3217
- white-space: nowrap;
3218
- height: rem(40);
3219
- line-height: rem(40);
3220
- color: $wac-white !important;
3221
- border-radius: 0 3px 3px 0;
3222
- padding: 0 20px 0 0;
3315
+ .is-checkradio[type='checkbox'] {
3316
+ outline: 0 !important;
3317
+ & + label {
3223
3318
  font-size: rem(14);
3224
- .is-success & {
3225
- background-color: $wac-green-color;
3226
- }
3227
- .is-danger & {
3228
- background-color: $wac-primary-button;
3229
- }
3230
- }
3231
- }
3232
-
3233
- &.alone {
3234
- padding: 7px 14.6px;
3235
-
3236
- .wac-button__wrapper i {
3319
+ line-height: 0;
3320
+ color: $wac-input-radio-color-label;
3321
+ white-space: nowrap;
3322
+ padding: 0 8px;
3237
3323
  margin-right: 0;
3238
- }
3239
- }
3240
-
3241
- &.is-outlined {
3242
- &:hover,
3243
- &.hover {
3244
- .wac-button__wrapper, .wac-button__animation {
3245
- color: $wac-white;
3246
- transition: color 0.3s ease-in-out;
3324
+ outline: 0 !important;
3325
+ &:before {
3326
+ width: 16px;
3327
+ height: 16px;
3328
+ border: 1px solid $wac-border-color;
3329
+ top: 0;
3330
+ transition: all 0.3s ease-in-out;
3247
3331
  }
3248
- }
3249
- }
3250
-
3251
- &.is-dark {
3252
- background-color: $wac-main-text;
3253
- border-color: $wac-main-text;
3254
- transition: background-color 0.3s ease-in-out;
3255
-
3256
- .wac-button__loader {
3257
- background-color: $wac-main-text;
3258
- }
3259
-
3260
- &:hover,
3261
- &.hover {
3262
- background-color: $wac-main-text-lighten;
3263
- border-color: $wac-main-text-lighten;
3264
- transition: background-color 0.3s ease-in-out;
3265
- }
3266
-
3267
- &:focus,
3268
- &.focus {
3269
- background-color: $wac-main-text-lighten;
3270
- border-color: $wac-main-text-lighten;
3271
- transition: background-color 0.3s ease-in-out;
3272
- }
3273
-
3274
- &.is-outlined {
3275
- background-color: transparent;
3276
- border-color: $wac-main-text;
3277
-
3278
- .wac-button__loader {
3279
- background-color: $wac-main-text;
3332
+ &:after {
3333
+ top: 2.3px !important;
3334
+ left: 3px !important;
3335
+ width: 10px;
3336
+ height: 12px;
3337
+ border: none !important;
3338
+ background: transparent
3339
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='check' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-5x'%3E%3Cpath fill='%23ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E")
3340
+ center center / 8px 8px no-repeat;
3341
+ transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
3342
+ transition: all 0.3s ease-in-out;
3280
3343
  }
3281
-
3282
- .wac-button__wrapper, .wac-button__animation {
3283
- color: $wac-main-text;
3284
- transition: color 0.3s ease-in-out;
3344
+ span {
3345
+ margin: 0 0 0 rem(16);
3346
+ display: inline-block;
3285
3347
  }
3286
-
3287
3348
  &:hover,
3288
- &.hover {
3289
- background-color: $wac-main-text;
3290
- border-color: $wac-main-text;
3291
- .wac-button__wrapper, .wac-button__animation {
3292
- color: $wac-white;
3293
- transition: color 0.3s ease-in-out;
3294
- }
3295
- }
3296
-
3297
- &:focus,
3298
- &.focus {
3299
- background-color: $wac-main-text;
3300
- border-color: $wac-main-text;
3301
- transition: background-color 0.3s ease-in-out;
3302
- .wac-button__wrapper, .wac-button__animation {
3303
- color: $wac-white;
3304
- transition: color 0.3s ease-in-out;
3349
+ &:focus {
3350
+ &:before {
3351
+ border-color: $wac-input-active-color !important;
3305
3352
  }
3306
3353
  }
3307
- }
3308
- }
3309
-
3310
- &.is-info {
3311
- background-color: $wac-wizishop-blue-button;
3312
- border-color: $wac-wizishop-blue-button;
3313
- transition: background-color 0.3s ease-in-out;
3314
-
3315
- .wac-button__loader {
3316
- background-color: $wac-wizishop-blue-button-darken;
3317
- }
3318
-
3319
- &:hover,
3320
- &.hover {
3321
- background-color: $wac-wizishop-blue-button-darken;
3322
- border-color: $wac-wizishop-blue-button-darken;
3323
- transition: background-color 0.3s ease-in-out;
3324
- }
3325
-
3326
- &:focus,
3327
- &.focus {
3328
- background-color: $wac-wizishop-blue-button-focus;
3329
- border-color: $wac-wizishop-blue-button-focus;
3330
- transition: background-color 0.3s ease-in-out;
3331
- }
3332
-
3333
- &.is-outlined {
3334
- background-color: transparent;
3335
- border-color: $wac-wizishop-blue-button;
3336
-
3337
- .wac-button__loader {
3338
- background-color: $wac-wizishop-blue-button-darken;
3339
- }
3340
-
3341
- .wac-button__wrapper, .wac-button__animation {
3342
- color: $wac-wizishop-blue-button;
3343
- transition: color 0.3s ease-in-out;
3344
- }
3345
-
3346
- &:hover,
3347
- &.hover {
3348
- background-color: $wac-wizishop-blue-button;
3349
- border-color: $wac-wizishop-blue-button;
3350
- }
3351
-
3352
- &:focus,
3353
- &.focus {
3354
- background-color: $wac-wizishop-blue-button-focus;
3355
- border-color: $wac-wizishop-blue-button-focus;
3356
- transition: background-color 0.3s ease-in-out;
3354
+ &:before,
3355
+ &:after {
3356
+ outline: 0 !important;
3357
3357
  }
3358
3358
  }
3359
-
3360
- &.is-loading {
3361
- &:hover,
3362
- &.hover {
3363
- background-color: $wac-wizishop-blue-button;
3364
- transition: background-color 0.3s ease-in-out;
3359
+ &:hover {
3360
+ & + label {
3361
+ color: $wac-input-radio-color-active-label;
3362
+ &:before {
3363
+ border-color: $wac-input-active-color !important;
3364
+ }
3365
+ &:after {
3366
+ border-color: $wac-white !important;
3367
+ }
3365
3368
  }
3366
- &:focus,
3367
- &.focus {
3368
- background-color: $wac-wizishop-blue-button-focus;
3369
- border-color: $wac-wizishop-blue-button-focus;
3370
- transition: background-color 0.3s ease-in-out;
3369
+ &:not([disabled]) {
3370
+ & + label {
3371
+ &:before {
3372
+ border-color: $wac-input-active-color !important;
3373
+ }
3374
+ }
3371
3375
  }
3372
3376
  }
3373
-
3374
- &.disabled {
3375
- background-color: $wac-wizishop-blue-button-disabled;
3376
- border-color: $wac-wizishop-blue-button-disabled;
3377
- transition: 0s;
3378
- cursor: default;
3379
- .wac-button__wrapper, .wac-button__animation {
3380
- color: $wac-white;
3377
+ &:checked + label {
3378
+ color: $wac-input-radio-color-active-label;
3379
+ &:before {
3380
+ border: 1px solid $wac-input-active-color;
3381
+ background-color: $wac-input-active-color;
3382
+ transition: all 0.3s ease-in-out;
3381
3383
  }
3382
- &:hover,
3383
- &:focus,
3384
- &.hover,
3385
- &.focus {
3386
- background-color: $wac-wizishop-blue-button-disabled;
3387
- border-color: $wac-wizishop-blue-button-disabled;
3384
+ &:after {
3385
+ left: 7px;
3386
+ top: 8px;
3387
+ transition: all 0.3s ease-in-out;
3388
3388
  }
3389
3389
  }
3390
3390
  }
3391
3391
 
3392
- &.is-grey {
3393
- background-color: $wac-background-color;
3394
- border-color: $wac-background-color;
3395
- transition: background-color 0.3s ease-in-out;
3396
-
3397
- .wac-button__loader {
3398
- background-color: $wac-background-color-darken;
3399
- }
3400
-
3401
- .wac-button__wrapper, .wac-button__animation {
3392
+ }
3393
+ h1.wac-h1 {
3394
+ font-size: rem(30);
3395
+ line-height: rem(35);
3396
+ font-weight: 600;
3397
+ color: $wac-main-text;
3398
+ }
3399
+ .wac-filters {
3400
+ width: 100%;
3401
+ &__wrapper {
3402
+ width: 100%;
3403
+ display: flex;
3404
+ flex-wrap: wrap;
3405
+ justify-content: flex-start;
3406
+ align-items: center;
3407
+ align-content: center;
3408
+ button {
3409
+ position: relative;
3410
+ width: auto;
3411
+ display: flex;
3412
+ align-items: center;
3413
+ font-size: rem(14);
3414
+ line-height: rem(16);
3415
+ font-weight: 400;
3402
3416
  color: $wac-second-color;
3403
- transition: color 0.3s ease-in-out;
3404
- }
3405
-
3406
- &:hover,
3407
- &.hover {
3408
- background-color: $wac-background-color-darken;
3409
- border-color: $wac-background-color-darken;
3410
- transition: background-color 0.3s ease-in-out;
3411
- }
3412
-
3413
- &:focus,
3414
- &.focus {
3415
- background-color: $wac-background-color-focus;
3416
- border-color: $wac-background-color-focus;
3417
- transition: background-color 0.3s ease-in-out;
3418
- }
3419
-
3420
- &.is-outlined {
3421
- background-color: transparent;
3422
- border-color: $wac-border-light;
3423
-
3424
- .wac-button__loader {
3425
- background-color: $wac-background-color-darken;
3417
+ border: 1px solid $wac-border-light;
3418
+ border-radius: 3px;
3419
+ background: transparent;
3420
+ box-shadow: none;
3421
+ margin-bottom: rem(10);
3422
+ transition: 0.3s ease;
3423
+ cursor: pointer;
3424
+ padding: 12px 20px;
3425
+ .event {
3426
+ position: absolute;
3427
+ top: 0;
3428
+ left: 0;
3429
+ width: 100%;
3430
+ height: 100%;
3431
+ z-index: 2;
3432
+ display: inline-block;
3426
3433
  }
3427
-
3428
- .wac-button__wrapper, .wac-button__animation {
3429
- color: $wac-second-color !important;
3430
- transition: color 0.3s ease-in-out;
3434
+ i {
3435
+ color: $wac-main-text;
3436
+ font-size: rem(14);
3437
+ margin: 0 rem(10) 0 0;
3431
3438
  }
3432
-
3433
3439
  &:hover,
3434
- &.hover {
3435
- background-color: $wac-background-color;
3436
- border-color: $wac-background-color;
3437
- }
3438
-
3439
3440
  &:focus,
3440
- &.focus {
3441
- background-color: $wac-background-color-focus;
3442
- border-color: $wac-background-color-focus;
3443
- transition: background-color 0.3s ease-in-out;
3441
+ &.active {
3442
+ border-color: $wac-wizishop-blue;
3443
+ color: $wac-main-text;
3444
3444
  }
3445
- }
3446
-
3447
- &.is-loading {
3448
- &:hover,
3449
- &.hover {
3450
- background-color: $wac-background-color;
3451
- transition: background-color 0.3s ease-in-out;
3445
+ &:not(:last-child) {
3446
+ margin: 0 rem(10) rem(10) 0;
3452
3447
  }
3453
3448
  }
3454
-
3455
- &.disabled {
3456
- background-color: $wac-background-color-disabled;
3457
- border-color: $wac-background-color-disabled;
3458
- transition: 0s;
3459
- cursor: default;
3460
-
3449
+ > span {
3450
+ position: relative;
3451
+ color: $wac-link-color;
3452
+ display: inline-block;
3453
+ transition: 0.3s ease;
3454
+ font-size: rem(14);
3455
+ line-height: rem(16);
3456
+ margin: 0 0 0 rem(30);
3457
+ cursor: pointer;
3458
+ z-index: 1;
3459
+ &:before {
3460
+ content: '';
3461
+ display: block;
3462
+ position: absolute;
3463
+ width: 100%;
3464
+ max-width: 0;
3465
+ height: 1px;
3466
+ border-radius: 3px;
3467
+ background-color: darken($wac-link-color, 15%);
3468
+ left: 0;
3469
+ bottom: -2px;
3470
+ transition: 0.3s ease;
3471
+ }
3461
3472
  &:hover,
3462
- &:focus,
3463
- &.hover,
3464
- &.focus {
3465
- background-color: $wac-background-color-disabled;
3466
- border-color: $wac-background-color-disabled;
3473
+ &:focus {
3474
+ color: darken($wac-link-color, 15%);
3475
+ &:before {
3476
+ max-width: 100%;
3477
+ }
3467
3478
  }
3468
3479
  }
3469
3480
  }
3481
+ }
3482
+ h2.wac-h2 {
3483
+ font-size: rem(18);
3484
+ line-height: rem(21);
3485
+ font-weight: 500;
3486
+ color: $wac-main-text;
3487
+ }.wac-info {
3488
+ display: inline-block;
3489
+ width: 40px;
3490
+ height: 40px;
3470
3491
 
3471
- &.is-danger {
3472
- background-color: $wac-primary-button;
3473
- border-color: $wac-primary-button;
3474
- transition: background-color 0.3s ease-in-out;
3492
+ &__wrapper {
3493
+ @include flexbox();
3494
+ @include justify-content(center);
3495
+ @include align-items(center);
3496
+ width: 100%;
3497
+ height: 100%;
3498
+ position: relative;
3475
3499
 
3476
- .wac-button__loader {
3477
- background-color: $wac-primary-button-darken;
3500
+ i {
3501
+ font-size: 14px;
3502
+ line-height: 25px;
3503
+ color: $wac-second-color;
3504
+ transition: color 0.3s ease-in-out;
3478
3505
  }
3479
3506
 
3480
- &:hover,
3481
- &.hover {
3482
- background-color: $wac-primary-button-darken;
3483
- border-color: $wac-primary-button-darken;
3484
- transition: background-color 0.3s ease-in-out;
3485
- }
3507
+ &__sublevel {
3508
+ position: absolute;
3509
+ width: 350px;
3510
+ top: 13px;
3511
+ left: 100%;
3512
+ z-index: -1;
3513
+ opacity: 0;
3514
+ background-color: $wac-white;
3515
+ border-radius: rem(3);
3516
+ box-shadow: 0px 2px 5px $wac-info-box-shadow;
3517
+ visibility: hidden;
3518
+ transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out, visibility 0s linear 0.16s;
3486
3519
 
3487
- &:focus,
3488
- &.focus {
3489
- background-color: $wac-primary-button-focus;
3490
- border-color: $wac-primary-button-focus;
3491
- transition: background-color 0.3s ease-in-out;
3520
+ &__container {
3521
+ padding: 15px 20px;
3522
+ font-size: rem(14);
3523
+ line-height: rem(25);
3524
+ color: $wac-second-color;
3525
+ }
3492
3526
  }
3493
3527
 
3494
- &.is-outlined {
3495
- background-color: transparent;
3496
- border-color: $wac-primary-button;
3497
-
3498
- .wac-button__wrapper, .wac-button__animation {
3499
- color: $wac-primary-button;
3528
+ &:hover {
3529
+ i {
3530
+ color: $wac-input-active-color;
3500
3531
  transition: color 0.3s ease-in-out;
3501
3532
  }
3502
3533
 
3503
- &:hover,
3504
- &.hover {
3505
- background-color: $wac-primary-button;
3506
- border-color: $wac-primary-button;
3507
- }
3508
-
3509
- &:focus,
3510
- &.focus {
3511
- background-color: $wac-primary-button-focus;
3512
- border-color: $wac-primary-button-focus;
3513
- transition: background-color 0.3s ease-in-out;
3534
+ .wac-info__wrapper__sublevel {
3535
+ visibility: visible;
3536
+ opacity: 1;
3537
+ z-index: 2;
3538
+ transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
3514
3539
  }
3515
3540
  }
3516
-
3517
- &.is-loading {
3518
- &:hover,
3519
- &.hover {
3520
- background-color: $wac-primary-button;
3521
- transition: background-color 0.3s ease-in-out;
3522
- }
3541
+ }
3542
+ }
3543
+ h3.wac-h3 {
3544
+ font-size: rem(16);
3545
+ line-height: rem(19);
3546
+ font-weight: 500;
3547
+ color: $wac-main-text;
3548
+ &.grey {
3549
+ color: $wac-second-color;
3550
+ }
3551
+ }
3552
+ .wac-logo {
3553
+ &__wrapper {
3554
+ svg {
3555
+ width: 128px !important;
3523
3556
  }
3524
3557
 
3525
- &.opacity {
3526
- background-color: $wac-primary-button-light;
3527
- border-color: $wac-primary-button-light;
3528
- &:hover, &:focus {
3529
- background-color: $wac-primary-button;
3530
- border-color: $wac-primary-button;
3531
- }
3532
- }
3533
-
3534
- &.disabled {
3535
- background-color: $wac-primary-button-disabled;
3536
- border-color: $wac-primary-button-disabled;
3537
- transition: 0s;
3538
- cursor: default;
3539
-
3540
- .wac-button__wrapper, .wac-button__animation {
3541
- color: $wac-white;
3542
- }
3543
-
3544
- &:hover,
3545
- &:focus,
3546
- &.hover,
3547
- &.focus {
3548
- background-color: $wac-primary-button-disabled;
3549
- border-color: $wac-primary-button-disabled;
3558
+ &.white {
3559
+ .cls-0,
3560
+ .cls-1,
3561
+ .cls-2 {
3562
+ fill: white;
3550
3563
  }
3551
3564
  }
3552
3565
  }
3566
+ }
3567
+ h4.wac-h4 {
3568
+ font-size: rem(14);
3569
+ line-height: rem(16);
3570
+ font-weight: 500;
3571
+ color: $wac-main-text;
3572
+ &.grey {
3573
+ color: $wac-second-color;
3574
+ }
3575
+ }
3576
+ .wac-free {
3577
+ height: 100%;
3578
+ width: 100%;
3579
+ width: 100vw;
3580
+ height: 100vh;
3581
+ position: fixed;
3582
+ top: 0;
3583
+ left: 0;
3584
+ z-index: 9999;
3553
3585
 
3554
- &.is-success {
3555
- background-color: $wac-green-color;
3556
- border-color: $wac-green-color;
3557
- transition: background-color 0.3s ease-in-out;
3586
+ &__wrapper {
3587
+ background-color: white;
3588
+ border: 1px solid $wac-border-color;
3589
+ border-radius: 3px;
3590
+ margin: auto;
3591
+ box-shadow: 0px 10px 40px $wac-free-popin-boxshadow;
3592
+ position: absolute;
3593
+ left: 50%;
3594
+ top: 50%;
3595
+ transform: translate(-50%, -50%);
3596
+ padding: 50px;
3597
+ z-index: 3;
3598
+ max-height: 90vh;
3599
+ display: flex;
3600
+ flex-wrap: nowrap;
3601
+ flex-direction: column;
3602
+ justify-content: center;
3603
+ align-items: center;
3604
+ width: 100%;
3605
+ max-width: 575px;
3606
+ overflow: hidden;
3558
3607
 
3559
- .wac-button__loader {
3560
- background-color: $wac-green-color-darken;
3561
- }
3608
+ &__content {
3609
+ position: relative;
3610
+ overflow: hidden;
3611
+ display: flex;
3562
3612
 
3563
- &:hover,
3564
- &.hover {
3565
- background-color: $wac-green-color-darken;
3566
- border-color: $wac-green-color-darken;
3567
- transition: background-color 0.3s ease-in-out;
3568
3613
  }
3569
3614
 
3570
- &:focus,
3571
- &.focus {
3572
- background-color: $wac-green-color-focus;
3573
- border-color: $wac-green-color-focus;
3574
- transition: background-color 0.3s ease-in-out;
3615
+ div:not([class]) {
3616
+ width: 100%;
3617
+ margin: 0 0 20px;
3575
3618
  }
3576
3619
 
3577
- &.is-outlined {
3578
- background-color: transparent;
3579
- border-color: $wac-green-color;
3580
-
3581
- .wac-button__wrapper, .wac-button__animation {
3582
- color: $wac-green-color;
3583
- transition: color 0.3s ease-in-out;
3584
- }
3585
-
3586
- &:hover,
3587
- &.hover {
3588
- background-color: $wac-green-color;
3589
- border-color: $wac-green-color;
3590
- }
3591
-
3592
- &:focus,
3593
- &.focus {
3594
- background-color: $wac-green-color-focus;
3595
- border-color: $wac-green-color-focus;
3596
- transition: background-color 0.3s ease-in-out;
3597
- }
3620
+ > * {
3621
+ width: 100%;
3598
3622
  }
3599
3623
 
3600
- &.is-loading {
3601
- &:hover,
3602
- &.hover {
3603
- background-color: $wac-green-color;
3604
- transition: background-color 0.3s ease-in-out;
3624
+ &__button-close {
3625
+ position: absolute;
3626
+ top: 10px;
3627
+ right: 10px;
3628
+ width: 30px;
3629
+ height: 30px;
3630
+ border-radius: 50%;
3631
+ display: flex;
3632
+ justify-content: center;
3633
+ align-items: center;
3634
+ background-color: $wac-popin-btn-close;
3635
+ transition: .3s ease;
3636
+ i {
3637
+ color: $wac-second-color;
3638
+ font-size: 14px;
3639
+ font-weight: 400;
3605
3640
  }
3606
- }
3607
- &.opacity {
3608
- background-color: $wac-green-opacity;
3609
- border-color: $wac-green-opacity;
3610
3641
  &:hover, &:focus {
3611
- background-color: $wac-green-color;
3612
- border-color: $wac-green-color;
3613
- }
3614
- }
3615
- &.disabled {
3616
- background-color: $wac-green-color-disabled;
3617
- border-color: $wac-green-color-disabled;
3618
- transition: 0s;
3619
- cursor: default;
3620
-
3621
- .wac-button__wrapper, .wac-button__animation {
3622
- color: $wac-white;
3623
- }
3624
-
3625
- &:hover,
3626
- &:focus,
3627
- &.hover,
3628
- &.focus {
3629
- background-color: $wac-green-color-disabled;
3642
+ background-color: $wac-main-text;
3643
+ i {
3644
+ color: $wac-white;
3645
+ }
3630
3646
  }
3631
3647
  }
3632
- }
3633
-
3634
- &.is-light {
3635
- background-color: transparent;
3636
- border-color: $wac-border-color;
3637
- transition: background-color 0.3s ease-in-out;
3638
3648
 
3639
- .wac-button__loader {
3640
- background-color: $wac-hover-btn-grey;
3649
+ img {
3650
+ display: block;
3651
+ max-width: 200px;
3652
+ margin: 0 auto rem(20);
3641
3653
  }
3642
3654
 
3643
- .wac-button__wrapper, .wac-button__animation {
3644
- color: $wac-secondary-color;
3655
+ h2 {
3656
+ font-size: rem(20);
3657
+ line-height: rem(25);
3658
+ margin: 0 0 rem(20);
3659
+ font-weight: 500;
3660
+ width: 100%;
3661
+ text-align: center;
3645
3662
  }
3646
3663
 
3647
- &:hover,
3648
- &.hover {
3649
- background-color: $wac-hover-btn-grey;
3650
- transition: background-color 0.3s ease-in-out;
3664
+ p {
3665
+ font-size: rem(14);
3666
+ line-height: rem(25);
3667
+ color: $wac-second-color;
3668
+ width: 100%;
3669
+ text-align: center;
3670
+ padding: 0;
3671
+ margin: 0;
3651
3672
  }
3652
3673
 
3653
- &.is-loading {
3654
- &:hover,
3655
- &.hover {
3656
- background-color: transparent;
3657
- transition: background-color 0.3s ease-in-out;
3674
+ &__buttons {
3675
+ width: 100%;
3676
+ display: flex;
3677
+ flex-direction: column;
3678
+ align-items: center;
3679
+ margin: 30px 0 0;
3680
+ &__button {
3681
+ margin: 10px;
3682
+ width: auto;
3658
3683
  }
3659
3684
  }
3660
3685
  }
3686
+ &__background {
3687
+ z-index: 1;
3688
+ position: absolute;
3689
+ top: 0;
3690
+ left: 0;
3691
+ width: 100%;
3692
+ height: 100%;
3693
+ background-color: transparentize($wac-main-text, .5);
3694
+ }
3695
+ }
3661
3696
 
3662
- &.disabled {
3663
- background-color: $wac-disabled-button-background;
3664
- border-color: $wac-border-form;
3697
+ .wac-free .ps-content > * {
3698
+ padding-right: 15px;
3699
+ }
3700
+ .wac-button {
3701
+ @include flexbox();
3702
+ @include justify-content(center);
3703
+ @include align-items(center);
3704
+ position: relative;
3705
+ display: block;
3706
+ padding: 7px 19px;
3707
+ border-style: solid;
3708
+ border-width: 1px;
3709
+ border-radius: 3px;
3710
+ box-sizing: border-box;
3665
3711
 
3666
- .wac-button__wrapper, .wac-button__animation {
3667
- color: $wac-disabled-button-text;
3668
- }
3712
+ * {
3713
+ box-sizing: border-box;
3669
3714
  }
3670
3715
 
3671
- &.is-outlined {
3672
- &:hover,
3673
- &.hover {
3674
- .wac-button__wrapper, .wac-button__animation {
3675
- color: $wac-white;
3676
- transition: color 0.3s ease-in-out;
3677
- }
3678
- }
3716
+ &.width-auto {
3717
+ display: inline-block;
3718
+ width: auto;
3719
+ margin: 0 auto;
3679
3720
  }
3680
3721
 
3681
- &__loader {
3682
- position: absolute;
3683
- left: -1px;
3684
- top: 0;
3685
- height: 100%;
3686
- z-index: 1;
3687
- transition: width 0.3s ease-in-out;
3688
- overflow: hidden;
3722
+ &.white-space-no-wrap {
3723
+ white-space: nowrap;
3724
+ }
3689
3725
 
3690
- span {
3691
- position: absolute;
3692
- left: 20px;
3693
- top: 7px;
3694
- color: $wac-white;
3695
- overflow: hidden;
3696
- text-overflow: clip;
3697
- font-size: 14px;
3698
- line-height: 26px;
3699
- white-space: nowrap;
3700
- z-index: 3;
3701
-
3702
- i {
3703
- margin-right: 1.4px;
3726
+ &.animationText {
3727
+ width: rem(40);
3728
+ height: rem(40);
3729
+ padding: 0!important;
3730
+ border-radius: 3px;
3731
+ transition: 0s linear .3s!important;
3732
+ display: flex;
3733
+ justify-content: center;
3734
+ align-items: center;
3735
+ cursor: pointer;
3736
+ border: none;
3737
+ position: relative;
3738
+ &:hover, &:focus {
3739
+ transition: 0s!important;
3740
+ border-radius: 3px 0 0 3px;
3741
+ &.animation-right {
3742
+ border-radius: 0 3px 3px 0;
3743
+ }
3744
+ .wac-button__animation {
3745
+ transition: .3s ease!important;
3704
3746
  }
3705
- }
3706
-
3707
- &.outlined {
3708
- z-index: 4;
3709
3747
  }
3710
3748
  }
3711
3749
 
3712
- &.alone {
3713
- .wac-button__loader span {
3714
- left: 14.6px;
3715
- }
3750
+ &.small {
3751
+ padding: rem(4) rem(15);
3716
3752
  }
3717
3753
 
3718
- &.opacity {
3719
- min-width: rem(40);
3720
- min-height: rem(40);
3754
+ &__wrapper {
3755
+ position: relative;
3756
+ z-index: 2;
3757
+ color: $wac-white;
3758
+ font-size: 14px;
3759
+ line-height: 16px;
3760
+ font-weight: 500;
3721
3761
 
3722
- &.alone {
3723
- display: flex;
3724
- align-items: center;
3725
- justify-content: center;
3762
+ i {
3763
+ margin-right: 1.4px;
3726
3764
  }
3765
+ }
3727
3766
 
3728
- &.is-success {
3729
- i {
3730
- color: $wac-green-color!important;
3731
- }
3732
- &:hover, &:focus {
3733
- i {
3734
- color: $wac-white!important;
3735
- }
3767
+ &__animation {
3768
+ overflow: hidden;
3769
+ max-width: 0;
3770
+ height: 40px;
3771
+ position: absolute;
3772
+ top: 0;
3773
+ left: 95%;
3774
+ z-index: 2;
3775
+ transition: .3s ease!important;
3776
+ .animation-right & {
3777
+ left: auto;
3778
+ right: 94%;
3779
+ > span {
3780
+ border-radius: 3px 0 0 3px;
3781
+ padding: 0 0 0 20px;
3736
3782
  }
3737
3783
  }
3738
-
3739
- &.is-danger {
3740
- i {
3741
- color: $wac-primary-button!important;
3784
+ &__text {
3785
+ position: absolute;
3786
+ top: 0;
3787
+ left: 0;
3788
+ width: auto;
3789
+ white-space: nowrap;
3790
+ height: rem(40);
3791
+ line-height: rem(40);
3792
+ color: $wac-white !important;
3793
+ border-radius: 0 3px 3px 0;
3794
+ padding: 0 20px 0 0;
3795
+ font-size: rem(14);
3796
+ .is-success & {
3797
+ background-color: $wac-green-color;
3742
3798
  }
3743
- &:hover, &:focus {
3744
- i {
3745
- color: $wac-white!important;
3746
- }
3799
+ .is-danger & {
3800
+ background-color: $wac-primary-button;
3747
3801
  }
3748
3802
  }
3749
3803
  }
3750
- }
3751
- .wac-wrapper-blocs {
3752
- &.sidebar {
3753
- width: calc(100% + 30px);
3754
- transform: translateX(-15px);
3755
- display: flex;
3756
- flex-wrap: nowrap;
3757
- align-items: flex-start;
3758
- align-content: flex-start;
3759
- & > :first-child {
3760
- @include media('>=desktop') {
3761
- width: 100%;
3762
- }
3763
- }
3764
- & > :last-child:not(:first-child) {
3765
- min-width: 340px;
3766
- }
3767
- & > * {
3768
- margin: 0 15px;
3769
- }
3804
+
3805
+ &.deletePosition-center .wac-button__confirmDelete {
3806
+ left: 50%;
3807
+ transform: translateX(-50%) translateY(-1px);
3770
3808
  }
3771
- }
3772
- .wac-field-checkbox {
3773
- &__row {
3774
- min-width: 100%;
3775
- margin: 0;
3809
+
3810
+ &.deletePosition-right .wac-button__confirmDelete {
3811
+ right: 0;
3812
+ transform: translateY(-1px);
3776
3813
  }
3777
- &--nowrap {
3778
- display: inline-block;
3779
- width: auto;
3780
- min-width: 0;
3781
- margin: 0 10px 10px 0;
3782
- .field {
3783
- &__row {
3784
- width: auto;
3785
- display: inline-block;
3786
- margin: 0;
3787
- }
3788
- }
3814
+
3815
+ &.deletePosition-left .wac-button__confirmDelete {
3816
+ left: 0;
3817
+ transform: translateY(-1px);
3789
3818
  }
3790
3819
 
3791
- input[type='text'] {
3820
+ &__confirmDelete {
3821
+ overflow: hidden;
3822
+ max-width: 0;
3792
3823
  height: 40px;
3793
- max-height: 40px;
3794
- padding: 0 20px;
3795
- line-height: 40px;
3796
- border: 1px solid $wac-border-form;
3824
+ position: absolute;
3825
+ top: 0;
3826
+ z-index: 2;
3827
+ transition: .3s ease!important;
3797
3828
  border-radius: 3px;
3798
- margin: 15px 0 10px !important;
3799
- font-size: rem(14) !important;
3800
- color: $wac-main-text;
3801
- &:focus {
3802
- border-color: $wac-wizishop-blue !important;
3803
- box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
3804
- &::-webkit-input-placeholder {
3805
- /* Chrome/Opera/Safari */
3806
- opacity: 0;
3807
- }
3808
- &::-moz-placeholder {
3809
- /* Firefox 19+ */
3810
- opacity: 0;
3811
- }
3812
- &:-ms-input-placeholder {
3813
- /* IE 10+ */
3814
- opacity: 0;
3829
+
3830
+
3831
+ .is-success & {
3832
+ background-color: $wac-green-color;
3833
+ &:hover, &:focus {
3834
+ background-color: darken($wac-green-color, 15%);
3815
3835
  }
3816
- &:-moz-placeholder {
3817
- /* Firefox 18- */
3818
- opacity: 0;
3836
+ }
3837
+ .is-danger & {
3838
+ background-color: $wac-primary-button;
3839
+ &:hover, &:focus {
3840
+ background-color: darken($wac-primary-button, 15%);
3819
3841
  }
3820
3842
  }
3843
+ &__text {
3844
+ position: absolute;
3845
+ top: 0;
3846
+ left: 50%;
3847
+ transform: translateX(-50%);
3848
+ width: auto;
3849
+ white-space: nowrap;
3850
+ height: rem(40);
3851
+ line-height: rem(40);
3852
+ color: $wac-white !important;
3853
+ padding: 0 20px;
3854
+ font-size: rem(14);
3855
+ opacity: 0;
3856
+ transition: .3s ease;
3857
+ }
3821
3858
  }
3822
- &.alone {
3823
- .is-checkradio[type='checkbox'] {
3824
- & + label {
3825
- padding-left: 9px;
3826
- margin-right: 0px;
3827
3859
 
3828
- &:before {
3829
- border-width: 1px;
3830
- width: 16px;
3831
- height: 16px;
3832
- border-radius: 2px;
3833
- }
3834
- }
3835
- &:checked + label {
3836
- &:after {
3837
- top: 7px;
3838
- transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
3839
- }
3860
+ &.step-delete {
3861
+ i {
3862
+ transition: .3s ease!important;
3863
+ opacity: 0!important;
3864
+ }
3865
+ .wac-button__confirmDelete {
3866
+ transition: .6s ease .3s!important;
3867
+ &__text {
3868
+ opacity: 1;
3869
+ transition: .3s ease .9s;
3840
3870
  }
3841
3871
  }
3842
3872
  }
3843
3873
 
3844
- .is-checkradio[type='checkbox'] {
3845
- outline: 0 !important;
3846
- & + label {
3847
- font-size: rem(14);
3848
- line-height: 0;
3849
- color: $wac-input-radio-color-label;
3850
- white-space: nowrap;
3851
- padding: 0 8px;
3874
+ &.alone {
3875
+ padding: 7px 14.6px;
3876
+
3877
+ .wac-button__wrapper i {
3852
3878
  margin-right: 0;
3853
- outline: 0 !important;
3854
- &:before {
3855
- width: 16px;
3856
- height: 16px;
3857
- border: 1px solid $wac-border-color;
3858
- top: 0;
3859
- transition: all 0.3s ease-in-out;
3879
+ }
3880
+ }
3881
+
3882
+ &.is-outlined {
3883
+ &:hover,
3884
+ &.hover {
3885
+ .wac-button__wrapper, .wac-button__animation {
3886
+ color: $wac-white;
3887
+ transition: color 0.3s ease-in-out;
3860
3888
  }
3861
- &:after {
3862
- top: 2.3px !important;
3863
- left: 3px !important;
3864
- width: 10px;
3865
- height: 12px;
3866
- border: none !important;
3867
- background: transparent
3868
- url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='check' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-5x'%3E%3Cpath fill='%23ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E")
3869
- center center / 8px 8px no-repeat;
3870
- transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
3871
- transition: all 0.3s ease-in-out;
3889
+ }
3890
+ }
3891
+
3892
+ &.is-dark {
3893
+ background-color: $wac-main-text;
3894
+ border-color: $wac-main-text;
3895
+ transition: background-color 0.3s ease-in-out;
3896
+
3897
+ .wac-button__loader {
3898
+ background-color: $wac-main-text;
3899
+ }
3900
+
3901
+ &:hover,
3902
+ &.hover {
3903
+ background-color: $wac-main-text-lighten;
3904
+ border-color: $wac-main-text-lighten;
3905
+ transition: background-color 0.3s ease-in-out;
3906
+ }
3907
+
3908
+ &:focus,
3909
+ &.focus {
3910
+ background-color: $wac-main-text-lighten;
3911
+ border-color: $wac-main-text-lighten;
3912
+ transition: background-color 0.3s ease-in-out;
3913
+ }
3914
+
3915
+ &.is-outlined {
3916
+ background-color: transparent;
3917
+ border-color: $wac-main-text;
3918
+
3919
+ .wac-button__loader {
3920
+ background-color: $wac-main-text;
3872
3921
  }
3873
- span {
3874
- margin: 0 0 0 rem(16);
3875
- display: inline-block;
3922
+
3923
+ .wac-button__wrapper, .wac-button__animation {
3924
+ color: $wac-main-text;
3925
+ transition: color 0.3s ease-in-out;
3876
3926
  }
3927
+
3877
3928
  &:hover,
3878
- &:focus {
3879
- &:before {
3880
- border-color: $wac-input-active-color !important;
3929
+ &.hover {
3930
+ background-color: $wac-main-text;
3931
+ border-color: $wac-main-text;
3932
+ .wac-button__wrapper, .wac-button__animation {
3933
+ color: $wac-white;
3934
+ transition: color 0.3s ease-in-out;
3881
3935
  }
3882
3936
  }
3883
- &:before,
3884
- &:after {
3885
- outline: 0 !important;
3937
+
3938
+ &:focus,
3939
+ &.focus {
3940
+ background-color: $wac-main-text;
3941
+ border-color: $wac-main-text;
3942
+ transition: background-color 0.3s ease-in-out;
3943
+ .wac-button__wrapper, .wac-button__animation {
3944
+ color: $wac-white;
3945
+ transition: color 0.3s ease-in-out;
3946
+ }
3886
3947
  }
3887
3948
  }
3888
- &:hover {
3889
- & + label {
3890
- color: $wac-input-radio-color-active-label;
3891
- &:before {
3892
- border-color: $wac-input-active-color !important;
3893
- }
3894
- &:after {
3895
- border-color: $wac-white !important;
3896
- }
3949
+ }
3950
+
3951
+ &.is-info {
3952
+ background-color: $wac-wizishop-blue-button;
3953
+ border-color: $wac-wizishop-blue-button;
3954
+ transition: background-color 0.3s ease-in-out;
3955
+
3956
+ .wac-button__loader {
3957
+ background-color: $wac-wizishop-blue-button-darken;
3958
+ }
3959
+
3960
+ &:hover,
3961
+ &.hover {
3962
+ background-color: $wac-wizishop-blue-button-darken;
3963
+ border-color: $wac-wizishop-blue-button-darken;
3964
+ transition: background-color 0.3s ease-in-out;
3965
+ }
3966
+
3967
+ &:focus,
3968
+ &.focus {
3969
+ background-color: $wac-wizishop-blue-button-focus;
3970
+ border-color: $wac-wizishop-blue-button-focus;
3971
+ transition: background-color 0.3s ease-in-out;
3972
+ }
3973
+
3974
+ &.is-outlined {
3975
+ background-color: transparent;
3976
+ border-color: $wac-wizishop-blue-button;
3977
+
3978
+ .wac-button__loader {
3979
+ background-color: $wac-wizishop-blue-button-darken;
3897
3980
  }
3898
- &:not([disabled]) {
3899
- & + label {
3900
- &:before {
3901
- border-color: $wac-input-active-color !important;
3902
- }
3903
- }
3981
+
3982
+ .wac-button__wrapper, .wac-button__animation {
3983
+ color: $wac-wizishop-blue-button;
3984
+ transition: color 0.3s ease-in-out;
3904
3985
  }
3905
- }
3906
- &:checked + label {
3907
- color: $wac-input-radio-color-active-label;
3908
- &:before {
3909
- border: 1px solid $wac-input-active-color;
3910
- background-color: $wac-input-active-color;
3911
- transition: all 0.3s ease-in-out;
3986
+
3987
+ &:hover,
3988
+ &.hover {
3989
+ background-color: $wac-wizishop-blue-button;
3990
+ border-color: $wac-wizishop-blue-button;
3912
3991
  }
3913
- &:after {
3914
- left: 7px;
3915
- top: 8px;
3916
- transition: all 0.3s ease-in-out;
3992
+
3993
+ &:focus,
3994
+ &.focus {
3995
+ background-color: $wac-wizishop-blue-button-focus;
3996
+ border-color: $wac-wizishop-blue-button-focus;
3997
+ transition: background-color 0.3s ease-in-out;
3917
3998
  }
3918
3999
  }
3919
- }
3920
4000
 
3921
- }
3922
- h1.wac-h1 {
3923
- font-size: rem(30);
3924
- line-height: rem(35);
3925
- font-weight: 600;
3926
- color: $wac-main-text;
3927
- }
3928
- .wac-header-page {
3929
- width: 100%;
3930
- background-color: transparent;
3931
- position: relative;
3932
- z-index: 2;
3933
- &__maxWidth {
3934
- width: 100%;
3935
- margin: 0 auto;
3936
- &__top {
3937
- width: 100%;
3938
- display: flex;
3939
- justify-content: space-between;
3940
- align-items: center;
3941
- margin: 0 0 27px;
3942
- @include media('<tablet') {
3943
- flex-wrap: wrap;
3944
- justify-content: flex-start;
3945
- align-items: flex-start;
3946
- margin: 0;
4001
+ &.is-loading {
4002
+ &:hover,
4003
+ &.hover {
4004
+ background-color: $wac-wizishop-blue-button;
4005
+ transition: background-color 0.3s ease-in-out;
3947
4006
  }
3948
- &__left {
3949
- width: auto;
3950
- display: flex;
3951
- align-items: center;
3952
- align-content: center;
3953
- margin: 0 10px 0 0;
3954
- @include media('<tablet') {
3955
- width: 100%;
3956
- margin: 0 0 30px;
3957
- }
3958
- a {
3959
- display: flex;
3960
- min-width: 40px;
3961
- height: 40px;
3962
- border-radius: 3px;
3963
- border: 1px solid $wac-border-light;
3964
- margin: 0 20px 0 0;
3965
- transition: 0.3s ease;
3966
- justify-content: center;
3967
- align-items: center;
3968
- i {
3969
- font-size: rem(12);
3970
- font-weight: 400;
3971
- color: $wac-second-color;
3972
- }
3973
- &:hover,
3974
- &:focus {
3975
- background-color: $wizishop-blue;
3976
- border-color: $wizishop-blue;
3977
- i {
3978
- color: $white;
3979
- }
3980
- }
3981
- & + * {
3982
- white-space: nowrap;
3983
- }
3984
- }
4007
+ &:focus,
4008
+ &.focus {
4009
+ background-color: $wac-wizishop-blue-button-focus;
4010
+ border-color: $wac-wizishop-blue-button-focus;
4011
+ transition: background-color 0.3s ease-in-out;
3985
4012
  }
3986
- &__right {
3987
- width: 100%;
3988
- display: flex;
3989
- justify-content: flex-end;
3990
- align-items: center;
3991
- align-content: center;
3992
- margin: 0 0 0 10px;
3993
- @include media('<tablet') {
3994
- width: 100%;
3995
- margin: 0;
3996
- justify-content: center;
3997
- }
3998
- > * {
3999
- &:not(:last-child) {
4000
- margin: 0 20px 0 0;
4001
- }
4002
- }
4013
+ }
4014
+
4015
+ &.disabled {
4016
+ background-color: $wac-wizishop-blue-button-disabled;
4017
+ border-color: $wac-wizishop-blue-button-disabled;
4018
+ transition: 0s;
4019
+ cursor: default;
4020
+ .wac-button__wrapper, .wac-button__animation {
4021
+ color: $wac-white;
4022
+ }
4023
+ &:hover,
4024
+ &:focus,
4025
+ &.hover,
4026
+ &.focus {
4027
+ background-color: $wac-wizishop-blue-button-disabled;
4028
+ border-color: $wac-wizishop-blue-button-disabled;
4003
4029
  }
4004
4030
  }
4005
4031
  }
4006
- }
4007
- h2.wac-h2 {
4008
- font-size: rem(18);
4009
- line-height: rem(21);
4010
- font-weight: 500;
4011
- color: $wac-main-text;
4012
- }a.wac-link {
4013
- position: relative;
4014
- color: $wac-link-color;
4015
- display: inline-block;
4016
- transition: 0.3s ease;
4017
- font-size: rem(14);
4018
- line-height: rem(16);
4019
- &:before {
4020
- content: '';
4021
- display: block;
4022
- position: absolute;
4023
- width: 100%;
4024
- max-width: 0;
4025
- height: 1px;
4026
- border-radius: 3px;
4027
- background-color: darken($wac-link-color, 15%);
4028
- left: 0;
4029
- bottom: -2px;
4030
- transition: 0.3s ease;
4031
- }
4032
- &:hover,
4033
- &:focus {
4034
- color: darken($wac-link-color, 15%);
4035
- &:before {
4036
- max-width: 100%;
4032
+
4033
+ &.is-grey {
4034
+ background-color: $wac-background-color;
4035
+ border-color: $wac-background-color;
4036
+ transition: background-color 0.3s ease-in-out;
4037
+
4038
+ .wac-button__loader {
4039
+ background-color: $wac-background-color-darken;
4037
4040
  }
4038
- }
4039
- }
4040
- h3.wac-h3 {
4041
- font-size: rem(16);
4042
- line-height: rem(19);
4043
- font-weight: 500;
4044
- color: $wac-main-text;
4045
- &.grey {
4046
- color: $wac-second-color;
4047
- }
4048
- }
4049
- .wac-multiple-search-plus {
4050
4041
 
4051
- &__wrapper {
4052
- margin: rem(14) 0;
4053
- width: fit-content;
4042
+ .wac-button__wrapper, .wac-button__animation {
4043
+ color: $wac-second-color;
4044
+ transition: color 0.3s ease-in-out;
4045
+ }
4054
4046
 
4055
- &__block {
4047
+ &:hover,
4048
+ &.hover {
4049
+ background-color: $wac-background-color-darken;
4050
+ border-color: $wac-background-color-darken;
4051
+ transition: background-color 0.3s ease-in-out;
4052
+ }
4056
4053
 
4057
- display: flex;
4058
- align-items: center;
4059
- justify-content: space-between;
4060
- align-content: center;
4061
- color: $wac-white;
4062
- font-size: rem(14);
4063
- line-height: rem(16);
4064
- border-radius: rem(3);
4065
- padding: rem(8) rem(15);
4066
- font-weight: 500;
4067
- transition: 0.3s ease;
4068
- margin: rem(10) 0;
4054
+ &:focus,
4055
+ &.focus {
4056
+ background-color: $wac-background-color-focus;
4057
+ border-color: $wac-background-color-focus;
4058
+ transition: background-color 0.3s ease-in-out;
4059
+ }
4069
4060
 
4070
- .wac-text {
4071
- margin: 0;
4061
+ &.is-outlined {
4062
+ background-color: transparent;
4063
+ border-color: $wac-border-light;
4064
+
4065
+ .wac-button__loader {
4066
+ background-color: $wac-background-color-darken;
4072
4067
  }
4073
4068
 
4074
- :nth-child(n){
4075
- padding: 0 3px;
4069
+ .wac-button__wrapper, .wac-button__animation {
4070
+ color: $wac-second-color !important;
4071
+ transition: color 0.3s ease-in-out;
4076
4072
  }
4077
4073
 
4078
- i {
4079
- color: $wac-white;
4080
- font-weight: 400;
4081
- margin: 0 0 0 rem(15);
4082
- font-size: rem(13);
4083
- cursor: pointer;
4074
+ &:hover,
4075
+ &.hover {
4076
+ background-color: $wac-background-color;
4077
+ border-color: $wac-background-color;
4084
4078
  }
4085
4079
 
4086
- &.default {
4087
- background-color: $wac-tag-default;
4088
- border: 1px solid $wac-border-light;
4089
- color: $wac-second-color;
4090
- font-weight: 400;
4091
- i {
4092
- color: $wac-border-form;
4093
- }
4094
- &.hover:hover,
4095
- &.hover:focus {
4096
- background-color: darken($wac-tag-default, 15%);
4097
- color: $wac-main-text;
4098
- i {
4099
- color: $wac-main-text;
4100
- }
4101
- }
4080
+ &:focus,
4081
+ &.focus {
4082
+ background-color: $wac-background-color-focus;
4083
+ border-color: $wac-background-color-focus;
4084
+ transition: background-color 0.3s ease-in-out;
4102
4085
  }
4086
+ }
4103
4087
 
4088
+ &.is-loading {
4089
+ &:hover,
4090
+ &.hover {
4091
+ background-color: $wac-background-color;
4092
+ transition: background-color 0.3s ease-in-out;
4093
+ }
4104
4094
  }
4105
- }
4106
4095
 
4107
- }
4096
+ &.disabled {
4097
+ background-color: $wac-background-color-disabled;
4098
+ border-color: $wac-background-color-disabled;
4099
+ transition: 0s;
4100
+ cursor: default;
4108
4101
 
4109
- .wac-multiple-search {
4110
- width: 100%;
4111
- min-height: 50px;
4112
- border-radius: 3px;
4113
- background-color: $wac-white;
4114
- position: relative;
4115
- z-index: 2;
4116
- border: 1px solid $wac-border-light;
4117
- transition: 0.3s ease;
4118
- &.open {
4119
- border-color: $wac-wizishop-blue;
4102
+ &:hover,
4103
+ &:focus,
4104
+ &.hover,
4105
+ &.focus {
4106
+ background-color: $wac-background-color-disabled;
4107
+ border-color: $wac-background-color-disabled;
4108
+ }
4109
+ }
4120
4110
  }
4121
- &__wrapper {
4122
- position: relative;
4123
- display: flex;
4124
- justify-content: space-between;
4125
- align-items: stretch;
4126
- align-content: stretch;
4127
- flex-wrap: nowrap;
4128
- @include media('<tablet') {
4129
- padding: 0 12px;
4111
+
4112
+ &.is-danger {
4113
+ background-color: $wac-primary-button;
4114
+ border-color: $wac-primary-button;
4115
+ transition: background-color 0.3s ease-in-out;
4116
+
4117
+ .wac-button__loader {
4118
+ background-color: $wac-primary-button-darken;
4130
4119
  }
4131
- &__left {
4132
- width: auto;
4133
- display: flex;
4134
- justify-content: space-between;
4135
- align-content: center;
4136
- align-items: center;
4137
- flex-wrap: nowrap;
4138
- position: relative;
4139
- min-height: 50px;
4140
- transition: background-color 0.3s ease;
4141
- background-color: $wac-select-icon-background;
4142
- &__background {
4143
- position: absolute;
4144
- width: 100%;
4145
- left: 0;
4146
- top: 0;
4147
- height: 100%;
4148
- opacity: 0;
4149
- z-index: 4;
4150
- transition: opacity 0.3s ease;
4151
- cursor: pointer;
4120
+
4121
+ &:hover,
4122
+ &.hover {
4123
+ background-color: $wac-primary-button-darken;
4124
+ border-color: $wac-primary-button-darken;
4125
+ transition: background-color 0.3s ease-in-out;
4126
+ }
4127
+
4128
+ &:focus,
4129
+ &.focus {
4130
+ background-color: $wac-primary-button-focus;
4131
+ border-color: $wac-primary-button-focus;
4132
+ transition: background-color 0.3s ease-in-out;
4133
+ }
4134
+
4135
+ &.is-outlined {
4136
+ background-color: transparent;
4137
+ border-color: $wac-primary-button;
4138
+
4139
+ .wac-button__wrapper, .wac-button__animation {
4140
+ color: $wac-primary-button;
4141
+ transition: color 0.3s ease-in-out;
4152
4142
  }
4153
- > span {
4154
- color: $wac-second-color;
4155
- white-space: nowrap;
4156
- font-size: rem(14);
4157
- line-height: rem(16);
4158
- margin: 0 40px 0 20px;
4159
- transition: 0.3s ease;
4160
- position: relative;
4161
- z-index: 2;
4162
- cursor: pointer;
4163
- @include media('<tablet') {
4164
- text-indent: -9999999px;
4165
- margin: 0;
4166
- width: 11px;
4167
- }
4143
+
4144
+ &:hover,
4145
+ &.hover {
4146
+ background-color: $wac-primary-button;
4147
+ border-color: $wac-primary-button;
4168
4148
  }
4169
- > i {
4170
- transition: 0.3s ease;
4171
- position: relative;
4172
- z-index: 2;
4173
- cursor: pointer;
4174
- &:nth-child(2) {
4175
- font-size: rem(10);
4176
- color: $wac-main-text;
4177
- margin: 0 20px 0 0;
4178
- @include media('<tablet') {
4179
- margin: 0 10px 0 0;
4180
- }
4181
- }
4182
- }
4183
- &__select {
4184
- position: absolute;
4185
- top: 50px;
4186
- width: 100%;
4187
- left: 0;
4188
- margin-top: 11px;
4189
- background-color: $wac-white;
4190
- z-index: 3;
4191
- box-shadow: 3px 3px 20px $wac-multiple-search-box-shadow;
4192
- border-radius: 3px;
4193
- border: 1px solid $wac-border-light;
4194
- padding: 10px;
4195
- min-width: 340px;
4196
- &__item {
4197
- display: inline-flex;
4198
- width: 100%;
4199
- font-size: rem(14);
4200
- line-height: rem(30);
4201
- cursor: pointer;
4202
- transition: 0.3s ease;
4203
- position: relative;
4204
- padding: 0 10px;
4205
- .wac-text {
4206
- margin: 0;
4207
- }
4208
- :nth-child(n) {
4209
- padding: 2px;
4210
- }
4211
- &:nth-child(2n) {
4212
- background-color: $wac-gray-background;
4213
- }
4214
- &:not(:last-child) {
4215
- margin: 0 0 rem(10);
4216
- }
4217
- span {
4218
- color: $wac-main-text;
4219
- font-size: rem(12);
4220
- text-align: left;
4221
- }
4222
- &:hover,
4223
- &:focus {
4224
- background-color: darken($wac-gray-background, 15%);
4225
- color: $wac-main-text;
4226
- }
4227
- }
4149
+
4150
+ &:focus,
4151
+ &.focus {
4152
+ background-color: $wac-primary-button-focus;
4153
+ border-color: $wac-primary-button-focus;
4154
+ transition: background-color 0.3s ease-in-out;
4228
4155
  }
4156
+ }
4157
+
4158
+ &.is-loading {
4229
4159
  &:hover,
4230
- &:focus,
4231
- &.open {
4232
- background-color: $wac-hover-multiple-search;
4160
+ &.hover {
4161
+ background-color: $wac-primary-button;
4162
+ transition: background-color 0.3s ease-in-out;
4233
4163
  }
4234
4164
  }
4235
- &__right {
4236
- width: 100%;
4237
- min-height: 50px;
4238
- position: relative;
4239
- form {
4240
- width: 100%;
4165
+
4166
+ &.opacity {
4167
+ background-color: $wac-primary-button-light;
4168
+ border-color: $wac-primary-button-light;
4169
+ &:hover, &:focus {
4170
+ background-color: $wac-primary-button;
4171
+ border-color: $wac-primary-button;
4241
4172
  }
4242
- input {
4243
- background: transparent;
4244
- border: none;
4245
- color: $wac-main-text;
4246
- font-size: rem(14);
4247
- height: 50px;
4248
- line-height: 50px;
4249
- padding: 0 20px 0 48px;
4250
- font-weight: 400;
4251
- width: 100%;
4252
- @include media('<tablet') {
4253
- padding: 0 0 0 10px;
4254
- }
4255
- &::-webkit-input-placeholder {
4256
- /* Chrome/Opera/Safari */
4257
- color: $wac-multiple-search-input-color;
4258
- opacity: 1;
4259
- font-weight: 400;
4260
- @include media('<tablet') {
4261
- font-size: rem(11);
4262
- }
4263
- }
4264
- &::-moz-placeholder {
4265
- /* Firefox 19+ */
4266
- color: $wac-multiple-search-input-color;
4267
- opacity: 1;
4268
- font-weight: 400;
4269
- @include media('<tablet') {
4270
- font-size: rem(11);
4271
- }
4272
- }
4273
- &:-ms-input-placeholder {
4274
- /* IE 10+ */
4275
- color: $wac-multiple-search-input-color;
4276
- opacity: 1;
4277
- font-weight: 400;
4278
- @include media('<tablet') {
4279
- font-size: rem(11);
4280
- }
4281
- }
4282
- &:-moz-placeholder {
4283
- /* Firefox 18- */
4284
- color: $wac-multiple-search-input-color;
4285
- opacity: 1;
4286
- font-weight: 400;
4287
- @include media('<tablet') {
4288
- font-size: rem(11);
4289
- }
4290
- }
4291
- &:focus {
4292
- & + button i {
4293
- color: $wac-main-text;
4294
- }
4295
- &::-webkit-input-placeholder {
4296
- /* Chrome/Opera/Safari */
4297
- color: $wac-white;
4298
- opacity: 1;
4299
- }
4300
- &::-moz-placeholder {
4301
- /* Firefox 19+ */
4302
- color: $wac-white;
4303
- opacity: 1;
4304
- }
4305
- &:-ms-input-placeholder {
4306
- /* IE 10+ */
4307
- color: $wac-white;
4308
- opacity: 1;
4309
- }
4310
- &:-moz-placeholder {
4311
- /* Firefox 18- */
4312
- color: $wac-white;
4313
- opacity: 1;
4314
- }
4315
- }
4173
+ }
4174
+
4175
+ &.disabled {
4176
+ background-color: $wac-primary-button-disabled;
4177
+ border-color: $wac-primary-button-disabled;
4178
+ transition: 0s;
4179
+ cursor: default;
4180
+
4181
+ .wac-button__wrapper, .wac-button__animation {
4182
+ color: $wac-white;
4316
4183
  }
4317
- button {
4318
- display: flex;
4319
- align-items: center;
4320
- align-content: center;
4321
- justify-content: center;
4322
- width: 18px;
4323
- height: 18px;
4324
- border-radius: 3px;
4325
- position: absolute;
4326
- left: 20px;
4327
- top: 50%;
4328
- transform: translateY(-50%);
4329
- border: none;
4330
- cursor: pointer;
4331
- background-color: $wac-white;
4332
- i {
4333
- font-size: rem(18);
4334
- color: $wac-color-icon-search-multiple-search;
4335
- transition: 0.3s ease;
4336
- }
4337
- &:hover {
4338
- i {
4339
- color: $wac-wizishop-blue !important;
4340
- }
4341
- }
4184
+
4185
+ &:hover,
4186
+ &:focus,
4187
+ &.hover,
4188
+ &.focus {
4189
+ background-color: $wac-primary-button-disabled;
4190
+ border-color: $wac-primary-button-disabled;
4342
4191
  }
4343
4192
  }
4344
4193
  }
4345
- &__error {
4346
- position: absolute;
4347
- top: 100%;
4348
- margin-top: 10px;
4349
- width: auto;
4350
- right: 0;
4351
- height: 30px;
4352
- line-height: 30px;
4353
- text-align: center;
4354
- background-color: $wac-multiple-search-error;
4355
- color: $wac-white;
4356
- font-size: rem(16);
4357
- font-weight: 500;
4358
- white-space: nowrap;
4359
- padding: 0 20px;
4360
- border-radius: 3px;
4361
- }
4362
- }
4363
- h4.wac-h4 {
4364
- font-size: rem(14);
4365
- line-height: rem(16);
4366
- font-weight: 500;
4367
- color: $wac-main-text;
4368
- &.grey {
4369
- color: $wac-second-color;
4370
- }
4371
- }
4372
- .wac-back {
4373
- width: 40px;
4374
- height: 40px;
4375
4194
 
4376
- &__wrapper {
4377
- @include flexbox();
4378
- @include justify-content(center);
4379
- @include align-items(center);
4380
- width: 100%;
4381
- height: 100%;
4382
- border-radius: 3px;
4383
- border: 1px solid $wac-border-light;
4384
- background-color: transparent;
4385
- transition: border-color 0.3s ease-in-out;
4195
+ &.is-success {
4196
+ background-color: $wac-green-color;
4197
+ border-color: $wac-green-color;
4198
+ transition: background-color 0.3s ease-in-out;
4386
4199
 
4387
- i {
4388
- color: $wac-second-color;
4389
- font-size: 11px;
4390
- line-height: 14px;
4200
+ .wac-button__loader {
4201
+ background-color: $wac-green-color-darken;
4391
4202
  }
4392
4203
 
4393
- &:hover {
4394
- border-color: $wac-back-border-hover;
4395
- transition: border-color 0.3s ease-in-out;
4204
+ &:hover,
4205
+ &.hover {
4206
+ background-color: $wac-green-color-darken;
4207
+ border-color: $wac-green-color-darken;
4208
+ transition: background-color 0.3s ease-in-out;
4396
4209
  }
4397
- }
4398
- }
4399
- .wac-filters {
4400
- width: 100%;
4401
- &__wrapper {
4402
- width: 100%;
4403
- display: flex;
4404
- flex-wrap: wrap;
4405
- justify-content: flex-start;
4406
- align-items: center;
4407
- align-content: center;
4408
- button {
4409
- position: relative;
4410
- width: auto;
4411
- display: flex;
4412
- align-items: center;
4413
- font-size: rem(14);
4414
- line-height: rem(16);
4415
- font-weight: 400;
4416
- color: $wac-second-color;
4417
- border: 1px solid $wac-border-light;
4418
- border-radius: 3px;
4419
- background: transparent;
4420
- box-shadow: none;
4421
- margin-bottom: rem(10);
4422
- transition: 0.3s ease;
4423
- cursor: pointer;
4424
- padding: 12px 20px;
4425
- .event {
4426
- position: absolute;
4427
- top: 0;
4428
- left: 0;
4429
- width: 100%;
4430
- height: 100%;
4431
- z-index: 2;
4432
- display: inline-block;
4433
- }
4434
- i {
4435
- color: $wac-main-text;
4436
- font-size: rem(14);
4437
- margin: 0 rem(10) 0 0;
4210
+
4211
+ &:focus,
4212
+ &.focus {
4213
+ background-color: $wac-green-color-focus;
4214
+ border-color: $wac-green-color-focus;
4215
+ transition: background-color 0.3s ease-in-out;
4216
+ }
4217
+
4218
+ &.is-outlined {
4219
+ background-color: transparent;
4220
+ border-color: $wac-green-color;
4221
+
4222
+ .wac-button__wrapper, .wac-button__animation {
4223
+ color: $wac-green-color;
4224
+ transition: color 0.3s ease-in-out;
4438
4225
  }
4226
+
4439
4227
  &:hover,
4228
+ &.hover {
4229
+ background-color: $wac-green-color;
4230
+ border-color: $wac-green-color;
4231
+ }
4232
+
4440
4233
  &:focus,
4441
- &.active {
4442
- border-color: $wac-wizishop-blue;
4443
- color: $wac-main-text;
4234
+ &.focus {
4235
+ background-color: $wac-green-color-focus;
4236
+ border-color: $wac-green-color-focus;
4237
+ transition: background-color 0.3s ease-in-out;
4444
4238
  }
4445
- &:not(:last-child) {
4446
- margin: 0 rem(10) rem(10) 0;
4239
+ }
4240
+
4241
+ &.is-loading {
4242
+ &:hover,
4243
+ &.hover {
4244
+ background-color: $wac-green-color;
4245
+ transition: background-color 0.3s ease-in-out;
4447
4246
  }
4448
4247
  }
4449
- > span {
4450
- position: relative;
4451
- color: $wac-link-color;
4452
- display: inline-block;
4453
- transition: 0.3s ease;
4454
- font-size: rem(14);
4455
- line-height: rem(16);
4456
- margin: 0 0 0 rem(30);
4457
- cursor: pointer;
4458
- z-index: 1;
4459
- &:before {
4460
- content: '';
4461
- display: block;
4462
- position: absolute;
4463
- width: 100%;
4464
- max-width: 0;
4465
- height: 1px;
4466
- border-radius: 3px;
4467
- background-color: darken($wac-link-color, 15%);
4468
- left: 0;
4469
- bottom: -2px;
4470
- transition: 0.3s ease;
4248
+ &.opacity {
4249
+ background-color: $wac-green-opacity;
4250
+ border-color: $wac-green-opacity;
4251
+ &:hover, &:focus {
4252
+ background-color: $wac-green-color;
4253
+ border-color: $wac-green-color;
4254
+ }
4255
+ }
4256
+ &.disabled {
4257
+ background-color: $wac-green-color-disabled;
4258
+ border-color: $wac-green-color-disabled;
4259
+ transition: 0s;
4260
+ cursor: default;
4261
+
4262
+ .wac-button__wrapper, .wac-button__animation {
4263
+ color: $wac-white;
4471
4264
  }
4265
+
4472
4266
  &:hover,
4473
- &:focus {
4474
- color: darken($wac-link-color, 15%);
4475
- &:before {
4476
- max-width: 100%;
4267
+ &:focus,
4268
+ &.hover,
4269
+ &.focus {
4270
+ background-color: $wac-green-color-disabled;
4271
+ }
4272
+ }
4273
+ }
4274
+
4275
+ &.is-light {
4276
+ background-color: transparent;
4277
+ border-color: $wac-border-color;
4278
+ transition: background-color 0.3s ease-in-out;
4279
+
4280
+ .wac-button__loader {
4281
+ background-color: $wac-hover-btn-grey;
4282
+ }
4283
+
4284
+ .wac-button__wrapper, .wac-button__animation {
4285
+ color: $wac-secondary-color;
4286
+ }
4287
+
4288
+ &:hover,
4289
+ &.hover {
4290
+ background-color: $wac-hover-btn-grey;
4291
+ transition: background-color 0.3s ease-in-out;
4292
+ }
4293
+
4294
+ &.is-loading {
4295
+ &:hover,
4296
+ &.hover {
4297
+ background-color: transparent;
4298
+ transition: background-color 0.3s ease-in-out;
4299
+ }
4300
+ }
4301
+ }
4302
+
4303
+ &.disabled {
4304
+ background-color: $wac-disabled-button-background;
4305
+ border-color: $wac-border-form;
4306
+
4307
+ .wac-button__wrapper, .wac-button__animation {
4308
+ color: $wac-disabled-button-text;
4309
+ }
4310
+ }
4311
+
4312
+ &.is-outlined {
4313
+ &:hover,
4314
+ &.hover {
4315
+ .wac-button__wrapper, .wac-button__animation {
4316
+ color: $wac-white;
4317
+ transition: color 0.3s ease-in-out;
4318
+ }
4319
+ }
4320
+ }
4321
+
4322
+ &__loader {
4323
+ position: absolute;
4324
+ left: -1px;
4325
+ top: 0;
4326
+ height: 100%;
4327
+ z-index: 1;
4328
+ transition: width 0.3s ease-in-out;
4329
+ overflow: hidden;
4330
+
4331
+ span {
4332
+ position: absolute;
4333
+ left: 20px;
4334
+ top: 7px;
4335
+ color: $wac-white;
4336
+ overflow: hidden;
4337
+ text-overflow: clip;
4338
+ font-size: 14px;
4339
+ line-height: 26px;
4340
+ white-space: nowrap;
4341
+ z-index: 3;
4342
+
4343
+ i {
4344
+ margin-right: 1.4px;
4345
+ }
4346
+ }
4347
+
4348
+ &.outlined {
4349
+ z-index: 4;
4350
+ }
4351
+ }
4352
+
4353
+ &.alone {
4354
+ .wac-button__loader span {
4355
+ left: 14.6px;
4356
+ }
4357
+ }
4358
+
4359
+ &.opacity {
4360
+ min-width: rem(40);
4361
+ min-height: rem(40);
4362
+
4363
+ &.alone {
4364
+ display: flex;
4365
+ align-items: center;
4366
+ justify-content: center;
4367
+ }
4368
+
4369
+ &.is-success {
4370
+ i {
4371
+ color: $wac-green-color!important;
4372
+ }
4373
+ &:hover, &:focus {
4374
+ i {
4375
+ color: $wac-white!important;
4376
+ }
4377
+ }
4378
+ }
4379
+
4380
+ &.is-danger {
4381
+ i {
4382
+ color: $wac-primary-button!important;
4383
+ }
4384
+ &:hover, &:focus {
4385
+ i {
4386
+ color: $wac-white!important;
4477
4387
  }
4478
4388
  }
4479
4389
  }
@@ -5399,7 +5309,7 @@ div.wac-field-input-search {
5399
5309
  color: $wac-green-color;
5400
5310
  font-size: rem(14);
5401
5311
  }
5402
- .wac-info {
5312
+ .wac-dropdown {
5403
5313
  display: inline-block;
5404
5314
  width: 40px;
5405
5315
  height: 40px;
@@ -5412,216 +5322,621 @@ div.wac-field-input-search {
5412
5322
  height: 100%;
5413
5323
  position: relative;
5414
5324
 
5415
- i {
5416
- font-size: 14px;
5417
- line-height: 25px;
5325
+ &__icon {
5326
+ font-size: 30px;
5327
+ line-height: 18px;
5418
5328
  color: $wac-second-color;
5419
- transition: color 0.3s ease-in-out;
5329
+ transition: color 0.3s ease, transform 0.3s ease;
5420
5330
  }
5421
5331
 
5422
5332
  &__sublevel {
5423
5333
  position: absolute;
5424
- width: 350px;
5425
- top: 13px;
5426
- left: 100%;
5334
+ width: 160px;
5335
+ top: 100%;
5336
+ right: 0;
5427
5337
  z-index: -1;
5428
5338
  opacity: 0;
5429
5339
  background-color: $wac-white;
5430
5340
  border-radius: rem(3);
5431
5341
  box-shadow: 0px 2px 5px $wac-info-box-shadow;
5432
5342
  visibility: hidden;
5433
- transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out, visibility 0s linear 0.16s;
5343
+ transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
5434
5344
 
5435
5345
  &__container {
5436
- padding: 15px 20px;
5437
- font-size: rem(14);
5438
- line-height: rem(25);
5439
- color: $wac-second-color;
5440
- }
5441
- }
5442
-
5443
- &:hover {
5444
- i {
5445
- color: $wac-input-active-color;
5446
- transition: color 0.3s ease-in-out;
5447
- }
5346
+ padding: 10px 10px;
5347
+ border: 1px solid $wac-border-color;
5448
5348
 
5449
- .wac-info__wrapper__sublevel {
5450
- visibility: visible;
5451
- opacity: 1;
5452
- z-index: 2;
5453
- transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
5454
- }
5455
- }
5349
+ &__item {
5350
+ padding: 5.7px 10px;
5351
+ font-size: 14px;
5352
+ line-height: 24px;
5353
+ color: $wac-second-color;
5354
+ cursor: pointer;
5355
+ transition: background-color 0.3s ease, color 0.3s ease;
5356
+ display: flex;
5357
+ justify-content: flex-start;
5358
+ align-items: center;
5359
+ align-content: center;
5360
+
5361
+ i {
5362
+ min-width: 15px;
5363
+ margin-right: 5px;
5364
+ text-align: center;
5365
+ }
5366
+ span {
5367
+ white-space: nowrap;
5368
+ }
5369
+
5370
+ &:hover {
5371
+ background-color: $wac-gray-background;
5372
+ transition: background-color 0.3s ease, color 0.3s ease;
5373
+ color: $wac-input-active-color;
5374
+ }
5375
+ }
5376
+ }
5377
+ }
5378
+
5379
+ &:hover {
5380
+ .wac-dropdown__wrapper__icon {
5381
+ color: $wac-wizishop-blue;
5382
+ transform: rotate(90deg);
5383
+ transition: color 0.3s ease, transform 0.3s ease;
5384
+ }
5385
+
5386
+ .wac-dropdown__wrapper__sublevel {
5387
+ visibility: visible;
5388
+ opacity: 1;
5389
+ z-index: 2;
5390
+ transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
5391
+ }
5392
+ }
5393
+ }
5394
+ }
5395
+ .wac-radio {
5396
+ .is-checkradio[type='radio'] {
5397
+ outline: 0 !important;
5398
+ & + label {
5399
+ font-size: rem(14);
5400
+ line-height: rem(24);
5401
+ color: $wac-input-radio-color-label;
5402
+ padding-left: 30px;
5403
+ padding-right: 5px;
5404
+ margin-right: 0;
5405
+ outline: 0 !important;
5406
+ &:before {
5407
+ width: 16px;
5408
+ height: 16px;
5409
+ border: 1px solid $wac-border-form;
5410
+ border-radius: 23px;
5411
+ top: 3px;
5412
+ }
5413
+ &:after {
5414
+ width: 20px;
5415
+ height: 20px;
5416
+ background: $wac-input-active-color;
5417
+ top: 1px;
5418
+ left: -2px;
5419
+ }
5420
+ &:before,
5421
+ &:after {
5422
+ outline: 0 !important;
5423
+ }
5424
+ &:hover,
5425
+ &:focus {
5426
+ &:before {
5427
+ border-color: $wac-input-active-color !important;
5428
+ }
5429
+ }
5430
+ }
5431
+ &:hover {
5432
+ & + label {
5433
+ color: $wac-input-radio-color-active-label;
5434
+ &:before {
5435
+ border-color: $wac-input-active-color !important;
5436
+ }
5437
+ }
5438
+ &:not([disabled]) {
5439
+ & + label {
5440
+ &:before {
5441
+ border-color: $wac-input-active-color !important;
5442
+ }
5443
+ }
5444
+ }
5445
+ }
5446
+ &:checked + label {
5447
+ color: $wac-input-radio-color-active-label;
5448
+ &:before {
5449
+ border-color: $wac-input-active-color;
5450
+ }
5451
+ }
5452
+ }
5453
+
5454
+
5455
+ .wac-radio__row {
5456
+ min-width: 100%;
5457
+ margin: 0 0 7px;
5458
+ }
5459
+
5460
+ &--nowrap {
5461
+ display: inline-block;
5462
+ width: auto;
5463
+ min-width: 0;
5464
+ margin: 0 10px 10px 0;
5465
+ .wac-radio {
5466
+ &__row {
5467
+ width: auto;
5468
+ display: inline-block;
5469
+ margin: 0;
5470
+ }
5471
+ }
5472
+ }
5473
+ & + .wac-radio {
5474
+ margin-top: rem(-6);
5475
+ }
5476
+
5477
+ &.alone {
5478
+ label {
5479
+ padding-left: 7px;
5480
+ margin-right: 0;
5481
+ }
5482
+
5483
+ }
5484
+
5485
+ &__input {
5486
+ width: 100%;
5487
+ margin: rem(10) 0 0;
5488
+ border: none;
5489
+ padding: 0;
5490
+ input {
5491
+ height: 40px;
5492
+ max-height: 40px;
5493
+ padding: 0 20px;
5494
+ line-height: 40px;
5495
+ border: 1px solid $wac-border-form;
5496
+ border-radius: 3px;
5497
+ margin: 0 0 30px!important;
5498
+ font-size: rem(14) !important;
5499
+ color: $wac-main-text;
5500
+ &:focus {
5501
+ border-color: $wizishop-blue !important;
5502
+ box-shadow: 0px 0px 4px $wac-radio !important;
5503
+ &::-webkit-input-placeholder {
5504
+ /* Chrome/Opera/Safari */
5505
+ opacity: 0;
5506
+ }
5507
+ &::-moz-placeholder {
5508
+ /* Firefox 19+ */
5509
+ opacity: 0;
5510
+ }
5511
+ &:-ms-input-placeholder {
5512
+ /* IE 10+ */
5513
+ opacity: 0;
5514
+ }
5515
+ &:-moz-placeholder {
5516
+ /* Firefox 18- */
5517
+ opacity: 0;
5518
+ }
5519
+ }
5520
+ }
5521
+ }
5522
+ }
5523
+ .wac-multiple-search-plus {
5524
+
5525
+ &__wrapper {
5526
+ margin: rem(14) 0;
5527
+ width: fit-content;
5528
+
5529
+ &__block {
5530
+
5531
+ display: flex;
5532
+ align-items: center;
5533
+ justify-content: space-between;
5534
+ align-content: center;
5535
+ color: $wac-white;
5536
+ font-size: rem(14);
5537
+ line-height: rem(16);
5538
+ border-radius: rem(3);
5539
+ padding: rem(8) rem(15);
5540
+ font-weight: 500;
5541
+ transition: 0.3s ease;
5542
+ margin: rem(10) 0;
5543
+
5544
+ .wac-text {
5545
+ margin: 0;
5546
+ }
5547
+
5548
+ :nth-child(n){
5549
+ padding: 0 3px;
5550
+ }
5551
+
5552
+ i {
5553
+ color: $wac-white;
5554
+ font-weight: 400;
5555
+ margin: 0 0 0 rem(15);
5556
+ font-size: rem(13);
5557
+ cursor: pointer;
5558
+ }
5559
+
5560
+ &.default {
5561
+ background-color: $wac-tag-default;
5562
+ border: 1px solid $wac-border-light;
5563
+ color: $wac-second-color;
5564
+ font-weight: 400;
5565
+ i {
5566
+ color: $wac-border-form;
5567
+ }
5568
+ &.hover:hover,
5569
+ &.hover:focus {
5570
+ background-color: darken($wac-tag-default, 15%);
5571
+ color: $wac-main-text;
5572
+ i {
5573
+ color: $wac-main-text;
5574
+ }
5575
+ }
5576
+ }
5577
+
5578
+ }
5579
+ }
5580
+
5581
+ }
5582
+
5583
+ .wac-multiple-search {
5584
+ width: 100%;
5585
+ min-height: 50px;
5586
+ border-radius: 3px;
5587
+ background-color: $wac-white;
5588
+ position: relative;
5589
+ z-index: 2;
5590
+ border: 1px solid $wac-border-light;
5591
+ transition: 0.3s ease;
5592
+ &.open {
5593
+ border-color: $wac-wizishop-blue;
5594
+ }
5595
+ &__wrapper {
5596
+ position: relative;
5597
+ display: flex;
5598
+ justify-content: space-between;
5599
+ align-items: stretch;
5600
+ align-content: stretch;
5601
+ flex-wrap: nowrap;
5602
+ @include media('<tablet') {
5603
+ padding: 0 12px;
5604
+ }
5605
+ &__left {
5606
+ width: auto;
5607
+ display: flex;
5608
+ justify-content: space-between;
5609
+ align-content: center;
5610
+ align-items: center;
5611
+ flex-wrap: nowrap;
5612
+ position: relative;
5613
+ min-height: 50px;
5614
+ transition: background-color 0.3s ease;
5615
+ background-color: $wac-select-icon-background;
5616
+ &__background {
5617
+ position: absolute;
5618
+ width: 100%;
5619
+ left: 0;
5620
+ top: 0;
5621
+ height: 100%;
5622
+ opacity: 0;
5623
+ z-index: 4;
5624
+ transition: opacity 0.3s ease;
5625
+ cursor: pointer;
5626
+ }
5627
+ > span {
5628
+ color: $wac-second-color;
5629
+ white-space: nowrap;
5630
+ font-size: rem(14);
5631
+ line-height: rem(16);
5632
+ margin: 0 40px 0 20px;
5633
+ transition: 0.3s ease;
5634
+ position: relative;
5635
+ z-index: 2;
5636
+ cursor: pointer;
5637
+ @include media('<tablet') {
5638
+ text-indent: -9999999px;
5639
+ margin: 0;
5640
+ width: 11px;
5641
+ }
5642
+ }
5643
+ > i {
5644
+ transition: 0.3s ease;
5645
+ position: relative;
5646
+ z-index: 2;
5647
+ cursor: pointer;
5648
+ &:nth-child(2) {
5649
+ font-size: rem(10);
5650
+ color: $wac-main-text;
5651
+ margin: 0 20px 0 0;
5652
+ @include media('<tablet') {
5653
+ margin: 0 10px 0 0;
5654
+ }
5655
+ }
5656
+ }
5657
+ &__select {
5658
+ position: absolute;
5659
+ top: 50px;
5660
+ width: 100%;
5661
+ left: 0;
5662
+ margin-top: 11px;
5663
+ background-color: $wac-white;
5664
+ z-index: 3;
5665
+ box-shadow: 3px 3px 20px $wac-multiple-search-box-shadow;
5666
+ border-radius: 3px;
5667
+ border: 1px solid $wac-border-light;
5668
+ padding: 10px;
5669
+ min-width: 340px;
5670
+ &__item {
5671
+ display: inline-flex;
5672
+ width: 100%;
5673
+ font-size: rem(14);
5674
+ line-height: rem(30);
5675
+ cursor: pointer;
5676
+ transition: 0.3s ease;
5677
+ position: relative;
5678
+ padding: 0 10px;
5679
+ .wac-text {
5680
+ margin: 0;
5681
+ }
5682
+ :nth-child(n) {
5683
+ padding: 2px;
5684
+ }
5685
+ &:nth-child(2n) {
5686
+ background-color: $wac-gray-background;
5687
+ }
5688
+ &:not(:last-child) {
5689
+ margin: 0 0 rem(10);
5690
+ }
5691
+ span {
5692
+ color: $wac-main-text;
5693
+ font-size: rem(12);
5694
+ text-align: left;
5695
+ }
5696
+ &:hover,
5697
+ &:focus {
5698
+ background-color: darken($wac-gray-background, 15%);
5699
+ color: $wac-main-text;
5700
+ }
5701
+ }
5702
+ }
5703
+ &:hover,
5704
+ &:focus,
5705
+ &.open {
5706
+ background-color: $wac-hover-multiple-search;
5707
+ }
5708
+ }
5709
+ &__right {
5710
+ width: 100%;
5711
+ min-height: 50px;
5712
+ position: relative;
5713
+ form {
5714
+ width: 100%;
5715
+ }
5716
+ input {
5717
+ background: transparent;
5718
+ border: none;
5719
+ color: $wac-main-text;
5720
+ font-size: rem(14);
5721
+ height: 50px;
5722
+ line-height: 50px;
5723
+ padding: 0 20px 0 48px;
5724
+ font-weight: 400;
5725
+ width: 100%;
5726
+ @include media('<tablet') {
5727
+ padding: 0 0 0 10px;
5728
+ }
5729
+ &::-webkit-input-placeholder {
5730
+ /* Chrome/Opera/Safari */
5731
+ color: $wac-multiple-search-input-color;
5732
+ opacity: 1;
5733
+ font-weight: 400;
5734
+ @include media('<tablet') {
5735
+ font-size: rem(11);
5736
+ }
5737
+ }
5738
+ &::-moz-placeholder {
5739
+ /* Firefox 19+ */
5740
+ color: $wac-multiple-search-input-color;
5741
+ opacity: 1;
5742
+ font-weight: 400;
5743
+ @include media('<tablet') {
5744
+ font-size: rem(11);
5745
+ }
5746
+ }
5747
+ &:-ms-input-placeholder {
5748
+ /* IE 10+ */
5749
+ color: $wac-multiple-search-input-color;
5750
+ opacity: 1;
5751
+ font-weight: 400;
5752
+ @include media('<tablet') {
5753
+ font-size: rem(11);
5754
+ }
5755
+ }
5756
+ &:-moz-placeholder {
5757
+ /* Firefox 18- */
5758
+ color: $wac-multiple-search-input-color;
5759
+ opacity: 1;
5760
+ font-weight: 400;
5761
+ @include media('<tablet') {
5762
+ font-size: rem(11);
5763
+ }
5764
+ }
5765
+ &:focus {
5766
+ & + button i {
5767
+ color: $wac-main-text;
5768
+ }
5769
+ &::-webkit-input-placeholder {
5770
+ /* Chrome/Opera/Safari */
5771
+ color: $wac-white;
5772
+ opacity: 1;
5773
+ }
5774
+ &::-moz-placeholder {
5775
+ /* Firefox 19+ */
5776
+ color: $wac-white;
5777
+ opacity: 1;
5778
+ }
5779
+ &:-ms-input-placeholder {
5780
+ /* IE 10+ */
5781
+ color: $wac-white;
5782
+ opacity: 1;
5783
+ }
5784
+ &:-moz-placeholder {
5785
+ /* Firefox 18- */
5786
+ color: $wac-white;
5787
+ opacity: 1;
5788
+ }
5789
+ }
5790
+ }
5791
+ button {
5792
+ display: flex;
5793
+ align-items: center;
5794
+ align-content: center;
5795
+ justify-content: center;
5796
+ width: 18px;
5797
+ height: 18px;
5798
+ border-radius: 3px;
5799
+ position: absolute;
5800
+ left: 20px;
5801
+ top: 50%;
5802
+ transform: translateY(-50%);
5803
+ border: none;
5804
+ cursor: pointer;
5805
+ background-color: $wac-white;
5806
+ i {
5807
+ font-size: rem(18);
5808
+ color: $wac-color-icon-search-multiple-search;
5809
+ transition: 0.3s ease;
5810
+ }
5811
+ &:hover {
5812
+ i {
5813
+ color: $wac-wizishop-blue !important;
5814
+ }
5815
+ }
5816
+ }
5817
+ }
5818
+ }
5819
+ &__error {
5820
+ position: absolute;
5821
+ top: 100%;
5822
+ margin-top: 10px;
5823
+ width: auto;
5824
+ right: 0;
5825
+ height: 30px;
5826
+ line-height: 30px;
5827
+ text-align: center;
5828
+ background-color: $wac-multiple-search-error;
5829
+ color: $wac-white;
5830
+ font-size: rem(16);
5831
+ font-weight: 500;
5832
+ white-space: nowrap;
5833
+ padding: 0 20px;
5834
+ border-radius: 3px;
5456
5835
  }
5457
5836
  }
5458
- .wac-delete {
5459
- width: 40px;
5460
- height: 40px;
5461
-
5462
- &__wrapper {
5463
- @include flexbox();
5464
- @include justify-content(center);
5465
- @include align-items(center);
5837
+ a.wac-link {
5838
+ position: relative;
5839
+ color: $wac-link-color;
5840
+ display: inline-block;
5841
+ transition: 0.3s ease;
5842
+ font-size: rem(14);
5843
+ line-height: rem(16);
5844
+ &:before {
5845
+ content: '';
5846
+ display: block;
5847
+ position: absolute;
5466
5848
  width: 100%;
5467
- height: 100%;
5849
+ max-width: 0;
5850
+ height: 1px;
5468
5851
  border-radius: 3px;
5469
- background-color: transparent;
5470
- transition: background-color 0.3s ease-in-out;
5471
-
5472
- i {
5473
- color: $wac-border-form;
5474
- font-size: 14px;
5475
- line-height: 23px;
5476
- transition: color 0.3s ease-in-out;
5477
- }
5478
-
5479
- &:hover {
5480
- background-color: $wac-primary-button;
5481
- transition: background-color 0.3s ease-in-out;
5482
-
5483
- i {
5484
- color: $wac-white;
5485
- transition: color 0.3s ease-in-out;
5486
- }
5852
+ background-color: darken($wac-link-color, 15%);
5853
+ left: 0;
5854
+ bottom: -2px;
5855
+ transition: 0.3s ease;
5856
+ }
5857
+ &:hover,
5858
+ &:focus {
5859
+ color: darken($wac-link-color, 15%);
5860
+ &:before {
5861
+ max-width: 100%;
5487
5862
  }
5488
5863
  }
5489
5864
  }
5490
- .wac-free {
5491
- height: 100%;
5865
+ .wac-header-page {
5492
5866
  width: 100%;
5493
- width: 100vw;
5494
- height: 100vh;
5495
- position: fixed;
5496
- top: 0;
5497
- left: 0;
5498
- z-index: 9999;
5499
-
5500
- &__wrapper {
5501
- background-color: white;
5502
- border: 1px solid $wac-border-color;
5503
- border-radius: 3px;
5504
- margin: auto;
5505
- box-shadow: 0px 10px 40px $wac-free-popin-boxshadow;
5506
- position: absolute;
5507
- left: 50%;
5508
- top: 50%;
5509
- transform: translate(-50%, -50%);
5510
- padding: 50px;
5511
- z-index: 3;
5512
- max-height: 90vh;
5513
- display: flex;
5514
- flex-wrap: nowrap;
5515
- flex-direction: column;
5516
- justify-content: center;
5517
- align-items: center;
5867
+ background-color: transparent;
5868
+ position: relative;
5869
+ z-index: 2;
5870
+ &__maxWidth {
5518
5871
  width: 100%;
5519
- max-width: 575px;
5520
- overflow: hidden;
5521
-
5522
- &__content {
5523
- position: relative;
5524
- overflow: hidden;
5525
- display: flex;
5526
-
5527
- }
5528
-
5529
- div:not([class]) {
5530
- width: 100%;
5531
- margin: 0 0 20px;
5532
- }
5533
-
5534
- > * {
5872
+ margin: 0 auto;
5873
+ &__top {
5535
5874
  width: 100%;
5536
- }
5537
-
5538
- &__button-close {
5539
- position: absolute;
5540
- top: 10px;
5541
- right: 10px;
5542
- width: 30px;
5543
- height: 30px;
5544
- border-radius: 50%;
5545
5875
  display: flex;
5546
- justify-content: center;
5876
+ justify-content: space-between;
5547
5877
  align-items: center;
5548
- background-color: $wac-popin-btn-close;
5549
- transition: .3s ease;
5550
- i {
5551
- color: $wac-second-color;
5552
- font-size: 14px;
5553
- font-weight: 400;
5554
- }
5555
- &:hover, &:focus {
5556
- background-color: $wac-main-text;
5557
- i {
5558
- color: $wac-white;
5559
- }
5878
+ margin: 0 0 27px;
5879
+ @include media('<tablet') {
5880
+ flex-wrap: wrap;
5881
+ justify-content: flex-start;
5882
+ align-items: flex-start;
5883
+ margin: 0;
5560
5884
  }
5561
- }
5562
-
5563
- img {
5564
- display: block;
5565
- max-width: 200px;
5566
- margin: 0 auto rem(20);
5567
- }
5568
-
5569
- h2 {
5570
- font-size: rem(20);
5571
- line-height: rem(25);
5572
- margin: 0 0 rem(20);
5573
- font-weight: 500;
5574
- width: 100%;
5575
- text-align: center;
5576
- }
5577
-
5578
- p {
5579
- font-size: rem(14);
5580
- line-height: rem(25);
5581
- color: $wac-second-color;
5582
- width: 100%;
5583
- text-align: center;
5584
- padding: 0;
5585
- margin: 0;
5586
- }
5587
-
5588
- &__buttons {
5589
- width: 100%;
5590
- display: flex;
5591
- flex-direction: column;
5592
- align-items: center;
5593
- margin: 30px 0 0;
5594
- &__button {
5595
- margin: 10px;
5885
+ &__left {
5596
5886
  width: auto;
5887
+ display: flex;
5888
+ align-items: center;
5889
+ align-content: center;
5890
+ margin: 0 10px 0 0;
5891
+ @include media('<tablet') {
5892
+ width: 100%;
5893
+ margin: 0 0 30px;
5894
+ }
5895
+ a {
5896
+ display: flex;
5897
+ min-width: 40px;
5898
+ height: 40px;
5899
+ border-radius: 3px;
5900
+ border: 1px solid $wac-border-light;
5901
+ margin: 0 20px 0 0;
5902
+ transition: 0.3s ease;
5903
+ justify-content: center;
5904
+ align-items: center;
5905
+ i {
5906
+ font-size: rem(12);
5907
+ font-weight: 400;
5908
+ color: $wac-second-color;
5909
+ }
5910
+ &:hover,
5911
+ &:focus {
5912
+ background-color: $wizishop-blue;
5913
+ border-color: $wizishop-blue;
5914
+ i {
5915
+ color: $white;
5916
+ }
5917
+ }
5918
+ & + * {
5919
+ white-space: nowrap;
5920
+ }
5921
+ }
5597
5922
  }
5598
- }
5599
- }
5600
- &__background {
5601
- z-index: 1;
5602
- position: absolute;
5603
- top: 0;
5604
- left: 0;
5605
- width: 100%;
5606
- height: 100%;
5607
- background-color: transparentize($wac-main-text, .5);
5608
- }
5609
- }
5610
-
5611
- .wac-free .ps-content > * {
5612
- padding-right: 15px;
5613
- }
5614
- .wac-logo {
5615
- &__wrapper {
5616
- svg {
5617
- width: 128px !important;
5618
- }
5619
-
5620
- &.white {
5621
- .cls-0,
5622
- .cls-1,
5623
- .cls-2 {
5624
- fill: white;
5923
+ &__right {
5924
+ width: 100%;
5925
+ display: flex;
5926
+ justify-content: flex-end;
5927
+ align-items: center;
5928
+ align-content: center;
5929
+ margin: 0 0 0 10px;
5930
+ @include media('<tablet') {
5931
+ width: 100%;
5932
+ margin: 0;
5933
+ justify-content: center;
5934
+ }
5935
+ > * {
5936
+ &:not(:last-child) {
5937
+ margin: 0 20px 0 0;
5938
+ }
5939
+ }
5625
5940
  }
5626
5941
  }
5627
5942
  }