@wizishop/angular-components 0.0.57 → 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 (22) hide show
  1. package/angular-components.scss +1822 -1501
  2. package/bundles/wizishop-angular-components.umd.js +106 -6
  3. package/bundles/wizishop-angular-components.umd.js.map +1 -1
  4. package/bundles/wizishop-angular-components.umd.min.js +1 -1
  5. package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
  6. package/esm2015/lib/components/button/button.component.js +39 -4
  7. package/esm2015/lib/components/search/search.component.js +60 -0
  8. package/esm2015/lib/components/search/shared/search-option.model.js +2 -0
  9. package/esm2015/lib/components/shared-components.module.js +4 -2
  10. package/esm2015/lib/components/tag/tag.component.js +5 -3
  11. package/esm2015/public-api.js +3 -1
  12. package/fesm2015/wizishop-angular-components.js +104 -7
  13. package/fesm2015/wizishop-angular-components.js.map +1 -1
  14. package/lib/components/button/button.component.d.ts +12 -2
  15. package/lib/components/search/search.component.d.ts +23 -0
  16. package/lib/components/search/shared/search-option.model.d.ts +5 -0
  17. package/lib/components/tag/tag.component.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/public-api.d.ts +2 -0
  20. package/wizishop-angular-components-0.0.61.tgz +0 -0
  21. package/wizishop-angular-components.metadata.json +1 -1
  22. package/wizishop-angular-components-0.0.57.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;
@@ -2229,6 +2335,18 @@ $wac-color-success-popup-alert: #6DCC95!default;
2229
2335
  font-weight: 500;
2230
2336
  transition: 0.3s ease;
2231
2337
 
2338
+ &.big {
2339
+ padding: rem(11) rem(15);
2340
+ font-size: rem(14);
2341
+ font-weight: 500;
2342
+ &.wac-tag--default {
2343
+ i {
2344
+ color: $wac-second-color;
2345
+ font-size: rem(14);
2346
+ }
2347
+ }
2348
+ }
2349
+
2232
2350
  &.hover {
2233
2351
  cursor: pointer;
2234
2352
  }
@@ -3074,1282 +3192,1198 @@ span.wac-tooltip {
3074
3192
  margin: 0 auto;
3075
3193
  }
3076
3194
  }
3077
- .wac-button {
3078
- @include flexbox();
3079
- @include justify-content(center);
3080
- @include align-items(center);
3081
- position: relative;
3082
- display: block;
3083
- padding: 7px 19px;
3084
- border-style: solid;
3085
- border-width: 1px;
3086
- border-radius: 3px;
3087
- box-sizing: border-box;
3195
+ .wac-back {
3196
+ width: 40px;
3197
+ height: 40px;
3088
3198
 
3089
- * {
3090
- box-sizing: border-box;
3091
- }
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;
3092
3209
 
3093
- &.width-auto {
3094
- display: inline-block;
3095
- width: auto;
3096
- margin: 0 auto;
3097
- }
3210
+ i {
3211
+ color: $wac-second-color;
3212
+ font-size: 11px;
3213
+ line-height: 14px;
3214
+ }
3098
3215
 
3099
- &.white-space-no-wrap {
3100
- white-space: nowrap;
3216
+ &:hover {
3217
+ border-color: $wac-back-border-hover;
3218
+ transition: border-color 0.3s ease-in-out;
3219
+ }
3101
3220
  }
3102
-
3103
- &.animationText {
3104
- width: rem(40);
3105
- height: rem(40);
3106
- padding: 0!important;
3107
- border-radius: 3px;
3108
- transition: 0s linear .3s!important;
3221
+ }
3222
+ .wac-wrapper-blocs {
3223
+ &.sidebar {
3224
+ width: calc(100% + 30px);
3225
+ transform: translateX(-15px);
3109
3226
  display: flex;
3110
- justify-content: center;
3111
- align-items: center;
3112
- cursor: pointer;
3113
- border: none;
3114
- position: relative;
3115
- &:hover, &:focus {
3116
- transition: 0s!important;
3117
- border-radius: 3px 0 0 3px;
3118
- &.animation-right {
3119
- border-radius: 0 3px 3px 0;
3120
- }
3121
- .wac-button__animation {
3122
- 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%;
3123
3233
  }
3124
3234
  }
3235
+ & > :last-child:not(:first-child) {
3236
+ min-width: 340px;
3237
+ }
3238
+ & > * {
3239
+ margin: 0 15px;
3240
+ }
3125
3241
  }
3126
-
3127
- &.small {
3128
- padding: rem(4) rem(15);
3242
+ }
3243
+ .wac-field-checkbox {
3244
+ &__row {
3245
+ min-width: 100%;
3246
+ margin: 0;
3129
3247
  }
3130
-
3131
- &__wrapper {
3132
- position: relative;
3133
- z-index: 2;
3134
- color: $wac-white;
3135
- font-size: 14px;
3136
- line-height: 16px;
3137
- font-weight: 500;
3138
-
3139
- i {
3140
- 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
+ }
3141
3259
  }
3142
3260
  }
3143
3261
 
3144
- &__animation {
3145
- overflow: hidden;
3146
- max-width: 0;
3262
+ input[type='text'] {
3147
3263
  height: 40px;
3148
- position: absolute;
3149
- top: 0;
3150
- left: 95%;
3151
- z-index: 2;
3152
- transition: .3s ease!important;
3153
- .animation-right & {
3154
- left: auto;
3155
- right: 94%;
3156
- > span {
3157
- border-radius: 3px 0 0 3px;
3158
- 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;
3159
3278
  }
3160
- }
3161
- &__text {
3162
- position: absolute;
3163
- top: 0;
3164
- left: 0;
3165
- width: auto;
3166
- white-space: nowrap;
3167
- height: rem(40);
3168
- line-height: rem(40);
3169
- color: $wac-white !important;
3170
- border-radius: 0 3px 3px 0;
3171
- padding: 0 20px 0 0;
3172
- font-size: rem(14);
3173
- .is-success & {
3174
- background-color: $wac-green-color;
3279
+ &::-moz-placeholder {
3280
+ /* Firefox 19+ */
3281
+ opacity: 0;
3175
3282
  }
3176
- .is-danger & {
3177
- background-color: $wac-primary-button;
3283
+ &:-ms-input-placeholder {
3284
+ /* IE 10+ */
3285
+ opacity: 0;
3178
3286
  }
3179
- }
3180
- }
3181
-
3182
- &.alone {
3183
- padding: 7px 14.6px;
3184
-
3185
- .wac-button__wrapper i {
3186
- margin-right: 0;
3187
- }
3188
- }
3189
-
3190
- &.is-outlined {
3191
- &:hover,
3192
- &.hover {
3193
- .wac-button__wrapper, .wac-button__animation {
3194
- color: $wac-white;
3195
- transition: color 0.3s ease-in-out;
3287
+ &:-moz-placeholder {
3288
+ /* Firefox 18- */
3289
+ opacity: 0;
3196
3290
  }
3197
3291
  }
3198
3292
  }
3293
+ &.alone {
3294
+ .is-checkradio[type='checkbox'] {
3295
+ & + label {
3296
+ padding-left: 9px;
3297
+ margin-right: 0px;
3199
3298
 
3200
- &.is-dark {
3201
- background-color: $wac-main-text;
3202
- border-color: $wac-main-text;
3203
- transition: background-color 0.3s ease-in-out;
3204
-
3205
- .wac-button__loader {
3206
- background-color: $wac-main-text;
3207
- }
3208
-
3209
- &:hover,
3210
- &.hover {
3211
- background-color: $wac-main-text-lighten;
3212
- border-color: $wac-main-text-lighten;
3213
- transition: background-color 0.3s ease-in-out;
3214
- }
3215
-
3216
- &:focus,
3217
- &.focus {
3218
- background-color: $wac-main-text-lighten;
3219
- border-color: $wac-main-text-lighten;
3220
- transition: background-color 0.3s ease-in-out;
3221
- }
3222
-
3223
- &.is-outlined {
3224
- background-color: transparent;
3225
- border-color: $wac-main-text;
3226
-
3227
- .wac-button__loader {
3228
- background-color: $wac-main-text;
3229
- }
3230
-
3231
- .wac-button__wrapper, .wac-button__animation {
3232
- color: $wac-main-text;
3233
- transition: color 0.3s ease-in-out;
3234
- }
3235
-
3236
- &:hover,
3237
- &.hover {
3238
- background-color: $wac-main-text;
3239
- border-color: $wac-main-text;
3240
- .wac-button__wrapper, .wac-button__animation {
3241
- color: $wac-white;
3242
- transition: color 0.3s ease-in-out;
3299
+ &:before {
3300
+ border-width: 1px;
3301
+ width: 16px;
3302
+ height: 16px;
3303
+ border-radius: 2px;
3243
3304
  }
3244
3305
  }
3245
-
3246
- &:focus,
3247
- &.focus {
3248
- background-color: $wac-main-text;
3249
- border-color: $wac-main-text;
3250
- transition: background-color 0.3s ease-in-out;
3251
- .wac-button__wrapper, .wac-button__animation {
3252
- color: $wac-white;
3253
- transition: color 0.3s ease-in-out;
3306
+ &:checked + label {
3307
+ &:after {
3308
+ top: 7px;
3309
+ transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
3254
3310
  }
3255
3311
  }
3256
3312
  }
3257
3313
  }
3258
3314
 
3259
- &.is-info {
3260
- background-color: $wac-wizishop-blue-button;
3261
- border-color: $wac-wizishop-blue-button;
3262
- transition: background-color 0.3s ease-in-out;
3263
-
3264
- .wac-button__loader {
3265
- background-color: $wac-wizishop-blue-button-darken;
3266
- }
3267
-
3268
- &:hover,
3269
- &.hover {
3270
- background-color: $wac-wizishop-blue-button-darken;
3271
- border-color: $wac-wizishop-blue-button-darken;
3272
- transition: background-color 0.3s ease-in-out;
3273
- }
3274
-
3275
- &:focus,
3276
- &.focus {
3277
- background-color: $wac-wizishop-blue-button-focus;
3278
- border-color: $wac-wizishop-blue-button-focus;
3279
- transition: background-color 0.3s ease-in-out;
3280
- }
3281
-
3282
- &.is-outlined {
3283
- background-color: transparent;
3284
- border-color: $wac-wizishop-blue-button;
3285
-
3286
- .wac-button__loader {
3287
- background-color: $wac-wizishop-blue-button-darken;
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;
3323
+ margin-right: 0;
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;
3288
3331
  }
3289
-
3290
- .wac-button__wrapper, .wac-button__animation {
3291
- color: $wac-wizishop-blue-button;
3292
- transition: color 0.3s ease-in-out;
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;
3343
+ }
3344
+ span {
3345
+ margin: 0 0 0 rem(16);
3346
+ display: inline-block;
3293
3347
  }
3294
-
3295
3348
  &:hover,
3296
- &.hover {
3297
- background-color: $wac-wizishop-blue-button;
3298
- border-color: $wac-wizishop-blue-button;
3349
+ &:focus {
3350
+ &:before {
3351
+ border-color: $wac-input-active-color !important;
3352
+ }
3299
3353
  }
3300
-
3301
- &:focus,
3302
- &.focus {
3303
- background-color: $wac-wizishop-blue-button-focus;
3304
- border-color: $wac-wizishop-blue-button-focus;
3305
- transition: background-color 0.3s ease-in-out;
3354
+ &:before,
3355
+ &:after {
3356
+ outline: 0 !important;
3306
3357
  }
3307
3358
  }
3308
-
3309
- &.is-loading {
3310
- &:hover,
3311
- &.hover {
3312
- background-color: $wac-wizishop-blue-button;
3313
- 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
+ }
3314
3368
  }
3315
- &:focus,
3316
- &.focus {
3317
- background-color: $wac-wizishop-blue-button-focus;
3318
- border-color: $wac-wizishop-blue-button-focus;
3319
- transition: background-color 0.3s ease-in-out;
3369
+ &:not([disabled]) {
3370
+ & + label {
3371
+ &:before {
3372
+ border-color: $wac-input-active-color !important;
3373
+ }
3374
+ }
3320
3375
  }
3321
3376
  }
3322
-
3323
- &.disabled {
3324
- background-color: $wac-wizishop-blue-button-disabled;
3325
- border-color: $wac-wizishop-blue-button-disabled;
3326
- transition: 0s;
3327
- cursor: default;
3328
- .wac-button__wrapper, .wac-button__animation {
3329
- color: $wac-white;
3377
+ &:checked + label {
3378
+ color: $wac-input-radio-color-active-label;
3379
+ &:before {
3380
+ border: 1px solid $wac-input-active-color;
3381
+ background-color: $wac-input-active-color;
3382
+ transition: all 0.3s ease-in-out;
3330
3383
  }
3331
- &:hover,
3332
- &:focus,
3333
- &.hover,
3334
- &.focus {
3335
- background-color: $wac-wizishop-blue-button-disabled;
3336
- border-color: $wac-wizishop-blue-button-disabled;
3384
+ &:after {
3385
+ left: 7px;
3386
+ top: 8px;
3387
+ transition: all 0.3s ease-in-out;
3337
3388
  }
3338
3389
  }
3339
3390
  }
3340
3391
 
3341
- &.is-grey {
3342
- background-color: $wac-background-color;
3343
- border-color: $wac-background-color;
3344
- transition: background-color 0.3s ease-in-out;
3345
-
3346
- .wac-button__loader {
3347
- background-color: $wac-background-color-darken;
3348
- }
3349
-
3350
- .wac-button__wrapper, .wac-button__animation {
3351
- color: $wac-second-color;
3352
- transition: color 0.3s ease-in-out;
3353
- }
3354
-
3355
- &:hover,
3356
- &.hover {
3357
- background-color: $wac-background-color-darken;
3358
- border-color: $wac-background-color-darken;
3359
- transition: background-color 0.3s ease-in-out;
3360
- }
3361
-
3362
- &:focus,
3363
- &.focus {
3364
- background-color: $wac-background-color-focus;
3365
- border-color: $wac-background-color-focus;
3366
- transition: background-color 0.3s ease-in-out;
3367
- }
3368
-
3369
- &.is-outlined {
3370
- background-color: transparent;
3371
- border-color: $wac-border-light;
3372
-
3373
- .wac-button__loader {
3374
- background-color: $wac-background-color-darken;
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;
3375
3433
  }
3376
-
3377
- .wac-button__wrapper, .wac-button__animation {
3378
- color: $wac-second-color !important;
3379
- transition: color 0.3s ease-in-out;
3434
+ i {
3435
+ color: $wac-main-text;
3436
+ font-size: rem(14);
3437
+ margin: 0 rem(10) 0 0;
3380
3438
  }
3381
-
3382
3439
  &:hover,
3383
- &.hover {
3384
- background-color: $wac-background-color;
3385
- border-color: $wac-background-color;
3386
- }
3387
-
3388
3440
  &:focus,
3389
- &.focus {
3390
- background-color: $wac-background-color-focus;
3391
- border-color: $wac-background-color-focus;
3392
- transition: background-color 0.3s ease-in-out;
3441
+ &.active {
3442
+ border-color: $wac-wizishop-blue;
3443
+ color: $wac-main-text;
3393
3444
  }
3394
- }
3395
-
3396
- &.is-loading {
3397
- &:hover,
3398
- &.hover {
3399
- background-color: $wac-background-color;
3400
- transition: background-color 0.3s ease-in-out;
3445
+ &:not(:last-child) {
3446
+ margin: 0 rem(10) rem(10) 0;
3401
3447
  }
3402
3448
  }
3403
-
3404
- &.disabled {
3405
- background-color: $wac-background-color-disabled;
3406
- border-color: $wac-background-color-disabled;
3407
- transition: 0s;
3408
- cursor: default;
3409
-
3449
+ > span {
3450
+ position: relative;
3451
+ color: $wac-link-color;
3452
+ display: inline-block;
3453
+ transition: 0.3s ease;
3454
+ font-size: rem(14);
3455
+ line-height: rem(16);
3456
+ margin: 0 0 0 rem(30);
3457
+ cursor: pointer;
3458
+ z-index: 1;
3459
+ &:before {
3460
+ content: '';
3461
+ display: block;
3462
+ position: absolute;
3463
+ width: 100%;
3464
+ max-width: 0;
3465
+ height: 1px;
3466
+ border-radius: 3px;
3467
+ background-color: darken($wac-link-color, 15%);
3468
+ left: 0;
3469
+ bottom: -2px;
3470
+ transition: 0.3s ease;
3471
+ }
3410
3472
  &:hover,
3411
- &:focus,
3412
- &.hover,
3413
- &.focus {
3414
- background-color: $wac-background-color-disabled;
3415
- border-color: $wac-background-color-disabled;
3473
+ &:focus {
3474
+ color: darken($wac-link-color, 15%);
3475
+ &:before {
3476
+ max-width: 100%;
3477
+ }
3416
3478
  }
3417
3479
  }
3418
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;
3419
3491
 
3420
- &.is-danger {
3421
- background-color: $wac-primary-button;
3422
- border-color: $wac-primary-button;
3423
- transition: background-color 0.3s ease-in-out;
3492
+ &__wrapper {
3493
+ @include flexbox();
3494
+ @include justify-content(center);
3495
+ @include align-items(center);
3496
+ width: 100%;
3497
+ height: 100%;
3498
+ position: relative;
3424
3499
 
3425
- .wac-button__loader {
3426
- background-color: $wac-primary-button-darken;
3500
+ i {
3501
+ font-size: 14px;
3502
+ line-height: 25px;
3503
+ color: $wac-second-color;
3504
+ transition: color 0.3s ease-in-out;
3427
3505
  }
3428
3506
 
3429
- &:hover,
3430
- &.hover {
3431
- background-color: $wac-primary-button-darken;
3432
- border-color: $wac-primary-button-darken;
3433
- transition: background-color 0.3s ease-in-out;
3434
- }
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;
3435
3519
 
3436
- &:focus,
3437
- &.focus {
3438
- background-color: $wac-primary-button-focus;
3439
- border-color: $wac-primary-button-focus;
3440
- transition: background-color 0.3s ease-in-out;
3520
+ &__container {
3521
+ padding: 15px 20px;
3522
+ font-size: rem(14);
3523
+ line-height: rem(25);
3524
+ color: $wac-second-color;
3525
+ }
3441
3526
  }
3442
3527
 
3443
- &.is-outlined {
3444
- background-color: transparent;
3445
- border-color: $wac-primary-button;
3446
-
3447
- .wac-button__wrapper, .wac-button__animation {
3448
- color: $wac-primary-button;
3528
+ &:hover {
3529
+ i {
3530
+ color: $wac-input-active-color;
3449
3531
  transition: color 0.3s ease-in-out;
3450
3532
  }
3451
3533
 
3452
- &:hover,
3453
- &.hover {
3454
- background-color: $wac-primary-button;
3455
- border-color: $wac-primary-button;
3456
- }
3457
-
3458
- &:focus,
3459
- &.focus {
3460
- background-color: $wac-primary-button-focus;
3461
- border-color: $wac-primary-button-focus;
3462
- transition: background-color 0.3s ease-in-out;
3463
- }
3464
- }
3465
-
3466
- &.is-loading {
3467
- &:hover,
3468
- &.hover {
3469
- background-color: $wac-primary-button;
3470
- 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;
3471
3539
  }
3472
3540
  }
3473
-
3474
- &.opacity {
3475
- background-color: $wac-primary-button-light;
3476
- border-color: $wac-primary-button-light;
3477
- &:hover, &:focus {
3478
- background-color: $wac-primary-button;
3479
- border-color: $wac-primary-button;
3480
- }
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;
3481
3556
  }
3482
3557
 
3483
- &.disabled {
3484
- background-color: $wac-primary-button-disabled;
3485
- border-color: $wac-primary-button-disabled;
3486
- transition: 0s;
3487
- cursor: default;
3488
-
3489
- .wac-button__wrapper, .wac-button__animation {
3490
- color: $wac-white;
3491
- }
3492
-
3493
- &:hover,
3494
- &:focus,
3495
- &.hover,
3496
- &.focus {
3497
- background-color: $wac-primary-button-disabled;
3498
- border-color: $wac-primary-button-disabled;
3558
+ &.white {
3559
+ .cls-0,
3560
+ .cls-1,
3561
+ .cls-2 {
3562
+ fill: white;
3499
3563
  }
3500
3564
  }
3501
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;
3502
3585
 
3503
- &.is-success {
3504
- background-color: $wac-green-color;
3505
- border-color: $wac-green-color;
3506
- transition: background-color 0.3s ease-in-out;
3507
-
3508
- .wac-button__loader {
3509
- background-color: $wac-green-color-darken;
3510
- }
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;
3511
3607
 
3512
- &:hover,
3513
- &.hover {
3514
- background-color: $wac-green-color-darken;
3515
- border-color: $wac-green-color-darken;
3516
- transition: background-color 0.3s ease-in-out;
3517
- }
3608
+ &__content {
3609
+ position: relative;
3610
+ overflow: hidden;
3611
+ display: flex;
3518
3612
 
3519
- &:focus,
3520
- &.focus {
3521
- background-color: $wac-green-color-focus;
3522
- border-color: $wac-green-color-focus;
3523
- transition: background-color 0.3s ease-in-out;
3524
3613
  }
3525
3614
 
3526
- &.is-outlined {
3527
- background-color: transparent;
3528
- border-color: $wac-green-color;
3529
-
3530
- .wac-button__wrapper, .wac-button__animation {
3531
- color: $wac-green-color;
3532
- transition: color 0.3s ease-in-out;
3533
- }
3534
-
3535
- &:hover,
3536
- &.hover {
3537
- background-color: $wac-green-color;
3538
- border-color: $wac-green-color;
3539
- }
3540
-
3541
- &:focus,
3542
- &.focus {
3543
- background-color: $wac-green-color-focus;
3544
- border-color: $wac-green-color-focus;
3545
- transition: background-color 0.3s ease-in-out;
3546
- }
3615
+ div:not([class]) {
3616
+ width: 100%;
3617
+ margin: 0 0 20px;
3547
3618
  }
3548
3619
 
3549
- &.is-loading {
3550
- &:hover,
3551
- &.hover {
3552
- background-color: $wac-green-color;
3553
- transition: background-color 0.3s ease-in-out;
3554
- }
3555
- }
3556
- &.opacity {
3557
- background-color: $wac-green-opacity;
3558
- border-color: $wac-green-opacity;
3559
- &:hover, &:focus {
3560
- background-color: $wac-green-color;
3561
- border-color: $wac-green-color;
3562
- }
3620
+ > * {
3621
+ width: 100%;
3563
3622
  }
3564
- &.disabled {
3565
- background-color: $wac-green-color-disabled;
3566
- border-color: $wac-green-color-disabled;
3567
- transition: 0s;
3568
- cursor: default;
3569
3623
 
3570
- .wac-button__wrapper, .wac-button__animation {
3571
- color: $wac-white;
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;
3572
3640
  }
3573
-
3574
- &:hover,
3575
- &:focus,
3576
- &.hover,
3577
- &.focus {
3578
- background-color: $wac-green-color-disabled;
3641
+ &:hover, &:focus {
3642
+ background-color: $wac-main-text;
3643
+ i {
3644
+ color: $wac-white;
3645
+ }
3579
3646
  }
3580
3647
  }
3581
- }
3582
-
3583
- &.is-light {
3584
- background-color: transparent;
3585
- border-color: $wac-border-color;
3586
- transition: background-color 0.3s ease-in-out;
3587
-
3588
- .wac-button__loader {
3589
- background-color: $wac-hover-btn-grey;
3590
- }
3591
-
3592
- .wac-button__wrapper, .wac-button__animation {
3593
- color: $wac-secondary-color;
3594
- }
3595
3648
 
3596
- &:hover,
3597
- &.hover {
3598
- background-color: $wac-hover-btn-grey;
3599
- transition: background-color 0.3s ease-in-out;
3649
+ img {
3650
+ display: block;
3651
+ max-width: 200px;
3652
+ margin: 0 auto rem(20);
3600
3653
  }
3601
3654
 
3602
- &.is-loading {
3603
- &:hover,
3604
- &.hover {
3605
- background-color: transparent;
3606
- transition: background-color 0.3s ease-in-out;
3607
- }
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;
3608
3662
  }
3609
- }
3610
3663
 
3611
- &.disabled {
3612
- background-color: $wac-disabled-button-background;
3613
- border-color: $wac-border-form;
3614
-
3615
- .wac-button__wrapper, .wac-button__animation {
3616
- color: $wac-disabled-button-text;
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;
3617
3672
  }
3618
- }
3619
3673
 
3620
- &.is-outlined {
3621
- &:hover,
3622
- &.hover {
3623
- .wac-button__wrapper, .wac-button__animation {
3624
- color: $wac-white;
3625
- transition: 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;
3626
3683
  }
3627
3684
  }
3628
3685
  }
3629
-
3630
- &__loader {
3686
+ &__background {
3687
+ z-index: 1;
3631
3688
  position: absolute;
3632
- left: -1px;
3633
3689
  top: 0;
3690
+ left: 0;
3691
+ width: 100%;
3634
3692
  height: 100%;
3635
- z-index: 1;
3636
- transition: width 0.3s ease-in-out;
3637
- overflow: hidden;
3693
+ background-color: transparentize($wac-main-text, .5);
3694
+ }
3695
+ }
3638
3696
 
3639
- span {
3640
- position: absolute;
3641
- left: 20px;
3642
- top: 7px;
3643
- color: $wac-white;
3644
- overflow: hidden;
3645
- text-overflow: clip;
3646
- font-size: 14px;
3647
- line-height: 26px;
3648
- white-space: nowrap;
3649
- z-index: 3;
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;
3650
3711
 
3651
- i {
3652
- margin-right: 1.4px;
3653
- }
3654
- }
3712
+ * {
3713
+ box-sizing: border-box;
3714
+ }
3655
3715
 
3656
- &.outlined {
3657
- z-index: 4;
3658
- }
3716
+ &.width-auto {
3717
+ display: inline-block;
3718
+ width: auto;
3719
+ margin: 0 auto;
3659
3720
  }
3660
3721
 
3661
- &.alone {
3662
- .wac-button__loader span {
3663
- left: 14.6px;
3664
- }
3722
+ &.white-space-no-wrap {
3723
+ white-space: nowrap;
3665
3724
  }
3666
3725
 
3667
- &.opacity {
3668
- min-width: rem(40);
3669
- min-height: rem(40);
3726
+ &.animationText {
3727
+ width: rem(40);
3728
+ height: rem(40);
3729
+ padding: 0!important;
3730
+ border-radius: 3px;
3731
+ transition: 0s linear .3s!important;
3732
+ display: flex;
3733
+ justify-content: center;
3734
+ align-items: center;
3735
+ cursor: pointer;
3736
+ border: none;
3737
+ position: relative;
3738
+ &:hover, &:focus {
3739
+ transition: 0s!important;
3740
+ border-radius: 3px 0 0 3px;
3741
+ &.animation-right {
3742
+ border-radius: 0 3px 3px 0;
3743
+ }
3744
+ .wac-button__animation {
3745
+ transition: .3s ease!important;
3746
+ }
3747
+ }
3748
+ }
3670
3749
 
3671
- &.is-success {
3672
- i {
3673
- color: $wac-green-color!important;
3750
+ &.small {
3751
+ padding: rem(4) rem(15);
3752
+ }
3753
+
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;
3674
3782
  }
3675
- &:hover, &:focus {
3676
- i {
3677
- color: $wac-white!important;
3678
- }
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;
3679
3801
  }
3680
3802
  }
3803
+ }
3681
3804
 
3682
- &.is-danger {
3683
- i {
3684
- color: $wac-primary-button!important;
3805
+ &.deletePosition-center .wac-button__confirmDelete {
3806
+ left: 50%;
3807
+ transform: translateX(-50%) translateY(-1px);
3808
+ }
3809
+
3810
+ &.deletePosition-right .wac-button__confirmDelete {
3811
+ right: 0;
3812
+ transform: translateY(-1px);
3813
+ }
3814
+
3815
+ &.deletePosition-left .wac-button__confirmDelete {
3816
+ left: 0;
3817
+ transform: translateY(-1px);
3818
+ }
3819
+
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%);
3685
3835
  }
3836
+ }
3837
+ .is-danger & {
3838
+ background-color: $wac-primary-button;
3686
3839
  &:hover, &:focus {
3687
- i {
3688
- color: $wac-white!important;
3689
- }
3840
+ background-color: darken($wac-primary-button, 15%);
3690
3841
  }
3691
3842
  }
3843
+ &__text {
3844
+ position: absolute;
3845
+ top: 0;
3846
+ left: 50%;
3847
+ transform: translateX(-50%);
3848
+ width: auto;
3849
+ white-space: nowrap;
3850
+ height: rem(40);
3851
+ line-height: rem(40);
3852
+ color: $wac-white !important;
3853
+ padding: 0 20px;
3854
+ font-size: rem(14);
3855
+ opacity: 0;
3856
+ transition: .3s ease;
3857
+ }
3692
3858
  }
3693
- }
3694
- .wac-wrapper-blocs {
3695
- &.sidebar {
3696
- width: calc(100% + 30px);
3697
- transform: translateX(-15px);
3698
- display: flex;
3699
- flex-wrap: nowrap;
3700
- align-items: flex-start;
3701
- align-content: flex-start;
3702
- & > :first-child {
3703
- @include media('>=desktop') {
3704
- width: 100%;
3859
+
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;
3705
3870
  }
3706
3871
  }
3707
- & > :last-child:not(:first-child) {
3708
- min-width: 340px;
3872
+ }
3873
+
3874
+ &.alone {
3875
+ padding: 7px 14.6px;
3876
+
3877
+ .wac-button__wrapper i {
3878
+ margin-right: 0;
3709
3879
  }
3710
- & > * {
3711
- margin: 0 15px;
3880
+ }
3881
+
3882
+ &.is-outlined {
3883
+ &:hover,
3884
+ &.hover {
3885
+ .wac-button__wrapper, .wac-button__animation {
3886
+ color: $wac-white;
3887
+ transition: color 0.3s ease-in-out;
3888
+ }
3712
3889
  }
3713
3890
  }
3714
- }
3715
- .wac-dropdown {
3716
- display: inline-block;
3717
- width: 40px;
3718
- height: 40px;
3719
3891
 
3720
- &__wrapper {
3721
- @include flexbox();
3722
- @include justify-content(center);
3723
- @include align-items(center);
3724
- width: 100%;
3725
- height: 100%;
3726
- position: relative;
3892
+ &.is-dark {
3893
+ background-color: $wac-main-text;
3894
+ border-color: $wac-main-text;
3895
+ transition: background-color 0.3s ease-in-out;
3727
3896
 
3728
- &__icon {
3729
- font-size: 30px;
3730
- line-height: 18px;
3731
- color: $wac-second-color;
3732
- transition: color 0.3s ease, transform 0.3s ease;
3897
+ .wac-button__loader {
3898
+ background-color: $wac-main-text;
3733
3899
  }
3734
3900
 
3735
- &__sublevel {
3736
- position: absolute;
3737
- width: 160px;
3738
- top: 100%;
3739
- right: 0;
3740
- z-index: -1;
3741
- opacity: 0;
3742
- background-color: $wac-white;
3743
- border-radius: rem(3);
3744
- box-shadow: 0px 2px 5px $wac-info-box-shadow;
3745
- visibility: hidden;
3746
- transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
3747
-
3748
- &__container {
3749
- padding: 10px 10px;
3750
- border: 1px solid $wac-border-color;
3901
+ &:hover,
3902
+ &.hover {
3903
+ background-color: $wac-main-text-lighten;
3904
+ border-color: $wac-main-text-lighten;
3905
+ transition: background-color 0.3s ease-in-out;
3906
+ }
3751
3907
 
3752
- &__item {
3753
- padding: 5.7px 10px;
3754
- font-size: 14px;
3755
- line-height: 24px;
3756
- color: $wac-second-color;
3757
- cursor: pointer;
3758
- transition: background-color 0.3s ease, color 0.3s ease;
3759
- display: flex;
3760
- justify-content: flex-start;
3761
- align-items: center;
3762
- align-content: center;
3908
+ &:focus,
3909
+ &.focus {
3910
+ background-color: $wac-main-text-lighten;
3911
+ border-color: $wac-main-text-lighten;
3912
+ transition: background-color 0.3s ease-in-out;
3913
+ }
3763
3914
 
3764
- i {
3765
- min-width: 15px;
3766
- margin-right: 5px;
3767
- text-align: center;
3768
- }
3769
- span {
3770
- white-space: nowrap;
3771
- }
3915
+ &.is-outlined {
3916
+ background-color: transparent;
3917
+ border-color: $wac-main-text;
3772
3918
 
3773
- &:hover {
3774
- background-color: $wac-gray-background;
3775
- transition: background-color 0.3s ease, color 0.3s ease;
3776
- color: $wac-input-active-color;
3777
- }
3778
- }
3919
+ .wac-button__loader {
3920
+ background-color: $wac-main-text;
3779
3921
  }
3780
- }
3781
3922
 
3782
- &:hover {
3783
- .wac-dropdown__wrapper__icon {
3784
- color: $wac-wizishop-blue;
3785
- transform: rotate(90deg);
3786
- transition: color 0.3s ease, transform 0.3s ease;
3923
+ .wac-button__wrapper, .wac-button__animation {
3924
+ color: $wac-main-text;
3925
+ transition: color 0.3s ease-in-out;
3787
3926
  }
3788
3927
 
3789
- .wac-dropdown__wrapper__sublevel {
3790
- visibility: visible;
3791
- opacity: 1;
3792
- z-index: 2;
3793
- transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
3794
- }
3795
- }
3796
- }
3797
- }
3798
- h1.wac-h1 {
3799
- font-size: rem(30);
3800
- line-height: rem(35);
3801
- font-weight: 600;
3802
- color: $wac-main-text;
3803
- }
3804
- .wac-header-page {
3805
- width: 100%;
3806
- background-color: transparent;
3807
- position: relative;
3808
- z-index: 2;
3809
- &__maxWidth {
3810
- width: 100%;
3811
- margin: 0 auto;
3812
- &__top {
3813
- width: 100%;
3814
- display: flex;
3815
- justify-content: space-between;
3816
- align-items: center;
3817
- margin: 0 0 27px;
3818
- @include media('<tablet') {
3819
- flex-wrap: wrap;
3820
- justify-content: flex-start;
3821
- align-items: flex-start;
3822
- margin: 0;
3823
- }
3824
- &__left {
3825
- width: auto;
3826
- display: flex;
3827
- align-items: center;
3828
- align-content: center;
3829
- margin: 0 10px 0 0;
3830
- @include media('<tablet') {
3831
- width: 100%;
3832
- margin: 0 0 30px;
3833
- }
3834
- a {
3835
- display: flex;
3836
- min-width: 40px;
3837
- height: 40px;
3838
- border-radius: 3px;
3839
- border: 1px solid $wac-border-light;
3840
- margin: 0 20px 0 0;
3841
- transition: 0.3s ease;
3842
- justify-content: center;
3843
- align-items: center;
3844
- i {
3845
- font-size: rem(12);
3846
- font-weight: 400;
3847
- color: $wac-second-color;
3848
- }
3849
- &:hover,
3850
- &:focus {
3851
- background-color: $wizishop-blue;
3852
- border-color: $wizishop-blue;
3853
- i {
3854
- color: $white;
3855
- }
3856
- }
3857
- & + * {
3858
- white-space: nowrap;
3859
- }
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;
3860
3935
  }
3861
3936
  }
3862
- &__right {
3863
- width: 100%;
3864
- display: flex;
3865
- justify-content: flex-end;
3866
- align-items: center;
3867
- align-content: center;
3868
- margin: 0 0 0 10px;
3869
- @include media('<tablet') {
3870
- width: 100%;
3871
- margin: 0;
3872
- justify-content: center;
3873
- }
3874
- > * {
3875
- &:not(:last-child) {
3876
- margin: 0 20px 0 0;
3877
- }
3937
+
3938
+ &:focus,
3939
+ &.focus {
3940
+ background-color: $wac-main-text;
3941
+ border-color: $wac-main-text;
3942
+ transition: background-color 0.3s ease-in-out;
3943
+ .wac-button__wrapper, .wac-button__animation {
3944
+ color: $wac-white;
3945
+ transition: color 0.3s ease-in-out;
3878
3946
  }
3879
3947
  }
3880
3948
  }
3881
3949
  }
3882
- }
3883
- h2.wac-h2 {
3884
- font-size: rem(18);
3885
- line-height: rem(21);
3886
- font-weight: 500;
3887
- color: $wac-main-text;
3888
- }a.wac-link {
3889
- position: relative;
3890
- color: $wac-link-color;
3891
- display: inline-block;
3892
- transition: 0.3s ease;
3893
- font-size: rem(14);
3894
- line-height: rem(16);
3895
- &:before {
3896
- content: '';
3897
- display: block;
3898
- position: absolute;
3899
- width: 100%;
3900
- max-width: 0;
3901
- height: 1px;
3902
- border-radius: 3px;
3903
- background-color: darken($wac-link-color, 15%);
3904
- left: 0;
3905
- bottom: -2px;
3906
- transition: 0.3s ease;
3907
- }
3908
- &:hover,
3909
- &:focus {
3910
- color: darken($wac-link-color, 15%);
3911
- &:before {
3912
- max-width: 100%;
3950
+
3951
+ &.is-info {
3952
+ background-color: $wac-wizishop-blue-button;
3953
+ border-color: $wac-wizishop-blue-button;
3954
+ transition: background-color 0.3s ease-in-out;
3955
+
3956
+ .wac-button__loader {
3957
+ background-color: $wac-wizishop-blue-button-darken;
3913
3958
  }
3914
- }
3915
- }
3916
- h3.wac-h3 {
3917
- font-size: rem(16);
3918
- line-height: rem(19);
3919
- font-weight: 500;
3920
- color: $wac-main-text;
3921
- &.grey {
3922
- color: $wac-second-color;
3923
- }
3924
- }
3925
- .wac-multiple-search-plus {
3926
3959
 
3927
- &__wrapper {
3928
- margin: rem(14) 0;
3929
- width: fit-content;
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
+ }
3930
3966
 
3931
- &__block {
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
+ }
3932
3973
 
3933
- display: flex;
3934
- align-items: center;
3935
- justify-content: space-between;
3936
- align-content: center;
3937
- color: $wac-white;
3938
- font-size: rem(14);
3939
- line-height: rem(16);
3940
- border-radius: rem(3);
3941
- padding: rem(8) rem(15);
3942
- font-weight: 500;
3943
- transition: 0.3s ease;
3944
- margin: rem(10) 0;
3974
+ &.is-outlined {
3975
+ background-color: transparent;
3976
+ border-color: $wac-wizishop-blue-button;
3945
3977
 
3946
- .wac-text {
3947
- margin: 0;
3978
+ .wac-button__loader {
3979
+ background-color: $wac-wizishop-blue-button-darken;
3948
3980
  }
3949
3981
 
3950
- :nth-child(n){
3951
- padding: 0 3px;
3982
+ .wac-button__wrapper, .wac-button__animation {
3983
+ color: $wac-wizishop-blue-button;
3984
+ transition: color 0.3s ease-in-out;
3952
3985
  }
3953
3986
 
3954
- i {
3955
- color: $wac-white;
3956
- font-weight: 400;
3957
- margin: 0 0 0 rem(15);
3958
- font-size: rem(13);
3959
- cursor: pointer;
3987
+ &:hover,
3988
+ &.hover {
3989
+ background-color: $wac-wizishop-blue-button;
3990
+ border-color: $wac-wizishop-blue-button;
3960
3991
  }
3961
3992
 
3962
- &.default {
3963
- background-color: $wac-tag-default;
3964
- border: 1px solid $wac-border-light;
3965
- color: $wac-second-color;
3966
- font-weight: 400;
3967
- i {
3968
- color: $wac-border-form;
3969
- }
3970
- &.hover:hover,
3971
- &.hover:focus {
3972
- background-color: darken($wac-tag-default, 15%);
3973
- color: $wac-main-text;
3974
- i {
3975
- color: $wac-main-text;
3976
- }
3977
- }
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;
3998
+ }
3999
+ }
4000
+
4001
+ &.is-loading {
4002
+ &:hover,
4003
+ &.hover {
4004
+ background-color: $wac-wizishop-blue-button;
4005
+ transition: background-color 0.3s ease-in-out;
4006
+ }
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;
3978
4012
  }
4013
+ }
3979
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
+ }
3980
4030
  }
3981
4031
  }
3982
4032
 
3983
- }
3984
-
3985
- .wac-multiple-search {
3986
- width: 100%;
3987
- min-height: 50px;
3988
- border-radius: 3px;
3989
- background-color: $wac-white;
3990
- position: relative;
3991
- z-index: 2;
3992
- border: 1px solid $wac-border-light;
3993
- transition: 0.3s ease;
3994
- &.open {
3995
- border-color: $wac-wizishop-blue;
4033
+ &.is-grey {
4034
+ background-color: $wac-background-color;
4035
+ border-color: $wac-background-color;
4036
+ transition: background-color 0.3s ease-in-out;
4037
+
4038
+ .wac-button__loader {
4039
+ background-color: $wac-background-color-darken;
4040
+ }
4041
+
4042
+ .wac-button__wrapper, .wac-button__animation {
4043
+ color: $wac-second-color;
4044
+ transition: color 0.3s ease-in-out;
4045
+ }
4046
+
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;
4067
+ }
4068
+
4069
+ .wac-button__wrapper, .wac-button__animation {
4070
+ color: $wac-second-color !important;
4071
+ transition: color 0.3s ease-in-out;
4072
+ }
4073
+
4074
+ &:hover,
4075
+ &.hover {
4076
+ background-color: $wac-background-color;
4077
+ border-color: $wac-background-color;
4078
+ }
4079
+
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;
4085
+ }
4086
+ }
4087
+
4088
+ &.is-loading {
4089
+ &:hover,
4090
+ &.hover {
4091
+ background-color: $wac-background-color;
4092
+ transition: background-color 0.3s ease-in-out;
4093
+ }
4094
+ }
4095
+
4096
+ &.disabled {
4097
+ background-color: $wac-background-color-disabled;
4098
+ border-color: $wac-background-color-disabled;
4099
+ transition: 0s;
4100
+ cursor: default;
4101
+
4102
+ &:hover,
4103
+ &:focus,
4104
+ &.hover,
4105
+ &.focus {
4106
+ background-color: $wac-background-color-disabled;
4107
+ border-color: $wac-background-color-disabled;
4108
+ }
4109
+ }
3996
4110
  }
3997
- &__wrapper {
3998
- position: relative;
3999
- display: flex;
4000
- justify-content: space-between;
4001
- align-items: stretch;
4002
- align-content: stretch;
4003
- flex-wrap: nowrap;
4004
- @include media('<tablet') {
4005
- 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;
4006
4119
  }
4007
- &__left {
4008
- width: auto;
4009
- display: flex;
4010
- justify-content: space-between;
4011
- align-content: center;
4012
- align-items: center;
4013
- flex-wrap: nowrap;
4014
- position: relative;
4015
- min-height: 50px;
4016
- transition: background-color 0.3s ease;
4017
- background-color: $wac-select-icon-background;
4018
- &__background {
4019
- position: absolute;
4020
- width: 100%;
4021
- left: 0;
4022
- top: 0;
4023
- height: 100%;
4024
- opacity: 0;
4025
- z-index: 4;
4026
- transition: opacity 0.3s ease;
4027
- 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;
4028
4142
  }
4029
- > span {
4030
- color: $wac-second-color;
4031
- white-space: nowrap;
4032
- font-size: rem(14);
4033
- line-height: rem(16);
4034
- margin: 0 40px 0 20px;
4035
- transition: 0.3s ease;
4036
- position: relative;
4037
- z-index: 2;
4038
- cursor: pointer;
4039
- @include media('<tablet') {
4040
- text-indent: -9999999px;
4041
- margin: 0;
4042
- width: 11px;
4043
- }
4143
+
4144
+ &:hover,
4145
+ &.hover {
4146
+ background-color: $wac-primary-button;
4147
+ border-color: $wac-primary-button;
4044
4148
  }
4045
- > i {
4046
- transition: 0.3s ease;
4047
- position: relative;
4048
- z-index: 2;
4049
- cursor: pointer;
4050
- &:nth-child(2) {
4051
- font-size: rem(10);
4052
- color: $wac-main-text;
4053
- margin: 0 20px 0 0;
4054
- @include media('<tablet') {
4055
- margin: 0 10px 0 0;
4056
- }
4057
- }
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;
4058
4155
  }
4059
- &__select {
4060
- position: absolute;
4061
- top: 50px;
4062
- width: 100%;
4063
- left: 0;
4064
- margin-top: 11px;
4065
- background-color: $wac-white;
4066
- z-index: 3;
4067
- box-shadow: 3px 3px 20px $wac-multiple-search-box-shadow;
4068
- border-radius: 3px;
4069
- border: 1px solid $wac-border-light;
4070
- padding: 10px;
4071
- min-width: 340px;
4072
- &__item {
4073
- display: inline-flex;
4074
- width: 100%;
4075
- font-size: rem(14);
4076
- line-height: rem(30);
4077
- cursor: pointer;
4078
- transition: 0.3s ease;
4079
- position: relative;
4080
- padding: 0 10px;
4081
- .wac-text {
4082
- margin: 0;
4083
- }
4084
- :nth-child(n) {
4085
- padding: 2px;
4086
- }
4087
- &:nth-child(2n) {
4088
- background-color: $wac-gray-background;
4089
- }
4090
- &:not(:last-child) {
4091
- margin: 0 0 rem(10);
4092
- }
4093
- span {
4094
- color: $wac-main-text;
4095
- font-size: rem(12);
4096
- text-align: left;
4097
- }
4098
- &:hover,
4099
- &:focus {
4100
- background-color: darken($wac-gray-background, 15%);
4101
- color: $wac-main-text;
4102
- }
4103
- }
4156
+ }
4157
+
4158
+ &.is-loading {
4159
+ &:hover,
4160
+ &.hover {
4161
+ background-color: $wac-primary-button;
4162
+ transition: background-color 0.3s ease-in-out;
4104
4163
  }
4164
+ }
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;
4172
+ }
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;
4183
+ }
4184
+
4105
4185
  &:hover,
4106
4186
  &:focus,
4107
- &.open {
4108
- background-color: $wac-hover-multiple-search;
4187
+ &.hover,
4188
+ &.focus {
4189
+ background-color: $wac-primary-button-disabled;
4190
+ border-color: $wac-primary-button-disabled;
4109
4191
  }
4110
4192
  }
4111
- &__right {
4112
- width: 100%;
4113
- min-height: 50px;
4114
- position: relative;
4115
- form {
4116
- width: 100%;
4193
+ }
4194
+
4195
+ &.is-success {
4196
+ background-color: $wac-green-color;
4197
+ border-color: $wac-green-color;
4198
+ transition: background-color 0.3s ease-in-out;
4199
+
4200
+ .wac-button__loader {
4201
+ background-color: $wac-green-color-darken;
4202
+ }
4203
+
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;
4209
+ }
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;
4117
4225
  }
4118
- input {
4119
- background: transparent;
4120
- border: none;
4121
- color: $wac-main-text;
4122
- font-size: rem(14);
4123
- height: 50px;
4124
- line-height: 50px;
4125
- padding: 0 20px 0 48px;
4126
- font-weight: 400;
4127
- width: 100%;
4128
- @include media('<tablet') {
4129
- padding: 0 0 0 10px;
4130
- }
4131
- &::-webkit-input-placeholder {
4132
- /* Chrome/Opera/Safari */
4133
- color: $wac-multiple-search-input-color;
4134
- opacity: 1;
4135
- font-weight: 400;
4136
- @include media('<tablet') {
4137
- font-size: rem(11);
4138
- }
4139
- }
4140
- &::-moz-placeholder {
4141
- /* Firefox 19+ */
4142
- color: $wac-multiple-search-input-color;
4143
- opacity: 1;
4144
- font-weight: 400;
4145
- @include media('<tablet') {
4146
- font-size: rem(11);
4147
- }
4148
- }
4149
- &:-ms-input-placeholder {
4150
- /* IE 10+ */
4151
- color: $wac-multiple-search-input-color;
4152
- opacity: 1;
4153
- font-weight: 400;
4154
- @include media('<tablet') {
4155
- font-size: rem(11);
4156
- }
4157
- }
4158
- &:-moz-placeholder {
4159
- /* Firefox 18- */
4160
- color: $wac-multiple-search-input-color;
4161
- opacity: 1;
4162
- font-weight: 400;
4163
- @include media('<tablet') {
4164
- font-size: rem(11);
4165
- }
4166
- }
4167
- &:focus {
4168
- & + button i {
4169
- color: $wac-main-text;
4170
- }
4171
- &::-webkit-input-placeholder {
4172
- /* Chrome/Opera/Safari */
4173
- color: $wac-white;
4174
- opacity: 1;
4175
- }
4176
- &::-moz-placeholder {
4177
- /* Firefox 19+ */
4178
- color: $wac-white;
4179
- opacity: 1;
4180
- }
4181
- &:-ms-input-placeholder {
4182
- /* IE 10+ */
4183
- color: $wac-white;
4184
- opacity: 1;
4185
- }
4186
- &:-moz-placeholder {
4187
- /* Firefox 18- */
4188
- color: $wac-white;
4189
- opacity: 1;
4190
- }
4191
- }
4226
+
4227
+ &:hover,
4228
+ &.hover {
4229
+ background-color: $wac-green-color;
4230
+ border-color: $wac-green-color;
4192
4231
  }
4193
- button {
4194
- display: flex;
4195
- align-items: center;
4196
- align-content: center;
4197
- justify-content: center;
4198
- width: 18px;
4199
- height: 18px;
4200
- border-radius: 3px;
4201
- position: absolute;
4202
- left: 20px;
4203
- top: 50%;
4204
- transform: translateY(-50%);
4205
- border: none;
4206
- cursor: pointer;
4207
- background-color: $wac-white;
4208
- i {
4209
- font-size: rem(18);
4210
- color: $wac-color-icon-search-multiple-search;
4211
- transition: 0.3s ease;
4212
- }
4213
- &:hover {
4214
- i {
4215
- color: $wac-wizishop-blue !important;
4216
- }
4217
- }
4232
+
4233
+ &:focus,
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;
4238
+ }
4239
+ }
4240
+
4241
+ &.is-loading {
4242
+ &:hover,
4243
+ &.hover {
4244
+ background-color: $wac-green-color;
4245
+ transition: background-color 0.3s ease-in-out;
4246
+ }
4247
+ }
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;
4218
4271
  }
4219
4272
  }
4220
4273
  }
4221
- &__error {
4222
- position: absolute;
4223
- top: 100%;
4224
- margin-top: 10px;
4225
- width: auto;
4226
- right: 0;
4227
- height: 30px;
4228
- line-height: 30px;
4229
- text-align: center;
4230
- background-color: $wac-multiple-search-error;
4231
- color: $wac-white;
4232
- font-size: rem(16);
4233
- font-weight: 500;
4234
- white-space: nowrap;
4235
- padding: 0 20px;
4236
- border-radius: 3px;
4274
+
4275
+ &.is-light {
4276
+ background-color: transparent;
4277
+ border-color: $wac-border-color;
4278
+ transition: background-color 0.3s ease-in-out;
4279
+
4280
+ .wac-button__loader {
4281
+ background-color: $wac-hover-btn-grey;
4282
+ }
4283
+
4284
+ .wac-button__wrapper, .wac-button__animation {
4285
+ color: $wac-secondary-color;
4286
+ }
4287
+
4288
+ &:hover,
4289
+ &.hover {
4290
+ background-color: $wac-hover-btn-grey;
4291
+ transition: background-color 0.3s ease-in-out;
4292
+ }
4293
+
4294
+ &.is-loading {
4295
+ &:hover,
4296
+ &.hover {
4297
+ background-color: transparent;
4298
+ transition: background-color 0.3s ease-in-out;
4299
+ }
4300
+ }
4237
4301
  }
4238
- }
4239
- h4.wac-h4 {
4240
- font-size: rem(14);
4241
- line-height: rem(16);
4242
- font-weight: 500;
4243
- color: $wac-main-text;
4244
- &.grey {
4245
- color: $wac-second-color;
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
+ }
4246
4310
  }
4247
- }
4248
- .wac-back {
4249
- width: 40px;
4250
- height: 40px;
4251
4311
 
4252
- &__wrapper {
4253
- @include flexbox();
4254
- @include justify-content(center);
4255
- @include align-items(center);
4256
- width: 100%;
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;
4257
4326
  height: 100%;
4258
- border-radius: 3px;
4259
- border: 1px solid $wac-border-light;
4260
- background-color: transparent;
4261
- transition: border-color 0.3s ease-in-out;
4327
+ z-index: 1;
4328
+ transition: width 0.3s ease-in-out;
4329
+ overflow: hidden;
4262
4330
 
4263
- i {
4264
- color: $wac-second-color;
4265
- font-size: 11px;
4266
- line-height: 14px;
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
+ }
4267
4346
  }
4268
4347
 
4269
- &:hover {
4270
- border-color: $wac-back-border-hover;
4271
- transition: border-color 0.3s ease-in-out;
4348
+ &.outlined {
4349
+ z-index: 4;
4272
4350
  }
4273
4351
  }
4274
- }
4275
- .wac-filters {
4276
- width: 100%;
4277
- &__wrapper {
4278
- width: 100%;
4279
- display: flex;
4280
- flex-wrap: wrap;
4281
- justify-content: flex-start;
4282
- align-items: center;
4283
- align-content: center;
4284
- button {
4285
- position: relative;
4286
- width: auto;
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 {
4287
4364
  display: flex;
4288
4365
  align-items: center;
4289
- font-size: rem(14);
4290
- line-height: rem(16);
4291
- font-weight: 400;
4292
- color: $wac-second-color;
4293
- border: 1px solid $wac-border-light;
4294
- border-radius: 3px;
4295
- background: transparent;
4296
- box-shadow: none;
4297
- margin-bottom: rem(10);
4298
- transition: 0.3s ease;
4299
- cursor: pointer;
4300
- padding: 12px 20px;
4301
- .event {
4302
- position: absolute;
4303
- top: 0;
4304
- left: 0;
4305
- width: 100%;
4306
- height: 100%;
4307
- z-index: 2;
4308
- display: inline-block;
4309
- }
4366
+ justify-content: center;
4367
+ }
4368
+
4369
+ &.is-success {
4310
4370
  i {
4311
- color: $wac-main-text;
4312
- font-size: rem(14);
4313
- margin: 0 rem(10) 0 0;
4314
- }
4315
- &:hover,
4316
- &:focus,
4317
- &.active {
4318
- border-color: $wac-wizishop-blue;
4319
- color: $wac-main-text;
4371
+ color: $wac-green-color!important;
4320
4372
  }
4321
- &:not(:last-child) {
4322
- margin: 0 rem(10) rem(10) 0;
4373
+ &:hover, &:focus {
4374
+ i {
4375
+ color: $wac-white!important;
4376
+ }
4323
4377
  }
4324
4378
  }
4325
- > span {
4326
- position: relative;
4327
- color: $wac-link-color;
4328
- display: inline-block;
4329
- transition: 0.3s ease;
4330
- font-size: rem(14);
4331
- line-height: rem(16);
4332
- margin: 0 0 0 rem(30);
4333
- cursor: pointer;
4334
- z-index: 1;
4335
- &:before {
4336
- content: '';
4337
- display: block;
4338
- position: absolute;
4339
- width: 100%;
4340
- max-width: 0;
4341
- height: 1px;
4342
- border-radius: 3px;
4343
- background-color: darken($wac-link-color, 15%);
4344
- left: 0;
4345
- bottom: -2px;
4346
- transition: 0.3s ease;
4379
+
4380
+ &.is-danger {
4381
+ i {
4382
+ color: $wac-primary-button!important;
4347
4383
  }
4348
- &:hover,
4349
- &:focus {
4350
- color: darken($wac-link-color, 15%);
4351
- &:before {
4352
- max-width: 100%;
4384
+ &:hover, &:focus {
4385
+ i {
4386
+ color: $wac-white!important;
4353
4387
  }
4354
4388
  }
4355
4389
  }
@@ -5275,7 +5309,7 @@ div.wac-field-input-search {
5275
5309
  color: $wac-green-color;
5276
5310
  font-size: rem(14);
5277
5311
  }
5278
- .wac-info {
5312
+ .wac-dropdown {
5279
5313
  display: inline-block;
5280
5314
  width: 40px;
5281
5315
  height: 40px;
@@ -5288,60 +5322,147 @@ div.wac-field-input-search {
5288
5322
  height: 100%;
5289
5323
  position: relative;
5290
5324
 
5291
- i {
5292
- font-size: 14px;
5293
- line-height: 25px;
5325
+ &__icon {
5326
+ font-size: 30px;
5327
+ line-height: 18px;
5294
5328
  color: $wac-second-color;
5295
- transition: color 0.3s ease-in-out;
5329
+ transition: color 0.3s ease, transform 0.3s ease;
5296
5330
  }
5297
5331
 
5298
5332
  &__sublevel {
5299
5333
  position: absolute;
5300
- width: 350px;
5301
- top: 13px;
5302
- left: 100%;
5334
+ width: 160px;
5335
+ top: 100%;
5336
+ right: 0;
5303
5337
  z-index: -1;
5304
5338
  opacity: 0;
5305
5339
  background-color: $wac-white;
5306
5340
  border-radius: rem(3);
5307
5341
  box-shadow: 0px 2px 5px $wac-info-box-shadow;
5308
5342
  visibility: hidden;
5309
- 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;
5344
+
5345
+ &__container {
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;
5310
5360
 
5311
- &__container {
5312
- padding: 15px 20px;
5313
- font-size: rem(14);
5314
- line-height: rem(25);
5315
- color: $wac-second-color;
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
+ }
5316
5376
  }
5317
5377
  }
5318
5378
 
5319
5379
  &:hover {
5320
- i {
5321
- color: $wac-input-active-color;
5322
- 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;
5323
5384
  }
5324
5385
 
5325
- .wac-info__wrapper__sublevel {
5386
+ .wac-dropdown__wrapper__sublevel {
5326
5387
  visibility: visible;
5327
5388
  opacity: 1;
5328
5389
  z-index: 2;
5329
- transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
5390
+ transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
5330
5391
  }
5331
5392
  }
5332
5393
  }
5333
5394
  }
5334
- .wac-field-checkbox {
5335
- &__row {
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 {
5336
5456
  min-width: 100%;
5337
- margin: 0;
5457
+ margin: 0 0 7px;
5338
5458
  }
5459
+
5339
5460
  &--nowrap {
5340
5461
  display: inline-block;
5341
5462
  width: auto;
5342
5463
  min-width: 0;
5343
5464
  margin: 0 10px 10px 0;
5344
- .field {
5465
+ .wac-radio {
5345
5466
  &__row {
5346
5467
  width: auto;
5347
5468
  display: inline-block;
@@ -5349,273 +5470,473 @@ div.wac-field-input-search {
5349
5470
  }
5350
5471
  }
5351
5472
  }
5473
+ & + .wac-radio {
5474
+ margin-top: rem(-6);
5475
+ }
5352
5476
 
5353
- input[type='text'] {
5354
- height: 40px;
5355
- max-height: 40px;
5356
- padding: 0 20px;
5357
- line-height: 40px;
5358
- border: 1px solid $wac-border-form;
5359
- border-radius: 3px;
5360
- margin: 15px 0 10px !important;
5361
- font-size: rem(14) !important;
5362
- color: $wac-main-text;
5363
- &:focus {
5364
- border-color: $wac-wizishop-blue !important;
5365
- box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
5366
- &::-webkit-input-placeholder {
5367
- /* Chrome/Opera/Safari */
5368
- 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
+ }
5369
5519
  }
5370
- &::-moz-placeholder {
5371
- /* Firefox 19+ */
5372
- 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;
5373
5546
  }
5374
- &:-ms-input-placeholder {
5375
- /* IE 10+ */
5376
- opacity: 0;
5547
+
5548
+ :nth-child(n){
5549
+ padding: 0 3px;
5377
5550
  }
5378
- &:-moz-placeholder {
5379
- /* Firefox 18- */
5551
+
5552
+ i {
5553
+ color: $wac-white;
5554
+ font-weight: 400;
5555
+ margin: 0 0 0 rem(15);
5556
+ font-size: rem(13);
5557
+ cursor: pointer;
5558
+ }
5559
+
5560
+ &.default {
5561
+ background-color: $wac-tag-default;
5562
+ border: 1px solid $wac-border-light;
5563
+ color: $wac-second-color;
5564
+ font-weight: 400;
5565
+ i {
5566
+ color: $wac-border-form;
5567
+ }
5568
+ &.hover:hover,
5569
+ &.hover:focus {
5570
+ background-color: darken($wac-tag-default, 15%);
5571
+ color: $wac-main-text;
5572
+ i {
5573
+ color: $wac-main-text;
5574
+ }
5575
+ }
5576
+ }
5577
+
5578
+ }
5579
+ }
5580
+
5581
+ }
5582
+
5583
+ .wac-multiple-search {
5584
+ width: 100%;
5585
+ min-height: 50px;
5586
+ border-radius: 3px;
5587
+ background-color: $wac-white;
5588
+ position: relative;
5589
+ z-index: 2;
5590
+ border: 1px solid $wac-border-light;
5591
+ transition: 0.3s ease;
5592
+ &.open {
5593
+ border-color: $wac-wizishop-blue;
5594
+ }
5595
+ &__wrapper {
5596
+ position: relative;
5597
+ display: flex;
5598
+ justify-content: space-between;
5599
+ align-items: stretch;
5600
+ align-content: stretch;
5601
+ flex-wrap: nowrap;
5602
+ @include media('<tablet') {
5603
+ padding: 0 12px;
5604
+ }
5605
+ &__left {
5606
+ width: auto;
5607
+ display: flex;
5608
+ justify-content: space-between;
5609
+ align-content: center;
5610
+ align-items: center;
5611
+ flex-wrap: nowrap;
5612
+ position: relative;
5613
+ min-height: 50px;
5614
+ transition: background-color 0.3s ease;
5615
+ background-color: $wac-select-icon-background;
5616
+ &__background {
5617
+ position: absolute;
5618
+ width: 100%;
5619
+ left: 0;
5620
+ top: 0;
5621
+ height: 100%;
5380
5622
  opacity: 0;
5623
+ z-index: 4;
5624
+ transition: opacity 0.3s ease;
5625
+ cursor: pointer;
5381
5626
  }
5382
- }
5383
- }
5384
- &.alone {
5385
- .is-checkradio[type='checkbox'] {
5386
- & + label {
5387
- padding-left: 9px;
5388
- margin-right: 0px;
5389
-
5390
- &:before {
5391
- border-width: 1px;
5392
- width: 16px;
5393
- height: 16px;
5394
- border-radius: 2px;
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;
5395
5641
  }
5396
5642
  }
5397
- &:checked + label {
5398
- &:after {
5399
- top: 7px;
5400
- transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
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
+ }
5401
5655
  }
5402
5656
  }
5403
- }
5404
- }
5405
-
5406
- .is-checkradio[type='checkbox'] {
5407
- outline: 0 !important;
5408
- & + label {
5409
- font-size: rem(14);
5410
- line-height: 0;
5411
- color: $wac-input-radio-color-label;
5412
- white-space: nowrap;
5413
- padding: 0 8px;
5414
- margin-right: 0;
5415
- outline: 0 !important;
5416
- &:before {
5417
- width: 16px;
5418
- height: 16px;
5419
- border: 1px solid $wac-border-color;
5420
- top: 0;
5421
- transition: all 0.3s ease-in-out;
5422
- }
5423
- &:after {
5424
- top: 2.3px !important;
5425
- left: 3px !important;
5426
- width: 10px;
5427
- height: 12px;
5428
- border: none !important;
5429
- background: transparent
5430
- 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")
5431
- center center / 8px 8px no-repeat;
5432
- transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
5433
- transition: all 0.3s ease-in-out;
5434
- }
5435
- span {
5436
- margin: 0 0 0 rem(16);
5437
- display: inline-block;
5438
- }
5439
- &:hover,
5440
- &:focus {
5441
- &:before {
5442
- 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
+ }
5443
5701
  }
5444
5702
  }
5445
- &:before,
5446
- &:after {
5447
- outline: 0 !important;
5703
+ &:hover,
5704
+ &:focus,
5705
+ &.open {
5706
+ background-color: $wac-hover-multiple-search;
5448
5707
  }
5449
5708
  }
5450
- &:hover {
5451
- & + label {
5452
- color: $wac-input-radio-color-active-label;
5453
- &:before {
5454
- 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;
5455
5728
  }
5456
- &:after {
5457
- 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
+ }
5458
5789
  }
5459
5790
  }
5460
- &:not([disabled]) {
5461
- & + label {
5462
- &:before {
5463
- 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;
5464
5814
  }
5465
5815
  }
5466
5816
  }
5467
5817
  }
5468
- &:checked + label {
5469
- color: $wac-input-radio-color-active-label;
5470
- &:before {
5471
- border: 1px solid $wac-input-active-color;
5472
- background-color: $wac-input-active-color;
5473
- transition: all 0.3s ease-in-out;
5474
- }
5475
- &:after {
5476
- left: 7px;
5477
- top: 8px;
5478
- transition: all 0.3s ease-in-out;
5479
- }
5480
- }
5481
5818
  }
5482
-
5483
- }
5484
- .wac-free {
5485
- height: 100%;
5486
- width: 100%;
5487
- width: 100vw;
5488
- height: 100vh;
5489
- position: fixed;
5490
- top: 0;
5491
- left: 0;
5492
- z-index: 9999;
5493
-
5494
- &__wrapper {
5495
- background-color: white;
5496
- 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;
5497
5834
  border-radius: 3px;
5498
- margin: auto;
5499
- 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;
5500
5847
  position: absolute;
5501
- left: 50%;
5502
- top: 50%;
5503
- transform: translate(-50%, -50%);
5504
- padding: 50px;
5505
- z-index: 3;
5506
- max-height: 90vh;
5507
- display: flex;
5508
- flex-wrap: nowrap;
5509
- flex-direction: column;
5510
- justify-content: center;
5511
- align-items: center;
5512
5848
  width: 100%;
5513
- max-width: 575px;
5514
- overflow: hidden;
5515
-
5516
- &__content {
5517
- position: relative;
5518
- overflow: hidden;
5519
- display: flex;
5520
-
5521
- }
5522
-
5523
- div:not([class]) {
5524
- width: 100%;
5525
- 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%;
5526
5862
  }
5527
-
5528
- > * {
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 {
5529
5874
  width: 100%;
5530
- }
5531
-
5532
- &__button-close {
5533
- position: absolute;
5534
- top: 10px;
5535
- right: 10px;
5536
- width: 30px;
5537
- height: 30px;
5538
- border-radius: 50%;
5539
5875
  display: flex;
5540
- justify-content: center;
5876
+ justify-content: space-between;
5541
5877
  align-items: center;
5542
- background-color: $wac-popin-btn-close;
5543
- transition: .3s ease;
5544
- i {
5545
- color: $wac-second-color;
5546
- font-size: 14px;
5547
- font-weight: 400;
5548
- }
5549
- &:hover, &:focus {
5550
- background-color: $wac-main-text;
5551
- i {
5552
- color: $wac-white;
5553
- }
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;
5554
5884
  }
5555
- }
5556
-
5557
- img {
5558
- display: block;
5559
- max-width: 200px;
5560
- margin: 0 auto rem(20);
5561
- }
5562
-
5563
- h2 {
5564
- font-size: rem(20);
5565
- line-height: rem(25);
5566
- margin: 0 0 rem(20);
5567
- font-weight: 500;
5568
- width: 100%;
5569
- text-align: center;
5570
- }
5571
-
5572
- p {
5573
- font-size: rem(14);
5574
- line-height: rem(25);
5575
- color: $wac-second-color;
5576
- width: 100%;
5577
- text-align: center;
5578
- padding: 0;
5579
- margin: 0;
5580
- }
5581
-
5582
- &__buttons {
5583
- width: 100%;
5584
- display: flex;
5585
- flex-direction: column;
5586
- align-items: center;
5587
- margin: 30px 0 0;
5588
- &__button {
5589
- margin: 10px;
5885
+ &__left {
5590
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
+ }
5591
5922
  }
5592
- }
5593
- }
5594
- &__background {
5595
- z-index: 1;
5596
- position: absolute;
5597
- top: 0;
5598
- left: 0;
5599
- width: 100%;
5600
- height: 100%;
5601
- background-color: transparentize($wac-main-text, .5);
5602
- }
5603
- }
5604
-
5605
- .wac-free .ps-content > * {
5606
- padding-right: 15px;
5607
- }
5608
- .wac-logo {
5609
- &__wrapper {
5610
- svg {
5611
- width: 128px !important;
5612
- }
5613
-
5614
- &.white {
5615
- .cls-0,
5616
- .cls-1,
5617
- .cls-2 {
5618
- 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
+ }
5619
5940
  }
5620
5941
  }
5621
5942
  }