@wizishop/angular-components 0.0.60 → 0.0.61

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