@wizishop/angular-components 0.0.130 → 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 +1679 -1375
  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.130.tgz +0 -0
package/angular-components.scss CHANGED
@@ -108,6 +108,8 @@ $wac-button-tab-background: #EAEDF5!default;
108
108
 
109
109
  $wac-color-success-popup-alert: #6DCC95!default;
110
110
 
111
+ $wac-background-indication: #EDEFF2!default;
112
+
111
113
  .zindexToggle {
112
114
  z-index: 9!important;
113
115
  position: relative;
@@ -134,194 +136,300 @@ $wac-color-success-popup-alert: #6DCC95!default;
134
136
  .wac-table__head__cell--checkbox .wac-field-checkbox__row {
135
137
  transform: translateX(5px);
136
138
  }
137
- .wac-radio {
138
- .is-checkradio[type='radio'] {
139
- outline: 0 !important;
140
- & + 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;
141
167
  font-size: rem(14);
142
- line-height: rem(24);
143
- color: $wac-input-radio-color-label;
144
- padding-left: 30px;
145
- padding-right: 5px;
146
- margin-right: 0;
147
- outline: 0 !important;
148
- &:before {
149
- width: 16px;
150
- height: 16px;
151
- border: 1px solid $wac-border-form;
152
- border-radius: 23px;
153
- top: 3px;
154
- }
155
- &:after {
156
- width: 20px;
157
- height: 20px;
158
- background: $wac-input-active-color;
159
- top: 1px;
160
- left: -2px;
161
- }
162
- &:before,
163
- &:after {
164
- 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;
165
175
  }
166
- &:hover,
167
- &:focus {
168
- &:before {
169
- 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);
170
183
  }
171
184
  }
172
- }
173
- &:hover {
174
- & + label {
175
- color: $wac-input-radio-color-active-label;
176
- &:before {
177
- 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);
178
192
  }
179
193
  }
180
- &:not([disabled]) {
181
- & + label {
182
- &:before {
183
- border-color: $wac-input-active-color !important;
184
- }
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);
185
201
  }
186
202
  }
187
- }
188
- &:checked + label {
189
- color: $wac-input-radio-color-active-label;
190
- &:before {
191
- border-color: $wac-input-active-color;
192
- }
193
- }
194
- }
195
-
196
-
197
- .wac-radio__row {
198
- min-width: 100%;
199
- margin: 0 0 7px;
200
- }
201
-
202
- &--nowrap {
203
- display: inline-block;
204
- width: auto;
205
- min-width: 0;
206
- margin: 0 10px 10px 0;
207
- .wac-radio {
208
- &__row {
209
- width: auto;
210
- display: inline-block;
211
- 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
+ }
212
211
  }
213
- }
214
- }
215
- & + .wac-radio {
216
- margin-top: rem(-6);
217
- }
218
-
219
- &.alone {
220
- label {
221
- padding-left: 7px;
222
- margin-right: 0;
223
- }
224
-
225
- }
226
-
227
- &__input {
228
- width: 100%;
229
- margin: rem(10) 0 0;
230
- border: none;
231
- padding: 0;
232
- input {
233
- height: 40px;
234
- max-height: 40px;
235
- padding: 0 20px;
236
- line-height: 40px;
237
- border: 1px solid $wac-border-form;
238
- border-radius: 3px;
239
- margin: 0 0 30px!important;
240
- font-size: rem(14) !important;
241
- color: $wac-main-text;
242
212
  &:focus {
243
- border-color: $wizishop-blue !important;
244
- box-shadow: 0px 0px 4px $wac-radio !important;
213
+ & + button i {
214
+ color: $wac-main-text;
215
+ }
245
216
  &::-webkit-input-placeholder {
246
217
  /* Chrome/Opera/Safari */
247
- opacity: 0;
218
+ color: $wac-white;
219
+ opacity: 1;
248
220
  }
249
221
  &::-moz-placeholder {
250
222
  /* Firefox 19+ */
251
- opacity: 0;
223
+ color: $wac-white;
224
+ opacity: 1;
252
225
  }
253
226
  &:-ms-input-placeholder {
254
227
  /* IE 10+ */
255
- opacity: 0;
228
+ color: $wac-white;
229
+ opacity: 1;
256
230
  }
257
231
  &:-moz-placeholder {
258
232
  /* Firefox 18- */
259
- opacity: 0;
233
+ color: $wac-white;
234
+ opacity: 1;
260
235
  }
261
236
  }
262
237
  }
263
- }
264
- }
265
- .selected-list {
266
- width: 100%;
267
- &__wrapper {
268
- display: flex;
269
- flex-direction: column;
270
- align-items: flex-start;
271
- justify-content: flex-start;
272
- &__head {
273
- width: 100%;
274
- min-height: rem(60);
238
+ button {
275
239
  display: flex;
276
- justify-content: space-between;
277
- padding: 10px 20px;
278
- background-color: $wac-gray-background;
279
- margin: 0 0 10px;
280
- > p {
281
- display: flex;
282
- align-items: center;
283
- white-space: nowrap;
284
- font-size: rem(16);
285
- line-height: rem(19);
286
- 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;
287
257
  }
288
-
289
- &__button {
290
- height: rem(40);
291
- width: fit-content;
292
- margin-left: auto;
293
-
294
- &__mobile {
295
- @include media('>=1024px') {
296
- display: none;
297
- }
298
- }
299
-
300
- &__notMobile {
301
- @include media('<1024px') {
302
- display: none;
303
- }
258
+ &:hover {
259
+ i {
260
+ color: $wac-wizishop-blue !important;
304
261
  }
305
-
306
262
  }
307
-
308
263
  }
309
- &__content {
310
- width: 100%;
311
- display: flex;
312
- flex-wrap: wrap;
313
- align-items: flex-start;
314
- align-content: flex-start;
315
- justify-content: flex-start;
316
- &__item {
317
- white-space: nowrap;
318
- margin: 0 10px 10px 0;
319
- border: 1px solid $wac-border-form;
320
- border-radius: 2px;
321
- color: $wac-second-color;
322
- height: rem(40);
323
- display: flex;
324
- justify-content: 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;
325
433
  align-items: center;
326
434
  padding: 0 20px;
327
435
  transition: .3s ease;
@@ -346,77 +454,169 @@ $wac-color-success-popup-alert: #6DCC95!default;
346
454
  margin: 0 0 0 10px;
347
455
  }
348
456
  }
457
+ &:first-child {
458
+ margin-left: 18px;
459
+ }
349
460
  }
350
461
  }
351
462
  }
352
- }.wac {
353
- &-select-in-text {
354
- width: auto;
463
+ }
464
+
465
+ .wac {
466
+ &-select {
467
+ width: 100%;
355
468
  position: relative;
356
- display: flex;
357
- align-items: center;
358
- 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%;
359
476
  &:hover,
360
477
  &:focus {
361
478
  z-index: 4;
362
479
  }
363
- &__prepend,
364
- &__after {
480
+ &__label {
481
+ padding: 0;
365
482
  font-size: rem(14);
366
483
  line-height: rem(16);
367
- color: $wac-main-text;
368
- }
369
- &__prepend {
370
- margin: 0 rem(4) 0 0;
371
- }
372
- &__after {
373
- margin: 0 0 0 rem(4);
484
+ margin: 0 0 rem(12);
485
+ font-weight: 500;
374
486
  }
375
487
  &__current {
376
488
  display: flex;
377
- width: auto;
489
+ width: 100%;
490
+ height: 38px;
378
491
  justify-content: space-between;
379
492
  align-items: center;
380
493
  align-content: center;
494
+ padding: 0 0 0 20px;
495
+ color: $wac-color-text-grey;
381
496
  font-size: rem(14);
382
497
  line-height: rem(16);
383
- color: $wac-main-text;
384
498
  cursor: pointer;
385
499
  white-space: nowrap;
386
500
  text-overflow: ellipsis;
387
- font-weight: 500;
388
- position: relative;
389
- span {
390
- position: relative;
391
- white-space: nowrap;
392
- &:before {
393
- content: '';
394
- display: block;
395
- position: absolute;
396
- bottom: -3px;
397
- left: 0;
398
- width: 100%;
399
- height: 1px;
400
- 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");
401
- background-position: left top;
402
- }
403
- &:after {
404
- content: '';
405
- display: block;
406
- position: absolute;
407
- top: 100%;
408
- left: 0;
409
- width: 100%;
410
- 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
+ }
411
521
  }
412
- }
413
- }
414
- &__content {
415
- position: absolute;
416
- top: 100%;
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;
614
+ top: 100%;
417
615
  margin-top: rem(14);
418
- left: 0;
616
+ left: -1px;
419
617
  width: auto;
618
+ min-width: calc(100% - 38px);
619
+ max-width: calc(100% + 2px);
420
620
  border: 1px solid $wac-border-light;
421
621
  border-radius: 3px;
422
622
  display: flex;
@@ -424,11 +624,12 @@ $wac-color-success-popup-alert: #6DCC95!default;
424
624
  justify-content: flex-start;
425
625
  align-items: flex-start;
426
626
  background-color: $wac-white;
427
- max-height: 400px;
627
+ max-height: 260px;
428
628
  height: auto;
429
629
  visibility: visible;
430
630
  opacity: 1;
431
631
  box-shadow: 3px 3px 20px $wac-select-box-shadow;
632
+ padding: 10px;
432
633
  &.hidden {
433
634
  visibility: hidden;
434
635
  opacity: 0;
@@ -437,6 +638,9 @@ $wac-color-success-popup-alert: #6DCC95!default;
437
638
  transition: 0s;
438
639
  }
439
640
  }
641
+ .ps {
642
+ max-height: 240px;
643
+ }
440
644
  &.open,
441
645
  &.open.hidden {
442
646
  position: relative;
@@ -450,10 +654,45 @@ $wac-color-success-popup-alert: #6DCC95!default;
450
654
  transition: 0s;
451
655
  }
452
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
+ }
453
692
  &__item {
454
693
  width: 100%;
455
694
  font-size: rem(14);
456
- line-height: rem(40);
695
+ line-height: rem(30);
457
696
  cursor: pointer;
458
697
  transition: 0.3s ease;
459
698
  position: relative;
@@ -461,18 +700,21 @@ $wac-color-success-popup-alert: #6DCC95!default;
461
700
  justify-content: flex-start;
462
701
  align-content: center;
463
702
  align-items: center;
464
- font-weight: 400;
703
+ color: $wac-second-color;
465
704
  > div {
466
- padding: 0 20px;
467
- min-width: 100%;
468
- &.selected {
469
- background-color: $wac-hover-multiple-search;
470
- color: $wac-main-text;
471
- }
705
+ width: 100%;
706
+ display: flex;
707
+ align-items: center;
708
+ align-content: center;
472
709
  }
473
710
  .icon {
474
711
  width: 24px;
475
712
  margin: 0 10px 0 0;
713
+ height: auto;
714
+ max-height: 24px;
715
+ }
716
+ &:not(:last-child) {
717
+ margin: 0 0 rem(10);
476
718
  }
477
719
  &:empty {
478
720
  display: none;
@@ -485,6 +727,28 @@ $wac-color-success-popup-alert: #6DCC95!default;
485
727
  background-color: $wac-gray-background;
486
728
  color: $wac-main-text;
487
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
+ }
488
752
  }
489
753
  }
490
754
  }
@@ -643,6 +907,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
643
907
  min-width: unset;
644
908
  margin: 0 0 100px;
645
909
  background-color: $wac-tag-success;
910
+ font-size: rem(14);
646
911
  &.is-danger {
647
912
  background-color: $wac-primary-button;
648
913
  }
@@ -653,6 +918,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
653
918
  }
654
919
  .wac-alert-popup {
655
920
  &__text {
921
+ font-size: rem(14);
656
922
  white-space: nowrap;
657
923
  font-weight: 600;
658
924
  }
@@ -3133,239 +3399,73 @@ span.wac-tooltip {
3133
3399
  }
3134
3400
  }
3135
3401
  }
3136
- .wac-search {
3402
+ .wac-alert {
3137
3403
  width: 100%;
3138
- min-height: 50px;
3404
+ background-color: transparentize($wac-link-color, 0.85);
3405
+ color: $wac-link-color;
3139
3406
  border-radius: 3px;
3140
- background-color: $wac-white;
3141
- position: relative;
3142
- z-index: 2;
3143
- border: 1px solid $wac-border-light;
3144
- transition: 0.3s ease;
3145
- &.open {
3146
- border-color: $wac-wizishop-blue;
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;
3417
+ }
3418
+ }
3419
+ i {
3420
+ color: $wac-green-color;
3421
+ }
3147
3422
  }
3148
- &__wrapper {
3149
- position: relative;
3150
- display: flex;
3151
- justify-content: space-between;
3152
- align-items: stretch;
3153
- align-content: stretch;
3154
- flex-wrap: nowrap;
3155
- width: 100%;
3156
- min-height: 50px;
3157
- @include media('<tablet') {
3158
- padding: 0 12px;
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;
3429
+ }
3159
3430
  }
3160
- input {
3161
- background: transparent;
3162
- border: none;
3163
- color: $wac-main-text;
3164
- font-size: rem(14);
3165
- height: 50px;
3166
- line-height: 50px;
3167
- padding: 0 20px 0 48px;
3168
- font-weight: 400;
3169
- width: 100%;
3170
- @include media('<tablet') {
3171
- padding: 0 0 0 10px;
3172
- }
3173
- &::-webkit-input-placeholder {
3174
- /* Chrome/Opera/Safari */
3175
- color: $wac-multiple-search-input-color;
3176
- opacity: 1;
3177
- font-weight: 400;
3178
- @include media('<tablet') {
3179
- font-size: rem(11);
3180
- }
3181
- }
3182
- &::-moz-placeholder {
3183
- /* Firefox 19+ */
3184
- color: $wac-multiple-search-input-color;
3185
- opacity: 1;
3186
- font-weight: 400;
3187
- @include media('<tablet') {
3188
- font-size: rem(11);
3189
- }
3190
- }
3191
- &:-ms-input-placeholder {
3192
- /* IE 10+ */
3193
- color: $wac-multiple-search-input-color;
3194
- opacity: 1;
3195
- font-weight: 400;
3196
- @include media('<tablet') {
3197
- font-size: rem(11);
3198
- }
3199
- }
3200
- &:-moz-placeholder {
3201
- /* Firefox 18- */
3202
- color: $wac-multiple-search-input-color;
3203
- opacity: 1;
3204
- font-weight: 400;
3205
- @include media('<tablet') {
3206
- font-size: rem(11);
3207
- }
3208
- }
3209
- &:focus {
3210
- & + button i {
3211
- color: $wac-main-text;
3212
- }
3213
- &::-webkit-input-placeholder {
3214
- /* Chrome/Opera/Safari */
3215
- color: $wac-white;
3216
- opacity: 1;
3217
- }
3218
- &::-moz-placeholder {
3219
- /* Firefox 19+ */
3220
- color: $wac-white;
3221
- opacity: 1;
3222
- }
3223
- &:-ms-input-placeholder {
3224
- /* IE 10+ */
3225
- color: $wac-white;
3226
- opacity: 1;
3227
- }
3228
- &:-moz-placeholder {
3229
- /* Firefox 18- */
3230
- color: $wac-white;
3231
- opacity: 1;
3232
- }
3431
+ i {
3432
+ color: $wac-primary-button;
3433
+ }
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;
3233
3441
  }
3234
3442
  }
3235
- button {
3236
- display: flex;
3237
- align-items: center;
3238
- align-content: center;
3239
- justify-content: center;
3240
- width: 18px;
3241
- height: 18px;
3242
- border-radius: 3px;
3243
- position: absolute;
3244
- left: 20px;
3245
- top: 50%;
3246
- transform: translateY(-50%);
3247
- border: none;
3248
- cursor: pointer;
3249
- background-color: $wac-white;
3250
- i {
3251
- font-size: rem(18);
3252
- color: $wac-color-icon-search-multiple-search;
3253
- transition: 0.3s ease;
3254
- }
3255
- &:hover {
3256
- i {
3257
- color: $wac-wizishop-blue !important;
3258
- }
3259
- }
3443
+ i {
3444
+ color: $wac-orange-color;
3260
3445
  }
3261
3446
  }
3262
- &__absolute {
3263
- position: absolute;
3264
- top: 100%;
3265
- margin-top: rem(14);
3266
- left: -1px;
3267
- width: auto;
3268
- min-width: calc(100% - 38px);
3269
- max-width: calc(100% + 2px);
3270
- border: 1px solid $wac-border-light;
3271
- border-radius: 3px;
3272
- display: flex;
3273
- flex-direction: column;
3274
- justify-content: flex-start;
3275
- align-items: flex-start;
3276
- background-color: $wac-white;
3277
- max-height: 260px;
3278
- height: auto;
3279
- visibility: visible;
3280
- opacity: 1;
3281
- box-shadow: 3px 3px 20px $wac-select-box-shadow;
3282
- padding: 10px;
3283
- &.hidden {
3284
- visibility: hidden;
3285
- opacity: 0;
3286
- & > * {
3287
- opacity: 0;
3288
- transition: 0s;
3289
- }
3290
- }
3291
- .ps {
3292
- max-height: 240px;
3293
- }
3294
- &.open,
3295
- &.open.hidden {
3296
- position: relative;
3297
- left: auto;
3298
- top: 0;
3299
- transform: translateX(-1px);
3300
- visibility: visible;
3301
- opacity: 1;
3302
- & > * {
3303
- opacity: 1;
3304
- transition: 0s;
3305
- }
3306
- }
3307
- &__item {
3308
- width: 100%;
3309
- font-size: rem(14);
3310
- line-height: rem(30);
3311
- cursor: pointer;
3312
- transition: 0.3s ease;
3313
- position: relative;
3314
- display: flex;
3315
- justify-content: flex-start;
3316
- align-content: center;
3317
- align-items: center;
3318
- color: $wac-second-color;
3319
- > div {
3320
- width: 100%;
3321
- display: flex;
3322
- align-items: center;
3323
- align-content: center;
3324
- }
3325
- .icon {
3326
- width: 24px;
3327
- margin: 0 10px 0 0;
3328
- height: auto;
3329
- max-height: 24px;
3330
- }
3331
- &:not(:last-child) {
3332
- margin: 0 0 rem(10);
3333
- }
3334
- &:empty {
3335
- display: none;
3336
- }
3337
- &:first-child {
3338
- border-width: 1px 0 1px;
3339
- }
3340
- &:hover,
3341
- &:focus {
3342
- background-color: $wac-gray-background;
3343
- color: $wac-main-text;
3344
- }
3345
- > div {
3346
- padding: 0 10px;
3347
- &.selected {
3348
- background-color: $wac-gray-background;
3349
- color: $wac-main-text;
3350
- }
3351
- }
3352
- }
3353
- &__empty {
3354
- display: flex;
3355
- width: 100%;
3356
- justify-content: center;
3357
- align-items: center;
3358
- padding: 10px;
3359
- span {
3360
- font-size: rem(16);
3361
- font-weight: 400;
3362
- text-align: center;
3363
- color: $wac-second-color;
3364
- display: inline-block;
3365
- line-height: rem(25);
3366
- }
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;
3367
3456
  }
3368
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
+ }
3369
3469
  }
3370
3470
  .wac-wrapper {
3371
3471
  width: 100%;
@@ -4791,180 +4891,34 @@ h4.wac-h4 {
4791
4891
  color: $wac-second-color;
4792
4892
  }
4793
4893
  }
4794
- .wac-alert {
4795
- width: 100%;
4796
- background-color: transparentize($wac-link-color, 0.85);
4797
- color: $wac-link-color;
4798
- border-radius: 3px;
4799
- display: flex;
4800
- flex-wrap: nowrap;
4801
- justify-content: space-between;
4802
- padding: 20px;
4803
- &.success {
4804
- background-color: transparentize($wac-green-color, 0.85);
4805
- p {
4806
- color: $wac-p-alert-color-success;
4807
- > * {
4808
- 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;
4809
4911
  }
4810
- }
4811
- i {
4812
- color: $wac-green-color;
4813
- }
4814
- }
4815
- &.warning {
4816
- background-color: transparentize($wac-primary-button, 0.85);
4817
- p {
4818
- color: $wac-p-alert-color-warning;
4819
- > * {
4820
- color: $wac-p-alert-color-warning;
4821
- }
4822
- }
4823
- i {
4824
- color: $wac-primary-button;
4825
- }
4826
- }
4827
- &.alert {
4828
- background-color: transparentize($wac-orange-color, 0.85);
4829
- p {
4830
- color: $wac-p-alert-color-alert;
4831
- > * {
4832
- color: $wac-p-alert-color-alert;
4833
- }
4834
- }
4835
- i {
4836
- color: $wac-orange-color;
4837
- }
4838
- }
4839
- p {
4840
- width: 100%;
4841
- font-size: rem(14);
4842
- line-height: rem(25);
4843
- margin: 0;
4844
- padding: 0;
4845
- color: $wac-p-alert-color-default;
4846
- > * {
4847
- color: $wac-p-alert-color-default;
4848
- }
4849
- }
4850
- i {
4851
- width: auto;
4852
- margin: 0 10px 0 0;
4853
- color: inherit;
4854
- font-size: rem(14);
4855
- line-height: rem(25);
4856
- }
4857
-
4858
- .wac-button i {
4859
- color: $wac-white;
4860
- }
4861
- }
4862
- .wac-field-checkbox {
4863
- &__row {
4864
- position: relative;
4865
- min-width: 100%;
4866
- margin: 0;
4867
- }
4868
- &--nowrap {
4869
- display: inline-block;
4870
- width: auto;
4871
- min-width: 0;
4872
- margin: 0 10px 10px 0;
4873
- .field {
4874
- &__row {
4875
- width: auto;
4876
- display: inline-block;
4877
- margin: 0;
4878
- }
4879
- }
4880
- }
4881
-
4882
- input[type='text'] {
4883
- height: 40px;
4884
- max-height: 40px;
4885
- padding: 0 20px;
4886
- line-height: 40px;
4887
- border: 1px solid $wac-border-form;
4888
- border-radius: 3px;
4889
- margin: 15px 0 10px !important;
4890
- font-size: rem(14) !important;
4891
- color: $wac-main-text;
4892
- &:focus {
4893
- border-color: $wac-wizishop-blue !important;
4894
- box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
4895
- &::-webkit-input-placeholder {
4896
- /* Chrome/Opera/Safari */
4897
- opacity: 0;
4898
- }
4899
- &::-moz-placeholder {
4900
- /* Firefox 19+ */
4901
- opacity: 0;
4902
- }
4903
- &:-ms-input-placeholder {
4904
- /* IE 10+ */
4905
- opacity: 0;
4906
- }
4907
- &:-moz-placeholder {
4908
- /* Firefox 18- */
4909
- opacity: 0;
4910
- }
4911
- }
4912
- }
4913
- &.alone {
4914
- .is-checkradio[type='checkbox'] {
4915
- & + label {
4916
- padding-left: 9px;
4917
- margin-right: 0px;
4918
-
4919
- &:before {
4920
- border-width: 1px;
4921
- width: 16px;
4922
- height: 16px;
4923
- border-radius: 2px;
4924
- }
4925
- }
4926
- &:checked + label {
4927
- &:after {
4928
- top: 7px;
4929
- transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
4930
- }
4931
- }
4932
- }
4933
- }
4934
-
4935
- .is-checkradio[type='checkbox'] {
4936
- outline: 0 !important;
4937
- top: 0;
4938
- & + label {
4939
- font-size: rem(14);
4940
- line-height: 0;
4941
- color: $wac-input-radio-color-label;
4942
- white-space: nowrap;
4943
- padding: 0 8px;
4944
- margin-right: 0;
4945
- outline: 0 !important;
4946
- &:before {
4947
- width: 16px;
4948
- height: 16px;
4949
- border: 1px solid $wac-border-color;
4950
- top: 0;
4951
- transition: all 0.3s ease-in-out;
4912
+ &:after {
4913
+ width: 20px;
4914
+ height: 20px;
4915
+ background: $wac-input-active-color;
4916
+ top: 1px;
4917
+ left: -2px;
4952
4918
  }
4919
+ &:before,
4953
4920
  &:after {
4954
- top: 2.3px !important;
4955
- left: 3px !important;
4956
- width: 10px;
4957
- height: 12px;
4958
- border: none !important;
4959
- background: transparent
4960
- 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")
4961
- center center / 8px 8px no-repeat;
4962
- transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
4963
- transition: all 0.3s ease-in-out;
4964
- }
4965
- span {
4966
- margin: 0 0 0 rem(16);
4967
- display: inline-block;
4921
+ outline: 0 !important;
4968
4922
  }
4969
4923
  &:hover,
4970
4924
  &:focus {
@@ -4972,10 +4926,6 @@ h4.wac-h4 {
4972
4926
  border-color: $wac-input-active-color !important;
4973
4927
  }
4974
4928
  }
4975
- &:before,
4976
- &:after {
4977
- outline: 0 !important;
4978
- }
4979
4929
  }
4980
4930
  &:hover {
4981
4931
  & + label {
@@ -4983,9 +4933,6 @@ h4.wac-h4 {
4983
4933
  &:before {
4984
4934
  border-color: $wac-input-active-color !important;
4985
4935
  }
4986
- &:after {
4987
- border-color: $wac-white !important;
4988
- }
4989
4936
  }
4990
4937
  &:not([disabled]) {
4991
4938
  & + label {
@@ -4998,50 +4945,903 @@ h4.wac-h4 {
4998
4945
  &:checked + label {
4999
4946
  color: $wac-input-radio-color-active-label;
5000
4947
  &:before {
5001
- border: 1px solid $wac-input-active-color;
5002
- background-color: $wac-input-active-color;
5003
- transition: all 0.3s ease-in-out;
4948
+ border-color: $wac-input-active-color;
5004
4949
  }
5005
- &:after {
5006
- left: 7px;
5007
- top: 8px;
5008
- transition: all 0.3s ease-in-out;
4950
+ }
4951
+ }
4952
+
4953
+
4954
+ .wac-radio__row {
4955
+ min-width: 100%;
4956
+ margin: 0 0 7px;
4957
+ }
4958
+
4959
+ &--nowrap {
4960
+ display: inline-block;
4961
+ width: auto;
4962
+ min-width: 0;
4963
+ margin: 0 10px 10px 0;
4964
+ .wac-radio {
4965
+ &__row {
4966
+ width: auto;
4967
+ display: inline-block;
4968
+ margin: 0;
5009
4969
  }
5010
4970
  }
5011
4971
  }
4972
+ & + .wac-radio {
4973
+ margin-top: rem(-6);
4974
+ }
5012
4975
 
5013
- }
4976
+ &.alone {
4977
+ label {
4978
+ padding-left: 7px;
4979
+ margin-right: 0;
4980
+ }
5014
4981
 
4982
+ }
5015
4983
 
5016
- .wac {
5017
- &-select {
4984
+ &__input {
5018
4985
  width: 100%;
5019
- position: relative;
5020
- height: 40px;
5021
- border: 1px solid $wac-border-form;
5022
- margin: 0;
5023
- border-radius: 3px;
5024
- z-index: 2;
5025
- background-color: $wac-white;
5026
- max-width: 100%;
5027
- &:hover,
5028
- &:focus {
5029
- z-index: 4;
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;
5017
+ }
5018
+ }
5030
5019
  }
5031
- &__label {
5032
- padding: 0;
5033
- font-size: rem(14);
5034
- line-height: rem(16);
5035
- margin: 0 0 rem(12);
5036
- font-weight: 500;
5020
+ }
5021
+ }
5022
+ .wac-input {
5023
+ .field-label {
5024
+ margin-bottom: 0!important;
5025
+ &.is-normal {
5026
+ padding-top: 0 !important;
5037
5027
  }
5038
- &__current {
5039
- display: flex;
5040
- width: 100%;
5041
- height: 38px;
5042
- justify-content: space-between;
5043
- align-items: center;
5044
- align-content: center;
5028
+ }
5029
+ .field-label {
5030
+ position: relative;
5031
+ }
5032
+
5033
+ &.with-progress-bar {
5034
+ input {
5035
+ margin-bottom: rem(20) !important;
5036
+ }
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);
5050
+ }
5051
+ }
5052
+ }
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;
5082
+ }
5083
+ }
5084
+
5085
+ label {
5086
+ font-size: rem(14);
5087
+ color: $wac-main-text;
5088
+ font-weight: 500 !important;
5089
+ margin-bottom: 0!important;
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);
5125
+
5126
+ &::placeholder {
5127
+ color: $wac-placeholder-color;
5128
+ font-weight: 400;
5129
+ }
5130
+ &.is-number {
5131
+ max-width: 100px;
5132
+ }
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;
5159
+ }
5160
+ }
5161
+
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;
5170
+ }
5171
+ }
5172
+ &.has-input-group {
5173
+ display: -ms-flexbox;
5174
+ display: flex;
5175
+ -ms-flex-wrap: wrap;
5176
+ flex-wrap: wrap;
5177
+ -ms-flex-align: stretch;
5178
+ align-items: stretch;
5179
+ width: 100%;
5180
+ input {
5181
+ position: relative;
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;
5192
+ }
5193
+ }
5194
+ .has-input-group {
5195
+ display: flex;
5196
+ position: relative;
5197
+ .prepend {
5198
+ margin-right: -1px;
5199
+ }
5200
+ .has-input-group-text {
5201
+ display: -ms-flexbox;
5202
+ display: flex;
5203
+ -ms-flex-align: center;
5204
+ align-items: center;
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;
5217
+ }
5218
+ &.append {
5219
+ border-left: 0;
5220
+ border-radius: 0 0.25rem 0.25rem 0;
5221
+ }
5222
+ }
5223
+ .is-right {
5224
+ left: -40px;
5225
+ }
5226
+ .is-left {
5227
+ left: auto;
5228
+ right: -45px;
5229
+ }
5230
+ }
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);
5245
+ }
5246
+ }
5247
+ }
5248
+
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 {
5256
+ font-size: rem(14);
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);
5263
+
5264
+ &::placeholder {
5265
+ color: $wac-placeholder-color;
5266
+ }
5267
+ }
5268
+
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);
5278
+ }
5279
+ }
5280
+ }
5281
+
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);
5296
+ }
5297
+ }
5298
+ }
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;
5308
+ }
5309
+ }
5310
+
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;
5317
+ }
5318
+
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;
5325
+ }
5326
+ .icon.is-small.is-right {
5327
+ margin-top: rem(3);
5328
+ }
5329
+ }
5330
+
5331
+ .control > label {
5332
+ font-size: rem(14);
5333
+ padding: 0 0 rem(10);
5334
+ display: inline-block;
5335
+ > span {
5336
+ color: $wac-second-color;
5337
+ font-style: italic;
5338
+ }
5339
+ }
5340
+
5341
+ &__info,
5342
+ &__error {
5343
+ font-size: rem(12);
5344
+ color: $wac-second-color;
5345
+ }
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;
5355
+ color: $wac-main-text;
5356
+ }
5357
+ }
5358
+
5359
+ .field {
5360
+ .control {
5361
+ margin-bottom: 0;
5362
+ }
5363
+ }
5364
+ }
5365
+
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
+ }
5372
+
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;
5045
5845
  padding: 0 0 0 20px;
5046
5846
  color: $wac-color-text-grey;
5047
5847
  font-size: rem(14);
@@ -5268,704 +6068,279 @@ h4.wac-h4 {
5268
6068
  margin: 0 0 rem(10);
5269
6069
  }
5270
6070
  &:empty {
5271
- display: none;
5272
- }
5273
- &:first-child {
5274
- border-width: 1px 0 1px;
5275
- }
5276
- &:hover,
5277
- &:focus {
5278
- background-color: $wac-gray-background;
5279
- color: $wac-main-text;
5280
- }
5281
- > div {
5282
- padding: 0 10px;
5283
- &.selected {
5284
- background-color: $wac-gray-background;
5285
- color: $wac-main-text;
5286
- }
5287
- }
5288
- }
5289
- &__empty {
5290
- display: flex;
5291
- width: 100%;
5292
- justify-content: center;
5293
- align-items: center;
5294
- padding: 10px;
5295
- span {
5296
- font-size: rem(16);
5297
- font-weight: 400;
5298
- text-align: center;
5299
- color: $wac-second-color;
5300
- display: inline-block;
5301
- line-height: rem(25);
5302
- }
5303
- }
5304
- }
5305
- }
5306
- }
5307
- .wac-input-with-select {
5308
- &__label {
5309
- font-size: rem(14);
5310
- line-height: rem(16);
5311
- font-weight: 500;
5312
- margin: 0 0 rem(12);
5313
- cursor: pointer;
5314
- display: block;
5315
- }
5316
- &__wrapper {
5317
- display: flex;
5318
- &__left {
5319
- position: relative;
5320
- display: flex;
5321
- justify-content: space-between;
5322
- align-items: stretch;
5323
- align-content: stretch;
5324
- flex-wrap: nowrap;
5325
- border-radius: 3px;
5326
- max-height: 40px;
5327
- background-color: $wac-white;
5328
- z-index: 2;
5329
- border: 1px solid $wac-border-form;
5330
-
5331
- input {
5332
- background: transparent;
5333
- border: none;
5334
- color: $wac-main-text;
5335
- font-size: rem(14);
5336
- height: 40px;
5337
- line-height: 40px;
5338
- font-weight: 400;
5339
- padding: 0 0 0 15px;
5340
- &::-webkit-input-placeholder {
5341
- /* Chrome/Opera/Safari */
5342
- color: $wac-color-icon-search-multiple-search;
5343
- opacity: 1;
5344
- font-weight: 400;
5345
- }
5346
- &::-moz-placeholder {
5347
- /* Firefox 19+ */
5348
- color: $wac-color-icon-search-multiple-search;
5349
- opacity: 1;
5350
- font-weight: 400;
5351
- }
5352
- &:-ms-input-placeholder {
5353
- /* IE 10+ */
5354
- color: $wac-color-icon-search-multiple-search;
5355
- opacity: 1;
5356
- font-weight: 400;
5357
- }
5358
- &:-moz-placeholder {
5359
- /* Firefox 18- */
5360
- color: $wac-color-icon-search-multiple-search;
5361
- opacity: 1;
5362
- font-weight: 400;
5363
- }
5364
- &:focus {
5365
- & + button i {
5366
- color: $wac-main-text;
5367
- }
5368
- &::-webkit-input-placeholder {
5369
- /* Chrome/Opera/Safari */
5370
- color: $wac-white;
5371
- opacity: 1;
5372
- }
5373
- &::-moz-placeholder {
5374
- /* Firefox 19+ */
5375
- color: $wac-white;
5376
- opacity: 1;
5377
- }
5378
- &:-ms-input-placeholder {
5379
- /* IE 10+ */
5380
- color: $wac-white;
5381
- opacity: 1;
5382
- }
5383
- &:-moz-placeholder {
5384
- /* Firefox 18- */
5385
- color: $wac-white;
5386
- opacity: 1;
5387
- }
5388
- }
5389
- }
5390
-
5391
- &__current {
5392
- position: relative;
5393
- padding: rem(5) rem(16);
5394
- max-height: rem(40);
5395
- display: flex;
5396
- justify-content: center;
5397
- align-items: center;
5398
- align-content: center;
5399
- cursor: pointer;
5400
-
5401
- &:before {
5402
- content: '';
5403
- display: block;
5404
- position: absolute;
5405
- left: -0.5px;
5406
- top: 50%;
5407
- transform: translateY(-50%);
5408
- width: 1px;
5409
- height: rem(25);
5410
- background-color: $wac-border-form;
5411
- }
5412
-
5413
- span {
5414
- position: relative;
5415
- white-space: nowrap;
5416
- line-height: 1;
5417
- &:before {
5418
- content: '';
5419
- display: block;
5420
- position: absolute;
5421
- top: 100%;
5422
- margin-top: 2px;
5423
- left: 0;
5424
- width: 100%;
5425
- height: 1px;
5426
- border-bottom: 1px dashed $wac-primary-button;
5427
- }
5428
- }
5429
- }
5430
-
5431
- &__select {
5432
- position: absolute;
5433
- top: 50px;
5434
- width: auto;
5435
- left: calc(100% - 40px);
5436
- margin-top: 0;
5437
- background-color: $wac-white;
5438
- z-index: 3;
5439
- box-shadow: 3px 3px 20px $wac-input-with-select-box-shadow;
5440
- border-radius: 3px;
5441
- border: 1px solid $wac-border-light;
5442
- padding: 10px;
5443
-
5444
- &__item {
5445
- width: 100%;
5446
- font-size: rem(14);
5447
- line-height: rem(30);
5448
- cursor: pointer;
5449
- transition: 0.3s ease;
5450
- position: relative;
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 {
5451
6082
  padding: 0 10px;
5452
- white-space: nowrap;
5453
- &:not(:last-child) {
5454
- margin: 0 0 rem(10);
5455
- }
5456
- span {
5457
- color: $wac-main-text;
5458
- font-size: rem(12);
5459
- text-align: left;
5460
- }
5461
- &:hover,
5462
- &:focus {
5463
- background-color: darken($wac-gray-background, 15%);
6083
+ &.selected {
6084
+ background-color: $wac-gray-background;
5464
6085
  color: $wac-main-text;
5465
6086
  }
5466
6087
  }
5467
6088
  }
5468
- }
5469
- &__right {
5470
- margin: 0 0 0 rem(15);
5471
- display: flex;
5472
- align-items: center;
5473
- p {
5474
- margin: 0;
5475
- font-size: rem(14);
5476
- line-height: rem(16);
5477
- color: $wac-secondary-color;
5478
- }
5479
- }
5480
- }
5481
- }
5482
- div.wac-field-input-search {
5483
- padding: 20px;
5484
- background-color: $wac-gray-background;
5485
- &.small-padding {
5486
- padding: 10px 20px;
5487
- }
5488
- p.control {
5489
- .input,
5490
- .input:focus,
5491
- .input.is-focused,
5492
- .input:active,
5493
- .input.is-active {
5494
- font-size: rem(14);
5495
- color: $wac-main-text;
5496
- border: rem(1) solid $wac-input-border-search;
5497
- box-shadow: none;
5498
- padding: rem(13.5) rem(20) rem(13.5) rem(48);
5499
- border-radius: rem(3);
5500
- margin: 0;
5501
- height: auto;
5502
- min-height: unset;
5503
-
5504
- &::placeholder {
5505
- color: $wac-placeholder-color;
5506
- font-weight: normal;
5507
- }
5508
- }
5509
-
5510
- .input:focus,
5511
- .input.is-focused,
5512
- .input:active,
5513
- .input.is-active {
5514
- border-color: $wac-wizishop-blue;
5515
- }
5516
-
5517
- .icon {
5518
- position: absolute;
5519
- top: 50%;
5520
- left: 20px;
5521
- font-size: rem(18);
5522
- transform: translateY(-50%);
5523
- pointer-events: none;
5524
- font-weight: 400;
5525
- color: $wac-placeholder-color;
5526
- margin: 0;
5527
- width: rem(18);
5528
- height: rem(18);
5529
- }
5530
- }
5531
- }
5532
- .wac-input {
5533
- .field-label {
5534
- margin-bottom: 0!important;
5535
- &.is-normal {
5536
- padding-top: 0 !important;
5537
- }
5538
- }
5539
- .field-label {
5540
- position: relative;
5541
- }
5542
-
5543
- &.with-progress-bar {
5544
- input {
5545
- margin-bottom: rem(20) !important;
5546
- }
5547
- }
5548
-
5549
- &.with-padding {
5550
- label {
5551
- display: none;
5552
- }
5553
- .control {
5554
- margin: 0;
5555
- .icon {
5556
- height: 50px !important;
5557
- i {
5558
- color: $wac-placeholder-color !important;
5559
- font-size: rem(18);
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);
5560
6102
  }
5561
6103
  }
5562
6104
  }
5563
- input {
5564
- height: 50px;
5565
- max-height: 50px;
5566
- padding: 0 20px;
5567
- line-height: 50px;
5568
- border-radius: 3px;
5569
- margin: 0 !important;
5570
- font-size: rem(14) !important;
5571
- color: $wac-placeholder-color;
5572
- }
5573
- ::-webkit-input-placeholder {
5574
- /* Chrome/Opera/Safari */
5575
- color: $wac-placeholder-color !important;
5576
- opacity: 1;
5577
- }
5578
- ::-moz-placeholder {
5579
- /* Firefox 19+ */
5580
- color: $wac-placeholder-color !important;
5581
- opacity: 1;
5582
- }
5583
- :-ms-input-placeholder {
5584
- /* IE 10+ */
5585
- color: $wac-placeholder-color !important;
5586
- opacity: 1;
5587
- }
5588
- :-moz-placeholder {
5589
- /* Firefox 18- */
5590
- color: $wac-placeholder-color !important;
5591
- opacity: 1;
5592
- }
5593
6105
  }
5594
-
5595
- label {
5596
- font-size: rem(14);
5597
- color: $wac-main-text;
5598
- font-weight: 500 !important;
5599
- margin-bottom: 0!important;
5600
-
5601
- &.has-text-weight-bold {
5602
- font-weight: 500 !important;
5603
- }
5604
- &.label-inline {
5605
- display: inline;
5606
- }
5607
- > span {
5608
- color: $wac-second-color;
5609
- font-style: italic;
5610
- font-size: rem(12);
5611
- }
5612
- }
5613
- input::placeholder {
5614
- font-weight: 400;
5615
- }
5616
- input:not([disabled]):focus {
5617
- border-color: $wac-main-text;
5618
- + span {
5619
- color: $wac-main-text;
5620
- }
5621
- }
5622
- .input,
5623
- .input:not([disabled]):focus,
5624
- .input:not([disabled]).is-focused,
5625
- .input:not([disabled]):active,
5626
- .input:not([disabled]).is-active {
6106
+ }
6107
+ .wac-input-with-select {
6108
+ &__label {
5627
6109
  font-size: rem(14);
5628
- color: $wac-main-text;
5629
- border: rem(1) solid $wac-lightened-secondary;
5630
- box-shadow: none;
5631
- padding: rem(10) rem(15);
5632
- border-radius: rem(3);
5633
- margin-bottom: rem(8);
5634
- height: rem(40);
5635
-
5636
- &::placeholder {
5637
- color: $wac-placeholder-color;
5638
- font-weight: 400;
5639
- }
5640
- &.is-number {
5641
- max-width: 100px;
5642
- }
5643
- &.remove-margin {
5644
- margin-bottom: 0;
5645
- }
5646
- &.is-danger {
5647
- border-color: $wac-primary-button !important;
5648
- }
6110
+ line-height: rem(16);
6111
+ font-weight: 500;
6112
+ margin: 0 0 rem(12);
6113
+ cursor: pointer;
6114
+ display: block;
5649
6115
  }
5650
-
5651
- .control {
5652
- margin-top: rem(6);
5653
- &.has-icons-left {
5654
- .input,
5655
- .input:not([disabled]):focus,
5656
- .input:not([disabled]).is-focused,
5657
- .input:not([disabled]):active,
5658
- .input:not([disabled]).is-active {
5659
- font-size: rem(14);
5660
- color: $wac-main-text;
5661
- border: rem(1) solid $wac-lightened-secondary;
5662
- box-shadow: none;
5663
- padding: 0 rem(44);
5664
- border-radius: rem(3);
5665
- margin-bottom: rem(12);
5666
-
5667
- &::placeholder {
5668
- color: $wac-placeholder-color;
5669
- }
5670
- }
5671
-
5672
- .icon {
5673
- color: $wac-border-form;
5674
- height: rem(42);
5675
- width: rem(46);
5676
- border-radius: rem(3) 0 0 rem(3);
5677
- font-size: rem(16);
5678
- transform: translateX(5px);
5679
- pointer-events: none;
5680
- }
5681
- }
5682
- &.has-input-group {
5683
- display: -ms-flexbox;
6116
+ &__wrapper {
6117
+ display: flex;
6118
+ &__left {
6119
+ position: relative;
5684
6120
  display: flex;
5685
- -ms-flex-wrap: wrap;
5686
- flex-wrap: wrap;
5687
- -ms-flex-align: stretch;
6121
+ justify-content: space-between;
5688
6122
  align-items: stretch;
5689
- width: 100%;
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;
6130
+
5690
6131
  input {
5691
- position: relative;
5692
- -ms-flex: 1 1 0;
5693
- flex: 1 1 0;
5694
- min-width: 0;
5695
- margin-bottom: 0 !important;
5696
- &.text-append {
5697
- border-radius: rem(3) 0 0 rem(3);
5698
- 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;
5699
6145
  }
5700
- + .append {
5701
- 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;
5702
6151
  }
5703
- }
5704
- .has-input-group {
5705
- display: flex;
5706
- position: relative;
5707
- .prepend {
5708
- 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;
5709
6157
  }
5710
- .has-input-group-text {
5711
- display: -ms-flexbox;
5712
- display: flex;
5713
- -ms-flex-align: center;
5714
- align-items: center;
5715
- padding: 0.375rem 1.5rem;
5716
- margin-bottom: 0;
5717
- font-size: 0.875rem;
6158
+ &:-moz-placeholder {
6159
+ /* Firefox 18- */
6160
+ color: $wac-color-icon-search-multiple-search;
6161
+ opacity: 1;
5718
6162
  font-weight: 400;
5719
- line-height: 1.5;
5720
- color: $wac-color-text-grey;
5721
- text-align: center;
5722
- white-space: nowrap;
5723
- background-color: $wac-input-border;
5724
- border: 1px solid $wac-input-border;
5725
- &.prepend {
5726
- border-radius: 0.25rem 0 0 0.25rem;
6163
+ }
6164
+ &:focus {
6165
+ & + button i {
6166
+ color: $wac-main-text;
5727
6167
  }
5728
- &.append {
5729
- border-left: 0;
5730
- 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;
5731
6187
  }
5732
6188
  }
5733
- .is-right {
5734
- left: -40px;
5735
- }
5736
- .is-left {
5737
- left: auto;
5738
- right: -45px;
5739
- }
5740
- }
5741
- .icon.is-small.is-right {
5742
- }
5743
- .wac-input__info,
5744
- .wac-input__error {
5745
- font-size: rem(12);
5746
- color: $wac-secondary-text;
5747
- position: absolute;
5748
- bottom: -22px !important;
5749
- left: 0;
5750
- }
5751
- }
5752
- &.has-icons-right {
5753
- .icon {
5754
- height: rem(39);
5755
6189
  }
5756
- }
5757
- }
5758
6190
 
5759
- &.is-big {
5760
- .control.has-icons-left {
5761
- .input,
5762
- .input:not([disabled]):focus,
5763
- .input:not([disabled]).is-focused,
5764
- .input:not([disabled]):active,
5765
- .input:not([disabled]).is-active {
5766
- font-size: rem(14);
5767
- color: $wac-main-text;
5768
- border: rem(1) solid $wac-lightened-secondary;
5769
- box-shadow: none;
5770
- padding: rem(30) rem(50);
5771
- border-radius: rem(3);
5772
- 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;
5773
6200
 
5774
- &::placeholder {
5775
- 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;
5776
6211
  }
5777
- }
5778
6212
 
5779
- .icon {
5780
- color: $wac-placeholder-color;
5781
- height: rem(42);
5782
- width: rem(42);
5783
- background-color: transparent;
5784
- border-radius: rem(3) 0 0 rem(3);
5785
- font-size: rem(20);
5786
- margin-left: rem(10);
5787
- top: rem(11);
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
+ }
5788
6229
  }
5789
- }
5790
- }
5791
6230
 
5792
- &.is-medium {
5793
- .control {
5794
- .input,
5795
- .input:not([disabled]):focus,
5796
- .input:not([disabled]).is-focused,
5797
- .input:not([disabled]):active,
5798
- .input:not([disabled]).is-active {
5799
- min-height: rem(50);
5800
- padding-left: rem(45);
5801
- }
5802
- .icon {
5803
- top: rem(4);
5804
- right: rem(19);
5805
- font-size: rem(20);
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;
6243
+
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
+ }
5806
6267
  }
5807
6268
  }
5808
- }
5809
-
5810
- &.has-no-block {
5811
- .input,
5812
- .input:not([disabled]):focus,
5813
- .input:not([disabled]).is-focused,
5814
- .input:not([disabled]):active,
5815
- .input:not([disabled]).is-active {
5816
- border-left: rem(5) solid $wac-lightened-secondary;
5817
- border-radius: 0;
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
+ }
5818
6279
  }
5819
6280
  }
5820
-
5821
- .input:not([disabled]):focus,
5822
- .input:not([disabled]).is-focused,
5823
- .input:not([disabled]):active,
5824
- .input:not([disabled]).is-active,
5825
- &.always-hover .input {
5826
- border-color: $wizishop-blue !important;
6281
+ }
6282
+ div.wac-field-input-search {
6283
+ padding: 20px;
6284
+ background-color: $wac-gray-background;
6285
+ &.small-padding {
6286
+ padding: 10px 20px;
5827
6287
  }
6288
+ p.control {
6289
+ .input,
6290
+ .input:focus,
6291
+ .input.is-focused,
6292
+ .input:active,
6293
+ .input.is-active {
6294
+ font-size: rem(14);
6295
+ color: $wac-main-text;
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;
5828
6303
 
5829
- &.has-no-block {
5830
- .input:not([disabled]):focus,
5831
- .input:not([disabled]).is-focused,
5832
- .input:not([disabled]):active,
5833
- .input:not([disabled]).is-active {
5834
- border-left-color: $wizishop-blue;
5835
- }
5836
- .icon.is-small.is-right {
5837
- margin-top: rem(3);
6304
+ &::placeholder {
6305
+ color: $wac-placeholder-color;
6306
+ font-weight: normal;
6307
+ }
5838
6308
  }
5839
- }
5840
6309
 
5841
- .control > label {
5842
- font-size: rem(14);
5843
- padding: 0 0 rem(10);
5844
- display: inline-block;
5845
- > span {
5846
- color: $wac-second-color;
5847
- font-style: italic;
6310
+ .input:focus,
6311
+ .input.is-focused,
6312
+ .input:active,
6313
+ .input.is-active {
6314
+ border-color: $wac-wizishop-blue;
5848
6315
  }
5849
- }
5850
-
5851
- &__info,
5852
- &__error {
5853
- font-size: rem(12);
5854
- color: $wac-second-color;
5855
- }
5856
6316
 
5857
- &__size {
5858
- font-size: rem(12);
5859
- color: $wac-main-text;
5860
- position: absolute;
5861
- top: 0;
5862
- right: rem(-24);
5863
- strong {
6317
+ .icon {
6318
+ position: absolute;
6319
+ top: 50%;
6320
+ left: 20px;
6321
+ font-size: rem(18);
6322
+ transform: translateY(-50%);
6323
+ pointer-events: none;
5864
6324
  font-weight: 400;
5865
- color: $wac-main-text;
5866
- }
5867
- }
5868
-
5869
- .field {
5870
- .control {
5871
- margin-bottom: 0;
6325
+ color: $wac-placeholder-color;
6326
+ margin: 0;
6327
+ width: rem(18);
6328
+ height: rem(18);
5872
6329
  }
5873
6330
  }
5874
6331
  }
5875
-
5876
- /* Chrome, Safari, Edge, Opera */
5877
- .wac-input input::-webkit-outer-spin-button,
5878
- .wac-input input::-webkit-inner-spin-button {
5879
- -webkit-appearance: none;
5880
- margin: 0;
5881
- }
5882
-
5883
- /* Firefox */
5884
- .wac-input input[type='number'] {
5885
- -moz-appearance: textfield;
5886
- }
5887
-
5888
- .wac-input [disabled].input {
5889
- background-color: $wac-gray-background;
5890
- }
5891
-
5892
- .wac-input .input:not([disabled]):focus,
5893
- .wac-input .input:not([disabled]).is-focused,
5894
- .wac-input .input:not([disabled]):active,
5895
- .wac-input .input:not([disabled]).is-active,
5896
- .wac-input .input:not([disabled]).always-hover {
5897
- border-color: $wizishop-blue !important;
5898
- box-shadow: 0px 0px 4px $wac-input-box-shadow !important;
5899
- }
5900
-
5901
- .wac-input .text-info,
5902
- .wac-input .wac-input__error {
5903
- display: block;
5904
- transform: translateY(-4px);
5905
- }
5906
-
5907
- .wac-input {
5908
- .indication {
5909
- position: absolute;
5910
- right: 1px;
5911
- top: 1px;
5912
- height: 38px;
5913
- color: $wac-second-color;
5914
- font-size: rem(14);
5915
- padding: 7.5px 20px;
5916
- background-color: $gray-background;
5917
- border-left: 1px solid $wac-border-form;
5918
- border-radius: 3px 3px 0 0;
5919
- white-space: nowrap;
5920
- transition: .3s ease;
5921
- &.reverse {
5922
- right: auto;
5923
- left: 1px;
5924
- border-radius: 3px 0 0 3px;
5925
- border-left: none;
5926
- border-right: 1px solid $wac-border-form;
5927
- }
5928
- }
5929
- input:focus {
5930
- & + .indication {
5931
- background-color: $wac-wizishop-blue;
5932
- border: 1px solid $wac-wizishop-blue;
5933
- color: $wac-white!important;
6332
+ .wac-logo {
6333
+ &__wrapper {
6334
+ svg {
6335
+ width: 128px !important;
5934
6336
  }
5935
- }
5936
- }
5937
-
5938
- .wac-input .has-text-success {
5939
- color: $wac-green-color;
5940
- font-size: rem(14);
5941
- }
5942
6337
 
5943
- .indication-left {
5944
- .control {
5945
- display: flex;
5946
- flex-direction: row-reverse;
5947
- width: 100%;
5948
- border: 1px solid $border-form;
5949
- border-radius: 3px;
5950
- overflow: hidden;
5951
- &:hover, &:focus {
5952
- border-color: $wizishop-blue;
5953
- }
5954
- input {
5955
- border: none!important;
5956
- padding: 0 10px!important;
5957
- margin: 0!important;
5958
- }
5959
- .indication {
5960
- position: relative;
5961
- top: auto;
5962
- left: auto;
5963
- right: auto;
5964
- padding: 8px 20px;
5965
- height: 40px;
5966
- display: flex;
5967
- align-items: center;
5968
- justify-content: center;
6338
+ &.white {
6339
+ .cls-0,
6340
+ .cls-1,
6341
+ .cls-2 {
6342
+ fill: white;
6343
+ }
5969
6344
  }
5970
6345
  }
5971
6346
  }
@@ -6203,74 +6578,3 @@ div.wac-field-input-search {
6203
6578
  .wac-free .ps-content > * {
6204
6579
  padding-right: 15px;
6205
6580
  }
6206
- .wac-logo {
6207
- &__wrapper {
6208
- svg {
6209
- width: 128px !important;
6210
- }
6211
-
6212
- &.white {
6213
- .cls-0,
6214
- .cls-1,
6215
- .cls-2 {
6216
- fill: white;
6217
- }
6218
- }
6219
- }
6220
- }
6221
- .wac-info {
6222
- display: inline-block;
6223
- width: 40px;
6224
- height: 40px;
6225
-
6226
- &__wrapper {
6227
- @include flexbox();
6228
- @include justify-content(center);
6229
- @include align-items(center);
6230
- width: 100%;
6231
- height: 100%;
6232
- position: relative;
6233
-
6234
- i {
6235
- font-size: 14px;
6236
- line-height: 25px;
6237
- color: $wac-second-color;
6238
- transition: color 0.3s ease-in-out;
6239
- }
6240
-
6241
- &__sublevel {
6242
- position: absolute;
6243
- width: 350px;
6244
- top: 13px;
6245
- left: 100%;
6246
- z-index: -1;
6247
- opacity: 0;
6248
- background-color: $wac-white;
6249
- border-radius: rem(3);
6250
- box-shadow: 0px 2px 5px $wac-info-box-shadow;
6251
- visibility: hidden;
6252
- transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out, visibility 0s linear 0.16s;
6253
-
6254
- &__container {
6255
- padding: 15px 20px;
6256
- font-size: rem(14);
6257
- line-height: rem(25);
6258
- color: $wac-second-color;
6259
- }
6260
- }
6261
-
6262
- &:hover {
6263
- i {
6264
- color: $wac-input-active-color;
6265
- transition: color 0.3s ease-in-out;
6266
- }
6267
-
6268
- .wac-info__wrapper__sublevel {
6269
- visibility: visible;
6270
- opacity: 1;
6271
- z-index: 2;
6272
- transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
6273
- }
6274
- }
6275
- }
6276
- }