@wizishop/wizi-block 4.2.2-beta → 4.2.23-beta

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 (46) hide show
  1. package/assets/i18n/en.json +1 -1
  2. package/assets/i18n/fr.json +1 -1
  3. package/bundles/wizishop-wizi-block.umd.js +602 -385
  4. package/bundles/wizishop-wizi-block.umd.js.map +1 -1
  5. package/bundles/wizishop-wizi-block.umd.min.js +1 -1
  6. package/bundles/wizishop-wizi-block.umd.min.js.map +1 -1
  7. package/esm2015/lib/components/configs/configs.component.js +2 -2
  8. package/esm2015/lib/dtos/blocks/parent-block.dto.js +3 -2
  9. package/esm2015/lib/dtos/blocks/witness/witness-background-one.dto.js +2 -2
  10. package/esm2015/lib/dtos/forms/forms.dto.js +2 -2
  11. package/esm2015/lib/shared/components/editorjs/editorjs.component.js +27 -7
  12. package/esm2015/lib/shared/components/editorjs/tools/inline/link-tool.component.js +76 -15
  13. package/esm2015/lib/shared/components/editorjs/tools/inline/text-background-color-tool.component.js +5 -7
  14. package/esm2015/lib/shared/components/editorjs/tools/inline/text-color-tool.component.js +4 -2
  15. package/esm2015/lib/shared/components/editorjs/tools/inline/text-size-tool.component.js +4 -3
  16. package/esm2015/lib/shared/components/editorjs/tools/inline/tool-type/inline-style-tool.component.js +51 -20
  17. package/esm2015/lib/shared/components/editorjs/tools/paragraph/text-type-tool.component.js +3 -2
  18. package/esm2015/lib/shared/components/editorjs/tools/paragraph/tool-type/paragraph-style-tool.component.js +35 -7
  19. package/esm2015/lib/shared/components/editorjs/tools/paragraph/tool-type/text-edition.component.js +5 -6
  20. package/esm2015/lib/shared/components/editorjs/tools/utils/editorjs-conversion.service.js +13 -1
  21. package/esm2015/lib/shared/components/editorjs/tools/utils/editorjs-tool.component.js +35 -2
  22. package/esm2015/lib/shared/components/editorjs/tools/utils/editorjs-translation.service.js +20 -0
  23. package/esm2015/lib/structures/text-backgrounds/four-rows-icon-text/text-backgrounds-four-rows-icon-text.component.js +7 -2
  24. package/esm2015/lib/structures/text-backgrounds/three-rows-icon-text/text-backgrounds-three-rows-icon-text.component.js +2 -2
  25. package/esm2015/lib/structures/text-backgrounds/two-rows-icon-text/text-backgrounds-two-rows-icon-text.component.js +2 -2
  26. package/esm2015/lib/structures/texts/quadruple-numbers/texts-quadruple-numbers.component.js +2 -2
  27. package/esm2015/lib/structures/timer/airport/timer-airport.component.js +2 -2
  28. package/esm2015/lib/structures/timer/background/timer-background.component.js +2 -2
  29. package/esm2015/lib/structures/timer/clock/timer-clock.component.js +2 -2
  30. package/esm2015/lib/structures/timer/multiple-img/timer-multiple-img.component.js +2 -2
  31. package/esm2015/lib/structures/timer/simple/timer-simple.component.js +2 -2
  32. package/esm2015/lib/wizi-block.component.js +4 -4
  33. package/esm2015/wizishop-wizi-block.js +227 -226
  34. package/fesm2015/wizishop-wizi-block.js +276 -74
  35. package/fesm2015/wizishop-wizi-block.js.map +1 -1
  36. package/lib/shared/components/editorjs/editorjs.component.d.ts +5 -1
  37. package/lib/shared/components/editorjs/tools/inline/link-tool.component.d.ts +1 -0
  38. package/lib/shared/components/editorjs/tools/inline/tool-type/inline-style-tool.component.d.ts +2 -2
  39. package/lib/shared/components/editorjs/tools/paragraph/tool-type/paragraph-style-tool.component.d.ts +5 -0
  40. package/lib/shared/components/editorjs/tools/utils/editorjs-tool.component.d.ts +2 -0
  41. package/lib/shared/components/editorjs/tools/utils/editorjs-translation.service.d.ts +7 -0
  42. package/lib/structures/text-backgrounds/four-rows-icon-text/text-backgrounds-four-rows-icon-text.component.d.ts +1 -0
  43. package/package.json +1 -1
  44. package/wizi-block.scss +2133 -1869
  45. package/wizishop-wizi-block.d.ts +226 -225
  46. package/wizishop-wizi-block.metadata.json +1 -1
package/wizi-block.scss CHANGED
@@ -48,6 +48,8 @@ $wb-cancel-background: #e43232 !default;
48
48
 
49
49
  $wb-color-border: #dee2ed !default;
50
50
  $wb-second-color: #526384 !default;
51
+ $wb-wizishop-blue-light: #52aecd26 !default;
52
+ $wb-wizishop-blue: #4baed0 !default;
51
53
  $transition-base-time: 200ms !default;
52
54
  .wb-structure-config-payment {
53
55
  padding: 0;
@@ -804,11 +806,23 @@ $transition-base-time: 200ms !default;
804
806
  align-items: center;
805
807
  justify-content: center;
806
808
 
809
+ @include media('<1100px') {
810
+ height: 100%;
811
+ overflow-y: scroll;
812
+ align-items: flex-start;
813
+ }
814
+
807
815
  > div:last-child {
808
816
  display: flex;
809
817
  padding-top: 30px;
810
818
  align-items: flex-start;
811
819
  justify-content: center;
820
+ @include media('<1100px') {
821
+ flex-direction: column !important;
822
+ > * {
823
+ margin: 0 0 10px !important;
824
+ }
825
+ }
812
826
  }
813
827
 
814
828
  input {
@@ -904,6 +918,7 @@ $transition-base-time: 200ms !default;
904
918
  }
905
919
 
906
920
  &__picker {
921
+ width: 100%;
907
922
  max-height: 0;
908
923
  overflow: hidden;
909
924
  @include simple_transition();
@@ -1018,6 +1033,11 @@ input[type='number'] {
1018
1033
  }
1019
1034
 
1020
1035
  .control {
1036
+ &--flexStart {
1037
+ display: flex;
1038
+ flex-wrap: wrap;
1039
+ justify-content: flex-start;
1040
+ }
1021
1041
  &--flex {
1022
1042
  display: flex;
1023
1043
  align-items: center;
@@ -1105,12 +1125,13 @@ input[type='number'] {
1105
1125
  }
1106
1126
 
1107
1127
  .color-wrapper {
1108
- width: 132px;
1128
+ width: auto;
1129
+ min-width: 132px;
1109
1130
  padding: 5px 20px 5px 5px;
1110
1131
  border-radius: 3px;
1111
1132
  border: 1px solid $wb-border-color;
1112
1133
  display: flex;
1113
- justify-content: center;
1134
+ justify-content: flex-start;
1114
1135
  align-items: center;
1115
1136
  > div {
1116
1137
  width: 30px;
@@ -1289,6 +1310,10 @@ wb-structure-config-extended-input {
1289
1310
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2352AECD' d='M496 384H160v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h80v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h336c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160h-80v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h336v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h80c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16C7.2 64 0 71.2 0 80v32c0 8.8 7.2 16 16 16h208v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h208c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16z'/%3E%3C/svg%3E");
1290
1311
  background-size: auto 100%;
1291
1312
  }
1313
+
1314
+ wb-structure-tools {
1315
+ z-index: 2;
1316
+ }
1292
1317
  .wb-map-fullpage {
1293
1318
  position: relative;
1294
1319
 
@@ -1879,8 +1904,8 @@ wb-structure-config-extended-input {
1879
1904
  padding: rem(8) rem(8);
1880
1905
  border: rem(1) solid transparent;
1881
1906
  position: absolute;
1882
- top: -#{rem(26)};
1883
- right: -#{rem(55)};
1907
+ top: -#{rem(45)};
1908
+ right: 0;
1884
1909
  @include media('<=#{$block-width-mobile * 1.4}') {
1885
1910
  right: -#{rem(26)};
1886
1911
  }
@@ -2198,6 +2223,10 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
2198
2223
  margin-right: 0 !important;
2199
2224
  }
2200
2225
 
2226
+ &__loader {
2227
+ max-height: 100px;
2228
+ }
2229
+
2201
2230
  .ce {
2202
2231
  &-block {
2203
2232
  &__content {
@@ -2612,32 +2641,34 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
2612
2641
  }
2613
2642
  }
2614
2643
 
2615
- &.size-small {
2616
- span {
2617
- display: none;
2644
+ &.we-size {
2645
+ &-small {
2646
+ span {
2647
+ display: none;
2618
2648
 
2619
- &:first-of-type {
2620
- display: initial;
2649
+ &:first-of-type {
2650
+ display: initial;
2651
+ }
2621
2652
  }
2622
2653
  }
2623
- }
2624
2654
 
2625
- &.size-large {
2626
- span {
2627
- display: none;
2655
+ &-large {
2656
+ span {
2657
+ display: none;
2628
2658
 
2629
- &:nth-of-type(3) {
2630
- display: initial;
2659
+ &:nth-of-type(3) {
2660
+ display: initial;
2661
+ }
2631
2662
  }
2632
2663
  }
2633
- }
2634
2664
 
2635
- &.size-huge {
2636
- span {
2637
- display: none;
2665
+ &-huge {
2666
+ span {
2667
+ display: none;
2638
2668
 
2639
- &:nth-of-type(4) {
2640
- display: initial;
2669
+ &:nth-of-type(4) {
2670
+ display: initial;
2671
+ }
2641
2672
  }
2642
2673
  }
2643
2674
  }
@@ -2922,11 +2953,13 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
2922
2953
  transition: border-color 0.3s ease-in-out;
2923
2954
 
2924
2955
  &:hover {
2956
+ border-width: 2px;
2925
2957
  border-color: #bbbbbb;
2926
2958
  transition: border-color 0.3s ease-in-out;
2927
2959
  }
2928
2960
 
2929
2961
  &--active {
2962
+ border-width: 2px;
2930
2963
  border-color: $wizishop-blue;
2931
2964
  transition: border-color 0.3s ease-in-out;
2932
2965
  }
@@ -3285,7 +3318,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
3285
3318
  }
3286
3319
  }
3287
3320
 
3288
- button {
3321
+ &__add {
3289
3322
  border: none;
3290
3323
  border-radius: 3px;
3291
3324
  color: white;
@@ -3300,6 +3333,10 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
3300
3333
  background-color: $wizishop-blue-hover;
3301
3334
  transition: background-color 0.3s ease-in-out;
3302
3335
  }
3336
+
3337
+ &.hidden {
3338
+ display: none;
3339
+ }
3303
3340
  }
3304
3341
 
3305
3342
  &.hidden {
@@ -3308,11 +3345,39 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
3308
3345
  pointer-events: none;
3309
3346
  transition: opacity 0.3s ease-in-out, z-index 0s linear 0.3s;
3310
3347
  }
3348
+
3349
+ &__delete {
3350
+ height: 39px;
3351
+ width: 39px;
3352
+ border: none;
3353
+ border-radius: 3px;
3354
+ cursor: pointer;
3355
+ background: $wb-cancel-background
3356
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0h120.4c12.1 0 23.2 6.848 28.6 17.69L320 32h96c17.7 0 32 14.33 32 32s-14.3 32-32 32H32C14.33 96 0 81.67 0 64s14.33-32 32-32h96l7.2-14.31zM31.1 128H416v320c0 35.3-28.7 64-64 64H95.1c-34.45 0-64-28.7-64-64V128zm80 80v224c0 8.8 8.1 16 16 16 9.7 0 16-7.2 16-16V208c0-8.8-6.3-16-16-16-7.9 0-16 7.2-16 16zm96 0v224c0 8.8 8.1 16 16 16 9.7 0 16.9-7.2 16.9-16V208c0-8.8-7.2-16-16.9-16-7.9 0-16 7.2-16 16zm96.9 0v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16s-16 7.2-16 16z'/%3E%3C/svg%3E")
3357
+ center center / 15px 15px no-repeat;
3358
+ transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
3359
+
3360
+ &:hover {
3361
+ background-color: darken($wb-cancel-background, 8%);
3362
+ transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
3363
+ }
3364
+
3365
+ &.hidden {
3366
+ display: none;
3367
+ }
3368
+ }
3311
3369
  }
3312
3370
  }
3313
3371
  }
3314
3372
  }
3315
3373
  }
3374
+
3375
+ &--top {
3376
+ .ce-inline-toolbar {
3377
+ top: unset !important;
3378
+ bottom: 100%;
3379
+ }
3380
+ }
3316
3381
  }
3317
3382
 
3318
3383
  .codeEdit {
@@ -3402,98 +3467,101 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
3402
3467
  }
3403
3468
  }
3404
3469
  .wb-product-zoom {
3405
- //minimum search sized for product - no less needed
3406
- min-height: rem(380);
3407
-
3408
- .ql-editor {
3409
- padding: rem(5) 0;
3410
- margin-bottom: 30px;
3411
- }
3412
-
3413
- &__selected {
3414
- padding: rem(30);
3470
+ //minimum search sized for product - no less needed
3471
+ min-height: rem(380);
3415
3472
 
3416
- img {
3417
- display: block;
3418
- padding-right: rem(20);
3419
- margin-bottom: rem(30);
3473
+ .ql-editor {
3474
+ padding: rem(5) 0;
3475
+ margin-bottom: 30px;
3420
3476
  }
3421
3477
 
3422
- .columns {
3423
- .column:last-child {
3424
- > h3 {
3425
- color: $wb-main-text-color;
3426
- font-size: rem(30);
3427
- font-weight: 600;
3428
- line-height: 30px;
3429
- margin-bottom: 30px;
3478
+ &__selected {
3479
+ padding: rem(30);
3480
+
3481
+ img {
3482
+ display: block;
3483
+ padding-right: rem(20);
3484
+ margin-bottom: rem(30);
3430
3485
  }
3431
3486
 
3432
- > p {
3433
- margin: rem(30) 0;
3434
- font-weight: 600;
3487
+ .columns {
3488
+ .column:last-child {
3489
+ > h3 {
3490
+ color: $wb-main-text-color;
3491
+ font-size: rem(30);
3492
+ font-weight: 600;
3493
+ line-height: 30px;
3494
+ margin-bottom: 30px;
3495
+ }
3435
3496
 
3436
- &.is-variant {
3437
- margin: 0;
3438
- padding: rem(20) rem(20);
3439
- font-weight: 400;
3440
- background-color: lighten($wb-border-color, 10%);
3441
- border-radius: rem(3);
3442
- position: relative;
3443
- user-select: none;
3444
- cursor: pointer;
3497
+ > p {
3498
+ margin: rem(30) 0;
3499
+ font-weight: 600;
3445
3500
 
3446
- &:before {
3447
- position: absolute;
3448
- content: '\f078';
3449
- right: rem(20);
3450
- top: 0;
3451
- bottom: 0;
3452
- font-family: 'Font Awesome 5 Pro';
3453
- color: $wb-main-text-color;
3454
- display: block;
3455
- margin: auto;
3456
- height: rem(20);
3457
- }
3458
- }
3459
- }
3501
+ &.is-variant {
3502
+ margin: 0;
3503
+ padding: rem(20) rem(20);
3504
+ font-weight: 400;
3505
+ background-color: lighten($wb-border-color, 10%);
3506
+ border-radius: rem(3);
3507
+ position: relative;
3508
+ user-select: none;
3509
+ cursor: pointer;
3460
3510
 
3461
- > a {
3462
- text-transform: uppercase;
3463
- color: $wb-white;
3464
- font-weight: 600;
3465
- padding: rem(15) rem(30);
3466
- background-color: $wb-button-color;
3467
- border-radius: rem(3);
3468
- cursor: pointer;
3469
- display: inline-block;
3511
+ &:before {
3512
+ position: absolute;
3513
+ content: '\f078';
3514
+ right: rem(20);
3515
+ top: 0;
3516
+ bottom: 0;
3517
+ font-family: 'Font Awesome 5 Pro';
3518
+ color: $wb-main-text-color;
3519
+ display: block;
3520
+ margin: auto;
3521
+ height: rem(20);
3522
+ }
3523
+ }
3524
+ }
3525
+
3526
+ > a {
3527
+ text-transform: uppercase;
3528
+ color: $wb-white;
3529
+ font-weight: 600;
3530
+ padding: rem(15) rem(30);
3531
+ background-color: $wb-button-color;
3532
+ border-radius: rem(3);
3533
+ cursor: pointer;
3534
+ display: inline-block;
3535
+ }
3536
+ }
3470
3537
  }
3471
- }
3472
3538
  }
3473
- }
3474
3539
 
3475
- &__product-config {
3476
- width: 100%;
3477
- overflow: hidden;
3478
- height: 100%;
3479
- position: absolute;
3480
- z-index: 35;
3481
- pointer-events: none;
3482
- }
3540
+ &__product-config {
3541
+ width: 100%;
3542
+ overflow: hidden;
3543
+ height: 100%;
3544
+ position: absolute;
3545
+ z-index: 35;
3546
+ pointer-events: none;
3547
+ }
3483
3548
 
3484
- &__noproduct {
3485
- min-height: rem(380);
3486
- height: 100%;
3487
- padding: 0 rem(50);
3488
- display: flex;
3489
- align-content: center;
3490
- align-items: center;
3491
- width: 100%;
3549
+ &__noproduct {
3550
+ min-height: rem(380);
3551
+ height: 100%;
3552
+ padding: 0 rem(50);
3553
+ display: flex;
3554
+ align-content: center;
3555
+ align-items: center;
3556
+ width: 100%;
3557
+ background-color: rgba(0, 0, 0, 0.45);
3492
3558
 
3493
- wb-structure-search-product {
3494
- width: 100%;
3559
+ wb-structure-search-product {
3560
+ width: 100%;
3561
+ display: flex;
3562
+ justify-content: center;
3563
+ }
3495
3564
  }
3496
- }
3497
3565
  }
3498
3566
  .wb-loader {
3499
3567
  height: rem(76);
@@ -3548,123 +3616,126 @@ wb-loader {
3548
3616
  }
3549
3617
  }
3550
3618
  .wb-product-zoom-complete {
3551
- //minimum search sized for product - no less needed
3552
- min-height: rem(380);
3619
+ //minimum search sized for product - no less needed
3620
+ min-height: rem(380);
3553
3621
 
3554
- &__stock {
3555
- width: 100%;
3556
- background-color: $wb-stock-background;
3557
- color: $wb-stock-text;
3558
- font-weight: 600;
3559
- text-align: center;
3560
- border-radius: rem(3);
3561
- padding: rem(5);
3562
- margin-top: rem(5);
3622
+ &__stock {
3623
+ width: 100%;
3624
+ background-color: $wb-stock-background;
3625
+ color: $wb-stock-text;
3626
+ font-weight: 600;
3627
+ text-align: center;
3628
+ border-radius: rem(3);
3629
+ padding: rem(5);
3630
+ margin-top: rem(5);
3563
3631
 
3564
- > div {
3565
- vertical-align: middle;
3632
+ > div {
3633
+ vertical-align: middle;
3566
3634
 
3567
- span {
3568
- margin-left: rem(10);
3569
- }
3635
+ span {
3636
+ margin-left: rem(10);
3637
+ }
3638
+ }
3570
3639
  }
3571
- }
3572
-
3573
- .ql-editor {
3574
- padding: rem(5) 0;
3575
- }
3576
-
3577
- &__selected {
3578
- padding: rem(30);
3579
- position: relative;
3580
- z-index: 34;
3581
3640
 
3582
- img {
3583
- display: block;
3584
- padding-right: rem(20);
3585
- margin-bottom: rem(30);
3641
+ .ql-editor {
3642
+ padding: rem(5) 0;
3586
3643
  }
3587
3644
 
3588
- .columns {
3589
- .column:last-child {
3590
- > h3 {
3591
- color: $wb-main-text-color;
3592
- font-size: rem(45);
3593
- font-weight: 600;
3594
- line-height: rem(45);
3595
- margin-bottom: 30px;
3596
- }
3597
-
3598
- > p {
3599
- margin: rem(30) 0;
3600
- font-weight: 500;
3601
- font-size: rem(35);
3602
-
3603
- &.is-variant {
3604
- margin: 0 0 rem(30);
3605
- padding: rem(20) rem(20);
3606
- font-weight: 400;
3607
- background-color: lighten($wb-border-color, 10%);
3608
- border-radius: rem(3);
3609
- position: relative;
3610
- user-select: none;
3611
- cursor: pointer;
3612
- font-size: rem(16);
3613
-
3614
- &:before {
3615
- position: absolute;
3616
- content: '\f078';
3617
- right: rem(20);
3618
- top: 0;
3619
- bottom: 0;
3620
- font-family: 'Font Awesome 5 Pro';
3621
- color: $wb-main-text-color;
3622
- display: block;
3623
- margin: auto;
3624
- height: rem(20);
3625
- }
3626
- }
3627
- }
3645
+ &__selected {
3646
+ padding: rem(30);
3647
+ position: relative;
3648
+ z-index: 34;
3628
3649
 
3629
- > a {
3630
- text-transform: uppercase;
3631
- color: $wb-white;
3632
- font-weight: 600;
3633
- padding: rem(15) rem(30);
3634
- background-color: $wb-button-color;
3635
- border-radius: rem(3);
3636
- cursor: pointer;
3637
- display: inline-block;
3638
- width: 100%;
3639
- text-align: center;
3640
- margin-bottom: rem(20);
3650
+ img {
3651
+ display: block;
3652
+ padding-right: rem(20);
3653
+ margin-bottom: rem(30);
3641
3654
  }
3642
- }
3643
- }
3644
- }
3645
3655
 
3646
- &__product-config {
3647
- width: 100%;
3648
- overflow: hidden;
3649
- height: 100%;
3650
- position: absolute;
3651
- z-index: 35;
3652
- pointer-events: none;
3653
- }
3656
+ .columns {
3657
+ .column:last-child {
3658
+ > h3 {
3659
+ color: $wb-main-text-color;
3660
+ font-size: rem(45);
3661
+ font-weight: 600;
3662
+ line-height: rem(45);
3663
+ margin-bottom: 30px;
3664
+ }
3654
3665
 
3655
- &__noproduct {
3656
- min-height: rem(380);
3657
- height: 100%;
3658
- padding: 0 rem(50);
3659
- display: flex;
3660
- align-content: center;
3661
- align-items: center;
3662
- width: 100%;
3666
+ > p {
3667
+ margin: rem(30) 0;
3668
+ font-weight: 500;
3669
+ font-size: rem(35);
3663
3670
 
3664
- wb-structure-search-product {
3665
- width: 100%;
3671
+ &.is-variant {
3672
+ margin: 0 0 rem(30);
3673
+ padding: rem(20) rem(20);
3674
+ font-weight: 400;
3675
+ background-color: lighten($wb-border-color, 10%);
3676
+ border-radius: rem(3);
3677
+ position: relative;
3678
+ user-select: none;
3679
+ cursor: pointer;
3680
+ font-size: rem(16);
3681
+
3682
+ &:before {
3683
+ position: absolute;
3684
+ content: '\f078';
3685
+ right: rem(20);
3686
+ top: 0;
3687
+ bottom: 0;
3688
+ font-family: 'Font Awesome 5 Pro';
3689
+ color: $wb-main-text-color;
3690
+ display: block;
3691
+ margin: auto;
3692
+ height: rem(20);
3693
+ }
3694
+ }
3695
+ }
3696
+
3697
+ > a {
3698
+ text-transform: uppercase;
3699
+ color: $wb-white;
3700
+ font-weight: 600;
3701
+ padding: rem(15) rem(30);
3702
+ background-color: $wb-button-color;
3703
+ border-radius: rem(3);
3704
+ cursor: pointer;
3705
+ display: inline-block;
3706
+ width: 100%;
3707
+ text-align: center;
3708
+ margin-bottom: rem(20);
3709
+ }
3710
+ }
3711
+ }
3712
+ }
3713
+
3714
+ &__product-config {
3715
+ width: 100%;
3716
+ overflow: hidden;
3717
+ height: 100%;
3718
+ position: absolute;
3719
+ z-index: 35;
3720
+ pointer-events: none;
3721
+ }
3722
+
3723
+ &__noproduct {
3724
+ min-height: rem(380);
3725
+ height: 100%;
3726
+ padding: 0 rem(50);
3727
+ display: flex;
3728
+ align-content: center;
3729
+ align-items: center;
3730
+ width: 100%;
3731
+ background-color: rgba(0, 0, 0, 0.45);
3732
+
3733
+ wb-structure-search-product {
3734
+ width: 100%;
3735
+ display: flex;
3736
+ justify-content: center;
3737
+ }
3666
3738
  }
3667
- }
3668
3739
  }
3669
3740
  .wb-small-loader {
3670
3741
  display: block;
@@ -3723,274 +3794,279 @@ wb-loader {
3723
3794
  }
3724
3795
  }
3725
3796
  .wb-product-zoom-complete-background {
3726
- //minimum search sized for product - no less needed
3727
- min-height: rem(380);
3728
-
3729
- &__stock {
3797
+ //minimum search sized for product - no less needed
3798
+ min-height: rem(380);
3799
+ position: relative;
3730
3800
  width: 100%;
3731
- background-color: $wb-stock-background;
3732
- color: $wb-stock-text;
3733
- font-weight: 600;
3734
- text-align: center;
3735
- border-radius: rem(3);
3736
- padding: rem(5);
3737
- margin-top: rem(5);
3738
-
3739
- > div {
3740
- vertical-align: middle;
3741
3801
 
3742
- span {
3743
- margin-left: rem(10);
3744
- }
3745
- }
3746
- }
3802
+ &__stock {
3803
+ width: 100%;
3804
+ background-color: $wb-stock-background;
3805
+ color: $wb-stock-text;
3806
+ font-weight: 600;
3807
+ text-align: center;
3808
+ border-radius: rem(3);
3809
+ padding: rem(5);
3810
+ margin-top: rem(5);
3747
3811
 
3748
- .ql-editor {
3749
- padding: rem(5) 0;
3750
- }
3812
+ > div {
3813
+ vertical-align: middle;
3751
3814
 
3752
- &__upper {
3753
- z-index: 2;
3754
- position: relative;
3755
- }
3815
+ span {
3816
+ margin-left: rem(10);
3817
+ }
3818
+ }
3819
+ }
3756
3820
 
3757
- &__selected {
3758
- padding: rem(30);
3759
- background-size: cover;
3760
- position: relative;
3761
- z-index: 34;
3821
+ .ql-editor {
3822
+ padding: rem(5) 0;
3823
+ }
3762
3824
 
3763
- img {
3764
- display: block;
3765
- padding-right: rem(20);
3766
- margin-bottom: rem(30);
3825
+ &__upper {
3826
+ z-index: 2;
3827
+ position: relative;
3767
3828
  }
3768
3829
 
3769
- .columns {
3770
- width: 70%;
3771
- margin: 0 auto;
3830
+ &__selected {
3831
+ padding: rem(30);
3832
+ background-size: cover;
3833
+ position: relative;
3834
+ z-index: 34;
3772
3835
 
3773
- .column:last-child {
3774
- > h3 {
3775
- color: $wb-main-text-color;
3776
- font-size: rem(45);
3777
- font-weight: 600;
3778
- line-height: rem(45);
3779
- margin-bottom: 30px;
3780
- text-align: center;
3781
- pointer-events: none;
3782
- z-index: 0;
3783
- position: relative;
3836
+ img {
3837
+ display: block;
3838
+ padding-right: rem(20);
3839
+ margin-bottom: rem(30);
3784
3840
  }
3785
3841
 
3786
- > p {
3787
- margin: rem(30) 0;
3788
- font-weight: 500;
3789
- font-size: rem(35);
3790
- text-align: center;
3791
- pointer-events: none;
3792
- z-index: 0;
3793
- position: relative;
3842
+ .columns {
3843
+ width: 70%;
3844
+ margin: 0 auto;
3794
3845
 
3795
- &.is-variant {
3796
- width: 40%;
3797
- margin: 0 auto rem(30);
3798
- padding: rem(20) rem(20);
3799
- font-weight: 400;
3800
- background-color: lighten($wb-border-color, 10%);
3801
- border-radius: rem(3);
3802
- position: relative;
3803
- user-select: none;
3804
- cursor: pointer;
3805
- font-size: rem(16);
3846
+ .column:last-child {
3847
+ > h3 {
3848
+ color: $wb-main-text-color;
3849
+ font-size: rem(45);
3850
+ font-weight: 600;
3851
+ line-height: rem(45);
3852
+ margin-bottom: 30px;
3853
+ text-align: center;
3854
+ pointer-events: none;
3855
+ z-index: 0;
3856
+ position: relative;
3857
+ }
3806
3858
 
3807
- &:before {
3808
- position: absolute;
3809
- content: '\f078';
3810
- right: rem(20);
3811
- top: 0;
3812
- bottom: 0;
3813
- font-family: 'Font Awesome 5 Pro';
3814
- color: $wb-main-text-color;
3815
- display: block;
3816
- margin: auto;
3817
- height: rem(20);
3818
- }
3819
- }
3820
- }
3859
+ > p {
3860
+ margin: rem(30) 0;
3861
+ font-weight: 500;
3862
+ font-size: rem(35);
3863
+ text-align: center;
3864
+ pointer-events: none;
3865
+ z-index: 0;
3866
+ position: relative;
3821
3867
 
3822
- > a {
3823
- text-transform: uppercase;
3824
- color: $wb-white;
3825
- font-weight: 600;
3826
- padding: rem(15) rem(30);
3827
- background-color: $wb-button-color;
3828
- border-radius: rem(3);
3829
- cursor: pointer;
3830
- display: block;
3831
- width: rem(260);
3832
- text-align: center;
3833
- margin: auto;
3834
- margin-bottom: rem(20);
3835
- pointer-events: none;
3836
- z-index: 0;
3837
- position: relative;
3838
- }
3839
- }
3840
- }
3841
- }
3868
+ &.is-variant {
3869
+ width: 40%;
3870
+ margin: 0 auto rem(30);
3871
+ padding: rem(20) rem(20);
3872
+ font-weight: 400;
3873
+ background-color: lighten($wb-border-color, 10%);
3874
+ border-radius: rem(3);
3875
+ position: relative;
3876
+ user-select: none;
3877
+ cursor: pointer;
3878
+ font-size: rem(16);
3842
3879
 
3843
- &__product-config {
3844
- width: 100%;
3845
- overflow: hidden;
3846
- height: 100%;
3847
- position: absolute;
3848
- z-index: 35;
3849
- pointer-events: none;
3850
- }
3880
+ &:before {
3881
+ position: absolute;
3882
+ content: '\f078';
3883
+ right: rem(20);
3884
+ top: 0;
3885
+ bottom: 0;
3886
+ font-family: 'Font Awesome 5 Pro';
3887
+ color: $wb-main-text-color;
3888
+ display: block;
3889
+ margin: auto;
3890
+ height: rem(20);
3891
+ }
3892
+ }
3893
+ }
3851
3894
 
3852
- &__noproduct {
3853
- min-height: rem(380);
3854
- height: 100%;
3855
- padding: 0 rem(50);
3856
- display: flex;
3857
- align-content: center;
3858
- align-items: center;
3859
- width: 100%;
3895
+ > a {
3896
+ text-transform: uppercase;
3897
+ color: $wb-white;
3898
+ font-weight: 600;
3899
+ padding: rem(15) rem(30);
3900
+ background-color: $wb-button-color;
3901
+ border-radius: rem(3);
3902
+ cursor: pointer;
3903
+ display: block;
3904
+ width: rem(260);
3905
+ text-align: center;
3906
+ margin: auto;
3907
+ margin-bottom: rem(20);
3908
+ pointer-events: none;
3909
+ z-index: 0;
3910
+ position: relative;
3911
+ }
3912
+ }
3913
+ }
3914
+ }
3860
3915
 
3861
- wb-structure-search-product {
3862
- width: 100%;
3916
+ &__product-config {
3917
+ width: 100%;
3918
+ overflow: hidden;
3919
+ height: 100%;
3920
+ position: absolute;
3921
+ z-index: 35;
3922
+ pointer-events: none;
3863
3923
  }
3864
- }
3865
3924
 
3866
- &__media {
3867
- position: absolute;
3868
- z-index: 1;
3869
- width: 100%;
3870
- height: 100%;
3871
- cursor: pointer;
3872
- left: 0;
3873
- top: 0;
3925
+ &__noproduct {
3926
+ min-height: rem(380);
3927
+ height: 100%;
3928
+ padding: 0 rem(50);
3929
+ display: flex;
3930
+ align-content: center;
3931
+ align-items: center;
3932
+ width: 100%;
3933
+ background-color: rgba(0, 0, 0, 0.45);
3874
3934
 
3875
- &:after {
3876
- content: '\f03e';
3877
- font-family: 'Font Awesome 5 Pro';
3878
- display: block;
3879
- @include simple_transition();
3880
- position: absolute;
3881
- z-index: 38;
3882
- font-size: rem(70);
3883
- top: -#{rem(50)};
3884
- opacity: 0;
3885
- left: 0;
3886
- right: 0;
3887
- bottom: 0;
3888
- margin: auto;
3889
- width: rem(70);
3890
- height: rem(90);
3891
- color: $wb-white;
3892
- pointer-events: none;
3935
+ wb-structure-search-product {
3936
+ width: 100%;
3937
+ display: flex;
3938
+ justify-content: center;
3939
+ }
3893
3940
  }
3894
3941
 
3895
- &:hover {
3896
- &:after {
3897
- top: -#{rem(25)};
3898
- opacity: 0.3;
3899
- }
3900
- }
3901
- }
3942
+ &__media {
3943
+ position: absolute;
3944
+ z-index: 1;
3945
+ width: 100%;
3946
+ height: 100%;
3947
+ cursor: pointer;
3948
+ left: 0;
3949
+ top: 0;
3902
3950
 
3903
- &__noimages {
3904
- background-color: lighten($wb-border-color, 12%);
3905
- cursor: pointer;
3906
- height: 100%;
3907
- display: flex;
3908
- align-items: center;
3909
- align-content: center;
3910
- justify-content: center;
3911
- position: absolute;
3912
- width: 100%;
3913
- top: 0;
3951
+ &:after {
3952
+ content: '\f03e';
3953
+ font-family: 'Font Awesome 5 Pro';
3954
+ display: block;
3955
+ @include simple_transition();
3956
+ position: absolute;
3957
+ z-index: 38;
3958
+ font-size: rem(70);
3959
+ top: -#{rem(50)};
3960
+ opacity: 0;
3961
+ left: 0;
3962
+ right: 0;
3963
+ bottom: 0;
3964
+ margin: auto;
3965
+ width: rem(70);
3966
+ height: rem(90);
3967
+ color: $wb-white;
3968
+ pointer-events: none;
3969
+ }
3914
3970
 
3915
- &:before {
3916
- content: '';
3917
- display: block;
3918
- width: 100%;
3919
- position: relative;
3920
- padding-top: 31%;
3921
- transition: padding 300ms ease;
3971
+ &:hover {
3972
+ &:after {
3973
+ top: -#{rem(25)};
3974
+ opacity: 0.3;
3975
+ }
3976
+ }
3922
3977
  }
3923
3978
 
3924
- &--small {
3925
- &:before {
3926
- padding-top: 27.5%;
3927
- }
3928
- }
3979
+ &__noimages {
3980
+ background-color: lighten($wb-border-color, 12%);
3981
+ cursor: pointer;
3982
+ height: 100%;
3983
+ display: flex;
3984
+ align-items: center;
3985
+ align-content: center;
3986
+ justify-content: center;
3987
+ position: absolute;
3988
+ width: 100%;
3989
+ top: 0;
3929
3990
 
3930
- &--medium {
3931
- &:before {
3932
- padding-top: 33%;
3933
- }
3934
- }
3991
+ &:before {
3992
+ content: '';
3993
+ display: block;
3994
+ width: 100%;
3995
+ position: relative;
3996
+ padding-top: 31%;
3997
+ transition: padding 300ms ease;
3998
+ }
3935
3999
 
3936
- &--large {
3937
- &:before {
3938
- padding-top: 38.47%;
3939
- }
3940
- }
4000
+ &--small {
4001
+ &:before {
4002
+ padding-top: 27.5%;
4003
+ }
4004
+ }
3941
4005
 
3942
- p {
3943
- position: absolute;
3944
- top: 50%;
3945
- left: 50%;
3946
- transform: translate(-50%, -50%);
3947
- text-align: center;
3948
- font-size: rem(14);
3949
- color: $wb-secondary-text-color;
3950
- width: auto;
3951
- white-space: nowrap;
4006
+ &--medium {
4007
+ &:before {
4008
+ padding-top: 33%;
4009
+ }
4010
+ }
3952
4011
 
3953
- &:before {
3954
- position: absolute;
3955
- width: 0;
3956
- bottom: -(#{rem(3)});
3957
- height: rem(2);
3958
- transition: 200ms all;
3959
- background-color: $wb-border-color;
3960
- content: ' ';
3961
- left: 0;
3962
- }
3963
- }
4012
+ &--large {
4013
+ &:before {
4014
+ padding-top: 38.47%;
4015
+ }
4016
+ }
3964
4017
 
3965
- i {
3966
- color: $wb-secondary-text-color;
3967
- text-align: center;
3968
- display: block;
3969
- font-size: rem(45);
3970
- opacity: 0.4;
3971
- transition: 200ms all;
3972
- margin-bottom: rem(10);
3973
- }
4018
+ p {
4019
+ position: absolute;
4020
+ top: 50%;
4021
+ left: 50%;
4022
+ transform: translate(-50%, -50%);
4023
+ text-align: center;
4024
+ font-size: rem(14);
4025
+ color: $wb-secondary-text-color;
4026
+ width: auto;
4027
+ white-space: nowrap;
3974
4028
 
3975
- border: rem(1) solid lighten($wb-border-color, 12%);
3976
- transition: 200ms all;
4029
+ &:before {
4030
+ position: absolute;
4031
+ width: 0;
4032
+ bottom: -(#{rem(3)});
4033
+ height: rem(2);
4034
+ transition: 200ms all;
4035
+ background-color: $wb-border-color;
4036
+ content: ' ';
4037
+ left: 0;
4038
+ }
4039
+ }
3977
4040
 
3978
- &:hover {
3979
- border: rem(1) solid $wb-border-color;
4041
+ i {
4042
+ color: $wb-secondary-text-color;
4043
+ text-align: center;
4044
+ display: block;
4045
+ font-size: rem(45);
4046
+ opacity: 0.4;
4047
+ transition: 200ms all;
4048
+ margin-bottom: rem(10);
4049
+ }
3980
4050
 
3981
- i {
3982
- color: darken($wb-secondary-text-color, 20%);
3983
- }
4051
+ border: rem(1) solid lighten($wb-border-color, 12%);
4052
+ transition: 200ms all;
3984
4053
 
3985
- p {
3986
- color: darken($wb-secondary-text-color, 20%);
4054
+ &:hover {
4055
+ border: rem(1) solid $wb-border-color;
3987
4056
 
3988
- &:before {
3989
- width: 100%;
4057
+ i {
4058
+ color: darken($wb-secondary-text-color, 20%);
4059
+ }
4060
+
4061
+ p {
4062
+ color: darken($wb-secondary-text-color, 20%);
4063
+
4064
+ &:before {
4065
+ width: 100%;
4066
+ }
4067
+ }
3990
4068
  }
3991
- }
3992
4069
  }
3993
- }
3994
4070
  }
3995
4071
  .wb-structure-amplify-search-category {
3996
4072
  .columns {
@@ -4143,191 +4219,194 @@ wb-loader {
4143
4219
  }
4144
4220
  }
4145
4221
  .wb-product-zoom-complete-slider {
4146
- //minimum search sized for product - no less needed
4147
- min-height: rem(380);
4222
+ //minimum search sized for product - no less needed
4223
+ min-height: rem(380);
4148
4224
 
4149
- &__stock {
4150
- width: 100%;
4151
- background-color: $wb-stock-background;
4152
- color: $wb-stock-text;
4153
- font-weight: 600;
4154
- text-align: center;
4155
- border-radius: rem(3);
4156
- padding: rem(5);
4157
- margin-top: rem(5);
4225
+ &__stock {
4226
+ width: 100%;
4227
+ background-color: $wb-stock-background;
4228
+ color: $wb-stock-text;
4229
+ font-weight: 600;
4230
+ text-align: center;
4231
+ border-radius: rem(3);
4232
+ padding: rem(5);
4233
+ margin-top: rem(5);
4158
4234
 
4159
- > div {
4160
- vertical-align: middle;
4235
+ > div {
4236
+ vertical-align: middle;
4161
4237
 
4162
- span {
4163
- margin-left: rem(10);
4164
- }
4238
+ span {
4239
+ margin-left: rem(10);
4240
+ }
4241
+ }
4165
4242
  }
4166
- }
4167
4243
 
4168
- .ql-editor {
4169
- padding: rem(5) 0;
4170
- }
4244
+ .ql-editor {
4245
+ padding: rem(5) 0;
4246
+ }
4171
4247
 
4172
- &__selected {
4173
- padding: rem(30);
4174
- position: relative;
4175
- z-index: 34;
4248
+ &__selected {
4249
+ padding: rem(30);
4250
+ position: relative;
4251
+ z-index: 34;
4176
4252
 
4177
- &__container-image {
4178
- text-align: center;
4179
- position: relative;
4253
+ &__container-image {
4254
+ text-align: center;
4255
+ position: relative;
4180
4256
 
4181
- img {
4182
- margin-bottom: rem(30);
4183
- width: rem(500);
4184
- position: relative;
4185
- z-index: 1;
4186
- opacity: 0;
4187
- left: -#{rem(50)};
4188
- @include simple_transition();
4257
+ img {
4258
+ margin-bottom: rem(30);
4259
+ width: rem(500);
4260
+ position: relative;
4261
+ z-index: 1;
4262
+ opacity: 0;
4263
+ left: -#{rem(50)};
4264
+ @include simple_transition();
4189
4265
 
4190
- &.is-active {
4191
- z-index: 2;
4192
- opacity: 1;
4193
- left: 0;
4266
+ &.is-active {
4267
+ z-index: 2;
4268
+ opacity: 1;
4269
+ left: 0;
4270
+ }
4271
+
4272
+ &:not(:first-child) {
4273
+ position: absolute;
4274
+ right: 0;
4275
+ margin: auto;
4276
+ }
4277
+ }
4194
4278
  }
4195
4279
 
4196
- &:not(:first-child) {
4197
- position: absolute;
4198
- right: 0;
4199
- margin: auto;
4200
- }
4201
- }
4202
- }
4280
+ &__container-selector {
4281
+ position: absolute;
4282
+ text-align: center;
4283
+ z-index: 10;
4284
+ left: 0;
4285
+ right: 0;
4286
+ margin: auto;
4203
4287
 
4204
- &__container-selector {
4205
- position: absolute;
4206
- text-align: center;
4207
- z-index: 10;
4208
- left: 0;
4209
- right: 0;
4210
- margin: auto;
4288
+ bottom: 50px;
4211
4289
 
4212
- bottom: 50px;
4290
+ span {
4291
+ width: rem(15);
4292
+ height: rem(15);
4293
+ background-color: $wb-border-color;
4294
+ opacity: 0.8;
4295
+ display: inline-block;
4296
+ border-radius: 50%;
4297
+ cursor: pointer;
4298
+ margin-right: rem(7);
4299
+ @include simple_transition();
4213
4300
 
4214
- span {
4215
- width: rem(15);
4216
- height: rem(15);
4217
- background-color: $wb-border-color;
4218
- opacity: 0.8;
4219
- display: inline-block;
4220
- border-radius: 50%;
4221
- cursor: pointer;
4222
- margin-right: rem(7);
4223
- @include simple_transition();
4301
+ &:last-child {
4302
+ margin-right: 0;
4303
+ }
4224
4304
 
4225
- &:last-child {
4226
- margin-right: 0;
4305
+ &.is-active,
4306
+ &:hover {
4307
+ opacity: 0.8;
4308
+ background-color: $wb-button-color;
4309
+ }
4310
+ }
4227
4311
  }
4228
4312
 
4229
- &.is-active,
4230
- &:hover {
4231
- opacity: 0.8;
4232
- background-color: $wb-button-color;
4233
- }
4234
- }
4235
- }
4313
+ .columns {
4314
+ > .column:first-child {
4315
+ margin-right: 20px;
4236
4316
 
4237
- .columns {
4238
- > .column:first-child {
4239
- margin-right: 20px;
4317
+ > h3 {
4318
+ color: $wb-main-text-color;
4319
+ font-size: rem(45);
4320
+ font-weight: 600;
4321
+ line-height: rem(45);
4322
+ margin-bottom: 30px;
4323
+ }
4240
4324
 
4241
- > h3 {
4242
- color: $wb-main-text-color;
4243
- font-size: rem(45);
4244
- font-weight: 600;
4245
- line-height: rem(45);
4246
- margin-bottom: 30px;
4247
- }
4325
+ > p {
4326
+ margin: rem(30) 0;
4327
+ font-weight: 500;
4328
+ font-size: rem(35);
4248
4329
 
4249
- > p {
4250
- margin: rem(30) 0;
4251
- font-weight: 500;
4252
- font-size: rem(35);
4330
+ &.is-variant {
4331
+ margin: 0 0 rem(30);
4332
+ padding: rem(20) rem(20);
4333
+ font-weight: 400;
4334
+ background-color: lighten($wb-border-color, 10%);
4335
+ border-radius: rem(3);
4336
+ position: relative;
4337
+ user-select: none;
4338
+ cursor: pointer;
4339
+ font-size: rem(16);
4253
4340
 
4254
- &.is-variant {
4255
- margin: 0 0 rem(30);
4256
- padding: rem(20) rem(20);
4257
- font-weight: 400;
4258
- background-color: lighten($wb-border-color, 10%);
4259
- border-radius: rem(3);
4260
- position: relative;
4261
- user-select: none;
4262
- cursor: pointer;
4263
- font-size: rem(16);
4341
+ &:before {
4342
+ position: absolute;
4343
+ content: '\f078';
4344
+ right: rem(20);
4345
+ top: 0;
4346
+ bottom: 0;
4347
+ font-family: 'Font Awesome 5 Pro';
4348
+ color: $wb-main-text-color;
4349
+ display: block;
4350
+ margin: auto;
4351
+ height: rem(20);
4352
+ }
4353
+ }
4354
+ }
4264
4355
 
4265
- &:before {
4266
- position: absolute;
4267
- content: '\f078';
4268
- right: rem(20);
4269
- top: 0;
4270
- bottom: 0;
4271
- font-family: 'Font Awesome 5 Pro';
4272
- color: $wb-main-text-color;
4273
- display: block;
4274
- margin: auto;
4275
- height: rem(20);
4356
+ > a {
4357
+ display: flex;
4358
+ text-transform: uppercase;
4359
+ color: $wb-white;
4360
+ font-weight: 600;
4361
+ padding: rem(15) rem(30);
4362
+ background-color: $wb-button-color;
4363
+ border-radius: rem(3);
4364
+ cursor: pointer;
4365
+ width: 100%;
4366
+ margin-bottom: rem(20);
4367
+ text-align: center;
4368
+ justify-content: center;
4369
+ i {
4370
+ margin-right: 20px;
4371
+ transform: translateY(2px);
4372
+ }
4373
+ }
4276
4374
  }
4277
- }
4278
- }
4279
-
4280
- > a {
4281
- display: flex;
4282
- text-transform: uppercase;
4283
- color: $wb-white;
4284
- font-weight: 600;
4285
- padding: rem(15) rem(30);
4286
- background-color: $wb-button-color;
4287
- border-radius: rem(3);
4288
- cursor: pointer;
4289
- width: 100%;
4290
- margin-bottom: rem(20);
4291
- text-align: center;
4292
- justify-content: center;
4293
- i {
4294
- margin-right: 20px;
4295
- transform: translateY(2px);
4296
- }
4297
4375
  }
4298
- }
4299
4376
  }
4300
- }
4301
4377
 
4302
- &__product-config {
4303
- width: 100%;
4304
- overflow: hidden;
4305
- height: 100%;
4306
- position: absolute;
4307
- z-index: 35;
4308
- pointer-events: none;
4309
- }
4378
+ &__product-config {
4379
+ width: 100%;
4380
+ overflow: hidden;
4381
+ height: 100%;
4382
+ position: absolute;
4383
+ z-index: 35;
4384
+ pointer-events: none;
4385
+ }
4310
4386
 
4311
- &__noproduct {
4312
- min-height: rem(380);
4313
- height: 100%;
4314
- padding: 0 rem(50);
4315
- display: flex;
4316
- align-content: center;
4317
- align-items: center;
4318
- width: 100%;
4387
+ &__noproduct {
4388
+ min-height: rem(380);
4389
+ height: 100%;
4390
+ padding: 0 rem(50);
4391
+ display: flex;
4392
+ align-content: center;
4393
+ align-items: center;
4394
+ width: 100%;
4395
+ background-color: rgba(0, 0, 0, 0.45);
4319
4396
 
4320
- wb-structure-search-product {
4321
- width: 100%;
4397
+ wb-structure-search-product {
4398
+ width: 100%;
4399
+ display: flex;
4400
+ justify-content: center;
4401
+ }
4322
4402
  }
4323
- }
4324
4403
 
4325
- .is-bottom-content {
4326
- margin-top: 10px;
4327
- strong {
4328
- font-size: rem(20);
4404
+ .is-bottom-content {
4405
+ margin-top: 10px;
4406
+ strong {
4407
+ font-size: rem(20);
4408
+ }
4329
4409
  }
4330
- }
4331
4410
  }
4332
4411
  .wb-container {
4333
4412
  .ql-container.ql-bubble:not(.ql-disabled) a::after,
@@ -4528,7 +4607,7 @@ wb-loader {
4528
4607
  .button {
4529
4608
  padding: rem(8) rem(8);
4530
4609
  border: rem(1) solid transparent;
4531
- background-color: $wizishop-blue-light;
4610
+ background-color: $wb-wizishop-blue-light;
4532
4611
  height: auto;
4533
4612
 
4534
4613
  &:hover {
@@ -4778,7 +4857,7 @@ wb-loader {
4778
4857
  }
4779
4858
 
4780
4859
  &__content {
4781
- padding: rem(30) 0 0;
4860
+ padding: rem(60) 0 rem(30);
4782
4861
 
4783
4862
  @include media('<=1510px') {
4784
4863
  padding: rem(30) rem(30) 0;
@@ -4834,147 +4913,151 @@ html .ql-bubble {
4834
4913
 
4835
4914
  wb-editorjs {
4836
4915
  display: block;
4916
+ width: 100%;
4837
4917
  }
4838
4918
  .wb-product-zoom-more {
4839
- //minimum search sized for product - no less needed
4840
- min-height: rem(380);
4841
-
4842
- .ql-editor {
4843
- padding: rem(5) 0;
4844
- }
4845
-
4846
- &__selected {
4847
- padding: rem(30);
4848
- position: relative;
4849
- z-index: 34;
4850
-
4851
- &__container-selector {
4852
- position: absolute;
4853
- text-align: center;
4854
- z-index: 10;
4855
- left: 0;
4856
- right: 0;
4857
- margin: auto;
4858
-
4859
- bottom: 50px;
4860
-
4861
- span {
4862
- width: rem(15);
4863
- height: rem(15);
4864
- background-color: $wb-border-color;
4865
- opacity: 0.8;
4866
- display: inline-block;
4867
- border-radius: 50%;
4868
- cursor: pointer;
4869
- margin-right: rem(7);
4870
- @include simple_transition();
4871
-
4872
- &:last-child {
4873
- margin-right: 0;
4874
- }
4919
+ //minimum search sized for product - no less needed
4920
+ min-height: rem(380);
4875
4921
 
4876
- &.is-active,
4877
- &:hover {
4878
- opacity: 0.8;
4879
- background-color: $wb-button-color;
4880
- }
4881
- }
4922
+ .ql-editor {
4923
+ padding: rem(5) 0;
4882
4924
  }
4883
- &__container-image {
4884
- position: relative;
4885
4925
 
4886
- img {
4887
- margin-bottom: rem(30);
4888
- width: 100%;
4926
+ &__selected {
4927
+ padding: rem(30);
4889
4928
  position: relative;
4890
- z-index: 1;
4891
- opacity: 1;
4892
- left: 0;
4893
- @include simple_transition();
4894
- margin-right: rem(30);
4929
+ z-index: 34;
4895
4930
 
4896
- &:last-child {
4897
- margin-right: rem(0);
4898
- }
4899
- }
4900
- }
4931
+ &__container-selector {
4932
+ position: absolute;
4933
+ text-align: center;
4934
+ z-index: 10;
4935
+ left: 0;
4936
+ right: 0;
4937
+ margin: auto;
4901
4938
 
4902
- &__container-other {
4903
- .column {
4904
- > h3 {
4905
- color: $wb-main-text-color;
4906
- font-size: rem(30);
4907
- font-weight: 600;
4908
- line-height: 30px;
4909
- margin-bottom: 25px;
4910
- }
4939
+ bottom: 50px;
4911
4940
 
4912
- > p {
4913
- margin: rem(10) 0 rem(30);
4914
- font-weight: 600;
4941
+ span {
4942
+ width: rem(15);
4943
+ height: rem(15);
4944
+ background-color: $wb-border-color;
4945
+ opacity: 0.8;
4946
+ display: inline-block;
4947
+ border-radius: 50%;
4948
+ cursor: pointer;
4949
+ margin-right: rem(7);
4950
+ @include simple_transition();
4915
4951
 
4916
- &.is-variant {
4917
- margin: 0 0 rem(30);
4918
- padding: rem(20) rem(20);
4919
- font-weight: 400;
4920
- background-color: lighten($wb-border-color, 10%);
4921
- border-radius: rem(3);
4922
- position: relative;
4923
- user-select: none;
4924
- cursor: pointer;
4952
+ &:last-child {
4953
+ margin-right: 0;
4954
+ }
4925
4955
 
4926
- &:before {
4927
- position: absolute;
4928
- content: '\f078';
4929
- right: rem(20);
4930
- top: 0;
4931
- bottom: 0;
4932
- font-family: 'Font Awesome 5 Pro';
4933
- color: $wb-main-text-color;
4934
- display: block;
4935
- margin: auto;
4936
- height: rem(20);
4956
+ &.is-active,
4957
+ &:hover {
4958
+ opacity: 0.8;
4959
+ background-color: $wb-button-color;
4960
+ }
4937
4961
  }
4938
- }
4939
4962
  }
4963
+ &__container-image {
4964
+ position: relative;
4940
4965
 
4941
- > a {
4942
- text-transform: uppercase;
4943
- color: $wb-white;
4944
- font-weight: 600;
4945
- padding: rem(15) rem(30);
4946
- background-color: $wb-button-color;
4947
- border-radius: rem(3);
4948
- cursor: pointer;
4949
- display: inline-block;
4950
- float: right;
4951
- }
4952
- }
4953
- }
4954
- }
4966
+ img {
4967
+ margin-bottom: rem(30);
4968
+ width: 100%;
4969
+ position: relative;
4970
+ z-index: 1;
4971
+ opacity: 1;
4972
+ left: 0;
4973
+ @include simple_transition();
4974
+ margin-right: rem(30);
4955
4975
 
4956
- &__product-config {
4957
- width: 100%;
4958
- overflow: hidden;
4959
- height: 100%;
4960
- position: absolute;
4961
- z-index: 35;
4962
- pointer-events: none;
4963
- }
4976
+ &:last-child {
4977
+ margin-right: rem(0);
4978
+ }
4979
+ }
4980
+ }
4964
4981
 
4965
- &__noproduct {
4966
- min-height: rem(380);
4967
- height: 100%;
4968
- padding: 0 rem(50);
4969
- display: flex;
4970
- align-content: center;
4971
- align-items: center;
4972
- width: 100%;
4982
+ &__container-other {
4983
+ .column {
4984
+ > h3 {
4985
+ color: $wb-main-text-color;
4986
+ font-size: rem(30);
4987
+ font-weight: 600;
4988
+ line-height: 30px;
4989
+ margin-bottom: 25px;
4990
+ }
4973
4991
 
4974
- wb-structure-search-product {
4975
- width: 100%;
4992
+ > p {
4993
+ margin: rem(10) 0 rem(30);
4994
+ font-weight: 600;
4995
+
4996
+ &.is-variant {
4997
+ margin: 0 0 rem(30);
4998
+ padding: rem(20) rem(20);
4999
+ font-weight: 400;
5000
+ background-color: lighten($wb-border-color, 10%);
5001
+ border-radius: rem(3);
5002
+ position: relative;
5003
+ user-select: none;
5004
+ cursor: pointer;
5005
+
5006
+ &:before {
5007
+ position: absolute;
5008
+ content: '\f078';
5009
+ right: rem(20);
5010
+ top: 0;
5011
+ bottom: 0;
5012
+ font-family: 'Font Awesome 5 Pro';
5013
+ color: $wb-main-text-color;
5014
+ display: block;
5015
+ margin: auto;
5016
+ height: rem(20);
5017
+ }
5018
+ }
5019
+ }
5020
+
5021
+ > a {
5022
+ text-transform: uppercase;
5023
+ color: $wb-white;
5024
+ font-weight: 600;
5025
+ padding: rem(15) rem(30);
5026
+ background-color: $wb-button-color;
5027
+ border-radius: rem(3);
5028
+ cursor: pointer;
5029
+ display: inline-block;
5030
+ float: right;
5031
+ }
5032
+ }
5033
+ }
5034
+ }
5035
+
5036
+ &__product-config {
5037
+ width: 100%;
5038
+ overflow: hidden;
5039
+ height: 100%;
5040
+ position: absolute;
5041
+ z-index: 35;
5042
+ pointer-events: none;
5043
+ }
5044
+
5045
+ &__noproduct {
5046
+ min-height: rem(380);
5047
+ height: 100%;
5048
+ padding: 0 rem(50);
5049
+ display: flex;
5050
+ align-content: center;
5051
+ align-items: center;
5052
+ width: 100%;
5053
+ background-color: rgba(0, 0, 0, 0.45);
5054
+
5055
+ wb-structure-search-product {
5056
+ width: 100%;
5057
+ display: flex;
5058
+ justify-content: center;
5059
+ }
4976
5060
  }
4977
- }
4978
5061
  }
4979
5062
  .ce-paragraph {
4980
5063
  font-size: 14px;
@@ -4985,6 +5068,10 @@ wb-editorjs {
4985
5068
  min-height: 20px;
4986
5069
  }
4987
5070
 
5071
+ & > span {
5072
+ margin: 10px 0;
5073
+ }
5074
+
4988
5075
  h1 {
4989
5076
  font-size: 40px;
4990
5077
  font-weight: 600;
@@ -5324,13 +5411,11 @@ wb-editorjs {
5324
5411
  }
5325
5412
 
5326
5413
  p {
5414
+ font-size: 14px;
5415
+ line-height: 21px;
5327
5416
  color: inherit;
5328
5417
  margin: 12px 0;
5329
5418
 
5330
- &:empty {
5331
- min-height: 22.39px;
5332
- }
5333
-
5334
5419
  &:first-of-type,
5335
5420
  &:last-of-type {
5336
5421
  margin: 12px 0 !important;
@@ -5352,6 +5437,26 @@ wb-editorjs {
5352
5437
  }
5353
5438
  }
5354
5439
 
5440
+ li {
5441
+ font-size: 14px;
5442
+ line-height: 21px;
5443
+
5444
+ .we-size-small {
5445
+ font-size: 12px;
5446
+ line-height: 18px;
5447
+ }
5448
+
5449
+ .we-size-large {
5450
+ font-size: 19px;
5451
+ line-height: 29px;
5452
+ }
5453
+
5454
+ .we-size-huge {
5455
+ font-size: 28px;
5456
+ line-height: 42px;
5457
+ }
5458
+ }
5459
+
5355
5460
  span,
5356
5461
  li {
5357
5462
  color: inherit;
@@ -5609,20 +5714,24 @@ wb-editorjs {
5609
5714
  align-content: center;
5610
5715
  align-items: center;
5611
5716
  width: 100%;
5717
+ background-color: rgba(0, 0, 0, 0.45);
5612
5718
 
5613
5719
  wb-structure-search-product {
5614
5720
  width: 100%;
5721
+ display: flex;
5722
+ justify-content: center;
5615
5723
  }
5616
5724
  }
5617
5725
  }
5618
5726
  .wb-component {
5619
5727
  &__container {
5620
5728
  background-color: $wb-white;
5621
- border: rem(2) solid $wizishop-blue-light;
5729
+ border: rem(2) solid $wb-wizishop-blue-light;
5622
5730
  @include simple_transition();
5623
5731
  padding: rem(60) rem(12) rem(12);
5624
5732
  border-radius: 3px;
5625
5733
  position: relative;
5734
+ z-index: 1;
5626
5735
  }
5627
5736
 
5628
5737
  .wb-structure-tools {
@@ -5635,7 +5744,7 @@ wb-editorjs {
5635
5744
  position: absolute;
5636
5745
  top: 2px;
5637
5746
  left: 2px;
5638
- background-color: $wizishop-blue-light;
5747
+ background-color: $wb-wizishop-blue-light;
5639
5748
  }
5640
5749
 
5641
5750
  .wb-additionnal-tools {
@@ -5687,140 +5796,143 @@ wb-editorjs {
5687
5796
  }
5688
5797
  }
5689
5798
  .wb-product-zoom-simple {
5690
- //minimum search sized for product - no less needed
5691
- min-height: rem(230);
5799
+ //minimum search sized for product - no less needed
5800
+ min-height: rem(230);
5692
5801
 
5693
- &__stock {
5694
- width: 100%;
5695
- background-color: $wb-stock-background;
5696
- color: $wb-stock-text;
5697
- font-weight: 600;
5698
- text-align: center;
5699
- border-radius: rem(3);
5700
- padding: rem(5);
5701
- margin-top: rem(5);
5802
+ &__stock {
5803
+ width: 100%;
5804
+ background-color: $wb-stock-background;
5805
+ color: $wb-stock-text;
5806
+ font-weight: 600;
5807
+ text-align: center;
5808
+ border-radius: rem(3);
5809
+ padding: rem(5);
5810
+ margin-top: rem(5);
5702
5811
 
5703
- > div {
5704
- vertical-align: middle;
5812
+ > div {
5813
+ vertical-align: middle;
5705
5814
 
5706
- span {
5707
- margin-left: rem(10);
5708
- }
5815
+ span {
5816
+ margin-left: rem(10);
5817
+ }
5818
+ }
5709
5819
  }
5710
- }
5711
-
5712
- .ql-editor {
5713
- padding: rem(5) 0;
5714
- }
5715
5820
 
5716
- &__selected {
5717
- padding: rem(30);
5718
- position: relative;
5719
- z-index: 34;
5720
-
5721
- img {
5722
- display: block;
5723
- padding-right: rem(20);
5724
- margin-bottom: rem(30);
5821
+ .ql-editor {
5822
+ padding: rem(5) 0;
5725
5823
  }
5726
5824
 
5727
- .columns {
5728
- .column {
5729
- > h3 {
5730
- color: $wb-main-text-color;
5731
- font-size: rem(45);
5732
- font-weight: 600;
5733
- line-height: rem(45);
5734
- margin-bottom: 30px;
5825
+ &__selected {
5826
+ padding: rem(30);
5827
+ position: relative;
5828
+ z-index: 34;
5829
+
5830
+ img {
5831
+ display: block;
5832
+ padding-right: rem(20);
5833
+ margin-bottom: rem(30);
5735
5834
  }
5736
5835
 
5737
- > p {
5738
- margin: rem(30) 0;
5739
- font-weight: 500;
5740
- font-size: rem(35);
5836
+ .columns {
5837
+ .column {
5838
+ > h3 {
5839
+ color: $wb-main-text-color;
5840
+ font-size: rem(45);
5841
+ font-weight: 600;
5842
+ line-height: rem(45);
5843
+ margin-bottom: 30px;
5844
+ }
5741
5845
 
5742
- &.is-variant {
5743
- margin: 0 0 rem(30);
5744
- padding: rem(20) rem(20);
5745
- font-weight: 400;
5746
- background-color: lighten($wb-border-color, 10%);
5747
- border-radius: rem(3);
5748
- position: relative;
5749
- user-select: none;
5750
- cursor: pointer;
5751
- font-size: rem(16);
5846
+ > p {
5847
+ margin: rem(30) 0;
5848
+ font-weight: 500;
5849
+ font-size: rem(35);
5752
5850
 
5753
- &:before {
5754
- position: absolute;
5755
- content: '\f078';
5756
- right: rem(20);
5757
- top: 0;
5758
- bottom: 0;
5759
- font-family: 'Font Awesome 5 Pro';
5760
- color: $wb-main-text-color;
5761
- display: block;
5762
- margin: auto;
5763
- height: rem(20);
5764
- }
5765
- }
5766
- }
5851
+ &.is-variant {
5852
+ margin: 0 0 rem(30);
5853
+ padding: rem(20) rem(20);
5854
+ font-weight: 400;
5855
+ background-color: lighten($wb-border-color, 10%);
5856
+ border-radius: rem(3);
5857
+ position: relative;
5858
+ user-select: none;
5859
+ cursor: pointer;
5860
+ font-size: rem(16);
5767
5861
 
5768
- > a {
5769
- color: $wb-white;
5770
- font-weight: 500;
5771
- padding: rem(20) rem(30);
5772
- background-color: $wb-button-color;
5773
- border-radius: rem(3);
5774
- cursor: pointer;
5775
- width: 100%;
5776
- text-align: center;
5777
- margin-bottom: rem(20);
5778
- display: flex;
5779
- text-transform: uppercase;
5780
- font-size: rem(24);
5862
+ &:before {
5863
+ position: absolute;
5864
+ content: '\f078';
5865
+ right: rem(20);
5866
+ top: 0;
5867
+ bottom: 0;
5868
+ font-family: 'Font Awesome 5 Pro';
5869
+ color: $wb-main-text-color;
5870
+ display: block;
5871
+ margin: auto;
5872
+ height: rem(20);
5873
+ }
5874
+ }
5875
+ }
5781
5876
 
5782
- span {
5783
- flex: 1;
5784
- text-transform: uppercase;
5877
+ > a {
5878
+ color: $wb-white;
5879
+ font-weight: 500;
5880
+ padding: rem(20) rem(30);
5881
+ background-color: $wb-button-color;
5882
+ border-radius: rem(3);
5883
+ cursor: pointer;
5884
+ width: 100%;
5885
+ text-align: center;
5886
+ margin-bottom: rem(20);
5887
+ display: flex;
5888
+ text-transform: uppercase;
5889
+ font-size: rem(24);
5785
5890
 
5786
- &:first-child {
5787
- border-right: rem(1) solid $wb-white;
5788
- padding: 0 30px;
5789
- flex: 0;
5790
- }
5891
+ span {
5892
+ flex: 1;
5893
+ text-transform: uppercase;
5791
5894
 
5792
- &:last-child {
5793
- white-space: nowrap;
5794
- padding: 0 30px;
5895
+ &:first-child {
5896
+ border-right: rem(1) solid $wb-white;
5897
+ padding: 0 30px;
5898
+ flex: 0;
5899
+ }
5900
+
5901
+ &:last-child {
5902
+ white-space: nowrap;
5903
+ padding: 0 30px;
5904
+ }
5905
+ }
5906
+ }
5795
5907
  }
5796
- }
5797
5908
  }
5798
- }
5799
5909
  }
5800
- }
5801
5910
 
5802
- &__product-config {
5803
- width: 100%;
5804
- overflow: hidden;
5805
- height: 100%;
5806
- position: absolute;
5807
- z-index: 35;
5808
- pointer-events: none;
5809
- }
5911
+ &__product-config {
5912
+ width: 100%;
5913
+ overflow: hidden;
5914
+ height: 100%;
5915
+ position: absolute;
5916
+ z-index: 35;
5917
+ pointer-events: none;
5918
+ }
5810
5919
 
5811
- &__noproduct {
5812
- min-height: rem(380);
5813
- height: 100%;
5814
- padding: 0 rem(50);
5815
- display: flex;
5816
- align-content: center;
5817
- align-items: center;
5818
- width: 100%;
5920
+ &__noproduct {
5921
+ min-height: rem(380);
5922
+ height: 100%;
5923
+ padding: 0 rem(50);
5924
+ display: flex;
5925
+ align-content: center;
5926
+ align-items: center;
5927
+ width: 100%;
5928
+ background-color: rgba(0, 0, 0, 0.45);
5819
5929
 
5820
- wb-structure-search-product {
5821
- width: 100%;
5930
+ wb-structure-search-product {
5931
+ width: 100%;
5932
+ display: flex;
5933
+ justify-content: center;
5934
+ }
5822
5935
  }
5823
- }
5824
5936
  }
5825
5937
  .wb-structure-select {
5826
5938
  display: inline-block;
@@ -5856,7 +5968,7 @@ wb-editorjs {
5856
5968
  vertical-align: middle;
5857
5969
 
5858
5970
  &:first-child {
5859
- max-width: rem(200);
5971
+ max-width: rem(250);
5860
5972
  text-overflow: ellipsis;
5861
5973
  overflow: hidden;
5862
5974
  display: inline-block;
@@ -6096,9 +6208,12 @@ $color-bd: #dddddd;
6096
6208
  align-content: center;
6097
6209
  align-items: center;
6098
6210
  width: 100%;
6211
+ background-color: rgba(0, 0, 0, 0.45);
6099
6212
 
6100
6213
  wb-structure-search-product {
6101
6214
  width: 100%;
6215
+ display: flex;
6216
+ justify-content: center;
6102
6217
  }
6103
6218
  }
6104
6219
  }
@@ -14176,6 +14291,24 @@ $color-size-choose: #6c6c6c;
14176
14291
  }
14177
14292
  }
14178
14293
  }
14294
+
14295
+ .column.is-3-fullhd.is-3-desktop {
14296
+ &:nth-child(3) {
14297
+ .wb-structure-config__content {
14298
+ transform: translateX(-25%);
14299
+ }
14300
+ }
14301
+ &:nth-child(4) {
14302
+ .wb-structure-config__content {
14303
+ transform: translateX(-50%);
14304
+ }
14305
+ }
14306
+ &:nth-child(5) {
14307
+ .wb-structure-config__content {
14308
+ transform: translateX(-75%);
14309
+ }
14310
+ }
14311
+ }
14179
14312
  .wb-previews {
14180
14313
  &__iframe {
14181
14314
  opacity: 0;
@@ -16044,6 +16177,19 @@ html {
16044
16177
  }
16045
16178
  }
16046
16179
  }
16180
+
16181
+ .column.is-4-fullhd.is-4-desktop {
16182
+ &:nth-child(3) {
16183
+ .wb-structure-config__content {
16184
+ transform: translateX(-33.33%);
16185
+ }
16186
+ }
16187
+ &:nth-child(4) {
16188
+ .wb-structure-config__content {
16189
+ transform: translateX(-66.66%);
16190
+ }
16191
+ }
16192
+ }
16047
16193
  /*!
16048
16194
  * Quill Editor v1.3.6
16049
16195
  * https://quilljs.com/
@@ -18208,6 +18354,14 @@ wb-quill {
18208
18354
  }
18209
18355
  }
18210
18356
  }
18357
+
18358
+ .column.is-6-fullhd.is-6-desktop {
18359
+ &:nth-child(3) {
18360
+ .wb-structure-config__content {
18361
+ transform: translateX(-50%);
18362
+ }
18363
+ }
18364
+ }
18211
18365
  .wb-structure-tools {
18212
18366
  position: relative;
18213
18367
  z-index: 9;
@@ -18283,14 +18437,18 @@ wb-quill {
18283
18437
  }
18284
18438
 
18285
18439
  .button {
18286
- background-color: transparent !important;
18287
- border-color: transparent !important;
18288
- &:hover,
18289
- &:focus {
18440
+ &:not(.is-tooltip-danger) {
18290
18441
  background-color: transparent !important;
18291
- }
18292
- > span {
18293
- display: none !important;
18442
+ border-color: transparent !important;
18443
+ &:hover,
18444
+ &:focus {
18445
+ background-color: transparent !important;
18446
+ &.is-tooltip-danger {
18447
+ }
18448
+ }
18449
+ > span {
18450
+ display: none !important;
18451
+ }
18294
18452
  }
18295
18453
  }
18296
18454
  }
@@ -21325,6 +21483,10 @@ $color-bd: #dddddd;
21325
21483
  }
21326
21484
  }
21327
21485
  }
21486
+
21487
+ .transform-editor {
21488
+ padding: 0 0 0 25px;
21489
+ }
21328
21490
  $color-size-choose: #6c6c6c;
21329
21491
  .wb-launch-videos-button {
21330
21492
  overflow: hidden;
@@ -22039,286 +22201,306 @@ $color-size-choose: #6c6c6c;
22039
22201
  }
22040
22202
  }
22041
22203
  .wb-timer-airport {
22042
- width: 100%;
22043
-
22044
- &__wrapGlobal {
22045
22204
  width: 100%;
22046
22205
  position: relative;
22047
- min-height: 680px;
22048
- }
22049
22206
 
22050
- &__calendar {
22051
- &__text {
22052
- font-size: rem(16);
22053
- text-align: center;
22054
- padding: 12px 20px;
22055
- margin: 0 0 20px 0 !important;
22056
- text-transform: none !important;
22057
- font-weight: 500 !important;
22058
- width: 100% !important;
22059
- }
22060
- &__wrapper {
22061
- @include flexbox();
22062
- @include flex-wrap(nowrap);
22063
- @include justify-content(center);
22064
- @include align-content(center);
22065
- @include align-items(center);
22207
+ &__wrapGlobal {
22208
+ width: 100%;
22209
+ position: relative;
22210
+ min-height: 680px;
22066
22211
  }
22067
- }
22068
22212
 
22069
- &__switch {
22070
- @include flexbox();
22071
- @include flex-wrap(nowrap);
22072
- @include justify-content(space-between);
22073
- @include align-content(center);
22074
- @include align-items(center);
22075
- padding: 20px;
22076
- & > div {
22077
- width: 49px;
22078
- height: 24px;
22079
- margin: 0 15px;
22080
- }
22081
- & > span {
22082
- display: block;
22083
- width: 100%;
22084
- text-transform: uppercase;
22085
- font-weight: 500;
22086
- &.active {
22087
- color: $wizishop-blue;
22088
- }
22089
- }
22090
- .switch[type='checkbox'] + label {
22091
- height: 17px;
22092
- }
22093
- & > span:nth-child(1) {
22094
- text-align: right;
22213
+ &__calendar {
22214
+ &__text {
22215
+ font-size: rem(16);
22216
+ text-align: center;
22217
+ padding: 12px 20px;
22218
+ margin: 0 0 20px 0 !important;
22219
+ text-transform: none !important;
22220
+ font-weight: 500 !important;
22221
+ width: 100% !important;
22222
+ }
22223
+ &__wrapper {
22224
+ @include flexbox();
22225
+ @include flex-wrap(nowrap);
22226
+ @include justify-content(center);
22227
+ @include align-content(center);
22228
+ @include align-items(center);
22229
+ }
22095
22230
  }
22096
- }
22097
22231
 
22098
- &__valid {
22099
- margin-top: 60px;
22100
- width: 100%;
22101
- @include flexbox();
22102
- @include justify-content(center);
22103
- @include align-items(center);
22104
- @include align-content(center);
22105
- button {
22106
- font-size: rem(16);
22107
- text-transform: uppercase;
22108
- text-align: center;
22109
- font-weight: 600;
22110
- height: 40px;
22111
- line-height: 40px;
22112
- padding: 0px 40px;
22113
- }
22114
- &--calendar {
22115
- margin: 20px 0;
22232
+ &__nodate {
22233
+ &--edit {
22234
+ .wb-timer-airport {
22235
+ &__switch {
22236
+ & > span {
22237
+ color: $wb-white;
22238
+ }
22239
+ }
22240
+ }
22241
+ .wb-timer-simple__calendar__text,
22242
+ .wb-timer-airport__time__input input {
22243
+ color: $wb-white;
22244
+ }
22245
+ .wb-timer-airport__time__text p {
22246
+ color: $wb-white;
22247
+ }
22248
+ }
22116
22249
  }
22117
- }
22118
22250
 
22119
- &__time {
22120
- width: 100%;
22121
- margin: 0;
22122
- &__wrapper,
22123
- &__text {
22124
- width: 100%;
22125
- @include flexbox();
22126
- @include justify-content(center);
22127
- @include align-items(center);
22128
- @include align-content(center);
22129
- }
22130
- &__input {
22131
- width: 100px;
22132
- border-radius: 50%;
22133
- border: 1px solid $wb-border-color;
22134
- height: 100px;
22135
- line-height: 106px;
22136
- &:not(:first-child) {
22137
- margin-left: 30px;
22138
- }
22139
- input {
22140
- padding: 0;
22141
- text-align: center;
22142
- height: 45px;
22143
- font-size: rem(30);
22144
- border: none;
22145
- background-color: transparent;
22146
- color: $wb-secondary-text-color;
22147
- width: 50%;
22148
- min-width: 50%;
22149
- max-width: 50%;
22150
- margin-left: 25%;
22151
- border-bottom: 2px dashed $wb-border-color;
22152
- }
22153
- }
22154
- p {
22155
- width: 100px;
22156
- font-size: rem(16);
22157
- text-transform: uppercase;
22158
- text-align: center;
22159
- font-weight: 600;
22160
- margin-top: 10px;
22161
- &:not(:first-child) {
22162
- margin-left: 30px;
22163
- }
22251
+ &__switch {
22252
+ @include flexbox();
22253
+ @include flex-wrap(nowrap);
22254
+ @include justify-content(space-between);
22255
+ @include align-content(center);
22256
+ @include align-items(center);
22257
+ padding: 20px;
22258
+ & > div {
22259
+ width: 49px;
22260
+ height: 24px;
22261
+ margin: 0 15px;
22262
+ }
22263
+ & > span {
22264
+ display: block;
22265
+ width: 100%;
22266
+ text-transform: uppercase;
22267
+ font-weight: 500;
22268
+ &.active {
22269
+ color: $wizishop-blue;
22270
+ }
22271
+ }
22272
+ .switch[type='checkbox'] + label {
22273
+ height: 17px;
22274
+ }
22275
+ & > span:nth-child(1) {
22276
+ text-align: right;
22277
+ }
22164
22278
  }
22165
- }
22166
22279
 
22167
- &__container {
22168
- width: 100%;
22169
- padding: 60px;
22170
- @include flexbox();
22171
- @include flex-wrap(nowrap);
22172
- @include justify-content(center);
22173
- @include align-content(center);
22174
- @include align-items(center);
22175
- min-height: 680px;
22176
- @include media('<desktop') {
22177
- margin-bottom: 30px;
22178
- }
22179
- &__timer {
22180
- width: 100%;
22181
- max-width: 100%;
22182
- @include flexbox();
22183
- @include flex-wrap(wrap);
22184
- @include justify-content(center);
22185
- & > div {
22280
+ &__valid {
22281
+ margin-top: 60px;
22186
22282
  width: 100%;
22187
- padding: 0 20px;
22188
- &:nth-child(2) {
22189
- margin-bottom: 30px;
22283
+ @include flexbox();
22284
+ @include justify-content(center);
22285
+ @include align-items(center);
22286
+ @include align-content(center);
22287
+ button {
22288
+ font-size: rem(16);
22289
+ text-transform: uppercase;
22290
+ text-align: center;
22291
+ font-weight: 600;
22292
+ height: 40px;
22293
+ line-height: 40px;
22294
+ padding: 0px 40px;
22295
+ }
22296
+ &--calendar {
22297
+ margin: 20px 0;
22190
22298
  }
22191
- }
22192
22299
  }
22193
22300
 
22194
- ul {
22195
- @include flexbox();
22196
- @include flex-wrap(nowrap);
22197
- @include justify-content(center);
22198
- width: 100%;
22199
- max-width: 420px;
22200
- list-style-type: none;
22201
- padding: 0;
22202
- font-family: 'Helvetica Neue', sans-serif;
22203
- transform: scale(1.5) translate3d(0, 0, 0) perspective(1px);
22204
- margin-top: 20px;
22205
- li {
22301
+ &__time {
22206
22302
  width: 100%;
22207
- position: relative;
22208
- & > div:first-child {
22209
- @include flexbox();
22210
- @include flex-wrap(nowrap);
22211
- width: 100%;
22212
- text-align: center;
22213
- font-weight: 600;
22214
- line-height: 1;
22215
- font-size: rem(50);
22216
- span {
22303
+ margin: 0;
22304
+ &__wrapper,
22305
+ &__text {
22306
+ width: 100%;
22217
22307
  @include flexbox();
22218
- @include flex-wrap(wrap);
22219
22308
  @include justify-content(center);
22220
22309
  @include align-items(center);
22221
22310
  @include align-content(center);
22222
- min-height: 60px;
22223
- width: 40px;
22224
- text-align: center;
22225
- position: relative;
22226
- background: #23272b;
22227
- color: $wb-white;
22228
- border-radius: 3px;
22229
- box-shadow: 0px 0px 20px 0px rgba(35, 39, 43, 0.5);
22230
- &:after {
22231
- content: '';
22232
- position: absolute;
22233
- top: 50%;
22234
- left: 0;
22235
- width: 100%;
22236
- background: #000;
22237
- transform: translateY(-50%);
22238
- height: 1px;
22239
- display: block;
22311
+ }
22312
+ &__input {
22313
+ width: 100px;
22314
+ border-radius: 50%;
22315
+ border: 1px solid $wb-border-color;
22316
+ height: 100px;
22317
+ line-height: 106px;
22318
+ &:not(:first-child) {
22319
+ margin-left: 30px;
22240
22320
  }
22241
- &:first-child {
22242
- margin-right: 5px;
22321
+ input {
22322
+ padding: 0;
22323
+ text-align: center;
22324
+ height: 45px;
22325
+ font-size: rem(30);
22326
+ border: none;
22327
+ background-color: transparent;
22328
+ color: $wb-secondary-text-color;
22329
+ width: 50%;
22330
+ min-width: 50%;
22331
+ max-width: 50%;
22332
+ margin-left: 25%;
22333
+ border-bottom: 2px dashed $wb-border-color;
22243
22334
  }
22244
- }
22245
- }
22246
-
22247
- & > span {
22248
- display: block;
22249
- width: 100%;
22250
- text-align: center;
22251
- font-weight: 400;
22252
- line-height: 1;
22253
- font-size: rem(18);
22254
- margin-top: 7.5px;
22255
- max-width: 85px;
22256
22335
  }
22336
+ p {
22337
+ width: 100px;
22338
+ font-size: rem(16);
22339
+ text-transform: uppercase;
22340
+ text-align: center;
22341
+ font-weight: 600;
22342
+ margin-top: 10px;
22343
+ &:not(:first-child) {
22344
+ margin-left: 30px;
22345
+ }
22346
+ }
22347
+ }
22257
22348
 
22258
- &:not(:last-child) {
22259
- span {
22260
- &:nth-child(3) {
22261
- &:before {
22262
- content: '';
22263
- display: block;
22264
- position: absolute;
22265
- right: 0;
22266
- top: 50%;
22267
- transform: translate(50%, -50%);
22268
- width: 6px;
22269
- height: 6px;
22270
- background: inherit;
22271
- margin-top: 6px;
22272
- border-radius: 1px;
22273
- }
22274
-
22275
- &:after {
22276
- content: '';
22277
- display: block;
22278
- position: absolute;
22279
- right: 0;
22280
- top: 50%;
22281
- transform: translate(50%, -50%);
22282
- width: 6px;
22283
- height: 6px;
22284
- background: inherit;
22285
- margin-top: -6px;
22286
- border-radius: 1px;
22287
- }
22349
+ &__container {
22350
+ width: 100%;
22351
+ padding: 60px;
22352
+ @include flexbox();
22353
+ @include flex-wrap(nowrap);
22354
+ @include justify-content(center);
22355
+ @include align-content(center);
22356
+ @include align-items(center);
22357
+ min-height: 680px;
22358
+ @include media('<desktop') {
22359
+ margin-bottom: 30px;
22360
+ }
22361
+ &__timer {
22362
+ width: 100%;
22363
+ max-width: 100%;
22364
+ @include flexbox();
22365
+ @include flex-wrap(wrap);
22366
+ @include justify-content(center);
22367
+ & > div {
22368
+ width: 100%;
22369
+ padding: 0 20px;
22370
+ &:nth-child(2) {
22371
+ margin-bottom: 30px;
22372
+ }
22373
+ }
22374
+ }
22375
+
22376
+ ul {
22377
+ @include flexbox();
22378
+ @include flex-wrap(nowrap);
22379
+ @include justify-content(center);
22380
+ width: 100%;
22381
+ max-width: 420px;
22382
+ list-style-type: none;
22383
+ padding: 0;
22384
+ font-family: 'Helvetica Neue', sans-serif;
22385
+ transform: scale(1.5) translate3d(0, 0, 0) perspective(1px);
22386
+ margin-top: 20px;
22387
+ li {
22388
+ width: 100%;
22389
+ position: relative;
22390
+ & > div:first-child {
22391
+ @include flexbox();
22392
+ @include flex-wrap(nowrap);
22393
+ width: 100%;
22394
+ text-align: center;
22395
+ font-weight: 600;
22396
+ line-height: 1;
22397
+ font-size: rem(50);
22398
+ span {
22399
+ @include flexbox();
22400
+ @include flex-wrap(wrap);
22401
+ @include justify-content(center);
22402
+ @include align-items(center);
22403
+ @include align-content(center);
22404
+ min-height: 60px;
22405
+ width: 40px;
22406
+ text-align: center;
22407
+ position: relative;
22408
+ background: #23272b;
22409
+ color: $wb-white;
22410
+ border-radius: 3px;
22411
+ box-shadow: 0px 0px 20px 0px rgba(35, 39, 43, 0.5);
22412
+ &:after {
22413
+ content: '';
22414
+ position: absolute;
22415
+ top: 50%;
22416
+ left: 0;
22417
+ width: 100%;
22418
+ background: #000;
22419
+ transform: translateY(-50%);
22420
+ height: 1px;
22421
+ display: block;
22422
+ }
22423
+ &:first-child {
22424
+ margin-right: 5px;
22425
+ }
22426
+ }
22427
+ }
22428
+
22429
+ & > span {
22430
+ display: block;
22431
+ width: 100%;
22432
+ text-align: center;
22433
+ font-weight: 400;
22434
+ line-height: 1;
22435
+ font-size: rem(18);
22436
+ margin-top: 7.5px;
22437
+ max-width: 85px;
22438
+ }
22439
+
22440
+ &:not(:last-child) {
22441
+ span {
22442
+ &:nth-child(3) {
22443
+ &:before {
22444
+ content: '';
22445
+ display: block;
22446
+ position: absolute;
22447
+ right: 0;
22448
+ top: 50%;
22449
+ transform: translate(50%, -50%);
22450
+ width: 6px;
22451
+ height: 6px;
22452
+ background: inherit;
22453
+ margin-top: 6px;
22454
+ border-radius: 1px;
22455
+ }
22456
+
22457
+ &:after {
22458
+ content: '';
22459
+ display: block;
22460
+ position: absolute;
22461
+ right: 0;
22462
+ top: 50%;
22463
+ transform: translate(50%, -50%);
22464
+ width: 6px;
22465
+ height: 6px;
22466
+ background: inherit;
22467
+ margin-top: -6px;
22468
+ border-radius: 1px;
22469
+ }
22470
+ }
22471
+ }
22472
+ }
22288
22473
  }
22289
- }
22290
22474
  }
22291
- }
22292
22475
  }
22293
- }
22294
- input[type='number']::-webkit-inner-spin-button,
22295
- input[type='number']::-webkit-outer-spin-button {
22296
- -webkit-appearance: none;
22297
- margin: 0;
22298
- }
22299
- input[type='number'] {
22300
- -moz-appearance: textfield;
22301
- }
22302
- .wb-structure-config__content {
22303
- width: 70%;
22304
- }
22305
- .datetimepicker-footer-validate {
22306
- background-color: $primary-button !important;
22307
- color: $wb-white !important;
22308
- line-height: 40px;
22309
- padding: 0px 40px;
22310
- font-size: 1rem;
22311
- margin-bottom: 20px;
22312
- text-transform: uppercase;
22313
- font-weight: 500;
22314
- }
22315
- .wb-structure-config__content .timepicker-hours,
22316
- .timepicker-minutes {
22317
- max-width: 90px;
22318
- }
22319
- .datetimepicker-footer {
22320
- display: none;
22321
- }
22476
+ input[type='number']::-webkit-inner-spin-button,
22477
+ input[type='number']::-webkit-outer-spin-button {
22478
+ -webkit-appearance: none;
22479
+ margin: 0;
22480
+ }
22481
+ input[type='number'] {
22482
+ -moz-appearance: textfield;
22483
+ }
22484
+ .wb-structure-config__content {
22485
+ width: 70%;
22486
+ }
22487
+ .datetimepicker-footer-validate {
22488
+ background-color: $primary-button !important;
22489
+ color: $wb-white !important;
22490
+ line-height: 40px;
22491
+ padding: 0px 40px;
22492
+ font-size: 1rem;
22493
+ margin-bottom: 20px;
22494
+ text-transform: uppercase;
22495
+ font-weight: 500;
22496
+ }
22497
+ .wb-structure-config__content .timepicker-hours,
22498
+ .timepicker-minutes {
22499
+ max-width: 90px;
22500
+ }
22501
+ .datetimepicker-footer {
22502
+ display: none;
22503
+ }
22322
22504
  }
22323
22505
  .wb-star {
22324
22506
  position: relative;
@@ -22355,359 +22537,379 @@ $color-size-choose: #6c6c6c;
22355
22537
  }
22356
22538
  }
22357
22539
  .wb-timer-background {
22358
- width: 100%;
22359
- position: relative;
22360
- min-height: 400px;
22361
-
22362
- &__wrapGlobal {
22363
22540
  width: 100%;
22364
22541
  position: relative;
22365
- min-height: 680px;
22366
- }
22542
+ min-height: 400px;
22367
22543
 
22368
- &__calendar {
22369
- &__text {
22370
- font-size: rem(16);
22371
- text-align: center;
22372
- padding: 12px 20px;
22373
- margin: 0 0 20px 0 !important;
22374
- text-transform: none !important;
22375
- font-weight: 500 !important;
22376
- width: 100% !important;
22377
- }
22378
- &__wrapper {
22379
- @include flexbox();
22380
- @include flex-wrap(nowrap);
22381
- @include justify-content(center);
22382
- @include align-content(center);
22383
- @include align-items(center);
22544
+ &__wrapGlobal {
22545
+ width: 100%;
22546
+ position: relative;
22547
+ min-height: 680px;
22384
22548
  }
22385
- }
22386
22549
 
22387
- &__switch {
22388
- @include flexbox();
22389
- @include flex-wrap(nowrap);
22390
- @include justify-content(space-between);
22391
- @include align-content(center);
22392
- @include align-items(center);
22393
- padding: 20px;
22394
- & > div {
22395
- width: 49px;
22396
- height: 24px;
22397
- margin: 0 15px;
22398
- }
22399
- & > span {
22400
- display: block;
22401
- width: 100%;
22402
- text-transform: uppercase;
22403
- font-weight: 500;
22404
- &.active {
22405
- color: $wizishop-blue;
22406
- }
22407
- }
22408
- .switch[type='checkbox'] + label {
22409
- height: 17px;
22410
- }
22411
- & > span:nth-child(1) {
22412
- text-align: right;
22550
+ &__calendar {
22551
+ &__text {
22552
+ font-size: rem(16);
22553
+ text-align: center;
22554
+ padding: 12px 20px;
22555
+ margin: 0 0 20px 0 !important;
22556
+ text-transform: none !important;
22557
+ font-weight: 500 !important;
22558
+ width: 100% !important;
22559
+ }
22560
+ &__wrapper {
22561
+ @include flexbox();
22562
+ @include flex-wrap(nowrap);
22563
+ @include justify-content(center);
22564
+ @include align-content(center);
22565
+ @include align-items(center);
22566
+ }
22413
22567
  }
22414
- }
22415
22568
 
22416
- &__valid {
22417
- margin-top: 60px;
22418
- width: 100%;
22419
- @include flexbox();
22420
- @include justify-content(center);
22421
- @include align-items(center);
22422
- @include align-content(center);
22423
- button {
22424
- font-size: rem(16);
22425
- text-transform: uppercase;
22426
- text-align: center;
22427
- font-weight: 600;
22428
- height: 40px;
22429
- line-height: 40px;
22430
- padding: 0px 40px;
22431
- }
22432
- &--calendar {
22433
- margin: 20px 0;
22569
+ &__nodate {
22570
+ &--edit {
22571
+ .wb-timer-background {
22572
+ &__switch {
22573
+ & > span {
22574
+ color: $wb-white;
22575
+ }
22576
+ }
22577
+ }
22578
+ .wb-timer-simple__calendar__text,
22579
+ .wb-timer-background__time__input input {
22580
+ color: $wb-white;
22581
+ }
22582
+ .wb-timer-background__time__text p {
22583
+ color: $wb-white;
22584
+ }
22585
+ }
22434
22586
  }
22435
- }
22436
22587
 
22437
- &__time {
22438
- width: 100%;
22439
- margin: 0;
22440
- &__wrapper,
22441
- &__text {
22442
- width: 100%;
22443
- @include flexbox();
22444
- @include justify-content(center);
22445
- @include align-items(center);
22446
- @include align-content(center);
22588
+ &__switch {
22589
+ @include flexbox();
22590
+ @include flex-wrap(nowrap);
22591
+ @include justify-content(space-between);
22592
+ @include align-content(center);
22593
+ @include align-items(center);
22594
+ padding: 20px;
22595
+ & > div {
22596
+ width: 49px;
22597
+ height: 24px;
22598
+ margin: 0 15px;
22599
+ }
22600
+ & > span {
22601
+ display: block;
22602
+ width: 100%;
22603
+ text-transform: uppercase;
22604
+ font-weight: 500;
22605
+ &.active {
22606
+ color: $wizishop-blue;
22607
+ }
22608
+ }
22609
+ .switch[type='checkbox'] + label {
22610
+ height: 17px;
22611
+ }
22612
+ & > span:nth-child(1) {
22613
+ text-align: right;
22614
+ }
22447
22615
  }
22448
- &__input {
22449
- width: 100px;
22450
- border-radius: 50%;
22451
- border: 1px solid $wb-border-color;
22452
- height: 100px;
22453
- line-height: 106px;
22454
- &:not(:first-child) {
22455
- margin-left: 30px;
22456
- }
22457
- input {
22458
- padding: 0;
22459
- text-align: center;
22460
- height: 45px;
22461
- font-size: rem(30);
22462
- border: none;
22463
- background-color: transparent;
22464
- color: $wb-secondary-text-color;
22465
- width: 50%;
22466
- min-width: 50%;
22467
- max-width: 50%;
22468
- margin-left: 25%;
22469
- border-bottom: 2px dashed $wb-border-color;
22470
- }
22616
+
22617
+ &__valid {
22618
+ margin-top: 60px;
22619
+ width: 100%;
22620
+ @include flexbox();
22621
+ @include justify-content(center);
22622
+ @include align-items(center);
22623
+ @include align-content(center);
22624
+ button {
22625
+ font-size: rem(16);
22626
+ text-transform: uppercase;
22627
+ text-align: center;
22628
+ font-weight: 600;
22629
+ height: 40px;
22630
+ line-height: 40px;
22631
+ padding: 0px 40px;
22632
+ }
22633
+ &--calendar {
22634
+ margin: 20px 0;
22635
+ }
22471
22636
  }
22472
- p {
22473
- width: 100px;
22474
- font-size: rem(16);
22475
- text-transform: uppercase;
22476
- text-align: center;
22477
- font-weight: 600;
22478
- margin-top: 10px;
22479
- &:not(:first-child) {
22480
- margin-left: 30px;
22481
- }
22637
+
22638
+ &__time {
22639
+ width: 100%;
22640
+ margin: 0;
22641
+ &__wrapper,
22642
+ &__text {
22643
+ width: 100%;
22644
+ @include flexbox();
22645
+ @include justify-content(center);
22646
+ @include align-items(center);
22647
+ @include align-content(center);
22648
+ }
22649
+ &__input {
22650
+ width: 100px;
22651
+ border-radius: 50%;
22652
+ border: 1px solid $wb-border-color;
22653
+ height: 100px;
22654
+ line-height: 106px;
22655
+ &:not(:first-child) {
22656
+ margin-left: 30px;
22657
+ }
22658
+ input {
22659
+ padding: 0;
22660
+ text-align: center;
22661
+ height: 45px;
22662
+ font-size: rem(30);
22663
+ border: none;
22664
+ background-color: transparent;
22665
+ color: $wb-secondary-text-color;
22666
+ width: 50%;
22667
+ min-width: 50%;
22668
+ max-width: 50%;
22669
+ margin-left: 25%;
22670
+ border-bottom: 2px dashed $wb-border-color;
22671
+ }
22672
+ }
22673
+ p {
22674
+ width: 100px;
22675
+ font-size: rem(16);
22676
+ text-transform: uppercase;
22677
+ text-align: center;
22678
+ font-weight: 600;
22679
+ margin-top: 10px;
22680
+ &:not(:first-child) {
22681
+ margin-left: 30px;
22682
+ }
22683
+ }
22482
22684
  }
22483
- }
22484
22685
 
22485
- &__noimages {
22486
- background-color: lighten($wb-border-color, 12%);
22487
- cursor: pointer;
22488
- height: 100%;
22489
- display: flex;
22490
- align-items: center;
22491
- align-content: center;
22492
- justify-content: center;
22686
+ &__noimages {
22687
+ background-color: lighten($wb-border-color, 12%);
22688
+ cursor: pointer;
22689
+ height: 100%;
22690
+ display: flex;
22691
+ align-items: center;
22692
+ align-content: center;
22693
+ justify-content: center;
22493
22694
 
22494
- position: absolute;
22495
- width: 100%;
22496
- top: 0;
22695
+ position: absolute;
22696
+ width: 100%;
22697
+ top: 0;
22497
22698
 
22498
- z-index: 4;
22699
+ z-index: 4;
22499
22700
 
22500
- p {
22501
- position: absolute;
22502
- top: 50%;
22503
- left: 50%;
22504
- transform: translate(-50%, -50%);
22505
- text-align: center;
22506
- font-size: rem(14);
22507
- color: $wb-secondary-text-color;
22508
- width: auto;
22509
- white-space: nowrap;
22701
+ p {
22702
+ position: absolute;
22703
+ top: 50%;
22704
+ left: 50%;
22705
+ transform: translate(-50%, -50%);
22706
+ text-align: center;
22707
+ font-size: rem(14);
22708
+ color: $wb-secondary-text-color;
22709
+ width: auto;
22710
+ white-space: nowrap;
22510
22711
 
22511
- &:before {
22512
- position: absolute;
22513
- width: 0;
22514
- bottom: -(#{rem(3)});
22515
- height: rem(2);
22516
- transition: 200ms all;
22517
- background-color: $wb-border-color;
22518
- content: ' ';
22519
- left: 0;
22520
- }
22521
- }
22712
+ &:before {
22713
+ position: absolute;
22714
+ width: 0;
22715
+ bottom: -(#{rem(3)});
22716
+ height: rem(2);
22717
+ transition: 200ms all;
22718
+ background-color: $wb-border-color;
22719
+ content: ' ';
22720
+ left: 0;
22721
+ }
22722
+ }
22522
22723
 
22523
- i {
22524
- color: $wb-secondary-text-color;
22525
- text-align: center;
22526
- display: block;
22527
- font-size: rem(45);
22528
- opacity: 0.4;
22529
- transition: 200ms all;
22530
- margin-bottom: rem(10);
22531
- }
22724
+ i {
22725
+ color: $wb-secondary-text-color;
22726
+ text-align: center;
22727
+ display: block;
22728
+ font-size: rem(45);
22729
+ opacity: 0.4;
22730
+ transition: 200ms all;
22731
+ margin-bottom: rem(10);
22732
+ }
22532
22733
 
22533
- border: rem(1) solid lighten($wb-border-color, 12%);
22534
- transition: 200ms all;
22734
+ border: rem(1) solid lighten($wb-border-color, 12%);
22735
+ transition: 200ms all;
22535
22736
 
22536
- &:hover {
22537
- border: rem(1) solid $wb-border-color;
22737
+ &:hover {
22738
+ border: rem(1) solid $wb-border-color;
22538
22739
 
22539
- i {
22540
- color: darken($wb-secondary-text-color, 20%);
22541
- }
22740
+ i {
22741
+ color: darken($wb-secondary-text-color, 20%);
22742
+ }
22542
22743
 
22543
- p {
22544
- color: darken($wb-secondary-text-color, 20%);
22744
+ p {
22745
+ color: darken($wb-secondary-text-color, 20%);
22545
22746
 
22546
- &:before {
22547
- width: 100%;
22747
+ &:before {
22748
+ width: 100%;
22749
+ }
22750
+ }
22548
22751
  }
22549
- }
22550
- }
22551
- }
22552
-
22553
- &__container {
22554
- width: 100%;
22555
- padding: 60px 20px;
22556
- position: relative;
22557
- @include flexbox();
22558
- @include flex-wrap(wrap);
22559
- @include justify-content(center);
22560
- @include align-content(center);
22561
- @include align-items(center);
22562
- min-height: 680px;
22563
- @include media('<desktop') {
22564
- margin-bottom: 30px;
22565
- }
22566
- & > div:nth-child(3),
22567
- & > div:nth-child(2) {
22568
- width: 100%;
22569
- padding: 0;
22570
- z-index: 2;
22571
- &:nth-child(2) {
22572
- z-index: 4;
22573
- }
22574
- &:nth-child(3) {
22575
- margin-bottom: 30px;
22576
- z-index: 3;
22577
- }
22578
- }
22579
- &__image {
22580
- position: absolute;
22581
- top: 0;
22582
- left: 0;
22583
- width: 100%;
22584
- height: 100%;
22585
- z-index: 2;
22586
- background-size: cover;
22587
- background-position: center center;
22588
- background-repeat: no-repeat;
22589
- }
22590
- &__timer {
22591
- width: 100%;
22592
- max-width: 800px;
22593
- z-index: 2;
22594
- position: relative;
22595
- padding: 30px 60px;
22596
- border: 4px solid #fff;
22597
22752
  }
22598
22753
 
22599
- ul {
22600
- @include flexbox();
22601
- @include flex-wrap(nowrap);
22602
- @include justify-content(center);
22603
- width: 100%;
22604
- max-width: 800px;
22605
- list-style-type: none;
22606
- padding: 0;
22607
-
22608
- li {
22754
+ &__container {
22609
22755
  width: 100%;
22756
+ padding: 60px 20px;
22610
22757
  position: relative;
22611
-
22612
- .tiret {
22613
- position: absolute;
22614
- top: 50%;
22615
- transform: translateY(-50%);
22616
- right: 0;
22617
- margin-left: 10px;
22618
- background: #fff;
22619
- width: 2px;
22620
- height: 50%;
22758
+ @include flexbox();
22759
+ @include flex-wrap(wrap);
22760
+ @include justify-content(center);
22761
+ @include align-content(center);
22762
+ @include align-items(center);
22763
+ min-height: 680px;
22764
+ @include media('<desktop') {
22765
+ margin-bottom: 30px;
22621
22766
  }
22622
-
22623
- span:not(.tiret) {
22624
- display: block;
22625
- width: 100%;
22626
- text-align: center;
22627
- font-weight: 400;
22628
- line-height: 1;
22629
-
22630
- &:first-child {
22631
- font-size: rem(54);
22632
- @include mobile {
22633
- font-size: rem(28);
22767
+ & > div:nth-child(3),
22768
+ & > div:nth-child(2) {
22769
+ width: 100%;
22770
+ padding: 0;
22771
+ z-index: 2;
22772
+ &:nth-child(2) {
22773
+ z-index: 4;
22634
22774
  }
22635
- }
22636
-
22637
- &:nth-child(2) {
22638
- font-size: rem(24);
22639
- @include mobile {
22640
- font-size: rem(14);
22775
+ &:nth-child(3) {
22776
+ margin-bottom: 30px;
22777
+ z-index: 3;
22641
22778
  }
22642
- }
22779
+ }
22780
+ &__image {
22781
+ position: absolute;
22782
+ top: 0;
22783
+ left: 0;
22784
+ width: 100%;
22785
+ height: 100%;
22786
+ z-index: 2;
22787
+ background-size: cover;
22788
+ background-position: center center;
22789
+ background-repeat: no-repeat;
22790
+ }
22791
+ &__timer {
22792
+ width: 100%;
22793
+ max-width: 800px;
22794
+ z-index: 2;
22795
+ position: relative;
22796
+ padding: 30px 60px;
22797
+ border: 4px solid #fff;
22643
22798
  }
22644
22799
 
22645
- &:not(:last-child) {
22646
- span {
22647
- &:nth-child(3) {
22648
- &:before {
22649
- content: '';
22650
- display: block;
22651
- position: absolute;
22652
- right: 0;
22653
- top: 50%;
22654
- transform: translate(50%, -50%);
22655
- width: 6px;
22656
- height: 6px;
22657
- background: inherit;
22658
- margin-top: 6px;
22659
- border-radius: 1px;
22660
- }
22661
-
22662
- &:after {
22663
- content: '';
22664
- display: block;
22665
- position: absolute;
22666
- right: 0;
22667
- top: 50%;
22668
- transform: translate(50%, -50%);
22669
- width: 6px;
22670
- height: 6px;
22671
- background: inherit;
22672
- margin-top: -6px;
22673
- border-radius: 1px;
22674
- }
22800
+ ul {
22801
+ @include flexbox();
22802
+ @include flex-wrap(nowrap);
22803
+ @include justify-content(center);
22804
+ width: 100%;
22805
+ max-width: 800px;
22806
+ list-style-type: none;
22807
+ padding: 0;
22808
+
22809
+ li {
22810
+ width: 100%;
22811
+ position: relative;
22812
+
22813
+ .tiret {
22814
+ position: absolute;
22815
+ top: 50%;
22816
+ transform: translateY(-50%);
22817
+ right: 0;
22818
+ margin-left: 10px;
22819
+ background: #fff;
22820
+ width: 2px;
22821
+ height: 50%;
22822
+ }
22823
+
22824
+ span:not(.tiret) {
22825
+ display: block;
22826
+ width: 100%;
22827
+ text-align: center;
22828
+ font-weight: 400;
22829
+ line-height: 1;
22830
+
22831
+ &:first-child {
22832
+ font-size: rem(54);
22833
+ @include mobile {
22834
+ font-size: rem(28);
22835
+ }
22836
+ }
22837
+
22838
+ &:nth-child(2) {
22839
+ font-size: rem(24);
22840
+ @include mobile {
22841
+ font-size: rem(14);
22842
+ }
22843
+ }
22844
+ }
22845
+
22846
+ &:not(:last-child) {
22847
+ span {
22848
+ &:nth-child(3) {
22849
+ &:before {
22850
+ content: '';
22851
+ display: block;
22852
+ position: absolute;
22853
+ right: 0;
22854
+ top: 50%;
22855
+ transform: translate(50%, -50%);
22856
+ width: 6px;
22857
+ height: 6px;
22858
+ background: inherit;
22859
+ margin-top: 6px;
22860
+ border-radius: 1px;
22861
+ }
22862
+
22863
+ &:after {
22864
+ content: '';
22865
+ display: block;
22866
+ position: absolute;
22867
+ right: 0;
22868
+ top: 50%;
22869
+ transform: translate(50%, -50%);
22870
+ width: 6px;
22871
+ height: 6px;
22872
+ background: inherit;
22873
+ margin-top: -6px;
22874
+ border-radius: 1px;
22875
+ }
22876
+ }
22877
+ }
22878
+ }
22675
22879
  }
22676
- }
22677
22880
  }
22678
- }
22679
22881
  }
22680
- }
22681
- input[type='number']::-webkit-inner-spin-button,
22682
- input[type='number']::-webkit-outer-spin-button {
22683
- -webkit-appearance: none;
22684
- margin: 0;
22685
- }
22686
- input[type='number'] {
22687
- -moz-appearance: textfield;
22688
- }
22689
- .wb-structure-config__content {
22690
- width: 70%;
22691
- }
22692
- .datetimepicker-footer-validate {
22693
- background-color: $primary-button !important;
22694
- color: $wb-white !important;
22695
- line-height: 40px;
22696
- padding: 0px 40px;
22697
- font-size: 1rem;
22698
- margin-bottom: 20px;
22699
- text-transform: uppercase;
22700
- font-weight: 500;
22701
- }
22702
- .wb-structure-config__content .timepicker-hours,
22703
- .timepicker-minutes {
22704
- max-width: 90px;
22705
- }
22706
- .datetimepicker-footer {
22707
- display: none;
22708
- }
22882
+ input[type='number']::-webkit-inner-spin-button,
22883
+ input[type='number']::-webkit-outer-spin-button {
22884
+ -webkit-appearance: none;
22885
+ margin: 0;
22886
+ }
22887
+ input[type='number'] {
22888
+ -moz-appearance: textfield;
22889
+ }
22890
+ .wb-structure-config__content {
22891
+ width: 70%;
22892
+ }
22893
+ .datetimepicker-footer-validate {
22894
+ background-color: $primary-button !important;
22895
+ color: $wb-white !important;
22896
+ line-height: 40px;
22897
+ padding: 0px 40px;
22898
+ font-size: 1rem;
22899
+ margin-bottom: 20px;
22900
+ text-transform: uppercase;
22901
+ font-weight: 500;
22902
+ }
22903
+ .wb-structure-config__content .timepicker-hours,
22904
+ .timepicker-minutes {
22905
+ max-width: 90px;
22906
+ }
22907
+ .datetimepicker-footer {
22908
+ display: none;
22909
+ }
22709
22910
  }
22710
22911
  .wb-structure-search-product {
22912
+ min-width: 400px;
22711
22913
  &__input {
22712
22914
  position: relative;
22713
22915
  }
@@ -22724,6 +22926,8 @@ $color-size-choose: #6c6c6c;
22724
22926
  position: absolute;
22725
22927
  z-index: 1;
22726
22928
  width: 150%;
22929
+ top: 105px;
22930
+ left: 0;
22727
22931
 
22728
22932
  p {
22729
22933
  border: rem(1) solid $wb-border-color;
@@ -22733,6 +22937,7 @@ $color-size-choose: #6c6c6c;
22733
22937
  cursor: pointer;
22734
22938
  border-radius: rem(2);
22735
22939
  color: $wb-secondary-text-color;
22940
+ background-color: $wb-white;
22736
22941
  display: inline-flex;
22737
22942
  align-items: center;
22738
22943
  @include simple_transition();
@@ -22887,6 +23092,25 @@ $color-size-choose: #6c6c6c;
22887
23092
  }
22888
23093
  }
22889
23094
 
23095
+ &__nodate {
23096
+ &--edit {
23097
+ .wb-timer-clock {
23098
+ &__switch {
23099
+ & > span {
23100
+ color: $wb-white;
23101
+ }
23102
+ }
23103
+ }
23104
+ .wb-timer-simple__calendar__text,
23105
+ .wb-timer-clock__time__input input {
23106
+ color: $wb-white;
23107
+ }
23108
+ .wb-timer-clock__time__text p {
23109
+ color: $wb-white;
23110
+ }
23111
+ }
23112
+ }
23113
+
22890
23114
  &__switch {
22891
23115
  @include flexbox();
22892
23116
  @include flex-wrap(nowrap);
@@ -23366,6 +23590,7 @@ $color-size-choose: #6c6c6c;
23366
23590
  .wb-timer-multiple-img {
23367
23591
  overflow: hidden;
23368
23592
  position: relative;
23593
+ width: 100%;
23369
23594
 
23370
23595
  &.is-active {
23371
23596
  z-index: 40;
@@ -23765,7 +23990,6 @@ $color-size-choose: #6c6c6c;
23765
23990
 
23766
23991
  > div {
23767
23992
  position: relative;
23768
- overflow: hidden;
23769
23993
 
23770
23994
  > div {
23771
23995
  background-size: cover;
@@ -23864,6 +24088,25 @@ $color-size-choose: #6c6c6c;
23864
24088
  }
23865
24089
  }
23866
24090
 
24091
+ &__nodate {
24092
+ &--edit {
24093
+ .wb-timer-multiple-img {
24094
+ &__switch {
24095
+ & > span {
24096
+ color: $wb-white;
24097
+ }
24098
+ }
24099
+ }
24100
+ .wb-timer-simple__calendar__text,
24101
+ .wb-timer-multiple-img__time__input input {
24102
+ color: $wb-white;
24103
+ }
24104
+ .wb-timer-multiple-img__time__text p {
24105
+ color: $wb-white;
24106
+ }
24107
+ }
24108
+ }
24109
+
23867
24110
  &__switch {
23868
24111
  @include flexbox();
23869
24112
  @include flex-wrap(nowrap);
@@ -24375,341 +24618,361 @@ $color-size-choose: #6c6c6c;
24375
24618
  }
24376
24619
  }
24377
24620
 
24378
- &__content {
24379
- padding-bottom: 1rem;
24621
+ &__content {
24622
+ padding-bottom: 1rem;
24623
+
24624
+ > div {
24625
+ position: relative;
24626
+ padding: rem(15);
24627
+ width: calc(100% - #{rem(80)});
24628
+ background-color: lighten($wb-border-color, 8%);
24629
+ margin: 0 rem(40) rem(30);
24630
+ min-height: rem(60);
24631
+ box-sizing: border-box;
24632
+
24633
+ &:last-child {
24634
+ margin: 0 rem(40);
24635
+ background-color: transparent;
24636
+ text-align: right;
24637
+ padding: 0;
24638
+ }
24639
+
24640
+ p {
24641
+ position: absolute;
24642
+ font-size: rem(12);
24643
+ color: $wb-main-text-color;
24644
+
24645
+ &:first-child {
24646
+ top: rem(5);
24647
+ left: rem(10);
24648
+ font-size: rem(16);
24649
+ font-weight: 300;
24650
+ }
24651
+ &:last-child {
24652
+ bottom: rem(2);
24653
+ right: rem(5);
24654
+ }
24655
+ }
24656
+
24657
+ .select {
24658
+ max-width: 40%;
24659
+ }
24660
+
24661
+ button:not(.is-info) {
24662
+ background-color: $wb-main-color;
24663
+ padding: rem(10) rem(15);
24664
+ border: 0;
24665
+ color: $wb-white;
24666
+ text-transform: capitalize;
24667
+ font-size: rem(14);
24668
+ }
24669
+ }
24670
+ }
24671
+ }
24672
+ &__noForms {
24673
+ min-height: 300px;
24674
+ display: flex;
24675
+ justify-content: center;
24676
+ align-items: center;
24677
+ p {
24678
+ font-size: rem(20);
24679
+ font-weight: 600;
24680
+ a {
24681
+ color: $wb-main-color;
24682
+ }
24683
+ }
24684
+ }
24685
+ }
24686
+
24687
+ .form-long_answer {
24688
+ min-height: 80px;
24689
+ width: 100%;
24690
+ }
24691
+ .wb-timer-simple {
24692
+ width: 100%;
24693
+ position: relative;
24694
+
24695
+ &__wrapGlobal {
24696
+ width: 100%;
24697
+ position: relative;
24698
+ min-height: 680px;
24699
+ }
24700
+
24701
+ &__calendar {
24702
+ &__text {
24703
+ font-size: rem(16);
24704
+ text-align: center;
24705
+ padding: 12px 20px;
24706
+ margin: 0 0 20px 0 !important;
24707
+ text-transform: none !important;
24708
+ font-weight: 500 !important;
24709
+ width: 100% !important;
24710
+ }
24711
+ &__wrapper {
24712
+ @include flexbox();
24713
+ @include flex-wrap(nowrap);
24714
+ @include justify-content(center);
24715
+ @include align-content(center);
24716
+ @include align-items(center);
24717
+ }
24718
+ }
24719
+
24720
+ &__nodate {
24721
+ &--edit {
24722
+ .wb-timer-simple {
24723
+ &__switch {
24724
+ & > span {
24725
+ color: $wb-white;
24726
+ }
24727
+ }
24728
+ }
24729
+ .wb-timer-simple__calendar__text,
24730
+ .wb-timer-simple__time__input input {
24731
+ color: $wb-white;
24732
+ }
24733
+ .wb-timer-simple__time__text p {
24734
+ color: $wb-white;
24735
+ }
24736
+ }
24737
+ }
24738
+
24739
+ &__switch {
24740
+ @include flexbox();
24741
+ @include flex-wrap(nowrap);
24742
+ @include justify-content(space-between);
24743
+ @include align-content(center);
24744
+ @include align-items(center);
24745
+ padding: 20px;
24746
+ & > div {
24747
+ width: 49px;
24748
+ height: 24px;
24749
+ margin: 0 15px;
24750
+ }
24751
+ & > span {
24752
+ display: block;
24753
+ width: 100%;
24754
+ text-transform: uppercase;
24755
+ font-weight: 500;
24756
+ &.active {
24757
+ color: $wizishop-blue;
24758
+ }
24759
+ }
24760
+ .switch[type='checkbox'] + label {
24761
+ height: 17px;
24762
+ }
24763
+ & > span:nth-child(1) {
24764
+ text-align: right;
24765
+ }
24766
+ }
24767
+
24768
+ &__valid {
24769
+ margin-top: 60px;
24770
+ width: 100%;
24771
+ @include flexbox();
24772
+ @include justify-content(center);
24773
+ @include align-items(center);
24774
+ @include align-content(center);
24775
+ button {
24776
+ font-size: rem(16);
24777
+ text-transform: uppercase;
24778
+ text-align: center;
24779
+ font-weight: 600;
24780
+ height: 40px;
24781
+ line-height: 40px;
24782
+ padding: 0px 40px;
24783
+ }
24784
+ &--calendar {
24785
+ margin: 20px 0;
24786
+ }
24787
+ }
24788
+
24789
+ &__time {
24790
+ width: 100%;
24791
+ margin: 0 0 40px;
24792
+ &__wrapper,
24793
+ &__text {
24794
+ width: 100%;
24795
+ @include flexbox();
24796
+ @include justify-content(center);
24797
+ @include align-items(center);
24798
+ @include align-content(center);
24799
+ }
24800
+ &__input {
24801
+ width: 100px;
24802
+ border-radius: 50%;
24803
+ border: 1px solid $wb-border-color;
24804
+ height: 100px;
24805
+ line-height: 106px;
24806
+ &:not(:first-child) {
24807
+ margin-left: 30px;
24808
+ }
24809
+ input {
24810
+ padding: 0;
24811
+ text-align: center;
24812
+ height: 45px;
24813
+ font-size: rem(30);
24814
+ border: none;
24815
+ background-color: transparent;
24816
+ color: $wb-secondary-text-color;
24817
+ width: 50%;
24818
+ min-width: 50%;
24819
+ max-width: 50%;
24820
+ margin-left: 25%;
24821
+ border-bottom: 2px dashed $wb-border-color;
24822
+ }
24823
+ }
24824
+ p {
24825
+ width: 100px;
24826
+ font-size: rem(16);
24827
+ text-transform: uppercase;
24828
+ text-align: center;
24829
+ font-weight: 600;
24830
+ margin-top: 10px;
24831
+ &:not(:first-child) {
24832
+ margin-left: 30px;
24833
+ }
24834
+ }
24835
+ }
24836
+
24837
+ &__container {
24838
+ width: 100%;
24839
+ padding: 60px;
24840
+ @include flexbox();
24841
+ @include flex-wrap(nowrap);
24842
+ @include justify-content(center);
24843
+ @include align-content(center);
24844
+ @include align-items(center);
24845
+ min-height: 680px;
24846
+ @include media('<desktop') {
24847
+ margin-bottom: 30px;
24848
+ }
24849
+ &__timer {
24850
+ width: 100%;
24851
+ max-width: 100%;
24852
+ @include flexbox();
24853
+ @include flex-wrap(wrap);
24854
+ @include justify-content(center);
24855
+ & > div {
24856
+ width: 100%;
24857
+ padding: 0 20px;
24858
+ &:nth-child(2) {
24859
+ margin-bottom: 30px;
24860
+ }
24861
+ }
24862
+ }
24863
+
24864
+ ul {
24865
+ @include flexbox();
24866
+ @include flex-wrap(nowrap);
24867
+ @include justify-content(center);
24868
+ width: 100%;
24869
+ max-width: 460px;
24870
+ list-style-type: none;
24871
+ padding: 0;
24380
24872
 
24381
- > div {
24873
+ li {
24874
+ width: 100%;
24382
24875
  position: relative;
24383
- padding: rem(15);
24384
- width: calc(100% - #{rem(80)});
24385
- background-color: lighten($wb-border-color, 8%);
24386
- margin: 0 rem(40) rem(30);
24387
- min-height: rem(60);
24388
- box-sizing: border-box;
24389
-
24390
- &:last-child {
24391
- margin: 0 rem(40);
24392
- background-color: transparent;
24393
- text-align: right;
24394
- padding: 0;
24395
- }
24396
24876
 
24397
- p {
24398
- position: absolute;
24399
- font-size: rem(12);
24400
- color: $wb-main-text-color;
24877
+ span {
24878
+ display: block;
24879
+ width: 100%;
24880
+ text-align: center;
24881
+ font-weight: 600;
24882
+ line-height: 1;
24401
24883
 
24402
24884
  &:first-child {
24403
- top: rem(5);
24404
- left: rem(10);
24405
- font-size: rem(16);
24406
- font-weight: 300;
24885
+ font-size: rem(48);
24886
+ @include mobile {
24887
+ font-size: rem(28);
24888
+ }
24407
24889
  }
24408
- &:last-child {
24409
- bottom: rem(2);
24410
- right: rem(5);
24890
+
24891
+ &:nth-child(2) {
24892
+ font-size: rem(24);
24893
+ @include mobile {
24894
+ font-size: rem(14);
24895
+ }
24411
24896
  }
24412
24897
  }
24413
24898
 
24414
- .select {
24415
- max-width: 40%;
24416
- }
24899
+ &:not(:last-child) {
24900
+ span {
24901
+ &:nth-child(3) {
24902
+ &:before {
24903
+ content: '';
24904
+ display: block;
24905
+ position: absolute;
24906
+ right: 0;
24907
+ top: 50%;
24908
+ transform: translate(50%, -50%);
24909
+ width: 6px;
24910
+ height: 6px;
24911
+ background: inherit;
24912
+ margin-top: 6px;
24913
+ border-radius: 1px;
24914
+ }
24417
24915
 
24418
- button:not(.is-info) {
24419
- background-color: $wb-main-color;
24420
- padding: rem(10) rem(15);
24421
- border: 0;
24422
- color: $wb-white;
24423
- text-transform: capitalize;
24424
- font-size: rem(14);
24916
+ &:after {
24917
+ content: '';
24918
+ display: block;
24919
+ position: absolute;
24920
+ right: 0;
24921
+ top: 50%;
24922
+ transform: translate(50%, -50%);
24923
+ width: 6px;
24924
+ height: 6px;
24925
+ background: inherit;
24926
+ margin-top: -6px;
24927
+ border-radius: 1px;
24928
+ }
24929
+ }
24930
+ }
24425
24931
  }
24426
24932
  }
24427
24933
  }
24428
24934
  }
24429
- &__noForms {
24430
- min-height: 300px;
24431
- display: flex;
24432
- justify-content: center;
24433
- align-items: center;
24434
- p {
24435
- font-size: rem(20);
24436
- font-weight: 600;
24437
- a {
24438
- color: $wb-main-color;
24439
- }
24440
- }
24441
- }
24442
- }
24443
-
24444
- .form-long_answer {
24445
- min-height: 80px;
24446
- width: 100%;
24447
- }
24448
- .wb-timer-simple {
24449
- width: 100%;
24450
-
24451
- &__wrapGlobal {
24452
- width: 100%;
24453
- position: relative;
24454
- min-height: 680px;
24455
- }
24456
-
24457
- &__calendar {
24458
- &__text {
24459
- font-size: rem(16);
24460
- text-align: center;
24461
- padding: 12px 20px;
24462
- margin: 0 0 20px 0 !important;
24463
- text-transform: none !important;
24464
- font-weight: 500 !important;
24465
- width: 100% !important;
24466
- }
24467
- &__wrapper {
24468
- @include flexbox();
24469
- @include flex-wrap(nowrap);
24470
- @include justify-content(center);
24471
- @include align-content(center);
24472
- @include align-items(center);
24473
- }
24474
- }
24475
-
24476
- &__switch {
24477
- @include flexbox();
24478
- @include flex-wrap(nowrap);
24479
- @include justify-content(space-between);
24480
- @include align-content(center);
24481
- @include align-items(center);
24482
- padding: 20px;
24483
- & > div {
24484
- width: 49px;
24485
- height: 24px;
24486
- margin: 0 15px;
24487
- }
24488
- & > span {
24489
- display: block;
24490
- width: 100%;
24491
- text-transform: uppercase;
24492
- font-weight: 500;
24493
- &.active {
24494
- color: $wizishop-blue;
24495
- }
24496
- }
24497
- .switch[type='checkbox'] + label {
24498
- height: 17px;
24499
- }
24500
- & > span:nth-child(1) {
24501
- text-align: right;
24502
- }
24503
- }
24504
-
24505
- &__valid {
24506
- margin-top: 60px;
24507
- width: 100%;
24508
- @include flexbox();
24509
- @include justify-content(center);
24510
- @include align-items(center);
24511
- @include align-content(center);
24512
- button {
24513
- font-size: rem(16);
24514
- text-transform: uppercase;
24515
- text-align: center;
24516
- font-weight: 600;
24517
- height: 40px;
24518
- line-height: 40px;
24519
- padding: 0px 40px;
24520
- }
24521
- &--calendar {
24522
- margin: 20px 0;
24523
- }
24524
- }
24525
-
24526
- &__time {
24527
- width: 100%;
24528
- margin: 0 0 40px;
24529
- &__wrapper,
24530
- &__text {
24531
- width: 100%;
24532
- @include flexbox();
24533
- @include justify-content(center);
24534
- @include align-items(center);
24535
- @include align-content(center);
24536
- }
24537
- &__input {
24538
- width: 100px;
24539
- border-radius: 50%;
24540
- border: 1px solid $wb-border-color;
24541
- height: 100px;
24542
- line-height: 106px;
24543
- &:not(:first-child) {
24544
- margin-left: 30px;
24545
- }
24546
- input {
24547
- padding: 0;
24548
- text-align: center;
24549
- height: 45px;
24550
- font-size: rem(30);
24551
- border: none;
24552
- background-color: transparent;
24553
- color: $wb-secondary-text-color;
24554
- width: 50%;
24555
- min-width: 50%;
24556
- max-width: 50%;
24557
- margin-left: 25%;
24558
- border-bottom: 2px dashed $wb-border-color;
24559
- }
24560
- }
24561
- p {
24562
- width: 100px;
24563
- font-size: rem(16);
24564
- text-transform: uppercase;
24565
- text-align: center;
24566
- font-weight: 600;
24567
- margin-top: 10px;
24568
- &:not(:first-child) {
24569
- margin-left: 30px;
24570
- }
24935
+ input[type='number']::-webkit-inner-spin-button,
24936
+ input[type='number']::-webkit-outer-spin-button {
24937
+ -webkit-appearance: none;
24938
+ margin: 0;
24571
24939
  }
24572
- }
24573
-
24574
- &__container {
24575
- width: 100%;
24576
- padding: 60px;
24577
- @include flexbox();
24578
- @include flex-wrap(nowrap);
24579
- @include justify-content(center);
24580
- @include align-content(center);
24581
- @include align-items(center);
24582
- min-height: 680px;
24583
- @include media('<desktop') {
24584
- margin-bottom: 30px;
24940
+ input[type='number'] {
24941
+ -moz-appearance: textfield;
24585
24942
  }
24586
- &__timer {
24587
- width: 100%;
24588
- max-width: 100%;
24589
- @include flexbox();
24590
- @include flex-wrap(wrap);
24591
- @include justify-content(center);
24592
- & > div {
24593
- width: 100%;
24594
- padding: 0 20px;
24595
- &:nth-child(2) {
24596
- margin-bottom: 30px;
24597
- }
24598
- }
24943
+ .wb-structure-config__content {
24944
+ width: 70%;
24599
24945
  }
24600
-
24601
- ul {
24602
- @include flexbox();
24603
- @include flex-wrap(nowrap);
24604
- @include justify-content(center);
24605
- width: 100%;
24606
- max-width: 460px;
24607
- list-style-type: none;
24608
- padding: 0;
24609
-
24610
- li {
24611
- width: 100%;
24612
- position: relative;
24613
-
24614
- span {
24615
- display: block;
24616
- width: 100%;
24617
- text-align: center;
24618
- font-weight: 600;
24619
- line-height: 1;
24620
-
24621
- &:first-child {
24622
- font-size: rem(48);
24623
- @include mobile {
24624
- font-size: rem(28);
24625
- }
24626
- }
24627
-
24628
- &:nth-child(2) {
24629
- font-size: rem(24);
24630
- @include mobile {
24631
- font-size: rem(14);
24632
- }
24633
- }
24634
- }
24635
-
24636
- &:not(:last-child) {
24637
- span {
24638
- &:nth-child(3) {
24639
- &:before {
24640
- content: '';
24641
- display: block;
24642
- position: absolute;
24643
- right: 0;
24644
- top: 50%;
24645
- transform: translate(50%, -50%);
24646
- width: 6px;
24647
- height: 6px;
24648
- background: inherit;
24649
- margin-top: 6px;
24650
- border-radius: 1px;
24651
- }
24652
-
24653
- &:after {
24654
- content: '';
24655
- display: block;
24656
- position: absolute;
24657
- right: 0;
24658
- top: 50%;
24659
- transform: translate(50%, -50%);
24660
- width: 6px;
24661
- height: 6px;
24662
- background: inherit;
24663
- margin-top: -6px;
24664
- border-radius: 1px;
24665
- }
24666
- }
24667
- }
24668
- }
24669
- }
24946
+ .datetimepicker-footer-validate {
24947
+ background-color: $primary-button !important;
24948
+ color: $wb-white !important;
24949
+ line-height: 40px;
24950
+ padding: 0px 40px;
24951
+ font-size: 1rem;
24952
+ margin-bottom: 20px;
24953
+ text-transform: uppercase;
24954
+ font-weight: 500;
24955
+ }
24956
+ .wb-structure-config__content .timepicker-hours,
24957
+ .timepicker-minutes {
24958
+ max-width: 90px;
24959
+ }
24960
+ .datetimepicker-footer {
24961
+ display: none;
24670
24962
  }
24671
- }
24672
- input[type='number']::-webkit-inner-spin-button,
24673
- input[type='number']::-webkit-outer-spin-button {
24674
- -webkit-appearance: none;
24675
- margin: 0;
24676
- }
24677
- input[type='number'] {
24678
- -moz-appearance: textfield;
24679
- }
24680
- .wb-structure-config__content {
24681
- width: 70%;
24682
- }
24683
- .datetimepicker-footer-validate {
24684
- background-color: $primary-button !important;
24685
- color: $wb-white !important;
24686
- line-height: 40px;
24687
- padding: 0px 40px;
24688
- font-size: 1rem;
24689
- margin-bottom: 20px;
24690
- text-transform: uppercase;
24691
- font-weight: 500;
24692
- }
24693
- .wb-structure-config__content .timepicker-hours,
24694
- .timepicker-minutes {
24695
- max-width: 90px;
24696
- }
24697
- .datetimepicker-footer {
24698
- display: none;
24699
- }
24700
24963
  }
24701
24964
 
24702
24965
  .ovh {
24703
- position: absolute;
24704
- top: 0;
24705
- left: 0;
24706
- width: 100%;
24707
- height: 100%;
24708
- overflow: hidden;
24709
- &--decal {
24710
- height: calc(100% - 24px);
24711
- top: 12px;
24712
- }
24966
+ position: absolute;
24967
+ top: 0;
24968
+ left: 0;
24969
+ width: 100%;
24970
+ height: 100%;
24971
+ overflow: hidden;
24972
+ &--decal {
24973
+ height: calc(100% - 24px);
24974
+ top: 12px;
24975
+ }
24713
24976
  }
24714
24977
  .wb-four-images-title {
24715
24978
  position: relative;
@@ -27272,178 +27535,179 @@ $color-size-choose: #6c6c6c;
27272
27535
  }
27273
27536
  }
27274
27537
  .wb-witness-backgroundOne {
27275
- &__tool {
27276
- overflow: hidden;
27277
- position: absolute;
27278
- top: 0;
27279
- left: 0;
27280
- width: 100%;
27281
- height: 100%;
27282
- }
27283
-
27284
- &__container {
27285
- position: relative;
27286
- min-height: 300px;
27287
-
27288
- &__item {
27289
- width: 100%;
27290
- padding: 40px;
27291
- min-height: 300px;
27292
- display: flex;
27293
- flex-wrap: wrap;
27294
- align-content: center;
27295
- background-size: cover;
27296
- background-position: center;
27297
-
27298
- &__figure {
27299
- display: block;
27538
+ &__tool {
27539
+ overflow: hidden;
27300
27540
  position: absolute;
27301
27541
  top: 0;
27302
27542
  left: 0;
27303
27543
  width: 100%;
27304
27544
  height: 100%;
27305
- z-index: 2;
27306
- cursor: pointer;
27545
+ }
27307
27546
 
27308
- &__noimage {
27309
- background-color: lighten($wb-border-color, 12%);
27310
- cursor: pointer;
27311
- display: flex;
27312
- align-items: center;
27313
- align-content: center;
27314
- justify-content: center;
27315
- position: absolute;
27316
- width: 100%;
27317
- height: 100%;
27318
- top: 0;
27319
- left: 0;
27320
- z-index: 2;
27321
- p {
27322
- position: absolute;
27323
- top: 50%;
27324
- left: 50%;
27325
- transform: translate(-50%, -50%);
27326
- text-align: center;
27327
- font-size: rem(14);
27328
- color: $wb-secondary-text-color;
27547
+ &__container {
27548
+ position: relative;
27549
+ min-height: 300px;
27329
27550
 
27330
- &:before {
27331
- position: absolute;
27332
- width: 0;
27333
- bottom: -(#{rem(3)});
27334
- height: rem(2);
27335
- transition: 200ms all;
27336
- background-color: $wb-border-color;
27337
- content: ' ';
27338
- left: 0;
27339
- }
27340
- }
27551
+ &__item {
27552
+ width: 100%;
27553
+ padding: 40px;
27554
+ min-height: 300px;
27555
+ display: flex;
27556
+ flex-wrap: wrap;
27557
+ align-content: center;
27558
+ background-size: cover;
27559
+ background-position: center;
27341
27560
 
27342
- i {
27343
- color: $wb-secondary-text-color;
27344
- text-align: center;
27345
- display: block;
27346
- font-size: rem(45);
27347
- opacity: 0.4;
27348
- transition: 200ms all;
27349
- margin-bottom: rem(10);
27350
- }
27561
+ &__figure {
27562
+ display: block;
27563
+ position: absolute;
27564
+ top: 0;
27565
+ left: 0;
27566
+ width: 100%;
27567
+ height: 100%;
27568
+ z-index: 2;
27569
+ cursor: pointer;
27351
27570
 
27352
- border: rem(1) solid lighten($wb-border-color, 12%);
27353
- transition: 200ms all;
27571
+ &__noimage {
27572
+ background-color: lighten($wb-border-color, 12%);
27573
+ cursor: pointer;
27574
+ display: flex;
27575
+ align-items: center;
27576
+ align-content: center;
27577
+ justify-content: center;
27578
+ position: absolute;
27579
+ width: 100%;
27580
+ height: 100%;
27581
+ top: 0;
27582
+ left: 0;
27583
+ z-index: 2;
27584
+ p {
27585
+ position: absolute;
27586
+ top: 50%;
27587
+ left: 50%;
27588
+ transform: translate(-50%, -50%);
27589
+ text-align: center;
27590
+ font-size: rem(14);
27591
+ color: $wb-secondary-text-color;
27354
27592
 
27355
- &:hover {
27356
- border: rem(1) solid $wb-border-color;
27593
+ &:before {
27594
+ position: absolute;
27595
+ width: 0;
27596
+ bottom: -(#{rem(3)});
27597
+ height: rem(2);
27598
+ transition: 200ms all;
27599
+ background-color: $wb-border-color;
27600
+ content: ' ';
27601
+ left: 0;
27602
+ }
27603
+ }
27357
27604
 
27358
- i {
27359
- color: darken($wb-secondary-text-color, 20%);
27360
- }
27605
+ i {
27606
+ color: $wb-secondary-text-color;
27607
+ text-align: center;
27608
+ display: block;
27609
+ font-size: rem(45);
27610
+ opacity: 0.4;
27611
+ transition: 200ms all;
27612
+ margin-bottom: rem(10);
27613
+ }
27361
27614
 
27362
- p {
27363
- color: darken($wb-secondary-text-color, 20%);
27615
+ border: rem(1) solid lighten($wb-border-color, 12%);
27616
+ transition: 200ms all;
27364
27617
 
27365
- &:before {
27366
- width: 100%;
27367
- }
27368
- }
27369
- }
27370
- }
27618
+ &:hover {
27619
+ border: rem(1) solid $wb-border-color;
27371
27620
 
27372
- &__image {
27373
- -webkit-background-size: cover;
27374
- background-position: center;
27375
- background-size: cover;
27376
- background-position: center;
27377
- }
27378
- }
27621
+ i {
27622
+ color: darken($wb-secondary-text-color, 20%);
27623
+ }
27379
27624
 
27380
- &__zindex {
27381
- position: relative;
27382
- z-index: 3;
27383
- @include media('>=desktop') {
27384
- padding: 0 40px;
27385
- }
27386
- }
27625
+ p {
27626
+ color: darken($wb-secondary-text-color, 20%);
27387
27627
 
27388
- &__hr {
27389
- height: 2px;
27390
- width: 60%;
27391
- margin: 0 auto 10px auto;
27392
- }
27628
+ &:before {
27629
+ width: 100%;
27630
+ }
27631
+ }
27632
+ }
27633
+ }
27393
27634
 
27394
- &__author,
27395
- &__testimony {
27396
- text-align: center;
27397
- display: flex;
27398
- flex-wrap: nowrap;
27399
- justify-content: center;
27635
+ &__image {
27636
+ -webkit-background-size: cover;
27637
+ background-position: center;
27638
+ background-size: cover;
27639
+ background-position: center;
27640
+ }
27641
+ }
27400
27642
 
27401
- h2 {
27402
- width: 100%;
27403
- font-size: rem(18);
27404
- line-height: rem(22);
27405
- }
27406
- }
27643
+ &__zindex {
27644
+ width: 100%;
27645
+ position: relative;
27646
+ z-index: 3;
27647
+ @include media('>=desktop') {
27648
+ padding: 0 40px;
27649
+ }
27650
+ }
27407
27651
 
27408
- &__author {
27409
- h2 {
27410
- font-size: rem(14);
27411
- line-height: rem(18);
27412
- text-align: center;
27413
- color: $white;
27414
- }
27415
- }
27652
+ &__hr {
27653
+ height: 2px;
27654
+ width: 60%;
27655
+ margin: 0 auto 10px auto;
27656
+ }
27416
27657
 
27417
- &__testimony {
27418
- margin-bottom: 10px;
27658
+ &__author,
27659
+ &__testimony {
27660
+ text-align: center;
27661
+ display: flex;
27662
+ flex-wrap: nowrap;
27663
+ justify-content: center;
27419
27664
 
27420
- p {
27421
- font-size: rem(16);
27422
- line-height: 1.6;
27423
- text-align: center;
27424
- color: $white;
27425
- }
27426
- }
27665
+ h2 {
27666
+ width: 100%;
27667
+ font-size: rem(18);
27668
+ line-height: rem(22);
27669
+ }
27670
+ }
27427
27671
 
27428
- &__url {
27429
- text-align: center;
27430
- display: flex;
27431
- flex-wrap: nowrap;
27432
- justify-content: center;
27672
+ &__author {
27673
+ h2 {
27674
+ font-size: rem(14);
27675
+ line-height: rem(18);
27676
+ text-align: center;
27677
+ color: $white;
27678
+ }
27679
+ }
27433
27680
 
27434
- &__container {
27435
- position: relative;
27436
- width: auto;
27437
- color: $white;
27438
- font-size: rem(12);
27439
- line-height: rem(14);
27440
- font-weight: 500;
27441
- cursor: pointer;
27442
- text-decoration: underline;
27681
+ &__testimony {
27682
+ margin-bottom: 10px;
27683
+
27684
+ p {
27685
+ font-size: rem(16);
27686
+ line-height: 1.6;
27687
+ text-align: center;
27688
+ color: $white;
27689
+ }
27690
+ }
27691
+
27692
+ &__url {
27693
+ text-align: center;
27694
+ display: flex;
27695
+ flex-wrap: nowrap;
27696
+ justify-content: center;
27697
+
27698
+ &__container {
27699
+ position: relative;
27700
+ width: auto;
27701
+ color: $white;
27702
+ font-size: rem(12);
27703
+ line-height: rem(14);
27704
+ font-weight: 500;
27705
+ cursor: pointer;
27706
+ text-decoration: underline;
27707
+ }
27708
+ }
27443
27709
  }
27444
- }
27445
27710
  }
27446
- }
27447
27711
  }
27448
27712
  .wb-witness-backgroundDouble {
27449
27713
  min-height: 370px;