@wizishop/angular-components 0.0.133 → 0.0.137

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/angular-components.scss +1458 -1730
  2. package/bundles/wizishop-angular-components.umd.js +15 -5
  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/checkbox/checkbox.component.js +5 -3
  7. package/esm2015/lib/components/header-page/header-page.component.js +7 -4
  8. package/esm2015/lib/components/hn/h1/h1.component.js +9 -4
  9. package/esm2015/lib/directives/zindex-toggle/zindex-toggle.directive.js +3 -1
  10. package/fesm2015/wizishop-angular-components.js +19 -7
  11. package/fesm2015/wizishop-angular-components.js.map +1 -1
  12. package/lib/components/checkbox/checkbox.component.d.ts +1 -0
  13. package/lib/components/header-page/header-page.component.d.ts +1 -0
  14. package/lib/components/hn/h1/h1.component.d.ts +1 -0
  15. package/package.json +1 -1
  16. package/wizishop-angular-components-0.0.137.tgz +0 -0
  17. package/wizishop-angular-components.metadata.json +1 -1
  18. package/wizishop-angular-components-0.0.133.tgz +0 -0
package/angular-components.scss CHANGED
@@ -136,248 +136,142 @@ $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-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;
139
+ .wac-radio {
140
+ .is-checkradio[type='radio'] {
141
+ outline: 0 !important;
142
+ & + label {
167
143
  font-size: rem(14);
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;
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;
175
156
  }
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);
183
- }
157
+ &:after {
158
+ width: 20px;
159
+ height: 20px;
160
+ background: $wac-input-active-color;
161
+ top: 1px;
162
+ left: -2px;
184
163
  }
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);
164
+ &:before,
165
+ &:after {
166
+ outline: 0 !important;
167
+ }
168
+ &:hover,
169
+ &:focus {
170
+ &:before {
171
+ border-color: $wac-input-active-color !important;
192
172
  }
193
173
  }
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);
174
+ }
175
+ &:hover {
176
+ & + label {
177
+ color: $wac-input-radio-color-active-label;
178
+ &:before {
179
+ border-color: $wac-input-active-color !important;
201
180
  }
202
181
  }
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);
182
+ &:not([disabled]) {
183
+ & + label {
184
+ &:before {
185
+ border-color: $wac-input-active-color !important;
186
+ }
210
187
  }
211
188
  }
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;
214
+ }
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;
212
244
  &:focus {
213
- & + button i {
214
- color: $wac-main-text;
215
- }
245
+ border-color: $wizishop-blue !important;
246
+ box-shadow: 0px 0px 4px $wac-radio !important;
216
247
  &::-webkit-input-placeholder {
217
248
  /* Chrome/Opera/Safari */
218
- color: $wac-white;
219
- opacity: 1;
249
+ opacity: 0;
220
250
  }
221
251
  &::-moz-placeholder {
222
252
  /* Firefox 19+ */
223
- color: $wac-white;
224
- opacity: 1;
253
+ opacity: 0;
225
254
  }
226
255
  &:-ms-input-placeholder {
227
256
  /* IE 10+ */
228
- color: $wac-white;
229
- opacity: 1;
257
+ opacity: 0;
230
258
  }
231
259
  &:-moz-placeholder {
232
260
  /* Firefox 18- */
233
- color: $wac-white;
234
- opacity: 1;
235
- }
236
- }
237
- }
238
- button {
239
- display: flex;
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;
257
- }
258
- &:hover {
259
- i {
260
- color: $wac-wizishop-blue !important;
261
+ opacity: 0;
261
262
  }
262
263
  }
263
264
  }
264
265
  }
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;
266
+ }
267
+ .selected-list {
268
+ width: 100%;
269
+ &__wrapper {
275
270
  display: flex;
276
271
  flex-direction: column;
277
- justify-content: flex-start;
278
272
  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 {
273
+ justify-content: flex-start;
274
+ &__head {
381
275
  width: 100%;
382
276
  min-height: rem(60);
383
277
  display: flex;
@@ -460,163 +354,74 @@ $wac-background-indication: #EDEFF2!default;
460
354
  }
461
355
  }
462
356
  }
463
- }
464
-
465
- .wac {
466
- &-select {
467
- width: 100%;
357
+ }.wac {
358
+ &-select-in-text {
359
+ width: auto;
468
360
  position: relative;
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
+ display: flex;
362
+ align-items: center;
363
+ padding: 20px 0;
476
364
  &:hover,
477
365
  &:focus {
478
366
  z-index: 4;
479
367
  }
480
- &__label {
481
- padding: 0;
368
+ &__prepend,
369
+ &__after {
482
370
  font-size: rem(14);
483
371
  line-height: rem(16);
484
- margin: 0 0 rem(12);
485
- font-weight: 500;
372
+ color: $wac-main-text;
373
+ }
374
+ &__prepend {
375
+ margin: 0 rem(4) 0 0;
376
+ }
377
+ &__after {
378
+ margin: 0 0 0 rem(4);
486
379
  }
487
380
  &__current {
488
381
  display: flex;
489
- width: 100%;
490
- height: 38px;
382
+ width: auto;
491
383
  justify-content: space-between;
492
384
  align-items: center;
493
385
  align-content: center;
494
- padding: 0 0 0 20px;
495
- color: $wac-color-text-grey;
496
386
  font-size: rem(14);
497
387
  line-height: rem(16);
388
+ color: $wac-main-text;
498
389
  cursor: pointer;
499
390
  white-space: nowrap;
500
391
  text-overflow: ellipsis;
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
- }
521
- }
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 {
392
+ font-weight: 500;
393
+ position: relative;
394
+ span {
395
+ position: relative;
396
+ white-space: nowrap;
397
+ &:before {
398
+ content: '';
540
399
  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;
400
+ position: absolute;
401
+ bottom: -3px;
402
+ left: 0;
403
+ width: 100%;
404
+ height: 1px;
405
+ 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");
406
+ background-position: left top;
569
407
  }
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;
408
+ &:after {
409
+ content: '';
410
+ display: block;
411
+ position: absolute;
412
+ top: 100%;
413
+ left: 0;
584
414
  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
- }
415
+ height: 14px;
605
416
  }
606
417
  }
607
418
  }
608
- .select-disabled {
609
- background-color: #f5f8fa;
610
- cursor: not-allowed;
611
- }
612
419
  &__content {
613
420
  position: absolute;
614
421
  top: 100%;
615
422
  margin-top: rem(14);
616
- left: -1px;
423
+ left: 0;
617
424
  width: auto;
618
- min-width: calc(100% - 38px);
619
- max-width: calc(100% + 2px);
620
425
  border: 1px solid $wac-border-light;
621
426
  border-radius: 3px;
622
427
  display: flex;
@@ -624,12 +429,11 @@ $wac-background-indication: #EDEFF2!default;
624
429
  justify-content: flex-start;
625
430
  align-items: flex-start;
626
431
  background-color: $wac-white;
627
- max-height: 260px;
432
+ max-height: 400px;
628
433
  height: auto;
629
434
  visibility: visible;
630
435
  opacity: 1;
631
436
  box-shadow: 3px 3px 20px $wac-select-box-shadow;
632
- padding: 10px;
633
437
  &.hidden {
634
438
  visibility: hidden;
635
439
  opacity: 0;
@@ -638,9 +442,6 @@ $wac-background-indication: #EDEFF2!default;
638
442
  transition: 0s;
639
443
  }
640
444
  }
641
- .ps {
642
- max-height: 240px;
643
- }
644
445
  &.open,
645
446
  &.open.hidden {
646
447
  position: relative;
@@ -654,45 +455,10 @@ $wac-background-indication: #EDEFF2!default;
654
455
  transition: 0s;
655
456
  }
656
457
  }
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;
458
+ &__item {
666
459
  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
- }
692
- &__item {
693
- width: 100%;
694
- font-size: rem(14);
695
- line-height: rem(30);
460
+ font-size: rem(14);
461
+ line-height: rem(40);
696
462
  cursor: pointer;
697
463
  transition: 0.3s ease;
698
464
  position: relative;
@@ -700,21 +466,18 @@ $wac-background-indication: #EDEFF2!default;
700
466
  justify-content: flex-start;
701
467
  align-content: center;
702
468
  align-items: center;
703
- color: $wac-second-color;
469
+ font-weight: 400;
704
470
  > div {
705
- width: 100%;
706
- display: flex;
707
- align-items: center;
708
- align-content: center;
471
+ padding: 0 20px;
472
+ min-width: 100%;
473
+ &.selected {
474
+ background-color: $wac-hover-multiple-search;
475
+ color: $wac-main-text;
476
+ }
709
477
  }
710
478
  .icon {
711
479
  width: 24px;
712
480
  margin: 0 10px 0 0;
713
- height: auto;
714
- max-height: 24px;
715
- }
716
- &:not(:last-child) {
717
- margin: 0 0 rem(10);
718
481
  }
719
482
  &:empty {
720
483
  display: none;
@@ -727,28 +490,6 @@ $wac-background-indication: #EDEFF2!default;
727
490
  background-color: $wac-gray-background;
728
491
  color: $wac-main-text;
729
492
  }
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
- }
752
493
  }
753
494
  }
754
495
  }
@@ -3399,72 +3140,238 @@ span.wac-tooltip {
3399
3140
  }
3400
3141
  }
3401
3142
  }
3402
- .wac-alert {
3143
+ .wac-search {
3403
3144
  width: 100%;
3404
- background-color: transparentize($wac-link-color, 0.85);
3405
- color: $wac-link-color;
3145
+ min-height: 50px;
3406
3146
  border-radius: 3px;
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;
3147
+ background-color: $wac-white;
3148
+ position: relative;
3149
+ z-index: 2;
3150
+ border: 1px solid $wac-border-light;
3151
+ transition: 0.3s ease;
3152
+ &.open {
3153
+ border-color: $wac-wizishop-blue;
3154
+ }
3155
+ &__wrapper {
3156
+ position: relative;
3157
+ display: flex;
3158
+ justify-content: space-between;
3159
+ align-items: stretch;
3160
+ align-content: stretch;
3161
+ flex-wrap: nowrap;
3162
+ width: 100%;
3163
+ min-height: 50px;
3164
+ @include media('<tablet') {
3165
+ padding: 0 12px;
3166
+ }
3167
+ input {
3168
+ background: transparent;
3169
+ border: none;
3170
+ color: $wac-main-text;
3171
+ font-size: rem(14);
3172
+ height: 50px;
3173
+ line-height: 50px;
3174
+ padding: 0 20px 0 48px;
3175
+ font-weight: 400;
3176
+ width: 100%;
3177
+ @include media('<tablet') {
3178
+ padding: 0 0 0 10px;
3179
+ }
3180
+ &::-webkit-input-placeholder {
3181
+ /* Chrome/Opera/Safari */
3182
+ color: $wac-multiple-search-input-color;
3183
+ opacity: 1;
3184
+ font-weight: 400;
3185
+ @include media('<tablet') {
3186
+ font-size: rem(11);
3187
+ }
3188
+ }
3189
+ &::-moz-placeholder {
3190
+ /* Firefox 19+ */
3191
+ color: $wac-multiple-search-input-color;
3192
+ opacity: 1;
3193
+ font-weight: 400;
3194
+ @include media('<tablet') {
3195
+ font-size: rem(11);
3196
+ }
3197
+ }
3198
+ &:-ms-input-placeholder {
3199
+ /* IE 10+ */
3200
+ color: $wac-multiple-search-input-color;
3201
+ opacity: 1;
3202
+ font-weight: 400;
3203
+ @include media('<tablet') {
3204
+ font-size: rem(11);
3205
+ }
3206
+ }
3207
+ &:-moz-placeholder {
3208
+ /* Firefox 18- */
3209
+ color: $wac-multiple-search-input-color;
3210
+ opacity: 1;
3211
+ font-weight: 400;
3212
+ @include media('<tablet') {
3213
+ font-size: rem(11);
3214
+ }
3215
+ }
3216
+ &:focus {
3217
+ & + button i {
3218
+ color: $wac-main-text;
3219
+ }
3220
+ &::-webkit-input-placeholder {
3221
+ /* Chrome/Opera/Safari */
3222
+ color: $wac-white;
3223
+ opacity: 1;
3224
+ }
3225
+ &::-moz-placeholder {
3226
+ /* Firefox 19+ */
3227
+ color: $wac-white;
3228
+ opacity: 1;
3229
+ }
3230
+ &:-ms-input-placeholder {
3231
+ /* IE 10+ */
3232
+ color: $wac-white;
3233
+ opacity: 1;
3234
+ }
3235
+ &:-moz-placeholder {
3236
+ /* Firefox 18- */
3237
+ color: $wac-white;
3238
+ opacity: 1;
3239
+ }
3417
3240
  }
3418
3241
  }
3419
- i {
3420
- color: $wac-green-color;
3242
+ button {
3243
+ display: flex;
3244
+ align-items: center;
3245
+ align-content: center;
3246
+ justify-content: center;
3247
+ width: 18px;
3248
+ height: 18px;
3249
+ border-radius: 3px;
3250
+ position: absolute;
3251
+ left: 20px;
3252
+ top: 50%;
3253
+ transform: translateY(-50%);
3254
+ border: none;
3255
+ cursor: pointer;
3256
+ background-color: $wac-white;
3257
+ i {
3258
+ font-size: rem(18);
3259
+ color: $wac-color-icon-search-multiple-search;
3260
+ transition: 0.3s ease;
3261
+ }
3262
+ &:hover {
3263
+ i {
3264
+ color: $wac-wizishop-blue !important;
3265
+ }
3266
+ }
3421
3267
  }
3422
3268
  }
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;
3269
+ &__absolute {
3270
+ position: absolute;
3271
+ top: 100%;
3272
+ margin-top: rem(14);
3273
+ left: -1px;
3274
+ width: auto;
3275
+ min-width: calc(100% - 38px);
3276
+ max-width: calc(100% + 2px);
3277
+ border: 1px solid $wac-border-light;
3278
+ border-radius: 3px;
3279
+ display: flex;
3280
+ flex-direction: column;
3281
+ justify-content: flex-start;
3282
+ align-items: flex-start;
3283
+ background-color: $wac-white;
3284
+ max-height: 260px;
3285
+ height: auto;
3286
+ visibility: visible;
3287
+ opacity: 1;
3288
+ box-shadow: 3px 3px 20px $wac-select-box-shadow;
3289
+ padding: 10px;
3290
+ &.hidden {
3291
+ visibility: hidden;
3292
+ opacity: 0;
3293
+ & > * {
3294
+ opacity: 0;
3295
+ transition: 0s;
3429
3296
  }
3430
3297
  }
3431
- i {
3432
- color: $wac-primary-button;
3298
+ .ps {
3299
+ max-height: 240px;
3433
3300
  }
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;
3301
+ &.open,
3302
+ &.open.hidden {
3303
+ position: relative;
3304
+ left: auto;
3305
+ top: 0;
3306
+ transform: translateX(-1px);
3307
+ visibility: visible;
3308
+ opacity: 1;
3309
+ & > * {
3310
+ opacity: 1;
3311
+ transition: 0s;
3441
3312
  }
3442
3313
  }
3443
- i {
3444
- color: $wac-orange-color;
3445
- }
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;
3314
+ &__item {
3315
+ width: 100%;
3316
+ font-size: rem(14);
3317
+ line-height: rem(30);
3318
+ cursor: pointer;
3319
+ transition: 0.3s ease;
3320
+ position: relative;
3321
+ display: flex;
3322
+ justify-content: flex-start;
3323
+ align-content: center;
3324
+ align-items: center;
3325
+ color: $wac-second-color;
3326
+ > div {
3327
+ width: 100%;
3328
+ display: flex;
3329
+ align-items: center;
3330
+ align-content: center;
3331
+ }
3332
+ .icon {
3333
+ width: 24px;
3334
+ margin: 0 10px 0 0;
3335
+ height: auto;
3336
+ max-height: 24px;
3337
+ }
3338
+ &:not(:last-child) {
3339
+ margin: 0 0 rem(10);
3340
+ }
3341
+ &:empty {
3342
+ display: none;
3343
+ }
3344
+ &:first-child {
3345
+ border-width: 1px 0 1px;
3346
+ }
3347
+ &:hover,
3348
+ &:focus {
3349
+ background-color: $wac-gray-background;
3350
+ color: $wac-main-text;
3351
+ }
3352
+ > div {
3353
+ padding: 0 10px;
3354
+ &.selected {
3355
+ background-color: $wac-gray-background;
3356
+ color: $wac-main-text;
3357
+ }
3358
+ }
3359
+ }
3360
+ &__empty {
3361
+ display: flex;
3362
+ width: 100%;
3363
+ justify-content: center;
3364
+ align-items: center;
3365
+ padding: 10px;
3366
+ span {
3367
+ font-size: rem(16);
3368
+ font-weight: 400;
3369
+ text-align: center;
3370
+ color: $wac-second-color;
3371
+ display: inline-block;
3372
+ line-height: rem(25);
3373
+ }
3456
3374
  }
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
3375
  }
3469
3376
  }
3470
3377
  .wac-wrapper {
@@ -4444,6 +4351,10 @@ h1.wac-h1 {
4444
4351
  font-size: rem(22);
4445
4352
  line-height: rem(30);
4446
4353
  }
4354
+ &.with-img {
4355
+ display: flex;
4356
+ align-items: center;
4357
+ }
4447
4358
  }
4448
4359
  .wac-header-page {
4449
4360
  width: 100%;
@@ -4891,77 +4802,103 @@ h4.wac-h4 {
4891
4802
  color: $wac-second-color;
4892
4803
  }
4893
4804
  }
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;
4911
- }
4912
- &:after {
4913
- width: 20px;
4914
- height: 20px;
4915
- background: $wac-input-active-color;
4916
- top: 1px;
4917
- left: -2px;
4805
+ .wac-alert {
4806
+ width: 100%;
4807
+ background-color: transparentize($wac-link-color, 0.85);
4808
+ color: $wac-link-color;
4809
+ border-radius: 3px;
4810
+ display: flex;
4811
+ flex-wrap: nowrap;
4812
+ justify-content: space-between;
4813
+ padding: 20px;
4814
+ &.success {
4815
+ background-color: transparentize($wac-green-color, 0.85);
4816
+ p {
4817
+ color: $wac-p-alert-color-success;
4818
+ > * {
4819
+ color: $wac-p-alert-color-success;
4918
4820
  }
4919
- &:before,
4920
- &:after {
4921
- outline: 0 !important;
4821
+ }
4822
+ i {
4823
+ color: $wac-green-color;
4824
+ }
4825
+ }
4826
+ &.warning {
4827
+ background-color: transparentize($wac-primary-button, 0.85);
4828
+ p {
4829
+ color: $wac-p-alert-color-warning;
4830
+ > * {
4831
+ color: $wac-p-alert-color-warning;
4922
4832
  }
4923
- &:hover,
4924
- &:focus {
4925
- &:before {
4926
- border-color: $wac-input-active-color !important;
4927
- }
4833
+ }
4834
+ i {
4835
+ color: $wac-primary-button;
4836
+ }
4837
+ }
4838
+ &.alert {
4839
+ background-color: transparentize($wac-orange-color, 0.85);
4840
+ p {
4841
+ color: $wac-p-alert-color-alert;
4842
+ > * {
4843
+ color: $wac-p-alert-color-alert;
4928
4844
  }
4929
4845
  }
4930
- &:hover {
4846
+ i {
4847
+ color: $wac-orange-color;
4848
+ }
4849
+ }
4850
+ p {
4851
+ width: 100%;
4852
+ font-size: rem(14);
4853
+ line-height: rem(25);
4854
+ margin: 0;
4855
+ padding: 0;
4856
+ color: $wac-p-alert-color-default;
4857
+ > * {
4858
+ color: $wac-p-alert-color-default;
4859
+ }
4860
+ }
4861
+ i {
4862
+ width: auto;
4863
+ margin: 0 10px 0 0;
4864
+ color: inherit;
4865
+ font-size: rem(14);
4866
+ line-height: rem(25);
4867
+ }
4868
+
4869
+ .wac-button i {
4870
+ color: $wac-white;
4871
+ }
4872
+ }
4873
+ .wac-field-checkbox {
4874
+ &.disable-wt {
4875
+ .wac-field-checkbox__row {
4876
+ display: flex;
4877
+ width: 100%;
4878
+ }
4879
+ .is-checkradio[type='checkbox'] {
4931
4880
  & + 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
- }
4881
+ white-space: normal;
4882
+ line-height: 1.4;
4883
+ padding: 0;
4884
+ > span {
4885
+ margin: 0 0 0 30px;
4886
+ transform: translateY(-4px);
4942
4887
  }
4943
4888
  }
4944
4889
  }
4945
- &:checked + label {
4946
- color: $wac-input-radio-color-active-label;
4947
- &:before {
4948
- border-color: $wac-input-active-color;
4949
- }
4950
- }
4951
4890
  }
4952
-
4953
-
4954
- .wac-radio__row {
4891
+ &__row {
4892
+ position: relative;
4955
4893
  min-width: 100%;
4956
- margin: 0 0 7px;
4894
+ margin: 0;
4957
4895
  }
4958
-
4959
4896
  &--nowrap {
4960
4897
  display: inline-block;
4961
4898
  width: auto;
4962
4899
  min-width: 0;
4963
4900
  margin: 0 10px 10px 0;
4964
- .wac-radio {
4901
+ .field {
4965
4902
  &__row {
4966
4903
  width: auto;
4967
4904
  display: inline-block;
@@ -4969,1028 +4906,319 @@ h4.wac-h4 {
4969
4906
  }
4970
4907
  }
4971
4908
  }
4972
- & + .wac-radio {
4973
- margin-top: rem(-6);
4974
- }
4975
4909
 
4976
- &.alone {
4977
- label {
4978
- padding-left: 7px;
4979
- margin-right: 0;
4910
+ input[type='text'] {
4911
+ height: 40px;
4912
+ max-height: 40px;
4913
+ padding: 0 20px;
4914
+ line-height: 40px;
4915
+ border: 1px solid $wac-border-form;
4916
+ border-radius: 3px;
4917
+ margin: 15px 0 10px !important;
4918
+ font-size: rem(14) !important;
4919
+ color: $wac-main-text;
4920
+ &:focus {
4921
+ border-color: $wac-wizishop-blue !important;
4922
+ box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
4923
+ &::-webkit-input-placeholder {
4924
+ /* Chrome/Opera/Safari */
4925
+ opacity: 0;
4926
+ }
4927
+ &::-moz-placeholder {
4928
+ /* Firefox 19+ */
4929
+ opacity: 0;
4930
+ }
4931
+ &:-ms-input-placeholder {
4932
+ /* IE 10+ */
4933
+ opacity: 0;
4934
+ }
4935
+ &:-moz-placeholder {
4936
+ /* Firefox 18- */
4937
+ opacity: 0;
4938
+ }
4980
4939
  }
4981
-
4982
4940
  }
4941
+ &.alone {
4942
+ .is-checkradio[type='checkbox'] {
4943
+ & + label {
4944
+ padding-left: 9px;
4945
+ margin-right: 0px;
4983
4946
 
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;
4947
+ &:before {
4948
+ border-width: 1px;
4949
+ width: 16px;
4950
+ height: 16px;
4951
+ border-radius: 2px;
5013
4952
  }
5014
- &:-moz-placeholder {
5015
- /* Firefox 18- */
5016
- opacity: 0;
4953
+ }
4954
+ &:checked + label {
4955
+ &:after {
4956
+ top: 7px;
4957
+ transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
5017
4958
  }
5018
4959
  }
5019
4960
  }
5020
4961
  }
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
- }
5032
-
5033
- &.with-progress-bar {
5034
- input {
5035
- margin-bottom: rem(20) !important;
5036
- }
5037
- }
5038
4962
 
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);
4963
+ .is-checkradio[type='checkbox'] {
4964
+ outline: 0 !important;
4965
+ top: 0;
4966
+ & + label {
4967
+ font-size: rem(14);
4968
+ line-height: 0;
4969
+ color: $wac-input-radio-color-label;
4970
+ white-space: nowrap;
4971
+ padding: 0 8px;
4972
+ margin-right: 0;
4973
+ outline: 0 !important;
4974
+ &:before {
4975
+ width: 16px;
4976
+ height: 16px;
4977
+ border: 1px solid $wac-border-color;
4978
+ top: 0;
4979
+ transition: all 0.3s ease-in-out;
4980
+ }
4981
+ &:after {
4982
+ top: 2.3px !important;
4983
+ left: 3px !important;
4984
+ width: 10px;
4985
+ height: 12px;
4986
+ border: none !important;
4987
+ background: transparent
4988
+ 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")
4989
+ center center / 8px 8px no-repeat;
4990
+ transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
4991
+ transition: all 0.3s ease-in-out;
4992
+ }
4993
+ span {
4994
+ margin: 0 0 0 rem(16);
4995
+ display: inline-block;
4996
+ }
4997
+ &:hover,
4998
+ &:focus {
4999
+ &:before {
5000
+ border-color: $wac-input-active-color !important;
5050
5001
  }
5051
5002
  }
5003
+ &:before,
5004
+ &:after {
5005
+ outline: 0 !important;
5006
+ }
5052
5007
  }
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;
5008
+ &:hover {
5009
+ & + label {
5010
+ color: $wac-input-radio-color-active-label;
5011
+ &:before {
5012
+ border-color: $wac-input-active-color !important;
5013
+ }
5014
+ &:after {
5015
+ border-color: $wac-white !important;
5016
+ }
5017
+ }
5018
+ &:not([disabled]) {
5019
+ & + label {
5020
+ &:before {
5021
+ border-color: $wac-input-active-color !important;
5022
+ }
5023
+ }
5024
+ }
5077
5025
  }
5078
- :-moz-placeholder {
5079
- /* Firefox 18- */
5080
- color: $wac-placeholder-color !important;
5081
- opacity: 1;
5026
+ &:checked + label {
5027
+ color: $wac-input-radio-color-active-label;
5028
+ &:before {
5029
+ border: 1px solid $wac-input-active-color;
5030
+ background-color: $wac-input-active-color;
5031
+ transition: all 0.3s ease-in-out;
5032
+ }
5033
+ &:after {
5034
+ left: 7px;
5035
+ top: 8px;
5036
+ transition: all 0.3s ease-in-out;
5037
+ }
5082
5038
  }
5083
5039
  }
5084
5040
 
5085
- label {
5086
- font-size: rem(14);
5087
- color: $wac-main-text;
5088
- font-weight: 500 !important;
5089
- margin-bottom: 0!important;
5041
+ }
5090
5042
 
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
5043
 
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;
5044
+ .wac {
5045
+ &-select {
5046
+ width: 100%;
5047
+ position: relative;
5048
+ height: 40px;
5049
+ border: 1px solid $wac-border-form;
5050
+ margin: 0;
5051
+ border-radius: 3px;
5052
+ z-index: 2;
5053
+ background-color: $wac-white;
5054
+ max-width: 100%;
5055
+ &:hover,
5056
+ &:focus {
5057
+ z-index: 4;
5135
5058
  }
5136
- &.is-danger {
5137
- border-color: $wac-primary-button !important;
5059
+ &__label {
5060
+ padding: 0;
5061
+ font-size: rem(14);
5062
+ line-height: rem(16);
5063
+ margin: 0 0 rem(12);
5064
+ font-weight: 500;
5138
5065
  }
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;
5066
+ &__current {
5174
5067
  display: flex;
5175
- -ms-flex-wrap: wrap;
5176
- flex-wrap: wrap;
5177
- -ms-flex-align: stretch;
5178
- align-items: stretch;
5179
5068
  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;
5069
+ height: 38px;
5070
+ justify-content: space-between;
5071
+ align-items: center;
5072
+ align-content: center;
5073
+ padding: 0 0 0 20px;
5074
+ color: $wac-color-text-grey;
5075
+ font-size: rem(14);
5076
+ line-height: rem(16);
5077
+ cursor: pointer;
5078
+ white-space: nowrap;
5079
+ text-overflow: ellipsis;
5080
+ max-width: 100%;
5081
+ overflow: hidden;
5082
+ &--withSearch {
5083
+ padding: 0;
5084
+ span {
5085
+ &:not(.icon):not(:last-child) {
5086
+ display: block;
5087
+ width: 100%;
5088
+ height: rem(38);
5089
+ line-height: rem(38);
5090
+ padding: 0 20px;
5091
+ }
5092
+ &.icon {
5093
+ & + span {
5094
+ padding: 0;
5095
+ }
5096
+ }
5097
+ &:last-child {
5098
+ margin: 0;
5099
+ }
5189
5100
  }
5190
- + .append {
5191
- border-radius: 0.25rem 0 0 0.25rem;
5101
+ &.open-search {
5102
+ span {
5103
+ &:not(.icon):not(:last-child) {
5104
+ display: none;
5105
+ }
5106
+ &.icon {
5107
+ display: none;
5108
+ }
5109
+ }
5192
5110
  }
5193
5111
  }
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
- }
5112
+ span.icon {
5113
+ max-width: 24px;
5114
+ margin: 0 10px 0 0;
5115
+ i {
5116
+ font-size: rem(17);
5222
5117
  }
5223
- .is-right {
5224
- left: -40px;
5118
+ img {
5119
+ display: block;
5120
+ max-width: rem(24);
5225
5121
  }
5226
- .is-left {
5227
- left: auto;
5228
- right: -45px;
5122
+ &:empty {
5123
+ display: none;
5229
5124
  }
5230
5125
  }
5231
- .icon.is-small.is-right {
5126
+ > span:not([class]):not(:last-child) {
5127
+ width: 100%;
5128
+ text-align: left;
5129
+ max-width: calc(100% - 58px);
5130
+ overflow: hidden;
5131
+ text-overflow: ellipsis;
5232
5132
  }
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;
5133
+ span:last-child {
5134
+ width: 38px;
5135
+ min-width: 38px;
5136
+ height: 38px;
5137
+ margin: 0 0 0 20px;
5138
+ display: flex;
5139
+ justify-content: center;
5140
+ align-items: center;
5141
+ align-content: center;
5142
+ background-color: $wac-select-icon-background;
5143
+ border-radius: 0 3px 3px 0;
5144
+ z-index: 3;
5145
+ i {
5146
+ font-size: rem(12);
5147
+ color: $wac-second-color;
5148
+ }
5149
+ }
5150
+ &__search {
5151
+ position: relative;
5152
+ top: 0;
5239
5153
  left: 0;
5154
+ width: 100%;
5155
+ height: rem(38);
5156
+ display: flex;
5157
+ align-items: center;
5158
+ align-content: center;
5159
+ z-index: 2;
5160
+ padding: 0 0 0 rem(20);
5161
+ input {
5162
+ border: none;
5163
+ width: 100%;
5164
+ box-shadow: none;
5165
+ margin: 0 0 0 rem(10);
5166
+ padding: 0;
5167
+ height: rem(38);
5168
+ line-height: rem(38);
5169
+ &:focus {
5170
+ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
5171
+ opacity: 0;
5172
+ }
5173
+ &::-moz-placeholder { /* Firefox 19+ */
5174
+ opacity: 0;
5175
+ }
5176
+ &:-ms-input-placeholder { /* IE 10+ */
5177
+ opacity: 0;
5178
+ }
5179
+ &:-moz-placeholder { /* Firefox 18- */
5180
+ opacity: 0;
5181
+ }
5182
+
5183
+ }
5184
+ }
5240
5185
  }
5241
5186
  }
5242
- &.has-icons-right {
5243
- .icon {
5244
- height: rem(39);
5245
- }
5187
+ .select-disabled {
5188
+ background-color: #f5f8fa;
5189
+ cursor: not-allowed;
5246
5190
  }
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;
5191
+ &__content {
5192
+ position: absolute;
5193
+ top: 100%;
5194
+ margin-top: rem(14);
5195
+ left: -1px;
5196
+ width: auto;
5197
+ min-width: calc(100% - 38px);
5198
+ max-width: calc(100% + 2px);
5199
+ border: 1px solid $wac-border-light;
5200
+ border-radius: 3px;
5201
+ display: flex;
5202
+ flex-direction: column;
5203
+ justify-content: flex-start;
5204
+ align-items: flex-start;
5205
+ background-color: $wac-white;
5206
+ max-height: 260px;
5207
+ height: auto;
5208
+ visibility: visible;
5209
+ opacity: 1;
5210
+ box-shadow: 3px 3px 20px $wac-select-box-shadow;
5211
+ padding: 10px;
5212
+ &.hidden {
5213
+ visibility: hidden;
5214
+ opacity: 0;
5215
+ & > * {
5216
+ opacity: 0;
5217
+ transition: 0s;
5266
5218
  }
5267
5219
  }
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;
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;
5220
+ .ps {
5221
+ max-height: 240px;
5994
5222
  }
5995
5223
  &.open,
5996
5224
  &.open.hidden {
@@ -6086,261 +5314,690 @@ h4.wac-h4 {
6086
5314
  }
6087
5315
  }
6088
5316
  }
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
- }
5317
+ &__empty {
5318
+ display: flex;
5319
+ width: 100%;
5320
+ justify-content: center;
5321
+ align-items: center;
5322
+ padding: 10px;
5323
+ span {
5324
+ font-size: rem(16);
5325
+ font-weight: 400;
5326
+ text-align: center;
5327
+ color: $wac-second-color;
5328
+ display: inline-block;
5329
+ line-height: rem(25);
5330
+ }
5331
+ }
5332
+ }
5333
+ }
5334
+ }
5335
+ .wac-input-with-select {
5336
+ &__label {
5337
+ font-size: rem(14);
5338
+ line-height: rem(16);
5339
+ font-weight: 500;
5340
+ margin: 0 0 rem(12);
5341
+ cursor: pointer;
5342
+ display: block;
5343
+ }
5344
+ &__wrapper {
5345
+ display: flex;
5346
+ &__left {
5347
+ position: relative;
5348
+ display: flex;
5349
+ justify-content: space-between;
5350
+ align-items: stretch;
5351
+ align-content: stretch;
5352
+ flex-wrap: nowrap;
5353
+ border-radius: 3px;
5354
+ max-height: 40px;
5355
+ background-color: $wac-white;
5356
+ z-index: 2;
5357
+ border: 1px solid $wac-border-form;
5358
+
5359
+ input {
5360
+ background: transparent;
5361
+ border: none;
5362
+ color: $wac-main-text;
5363
+ font-size: rem(14);
5364
+ height: 40px;
5365
+ line-height: 40px;
5366
+ font-weight: 400;
5367
+ padding: 0 0 0 15px;
5368
+ &::-webkit-input-placeholder {
5369
+ /* Chrome/Opera/Safari */
5370
+ color: $wac-color-icon-search-multiple-search;
5371
+ opacity: 1;
5372
+ font-weight: 400;
5373
+ }
5374
+ &::-moz-placeholder {
5375
+ /* Firefox 19+ */
5376
+ color: $wac-color-icon-search-multiple-search;
5377
+ opacity: 1;
5378
+ font-weight: 400;
5379
+ }
5380
+ &:-ms-input-placeholder {
5381
+ /* IE 10+ */
5382
+ color: $wac-color-icon-search-multiple-search;
5383
+ opacity: 1;
5384
+ font-weight: 400;
5385
+ }
5386
+ &:-moz-placeholder {
5387
+ /* Firefox 18- */
5388
+ color: $wac-color-icon-search-multiple-search;
5389
+ opacity: 1;
5390
+ font-weight: 400;
5391
+ }
5392
+ &:focus {
5393
+ & + button i {
5394
+ color: $wac-main-text;
5395
+ }
5396
+ &::-webkit-input-placeholder {
5397
+ /* Chrome/Opera/Safari */
5398
+ color: $wac-white;
5399
+ opacity: 1;
5400
+ }
5401
+ &::-moz-placeholder {
5402
+ /* Firefox 19+ */
5403
+ color: $wac-white;
5404
+ opacity: 1;
5405
+ }
5406
+ &:-ms-input-placeholder {
5407
+ /* IE 10+ */
5408
+ color: $wac-white;
5409
+ opacity: 1;
5410
+ }
5411
+ &:-moz-placeholder {
5412
+ /* Firefox 18- */
5413
+ color: $wac-white;
5414
+ opacity: 1;
5415
+ }
5416
+ }
5417
+ }
5418
+
5419
+ &__current {
5420
+ position: relative;
5421
+ padding: rem(5) rem(16);
5422
+ max-height: rem(40);
5423
+ display: flex;
5424
+ justify-content: center;
5425
+ align-items: center;
5426
+ align-content: center;
5427
+ cursor: pointer;
5428
+
5429
+ &:before {
5430
+ content: '';
5431
+ display: block;
5432
+ position: absolute;
5433
+ left: -0.5px;
5434
+ top: 50%;
5435
+ transform: translateY(-50%);
5436
+ width: 1px;
5437
+ height: rem(25);
5438
+ background-color: $wac-border-form;
5439
+ }
5440
+
5441
+ span {
5442
+ position: relative;
5443
+ white-space: nowrap;
5444
+ line-height: 1;
5445
+ &:before {
5446
+ content: '';
5447
+ display: block;
5448
+ position: absolute;
5449
+ top: 100%;
5450
+ margin-top: 2px;
5451
+ left: 0;
5452
+ width: 100%;
5453
+ height: 1px;
5454
+ border-bottom: 1px dashed $wac-primary-button;
5455
+ }
5456
+ }
5457
+ }
5458
+
5459
+ &__select {
5460
+ position: absolute;
5461
+ top: 50px;
5462
+ width: auto;
5463
+ left: calc(100% - 40px);
5464
+ margin-top: 0;
5465
+ background-color: $wac-white;
5466
+ z-index: 3;
5467
+ box-shadow: 3px 3px 20px $wac-input-with-select-box-shadow;
5468
+ border-radius: 3px;
5469
+ border: 1px solid $wac-border-light;
5470
+ padding: 10px;
5471
+
5472
+ &__item {
5473
+ width: 100%;
5474
+ font-size: rem(14);
5475
+ line-height: rem(30);
5476
+ cursor: pointer;
5477
+ transition: 0.3s ease;
5478
+ position: relative;
5479
+ padding: 0 10px;
5480
+ white-space: nowrap;
5481
+ &:not(:last-child) {
5482
+ margin: 0 0 rem(10);
5483
+ }
5484
+ span {
5485
+ color: $wac-main-text;
5486
+ font-size: rem(12);
5487
+ text-align: left;
5488
+ }
5489
+ &:hover,
5490
+ &:focus {
5491
+ background-color: darken($wac-gray-background, 15%);
5492
+ color: $wac-main-text;
5493
+ }
5494
+ }
5495
+ }
5496
+ }
5497
+ &__right {
5498
+ margin: 0 0 0 rem(15);
5499
+ display: flex;
5500
+ align-items: center;
5501
+ p {
5502
+ margin: 0;
5503
+ font-size: rem(14);
5504
+ line-height: rem(16);
5505
+ color: $wac-secondary-color;
6103
5506
  }
6104
5507
  }
6105
5508
  }
6106
5509
  }
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;
5510
+ div.wac-field-input-search {
5511
+ padding: 20px;
5512
+ background-color: $wac-gray-background;
5513
+ &.small-padding {
5514
+ padding: 10px 20px;
6115
5515
  }
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;
5516
+ p.control {
5517
+ .input,
5518
+ .input:focus,
5519
+ .input.is-focused,
5520
+ .input:active,
5521
+ .input.is-active {
5522
+ font-size: rem(14);
5523
+ color: $wac-main-text;
5524
+ border: rem(1) solid $wac-input-border-search;
5525
+ box-shadow: none;
5526
+ padding: rem(13.5) rem(20) rem(13.5) rem(48);
5527
+ border-radius: rem(3);
5528
+ margin: 0;
5529
+ height: auto;
5530
+ min-height: unset;
5531
+
5532
+ &::placeholder {
5533
+ color: $wac-placeholder-color;
5534
+ font-weight: normal;
5535
+ }
5536
+ }
5537
+
5538
+ .input:focus,
5539
+ .input.is-focused,
5540
+ .input:active,
5541
+ .input.is-active {
5542
+ border-color: $wac-wizishop-blue;
5543
+ }
5544
+
5545
+ .icon {
5546
+ position: absolute;
5547
+ top: 50%;
5548
+ left: 20px;
5549
+ font-size: rem(18);
5550
+ transform: translateY(-50%);
5551
+ pointer-events: none;
5552
+ font-weight: 400;
5553
+ color: $wac-placeholder-color;
5554
+ margin: 0;
5555
+ width: rem(18);
5556
+ height: rem(18);
5557
+ }
5558
+ }
5559
+ }
5560
+ .wac-input {
5561
+ .field-label {
5562
+ margin-bottom: 0!important;
5563
+ &.is-normal {
5564
+ padding-top: 0 !important;
5565
+ }
5566
+ }
5567
+ .field-label {
5568
+ position: relative;
5569
+ }
5570
+
5571
+ &.with-progress-bar {
5572
+ input {
5573
+ margin-bottom: rem(20) !important;
5574
+ }
5575
+ }
5576
+
5577
+ &.with-padding {
5578
+ label {
5579
+ display: none;
5580
+ }
5581
+ .control {
5582
+ margin: 0;
5583
+ .icon {
5584
+ height: 50px !important;
5585
+ i {
5586
+ color: $wac-placeholder-color !important;
5587
+ font-size: rem(18);
5588
+ }
5589
+ }
5590
+ }
5591
+ input {
5592
+ height: 50px;
5593
+ max-height: 50px;
5594
+ padding: 0 20px;
5595
+ line-height: 50px;
6125
5596
  border-radius: 3px;
6126
- max-height: 40px;
6127
- background-color: $wac-white;
6128
- z-index: 2;
6129
- border: 1px solid $wac-border-form;
5597
+ margin: 0 !important;
5598
+ font-size: rem(14) !important;
5599
+ color: $wac-placeholder-color;
5600
+ }
5601
+ ::-webkit-input-placeholder {
5602
+ /* Chrome/Opera/Safari */
5603
+ color: $wac-placeholder-color !important;
5604
+ opacity: 1;
5605
+ }
5606
+ ::-moz-placeholder {
5607
+ /* Firefox 19+ */
5608
+ color: $wac-placeholder-color !important;
5609
+ opacity: 1;
5610
+ }
5611
+ :-ms-input-placeholder {
5612
+ /* IE 10+ */
5613
+ color: $wac-placeholder-color !important;
5614
+ opacity: 1;
5615
+ }
5616
+ :-moz-placeholder {
5617
+ /* Firefox 18- */
5618
+ color: $wac-placeholder-color !important;
5619
+ opacity: 1;
5620
+ }
5621
+ }
5622
+
5623
+ label {
5624
+ font-size: rem(14);
5625
+ color: $wac-main-text;
5626
+ font-weight: 500 !important;
5627
+ margin-bottom: 0!important;
5628
+
5629
+ &.has-text-weight-bold {
5630
+ font-weight: 500 !important;
5631
+ }
5632
+ &.label-inline {
5633
+ display: inline;
5634
+ }
5635
+ > span {
5636
+ color: $wac-second-color;
5637
+ font-style: italic;
5638
+ font-size: rem(12);
5639
+ }
5640
+ }
5641
+ input::placeholder {
5642
+ font-weight: 400;
5643
+ }
5644
+ input:not([disabled]):focus {
5645
+ border-color: $wac-main-text;
5646
+ + span {
5647
+ color: $wac-main-text;
5648
+ }
5649
+ }
5650
+ .input,
5651
+ .input:not([disabled]):focus,
5652
+ .input:not([disabled]).is-focused,
5653
+ .input:not([disabled]):active,
5654
+ .input:not([disabled]).is-active {
5655
+ font-size: rem(14);
5656
+ color: $wac-main-text;
5657
+ border: rem(1) solid $wac-lightened-secondary;
5658
+ box-shadow: none;
5659
+ padding: rem(10) rem(15);
5660
+ border-radius: rem(3);
5661
+ margin-bottom: rem(8);
5662
+ height: rem(40);
5663
+
5664
+ &::placeholder {
5665
+ color: $wac-placeholder-color;
5666
+ font-weight: 400;
5667
+ }
5668
+ &.is-number {
5669
+ max-width: 100px;
5670
+ }
5671
+ &.remove-margin {
5672
+ margin-bottom: 0;
5673
+ }
5674
+ &.is-danger {
5675
+ border-color: $wac-primary-button !important;
5676
+ }
5677
+ }
5678
+
5679
+ .control {
5680
+ margin-top: rem(6);
5681
+ &.has-icons-left {
5682
+ .input,
5683
+ .input:not([disabled]):focus,
5684
+ .input:not([disabled]).is-focused,
5685
+ .input:not([disabled]):active,
5686
+ .input:not([disabled]).is-active {
5687
+ font-size: rem(14);
5688
+ color: $wac-main-text;
5689
+ border: rem(1) solid $wac-lightened-secondary;
5690
+ box-shadow: none;
5691
+ padding: 0 rem(44);
5692
+ border-radius: rem(3);
5693
+ margin-bottom: rem(12);
5694
+
5695
+ &::placeholder {
5696
+ color: $wac-placeholder-color;
5697
+ }
5698
+ }
6130
5699
 
5700
+ .icon {
5701
+ color: $wac-border-form;
5702
+ height: rem(42);
5703
+ width: rem(46);
5704
+ border-radius: rem(3) 0 0 rem(3);
5705
+ font-size: rem(16);
5706
+ transform: translateX(5px);
5707
+ pointer-events: none;
5708
+ }
5709
+ }
5710
+ &.has-input-group {
5711
+ display: -ms-flexbox;
5712
+ display: flex;
5713
+ -ms-flex-wrap: wrap;
5714
+ flex-wrap: wrap;
5715
+ -ms-flex-align: stretch;
5716
+ align-items: stretch;
5717
+ width: 100%;
6131
5718
  input {
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;
5719
+ position: relative;
5720
+ -ms-flex: 1 1 0;
5721
+ flex: 1 1 0;
5722
+ min-width: 0;
5723
+ margin-bottom: 0 !important;
5724
+ &.text-append {
5725
+ border-radius: rem(3) 0 0 rem(3);
5726
+ border-right: none;
6145
5727
  }
6146
- &::-moz-placeholder {
6147
- /* Firefox 19+ */
6148
- color: $wac-color-icon-search-multiple-search;
6149
- opacity: 1;
6150
- font-weight: 400;
5728
+ + .append {
5729
+ border-radius: 0.25rem 0 0 0.25rem;
6151
5730
  }
6152
- &:-ms-input-placeholder {
6153
- /* IE 10+ */
6154
- color: $wac-color-icon-search-multiple-search;
6155
- opacity: 1;
6156
- font-weight: 400;
5731
+ }
5732
+ .has-input-group {
5733
+ display: flex;
5734
+ position: relative;
5735
+ .prepend {
5736
+ margin-right: -1px;
6157
5737
  }
6158
- &:-moz-placeholder {
6159
- /* Firefox 18- */
6160
- color: $wac-color-icon-search-multiple-search;
6161
- opacity: 1;
5738
+ .has-input-group-text {
5739
+ display: -ms-flexbox;
5740
+ display: flex;
5741
+ -ms-flex-align: center;
5742
+ align-items: center;
5743
+ padding: 0.375rem 1.5rem;
5744
+ margin-bottom: 0;
5745
+ font-size: 0.875rem;
6162
5746
  font-weight: 400;
6163
- }
6164
- &:focus {
6165
- & + button i {
6166
- color: $wac-main-text;
6167
- }
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;
5747
+ line-height: 1.5;
5748
+ color: $wac-color-text-grey;
5749
+ text-align: center;
5750
+ white-space: nowrap;
5751
+ background-color: $wac-input-border;
5752
+ border: 1px solid $wac-input-border;
5753
+ &.prepend {
5754
+ border-radius: 0.25rem 0 0 0.25rem;
6182
5755
  }
6183
- &:-moz-placeholder {
6184
- /* Firefox 18- */
6185
- color: $wac-white;
6186
- opacity: 1;
5756
+ &.append {
5757
+ border-left: 0;
5758
+ border-radius: 0 0.25rem 0.25rem 0;
6187
5759
  }
6188
5760
  }
5761
+ .is-right {
5762
+ left: -40px;
5763
+ }
5764
+ .is-left {
5765
+ left: auto;
5766
+ right: -45px;
5767
+ }
6189
5768
  }
5769
+ .icon.is-small.is-right {
5770
+ }
5771
+ .wac-input__info,
5772
+ .wac-input__error {
5773
+ font-size: rem(12);
5774
+ color: $wac-secondary-text;
5775
+ position: absolute;
5776
+ bottom: -22px !important;
5777
+ left: 0;
5778
+ }
5779
+ }
5780
+ &.has-icons-right {
5781
+ .icon {
5782
+ height: rem(39);
5783
+ }
5784
+ }
5785
+ }
6190
5786
 
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;
6200
-
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;
6211
- }
5787
+ &.is-big {
5788
+ .control.has-icons-left {
5789
+ .input,
5790
+ .input:not([disabled]):focus,
5791
+ .input:not([disabled]).is-focused,
5792
+ .input:not([disabled]):active,
5793
+ .input:not([disabled]).is-active {
5794
+ font-size: rem(14);
5795
+ color: $wac-main-text;
5796
+ border: rem(1) solid $wac-lightened-secondary;
5797
+ box-shadow: none;
5798
+ padding: rem(30) rem(50);
5799
+ border-radius: rem(3);
5800
+ margin-bottom: rem(12);
6212
5801
 
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
- }
5802
+ &::placeholder {
5803
+ color: $wac-placeholder-color;
6228
5804
  }
6229
5805
  }
6230
5806
 
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;
5807
+ .icon {
5808
+ color: $wac-placeholder-color;
5809
+ height: rem(42);
5810
+ width: rem(42);
5811
+ background-color: transparent;
5812
+ border-radius: rem(3) 0 0 rem(3);
5813
+ font-size: rem(20);
5814
+ margin-left: rem(10);
5815
+ top: rem(11);
5816
+ }
5817
+ }
5818
+ }
6243
5819
 
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
- }
5820
+ &.is-medium {
5821
+ .control {
5822
+ .input,
5823
+ .input:not([disabled]):focus,
5824
+ .input:not([disabled]).is-focused,
5825
+ .input:not([disabled]):active,
5826
+ .input:not([disabled]).is-active {
5827
+ min-height: rem(50);
5828
+ padding-left: rem(45);
5829
+ }
5830
+ .icon {
5831
+ top: rem(4);
5832
+ right: rem(19);
5833
+ font-size: rem(20);
6267
5834
  }
6268
5835
  }
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
- }
5836
+ }
5837
+
5838
+ &.has-no-block {
5839
+ .input,
5840
+ .input:not([disabled]):focus,
5841
+ .input:not([disabled]).is-focused,
5842
+ .input:not([disabled]):active,
5843
+ .input:not([disabled]).is-active {
5844
+ border-left: rem(5) solid $wac-lightened-secondary;
5845
+ border-radius: 0;
5846
+ }
5847
+ }
5848
+
5849
+ .input:not([disabled]):focus,
5850
+ .input:not([disabled]).is-focused,
5851
+ .input:not([disabled]):active,
5852
+ .input:not([disabled]).is-active,
5853
+ &.always-hover .input {
5854
+ border-color: $wizishop-blue !important;
5855
+ }
5856
+
5857
+ &.has-no-block {
5858
+ .input:not([disabled]):focus,
5859
+ .input:not([disabled]).is-focused,
5860
+ .input:not([disabled]):active,
5861
+ .input:not([disabled]).is-active {
5862
+ border-left-color: $wizishop-blue;
5863
+ }
5864
+ .icon.is-small.is-right {
5865
+ margin-top: rem(3);
5866
+ }
5867
+ }
5868
+
5869
+ .control > label {
5870
+ font-size: rem(14);
5871
+ padding: 0 0 rem(10);
5872
+ display: inline-block;
5873
+ > span {
5874
+ color: $wac-second-color;
5875
+ font-style: italic;
6279
5876
  }
6280
5877
  }
6281
- }
6282
- div.wac-field-input-search {
6283
- padding: 20px;
6284
- background-color: $wac-gray-background;
6285
- &.small-padding {
6286
- padding: 10px 20px;
5878
+
5879
+ &__info,
5880
+ &__error {
5881
+ font-size: rem(12);
5882
+ color: $wac-second-color;
6287
5883
  }
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;
6303
5884
 
6304
- &::placeholder {
6305
- color: $wac-placeholder-color;
6306
- font-weight: normal;
6307
- }
5885
+ &__size {
5886
+ font-size: rem(12);
5887
+ color: $wac-main-text;
5888
+ position: absolute;
5889
+ top: 0;
5890
+ right: rem(-24);
5891
+ strong {
5892
+ font-weight: 400;
5893
+ color: $wac-main-text;
6308
5894
  }
5895
+ }
6309
5896
 
6310
- .input:focus,
6311
- .input.is-focused,
6312
- .input:active,
6313
- .input.is-active {
6314
- border-color: $wac-wizishop-blue;
5897
+ .field {
5898
+ .control {
5899
+ margin-bottom: 0;
6315
5900
  }
5901
+ }
5902
+ }
6316
5903
 
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);
5904
+ /* Chrome, Safari, Edge, Opera */
5905
+ .wac-input input::-webkit-outer-spin-button,
5906
+ .wac-input input::-webkit-inner-spin-button {
5907
+ -webkit-appearance: none;
5908
+ margin: 0;
5909
+ }
5910
+
5911
+ /* Firefox */
5912
+ .wac-input input[type='number'] {
5913
+ -moz-appearance: textfield;
5914
+ }
5915
+
5916
+ .wac-input [disabled].input {
5917
+ background-color: $wac-gray-background;
5918
+ }
5919
+
5920
+ .wac-input .input:not([disabled]):focus,
5921
+ .wac-input .input:not([disabled]).is-focused,
5922
+ .wac-input .input:not([disabled]):active,
5923
+ .wac-input .input:not([disabled]).is-active,
5924
+ .wac-input .input:not([disabled]).always-hover {
5925
+ border-color: $wizishop-blue !important;
5926
+ box-shadow: 0px 0px 4px $wac-input-box-shadow !important;
5927
+ }
5928
+
5929
+ .wac-input .text-info,
5930
+ .wac-input .wac-input__error {
5931
+ display: block;
5932
+ transform: translateY(-4px);
5933
+ }
5934
+
5935
+ .wac-input {
5936
+ .indication {
5937
+ position: absolute;
5938
+ right: 0;
5939
+ top: 0;
5940
+ height: 40px;
5941
+ color: $wac-main-text;
5942
+ font-size: rem(14);
5943
+ padding: 7.5px 15px;
5944
+ background-color: $wac-background-indication;
5945
+ border: none;
5946
+ border-radius: 3px 3px 0 0;
5947
+ white-space: nowrap;
5948
+ transition: .3s ease;
5949
+ font-weight: 500;
5950
+ display: flex;
5951
+ align-items: center;
5952
+ z-index: 2;
5953
+ &.reverse {
5954
+ right: auto;
5955
+ left: 1px;
5956
+ border-radius: 3px 0 0 3px;
5957
+ border-left: none;
5958
+ border-right: 1px solid $wac-border-form;
6329
5959
  }
6330
5960
  }
6331
- }
6332
- .wac-logo {
6333
- &__wrapper {
6334
- svg {
6335
- width: 128px !important;
5961
+ input:focus {
5962
+ & + .indication {
5963
+ background-color: $wac-wizishop-blue;
5964
+ border: 1px solid $wac-wizishop-blue;
5965
+ color: $wac-white!important;
6336
5966
  }
5967
+ }
5968
+ }
6337
5969
 
6338
- &.white {
6339
- .cls-0,
6340
- .cls-1,
6341
- .cls-2 {
6342
- fill: white;
6343
- }
5970
+ .wac-input .has-text-success {
5971
+ color: $wac-green-color;
5972
+ font-size: rem(14);
5973
+ }
5974
+
5975
+ .indication-left {
5976
+ .control {
5977
+ display: flex;
5978
+ flex-direction: row-reverse;
5979
+ width: 100%;
5980
+ border: 1px solid $border-form;
5981
+ border-radius: 3px;
5982
+ overflow: hidden;
5983
+ &:hover, &:focus {
5984
+ border-color: $wizishop-blue;
5985
+ }
5986
+ input {
5987
+ border: none!important;
5988
+ padding: 0 10px!important;
5989
+ margin: 0!important;
5990
+ }
5991
+ .indication {
5992
+ position: relative;
5993
+ top: auto;
5994
+ left: auto;
5995
+ right: auto;
5996
+ padding: 8px 20px;
5997
+ height: 40px;
5998
+ display: flex;
5999
+ align-items: center;
6000
+ justify-content: center;
6344
6001
  }
6345
6002
  }
6346
6003
  }
@@ -6578,3 +6235,74 @@ div.wac-field-input-search {
6578
6235
  .wac-free .ps-content > * {
6579
6236
  padding-right: 15px;
6580
6237
  }
6238
+ .wac-logo {
6239
+ &__wrapper {
6240
+ svg {
6241
+ width: 128px !important;
6242
+ }
6243
+
6244
+ &.white {
6245
+ .cls-0,
6246
+ .cls-1,
6247
+ .cls-2 {
6248
+ fill: white;
6249
+ }
6250
+ }
6251
+ }
6252
+ }
6253
+ .wac-info {
6254
+ display: inline-block;
6255
+ width: 40px;
6256
+ height: 40px;
6257
+
6258
+ &__wrapper {
6259
+ @include flexbox();
6260
+ @include justify-content(center);
6261
+ @include align-items(center);
6262
+ width: 100%;
6263
+ height: 100%;
6264
+ position: relative;
6265
+
6266
+ i {
6267
+ font-size: 14px;
6268
+ line-height: 25px;
6269
+ color: $wac-second-color;
6270
+ transition: color 0.3s ease-in-out;
6271
+ }
6272
+
6273
+ &__sublevel {
6274
+ position: absolute;
6275
+ width: 350px;
6276
+ top: 13px;
6277
+ left: 100%;
6278
+ z-index: -1;
6279
+ opacity: 0;
6280
+ background-color: $wac-white;
6281
+ border-radius: rem(3);
6282
+ box-shadow: 0px 2px 5px $wac-info-box-shadow;
6283
+ visibility: hidden;
6284
+ transition: opacity 0.15s ease-in-out, z-index 0.15s ease-in-out, visibility 0s linear 0.16s;
6285
+
6286
+ &__container {
6287
+ padding: 15px 20px;
6288
+ font-size: rem(14);
6289
+ line-height: rem(25);
6290
+ color: $wac-second-color;
6291
+ }
6292
+ }
6293
+
6294
+ &:hover {
6295
+ i {
6296
+ color: $wac-input-active-color;
6297
+ transition: color 0.3s ease-in-out;
6298
+ }
6299
+
6300
+ .wac-info__wrapper__sublevel {
6301
+ visibility: visible;
6302
+ opacity: 1;
6303
+ z-index: 2;
6304
+ transition: visibility 0s ease 0s, opacity 0.3s ease-in-out .1s;
6305
+ }
6306
+ }
6307
+ }
6308
+ }