@wizishop/angular-components 0.0.132 → 0.0.133

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 (14) hide show
  1. package/angular-components.scss +1921 -1625
  2. package/bundles/wizishop-angular-components.umd.js +4 -3
  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/header-page/header-page.component.js +2 -2
  7. package/esm2015/lib/components/inputs/input-search/input-search.component.js +2 -2
  8. package/esm2015/lib/components/selects/select/select.component.js +3 -2
  9. package/fesm2015/wizishop-angular-components.js +4 -3
  10. package/fesm2015/wizishop-angular-components.js.map +1 -1
  11. package/package.json +1 -1
  12. package/wizishop-angular-components-0.0.133.tgz +0 -0
  13. package/wizishop-angular-components.metadata.json +1 -1
  14. package/wizishop-angular-components-0.0.132.tgz +0 -0
package/angular-components.scss CHANGED
@@ -136,195 +136,301 @@ $wac-background-indication: #EDEFF2!default;
136
136
  .wac-table__head__cell--checkbox .wac-field-checkbox__row {
137
137
  transform: translateX(5px);
138
138
  }
139
- .wac-radio {
140
- .is-checkradio[type='radio'] {
141
- outline: 0 !important;
142
- & + label {
139
+ .wac-search {
140
+ width: 100%;
141
+ min-height: 50px;
142
+ border-radius: 3px;
143
+ background-color: $wac-white;
144
+ position: relative;
145
+ z-index: 2;
146
+ border: 1px solid $wac-border-light;
147
+ transition: 0.3s ease;
148
+ &.open {
149
+ border-color: $wac-wizishop-blue;
150
+ }
151
+ &__wrapper {
152
+ position: relative;
153
+ display: flex;
154
+ justify-content: space-between;
155
+ align-items: stretch;
156
+ align-content: stretch;
157
+ flex-wrap: nowrap;
158
+ width: 100%;
159
+ min-height: 50px;
160
+ @include media('<tablet') {
161
+ padding: 0 12px;
162
+ }
163
+ input {
164
+ background: transparent;
165
+ border: none;
166
+ color: $wac-main-text;
143
167
  font-size: rem(14);
144
- line-height: rem(24);
145
- color: $wac-input-radio-color-label;
146
- padding-left: 30px;
147
- padding-right: 5px;
148
- margin-right: 0;
149
- outline: 0 !important;
150
- &:before {
151
- width: 16px;
152
- height: 16px;
153
- border: 1px solid $wac-border-form;
154
- border-radius: 23px;
155
- top: 3px;
156
- }
157
- &:after {
158
- width: 20px;
159
- height: 20px;
160
- background: $wac-input-active-color;
161
- top: 1px;
162
- left: -2px;
163
- }
164
- &:before,
165
- &:after {
166
- outline: 0 !important;
168
+ height: 50px;
169
+ line-height: 50px;
170
+ padding: 0 20px 0 48px;
171
+ font-weight: 400;
172
+ width: 100%;
173
+ @include media('<tablet') {
174
+ padding: 0 0 0 10px;
167
175
  }
168
- &:hover,
169
- &:focus {
170
- &:before {
171
- border-color: $wac-input-active-color !important;
176
+ &::-webkit-input-placeholder {
177
+ /* Chrome/Opera/Safari */
178
+ color: $wac-multiple-search-input-color;
179
+ opacity: 1;
180
+ font-weight: 400;
181
+ @include media('<tablet') {
182
+ font-size: rem(11);
172
183
  }
173
184
  }
174
- }
175
- &:hover {
176
- & + label {
177
- color: $wac-input-radio-color-active-label;
178
- &:before {
179
- border-color: $wac-input-active-color !important;
185
+ &::-moz-placeholder {
186
+ /* Firefox 19+ */
187
+ color: $wac-multiple-search-input-color;
188
+ opacity: 1;
189
+ font-weight: 400;
190
+ @include media('<tablet') {
191
+ font-size: rem(11);
180
192
  }
181
193
  }
182
- &:not([disabled]) {
183
- & + label {
184
- &:before {
185
- border-color: $wac-input-active-color !important;
186
- }
194
+ &:-ms-input-placeholder {
195
+ /* IE 10+ */
196
+ color: $wac-multiple-search-input-color;
197
+ opacity: 1;
198
+ font-weight: 400;
199
+ @include media('<tablet') {
200
+ font-size: rem(11);
187
201
  }
188
202
  }
189
- }
190
- &:checked + label {
191
- color: $wac-input-radio-color-active-label;
192
- &:before {
193
- border-color: $wac-input-active-color;
194
- }
195
- }
196
- }
197
-
198
-
199
- .wac-radio__row {
200
- min-width: 100%;
201
- margin: 0 0 7px;
202
- }
203
-
204
- &--nowrap {
205
- display: inline-block;
206
- width: auto;
207
- min-width: 0;
208
- margin: 0 10px 10px 0;
209
- .wac-radio {
210
- &__row {
211
- width: auto;
212
- display: inline-block;
213
- margin: 0;
203
+ &:-moz-placeholder {
204
+ /* Firefox 18- */
205
+ color: $wac-multiple-search-input-color;
206
+ opacity: 1;
207
+ font-weight: 400;
208
+ @include media('<tablet') {
209
+ font-size: rem(11);
210
+ }
214
211
  }
215
- }
216
- }
217
- & + .wac-radio {
218
- margin-top: rem(-6);
219
- }
220
-
221
- &.alone {
222
- label {
223
- padding-left: 7px;
224
- margin-right: 0;
225
- }
226
-
227
- }
228
-
229
- &__input {
230
- width: 100%;
231
- margin: rem(10) 0 0;
232
- border: none;
233
- padding: 0;
234
- input {
235
- height: 40px;
236
- max-height: 40px;
237
- padding: 0 20px;
238
- line-height: 40px;
239
- border: 1px solid $wac-border-form;
240
- border-radius: 3px;
241
- margin: 0 0 30px!important;
242
- font-size: rem(14) !important;
243
- color: $wac-main-text;
244
212
  &:focus {
245
- border-color: $wizishop-blue !important;
246
- box-shadow: 0px 0px 4px $wac-radio !important;
213
+ & + button i {
214
+ color: $wac-main-text;
215
+ }
247
216
  &::-webkit-input-placeholder {
248
217
  /* Chrome/Opera/Safari */
249
- opacity: 0;
218
+ color: $wac-white;
219
+ opacity: 1;
250
220
  }
251
221
  &::-moz-placeholder {
252
222
  /* Firefox 19+ */
253
- opacity: 0;
223
+ color: $wac-white;
224
+ opacity: 1;
254
225
  }
255
226
  &:-ms-input-placeholder {
256
227
  /* IE 10+ */
257
- opacity: 0;
228
+ color: $wac-white;
229
+ opacity: 1;
258
230
  }
259
231
  &:-moz-placeholder {
260
232
  /* Firefox 18- */
261
- opacity: 0;
233
+ color: $wac-white;
234
+ opacity: 1;
262
235
  }
263
236
  }
264
237
  }
265
- }
266
- }
267
- .selected-list {
268
- width: 100%;
269
- &__wrapper {
270
- display: flex;
271
- flex-direction: column;
272
- align-items: flex-start;
273
- justify-content: flex-start;
274
- &__head {
275
- width: 100%;
276
- min-height: rem(60);
238
+ button {
277
239
  display: flex;
278
- justify-content: space-between;
279
- padding: 10px 20px;
280
- background-color: $wac-gray-background;
281
- margin: 0 0 10px;
282
- > p {
283
- display: flex;
284
- align-items: center;
285
- white-space: nowrap;
286
- font-size: rem(16);
287
- line-height: rem(19);
288
- font-weight: 500;
240
+ align-items: center;
241
+ align-content: center;
242
+ justify-content: center;
243
+ width: 18px;
244
+ height: 18px;
245
+ border-radius: 3px;
246
+ position: absolute;
247
+ left: 20px;
248
+ top: 50%;
249
+ transform: translateY(-50%);
250
+ border: none;
251
+ cursor: pointer;
252
+ background-color: $wac-white;
253
+ i {
254
+ font-size: rem(18);
255
+ color: $wac-color-icon-search-multiple-search;
256
+ transition: 0.3s ease;
289
257
  }
290
-
291
- &__button {
292
- height: rem(40);
293
- width: fit-content;
294
- margin-left: auto;
295
-
296
- &__mobile {
297
- @include media('>=1024px') {
298
- display: none;
299
- }
300
- }
301
-
302
- &__notMobile {
303
- @include media('<1024px') {
304
- display: none;
305
- }
258
+ &:hover {
259
+ i {
260
+ color: $wac-wizishop-blue !important;
306
261
  }
307
-
308
262
  }
309
-
310
263
  }
311
- &__content {
312
- width: 100%;
313
- display: flex;
314
- flex-wrap: wrap;
315
- align-items: flex-start;
316
- align-content: flex-start;
317
- justify-content: flex-start;
318
- &__item {
319
- white-space: nowrap;
320
- margin: 0 10px 10px 0;
321
- border: 1px solid $wac-border-form;
322
- border-radius: 2px;
323
- color: $wac-second-color;
324
- height: rem(40);
325
- display: flex;
326
- justify-content: center;
327
- align-items: center;
264
+ }
265
+ &__absolute {
266
+ position: absolute;
267
+ top: 100%;
268
+ margin-top: rem(14);
269
+ left: -1px;
270
+ width: auto;
271
+ min-width: calc(100% - 38px);
272
+ max-width: calc(100% + 2px);
273
+ border: 1px solid $wac-border-light;
274
+ border-radius: 3px;
275
+ display: flex;
276
+ flex-direction: column;
277
+ justify-content: flex-start;
278
+ align-items: flex-start;
279
+ background-color: $wac-white;
280
+ max-height: 260px;
281
+ height: auto;
282
+ visibility: visible;
283
+ opacity: 1;
284
+ box-shadow: 3px 3px 20px $wac-select-box-shadow;
285
+ padding: 10px;
286
+ &.hidden {
287
+ visibility: hidden;
288
+ opacity: 0;
289
+ & > * {
290
+ opacity: 0;
291
+ transition: 0s;
292
+ }
293
+ }
294
+ .ps {
295
+ max-height: 240px;
296
+ }
297
+ &.open,
298
+ &.open.hidden {
299
+ position: relative;
300
+ left: auto;
301
+ top: 0;
302
+ transform: translateX(-1px);
303
+ visibility: visible;
304
+ opacity: 1;
305
+ & > * {
306
+ opacity: 1;
307
+ transition: 0s;
308
+ }
309
+ }
310
+ &__item {
311
+ width: 100%;
312
+ font-size: rem(14);
313
+ line-height: rem(30);
314
+ cursor: pointer;
315
+ transition: 0.3s ease;
316
+ position: relative;
317
+ display: flex;
318
+ justify-content: flex-start;
319
+ align-content: center;
320
+ align-items: center;
321
+ color: $wac-second-color;
322
+ > div {
323
+ width: 100%;
324
+ display: flex;
325
+ align-items: center;
326
+ align-content: center;
327
+ }
328
+ .icon {
329
+ width: 24px;
330
+ margin: 0 10px 0 0;
331
+ height: auto;
332
+ max-height: 24px;
333
+ }
334
+ &:not(:last-child) {
335
+ margin: 0 0 rem(10);
336
+ }
337
+ &:empty {
338
+ display: none;
339
+ }
340
+ &:first-child {
341
+ border-width: 1px 0 1px;
342
+ }
343
+ &:hover,
344
+ &:focus {
345
+ background-color: $wac-gray-background;
346
+ color: $wac-main-text;
347
+ }
348
+ > div {
349
+ padding: 0 10px;
350
+ &.selected {
351
+ background-color: $wac-gray-background;
352
+ color: $wac-main-text;
353
+ }
354
+ }
355
+ }
356
+ &__empty {
357
+ display: flex;
358
+ width: 100%;
359
+ justify-content: center;
360
+ align-items: center;
361
+ padding: 10px;
362
+ span {
363
+ font-size: rem(16);
364
+ font-weight: 400;
365
+ text-align: center;
366
+ color: $wac-second-color;
367
+ display: inline-block;
368
+ line-height: rem(25);
369
+ }
370
+ }
371
+ }
372
+ }
373
+ .selected-list {
374
+ width: 100%;
375
+ &__wrapper {
376
+ display: flex;
377
+ flex-direction: column;
378
+ align-items: flex-start;
379
+ justify-content: flex-start;
380
+ &__head {
381
+ width: 100%;
382
+ min-height: rem(60);
383
+ display: flex;
384
+ justify-content: space-between;
385
+ padding: 10px 20px;
386
+ background-color: $wac-gray-background;
387
+ margin: 0 0 10px;
388
+ > p {
389
+ display: flex;
390
+ align-items: center;
391
+ white-space: nowrap;
392
+ font-size: rem(16);
393
+ line-height: rem(19);
394
+ font-weight: 500;
395
+ }
396
+
397
+ &__button {
398
+ height: rem(40);
399
+ width: fit-content;
400
+ margin-left: auto;
401
+
402
+ &__mobile {
403
+ @include media('>=1024px') {
404
+ display: none;
405
+ }
406
+ }
407
+
408
+ &__notMobile {
409
+ @include media('<1024px') {
410
+ display: none;
411
+ }
412
+ }
413
+
414
+ }
415
+
416
+ }
417
+ &__content {
418
+ width: 100%;
419
+ display: flex;
420
+ flex-wrap: wrap;
421
+ align-items: flex-start;
422
+ align-content: flex-start;
423
+ justify-content: flex-start;
424
+ &__item {
425
+ white-space: nowrap;
426
+ margin: 0 10px 10px 0;
427
+ border: 1px solid $wac-border-form;
428
+ border-radius: 2px;
429
+ color: $wac-second-color;
430
+ height: rem(40);
431
+ display: flex;
432
+ justify-content: center;
433
+ align-items: center;
328
434
  padding: 0 20px;
329
435
  transition: .3s ease;
330
436
  font-size: rem(16);
@@ -348,77 +454,169 @@ $wac-background-indication: #EDEFF2!default;
348
454
  margin: 0 0 0 10px;
349
455
  }
350
456
  }
457
+ &:first-child {
458
+ margin-left: 18px;
459
+ }
351
460
  }
352
461
  }
353
462
  }
354
- }.wac {
355
- &-select-in-text {
356
- width: auto;
463
+ }
464
+
465
+ .wac {
466
+ &-select {
467
+ width: 100%;
357
468
  position: relative;
358
- display: flex;
359
- align-items: center;
360
- padding: 20px 0;
469
+ height: 40px;
470
+ border: 1px solid $wac-border-form;
471
+ margin: 0;
472
+ border-radius: 3px;
473
+ z-index: 2;
474
+ background-color: $wac-white;
475
+ max-width: 100%;
361
476
  &:hover,
362
477
  &:focus {
363
478
  z-index: 4;
364
479
  }
365
- &__prepend,
366
- &__after {
480
+ &__label {
481
+ padding: 0;
367
482
  font-size: rem(14);
368
483
  line-height: rem(16);
369
- color: $wac-main-text;
370
- }
371
- &__prepend {
372
- margin: 0 rem(4) 0 0;
373
- }
374
- &__after {
375
- margin: 0 0 0 rem(4);
484
+ margin: 0 0 rem(12);
485
+ font-weight: 500;
376
486
  }
377
487
  &__current {
378
488
  display: flex;
379
- width: auto;
489
+ width: 100%;
490
+ height: 38px;
380
491
  justify-content: space-between;
381
492
  align-items: center;
382
493
  align-content: center;
494
+ padding: 0 0 0 20px;
495
+ color: $wac-color-text-grey;
383
496
  font-size: rem(14);
384
497
  line-height: rem(16);
385
- color: $wac-main-text;
386
498
  cursor: pointer;
387
499
  white-space: nowrap;
388
500
  text-overflow: ellipsis;
389
- font-weight: 500;
390
- position: relative;
391
- span {
392
- position: relative;
393
- white-space: nowrap;
394
- &:before {
395
- content: '';
396
- display: block;
397
- position: absolute;
398
- bottom: -3px;
399
- left: 0;
400
- width: 100%;
401
- height: 1px;
402
- 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");
403
- background-position: left top;
404
- }
405
- &:after {
406
- content: '';
407
- display: block;
408
- position: absolute;
409
- top: 100%;
410
- left: 0;
411
- width: 100%;
412
- height: 14px;
501
+ max-width: 100%;
502
+ overflow: hidden;
503
+ &--withSearch {
504
+ padding: 0;
505
+ span {
506
+ &:not(.icon):not(:last-child) {
507
+ display: block;
508
+ width: 100%;
509
+ height: rem(38);
510
+ line-height: rem(38);
511
+ padding: 0 20px;
512
+ }
513
+ &.icon {
514
+ & + span {
515
+ padding: 0;
516
+ }
517
+ }
518
+ &:last-child {
519
+ margin: 0;
520
+ }
413
521
  }
414
- }
415
- }
416
- &__content {
417
- position: absolute;
522
+ &.open-search {
523
+ span {
524
+ &:not(.icon):not(:last-child) {
525
+ display: none;
526
+ }
527
+ &.icon {
528
+ display: none;
529
+ }
530
+ }
531
+ }
532
+ }
533
+ span.icon {
534
+ max-width: 24px;
535
+ margin: 0 10px 0 0;
536
+ i {
537
+ font-size: rem(17);
538
+ }
539
+ img {
540
+ display: block;
541
+ max-width: rem(24);
542
+ }
543
+ &:empty {
544
+ display: none;
545
+ }
546
+ }
547
+ > span:not([class]):not(:last-child) {
548
+ width: 100%;
549
+ text-align: left;
550
+ max-width: calc(100% - 58px);
551
+ overflow: hidden;
552
+ text-overflow: ellipsis;
553
+ }
554
+ span:last-child {
555
+ width: 38px;
556
+ min-width: 38px;
557
+ height: 38px;
558
+ margin: 0 0 0 20px;
559
+ display: flex;
560
+ justify-content: center;
561
+ align-items: center;
562
+ align-content: center;
563
+ background-color: $wac-select-icon-background;
564
+ border-radius: 0 3px 3px 0;
565
+ z-index: 3;
566
+ i {
567
+ font-size: rem(12);
568
+ color: $wac-second-color;
569
+ }
570
+ }
571
+ &__search {
572
+ position: relative;
573
+ top: 0;
574
+ left: 0;
575
+ width: 100%;
576
+ height: rem(38);
577
+ display: flex;
578
+ align-items: center;
579
+ align-content: center;
580
+ z-index: 2;
581
+ padding: 0 0 0 rem(20);
582
+ input {
583
+ border: none;
584
+ width: 100%;
585
+ box-shadow: none;
586
+ margin: 0 0 0 rem(10);
587
+ padding: 0;
588
+ height: rem(38);
589
+ line-height: rem(38);
590
+ &:focus {
591
+ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
592
+ opacity: 0;
593
+ }
594
+ &::-moz-placeholder { /* Firefox 19+ */
595
+ opacity: 0;
596
+ }
597
+ &:-ms-input-placeholder { /* IE 10+ */
598
+ opacity: 0;
599
+ }
600
+ &:-moz-placeholder { /* Firefox 18- */
601
+ opacity: 0;
602
+ }
603
+
604
+ }
605
+ }
606
+ }
607
+ }
608
+ .select-disabled {
609
+ background-color: #f5f8fa;
610
+ cursor: not-allowed;
611
+ }
612
+ &__content {
613
+ position: absolute;
418
614
  top: 100%;
419
615
  margin-top: rem(14);
420
- left: 0;
616
+ left: -1px;
421
617
  width: auto;
618
+ min-width: calc(100% - 38px);
619
+ max-width: calc(100% + 2px);
422
620
  border: 1px solid $wac-border-light;
423
621
  border-radius: 3px;
424
622
  display: flex;
@@ -426,11 +624,12 @@ $wac-background-indication: #EDEFF2!default;
426
624
  justify-content: flex-start;
427
625
  align-items: flex-start;
428
626
  background-color: $wac-white;
429
- max-height: 400px;
627
+ max-height: 260px;
430
628
  height: auto;
431
629
  visibility: visible;
432
630
  opacity: 1;
433
631
  box-shadow: 3px 3px 20px $wac-select-box-shadow;
632
+ padding: 10px;
434
633
  &.hidden {
435
634
  visibility: hidden;
436
635
  opacity: 0;
@@ -439,6 +638,9 @@ $wac-background-indication: #EDEFF2!default;
439
638
  transition: 0s;
440
639
  }
441
640
  }
641
+ .ps {
642
+ max-height: 240px;
643
+ }
442
644
  &.open,
443
645
  &.open.hidden {
444
646
  position: relative;
@@ -452,10 +654,45 @@ $wac-background-indication: #EDEFF2!default;
452
654
  transition: 0s;
453
655
  }
454
656
  }
657
+ &__cta {
658
+ background-color: $wac-color-CTA-select;
659
+ border: 1px solid $wac-border-CTA-select;
660
+ color: $wac-main-text;
661
+ font-size: rem(14);
662
+ min-height: rem(40);
663
+ display: flex;
664
+ align-items: center;
665
+ align-content: center;
666
+ width: 100%;
667
+ border-radius: 3px;
668
+ cursor: pointer;
669
+ transition: 0.3s ease;
670
+ margin: 0 0 rem(10);
671
+ padding: 0 20px;
672
+ > div {
673
+ display: flex;
674
+ align-items: center;
675
+ align-content: center;
676
+ justify-content: flex-start;
677
+ width: 100%;
678
+ i {
679
+ color: $wac-wizishop-blue;
680
+ margin: 0 8px 0 0;
681
+ }
682
+ strong {
683
+ display: inline-block;
684
+ margin: 0 20px 0 0;
685
+ }
686
+ }
687
+ &:hover,
688
+ &:focus {
689
+ background-color: darken($wac-color-CTA-select, 10%);
690
+ }
691
+ }
455
692
  &__item {
456
693
  width: 100%;
457
694
  font-size: rem(14);
458
- line-height: rem(40);
695
+ line-height: rem(30);
459
696
  cursor: pointer;
460
697
  transition: 0.3s ease;
461
698
  position: relative;
@@ -463,18 +700,21 @@ $wac-background-indication: #EDEFF2!default;
463
700
  justify-content: flex-start;
464
701
  align-content: center;
465
702
  align-items: center;
466
- font-weight: 400;
703
+ color: $wac-second-color;
467
704
  > div {
468
- padding: 0 20px;
469
- min-width: 100%;
470
- &.selected {
471
- background-color: $wac-hover-multiple-search;
472
- color: $wac-main-text;
473
- }
705
+ width: 100%;
706
+ display: flex;
707
+ align-items: center;
708
+ align-content: center;
474
709
  }
475
710
  .icon {
476
711
  width: 24px;
477
712
  margin: 0 10px 0 0;
713
+ height: auto;
714
+ max-height: 24px;
715
+ }
716
+ &:not(:last-child) {
717
+ margin: 0 0 rem(10);
478
718
  }
479
719
  &:empty {
480
720
  display: none;
@@ -487,6 +727,28 @@ $wac-background-indication: #EDEFF2!default;
487
727
  background-color: $wac-gray-background;
488
728
  color: $wac-main-text;
489
729
  }
730
+ > div {
731
+ padding: 0 10px;
732
+ &.selected {
733
+ background-color: $wac-gray-background;
734
+ color: $wac-main-text;
735
+ }
736
+ }
737
+ }
738
+ &__empty {
739
+ display: flex;
740
+ width: 100%;
741
+ justify-content: center;
742
+ align-items: center;
743
+ padding: 10px;
744
+ span {
745
+ font-size: rem(16);
746
+ font-weight: 400;
747
+ text-align: center;
748
+ color: $wac-second-color;
749
+ display: inline-block;
750
+ line-height: rem(25);
751
+ }
490
752
  }
491
753
  }
492
754
  }
@@ -2259,68 +2521,6 @@ $wac-background-indication: #EDEFF2!default;
2259
2521
  }
2260
2522
  }
2261
2523
  }
2262
- .wac-text {
2263
- font-size: rem(14);
2264
- line-height: rem(25);
2265
- color: $wac-main-text;
2266
- margin: 0 0 rem(30);
2267
- &.grey {
2268
- color: $wac-second-color;
2269
- }
2270
- &.yellow {
2271
- color: $wac-warning-color;
2272
- }
2273
- &.red {
2274
- color: $wac-primary;
2275
- }
2276
- &.label {
2277
- color: $placeholder-color;
2278
- }
2279
- &.optional {
2280
- font-size: rem(12);
2281
- line-height: rem(23);
2282
- color: $color-text-grey;
2283
- font-style: italic;
2284
- }
2285
- p {
2286
- font: inherit;
2287
- line-height: inherit;
2288
- color: inherit;
2289
- margin: inherit;
2290
- }
2291
- }
2292
- .wac-label {
2293
- @include flexbox();
2294
- background-color: $wac-gray-background;
2295
- border-radius: 3px;
2296
- border: 1px solid $wac-gray-background;
2297
- transition: border-color 0.3s ease-in-out;
2298
-
2299
- &__wrapper {
2300
- padding: 7.5px 13px;
2301
- font-size: 14px;
2302
- line-height: 16px;
2303
- color: $wac-second-color;
2304
-
2305
- i {
2306
- margin-left: 10px;
2307
- font-size: 12px;
2308
- line-height: 23px;
2309
- color: $wac-border-form;
2310
- transition: color 0.3s ease-in-out;
2311
- }
2312
- }
2313
-
2314
- &:hover {
2315
- border-color: $wac-input-border;
2316
- transition: border-color 0.3s ease-in-out;
2317
-
2318
- .wac-label__wrapper i {
2319
- color: $wac-second-color;
2320
- transition: color 0.3s ease-in-out;
2321
- }
2322
- }
2323
- }
2324
2524
  .wac-tag {
2325
2525
  display: flex;
2326
2526
  align-items: center;
@@ -2430,17 +2630,79 @@ $wac-background-indication: #EDEFF2!default;
2430
2630
  }
2431
2631
  }
2432
2632
  }
2433
- .wac-loader {
2434
- &.is-small {
2435
- position: absolute;
2436
- right: 0;
2437
- left: 0;
2438
- top: -70px;
2439
- transform: scale(0.6);
2440
- }
2441
- margin-bottom: rem(80);
2633
+ .wac-label {
2634
+ @include flexbox();
2635
+ background-color: $wac-gray-background;
2636
+ border-radius: 3px;
2637
+ border: 1px solid $wac-gray-background;
2638
+ transition: border-color 0.3s ease-in-out;
2442
2639
 
2443
- @keyframes rotate {
2640
+ &__wrapper {
2641
+ padding: 7.5px 13px;
2642
+ font-size: 14px;
2643
+ line-height: 16px;
2644
+ color: $wac-second-color;
2645
+
2646
+ i {
2647
+ margin-left: 10px;
2648
+ font-size: 12px;
2649
+ line-height: 23px;
2650
+ color: $wac-border-form;
2651
+ transition: color 0.3s ease-in-out;
2652
+ }
2653
+ }
2654
+
2655
+ &:hover {
2656
+ border-color: $wac-input-border;
2657
+ transition: border-color 0.3s ease-in-out;
2658
+
2659
+ .wac-label__wrapper i {
2660
+ color: $wac-second-color;
2661
+ transition: color 0.3s ease-in-out;
2662
+ }
2663
+ }
2664
+ }
2665
+ .wac-text {
2666
+ font-size: rem(14);
2667
+ line-height: rem(25);
2668
+ color: $wac-main-text;
2669
+ margin: 0 0 rem(30);
2670
+ &.grey {
2671
+ color: $wac-second-color;
2672
+ }
2673
+ &.yellow {
2674
+ color: $wac-warning-color;
2675
+ }
2676
+ &.red {
2677
+ color: $wac-primary;
2678
+ }
2679
+ &.label {
2680
+ color: $placeholder-color;
2681
+ }
2682
+ &.optional {
2683
+ font-size: rem(12);
2684
+ line-height: rem(23);
2685
+ color: $color-text-grey;
2686
+ font-style: italic;
2687
+ }
2688
+ p {
2689
+ font: inherit;
2690
+ line-height: inherit;
2691
+ color: inherit;
2692
+ margin: inherit;
2693
+ }
2694
+ }
2695
+ .wac-loader {
2696
+ &.is-small {
2697
+ position: absolute;
2698
+ right: 0;
2699
+ left: 0;
2700
+ top: -70px;
2701
+ transform: scale(0.6);
2702
+ }
2703
+ margin-bottom: rem(80);
2704
+
2705
+ @keyframes rotate {
2444
2706
  0% {
2445
2707
  transform: rotate(0deg);
2446
2708
  }
@@ -3137,239 +3399,73 @@ span.wac-tooltip {
3137
3399
  }
3138
3400
  }
3139
3401
  }
3140
- .wac-search {
3402
+ .wac-alert {
3141
3403
  width: 100%;
3142
- min-height: 50px;
3404
+ background-color: transparentize($wac-link-color, 0.85);
3405
+ color: $wac-link-color;
3143
3406
  border-radius: 3px;
3144
- background-color: $wac-white;
3145
- position: relative;
3146
- z-index: 2;
3147
- border: 1px solid $wac-border-light;
3148
- transition: 0.3s ease;
3149
- &.open {
3150
- border-color: $wac-wizishop-blue;
3151
- }
3152
- &__wrapper {
3153
- position: relative;
3154
- display: flex;
3155
- justify-content: space-between;
3156
- align-items: stretch;
3157
- align-content: stretch;
3158
- flex-wrap: nowrap;
3159
- width: 100%;
3160
- min-height: 50px;
3161
- @include media('<tablet') {
3162
- padding: 0 12px;
3163
- }
3164
- input {
3165
- background: transparent;
3166
- border: none;
3167
- color: $wac-main-text;
3168
- font-size: rem(14);
3169
- height: 50px;
3170
- line-height: 50px;
3171
- padding: 0 20px 0 48px;
3172
- font-weight: 400;
3173
- width: 100%;
3174
- @include media('<tablet') {
3175
- padding: 0 0 0 10px;
3176
- }
3177
- &::-webkit-input-placeholder {
3178
- /* Chrome/Opera/Safari */
3179
- color: $wac-multiple-search-input-color;
3180
- opacity: 1;
3181
- font-weight: 400;
3182
- @include media('<tablet') {
3183
- font-size: rem(11);
3184
- }
3185
- }
3186
- &::-moz-placeholder {
3187
- /* Firefox 19+ */
3188
- color: $wac-multiple-search-input-color;
3189
- opacity: 1;
3190
- font-weight: 400;
3191
- @include media('<tablet') {
3192
- font-size: rem(11);
3193
- }
3194
- }
3195
- &:-ms-input-placeholder {
3196
- /* IE 10+ */
3197
- color: $wac-multiple-search-input-color;
3198
- opacity: 1;
3199
- font-weight: 400;
3200
- @include media('<tablet') {
3201
- font-size: rem(11);
3202
- }
3203
- }
3204
- &:-moz-placeholder {
3205
- /* Firefox 18- */
3206
- color: $wac-multiple-search-input-color;
3207
- opacity: 1;
3208
- font-weight: 400;
3209
- @include media('<tablet') {
3210
- font-size: rem(11);
3211
- }
3212
- }
3213
- &:focus {
3214
- & + button i {
3215
- color: $wac-main-text;
3216
- }
3217
- &::-webkit-input-placeholder {
3218
- /* Chrome/Opera/Safari */
3219
- color: $wac-white;
3220
- opacity: 1;
3221
- }
3222
- &::-moz-placeholder {
3223
- /* Firefox 19+ */
3224
- color: $wac-white;
3225
- opacity: 1;
3226
- }
3227
- &:-ms-input-placeholder {
3228
- /* IE 10+ */
3229
- color: $wac-white;
3230
- opacity: 1;
3231
- }
3232
- &:-moz-placeholder {
3233
- /* Firefox 18- */
3234
- color: $wac-white;
3235
- opacity: 1;
3236
- }
3407
+ display: flex;
3408
+ flex-wrap: nowrap;
3409
+ justify-content: space-between;
3410
+ padding: 20px;
3411
+ &.success {
3412
+ background-color: transparentize($wac-green-color, 0.85);
3413
+ p {
3414
+ color: $wac-p-alert-color-success;
3415
+ > * {
3416
+ color: $wac-p-alert-color-success;
3237
3417
  }
3238
3418
  }
3239
- button {
3240
- display: flex;
3241
- align-items: center;
3242
- align-content: center;
3243
- justify-content: center;
3244
- width: 18px;
3245
- height: 18px;
3246
- border-radius: 3px;
3247
- position: absolute;
3248
- left: 20px;
3249
- top: 50%;
3250
- transform: translateY(-50%);
3251
- border: none;
3252
- cursor: pointer;
3253
- background-color: $wac-white;
3254
- i {
3255
- font-size: rem(18);
3256
- color: $wac-color-icon-search-multiple-search;
3257
- transition: 0.3s ease;
3258
- }
3259
- &:hover {
3260
- i {
3261
- color: $wac-wizishop-blue !important;
3262
- }
3263
- }
3419
+ i {
3420
+ color: $wac-green-color;
3264
3421
  }
3265
3422
  }
3266
- &__absolute {
3267
- position: absolute;
3268
- top: 100%;
3269
- margin-top: rem(14);
3270
- left: -1px;
3271
- width: auto;
3272
- min-width: calc(100% - 38px);
3273
- max-width: calc(100% + 2px);
3274
- border: 1px solid $wac-border-light;
3275
- border-radius: 3px;
3276
- display: flex;
3277
- flex-direction: column;
3278
- justify-content: flex-start;
3279
- align-items: flex-start;
3280
- background-color: $wac-white;
3281
- max-height: 260px;
3282
- height: auto;
3283
- visibility: visible;
3284
- opacity: 1;
3285
- box-shadow: 3px 3px 20px $wac-select-box-shadow;
3286
- padding: 10px;
3287
- &.hidden {
3288
- visibility: hidden;
3289
- opacity: 0;
3290
- & > * {
3291
- opacity: 0;
3292
- transition: 0s;
3423
+ &.warning {
3424
+ background-color: transparentize($wac-primary-button, 0.85);
3425
+ p {
3426
+ color: $wac-p-alert-color-warning;
3427
+ > * {
3428
+ color: $wac-p-alert-color-warning;
3293
3429
  }
3294
3430
  }
3295
- .ps {
3296
- max-height: 240px;
3431
+ i {
3432
+ color: $wac-primary-button;
3297
3433
  }
3298
- &.open,
3299
- &.open.hidden {
3300
- position: relative;
3301
- left: auto;
3302
- top: 0;
3303
- transform: translateX(-1px);
3304
- visibility: visible;
3305
- opacity: 1;
3306
- & > * {
3307
- opacity: 1;
3308
- transition: 0s;
3434
+ }
3435
+ &.alert {
3436
+ background-color: transparentize($wac-orange-color, 0.85);
3437
+ p {
3438
+ color: $wac-p-alert-color-alert;
3439
+ > * {
3440
+ color: $wac-p-alert-color-alert;
3309
3441
  }
3310
3442
  }
3311
- &__item {
3312
- width: 100%;
3313
- font-size: rem(14);
3314
- line-height: rem(30);
3315
- cursor: pointer;
3316
- transition: 0.3s ease;
3317
- position: relative;
3318
- display: flex;
3319
- justify-content: flex-start;
3320
- align-content: center;
3321
- align-items: center;
3322
- color: $wac-second-color;
3323
- > div {
3324
- width: 100%;
3325
- display: flex;
3326
- align-items: center;
3327
- align-content: center;
3328
- }
3329
- .icon {
3330
- width: 24px;
3331
- margin: 0 10px 0 0;
3332
- height: auto;
3333
- max-height: 24px;
3334
- }
3335
- &:not(:last-child) {
3336
- margin: 0 0 rem(10);
3337
- }
3338
- &:empty {
3339
- display: none;
3340
- }
3341
- &:first-child {
3342
- border-width: 1px 0 1px;
3343
- }
3344
- &:hover,
3345
- &:focus {
3346
- background-color: $wac-gray-background;
3347
- color: $wac-main-text;
3348
- }
3349
- > div {
3350
- padding: 0 10px;
3351
- &.selected {
3352
- background-color: $wac-gray-background;
3353
- color: $wac-main-text;
3354
- }
3355
- }
3443
+ i {
3444
+ color: $wac-orange-color;
3356
3445
  }
3357
- &__empty {
3358
- display: flex;
3359
- width: 100%;
3360
- justify-content: center;
3361
- align-items: center;
3362
- padding: 10px;
3363
- span {
3364
- font-size: rem(16);
3365
- font-weight: 400;
3366
- text-align: center;
3367
- color: $wac-second-color;
3368
- display: inline-block;
3369
- line-height: rem(25);
3370
- }
3446
+ }
3447
+ p {
3448
+ width: 100%;
3449
+ font-size: rem(14);
3450
+ line-height: rem(25);
3451
+ margin: 0;
3452
+ padding: 0;
3453
+ color: $wac-p-alert-color-default;
3454
+ > * {
3455
+ color: $wac-p-alert-color-default;
3371
3456
  }
3372
3457
  }
3458
+ i {
3459
+ width: auto;
3460
+ margin: 0 10px 0 0;
3461
+ color: inherit;
3462
+ font-size: rem(14);
3463
+ line-height: rem(25);
3464
+ }
3465
+
3466
+ .wac-button i {
3467
+ color: $wac-white;
3468
+ }
3373
3469
  }
3374
3470
  .wac-wrapper {
3375
3471
  width: 100%;
@@ -4795,86 +4891,77 @@ h4.wac-h4 {
4795
4891
  color: $wac-second-color;
4796
4892
  }
4797
4893
  }
4798
- .wac-alert {
4799
- width: 100%;
4800
- background-color: transparentize($wac-link-color, 0.85);
4801
- color: $wac-link-color;
4802
- border-radius: 3px;
4803
- display: flex;
4804
- flex-wrap: nowrap;
4805
- justify-content: space-between;
4806
- padding: 20px;
4807
- &.success {
4808
- background-color: transparentize($wac-green-color, 0.85);
4809
- p {
4810
- color: $wac-p-alert-color-success;
4811
- > * {
4812
- color: $wac-p-alert-color-success;
4894
+ .wac-radio {
4895
+ .is-checkradio[type='radio'] {
4896
+ outline: 0 !important;
4897
+ & + label {
4898
+ font-size: rem(14);
4899
+ line-height: rem(24);
4900
+ color: $wac-input-radio-color-label;
4901
+ padding-left: 30px;
4902
+ padding-right: 5px;
4903
+ margin-right: 0;
4904
+ outline: 0 !important;
4905
+ &:before {
4906
+ width: 16px;
4907
+ height: 16px;
4908
+ border: 1px solid $wac-border-form;
4909
+ border-radius: 23px;
4910
+ top: 3px;
4813
4911
  }
4814
- }
4815
- i {
4816
- color: $wac-green-color;
4817
- }
4818
- }
4819
- &.warning {
4820
- background-color: transparentize($wac-primary-button, 0.85);
4821
- p {
4822
- color: $wac-p-alert-color-warning;
4823
- > * {
4824
- color: $wac-p-alert-color-warning;
4912
+ &:after {
4913
+ width: 20px;
4914
+ height: 20px;
4915
+ background: $wac-input-active-color;
4916
+ top: 1px;
4917
+ left: -2px;
4825
4918
  }
4826
- }
4827
- i {
4828
- color: $wac-primary-button;
4829
- }
4830
- }
4831
- &.alert {
4832
- background-color: transparentize($wac-orange-color, 0.85);
4833
- p {
4834
- color: $wac-p-alert-color-alert;
4835
- > * {
4836
- color: $wac-p-alert-color-alert;
4919
+ &:before,
4920
+ &:after {
4921
+ outline: 0 !important;
4922
+ }
4923
+ &:hover,
4924
+ &:focus {
4925
+ &:before {
4926
+ border-color: $wac-input-active-color !important;
4927
+ }
4837
4928
  }
4838
4929
  }
4839
- i {
4840
- color: $wac-orange-color;
4930
+ &:hover {
4931
+ & + label {
4932
+ color: $wac-input-radio-color-active-label;
4933
+ &:before {
4934
+ border-color: $wac-input-active-color !important;
4935
+ }
4936
+ }
4937
+ &:not([disabled]) {
4938
+ & + label {
4939
+ &:before {
4940
+ border-color: $wac-input-active-color !important;
4941
+ }
4942
+ }
4943
+ }
4841
4944
  }
4842
- }
4843
- p {
4844
- width: 100%;
4845
- font-size: rem(14);
4846
- line-height: rem(25);
4847
- margin: 0;
4848
- padding: 0;
4849
- color: $wac-p-alert-color-default;
4850
- > * {
4851
- color: $wac-p-alert-color-default;
4945
+ &:checked + label {
4946
+ color: $wac-input-radio-color-active-label;
4947
+ &:before {
4948
+ border-color: $wac-input-active-color;
4949
+ }
4852
4950
  }
4853
4951
  }
4854
- i {
4855
- width: auto;
4856
- margin: 0 10px 0 0;
4857
- color: inherit;
4858
- font-size: rem(14);
4859
- line-height: rem(25);
4860
- }
4861
4952
 
4862
- .wac-button i {
4863
- color: $wac-white;
4864
- }
4865
- }
4866
- .wac-field-checkbox {
4867
- &__row {
4868
- position: relative;
4953
+
4954
+ .wac-radio__row {
4869
4955
  min-width: 100%;
4870
- margin: 0;
4956
+ margin: 0 0 7px;
4871
4957
  }
4958
+
4872
4959
  &--nowrap {
4873
4960
  display: inline-block;
4874
4961
  width: auto;
4875
4962
  min-width: 0;
4876
4963
  margin: 0 10px 10px 0;
4877
- .field {
4964
+ .wac-radio {
4878
4965
  &__row {
4879
4966
  width: auto;
4880
4967
  display: inline-block;
@@ -4882,1098 +4969,1378 @@ h4.wac-h4 {
4882
4969
  }
4883
4970
  }
4884
4971
  }
4972
+ & + .wac-radio {
4973
+ margin-top: rem(-6);
4974
+ }
4885
4975
 
4886
- input[type='text'] {
4887
- height: 40px;
4888
- max-height: 40px;
4889
- padding: 0 20px;
4890
- line-height: 40px;
4891
- border: 1px solid $wac-border-form;
4892
- border-radius: 3px;
4893
- margin: 15px 0 10px !important;
4894
- font-size: rem(14) !important;
4895
- color: $wac-main-text;
4896
- &:focus {
4897
- border-color: $wac-wizishop-blue !important;
4898
- box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
4899
- &::-webkit-input-placeholder {
4900
- /* Chrome/Opera/Safari */
4901
- opacity: 0;
4902
- }
4903
- &::-moz-placeholder {
4904
- /* Firefox 19+ */
4905
- opacity: 0;
4906
- }
4907
- &:-ms-input-placeholder {
4908
- /* IE 10+ */
4909
- opacity: 0;
4910
- }
4911
- &:-moz-placeholder {
4912
- /* Firefox 18- */
4913
- opacity: 0;
4914
- }
4976
+ &.alone {
4977
+ label {
4978
+ padding-left: 7px;
4979
+ margin-right: 0;
4915
4980
  }
4981
+
4916
4982
  }
4917
- &.alone {
4918
- .is-checkradio[type='checkbox'] {
4919
- & + label {
4920
- padding-left: 9px;
4921
- margin-right: 0px;
4922
4983
 
4923
- &:before {
4924
- border-width: 1px;
4925
- width: 16px;
4926
- height: 16px;
4927
- border-radius: 2px;
4928
- }
4929
- }
4930
- &:checked + label {
4931
- &:after {
4932
- top: 7px;
4933
- transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
4984
+ &__input {
4985
+ width: 100%;
4986
+ margin: rem(10) 0 0;
4987
+ border: none;
4988
+ padding: 0;
4989
+ input {
4990
+ height: 40px;
4991
+ max-height: 40px;
4992
+ padding: 0 20px;
4993
+ line-height: 40px;
4994
+ border: 1px solid $wac-border-form;
4995
+ border-radius: 3px;
4996
+ margin: 0 0 30px!important;
4997
+ font-size: rem(14) !important;
4998
+ color: $wac-main-text;
4999
+ &:focus {
5000
+ border-color: $wizishop-blue !important;
5001
+ box-shadow: 0px 0px 4px $wac-radio !important;
5002
+ &::-webkit-input-placeholder {
5003
+ /* Chrome/Opera/Safari */
5004
+ opacity: 0;
5005
+ }
5006
+ &::-moz-placeholder {
5007
+ /* Firefox 19+ */
5008
+ opacity: 0;
5009
+ }
5010
+ &:-ms-input-placeholder {
5011
+ /* IE 10+ */
5012
+ opacity: 0;
5013
+ }
5014
+ &:-moz-placeholder {
5015
+ /* Firefox 18- */
5016
+ opacity: 0;
4934
5017
  }
4935
5018
  }
4936
5019
  }
4937
5020
  }
5021
+ }
5022
+ .wac-input {
5023
+ .field-label {
5024
+ margin-bottom: 0!important;
5025
+ &.is-normal {
5026
+ padding-top: 0 !important;
5027
+ }
5028
+ }
5029
+ .field-label {
5030
+ position: relative;
5031
+ }
4938
5032
 
4939
- .is-checkradio[type='checkbox'] {
4940
- outline: 0 !important;
4941
- top: 0;
4942
- & + label {
4943
- font-size: rem(14);
4944
- line-height: 0;
4945
- color: $wac-input-radio-color-label;
4946
- white-space: nowrap;
4947
- padding: 0 8px;
4948
- margin-right: 0;
4949
- outline: 0 !important;
4950
- &:before {
4951
- width: 16px;
4952
- height: 16px;
4953
- border: 1px solid $wac-border-color;
4954
- top: 0;
4955
- transition: all 0.3s ease-in-out;
4956
- }
4957
- &:after {
4958
- top: 2.3px !important;
4959
- left: 3px !important;
4960
- width: 10px;
4961
- height: 12px;
4962
- border: none !important;
4963
- background: transparent
4964
- 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")
4965
- center center / 8px 8px no-repeat;
4966
- transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
4967
- transition: all 0.3s ease-in-out;
4968
- }
4969
- span {
4970
- margin: 0 0 0 rem(16);
4971
- display: inline-block;
4972
- }
4973
- &:hover,
4974
- &:focus {
4975
- &:before {
4976
- border-color: $wac-input-active-color !important;
4977
- }
4978
- }
4979
- &:before,
4980
- &:after {
4981
- outline: 0 !important;
4982
- }
5033
+ &.with-progress-bar {
5034
+ input {
5035
+ margin-bottom: rem(20) !important;
4983
5036
  }
4984
- &:hover {
4985
- & + label {
4986
- color: $wac-input-radio-color-active-label;
4987
- &:before {
4988
- border-color: $wac-input-active-color !important;
4989
- }
4990
- &:after {
4991
- border-color: $wac-white !important;
4992
- }
4993
- }
4994
- &:not([disabled]) {
4995
- & + label {
4996
- &:before {
4997
- border-color: $wac-input-active-color !important;
4998
- }
5037
+ }
5038
+
5039
+ &.with-padding {
5040
+ label {
5041
+ display: none;
5042
+ }
5043
+ .control {
5044
+ margin: 0;
5045
+ .icon {
5046
+ height: 50px !important;
5047
+ i {
5048
+ color: $wac-placeholder-color !important;
5049
+ font-size: rem(18);
4999
5050
  }
5000
5051
  }
5001
5052
  }
5002
- &:checked + label {
5003
- color: $wac-input-radio-color-active-label;
5004
- &:before {
5005
- border: 1px solid $wac-input-active-color;
5006
- background-color: $wac-input-active-color;
5007
- transition: all 0.3s ease-in-out;
5008
- }
5009
- &:after {
5010
- left: 7px;
5011
- top: 8px;
5012
- transition: all 0.3s ease-in-out;
5013
- }
5053
+ input {
5054
+ height: 50px;
5055
+ max-height: 50px;
5056
+ padding: 0 20px;
5057
+ line-height: 50px;
5058
+ border-radius: 3px;
5059
+ margin: 0 !important;
5060
+ font-size: rem(14) !important;
5061
+ color: $wac-placeholder-color;
5062
+ }
5063
+ ::-webkit-input-placeholder {
5064
+ /* Chrome/Opera/Safari */
5065
+ color: $wac-placeholder-color !important;
5066
+ opacity: 1;
5067
+ }
5068
+ ::-moz-placeholder {
5069
+ /* Firefox 19+ */
5070
+ color: $wac-placeholder-color !important;
5071
+ opacity: 1;
5072
+ }
5073
+ :-ms-input-placeholder {
5074
+ /* IE 10+ */
5075
+ color: $wac-placeholder-color !important;
5076
+ opacity: 1;
5077
+ }
5078
+ :-moz-placeholder {
5079
+ /* Firefox 18- */
5080
+ color: $wac-placeholder-color !important;
5081
+ opacity: 1;
5014
5082
  }
5015
5083
  }
5016
5084
 
5017
- }
5085
+ label {
5086
+ font-size: rem(14);
5087
+ color: $wac-main-text;
5088
+ font-weight: 500 !important;
5089
+ margin-bottom: 0!important;
5018
5090
 
5091
+ &.has-text-weight-bold {
5092
+ font-weight: 500 !important;
5093
+ }
5094
+ &.label-inline {
5095
+ display: inline;
5096
+ }
5097
+ > span {
5098
+ color: $wac-second-color;
5099
+ font-style: italic;
5100
+ font-size: rem(12);
5101
+ }
5102
+ }
5103
+ input::placeholder {
5104
+ font-weight: 400;
5105
+ }
5106
+ input:not([disabled]):focus {
5107
+ border-color: $wac-main-text;
5108
+ + span {
5109
+ color: $wac-main-text;
5110
+ }
5111
+ }
5112
+ .input,
5113
+ .input:not([disabled]):focus,
5114
+ .input:not([disabled]).is-focused,
5115
+ .input:not([disabled]):active,
5116
+ .input:not([disabled]).is-active {
5117
+ font-size: rem(14);
5118
+ color: $wac-main-text;
5119
+ border: rem(1) solid $wac-lightened-secondary;
5120
+ box-shadow: none;
5121
+ padding: rem(10) rem(15);
5122
+ border-radius: rem(3);
5123
+ margin-bottom: rem(8);
5124
+ height: rem(40);
5019
5125
 
5020
- .wac {
5021
- &-select {
5022
- width: 100%;
5023
- position: relative;
5024
- height: 40px;
5025
- border: 1px solid $wac-border-form;
5026
- margin: 0;
5027
- border-radius: 3px;
5028
- z-index: 2;
5029
- background-color: $wac-white;
5030
- max-width: 100%;
5031
- &:hover,
5032
- &:focus {
5033
- z-index: 4;
5126
+ &::placeholder {
5127
+ color: $wac-placeholder-color;
5128
+ font-weight: 400;
5034
5129
  }
5035
- &__label {
5036
- padding: 0;
5037
- font-size: rem(14);
5038
- line-height: rem(16);
5039
- margin: 0 0 rem(12);
5040
- font-weight: 500;
5130
+ &.is-number {
5131
+ max-width: 100px;
5041
5132
  }
5042
- &__current {
5043
- display: flex;
5044
- width: 100%;
5045
- height: 38px;
5046
- justify-content: space-between;
5047
- align-items: center;
5048
- align-content: center;
5049
- padding: 0 0 0 20px;
5050
- color: $wac-color-text-grey;
5051
- font-size: rem(14);
5052
- line-height: rem(16);
5053
- cursor: pointer;
5054
- white-space: nowrap;
5055
- text-overflow: ellipsis;
5056
- max-width: 100%;
5057
- overflow: hidden;
5058
- &--withSearch {
5059
- padding: 0;
5060
- span {
5061
- &:not(.icon):not(:last-child) {
5062
- display: block;
5063
- width: 100%;
5064
- height: rem(38);
5065
- line-height: rem(38);
5066
- padding: 0 20px;
5067
- }
5068
- &.icon {
5069
- & + span {
5070
- padding: 0;
5071
- }
5072
- }
5073
- &:last-child {
5074
- margin: 0;
5075
- }
5076
- }
5077
- &.open-search {
5078
- span {
5079
- &:not(.icon):not(:last-child) {
5080
- display: none;
5081
- }
5082
- &.icon {
5083
- display: none;
5084
- }
5085
- }
5086
- }
5087
- }
5088
- span.icon {
5089
- max-width: 24px;
5090
- margin: 0 10px 0 0;
5091
- i {
5092
- font-size: rem(17);
5093
- }
5094
- img {
5095
- display: block;
5096
- max-width: rem(24);
5097
- }
5098
- &:empty {
5099
- display: none;
5100
- }
5101
- }
5102
- > span:not([class]):not(:last-child) {
5103
- width: 100%;
5104
- text-align: left;
5105
- max-width: calc(100% - 58px);
5106
- overflow: hidden;
5107
- text-overflow: ellipsis;
5108
- }
5109
- span:last-child {
5110
- width: 38px;
5111
- min-width: 38px;
5112
- height: 38px;
5113
- margin: 0 0 0 20px;
5114
- display: flex;
5115
- justify-content: center;
5116
- align-items: center;
5117
- align-content: center;
5118
- background-color: $wac-select-icon-background;
5119
- border-radius: 0 3px 3px 0;
5120
- z-index: 3;
5121
- i {
5122
- font-size: rem(12);
5123
- color: $wac-second-color;
5133
+ &.remove-margin {
5134
+ margin-bottom: 0;
5135
+ }
5136
+ &.is-danger {
5137
+ border-color: $wac-primary-button !important;
5138
+ }
5139
+ }
5140
+
5141
+ .control {
5142
+ margin-top: rem(6);
5143
+ &.has-icons-left {
5144
+ .input,
5145
+ .input:not([disabled]):focus,
5146
+ .input:not([disabled]).is-focused,
5147
+ .input:not([disabled]):active,
5148
+ .input:not([disabled]).is-active {
5149
+ font-size: rem(14);
5150
+ color: $wac-main-text;
5151
+ border: rem(1) solid $wac-lightened-secondary;
5152
+ box-shadow: none;
5153
+ padding: 0 rem(44);
5154
+ border-radius: rem(3);
5155
+ margin-bottom: rem(12);
5156
+
5157
+ &::placeholder {
5158
+ color: $wac-placeholder-color;
5124
5159
  }
5125
5160
  }
5126
- &__search {
5127
- position: relative;
5128
- top: 0;
5129
- left: 0;
5130
- width: 100%;
5131
- height: rem(38);
5132
- display: flex;
5133
- align-items: center;
5134
- align-content: center;
5135
- z-index: 2;
5136
- padding: 0 0 0 rem(20);
5137
- input {
5138
- border: none;
5139
- width: 100%;
5140
- box-shadow: none;
5141
- margin: 0 0 0 rem(10);
5142
- padding: 0;
5143
- height: rem(38);
5144
- line-height: rem(38);
5145
- &:focus {
5146
- &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
5147
- opacity: 0;
5148
- }
5149
- &::-moz-placeholder { /* Firefox 19+ */
5150
- opacity: 0;
5151
- }
5152
- &:-ms-input-placeholder { /* IE 10+ */
5153
- opacity: 0;
5154
- }
5155
- &:-moz-placeholder { /* Firefox 18- */
5156
- opacity: 0;
5157
- }
5158
5161
 
5159
- }
5160
- }
5162
+ .icon {
5163
+ color: $wac-border-form;
5164
+ height: rem(42);
5165
+ width: rem(46);
5166
+ border-radius: rem(3) 0 0 rem(3);
5167
+ font-size: rem(16);
5168
+ transform: translateX(5px);
5169
+ pointer-events: none;
5161
5170
  }
5162
5171
  }
5163
- .select-disabled {
5164
- background-color: #f5f8fa;
5165
- cursor: not-allowed;
5166
- }
5167
- &__content {
5168
- position: absolute;
5169
- top: 100%;
5170
- margin-top: rem(14);
5171
- left: -1px;
5172
- width: auto;
5173
- min-width: calc(100% - 38px);
5174
- max-width: calc(100% + 2px);
5175
- border: 1px solid $wac-border-light;
5176
- border-radius: 3px;
5172
+ &.has-input-group {
5173
+ display: -ms-flexbox;
5177
5174
  display: flex;
5178
- flex-direction: column;
5179
- justify-content: flex-start;
5180
- align-items: flex-start;
5181
- background-color: $wac-white;
5182
- max-height: 260px;
5183
- height: auto;
5184
- visibility: visible;
5185
- opacity: 1;
5186
- box-shadow: 3px 3px 20px $wac-select-box-shadow;
5187
- padding: 10px;
5188
- &.hidden {
5189
- visibility: hidden;
5190
- opacity: 0;
5191
- & > * {
5192
- opacity: 0;
5193
- transition: 0s;
5194
- }
5195
- }
5196
- .ps {
5197
- max-height: 240px;
5198
- }
5199
- &.open,
5200
- &.open.hidden {
5175
+ -ms-flex-wrap: wrap;
5176
+ flex-wrap: wrap;
5177
+ -ms-flex-align: stretch;
5178
+ align-items: stretch;
5179
+ width: 100%;
5180
+ input {
5201
5181
  position: relative;
5202
- left: auto;
5203
- top: 0;
5204
- transform: translateX(-1px);
5205
- visibility: visible;
5206
- opacity: 1;
5207
- & > * {
5208
- opacity: 1;
5209
- transition: 0s;
5182
+ -ms-flex: 1 1 0;
5183
+ flex: 1 1 0;
5184
+ min-width: 0;
5185
+ margin-bottom: 0 !important;
5186
+ &.text-append {
5187
+ border-radius: rem(3) 0 0 rem(3);
5188
+ border-right: none;
5189
+ }
5190
+ + .append {
5191
+ border-radius: 0.25rem 0 0 0.25rem;
5210
5192
  }
5211
5193
  }
5212
- &__cta {
5213
- background-color: $wac-color-CTA-select;
5214
- border: 1px solid $wac-border-CTA-select;
5215
- color: $wac-main-text;
5216
- font-size: rem(14);
5217
- min-height: rem(40);
5194
+ .has-input-group {
5218
5195
  display: flex;
5219
- align-items: center;
5220
- align-content: center;
5221
- width: 100%;
5222
- border-radius: 3px;
5223
- cursor: pointer;
5224
- transition: 0.3s ease;
5225
- margin: 0 0 rem(10);
5226
- padding: 0 20px;
5227
- > div {
5196
+ position: relative;
5197
+ .prepend {
5198
+ margin-right: -1px;
5199
+ }
5200
+ .has-input-group-text {
5201
+ display: -ms-flexbox;
5228
5202
  display: flex;
5203
+ -ms-flex-align: center;
5229
5204
  align-items: center;
5230
- align-content: center;
5231
- justify-content: flex-start;
5232
- width: 100%;
5233
- i {
5234
- color: $wac-wizishop-blue;
5235
- margin: 0 8px 0 0;
5205
+ padding: 0.375rem 1.5rem;
5206
+ margin-bottom: 0;
5207
+ font-size: 0.875rem;
5208
+ font-weight: 400;
5209
+ line-height: 1.5;
5210
+ color: $wac-color-text-grey;
5211
+ text-align: center;
5212
+ white-space: nowrap;
5213
+ background-color: $wac-input-border;
5214
+ border: 1px solid $wac-input-border;
5215
+ &.prepend {
5216
+ border-radius: 0.25rem 0 0 0.25rem;
5236
5217
  }
5237
- strong {
5238
- display: inline-block;
5239
- margin: 0 20px 0 0;
5218
+ &.append {
5219
+ border-left: 0;
5220
+ border-radius: 0 0.25rem 0.25rem 0;
5240
5221
  }
5241
5222
  }
5242
- &:hover,
5243
- &:focus {
5244
- background-color: darken($wac-color-CTA-select, 10%);
5223
+ .is-right {
5224
+ left: -40px;
5245
5225
  }
5246
- }
5247
- &__item {
5248
- width: 100%;
5249
- font-size: rem(14);
5250
- line-height: rem(30);
5251
- cursor: pointer;
5252
- transition: 0.3s ease;
5253
- position: relative;
5254
- display: flex;
5255
- justify-content: flex-start;
5256
- align-content: center;
5257
- align-items: center;
5258
- color: $wac-second-color;
5259
- > div {
5260
- width: 100%;
5261
- display: flex;
5262
- align-items: center;
5263
- align-content: center;
5264
- }
5265
- .icon {
5266
- width: 24px;
5267
- margin: 0 10px 0 0;
5268
- height: auto;
5269
- max-height: 24px;
5270
- }
5271
- &:not(:last-child) {
5272
- margin: 0 0 rem(10);
5273
- }
5274
- &:empty {
5275
- display: none;
5276
- }
5277
- &:first-child {
5278
- border-width: 1px 0 1px;
5279
- }
5280
- &:hover,
5281
- &:focus {
5282
- background-color: $wac-gray-background;
5283
- color: $wac-main-text;
5284
- }
5285
- > div {
5286
- padding: 0 10px;
5287
- &.selected {
5288
- background-color: $wac-gray-background;
5289
- color: $wac-main-text;
5290
- }
5226
+ .is-left {
5227
+ left: auto;
5228
+ right: -45px;
5291
5229
  }
5292
5230
  }
5293
- &__empty {
5294
- display: flex;
5295
- width: 100%;
5296
- justify-content: center;
5297
- align-items: center;
5298
- padding: 10px;
5299
- span {
5300
- font-size: rem(16);
5301
- font-weight: 400;
5302
- text-align: center;
5303
- color: $wac-second-color;
5304
- display: inline-block;
5305
- line-height: rem(25);
5306
- }
5231
+ .icon.is-small.is-right {
5232
+ }
5233
+ .wac-input__info,
5234
+ .wac-input__error {
5235
+ font-size: rem(12);
5236
+ color: $wac-secondary-text;
5237
+ position: absolute;
5238
+ bottom: -22px !important;
5239
+ left: 0;
5240
+ }
5241
+ }
5242
+ &.has-icons-right {
5243
+ .icon {
5244
+ height: rem(39);
5307
5245
  }
5308
5246
  }
5309
5247
  }
5310
- }
5311
- .wac-input-with-select {
5312
- &__label {
5313
- font-size: rem(14);
5314
- line-height: rem(16);
5315
- font-weight: 500;
5316
- margin: 0 0 rem(12);
5317
- cursor: pointer;
5318
- display: block;
5319
- }
5320
- &__wrapper {
5321
- display: flex;
5322
- &__left {
5323
- position: relative;
5324
- display: flex;
5325
- justify-content: space-between;
5326
- align-items: stretch;
5327
- align-content: stretch;
5328
- flex-wrap: nowrap;
5329
- border-radius: 3px;
5330
- max-height: 40px;
5331
- background-color: $wac-white;
5332
- z-index: 2;
5333
- border: 1px solid $wac-border-form;
5334
5248
 
5335
- input {
5336
- background: transparent;
5337
- border: none;
5338
- color: $wac-main-text;
5249
+ &.is-big {
5250
+ .control.has-icons-left {
5251
+ .input,
5252
+ .input:not([disabled]):focus,
5253
+ .input:not([disabled]).is-focused,
5254
+ .input:not([disabled]):active,
5255
+ .input:not([disabled]).is-active {
5339
5256
  font-size: rem(14);
5340
- height: 40px;
5341
- line-height: 40px;
5342
- font-weight: 400;
5343
- padding: 0 0 0 15px;
5344
- &::-webkit-input-placeholder {
5345
- /* Chrome/Opera/Safari */
5346
- color: $wac-color-icon-search-multiple-search;
5347
- opacity: 1;
5348
- font-weight: 400;
5349
- }
5350
- &::-moz-placeholder {
5351
- /* Firefox 19+ */
5352
- color: $wac-color-icon-search-multiple-search;
5353
- opacity: 1;
5354
- font-weight: 400;
5355
- }
5356
- &:-ms-input-placeholder {
5357
- /* IE 10+ */
5358
- color: $wac-color-icon-search-multiple-search;
5359
- opacity: 1;
5360
- font-weight: 400;
5361
- }
5362
- &:-moz-placeholder {
5363
- /* Firefox 18- */
5364
- color: $wac-color-icon-search-multiple-search;
5365
- opacity: 1;
5366
- font-weight: 400;
5367
- }
5368
- &:focus {
5369
- & + button i {
5370
- color: $wac-main-text;
5371
- }
5372
- &::-webkit-input-placeholder {
5373
- /* Chrome/Opera/Safari */
5374
- color: $wac-white;
5375
- opacity: 1;
5376
- }
5377
- &::-moz-placeholder {
5378
- /* Firefox 19+ */
5379
- color: $wac-white;
5380
- opacity: 1;
5381
- }
5382
- &:-ms-input-placeholder {
5383
- /* IE 10+ */
5384
- color: $wac-white;
5385
- opacity: 1;
5386
- }
5387
- &:-moz-placeholder {
5388
- /* Firefox 18- */
5389
- color: $wac-white;
5390
- opacity: 1;
5391
- }
5392
- }
5393
- }
5394
-
5395
- &__current {
5396
- position: relative;
5397
- padding: rem(5) rem(16);
5398
- max-height: rem(40);
5399
- display: flex;
5400
- justify-content: center;
5401
- align-items: center;
5402
- align-content: center;
5403
- cursor: pointer;
5404
-
5405
- &:before {
5406
- content: '';
5407
- display: block;
5408
- position: absolute;
5409
- left: -0.5px;
5410
- top: 50%;
5411
- transform: translateY(-50%);
5412
- width: 1px;
5413
- height: rem(25);
5414
- background-color: $wac-border-form;
5415
- }
5257
+ color: $wac-main-text;
5258
+ border: rem(1) solid $wac-lightened-secondary;
5259
+ box-shadow: none;
5260
+ padding: rem(30) rem(50);
5261
+ border-radius: rem(3);
5262
+ margin-bottom: rem(12);
5416
5263
 
5417
- span {
5418
- position: relative;
5419
- white-space: nowrap;
5420
- line-height: 1;
5421
- &:before {
5422
- content: '';
5423
- display: block;
5424
- position: absolute;
5425
- top: 100%;
5426
- margin-top: 2px;
5427
- left: 0;
5428
- width: 100%;
5429
- height: 1px;
5430
- border-bottom: 1px dashed $wac-primary-button;
5431
- }
5264
+ &::placeholder {
5265
+ color: $wac-placeholder-color;
5432
5266
  }
5433
5267
  }
5434
5268
 
5435
- &__select {
5436
- position: absolute;
5437
- top: 50px;
5438
- width: auto;
5439
- left: calc(100% - 40px);
5440
- margin-top: 0;
5441
- background-color: $wac-white;
5442
- z-index: 3;
5443
- box-shadow: 3px 3px 20px $wac-input-with-select-box-shadow;
5444
- border-radius: 3px;
5445
- border: 1px solid $wac-border-light;
5446
- padding: 10px;
5447
-
5448
- &__item {
5449
- width: 100%;
5450
- font-size: rem(14);
5451
- line-height: rem(30);
5452
- cursor: pointer;
5453
- transition: 0.3s ease;
5454
- position: relative;
5455
- padding: 0 10px;
5456
- white-space: nowrap;
5457
- &:not(:last-child) {
5458
- margin: 0 0 rem(10);
5459
- }
5460
- span {
5461
- color: $wac-main-text;
5462
- font-size: rem(12);
5463
- text-align: left;
5464
- }
5465
- &:hover,
5466
- &:focus {
5467
- background-color: darken($wac-gray-background, 15%);
5468
- color: $wac-main-text;
5469
- }
5470
- }
5471
- }
5472
- }
5473
- &__right {
5474
- margin: 0 0 0 rem(15);
5475
- display: flex;
5476
- align-items: center;
5477
- p {
5478
- margin: 0;
5479
- font-size: rem(14);
5480
- line-height: rem(16);
5481
- color: $wac-secondary-color;
5269
+ .icon {
5270
+ color: $wac-placeholder-color;
5271
+ height: rem(42);
5272
+ width: rem(42);
5273
+ background-color: transparent;
5274
+ border-radius: rem(3) 0 0 rem(3);
5275
+ font-size: rem(20);
5276
+ margin-left: rem(10);
5277
+ top: rem(11);
5482
5278
  }
5483
5279
  }
5484
5280
  }
5485
- }
5486
- div.wac-field-input-search {
5487
- padding: 20px;
5488
- background-color: $wac-gray-background;
5489
- &.small-padding {
5490
- padding: 10px 20px;
5491
- }
5492
- p.control {
5493
- .input,
5494
- .input:focus,
5495
- .input.is-focused,
5496
- .input:active,
5497
- .input.is-active {
5498
- font-size: rem(14);
5499
- color: $wac-main-text;
5500
- border: rem(1) solid $wac-input-border-search;
5501
- box-shadow: none;
5502
- padding: rem(13.5) rem(20) rem(13.5) rem(48);
5503
- border-radius: rem(3);
5504
- margin: 0;
5505
- height: auto;
5506
- min-height: unset;
5507
5281
 
5508
- &::placeholder {
5509
- color: $wac-placeholder-color;
5510
- font-weight: normal;
5282
+ &.is-medium {
5283
+ .control {
5284
+ .input,
5285
+ .input:not([disabled]):focus,
5286
+ .input:not([disabled]).is-focused,
5287
+ .input:not([disabled]):active,
5288
+ .input:not([disabled]).is-active {
5289
+ min-height: rem(50);
5290
+ padding-left: rem(45);
5291
+ }
5292
+ .icon {
5293
+ top: rem(4);
5294
+ right: rem(19);
5295
+ font-size: rem(20);
5511
5296
  }
5512
- }
5513
-
5514
- .input:focus,
5515
- .input.is-focused,
5516
- .input:active,
5517
- .input.is-active {
5518
- border-color: $wac-wizishop-blue;
5519
- }
5520
-
5521
- .icon {
5522
- position: absolute;
5523
- top: 50%;
5524
- left: 20px;
5525
- font-size: rem(18);
5526
- transform: translateY(-50%);
5527
- pointer-events: none;
5528
- font-weight: 400;
5529
- color: $wac-placeholder-color;
5530
- margin: 0;
5531
- width: rem(18);
5532
- height: rem(18);
5533
5297
  }
5534
5298
  }
5535
- }
5536
- .wac-input {
5537
- .field-label {
5538
- margin-bottom: 0!important;
5539
- &.is-normal {
5540
- padding-top: 0 !important;
5299
+
5300
+ &.has-no-block {
5301
+ .input,
5302
+ .input:not([disabled]):focus,
5303
+ .input:not([disabled]).is-focused,
5304
+ .input:not([disabled]):active,
5305
+ .input:not([disabled]).is-active {
5306
+ border-left: rem(5) solid $wac-lightened-secondary;
5307
+ border-radius: 0;
5541
5308
  }
5542
5309
  }
5543
- .field-label {
5544
- position: relative;
5545
- }
5546
5310
 
5547
- &.with-progress-bar {
5548
- input {
5549
- margin-bottom: rem(20) !important;
5550
- }
5311
+ .input:not([disabled]):focus,
5312
+ .input:not([disabled]).is-focused,
5313
+ .input:not([disabled]):active,
5314
+ .input:not([disabled]).is-active,
5315
+ &.always-hover .input {
5316
+ border-color: $wizishop-blue !important;
5551
5317
  }
5552
5318
 
5553
- &.with-padding {
5554
- label {
5555
- display: none;
5556
- }
5557
- .control {
5558
- margin: 0;
5559
- .icon {
5560
- height: 50px !important;
5561
- i {
5562
- color: $wac-placeholder-color !important;
5563
- font-size: rem(18);
5564
- }
5565
- }
5566
- }
5567
- input {
5568
- height: 50px;
5569
- max-height: 50px;
5570
- padding: 0 20px;
5571
- line-height: 50px;
5572
- border-radius: 3px;
5573
- margin: 0 !important;
5574
- font-size: rem(14) !important;
5575
- color: $wac-placeholder-color;
5576
- }
5577
- ::-webkit-input-placeholder {
5578
- /* Chrome/Opera/Safari */
5579
- color: $wac-placeholder-color !important;
5580
- opacity: 1;
5581
- }
5582
- ::-moz-placeholder {
5583
- /* Firefox 19+ */
5584
- color: $wac-placeholder-color !important;
5585
- opacity: 1;
5586
- }
5587
- :-ms-input-placeholder {
5588
- /* IE 10+ */
5589
- color: $wac-placeholder-color !important;
5590
- opacity: 1;
5319
+ &.has-no-block {
5320
+ .input:not([disabled]):focus,
5321
+ .input:not([disabled]).is-focused,
5322
+ .input:not([disabled]):active,
5323
+ .input:not([disabled]).is-active {
5324
+ border-left-color: $wizishop-blue;
5591
5325
  }
5592
- :-moz-placeholder {
5593
- /* Firefox 18- */
5594
- color: $wac-placeholder-color !important;
5595
- opacity: 1;
5326
+ .icon.is-small.is-right {
5327
+ margin-top: rem(3);
5596
5328
  }
5597
5329
  }
5598
5330
 
5599
- label {
5331
+ .control > label {
5600
5332
  font-size: rem(14);
5601
- color: $wac-main-text;
5602
- font-weight: 500 !important;
5603
- margin-bottom: 0!important;
5604
-
5605
- &.has-text-weight-bold {
5606
- font-weight: 500 !important;
5607
- }
5608
- &.label-inline {
5609
- display: inline;
5610
- }
5333
+ padding: 0 0 rem(10);
5334
+ display: inline-block;
5611
5335
  > span {
5612
5336
  color: $wac-second-color;
5613
5337
  font-style: italic;
5614
- font-size: rem(12);
5615
5338
  }
5616
5339
  }
5617
- input::placeholder {
5618
- font-weight: 400;
5340
+
5341
+ &__info,
5342
+ &__error {
5343
+ font-size: rem(12);
5344
+ color: $wac-second-color;
5619
5345
  }
5620
- input:not([disabled]):focus {
5621
- border-color: $wac-main-text;
5622
- + span {
5346
+
5347
+ &__size {
5348
+ font-size: rem(12);
5349
+ color: $wac-main-text;
5350
+ position: absolute;
5351
+ top: 0;
5352
+ right: rem(-24);
5353
+ strong {
5354
+ font-weight: 400;
5623
5355
  color: $wac-main-text;
5624
5356
  }
5625
5357
  }
5626
- .input,
5627
- .input:not([disabled]):focus,
5628
- .input:not([disabled]).is-focused,
5629
- .input:not([disabled]):active,
5630
- .input:not([disabled]).is-active {
5631
- font-size: rem(14);
5632
- color: $wac-main-text;
5633
- border: rem(1) solid $wac-lightened-secondary;
5634
- box-shadow: none;
5635
- padding: rem(10) rem(15);
5636
- border-radius: rem(3);
5637
- margin-bottom: rem(8);
5638
- height: rem(40);
5639
5358
 
5640
- &::placeholder {
5641
- color: $wac-placeholder-color;
5642
- font-weight: 400;
5643
- }
5644
- &.is-number {
5645
- max-width: 100px;
5646
- }
5647
- &.remove-margin {
5359
+ .field {
5360
+ .control {
5648
5361
  margin-bottom: 0;
5649
5362
  }
5650
- &.is-danger {
5651
- border-color: $wac-primary-button !important;
5652
- }
5653
5363
  }
5364
+ }
5654
5365
 
5655
- .control {
5656
- margin-top: rem(6);
5657
- &.has-icons-left {
5658
- .input,
5659
- .input:not([disabled]):focus,
5660
- .input:not([disabled]).is-focused,
5661
- .input:not([disabled]):active,
5662
- .input:not([disabled]).is-active {
5663
- font-size: rem(14);
5664
- color: $wac-main-text;
5665
- border: rem(1) solid $wac-lightened-secondary;
5666
- box-shadow: none;
5667
- padding: 0 rem(44);
5668
- border-radius: rem(3);
5669
- margin-bottom: rem(12);
5366
+ /* Chrome, Safari, Edge, Opera */
5367
+ .wac-input input::-webkit-outer-spin-button,
5368
+ .wac-input input::-webkit-inner-spin-button {
5369
+ -webkit-appearance: none;
5370
+ margin: 0;
5371
+ }
5670
5372
 
5671
- &::placeholder {
5672
- color: $wac-placeholder-color;
5673
- }
5674
- }
5373
+ /* Firefox */
5374
+ .wac-input input[type='number'] {
5375
+ -moz-appearance: textfield;
5376
+ }
5377
+
5378
+ .wac-input [disabled].input {
5379
+ background-color: $wac-gray-background;
5380
+ }
5381
+
5382
+ .wac-input .input:not([disabled]):focus,
5383
+ .wac-input .input:not([disabled]).is-focused,
5384
+ .wac-input .input:not([disabled]):active,
5385
+ .wac-input .input:not([disabled]).is-active,
5386
+ .wac-input .input:not([disabled]).always-hover {
5387
+ border-color: $wizishop-blue !important;
5388
+ box-shadow: 0px 0px 4px $wac-input-box-shadow !important;
5389
+ }
5390
+
5391
+ .wac-input .text-info,
5392
+ .wac-input .wac-input__error {
5393
+ display: block;
5394
+ transform: translateY(-4px);
5395
+ }
5396
+
5397
+ .wac-input {
5398
+ .indication {
5399
+ position: absolute;
5400
+ right: 0;
5401
+ top: 0;
5402
+ height: 40px;
5403
+ color: $wac-main-text;
5404
+ font-size: rem(14);
5405
+ padding: 7.5px 15px;
5406
+ background-color: $wac-background-indication;
5407
+ border: none;
5408
+ border-radius: 3px 3px 0 0;
5409
+ white-space: nowrap;
5410
+ transition: .3s ease;
5411
+ font-weight: 500;
5412
+ display: flex;
5413
+ align-items: center;
5414
+ z-index: 2;
5415
+ &.reverse {
5416
+ right: auto;
5417
+ left: 1px;
5418
+ border-radius: 3px 0 0 3px;
5419
+ border-left: none;
5420
+ border-right: 1px solid $wac-border-form;
5421
+ }
5422
+ }
5423
+ input:focus {
5424
+ & + .indication {
5425
+ background-color: $wac-wizishop-blue;
5426
+ border: 1px solid $wac-wizishop-blue;
5427
+ color: $wac-white!important;
5428
+ }
5429
+ }
5430
+ }
5431
+
5432
+ .wac-input .has-text-success {
5433
+ color: $wac-green-color;
5434
+ font-size: rem(14);
5435
+ }
5436
+
5437
+ .indication-left {
5438
+ .control {
5439
+ display: flex;
5440
+ flex-direction: row-reverse;
5441
+ width: 100%;
5442
+ border: 1px solid $border-form;
5443
+ border-radius: 3px;
5444
+ overflow: hidden;
5445
+ &:hover, &:focus {
5446
+ border-color: $wizishop-blue;
5447
+ }
5448
+ input {
5449
+ border: none!important;
5450
+ padding: 0 10px!important;
5451
+ margin: 0!important;
5452
+ }
5453
+ .indication {
5454
+ position: relative;
5455
+ top: auto;
5456
+ left: auto;
5457
+ right: auto;
5458
+ padding: 8px 20px;
5459
+ height: 40px;
5460
+ display: flex;
5461
+ align-items: center;
5462
+ justify-content: center;
5463
+ }
5464
+ }
5465
+ }
5466
+ .wac-field-checkbox {
5467
+ &__row {
5468
+ position: relative;
5469
+ min-width: 100%;
5470
+ margin: 0;
5471
+ }
5472
+ &--nowrap {
5473
+ display: inline-block;
5474
+ width: auto;
5475
+ min-width: 0;
5476
+ margin: 0 10px 10px 0;
5477
+ .field {
5478
+ &__row {
5479
+ width: auto;
5480
+ display: inline-block;
5481
+ margin: 0;
5482
+ }
5483
+ }
5484
+ }
5485
+
5486
+ input[type='text'] {
5487
+ height: 40px;
5488
+ max-height: 40px;
5489
+ padding: 0 20px;
5490
+ line-height: 40px;
5491
+ border: 1px solid $wac-border-form;
5492
+ border-radius: 3px;
5493
+ margin: 15px 0 10px !important;
5494
+ font-size: rem(14) !important;
5495
+ color: $wac-main-text;
5496
+ &:focus {
5497
+ border-color: $wac-wizishop-blue !important;
5498
+ box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
5499
+ &::-webkit-input-placeholder {
5500
+ /* Chrome/Opera/Safari */
5501
+ opacity: 0;
5502
+ }
5503
+ &::-moz-placeholder {
5504
+ /* Firefox 19+ */
5505
+ opacity: 0;
5506
+ }
5507
+ &:-ms-input-placeholder {
5508
+ /* IE 10+ */
5509
+ opacity: 0;
5510
+ }
5511
+ &:-moz-placeholder {
5512
+ /* Firefox 18- */
5513
+ opacity: 0;
5514
+ }
5515
+ }
5516
+ }
5517
+ &.alone {
5518
+ .is-checkradio[type='checkbox'] {
5519
+ & + label {
5520
+ padding-left: 9px;
5521
+ margin-right: 0px;
5522
+
5523
+ &:before {
5524
+ border-width: 1px;
5525
+ width: 16px;
5526
+ height: 16px;
5527
+ border-radius: 2px;
5528
+ }
5529
+ }
5530
+ &:checked + label {
5531
+ &:after {
5532
+ top: 7px;
5533
+ transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
5534
+ }
5535
+ }
5536
+ }
5537
+ }
5538
+
5539
+ .is-checkradio[type='checkbox'] {
5540
+ outline: 0 !important;
5541
+ top: 0;
5542
+ & + label {
5543
+ font-size: rem(14);
5544
+ line-height: 0;
5545
+ color: $wac-input-radio-color-label;
5546
+ white-space: nowrap;
5547
+ padding: 0 8px;
5548
+ margin-right: 0;
5549
+ outline: 0 !important;
5550
+ &:before {
5551
+ width: 16px;
5552
+ height: 16px;
5553
+ border: 1px solid $wac-border-color;
5554
+ top: 0;
5555
+ transition: all 0.3s ease-in-out;
5556
+ }
5557
+ &:after {
5558
+ top: 2.3px !important;
5559
+ left: 3px !important;
5560
+ width: 10px;
5561
+ height: 12px;
5562
+ border: none !important;
5563
+ background: transparent
5564
+ 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")
5565
+ center center / 8px 8px no-repeat;
5566
+ transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
5567
+ transition: all 0.3s ease-in-out;
5568
+ }
5569
+ span {
5570
+ margin: 0 0 0 rem(16);
5571
+ display: inline-block;
5572
+ }
5573
+ &:hover,
5574
+ &:focus {
5575
+ &:before {
5576
+ border-color: $wac-input-active-color !important;
5577
+ }
5578
+ }
5579
+ &:before,
5580
+ &:after {
5581
+ outline: 0 !important;
5582
+ }
5583
+ }
5584
+ &:hover {
5585
+ & + label {
5586
+ color: $wac-input-radio-color-active-label;
5587
+ &:before {
5588
+ border-color: $wac-input-active-color !important;
5589
+ }
5590
+ &:after {
5591
+ border-color: $wac-white !important;
5592
+ }
5593
+ }
5594
+ &:not([disabled]) {
5595
+ & + label {
5596
+ &:before {
5597
+ border-color: $wac-input-active-color !important;
5598
+ }
5599
+ }
5600
+ }
5601
+ }
5602
+ &:checked + label {
5603
+ color: $wac-input-radio-color-active-label;
5604
+ &:before {
5605
+ border: 1px solid $wac-input-active-color;
5606
+ background-color: $wac-input-active-color;
5607
+ transition: all 0.3s ease-in-out;
5608
+ }
5609
+ &:after {
5610
+ left: 7px;
5611
+ top: 8px;
5612
+ transition: all 0.3s ease-in-out;
5613
+ }
5614
+ }
5615
+ }
5616
+
5617
+ }
5618
+ .wac-info {
5619
+ display: inline-block;
5620
+ width: 40px;
5621
+ height: 40px;
5622
+
5623
+ &__wrapper {
5624
+ @include flexbox();
5625
+ @include justify-content(center);
5626
+ @include align-items(center);
5627
+ width: 100%;
5628
+ height: 100%;
5629
+ position: relative;
5630
+
5631
+ i {
5632
+ font-size: 14px;
5633
+ line-height: 25px;
5634
+ color: $wac-second-color;
5635
+ transition: color 0.3s ease-in-out;
5636
+ }
5637
+
5638
+ &__sublevel {
5639
+ position: absolute;
5640
+ width: 350px;
5641
+ top: 13px;
5642
+ left: 100%;
5643
+ z-index: -1;
5644
+ opacity: 0;
5645
+ background-color: $wac-white;
5646
+ border-radius: rem(3);
5647
+ box-shadow: 0px 2px 5px $wac-info-box-shadow;
5648
+ visibility: hidden;
5649
+ transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out, visibility 0s linear 0.16s;
5650
+
5651
+ &__container {
5652
+ padding: 15px 20px;
5653
+ font-size: rem(14);
5654
+ line-height: rem(25);
5655
+ color: $wac-second-color;
5656
+ }
5657
+ }
5658
+
5659
+ &:hover {
5660
+ i {
5661
+ color: $wac-input-active-color;
5662
+ transition: color 0.3s ease-in-out;
5663
+ }
5664
+
5665
+ .wac-info__wrapper__sublevel {
5666
+ visibility: visible;
5667
+ opacity: 1;
5668
+ z-index: 2;
5669
+ transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
5670
+ }
5671
+ }
5672
+ }
5673
+ }
5674
+ .wac {
5675
+ &-select-in-text {
5676
+ width: auto;
5677
+ position: relative;
5678
+ display: flex;
5679
+ align-items: center;
5680
+ padding: 20px 0;
5681
+ &:hover,
5682
+ &:focus {
5683
+ z-index: 4;
5684
+ }
5685
+ &__prepend,
5686
+ &__after {
5687
+ font-size: rem(14);
5688
+ line-height: rem(16);
5689
+ color: $wac-main-text;
5690
+ }
5691
+ &__prepend {
5692
+ margin: 0 rem(4) 0 0;
5693
+ }
5694
+ &__after {
5695
+ margin: 0 0 0 rem(4);
5696
+ }
5697
+ &__current {
5698
+ display: flex;
5699
+ width: auto;
5700
+ justify-content: space-between;
5701
+ align-items: center;
5702
+ align-content: center;
5703
+ font-size: rem(14);
5704
+ line-height: rem(16);
5705
+ color: $wac-main-text;
5706
+ cursor: pointer;
5707
+ white-space: nowrap;
5708
+ text-overflow: ellipsis;
5709
+ font-weight: 500;
5710
+ position: relative;
5711
+ span {
5712
+ position: relative;
5713
+ white-space: nowrap;
5714
+ &:before {
5715
+ content: '';
5716
+ display: block;
5717
+ position: absolute;
5718
+ bottom: -3px;
5719
+ left: 0;
5720
+ width: 100%;
5721
+ height: 1px;
5722
+ 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");
5723
+ background-position: left top;
5724
+ }
5725
+ &:after {
5726
+ content: '';
5727
+ display: block;
5728
+ position: absolute;
5729
+ top: 100%;
5730
+ left: 0;
5731
+ width: 100%;
5732
+ height: 14px;
5733
+ }
5734
+ }
5735
+ }
5736
+ &__content {
5737
+ position: absolute;
5738
+ top: 100%;
5739
+ margin-top: rem(14);
5740
+ left: 0;
5741
+ width: auto;
5742
+ border: 1px solid $wac-border-light;
5743
+ border-radius: 3px;
5744
+ display: flex;
5745
+ flex-direction: column;
5746
+ justify-content: flex-start;
5747
+ align-items: flex-start;
5748
+ background-color: $wac-white;
5749
+ max-height: 400px;
5750
+ height: auto;
5751
+ visibility: visible;
5752
+ opacity: 1;
5753
+ box-shadow: 3px 3px 20px $wac-select-box-shadow;
5754
+ &.hidden {
5755
+ visibility: hidden;
5756
+ opacity: 0;
5757
+ & > * {
5758
+ opacity: 0;
5759
+ transition: 0s;
5760
+ }
5761
+ }
5762
+ &.open,
5763
+ &.open.hidden {
5764
+ position: relative;
5765
+ left: auto;
5766
+ top: 0;
5767
+ transform: translateX(-1px);
5768
+ visibility: visible;
5769
+ opacity: 1;
5770
+ & > * {
5771
+ opacity: 1;
5772
+ transition: 0s;
5773
+ }
5774
+ }
5775
+ &__item {
5776
+ width: 100%;
5777
+ font-size: rem(14);
5778
+ line-height: rem(40);
5779
+ cursor: pointer;
5780
+ transition: 0.3s ease;
5781
+ position: relative;
5782
+ display: flex;
5783
+ justify-content: flex-start;
5784
+ align-content: center;
5785
+ align-items: center;
5786
+ font-weight: 400;
5787
+ > div {
5788
+ padding: 0 20px;
5789
+ min-width: 100%;
5790
+ &.selected {
5791
+ background-color: $wac-hover-multiple-search;
5792
+ color: $wac-main-text;
5793
+ }
5794
+ }
5795
+ .icon {
5796
+ width: 24px;
5797
+ margin: 0 10px 0 0;
5798
+ }
5799
+ &:empty {
5800
+ display: none;
5801
+ }
5802
+ &:first-child {
5803
+ border-width: 1px 0 1px;
5804
+ }
5805
+ &:hover,
5806
+ &:focus {
5807
+ background-color: $wac-gray-background;
5808
+ color: $wac-main-text;
5809
+ }
5810
+ }
5811
+ }
5812
+ }
5813
+ }
5814
+
5815
+
5816
+ .wac {
5817
+ &-select {
5818
+ width: 100%;
5819
+ position: relative;
5820
+ height: 40px;
5821
+ border: 1px solid $wac-border-form;
5822
+ margin: 0;
5823
+ border-radius: 3px;
5824
+ z-index: 2;
5825
+ background-color: $wac-white;
5826
+ max-width: 100%;
5827
+ &:hover,
5828
+ &:focus {
5829
+ z-index: 4;
5830
+ }
5831
+ &__label {
5832
+ padding: 0;
5833
+ font-size: rem(14);
5834
+ line-height: rem(16);
5835
+ margin: 0 0 rem(12);
5836
+ font-weight: 500;
5837
+ }
5838
+ &__current {
5839
+ display: flex;
5840
+ width: 100%;
5841
+ height: 38px;
5842
+ justify-content: space-between;
5843
+ align-items: center;
5844
+ align-content: center;
5845
+ padding: 0 0 0 20px;
5846
+ color: $wac-color-text-grey;
5847
+ font-size: rem(14);
5848
+ line-height: rem(16);
5849
+ cursor: pointer;
5850
+ white-space: nowrap;
5851
+ text-overflow: ellipsis;
5852
+ max-width: 100%;
5853
+ overflow: hidden;
5854
+ &--withSearch {
5855
+ padding: 0;
5856
+ span {
5857
+ &:not(.icon):not(:last-child) {
5858
+ display: block;
5859
+ width: 100%;
5860
+ height: rem(38);
5861
+ line-height: rem(38);
5862
+ padding: 0 20px;
5863
+ }
5864
+ &.icon {
5865
+ & + span {
5866
+ padding: 0;
5867
+ }
5868
+ }
5869
+ &:last-child {
5870
+ margin: 0;
5871
+ }
5872
+ }
5873
+ &.open-search {
5874
+ span {
5875
+ &:not(.icon):not(:last-child) {
5876
+ display: none;
5877
+ }
5878
+ &.icon {
5879
+ display: none;
5880
+ }
5881
+ }
5882
+ }
5883
+ }
5884
+ span.icon {
5885
+ max-width: 24px;
5886
+ margin: 0 10px 0 0;
5887
+ i {
5888
+ font-size: rem(17);
5889
+ }
5890
+ img {
5891
+ display: block;
5892
+ max-width: rem(24);
5893
+ }
5894
+ &:empty {
5895
+ display: none;
5896
+ }
5897
+ }
5898
+ > span:not([class]):not(:last-child) {
5899
+ width: 100%;
5900
+ text-align: left;
5901
+ max-width: calc(100% - 58px);
5902
+ overflow: hidden;
5903
+ text-overflow: ellipsis;
5904
+ }
5905
+ span:last-child {
5906
+ width: 38px;
5907
+ min-width: 38px;
5908
+ height: 38px;
5909
+ margin: 0 0 0 20px;
5910
+ display: flex;
5911
+ justify-content: center;
5912
+ align-items: center;
5913
+ align-content: center;
5914
+ background-color: $wac-select-icon-background;
5915
+ border-radius: 0 3px 3px 0;
5916
+ z-index: 3;
5917
+ i {
5918
+ font-size: rem(12);
5919
+ color: $wac-second-color;
5920
+ }
5921
+ }
5922
+ &__search {
5923
+ position: relative;
5924
+ top: 0;
5925
+ left: 0;
5926
+ width: 100%;
5927
+ height: rem(38);
5928
+ display: flex;
5929
+ align-items: center;
5930
+ align-content: center;
5931
+ z-index: 2;
5932
+ padding: 0 0 0 rem(20);
5933
+ input {
5934
+ border: none;
5935
+ width: 100%;
5936
+ box-shadow: none;
5937
+ margin: 0 0 0 rem(10);
5938
+ padding: 0;
5939
+ height: rem(38);
5940
+ line-height: rem(38);
5941
+ &:focus {
5942
+ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
5943
+ opacity: 0;
5944
+ }
5945
+ &::-moz-placeholder { /* Firefox 19+ */
5946
+ opacity: 0;
5947
+ }
5948
+ &:-ms-input-placeholder { /* IE 10+ */
5949
+ opacity: 0;
5950
+ }
5951
+ &:-moz-placeholder { /* Firefox 18- */
5952
+ opacity: 0;
5953
+ }
5954
+
5955
+ }
5956
+ }
5957
+ }
5958
+ }
5959
+ .select-disabled {
5960
+ background-color: #f5f8fa;
5961
+ cursor: not-allowed;
5962
+ }
5963
+ &__content {
5964
+ position: absolute;
5965
+ top: 100%;
5966
+ margin-top: rem(14);
5967
+ left: -1px;
5968
+ width: auto;
5969
+ min-width: calc(100% - 38px);
5970
+ max-width: calc(100% + 2px);
5971
+ border: 1px solid $wac-border-light;
5972
+ border-radius: 3px;
5973
+ display: flex;
5974
+ flex-direction: column;
5975
+ justify-content: flex-start;
5976
+ align-items: flex-start;
5977
+ background-color: $wac-white;
5978
+ max-height: 260px;
5979
+ height: auto;
5980
+ visibility: visible;
5981
+ opacity: 1;
5982
+ box-shadow: 3px 3px 20px $wac-select-box-shadow;
5983
+ padding: 10px;
5984
+ &.hidden {
5985
+ visibility: hidden;
5986
+ opacity: 0;
5987
+ & > * {
5988
+ opacity: 0;
5989
+ transition: 0s;
5990
+ }
5991
+ }
5992
+ .ps {
5993
+ max-height: 240px;
5994
+ }
5995
+ &.open,
5996
+ &.open.hidden {
5997
+ position: relative;
5998
+ left: auto;
5999
+ top: 0;
6000
+ transform: translateX(-1px);
6001
+ visibility: visible;
6002
+ opacity: 1;
6003
+ & > * {
6004
+ opacity: 1;
6005
+ transition: 0s;
6006
+ }
6007
+ }
6008
+ &__cta {
6009
+ background-color: $wac-color-CTA-select;
6010
+ border: 1px solid $wac-border-CTA-select;
6011
+ color: $wac-main-text;
6012
+ font-size: rem(14);
6013
+ min-height: rem(40);
6014
+ display: flex;
6015
+ align-items: center;
6016
+ align-content: center;
6017
+ width: 100%;
6018
+ border-radius: 3px;
6019
+ cursor: pointer;
6020
+ transition: 0.3s ease;
6021
+ margin: 0 0 rem(10);
6022
+ padding: 0 20px;
6023
+ > div {
6024
+ display: flex;
6025
+ align-items: center;
6026
+ align-content: center;
6027
+ justify-content: flex-start;
6028
+ width: 100%;
6029
+ i {
6030
+ color: $wac-wizishop-blue;
6031
+ margin: 0 8px 0 0;
6032
+ }
6033
+ strong {
6034
+ display: inline-block;
6035
+ margin: 0 20px 0 0;
6036
+ }
6037
+ }
6038
+ &:hover,
6039
+ &:focus {
6040
+ background-color: darken($wac-color-CTA-select, 10%);
6041
+ }
6042
+ }
6043
+ &__item {
6044
+ width: 100%;
6045
+ font-size: rem(14);
6046
+ line-height: rem(30);
6047
+ cursor: pointer;
6048
+ transition: 0.3s ease;
6049
+ position: relative;
6050
+ display: flex;
6051
+ justify-content: flex-start;
6052
+ align-content: center;
6053
+ align-items: center;
6054
+ color: $wac-second-color;
6055
+ > div {
6056
+ width: 100%;
6057
+ display: flex;
6058
+ align-items: center;
6059
+ align-content: center;
6060
+ }
6061
+ .icon {
6062
+ width: 24px;
6063
+ margin: 0 10px 0 0;
6064
+ height: auto;
6065
+ max-height: 24px;
6066
+ }
6067
+ &:not(:last-child) {
6068
+ margin: 0 0 rem(10);
6069
+ }
6070
+ &:empty {
6071
+ display: none;
6072
+ }
6073
+ &:first-child {
6074
+ border-width: 1px 0 1px;
6075
+ }
6076
+ &:hover,
6077
+ &:focus {
6078
+ background-color: $wac-gray-background;
6079
+ color: $wac-main-text;
6080
+ }
6081
+ > div {
6082
+ padding: 0 10px;
6083
+ &.selected {
6084
+ background-color: $wac-gray-background;
6085
+ color: $wac-main-text;
6086
+ }
6087
+ }
6088
+ }
6089
+ &__empty {
6090
+ display: flex;
6091
+ width: 100%;
6092
+ justify-content: center;
6093
+ align-items: center;
6094
+ padding: 10px;
6095
+ span {
6096
+ font-size: rem(16);
6097
+ font-weight: 400;
6098
+ text-align: center;
6099
+ color: $wac-second-color;
6100
+ display: inline-block;
6101
+ line-height: rem(25);
6102
+ }
6103
+ }
6104
+ }
6105
+ }
6106
+ }
6107
+ .wac-input-with-select {
6108
+ &__label {
6109
+ font-size: rem(14);
6110
+ line-height: rem(16);
6111
+ font-weight: 500;
6112
+ margin: 0 0 rem(12);
6113
+ cursor: pointer;
6114
+ display: block;
6115
+ }
6116
+ &__wrapper {
6117
+ display: flex;
6118
+ &__left {
6119
+ position: relative;
6120
+ display: flex;
6121
+ justify-content: space-between;
6122
+ align-items: stretch;
6123
+ align-content: stretch;
6124
+ flex-wrap: nowrap;
6125
+ border-radius: 3px;
6126
+ max-height: 40px;
6127
+ background-color: $wac-white;
6128
+ z-index: 2;
6129
+ border: 1px solid $wac-border-form;
5675
6130
 
5676
- .icon {
5677
- color: $wac-border-form;
5678
- height: rem(42);
5679
- width: rem(46);
5680
- border-radius: rem(3) 0 0 rem(3);
5681
- font-size: rem(16);
5682
- transform: translateX(5px);
5683
- pointer-events: none;
5684
- }
5685
- }
5686
- &.has-input-group {
5687
- display: -ms-flexbox;
5688
- display: flex;
5689
- -ms-flex-wrap: wrap;
5690
- flex-wrap: wrap;
5691
- -ms-flex-align: stretch;
5692
- align-items: stretch;
5693
- width: 100%;
5694
6131
  input {
5695
- position: relative;
5696
- -ms-flex: 1 1 0;
5697
- flex: 1 1 0;
5698
- min-width: 0;
5699
- margin-bottom: 0 !important;
5700
- &.text-append {
5701
- border-radius: rem(3) 0 0 rem(3);
5702
- border-right: none;
6132
+ background: transparent;
6133
+ border: none;
6134
+ color: $wac-main-text;
6135
+ font-size: rem(14);
6136
+ height: 40px;
6137
+ line-height: 40px;
6138
+ font-weight: 400;
6139
+ padding: 0 0 0 15px;
6140
+ &::-webkit-input-placeholder {
6141
+ /* Chrome/Opera/Safari */
6142
+ color: $wac-color-icon-search-multiple-search;
6143
+ opacity: 1;
6144
+ font-weight: 400;
5703
6145
  }
5704
- + .append {
5705
- border-radius: 0.25rem 0 0 0.25rem;
6146
+ &::-moz-placeholder {
6147
+ /* Firefox 19+ */
6148
+ color: $wac-color-icon-search-multiple-search;
6149
+ opacity: 1;
6150
+ font-weight: 400;
5706
6151
  }
5707
- }
5708
- .has-input-group {
5709
- display: flex;
5710
- position: relative;
5711
- .prepend {
5712
- margin-right: -1px;
6152
+ &:-ms-input-placeholder {
6153
+ /* IE 10+ */
6154
+ color: $wac-color-icon-search-multiple-search;
6155
+ opacity: 1;
6156
+ font-weight: 400;
5713
6157
  }
5714
- .has-input-group-text {
5715
- display: -ms-flexbox;
5716
- display: flex;
5717
- -ms-flex-align: center;
5718
- align-items: center;
5719
- padding: 0.375rem 1.5rem;
5720
- margin-bottom: 0;
5721
- font-size: 0.875rem;
6158
+ &:-moz-placeholder {
6159
+ /* Firefox 18- */
6160
+ color: $wac-color-icon-search-multiple-search;
6161
+ opacity: 1;
5722
6162
  font-weight: 400;
5723
- line-height: 1.5;
5724
- color: $wac-color-text-grey;
5725
- text-align: center;
5726
- white-space: nowrap;
5727
- background-color: $wac-input-border;
5728
- border: 1px solid $wac-input-border;
5729
- &.prepend {
5730
- border-radius: 0.25rem 0 0 0.25rem;
6163
+ }
6164
+ &:focus {
6165
+ & + button i {
6166
+ color: $wac-main-text;
5731
6167
  }
5732
- &.append {
5733
- border-left: 0;
5734
- border-radius: 0 0.25rem 0.25rem 0;
6168
+ &::-webkit-input-placeholder {
6169
+ /* Chrome/Opera/Safari */
6170
+ color: $wac-white;
6171
+ opacity: 1;
6172
+ }
6173
+ &::-moz-placeholder {
6174
+ /* Firefox 19+ */
6175
+ color: $wac-white;
6176
+ opacity: 1;
6177
+ }
6178
+ &:-ms-input-placeholder {
6179
+ /* IE 10+ */
6180
+ color: $wac-white;
6181
+ opacity: 1;
6182
+ }
6183
+ &:-moz-placeholder {
6184
+ /* Firefox 18- */
6185
+ color: $wac-white;
6186
+ opacity: 1;
5735
6187
  }
5736
6188
  }
5737
- .is-right {
5738
- left: -40px;
5739
- }
5740
- .is-left {
5741
- left: auto;
5742
- right: -45px;
5743
- }
5744
- }
5745
- .icon.is-small.is-right {
5746
- }
5747
- .wac-input__info,
5748
- .wac-input__error {
5749
- font-size: rem(12);
5750
- color: $wac-secondary-text;
5751
- position: absolute;
5752
- bottom: -22px !important;
5753
- left: 0;
5754
- }
5755
- }
5756
- &.has-icons-right {
5757
- .icon {
5758
- height: rem(39);
5759
6189
  }
5760
- }
5761
- }
5762
6190
 
5763
- &.is-big {
5764
- .control.has-icons-left {
5765
- .input,
5766
- .input:not([disabled]):focus,
5767
- .input:not([disabled]).is-focused,
5768
- .input:not([disabled]):active,
5769
- .input:not([disabled]).is-active {
5770
- font-size: rem(14);
5771
- color: $wac-main-text;
5772
- border: rem(1) solid $wac-lightened-secondary;
5773
- box-shadow: none;
5774
- padding: rem(30) rem(50);
5775
- border-radius: rem(3);
5776
- margin-bottom: rem(12);
6191
+ &__current {
6192
+ position: relative;
6193
+ padding: rem(5) rem(16);
6194
+ max-height: rem(40);
6195
+ display: flex;
6196
+ justify-content: center;
6197
+ align-items: center;
6198
+ align-content: center;
6199
+ cursor: pointer;
5777
6200
 
5778
- &::placeholder {
5779
- color: $wac-placeholder-color;
6201
+ &:before {
6202
+ content: '';
6203
+ display: block;
6204
+ position: absolute;
6205
+ left: -0.5px;
6206
+ top: 50%;
6207
+ transform: translateY(-50%);
6208
+ width: 1px;
6209
+ height: rem(25);
6210
+ background-color: $wac-border-form;
5780
6211
  }
5781
- }
5782
-
5783
- .icon {
5784
- color: $wac-placeholder-color;
5785
- height: rem(42);
5786
- width: rem(42);
5787
- background-color: transparent;
5788
- border-radius: rem(3) 0 0 rem(3);
5789
- font-size: rem(20);
5790
- margin-left: rem(10);
5791
- top: rem(11);
5792
- }
5793
- }
5794
- }
5795
6212
 
5796
- &.is-medium {
5797
- .control {
5798
- .input,
5799
- .input:not([disabled]):focus,
5800
- .input:not([disabled]).is-focused,
5801
- .input:not([disabled]):active,
5802
- .input:not([disabled]).is-active {
5803
- min-height: rem(50);
5804
- padding-left: rem(45);
5805
- }
5806
- .icon {
5807
- top: rem(4);
5808
- right: rem(19);
5809
- font-size: rem(20);
6213
+ span {
6214
+ position: relative;
6215
+ white-space: nowrap;
6216
+ line-height: 1;
6217
+ &:before {
6218
+ content: '';
6219
+ display: block;
6220
+ position: absolute;
6221
+ top: 100%;
6222
+ margin-top: 2px;
6223
+ left: 0;
6224
+ width: 100%;
6225
+ height: 1px;
6226
+ border-bottom: 1px dashed $wac-primary-button;
6227
+ }
6228
+ }
5810
6229
  }
5811
- }
5812
- }
5813
-
5814
- &.has-no-block {
5815
- .input,
5816
- .input:not([disabled]):focus,
5817
- .input:not([disabled]).is-focused,
5818
- .input:not([disabled]):active,
5819
- .input:not([disabled]).is-active {
5820
- border-left: rem(5) solid $wac-lightened-secondary;
5821
- border-radius: 0;
5822
- }
5823
- }
5824
6230
 
5825
- .input:not([disabled]):focus,
5826
- .input:not([disabled]).is-focused,
5827
- .input:not([disabled]):active,
5828
- .input:not([disabled]).is-active,
5829
- &.always-hover .input {
5830
- border-color: $wizishop-blue !important;
5831
- }
6231
+ &__select {
6232
+ position: absolute;
6233
+ top: 50px;
6234
+ width: auto;
6235
+ left: calc(100% - 40px);
6236
+ margin-top: 0;
6237
+ background-color: $wac-white;
6238
+ z-index: 3;
6239
+ box-shadow: 3px 3px 20px $wac-input-with-select-box-shadow;
6240
+ border-radius: 3px;
6241
+ border: 1px solid $wac-border-light;
6242
+ padding: 10px;
5832
6243
 
5833
- &.has-no-block {
5834
- .input:not([disabled]):focus,
5835
- .input:not([disabled]).is-focused,
5836
- .input:not([disabled]):active,
5837
- .input:not([disabled]).is-active {
5838
- border-left-color: $wizishop-blue;
5839
- }
5840
- .icon.is-small.is-right {
5841
- margin-top: rem(3);
6244
+ &__item {
6245
+ width: 100%;
6246
+ font-size: rem(14);
6247
+ line-height: rem(30);
6248
+ cursor: pointer;
6249
+ transition: 0.3s ease;
6250
+ position: relative;
6251
+ padding: 0 10px;
6252
+ white-space: nowrap;
6253
+ &:not(:last-child) {
6254
+ margin: 0 0 rem(10);
6255
+ }
6256
+ span {
6257
+ color: $wac-main-text;
6258
+ font-size: rem(12);
6259
+ text-align: left;
6260
+ }
6261
+ &:hover,
6262
+ &:focus {
6263
+ background-color: darken($wac-gray-background, 15%);
6264
+ color: $wac-main-text;
6265
+ }
6266
+ }
6267
+ }
5842
6268
  }
5843
- }
5844
-
5845
- .control > label {
5846
- font-size: rem(14);
5847
- padding: 0 0 rem(10);
5848
- display: inline-block;
5849
- > span {
5850
- color: $wac-second-color;
5851
- font-style: italic;
6269
+ &__right {
6270
+ margin: 0 0 0 rem(15);
6271
+ display: flex;
6272
+ align-items: center;
6273
+ p {
6274
+ margin: 0;
6275
+ font-size: rem(14);
6276
+ line-height: rem(16);
6277
+ color: $wac-secondary-color;
6278
+ }
5852
6279
  }
5853
6280
  }
5854
-
5855
- &__info,
5856
- &__error {
5857
- font-size: rem(12);
5858
- color: $wac-second-color;
6281
+ }
6282
+ div.wac-field-input-search {
6283
+ padding: 20px;
6284
+ background-color: $wac-gray-background;
6285
+ &.small-padding {
6286
+ padding: 10px 20px;
5859
6287
  }
5860
-
5861
- &__size {
5862
- font-size: rem(12);
5863
- color: $wac-main-text;
5864
- position: absolute;
5865
- top: 0;
5866
- right: rem(-24);
5867
- strong {
5868
- font-weight: 400;
6288
+ p.control {
6289
+ .input,
6290
+ .input:focus,
6291
+ .input.is-focused,
6292
+ .input:active,
6293
+ .input.is-active {
6294
+ font-size: rem(14);
5869
6295
  color: $wac-main-text;
5870
- }
5871
- }
6296
+ border: rem(1) solid $wac-input-border-search;
6297
+ box-shadow: none;
6298
+ padding: rem(13.5) rem(20) rem(13.5) rem(48);
6299
+ border-radius: rem(3);
6300
+ margin: 0;
6301
+ height: auto;
6302
+ min-height: unset;
5872
6303
 
5873
- .field {
5874
- .control {
5875
- margin-bottom: 0;
6304
+ &::placeholder {
6305
+ color: $wac-placeholder-color;
6306
+ font-weight: normal;
6307
+ }
5876
6308
  }
5877
- }
5878
- }
5879
6309
 
5880
- /* Chrome, Safari, Edge, Opera */
5881
- .wac-input input::-webkit-outer-spin-button,
5882
- .wac-input input::-webkit-inner-spin-button {
5883
- -webkit-appearance: none;
5884
- margin: 0;
5885
- }
5886
-
5887
- /* Firefox */
5888
- .wac-input input[type='number'] {
5889
- -moz-appearance: textfield;
5890
- }
5891
-
5892
- .wac-input [disabled].input {
5893
- background-color: $wac-gray-background;
5894
- }
5895
-
5896
- .wac-input .input:not([disabled]):focus,
5897
- .wac-input .input:not([disabled]).is-focused,
5898
- .wac-input .input:not([disabled]):active,
5899
- .wac-input .input:not([disabled]).is-active,
5900
- .wac-input .input:not([disabled]).always-hover {
5901
- border-color: $wizishop-blue !important;
5902
- box-shadow: 0px 0px 4px $wac-input-box-shadow !important;
5903
- }
5904
-
5905
- .wac-input .text-info,
5906
- .wac-input .wac-input__error {
5907
- display: block;
5908
- transform: translateY(-4px);
5909
- }
5910
-
5911
- .wac-input {
5912
- .indication {
5913
- position: absolute;
5914
- right: 0;
5915
- top: 0;
5916
- height: 40px;
5917
- color: $wac-main-text;
5918
- font-size: rem(14);
5919
- padding: 7.5px 15px;
5920
- background-color: $wac-background-indication;
5921
- border: none;
5922
- border-radius: 3px 3px 0 0;
5923
- white-space: nowrap;
5924
- transition: .3s ease;
5925
- font-weight: 500;
5926
- display: flex;
5927
- align-items: center;
5928
- z-index: 2;
5929
- &.reverse {
5930
- right: auto;
5931
- left: 1px;
5932
- border-radius: 3px 0 0 3px;
5933
- border-left: none;
5934
- border-right: 1px solid $wac-border-form;
6310
+ .input:focus,
6311
+ .input.is-focused,
6312
+ .input:active,
6313
+ .input.is-active {
6314
+ border-color: $wac-wizishop-blue;
5935
6315
  }
5936
- }
5937
- input:focus {
5938
- & + .indication {
5939
- background-color: $wac-wizishop-blue;
5940
- border: 1px solid $wac-wizishop-blue;
5941
- color: $wac-white!important;
6316
+
6317
+ .icon {
6318
+ position: absolute;
6319
+ top: 50%;
6320
+ left: 20px;
6321
+ font-size: rem(18);
6322
+ transform: translateY(-50%);
6323
+ pointer-events: none;
6324
+ font-weight: 400;
6325
+ color: $wac-placeholder-color;
6326
+ margin: 0;
6327
+ width: rem(18);
6328
+ height: rem(18);
5942
6329
  }
5943
6330
  }
5944
6331
  }
5945
-
5946
- .wac-input .has-text-success {
5947
- color: $wac-green-color;
5948
- font-size: rem(14);
5949
- }
5950
-
5951
- .indication-left {
5952
- .control {
5953
- display: flex;
5954
- flex-direction: row-reverse;
5955
- width: 100%;
5956
- border: 1px solid $border-form;
5957
- border-radius: 3px;
5958
- overflow: hidden;
5959
- &:hover, &:focus {
5960
- border-color: $wizishop-blue;
5961
- }
5962
- input {
5963
- border: none!important;
5964
- padding: 0 10px!important;
5965
- margin: 0!important;
6332
+ .wac-logo {
6333
+ &__wrapper {
6334
+ svg {
6335
+ width: 128px !important;
5966
6336
  }
5967
- .indication {
5968
- position: relative;
5969
- top: auto;
5970
- left: auto;
5971
- right: auto;
5972
- padding: 8px 20px;
5973
- height: 40px;
5974
- display: flex;
5975
- align-items: center;
5976
- justify-content: center;
6337
+
6338
+ &.white {
6339
+ .cls-0,
6340
+ .cls-1,
6341
+ .cls-2 {
6342
+ fill: white;
6343
+ }
5977
6344
  }
5978
6345
  }
5979
6346
  }
@@ -6211,74 +6578,3 @@ div.wac-field-input-search {
6211
6578
  .wac-free .ps-content > * {
6212
6579
  padding-right: 15px;
6213
6580
  }
6214
- .wac-logo {
6215
- &__wrapper {
6216
- svg {
6217
- width: 128px !important;
6218
- }
6219
-
6220
- &.white {
6221
- .cls-0,
6222
- .cls-1,
6223
- .cls-2 {
6224
- fill: white;
6225
- }
6226
- }
6227
- }
6228
- }
6229
- .wac-info {
6230
- display: inline-block;
6231
- width: 40px;
6232
- height: 40px;
6233
-
6234
- &__wrapper {
6235
- @include flexbox();
6236
- @include justify-content(center);
6237
- @include align-items(center);
6238
- width: 100%;
6239
- height: 100%;
6240
- position: relative;
6241
-
6242
- i {
6243
- font-size: 14px;
6244
- line-height: 25px;
6245
- color: $wac-second-color;
6246
- transition: color 0.3s ease-in-out;
6247
- }
6248
-
6249
- &__sublevel {
6250
- position: absolute;
6251
- width: 350px;
6252
- top: 13px;
6253
- left: 100%;
6254
- z-index: -1;
6255
- opacity: 0;
6256
- background-color: $wac-white;
6257
- border-radius: rem(3);
6258
- box-shadow: 0px 2px 5px $wac-info-box-shadow;
6259
- visibility: hidden;
6260
- transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out, visibility 0s linear 0.16s;
6261
-
6262
- &__container {
6263
- padding: 15px 20px;
6264
- font-size: rem(14);
6265
- line-height: rem(25);
6266
- color: $wac-second-color;
6267
- }
6268
- }
6269
-
6270
- &:hover {
6271
- i {
6272
- color: $wac-input-active-color;
6273
- transition: color 0.3s ease-in-out;
6274
- }
6275
-
6276
- .wac-info__wrapper__sublevel {
6277
- visibility: visible;
6278
- opacity: 1;
6279
- z-index: 2;
6280
- transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
6281
- }
6282
- }
6283
- }
6284
- }