@wizishop/angular-components 0.0.115 → 0.0.118

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 +1883 -1860
  2. package/bundles/wizishop-angular-components.umd.js +4 -2
  3. package/bundles/wizishop-angular-components.umd.js.map +1 -1
  4. package/bundles/wizishop-angular-components.umd.min.js +1 -1
  5. package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
  6. package/esm2015/lib/components/button/button.component.js +3 -2
  7. package/esm2015/lib/components/selected-list/selected-list.component.js +2 -2
  8. package/esm2015/lib/components/switch/switch.component.js +2 -1
  9. package/fesm2015/wizishop-angular-components.js +4 -2
  10. package/fesm2015/wizishop-angular-components.js.map +1 -1
  11. package/package.json +1 -1
  12. package/wizishop-angular-components-0.0.118.tgz +0 -0
  13. package/wizishop-angular-components.metadata.json +1 -1
  14. package/wizishop-angular-components-0.0.115.tgz +0 -0
package/angular-components.scss CHANGED
@@ -305,7 +305,22 @@ $wac-color-success-popup-alert: #6DCC95!default;
305
305
  background-color: $wac-wizishop-blue;
306
306
  color: $white;
307
307
  }
308
+
309
+ @include media('<1024px') {
310
+ display: none;
311
+ }
312
+ }
313
+
314
+ &__button {
315
+ height: rem(40);
316
+ width: fit-content;
317
+ margin-left: auto;
318
+
319
+ @include media('>1024px') {
320
+ display: none;
321
+ }
308
322
  }
323
+
309
324
  }
310
325
  &__content {
311
326
  width: 100%;
@@ -350,8 +365,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
350
365
  }
351
366
  }
352
367
  }
353
- }
354
- .wac {
368
+ }.wac {
355
369
  &-select-in-text {
356
370
  width: auto;
357
371
  position: relative;
@@ -645,6 +659,9 @@ $wac-color-success-popup-alert: #6DCC95!default;
645
659
  min-width: unset;
646
660
  margin: 0 0 100px;
647
661
  background-color: $wac-tag-success;
662
+ &.is-danger {
663
+ background-color: $wac-primary-button;
664
+ }
648
665
  .alert--message {
649
666
  display: flex;
650
667
  align-items: center;
@@ -903,157 +920,550 @@ $wac-color-success-popup-alert: #6DCC95!default;
903
920
  }
904
921
 
905
922
  }
906
- .wac-field-checkbox {
907
- &__row {
908
- position: relative;
909
- min-width: 100%;
910
- margin: 0;
911
- }
912
- &--nowrap {
913
- display: inline-block;
914
- width: auto;
915
- min-width: 0;
916
- margin: 0 10px 10px 0;
917
- .field {
918
- &__row {
919
- width: auto;
920
- display: inline-block;
921
- margin: 0;
923
+ .wac-calendar {
924
+ position: relative;
925
+ margin: 0 0 20px;
926
+ width: 268px;
927
+ &--open {
928
+ z-index: 9;
929
+ .wac-calendar {
930
+ &__absolute {
931
+ visibility: visible;
932
+ opacity: 1;
933
+ transition: 0.3s ease opacity 0.1s, 0s visibility linear 0s;
922
934
  }
923
935
  }
924
936
  }
925
-
926
- input[type='text'] {
927
- height: 40px;
928
- max-height: 40px;
929
- padding: 0 20px;
930
- line-height: 40px;
931
- border: 1px solid $wac-border-form;
932
- border-radius: 3px;
933
- margin: 15px 0 10px !important;
934
- font-size: rem(14) !important;
935
- color: $wac-main-text;
936
- &:focus {
937
- border-color: $wac-wizishop-blue !important;
938
- box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
939
- &::-webkit-input-placeholder {
940
- /* Chrome/Opera/Safari */
941
- opacity: 0;
942
- }
943
- &::-moz-placeholder {
944
- /* Firefox 19+ */
945
- opacity: 0;
946
- }
947
- &:-ms-input-placeholder {
948
- /* IE 10+ */
949
- opacity: 0;
950
- }
951
- &:-moz-placeholder {
952
- /* Firefox 18- */
953
- opacity: 0;
937
+ &--edit {
938
+ display: flex;
939
+ justify-content: flex-start;
940
+ align-items: center;
941
+ align-content: center;
942
+ & > * {
943
+ display: inline-block;
944
+ &:nth-child(2) {
945
+ margin: 0 10px;
954
946
  }
955
947
  }
956
948
  }
957
- &.alone {
958
- .is-checkradio[type='checkbox'] {
959
- & + label {
960
- padding-left: 9px;
961
- margin-right: 0px;
962
-
963
- &:before {
964
- border-width: 1px;
965
- width: 16px;
966
- height: 16px;
967
- border-radius: 2px;
968
- }
969
- }
970
- &:checked + label {
971
- &:after {
972
- top: 7px;
973
- transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
974
- }
975
- }
949
+ &--no-margin {
950
+ margin: 0;
951
+ .wac-calendar__autoHide {
952
+ margin: 0;
976
953
  }
977
954
  }
978
-
979
- .is-checkradio[type='checkbox'] {
980
- outline: 0 !important;
981
- top: 0;
982
- & + label {
983
- font-size: rem(14);
984
- line-height: 0;
985
- color: $wac-input-radio-color-label;
986
- white-space: nowrap;
987
- padding: 0 8px;
988
- margin-right: 0;
989
- outline: 0 !important;
990
- &:before {
955
+ &__label {
956
+ font-size: rem(14) !important;
957
+ line-height: rem(16) !important;
958
+ margin: 0 0 10px !important;
959
+ color: $wac-color-text-grey !important;
960
+ cursor: pointer;
961
+ }
962
+ &__autoHide {
963
+ max-width: 300px;
964
+ position: relative;
965
+ }
966
+ &__wrapper {
967
+ &__input {
968
+ border-radius: 3px;
969
+ display: flex;
970
+ justify-content: flex-start;
971
+ align-items: center;
972
+ align-content: center;
973
+ min-width: 240px;
974
+ max-width: 240px;
975
+ padding: 7px 20px;
976
+ border: 1px solid $wac-border-form;
977
+ cursor: pointer;
978
+ &__icon {
991
979
  width: 16px;
992
- height: 16px;
993
- border: 1px solid $wac-border-color;
994
- top: 0;
995
- transition: all 0.3s ease-in-out;
996
- }
997
- &:after {
998
- top: 2.3px !important;
999
- left: 3px !important;
1000
- width: 10px;
1001
- height: 12px;
1002
- border: none !important;
1003
- background: transparent
1004
- 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")
1005
- center center / 8px 8px no-repeat;
1006
- transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
1007
- transition: all 0.3s ease-in-out;
1008
- }
1009
- span {
1010
- margin: 0 0 0 rem(16);
1011
- display: inline-block;
1012
- }
1013
- &:hover,
1014
- &:focus {
1015
- &:before {
1016
- border-color: $wac-input-active-color !important;
980
+ margin: 0 10px 0 0;
981
+ display: flex;
982
+ justify-content: space-between;
983
+ align-items: center;
984
+ align-content: center;
985
+ cursor: pointer;
986
+ &:hover,
987
+ &:focus {
988
+ i {
989
+ color: darken($wac-wizishop-blue, 15%);
990
+ }
1017
991
  }
1018
- }
1019
- &:before,
1020
- &:after {
1021
- outline: 0 !important;
1022
- }
1023
- }
1024
- &:hover {
1025
- & + label {
1026
- color: $wac-input-radio-color-active-label;
1027
- &:before {
1028
- border-color: $wac-input-active-color !important;
992
+ i {
993
+ color: $wac-second-color;
994
+ font-size: rem(18);
995
+ transition: color 300ms ease;
1029
996
  }
997
+ }
998
+ &__date {
999
+ width: auto;
1000
+ white-space: nowrap;
1001
+ position: relative;
1002
+ color: $wac-main-text;
1003
+ font-size: rem(14);
1004
+ line-height: rem(24);
1005
+ margin: 0 15px 0 0;
1006
+ letter-spacing: 0.65px;
1030
1007
  &:after {
1031
- border-color: $wac-white !important;
1008
+ content: '';
1009
+ display: block;
1010
+ position: absolute;
1011
+ width: 1px;
1012
+ height: 15px;
1013
+ background-color: $wac-input-border;
1014
+ top: 50%;
1015
+ right: -15px;
1016
+ transform: translateY(-50%);
1032
1017
  }
1033
1018
  }
1034
- &:not([disabled]) {
1035
- & + label {
1036
- &:before {
1037
- border-color: $wac-input-active-color !important;
1019
+ &__time {
1020
+ width: auto;
1021
+ white-space: nowrap;
1022
+ font-size: rem(14);
1023
+ line-height: rem(24);
1024
+ color: $wac-main-text;
1025
+ margin: 0 15px;
1026
+ letter-spacing: 1.3px;
1027
+ }
1028
+ &__close {
1029
+ width: 10px;
1030
+ cursor: pointer;
1031
+ i {
1032
+ font-size: 14px;
1033
+ transition: color 300ms ease;
1034
+ color: $wac-primary-button;
1035
+ font-weight: 400;
1036
+ }
1037
+ &:hover,
1038
+ &:focus {
1039
+ i {
1040
+ color: darken($wac-primary-button, 15%);
1038
1041
  }
1039
1042
  }
1040
1043
  }
1041
1044
  }
1042
- &:checked + label {
1043
- color: $wac-input-radio-color-active-label;
1044
- &:before {
1045
- border: 1px solid $wac-input-active-color;
1046
- background-color: $wac-input-active-color;
1047
- transition: all 0.3s ease-in-out;
1048
- }
1045
+ &__editInPlace {
1046
+ display: flex;
1047
+ justify-content: space-between;
1048
+ padding: 5px 0;
1049
+ position: relative;
1050
+ align-content: center;
1051
+ align-items: center;
1052
+ cursor: pointer;
1053
+ max-width: 140px;
1049
1054
  &:after {
1050
- left: 7px;
1051
- top: 8px;
1052
- transition: all 0.3s ease-in-out;
1055
+ position: absolute;
1056
+ content: '';
1057
+ border-bottom: dashed 1px $wac-calendar-primary;
1058
+ width: 100%;
1059
+ bottom: 0;
1060
+ left: 0;
1061
+ }
1062
+ &__icon {
1063
+ width: 12px;
1064
+ margin: 0 5px 0 0;
1065
+ display: flex;
1066
+ justify-content: space-between;
1067
+ align-items: center;
1068
+ align-content: center;
1069
+ i {
1070
+ font-size: rem(14);
1071
+ color: $wac-wizishop-blue;
1072
+ transition: color 300ms ease;
1073
+ }
1074
+ }
1075
+ &__date {
1076
+ position: relative;
1077
+ color: $wac-header-color;
1078
+ font-size: rem(14);
1079
+ width: auto;
1080
+ transition: 300ms ease;
1081
+ white-space: nowrap;
1082
+ }
1083
+ &:hover,
1084
+ &:focus {
1085
+ .wac-calendar {
1086
+ &__wrapper {
1087
+ &__editInPlace {
1088
+ &__date {
1089
+ color: darken($wac-header-color, 30%);
1090
+ }
1091
+ &__icon {
1092
+ i {
1093
+ color: darken($wac-wizishop-blue, 15%);
1094
+ }
1095
+ }
1096
+ }
1097
+ }
1098
+ }
1099
+ }
1100
+ }
1101
+ &__select {
1102
+ border-radius: 3px;
1103
+ display: flex;
1104
+ justify-content: flex-start;
1105
+ align-items: center;
1106
+ align-content: center;
1107
+ min-width: 220px;
1108
+ max-width: 220px;
1109
+ padding: 11px 19px;
1110
+ border: 1px solid $wac-input-border;
1111
+ cursor: pointer;
1112
+ background: $wac-white no-repeat center right 15px
1113
+ url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%226.032%22%3E%3Cpath%20data-name%3D%22Arrow%20copie%203%22%20d%3D%22M0%20.016L5%204.65l5-4.634v1.378L5%206.028%200%201.394V.02z%22%20fill%3D%22%231e2e43%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E);
1114
+ &__icon {
1115
+ width: 16px;
1116
+ margin: 0 10px 0 0;
1117
+ display: flex;
1118
+ justify-content: space-between;
1119
+ align-items: center;
1120
+ align-content: center;
1121
+ cursor: pointer;
1122
+ &:hover,
1123
+ &:focus {
1124
+ i {
1125
+ color: darken($wac-second-color, 15%);
1126
+ }
1127
+ }
1128
+ i {
1129
+ font-size: rem(18);
1130
+ font-weight: 400;
1131
+ color: $wac-second-color;
1132
+ transition: color 300ms ease;
1133
+ }
1134
+ }
1135
+ &__date {
1136
+ width: auto;
1137
+ position: relative;
1138
+ color: $wac-header-color;
1139
+ font-size: rem(14);
1140
+ white-space: nowrap;
1141
+ margin: 0;
1142
+ &:after {
1143
+ display: none;
1144
+ }
1145
+ }
1146
+ &__close {
1147
+ width: 10px;
1148
+ cursor: pointer;
1149
+ i {
1150
+ font-size: 14px;
1151
+ transition: color 300ms ease;
1152
+ color: $wac-primary-button;
1153
+ }
1154
+ &:hover,
1155
+ &:focus {
1156
+ i {
1157
+ color: darken($wac-primary-button, 15%);
1158
+ }
1159
+ }
1053
1160
  }
1054
1161
  }
1055
1162
  }
1163
+ &__absolute {
1164
+ position: absolute;
1165
+ top: 100%;
1166
+ left: 50%;
1167
+ transform: translateX(-50%);
1168
+ visibility: hidden;
1169
+ opacity: 0;
1170
+ transition: 0.3s ease opacity, 0s visibility 0.31s;
1171
+ border: 1px solid $wac-border-light;
1172
+ background-color: $wac-white;
1173
+ box-shadow: 3px 3px 20px $wac-calendar-box-shadow;
1174
+ border-radius: 3px;
1175
+ max-width: 268px;
1176
+ min-width: 268px;
1177
+ &.bottom {
1178
+ transform: translateX(-50%) translateY(10px);
1179
+ }
1180
+ &.top {
1181
+ top: auto;
1182
+ bottom: 100%;
1183
+ transform: translateX(-50%) translateY(-10px);
1184
+ }
1185
+ &.left {
1186
+ transform: translateY(-50%) translateX(-10px);
1187
+ left: auto;
1188
+ right: 100%;
1189
+ top: 50%;
1190
+ }
1191
+ &.right {
1192
+ transform: translateY(-50%) translateX(10px);
1193
+ left: 100%;
1194
+ top: 50%;
1195
+ }
1196
+ &.left-top {
1197
+ left: auto;
1198
+ right: 100%;
1199
+ top: auto;
1200
+ bottom: 0;
1201
+ transform: translateY(-10px) translateX(-10px);
1202
+ }
1203
+ &.left-bottom {
1204
+ left: auto;
1205
+ right: 100%;
1206
+ top: 0;
1207
+ transform: translateY(10px) translateX(-10px);
1208
+ }
1209
+ &.right-top {
1210
+ left: 100%;
1211
+ top: auto;
1212
+ bottom: 0;
1213
+ transform: translateY(-10px) translateX(10px);
1214
+ }
1215
+ &.right-bottom {
1216
+ left: 100%;
1217
+ top: 0;
1218
+ transform: translateY(10px) translateX(10px);
1219
+ }
1220
+ & > * > * {
1221
+ width: 265px;
1222
+ }
1223
+ &__time {
1224
+ position: relative;
1225
+ background-color: $wac-white;
1226
+ padding: 20px;
1227
+ width: 100%;
1228
+ &:before {
1229
+ content: '';
1230
+ width: 100%;
1231
+ height: 5px;
1232
+ bottom: 100%;
1233
+ margin-bottom: -2px;
1234
+ display: block;
1235
+ position: absolute;
1236
+ left: 0;
1237
+ background-color: $wac-white;
1238
+ }
1239
+ &__wrapper {
1240
+ width: 100% !important;
1241
+ display: flex;
1242
+ align-items: center;
1243
+ align-content: center;
1244
+ justify-content: center;
1245
+ min-height: 42px;
1246
+ position: relative;
1247
+ &:before {
1248
+ content: '';
1249
+ display: block;
1250
+ background-color: $wac-wizishop-blue;
1251
+ width: 4px;
1252
+ height: 4px;
1253
+ border-radius: 50%;
1254
+ position: absolute;
1255
+ top: 50%;
1256
+ left: 50%;
1257
+ transform: translate(-50%, -50%);
1258
+ margin-top: -4px;
1259
+ }
1260
+ &:after {
1261
+ content: '';
1262
+ display: block;
1263
+ background-color: $wac-wizishop-blue;
1264
+ width: 4px;
1265
+ height: 4px;
1266
+ border-radius: 50%;
1267
+ position: absolute;
1268
+ top: 50%;
1269
+ left: 50%;
1270
+ transform: translate(-50%, -50%);
1271
+ margin-top: 4px;
1272
+ }
1273
+ &__hours,
1274
+ &__minutes {
1275
+ position: relative;
1276
+ width: 100px;
1277
+ display: flex;
1278
+ flex-wrap: nowrap;
1279
+ &__left,
1280
+ &__right {
1281
+ width: 100%;
1282
+ display: flex;
1283
+ flex-wrap: nowrap;
1284
+ justify-content: center;
1285
+ flex-direction: column;
1286
+ align-items: center;
1287
+ align-content: center;
1288
+ }
1289
+ &__btn {
1290
+ display: flex;
1291
+ justify-content: center;
1292
+ flex-direction: column;
1293
+ align-items: center;
1294
+ align-content: center;
1295
+ width: 40px;
1296
+ height: 20px;
1297
+ background-color: $wac-gray-background;
1298
+ box-shadow: none;
1299
+ border: none;
1300
+ cursor: pointer;
1301
+ transition: 0.3s ease;
1302
+ &:hover,
1303
+ &:focus {
1304
+ background-color: $wac-wizishop-blue;
1305
+ i {
1306
+ color: $wac-white;
1307
+ }
1308
+ }
1309
+ &:first-child {
1310
+ margin: 0 0 2px;
1311
+ }
1312
+ i {
1313
+ font-size: rem(10);
1314
+ color: $wac-second-color;
1315
+ margin: 0;
1316
+ }
1317
+ }
1318
+
1319
+ input::-webkit-outer-spin-button,
1320
+ input::-webkit-inner-spin-button {
1321
+ -webkit-appearance: none;
1322
+ margin: 0;
1323
+ }
1324
+
1325
+ /* Firefox */
1326
+ input[type='number'] {
1327
+ -moz-appearance: textfield;
1328
+ }
1329
+
1330
+ input {
1331
+ border: none;
1332
+ text-align: center;
1333
+ font-size: rem(24);
1334
+ color: $wac-wizishop-blue;
1335
+ padding: 0;
1336
+ line-height: 1.4;
1337
+ margin: 0;
1338
+ width: 100%;
1339
+ }
1340
+ }
1341
+ &__hours {
1342
+ margin: 0 10px 0 0;
1343
+ }
1344
+ &__minutes {
1345
+ margin: 0 0 0 10px;
1346
+ }
1347
+ }
1348
+ }
1349
+ }
1350
+ }
1351
+
1352
+ .datetimepicker-dummy .datetimepicker-clear-button {
1353
+ top: -3px !important;
1354
+ }
1355
+
1356
+ .datetimepicker-dummy .datetimepicker-dummy-wrapper {
1357
+ border: 1px solid $wac-border-color;
1358
+ border-radius: rem(3);
1359
+
1360
+ &:hover,
1361
+ &:focus {
1362
+ border: 1px solid $wac-wizishop-blue;
1363
+ }
1364
+ }
1365
+
1366
+
1367
+ .datetimepicker {
1368
+ box-shadow: none !important;
1369
+ &-wrapper {
1370
+ border: none !important;
1371
+ box-shadow: none;
1372
+ background: $wac-white;
1373
+ }
1374
+ }
1375
+
1376
+ .datepicker {
1377
+ .datepicker {
1378
+ &-nav {
1379
+ background: $wac-white !important;
1380
+ color: $wac-main-text !important;
1381
+ padding: 15px !important;
1382
+ }
1383
+ }
1384
+ }
1385
+
1386
+ .datetimepicker .datepicker-nav .datepicker-nav-month,
1387
+ .datetimepicker .datepicker-nav .datepicker-nav-year {
1388
+ color: $wac-main-text !important;
1389
+ font-weight: 500 !important;
1390
+ &:hover,
1391
+ &:focus {
1392
+ color: $wac-wizishop-blue !important;
1393
+ }
1394
+ }
1395
+
1396
+ .datepicker-nav-year {
1397
+ font-weight: 500 !important;
1398
+ }
1399
+
1400
+ .datetimepicker .datepicker-nav .datepicker-nav-previous,
1401
+ .datetimepicker .datepicker-nav .datepicker-nav-next {
1402
+ border-radius: 3px;
1403
+ color: $wac-main-text !important;
1404
+ width: 25px !important;
1405
+ height: 25px !important;
1406
+ display: flex;
1407
+ justify-content: center;
1408
+ align-items: center;
1409
+ align-content: center;
1410
+ border: 1px solid $wac-border-light;
1411
+ transition: 0.3s ease;
1412
+ > svg {
1413
+ display: none !important;
1414
+ }
1415
+ }
1416
+
1417
+ .datetimepicker .datepicker-nav .datepicker-nav-previous {
1418
+ background: $wac-white
1419
+ url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='chevron-left' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-left fa-w-10 fa-2x'%3E%3Cpath fill='currentColor' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z' class=''%3E%3C/path%3E%3C/svg%3E")
1420
+ center center no-repeat !important;
1421
+ background-size: 6px auto !important;
1422
+ &:hover,
1423
+ &:focus {
1424
+ border-color: $wac-wizishop-blue !important;
1425
+ }
1426
+ }
1427
+
1428
+ .datetimepicker .datepicker-nav .datepicker-nav-next {
1429
+ background: $wac-white
1430
+ url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='chevron-right' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-right fa-w-10 fa-2x'%3E%3Cpath fill='currentColor' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z' class=''%3E%3C/path%3E%3C/svg%3E")
1431
+ center center no-repeat !important;
1432
+ background-size: 6px auto !important;
1433
+ &:hover,
1434
+ &:focus {
1435
+ border-color: $wac-wizishop-blue !important;
1436
+ }
1437
+ }
1056
1438
 
1439
+ .wac-calendar__absolute {
1440
+ .datetimepicker .datepicker-body .datepicker-weekdays {
1441
+ padding: 0 15px;
1442
+ }
1443
+ .datepicker-weekdays {
1444
+ height: 14px;
1445
+ margin: 0 0 rem(12);
1446
+ .datepicker-date {
1447
+ font-size: rem(12);
1448
+ white-space: nowrap;
1449
+ line-height: 1;
1450
+ padding: 0 !important;
1451
+ color: $wac-secondary-color !important;
1452
+ }
1453
+ }
1454
+ .datepicker-days {
1455
+ padding: 0 15px !important;
1456
+ }
1457
+ .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active {
1458
+ background-color: $wac-wizishop-blue;
1459
+ }
1460
+ .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover {
1461
+ border-color: $wac-wizishop-blue;
1462
+ }
1463
+ }
1464
+
1465
+ .datetimepicker .datetimepicker-footer {
1466
+ display: none;
1057
1467
  }
1058
1468
  .wac-state {
1059
1469
  width: 12px;
@@ -1090,461 +1500,216 @@ $wac-color-success-popup-alert: #6DCC95!default;
1090
1500
  }
1091
1501
 
1092
1502
  &:after {
1093
- background-color: $wac-green-color;
1094
- }
1095
- }
1096
-
1097
- &.warning {
1098
- &:before {
1099
- border-color: $wac-warning-color;
1100
- }
1101
-
1102
- &:after {
1103
- background-color: $wac-warning-color;
1104
- }
1105
- }
1106
-
1107
- &.error {
1108
- &:before {
1109
- border-color: $wac-primary-button;
1110
- }
1111
-
1112
- &:after {
1113
- background-color: $wac-primary-button;
1114
- }
1115
- }
1116
- }
1117
- .wac-delete {
1118
- width: 40px;
1119
- height: 40px;
1120
-
1121
- &__wrapper {
1122
- @include flexbox();
1123
- @include justify-content(center);
1124
- @include align-items(center);
1125
- width: 100%;
1126
- height: 100%;
1127
- border-radius: 3px;
1128
- background-color: transparent;
1129
- transition: background-color 0.3s ease-in-out;
1130
-
1131
- i {
1132
- color: $wac-border-form;
1133
- font-size: 14px;
1134
- line-height: 23px;
1135
- transition: color 0.3s ease-in-out;
1136
- }
1137
-
1138
- &:hover {
1139
- background-color: $wac-primary-button;
1140
- transition: background-color 0.3s ease-in-out;
1141
-
1142
- i {
1143
- color: $wac-white;
1144
- transition: color 0.3s ease-in-out;
1145
- }
1146
- }
1147
- }
1148
- }
1149
-
1150
- .wac-switch {
1151
- input {
1152
- display: none;
1153
- &:checked + label {
1154
- &:before {
1155
- background-color: $wac-bleu-color;
1156
- }
1157
- &:after {
1158
- transform: translateY(-50%) translateX(24px) rotate(180deg);
1159
- }
1160
- > span {
1161
- .disable {
1162
- display: none;
1163
- }
1164
- .enable {
1165
- display: block;
1166
- }
1167
- }
1168
- }
1169
- &.danger {
1170
- &:checked + label {
1171
- &:before {
1172
- background-color: $wac-red-color;
1173
- }
1174
- }
1175
- }
1176
- }
1177
- &__label {
1178
- display: block;
1179
- padding: 0 0 0 56px;
1180
- position: relative;
1181
- min-height: 22px;
1182
- min-width: 56px;
1183
- cursor: pointer;
1184
- &:before {
1185
- content: '';
1186
- display: block;
1187
- width: rem(46);
1188
- height: rem(22);
1189
- border-radius: 12px;
1190
- background-color: $wac-border-form;
1191
- position: absolute;
1192
- top: 0;
1193
- left: 0;
1194
- transition: background-color 0.3s ease;
1195
- }
1196
- &:after {
1197
- content: '';
1198
- display: block;
1199
- width: rem(16);
1200
- height: rem(16);
1201
- background-color: $wac-white;
1202
- border-radius: 50%;
1203
- position: absolute;
1204
- left: 3px;
1205
- top: 50%;
1206
- transform: translateY(-50%) translateX(0) rotate(0deg);
1207
- transition: transform 0.3s ease;
1208
- }
1209
- &__text {
1210
- font-size: rem(14);
1211
- line-height: rem(22);
1212
- font-weight: 400;
1213
- color: $wac-main-text;
1214
- &:empty {
1215
- display: none;
1216
- }
1217
- .disable {
1218
- display: block;
1219
- }
1220
- .enable {
1221
- display: none;
1222
- }
1223
- span {
1224
- display: flex;
1225
- align-items: center;
1226
- white-space: nowrap;
1227
- strong {
1228
- margin: 0 0 0 5px;
1229
- font-weight: 600;
1230
- }
1231
- }
1232
- }
1233
- }
1234
- }
1235
-
1236
- .wac-show-input {
1237
- width: 100%;
1238
- margin: 15px 0 0 0;
1239
- input {
1240
- width: 100%;
1241
- height: 40px;
1242
- line-height: 40px;
1243
- padding: 0 20px;
1244
- color: $wac-main-text;
1245
- border-radius: 3px;
1246
- border: 1px solid $wac-border-form;
1247
- &::-webkit-input-placeholder {
1248
- /* Chrome/Opera/Safari */
1249
- color: $wac-color-icon-search-multiple-search;
1250
- opacity: 1;
1251
- font-weight: 400;
1252
- @include media('<tablet') {
1253
- font-size: rem(11);
1254
- }
1255
- }
1256
- &::-moz-placeholder {
1257
- /* Firefox 19+ */
1258
- color: $wac-color-icon-search-multiple-search;
1259
- opacity: 1;
1260
- font-weight: 400;
1261
- @include media('<tablet') {
1262
- font-size: rem(11);
1263
- }
1264
- }
1265
- &:-ms-input-placeholder {
1266
- /* IE 10+ */
1267
- color: $wac-color-icon-search-multiple-search;
1268
- opacity: 1;
1269
- font-weight: 400;
1270
- @include media('<tablet') {
1271
- font-size: rem(11);
1272
- }
1273
- }
1274
- &:-moz-placeholder {
1275
- /* Firefox 18- */
1276
- color: $wac-color-icon-search-multiple-search;
1277
- opacity: 1;
1278
- font-weight: 400;
1279
- @include media('<tablet') {
1280
- font-size: rem(11);
1281
- }
1282
- }
1283
- &:focus {
1284
- &::-webkit-input-placeholder {
1285
- /* Chrome/Opera/Safari */
1286
- color: $wac-white;
1287
- opacity: 1;
1288
- }
1289
- &::-moz-placeholder {
1290
- /* Firefox 19+ */
1291
- color: $wac-white;
1292
- opacity: 1;
1293
- }
1294
- &:-ms-input-placeholder {
1295
- /* IE 10+ */
1296
- color: $wac-white;
1297
- opacity: 1;
1298
- }
1299
- &:-moz-placeholder {
1300
- /* Firefox 18- */
1301
- color: $wac-white;
1302
- opacity: 1;
1303
- }
1304
- }
1305
- }
1306
- }
1307
- .wac-edit-in-place.nwb-wrapper {
1308
- display: inline-block;
1309
- position: relative;
1310
- width: auto;
1311
- min-width: 12px;
1312
- min-height: 1.4em;
1313
-
1314
- input {
1315
- font-size: inherit;
1316
- transition: width 50ms;
1317
- position: absolute;
1318
- top: 0;
1319
- left: -5px;
1320
- width: calc(100% + 16px) !important;
1321
- height: calc(100% + 14px) !important;
1322
- padding: 5px;
1323
- z-index: 1;
1324
- margin: 0;
1325
- outline: none !important;
1326
- border: 1px solid $wac-edit-in-place-border;
1327
- background: inherit;
1328
- transform: translateY(-17%);
1329
- background-color: $wac-edit-in-place-background;
1330
-
1331
- &.nwb-editable {
1332
- text-decoration: none;
1333
- color: inherit;
1334
- border: none;
1335
- cursor: pointer;
1336
- height: 26px;
1337
- }
1338
-
1339
- &.nwb-editing {
1340
- color: $wac-edit-in-place-border;
1341
- }
1342
- }
1343
-
1344
- div.select {
1345
- position: absolute;
1346
- left: 0;
1347
-
1348
- &:before,
1349
- &:after {
1350
- display: block;
1351
- position: absolute;
1352
- height: 10px;
1353
- width: 10px;
1503
+ background-color: $wac-green-color;
1354
1504
  }
1355
1505
  }
1356
1506
 
1357
- span.nwb-loader {
1358
- &.nwb-is-loading {
1359
- z-index: 2;
1360
- opacity: 1;
1361
- position: absolute;
1362
- top: -7px;
1363
- left: -7px;
1364
- width: calc(100% + 16px) !important;
1365
- height: calc(100% + 14px) !important;
1366
- min-width: 12px;
1367
- min-height: 1em;
1368
- margin: 0;
1369
- background-size: auto 70%;
1370
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ellipsis' style='background: none;'%3E%3C!--circle(cx='16',cy='50',r='10')--%3E%3Ccircle cx='84' cy='50' r='0' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='10;0;0;0;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='84;84;84;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='28.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3C/circle%3E%3Ccircle cx='16' cy='50' r='3.71582' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/circle%3E%3Ccircle cx='84' cy='50' r='6.28418' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='62.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;0;10;10;10' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;16;50;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3C/svg%3E");
1371
- background-repeat: no-repeat;
1372
- background-position: center center;
1373
- }
1374
- }
1375
- span {
1376
- color: inherit;
1377
- font-weight: 500;
1378
- &:not(.nwb-loader) {
1379
- display: inline-block;
1380
- min-width: 12px;
1507
+ &.warning {
1508
+ &:before {
1509
+ border-color: $wac-warning-color;
1381
1510
  }
1382
- &.nwb-editing {
1383
- visibility: hidden;
1511
+
1512
+ &:after {
1513
+ background-color: $wac-warning-color;
1384
1514
  }
1515
+ }
1385
1516
 
1386
- &.nwb-is-loading {
1387
- text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
1388
- color: rgba(0, 0, 0, 0.4);
1389
- opacity: 0.25;
1517
+ &.error {
1518
+ &:before {
1519
+ border-color: $wac-primary-button;
1390
1520
  }
1391
1521
 
1392
- &.nwbSelect {
1393
- cursor: pointer;
1522
+ &:after {
1523
+ background-color: $wac-primary-button;
1394
1524
  }
1395
1525
  }
1396
1526
  }
1527
+ .wac-delete {
1528
+ width: 40px;
1529
+ height: 40px;
1397
1530
 
1398
- .wac-edit-in-place.nwb-wrapper--editable::after {
1399
- position: absolute;
1400
- content: '';
1401
- border-bottom: dashed 1px $wac-primary;
1402
- width: 100%;
1403
- bottom: 0;
1404
- left: 0;
1405
- }
1406
-
1407
- .wac-edit-in-place.nwbSelect {
1408
- &__container {
1409
- display: flex;
1410
- flex-direction: column;
1411
- position: absolute;
1412
- white-space: nowrap;
1413
- border: solid 1px rgba(0, 0, 0, 0.2);
1414
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
1531
+ &__wrapper {
1532
+ @include flexbox();
1533
+ @include justify-content(center);
1534
+ @include align-items(center);
1535
+ width: 100%;
1536
+ height: 100%;
1415
1537
  border-radius: 3px;
1416
- top: calc(100% + 7px);
1417
-
1418
- &::before {
1419
- position: absolute;
1420
- top: -7px;
1421
- left: 9px;
1422
- content: '';
1423
- border-left: 7px solid transparent;
1424
- border-right: 7px solid transparent;
1425
- border-bottom: 7px solid $wac-edit-in-place-before-border-bottom;
1426
- border-bottom-color: rgba(0, 0, 0, 0.2);
1427
- display: inline-block;
1428
- }
1538
+ background-color: transparent;
1539
+ transition: background-color 0.3s ease-in-out;
1429
1540
 
1430
- &::after {
1431
- position: absolute;
1432
- top: -6px;
1433
- left: 10px;
1434
- content: '';
1435
- border-left: 6px solid transparent;
1436
- border-right: 6px solid transparent;
1437
- border-bottom: 6px solid $wac-white;
1438
- display: inline-block;
1541
+ i {
1542
+ color: $wac-border-form;
1543
+ font-size: 14px;
1544
+ line-height: 23px;
1545
+ transition: color 0.3s ease-in-out;
1439
1546
  }
1440
1547
 
1441
- &__item {
1442
- border: none;
1443
- padding: 8px 10px;
1444
- background-color: $wac-white;
1445
- cursor: pointer;
1446
- transition: all 0.3s ease-in-out;
1447
- z-index: 3;
1448
- font-size: rem(12);
1449
- text-align: left;
1450
- border-radius: 0;
1451
-
1452
- &:hover {
1453
- background-color: darken($wac-white, 10%);
1454
- color: $wac-main-text;
1455
- transition: all 0.3s ease-in-out;
1456
- }
1548
+ &:hover {
1549
+ background-color: $wac-primary-button;
1550
+ transition: background-color 0.3s ease-in-out;
1457
1551
 
1458
- &--selected,
1459
- &--selected:hover {
1460
- background-color: $wac-wizishop-blue;
1552
+ i {
1461
1553
  color: $wac-white;
1462
- transition: all 0.3s ease-in-out;
1554
+ transition: color 0.3s ease-in-out;
1463
1555
  }
1464
1556
  }
1465
1557
  }
1558
+ }
1466
1559
 
1467
- &__background {
1468
- position: fixed;
1469
- top: 0;
1470
- left: 0;
1471
- width: 100vw;
1472
- height: 100vh;
1473
- z-index: 2;
1560
+ .wac-switch {
1561
+ input {
1562
+ display: none;
1563
+ &:checked + label {
1564
+ &:before {
1565
+ background-color: $wac-bleu-color;
1566
+ }
1567
+ &:after {
1568
+ transform: translateY(-50%) translateX(24px) rotate(180deg);
1569
+ }
1570
+ > span {
1571
+ .disable {
1572
+ display: none;
1573
+ }
1574
+ .enable {
1575
+ display: block;
1576
+ }
1577
+ }
1578
+ }
1579
+ &.danger {
1580
+ &:checked + label {
1581
+ &:before {
1582
+ background-color: $wac-red-color;
1583
+ }
1584
+ }
1585
+ }
1474
1586
  }
1475
- }
1476
- .wac-tab {
1477
- &__wrapper {
1587
+ &__label {
1588
+ display: block;
1589
+ padding: 0 0 0 56px;
1478
1590
  position: relative;
1479
- @include flexbox();
1480
- margin-bottom: 30px;
1481
-
1482
- &__tab {
1483
- position: relative;
1484
- font-size: 14px;
1485
- line-height: 25px;
1486
- color: $wac-secondary-color;
1487
-
1488
- &:hover {
1489
- color: $wac-main-text;
1490
- transition: color 0.3s ease-in-out;
1591
+ min-height: 22px;
1592
+ min-width: 56px;
1593
+ cursor: pointer;
1594
+ &:before {
1595
+ content: '';
1596
+ display: block;
1597
+ width: rem(46);
1598
+ height: rem(22);
1599
+ border-radius: 12px;
1600
+ background-color: $wac-border-form;
1601
+ position: absolute;
1602
+ top: 0;
1603
+ left: 0;
1604
+ transition: background-color 0.3s ease;
1605
+ }
1606
+ &:after {
1607
+ content: '';
1608
+ display: block;
1609
+ width: rem(16);
1610
+ height: rem(16);
1611
+ background-color: $wac-white;
1612
+ border-radius: 50%;
1613
+ position: absolute;
1614
+ left: 3px;
1615
+ top: 50%;
1616
+ transform: translateY(-50%) translateX(0) rotate(0deg);
1617
+ transition: transform 0.3s ease;
1618
+ }
1619
+ &__text {
1620
+ font-size: rem(14);
1621
+ line-height: rem(22);
1622
+ font-weight: 400;
1623
+ color: $wac-main-text;
1624
+ &:empty {
1625
+ display: none;
1491
1626
  }
1492
-
1493
- &:not(:last-child) {
1494
- margin-right: 30px;
1627
+ .disable {
1628
+ display: block;
1629
+ }
1630
+ .enable {
1631
+ display: none;
1632
+ }
1633
+ span {
1634
+ display: flex;
1635
+ align-items: center;
1636
+ white-space: nowrap;
1637
+ strong {
1638
+ margin: 0 0 0 5px;
1639
+ font-weight: 600;
1640
+ }
1495
1641
  }
1642
+ }
1643
+ }
1644
+ }
1496
1645
 
1497
- &:after {
1498
- position: absolute;
1499
- width: 0;
1500
- height: 2px;
1501
- bottom: -5px;
1502
- left: 0;
1503
- content: '';
1504
- background-color: $wac-input-active-color;
1505
- transition: width 0.3s ease-in-out, color 0.3s ease-in-out;
1646
+ .wac-show-input {
1647
+ width: 100%;
1648
+ margin: 15px 0 0 0;
1649
+ input {
1650
+ width: 100%;
1651
+ height: 40px;
1652
+ line-height: 40px;
1653
+ padding: 0 20px;
1654
+ color: $wac-main-text;
1655
+ border-radius: 3px;
1656
+ border: 1px solid $wac-border-form;
1657
+ &::-webkit-input-placeholder {
1658
+ /* Chrome/Opera/Safari */
1659
+ color: $wac-color-icon-search-multiple-search;
1660
+ opacity: 1;
1661
+ font-weight: 400;
1662
+ @include media('<tablet') {
1663
+ font-size: rem(11);
1506
1664
  }
1507
-
1508
- &--selected {
1509
- color: $wac-main-text;
1510
-
1511
- &:after {
1512
- width: 100%;
1513
- transition: width 0.3s ease-in-out, color 0.3s ease-in-out;
1514
- }
1665
+ }
1666
+ &::-moz-placeholder {
1667
+ /* Firefox 19+ */
1668
+ color: $wac-color-icon-search-multiple-search;
1669
+ opacity: 1;
1670
+ font-weight: 400;
1671
+ @include media('<tablet') {
1672
+ font-size: rem(11);
1515
1673
  }
1516
1674
  }
1517
- }
1518
-
1519
- &--underline {
1520
- .wac-tab__wrapper:before {
1521
- position: absolute;
1522
- width: 100%;
1523
- height: 1px;
1524
- bottom: -5px;
1525
- left: 0;
1526
- content: '';
1527
- background-color: $wac-border-form;
1675
+ &:-ms-input-placeholder {
1676
+ /* IE 10+ */
1677
+ color: $wac-color-icon-search-multiple-search;
1678
+ opacity: 1;
1679
+ font-weight: 400;
1680
+ @include media('<tablet') {
1681
+ font-size: rem(11);
1682
+ }
1528
1683
  }
1529
- }
1530
-
1531
- &--button {
1532
- .wac-tab__wrapper__tab {
1533
- background-color: $wac-button-tab-background;
1534
- padding: 12px 20px;
1535
- font-size: rem(14);
1536
- line-height: rem(16);
1537
- white-space: nowrap;
1538
- color: $second-color;
1539
- margin: 0 rem(2) 0 0;
1540
- border-radius: 3px;
1541
- transition: .3s ease;
1542
- &--selected, &:hover, &:focus {
1543
- background-color: $wac-wizishop-blue;
1544
- color: $white;
1684
+ &:-moz-placeholder {
1685
+ /* Firefox 18- */
1686
+ color: $wac-color-icon-search-multiple-search;
1687
+ opacity: 1;
1688
+ font-weight: 400;
1689
+ @include media('<tablet') {
1690
+ font-size: rem(11);
1545
1691
  }
1546
- &:after {
1547
- display: none;
1692
+ }
1693
+ &:focus {
1694
+ &::-webkit-input-placeholder {
1695
+ /* Chrome/Opera/Safari */
1696
+ color: $wac-white;
1697
+ opacity: 1;
1698
+ }
1699
+ &::-moz-placeholder {
1700
+ /* Firefox 19+ */
1701
+ color: $wac-white;
1702
+ opacity: 1;
1703
+ }
1704
+ &:-ms-input-placeholder {
1705
+ /* IE 10+ */
1706
+ color: $wac-white;
1707
+ opacity: 1;
1708
+ }
1709
+ &:-moz-placeholder {
1710
+ /* Firefox 18- */
1711
+ color: $wac-white;
1712
+ opacity: 1;
1548
1713
  }
1549
1714
  }
1550
1715
  }
@@ -1674,19 +1839,178 @@ $wac-color-success-popup-alert: #6DCC95!default;
1674
1839
  }
1675
1840
  }
1676
1841
  }
1677
- &__background {
1678
- z-index: 1;
1679
- position: absolute;
1680
- top: 0;
1681
- left: 0;
1682
- width: 100%;
1683
- height: 100%;
1684
- background-color: transparentize($wac-main-text, .5);
1685
- }
1686
- }
1687
-
1688
- .wac-free-popin .ps-content > * {
1689
- padding-right: 15px;
1842
+ &__background {
1843
+ z-index: 1;
1844
+ position: absolute;
1845
+ top: 0;
1846
+ left: 0;
1847
+ width: 100%;
1848
+ height: 100%;
1849
+ background-color: transparentize($wac-main-text, .5);
1850
+ }
1851
+ }
1852
+
1853
+ .wac-free-popin .ps-content > * {
1854
+ padding-right: 15px;
1855
+ }
1856
+ .wac-tab {
1857
+ &__wrapper {
1858
+ position: relative;
1859
+ @include flexbox();
1860
+ margin-bottom: 30px;
1861
+
1862
+ &__tab {
1863
+ position: relative;
1864
+ font-size: 14px;
1865
+ line-height: 25px;
1866
+ color: $wac-secondary-color;
1867
+
1868
+ &:hover {
1869
+ color: $wac-main-text;
1870
+ transition: color 0.3s ease-in-out;
1871
+ }
1872
+
1873
+ &:not(:last-child) {
1874
+ margin-right: 30px;
1875
+ }
1876
+
1877
+ &:after {
1878
+ position: absolute;
1879
+ width: 0;
1880
+ height: 2px;
1881
+ bottom: -5px;
1882
+ left: 0;
1883
+ content: '';
1884
+ background-color: $wac-input-active-color;
1885
+ transition: width 0.3s ease-in-out, color 0.3s ease-in-out;
1886
+ }
1887
+
1888
+ &--selected {
1889
+ color: $wac-main-text;
1890
+
1891
+ &:after {
1892
+ width: 100%;
1893
+ transition: width 0.3s ease-in-out, color 0.3s ease-in-out;
1894
+ }
1895
+ }
1896
+ }
1897
+ }
1898
+
1899
+ &--underline {
1900
+ .wac-tab__wrapper:before {
1901
+ position: absolute;
1902
+ width: 100%;
1903
+ height: 1px;
1904
+ bottom: -5px;
1905
+ left: 0;
1906
+ content: '';
1907
+ background-color: $wac-border-form;
1908
+ }
1909
+ }
1910
+
1911
+ &--button {
1912
+ .wac-tab__wrapper__tab {
1913
+ background-color: $wac-button-tab-background;
1914
+ padding: 12px 20px;
1915
+ font-size: rem(14);
1916
+ line-height: rem(16);
1917
+ white-space: nowrap;
1918
+ color: $second-color;
1919
+ margin: 0 rem(2) 0 0;
1920
+ border-radius: 3px;
1921
+ transition: .3s ease;
1922
+ &--selected, &:hover, &:focus {
1923
+ background-color: $wac-wizishop-blue;
1924
+ color: $white;
1925
+ }
1926
+ &:after {
1927
+ display: none;
1928
+ }
1929
+ }
1930
+ }
1931
+ }
1932
+ .wac-filters {
1933
+ width: 100%;
1934
+ &__wrapper {
1935
+ width: 100%;
1936
+ display: flex;
1937
+ flex-wrap: wrap;
1938
+ justify-content: flex-start;
1939
+ align-items: center;
1940
+ align-content: center;
1941
+ button {
1942
+ position: relative;
1943
+ width: auto;
1944
+ display: flex;
1945
+ align-items: center;
1946
+ font-size: rem(14);
1947
+ line-height: rem(16);
1948
+ font-weight: 400;
1949
+ color: $wac-second-color;
1950
+ border: 1px solid $wac-border-light;
1951
+ border-radius: 3px;
1952
+ background: transparent;
1953
+ box-shadow: none;
1954
+ margin-bottom: rem(10);
1955
+ transition: 0.3s ease;
1956
+ cursor: pointer;
1957
+ padding: 12px 20px;
1958
+ .event {
1959
+ position: absolute;
1960
+ top: 0;
1961
+ left: 0;
1962
+ width: 100%;
1963
+ height: 100%;
1964
+ z-index: 2;
1965
+ display: inline-block;
1966
+ }
1967
+ i {
1968
+ color: $wac-main-text;
1969
+ font-size: rem(14);
1970
+ margin: 0 rem(10) 0 0;
1971
+ }
1972
+ &:hover,
1973
+ &:focus,
1974
+ &.active {
1975
+ border-color: $wac-wizishop-blue;
1976
+ color: $wac-main-text;
1977
+ }
1978
+ &:not(:last-child) {
1979
+ margin: 0 rem(10) rem(10) 0;
1980
+ }
1981
+ }
1982
+ > span {
1983
+ position: relative;
1984
+ color: $wac-link-color;
1985
+ display: inline-block;
1986
+ transition: 0.3s ease;
1987
+ font-size: rem(14);
1988
+ line-height: rem(16);
1989
+ margin: 0 0 0 rem(30);
1990
+ cursor: pointer;
1991
+ z-index: 1;
1992
+ &:before {
1993
+ content: '';
1994
+ display: block;
1995
+ position: absolute;
1996
+ width: 100%;
1997
+ max-width: 0;
1998
+ height: 1px;
1999
+ border-radius: 3px;
2000
+ background-color: darken($wac-link-color, 15%);
2001
+ left: 0;
2002
+ bottom: -2px;
2003
+ transition: 0.3s ease;
2004
+ }
2005
+ &:hover,
2006
+ &:focus {
2007
+ color: darken($wac-link-color, 15%);
2008
+ &:before {
2009
+ max-width: 100%;
2010
+ }
2011
+ }
2012
+ }
2013
+ }
1690
2014
  }
1691
2015
  .wac-table {
1692
2016
  width: 100%;
@@ -2117,6 +2441,12 @@ $wac-color-success-popup-alert: #6DCC95!default;
2117
2441
  font-weight: 500 !important;
2118
2442
  margin-bottom: 0;
2119
2443
  }
2444
+
2445
+ textarea {
2446
+ &.is-danger {
2447
+ border-color: $wac-primary-button !important;
2448
+ }
2449
+ }
2120
2450
  textarea:focus {
2121
2451
  border-color: $wizishop-blue !important;
2122
2452
 
@@ -3630,1379 +3960,986 @@ span.wac-tooltip {
3630
3960
  background-color: $wac-primary-button-disabled;
3631
3961
  border-color: $wac-primary-button-disabled;
3632
3962
  }
3633
- }
3634
- }
3635
-
3636
- &.is-success {
3637
- background-color: $wac-green-color;
3638
- border-color: $wac-green-color;
3639
- transition: background-color 0.3s ease-in-out;
3640
-
3641
- .wac-button__loader {
3642
- background-color: $wac-green-color-darken;
3643
- }
3644
-
3645
- &:hover,
3646
- &.hover {
3647
- background-color: $wac-green-color-darken;
3648
- border-color: $wac-green-color-darken;
3649
- transition: background-color 0.3s ease-in-out;
3650
- }
3651
-
3652
- &:focus,
3653
- &.focus {
3654
- background-color: $wac-green-color-focus;
3655
- border-color: $wac-green-color-focus;
3656
- transition: background-color 0.3s ease-in-out;
3657
- }
3658
-
3659
- &.is-outlined {
3660
- background-color: transparent;
3661
- border-color: $wac-green-color;
3662
-
3663
- .wac-button__wrapper, .wac-button__animation {
3664
- color: $wac-green-color;
3665
- transition: color 0.3s ease-in-out;
3666
- }
3667
-
3668
- &:hover,
3669
- &.hover {
3670
- background-color: $wac-green-color;
3671
- border-color: $wac-green-color;
3672
- }
3673
-
3674
- &:focus,
3675
- &.focus {
3676
- background-color: $wac-green-color-focus;
3677
- border-color: $wac-green-color-focus;
3678
- transition: background-color 0.3s ease-in-out;
3679
- }
3680
- }
3681
-
3682
- &.is-loading {
3683
- &:hover,
3684
- &.hover {
3685
- background-color: $wac-green-color;
3686
- transition: background-color 0.3s ease-in-out;
3687
- }
3688
- }
3689
- &.opacity {
3690
- background-color: $wac-green-opacity;
3691
- border-color: $wac-green-opacity;
3692
- &:hover, &:focus {
3693
- background-color: $wac-green-color;
3694
- border-color: $wac-green-color;
3695
- }
3696
- }
3697
- &.disabled {
3698
- background-color: $wac-green-color-disabled;
3699
- border-color: $wac-green-color-disabled;
3700
- transition: 0s;
3701
- cursor: default;
3702
-
3703
- .wac-button__wrapper, .wac-button__animation {
3704
- color: $wac-white;
3705
- }
3706
-
3707
- &:hover,
3708
- &:focus,
3709
- &.hover,
3710
- &.focus {
3711
- background-color: $wac-green-color-disabled;
3712
- }
3713
- }
3714
- }
3715
-
3716
- &.is-light {
3717
- background-color: transparent;
3718
- border-color: $wac-border-color;
3719
- transition: background-color 0.3s ease-in-out;
3720
-
3721
- .wac-button__loader {
3722
- background-color: $wac-hover-btn-grey;
3723
- }
3724
-
3725
- .wac-button__wrapper, .wac-button__animation {
3726
- color: $wac-secondary-color;
3727
- }
3728
-
3729
- &:hover,
3730
- &.hover {
3731
- background-color: $wac-hover-btn-grey;
3732
- transition: background-color 0.3s ease-in-out;
3733
- }
3734
-
3735
- &.is-loading {
3736
- &:hover,
3737
- &.hover {
3738
- background-color: transparent;
3739
- transition: background-color 0.3s ease-in-out;
3740
- }
3741
- }
3742
- }
3743
-
3744
- &.disabled {
3745
- background-color: $wac-disabled-button-background;
3746
- border-color: $wac-border-form;
3747
-
3748
- .wac-button__wrapper, .wac-button__animation {
3749
- color: $wac-disabled-button-text;
3750
- }
3751
- }
3752
-
3753
- &.is-outlined {
3754
- &:hover,
3755
- &.hover {
3756
- .wac-button__wrapper, .wac-button__animation {
3757
- color: $wac-white;
3758
- transition: color 0.3s ease-in-out;
3759
- }
3760
- }
3761
- }
3762
-
3763
- &__loader {
3764
- position: absolute;
3765
- left: -1px;
3766
- top: 0;
3767
- height: 100%;
3768
- z-index: 1;
3769
- transition: width 0.3s ease-in-out;
3770
- overflow: hidden;
3771
-
3772
- span {
3773
- position: absolute;
3774
- left: 20px;
3775
- top: 7px;
3776
- color: $wac-white;
3777
- overflow: hidden;
3778
- text-overflow: clip;
3779
- font-size: 14px;
3780
- line-height: 26px;
3781
- white-space: nowrap;
3782
- z-index: 3;
3783
-
3784
- i {
3785
- margin-right: 1.4px;
3786
- }
3787
- }
3788
-
3789
- &.outlined {
3790
- z-index: 4;
3791
- }
3792
- }
3793
-
3794
- &.alone {
3795
- .wac-button__loader span {
3796
- left: 14.6px;
3797
- }
3798
- }
3799
-
3800
- &.opacity {
3801
- min-width: rem(40);
3802
- min-height: rem(40);
3803
-
3804
- &.alone {
3805
- display: flex;
3806
- align-items: center;
3807
- justify-content: center;
3808
- }
3809
-
3810
- &.is-success {
3811
- i {
3812
- color: $wac-green-color!important;
3813
- }
3814
- &:hover, &:focus {
3815
- i {
3816
- color: $wac-white!important;
3817
- }
3818
- }
3819
- }
3820
-
3821
- &.is-danger {
3822
- i {
3823
- color: $wac-primary-button!important;
3824
- }
3825
- &:hover, &:focus {
3826
- i {
3827
- color: $wac-white!important;
3828
- }
3829
- }
3830
- }
3831
- }
3832
- }
3833
- .wac-wrapper-blocs {
3834
- &.sidebar {
3835
- width: calc(100% + 30px);
3836
- transform: translateX(-15px);
3837
- display: flex;
3838
- flex-wrap: nowrap;
3839
- align-items: flex-start;
3840
- align-content: flex-start;
3841
- & > :first-child {
3842
- @include media('>=desktop') {
3843
- width: 100%;
3844
- }
3845
- }
3846
- & > :last-child:not(:first-child) {
3847
- min-width: 340px;
3848
- }
3849
- & > * {
3850
- margin: 0 15px;
3851
- }
3852
- }
3853
- }
3854
- .wac-dropdown {
3855
- display: inline-block;
3856
- width: 40px;
3857
- height: 40px;
3858
-
3859
- &__wrapper {
3860
- @include flexbox();
3861
- @include justify-content(center);
3862
- @include align-items(center);
3863
- width: 100%;
3864
- height: 100%;
3865
- position: relative;
3963
+ }
3964
+ }
3866
3965
 
3867
- &__icon {
3868
- font-size: 30px;
3869
- line-height: 18px;
3870
- color: $wac-second-color;
3871
- transition: color 0.3s ease, transform 0.3s ease;
3966
+ &.is-success {
3967
+ background-color: $wac-green-color;
3968
+ border-color: $wac-green-color;
3969
+ transition: background-color 0.3s ease-in-out;
3970
+
3971
+ .wac-button__loader {
3972
+ background-color: $wac-green-color-darken;
3872
3973
  }
3873
3974
 
3874
- &__sublevel {
3875
- position: absolute;
3876
- min-width: 160px;
3877
- top: 100%;
3878
- right: 0;
3879
- z-index: -1;
3880
- opacity: 0;
3881
- background-color: $wac-white;
3882
- border-radius: rem(3);
3883
- box-shadow: 0px 2px 5px $wac-info-box-shadow;
3884
- visibility: hidden;
3885
- transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
3975
+ &:hover,
3976
+ &.hover {
3977
+ background-color: $wac-green-color-darken;
3978
+ border-color: $wac-green-color-darken;
3979
+ transition: background-color 0.3s ease-in-out;
3980
+ }
3886
3981
 
3887
- &__container {
3888
- padding: 10px 10px;
3889
- border: 1px solid $wac-border-color;
3890
- border-radius: 3px;
3982
+ &:focus,
3983
+ &.focus {
3984
+ background-color: $wac-green-color-focus;
3985
+ border-color: $wac-green-color-focus;
3986
+ transition: background-color 0.3s ease-in-out;
3987
+ }
3891
3988
 
3892
- &__item {
3893
- padding: 5.7px 10px;
3894
- font-size: 14px;
3895
- line-height: 24px;
3896
- color: $wac-second-color;
3897
- cursor: pointer;
3898
- transition: background-color 0.3s ease, color 0.3s ease;
3899
- display: flex;
3900
- justify-content: flex-start;
3901
- align-items: center;
3902
- align-content: center;
3989
+ &.is-outlined {
3990
+ background-color: transparent;
3991
+ border-color: $wac-green-color;
3903
3992
 
3904
- i {
3905
- min-width: 15px;
3906
- margin-right: 5px;
3907
- text-align: center;
3908
- }
3909
- span {
3910
- white-space: nowrap;
3911
- }
3993
+ .wac-button__wrapper, .wac-button__animation {
3994
+ color: $wac-green-color;
3995
+ transition: color 0.3s ease-in-out;
3996
+ }
3912
3997
 
3913
- &:hover {
3914
- background-color: $wac-gray-background;
3915
- transition: background-color 0.3s ease, color 0.3s ease;
3916
- color: $wac-input-active-color;
3917
- }
3918
- }
3998
+ &:hover,
3999
+ &.hover {
4000
+ background-color: $wac-green-color;
4001
+ border-color: $wac-green-color;
3919
4002
  }
3920
- }
3921
4003
 
3922
- &:hover {
3923
- .wac-dropdown__wrapper__icon {
3924
- color: $wac-wizishop-blue;
3925
- transform: rotate(90deg);
3926
- transition: color 0.3s ease, transform 0.3s ease;
4004
+ &:focus,
4005
+ &.focus {
4006
+ background-color: $wac-green-color-focus;
4007
+ border-color: $wac-green-color-focus;
4008
+ transition: background-color 0.3s ease-in-out;
3927
4009
  }
4010
+ }
3928
4011
 
3929
- .wac-dropdown__wrapper__sublevel {
3930
- visibility: visible;
3931
- opacity: 1;
3932
- z-index: 2;
3933
- transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
4012
+ &.is-loading {
4013
+ &:hover,
4014
+ &.hover {
4015
+ background-color: $wac-green-color;
4016
+ transition: background-color 0.3s ease-in-out;
3934
4017
  }
3935
4018
  }
3936
- }
3937
- }
3938
- h1.wac-h1 {
3939
- font-size: rem(30);
3940
- line-height: rem(35);
3941
- font-weight: 600;
3942
- color: $wac-main-text;
3943
- @include media('<desktop') {
3944
- font-size: rem(22);
3945
- line-height: rem(30);
3946
- }
3947
- }
3948
- .wac-header-page {
3949
- width: 100%;
3950
- background-color: transparent;
3951
- position: relative;
3952
- z-index: 2;
3953
- &__maxWidth {
3954
- width: 100%;
3955
- margin: 0 auto;
3956
- &__top {
3957
- width: 100%;
3958
- display: flex;
3959
- justify-content: space-between;
3960
- align-items: center;
3961
- margin: 0 0 27px;
3962
- @include media('<tablet') {
3963
- flex-wrap: wrap;
3964
- justify-content: flex-start;
3965
- align-items: flex-start;
3966
- margin: 0;
4019
+ &.opacity {
4020
+ background-color: $wac-green-opacity;
4021
+ border-color: $wac-green-opacity;
4022
+ &:hover, &:focus {
4023
+ background-color: $wac-green-color;
4024
+ border-color: $wac-green-color;
3967
4025
  }
3968
- &__left {
3969
- width: auto;
3970
- display: flex;
3971
- align-items: center;
3972
- align-content: center;
3973
- margin: 0 10px 0 0;
3974
- @include media('<tablet') {
3975
- width: 100%;
3976
- margin: 0 0 30px;
3977
- }
3978
- a {
3979
- display: flex;
3980
- min-width: 40px;
3981
- height: 40px;
3982
- border-radius: 3px;
3983
- border: 1px solid $wac-border-light;
3984
- margin: 0 20px 0 0;
3985
- transition: 0.3s ease;
3986
- justify-content: center;
3987
- align-items: center;
3988
- i {
3989
- font-size: rem(12);
3990
- font-weight: 400;
3991
- color: $wac-second-color;
3992
- }
3993
- &:hover,
3994
- &:focus {
3995
- background-color: $wizishop-blue;
3996
- border-color: $wizishop-blue;
3997
- i {
3998
- color: $white;
3999
- }
4000
- }
4001
- & + * {
4002
- @include media('>=tablet') {
4003
- white-space: nowrap;
4004
- }
4005
- }
4006
- }
4026
+ }
4027
+ &.disabled {
4028
+ background-color: $wac-green-color-disabled;
4029
+ border-color: $wac-green-color-disabled;
4030
+ transition: 0s;
4031
+ cursor: default;
4032
+
4033
+ .wac-button__wrapper, .wac-button__animation {
4034
+ color: $wac-white;
4007
4035
  }
4008
- &__right {
4009
- width: 100%;
4010
- display: flex;
4011
- justify-content: flex-end;
4012
- align-items: center;
4013
- align-content: center;
4014
- margin: 0 0 0 10px;
4015
- @include media('<tablet') {
4016
- width: 100%;
4017
- margin: 0;
4018
- justify-content: center;
4019
- }
4020
- > * {
4021
- &:not(:last-child) {
4022
- margin: 0 20px 0 0;
4023
- }
4024
- }
4036
+
4037
+ &:hover,
4038
+ &:focus,
4039
+ &.hover,
4040
+ &.focus {
4041
+ background-color: $wac-green-color-disabled;
4025
4042
  }
4026
4043
  }
4027
4044
  }
4028
- }
4029
- h2.wac-h2 {
4030
- font-size: rem(18);
4031
- line-height: rem(21);
4032
- font-weight: 500;
4033
- color: $wac-main-text;
4034
- }a.wac-link {
4035
- position: relative;
4036
- color: $wac-link-color;
4037
- display: inline-block;
4038
- transition: 0.3s ease;
4039
- font-size: rem(14);
4040
- line-height: rem(16);
4041
- &:before {
4042
- content: '';
4043
- display: block;
4044
- position: absolute;
4045
- width: 100%;
4046
- max-width: 0;
4047
- height: 1px;
4048
- border-radius: 3px;
4049
- background-color: darken($wac-link-color, 15%);
4050
- left: 0;
4051
- bottom: -2px;
4052
- transition: 0.3s ease;
4045
+
4046
+ &.is-light {
4047
+ background-color: transparent;
4048
+ border-color: $wac-border-color;
4049
+ transition: background-color 0.3s ease-in-out;
4050
+
4051
+ .wac-button__loader {
4052
+ background-color: $wac-hover-btn-grey;
4053
+ }
4054
+
4055
+ .wac-button__wrapper, .wac-button__animation {
4056
+ color: $wac-secondary-color;
4057
+ }
4058
+
4059
+ &:hover,
4060
+ &.hover {
4061
+ background-color: $wac-hover-btn-grey;
4062
+ transition: background-color 0.3s ease-in-out;
4063
+ }
4064
+
4065
+ &.is-loading {
4066
+ &:hover,
4067
+ &.hover {
4068
+ background-color: transparent;
4069
+ transition: background-color 0.3s ease-in-out;
4070
+ }
4071
+ }
4053
4072
  }
4054
- &:hover,
4055
- &:focus {
4056
- color: darken($wac-link-color, 15%);
4057
- &:before {
4058
- max-width: 100%;
4073
+
4074
+ &.disabled {
4075
+ background-color: $wac-disabled-button-background;
4076
+ border-color: $wac-border-form;
4077
+
4078
+ .wac-button__wrapper, .wac-button__animation {
4079
+ color: $wac-disabled-button-text;
4059
4080
  }
4060
4081
  }
4061
- }
4062
- h3.wac-h3 {
4063
- font-size: rem(16);
4064
- line-height: rem(19);
4065
- font-weight: 500;
4066
- color: $wac-main-text;
4067
- &.grey {
4068
- color: $wac-second-color;
4082
+
4083
+ &.is-outlined {
4084
+ &:hover,
4085
+ &.hover {
4086
+ .wac-button__wrapper, .wac-button__animation {
4087
+ color: $wac-white;
4088
+ transition: color 0.3s ease-in-out;
4089
+ }
4090
+ }
4069
4091
  }
4070
- }
4071
- .wac-multiple-search-plus {
4072
4092
 
4073
- &__wrapper {
4074
- margin: rem(14) 0;
4075
- width: fit-content;
4093
+ &__loader {
4094
+ position: absolute;
4095
+ left: -1px;
4096
+ top: 0;
4097
+ height: 100%;
4098
+ z-index: 1;
4099
+ transition: width 0.3s ease-in-out;
4100
+ overflow: hidden;
4076
4101
 
4077
- &__block {
4102
+ span {
4103
+ position: absolute;
4104
+ left: 20px;
4105
+ top: 7px;
4106
+ color: $wac-white;
4107
+ overflow: hidden;
4108
+ text-overflow: clip;
4109
+ font-size: 14px;
4110
+ line-height: 26px;
4111
+ white-space: nowrap;
4112
+ z-index: 3;
4113
+
4114
+ i {
4115
+ margin-right: 1.4px;
4116
+ }
4117
+ }
4118
+
4119
+ &.outlined {
4120
+ z-index: 4;
4121
+ }
4122
+ }
4123
+
4124
+ &.alone {
4125
+ .wac-button__loader span {
4126
+ left: 14.6px;
4127
+ }
4128
+ }
4129
+
4130
+ &.opacity {
4131
+ min-width: rem(40);
4132
+ min-height: rem(40);
4078
4133
 
4134
+ &.alone {
4079
4135
  display: flex;
4080
4136
  align-items: center;
4081
- justify-content: space-between;
4082
- align-content: center;
4083
- color: $wac-white;
4084
- font-size: rem(14);
4085
- line-height: rem(16);
4086
- border-radius: rem(3);
4087
- padding: rem(8) rem(15);
4088
- font-weight: 500;
4089
- transition: 0.3s ease;
4090
- margin: rem(10) 0;
4137
+ justify-content: center;
4138
+ }
4091
4139
 
4092
- .wac-text {
4093
- margin: 0;
4140
+ &.is-success {
4141
+ i {
4142
+ color: $wac-green-color!important;
4094
4143
  }
4095
-
4096
- :nth-child(n){
4097
- padding: 0 3px;
4144
+ &:hover, &:focus {
4145
+ i {
4146
+ color: $wac-white!important;
4147
+ }
4098
4148
  }
4149
+ }
4099
4150
 
4151
+ &.is-danger {
4100
4152
  i {
4101
- color: $wac-white;
4102
- font-weight: 400;
4103
- margin: 0 0 0 rem(15);
4104
- font-size: rem(13);
4105
- cursor: pointer;
4153
+ color: $wac-primary-button!important;
4106
4154
  }
4107
-
4108
- &.default {
4109
- background-color: $wac-tag-default;
4110
- border: 1px solid $wac-border-light;
4111
- color: $wac-second-color;
4112
- font-weight: 400;
4155
+ &:hover, &:focus {
4113
4156
  i {
4114
- color: $wac-border-form;
4115
- }
4116
- &.hover:hover,
4117
- &.hover:focus {
4118
- background-color: darken($wac-tag-default, 15%);
4119
- color: $wac-main-text;
4120
- i {
4121
- color: $wac-main-text;
4122
- }
4157
+ color: $wac-white!important;
4123
4158
  }
4124
4159
  }
4125
-
4126
4160
  }
4127
4161
  }
4128
-
4129
4162
  }
4130
-
4131
- .wac-multiple-search {
4132
- width: 100%;
4133
- min-height: 50px;
4134
- border-radius: 3px;
4135
- background-color: $wac-white;
4136
- position: relative;
4137
- z-index: 2;
4138
- border: 1px solid $wac-border-light;
4139
- transition: 0.3s ease;
4140
- &.open {
4141
- border-color: $wac-wizishop-blue;
4142
- }
4143
- &__wrapper {
4144
- position: relative;
4163
+ .wac-wrapper-blocs {
4164
+ &.sidebar {
4165
+ width: calc(100% + 30px);
4166
+ transform: translateX(-15px);
4145
4167
  display: flex;
4146
- justify-content: space-between;
4147
- align-items: stretch;
4148
- align-content: stretch;
4149
4168
  flex-wrap: nowrap;
4150
- @include media('<tablet') {
4151
- padding: 0 12px;
4152
- }
4153
- &__left {
4154
- width: auto;
4155
- display: flex;
4156
- justify-content: space-between;
4157
- align-content: center;
4158
- align-items: center;
4159
- flex-wrap: nowrap;
4160
- position: relative;
4161
- min-height: 50px;
4162
- transition: background-color 0.3s ease;
4163
- background-color: $wac-select-icon-background;
4164
- &__background {
4165
- position: absolute;
4169
+ align-items: flex-start;
4170
+ align-content: flex-start;
4171
+ & > :first-child {
4172
+ @include media('>=desktop') {
4166
4173
  width: 100%;
4167
- left: 0;
4168
- top: 0;
4169
- height: 100%;
4170
- opacity: 0;
4171
- z-index: 4;
4172
- transition: opacity 0.3s ease;
4173
- cursor: pointer;
4174
- }
4175
- > span {
4176
- color: $wac-second-color;
4177
- white-space: nowrap;
4178
- font-size: rem(14);
4179
- line-height: rem(16);
4180
- margin: 0 40px 0 20px;
4181
- transition: 0.3s ease;
4182
- position: relative;
4183
- z-index: 2;
4184
- cursor: pointer;
4185
- @include media('<tablet') {
4186
- text-indent: -9999999px;
4187
- margin: 0;
4188
- width: 11px;
4189
- }
4190
- }
4191
- > i {
4192
- transition: 0.3s ease;
4193
- position: relative;
4194
- z-index: 2;
4195
- cursor: pointer;
4196
- &:nth-child(2) {
4197
- font-size: rem(10);
4198
- color: $wac-main-text;
4199
- margin: 0 20px 0 0;
4200
- @include media('<tablet') {
4201
- margin: 0 10px 0 0;
4202
- }
4203
- }
4204
4174
  }
4205
- &__select {
4206
- position: absolute;
4207
- top: 50px;
4208
- width: 100%;
4209
- left: 0;
4210
- margin-top: 11px;
4211
- background-color: $wac-white;
4212
- z-index: 3;
4213
- box-shadow: 3px 3px 20px $wac-multiple-search-box-shadow;
4175
+ }
4176
+ & > :last-child:not(:first-child) {
4177
+ min-width: 340px;
4178
+ }
4179
+ & > * {
4180
+ margin: 0 15px;
4181
+ }
4182
+ }
4183
+ }
4184
+ .wac-dropdown {
4185
+ display: inline-block;
4186
+ width: 40px;
4187
+ height: 40px;
4188
+
4189
+ &__wrapper {
4190
+ @include flexbox();
4191
+ @include justify-content(center);
4192
+ @include align-items(center);
4193
+ width: 100%;
4194
+ height: 100%;
4195
+ position: relative;
4196
+
4197
+ &__icon {
4198
+ font-size: 30px;
4199
+ line-height: 18px;
4200
+ color: $wac-second-color;
4201
+ transition: color 0.3s ease, transform 0.3s ease;
4202
+ }
4203
+
4204
+ &__sublevel {
4205
+ position: absolute;
4206
+ min-width: 160px;
4207
+ top: 100%;
4208
+ right: 0;
4209
+ z-index: -1;
4210
+ opacity: 0;
4211
+ background-color: $wac-white;
4212
+ border-radius: rem(3);
4213
+ box-shadow: 0px 2px 5px $wac-info-box-shadow;
4214
+ visibility: hidden;
4215
+ transition: opacity 0.15s ease, z-index 0.15s ease, visibility 0s linear .16s;
4216
+
4217
+ &__container {
4218
+ padding: 10px 10px;
4219
+ border: 1px solid $wac-border-color;
4214
4220
  border-radius: 3px;
4215
- border: 1px solid $wac-border-light;
4216
- padding: 10px;
4217
- min-width: 340px;
4221
+
4218
4222
  &__item {
4219
- display: inline-flex;
4220
- width: 100%;
4221
- font-size: rem(14);
4222
- line-height: rem(30);
4223
+ padding: 5.7px 10px;
4224
+ font-size: 14px;
4225
+ line-height: 24px;
4226
+ color: $wac-second-color;
4223
4227
  cursor: pointer;
4224
- transition: 0.3s ease;
4225
- position: relative;
4226
- padding: 0 10px;
4227
- .wac-text {
4228
- margin: 0;
4229
- }
4230
- :nth-child(n) {
4231
- padding: 2px;
4232
- }
4233
- &:nth-child(2n) {
4234
- background-color: $wac-gray-background;
4235
- }
4236
- &:not(:last-child) {
4237
- margin: 0 0 rem(10);
4228
+ transition: background-color 0.3s ease, color 0.3s ease;
4229
+ display: flex;
4230
+ justify-content: flex-start;
4231
+ align-items: center;
4232
+ align-content: center;
4233
+
4234
+ i {
4235
+ min-width: 15px;
4236
+ margin-right: 5px;
4237
+ text-align: center;
4238
4238
  }
4239
4239
  span {
4240
- color: $wac-main-text;
4241
- font-size: rem(12);
4242
- text-align: left;
4240
+ white-space: nowrap;
4243
4241
  }
4244
- &:hover,
4245
- &:focus {
4246
- background-color: darken($wac-gray-background, 15%);
4247
- color: $wac-main-text;
4242
+
4243
+ &:hover {
4244
+ background-color: $wac-gray-background;
4245
+ transition: background-color 0.3s ease, color 0.3s ease;
4246
+ color: $wac-input-active-color;
4248
4247
  }
4249
4248
  }
4250
4249
  }
4251
- &:hover,
4252
- &:focus,
4253
- &.open {
4254
- background-color: $wac-hover-multiple-search;
4250
+ }
4251
+
4252
+ &:hover {
4253
+ .wac-dropdown__wrapper__icon {
4254
+ color: $wac-wizishop-blue;
4255
+ transform: rotate(90deg);
4256
+ transition: color 0.3s ease, transform 0.3s ease;
4257
+ }
4258
+
4259
+ .wac-dropdown__wrapper__sublevel {
4260
+ visibility: visible;
4261
+ opacity: 1;
4262
+ z-index: 2;
4263
+ transition: visibility 0s ease 0s, opacity 0.3s ease .1s;
4255
4264
  }
4256
4265
  }
4257
- &__right {
4266
+ }
4267
+ }
4268
+ h1.wac-h1 {
4269
+ font-size: rem(30);
4270
+ line-height: rem(35);
4271
+ font-weight: 600;
4272
+ color: $wac-main-text;
4273
+ @include media('<desktop') {
4274
+ font-size: rem(22);
4275
+ line-height: rem(30);
4276
+ }
4277
+ }
4278
+ .wac-header-page {
4279
+ width: 100%;
4280
+ background-color: transparent;
4281
+ position: relative;
4282
+ z-index: 2;
4283
+ &__maxWidth {
4284
+ width: 100%;
4285
+ margin: 0 auto;
4286
+ &__top {
4258
4287
  width: 100%;
4259
- min-height: 50px;
4260
- position: relative;
4261
- form {
4262
- width: 100%;
4288
+ display: flex;
4289
+ justify-content: space-between;
4290
+ align-items: center;
4291
+ margin: 0 0 27px;
4292
+ @include media('<tablet') {
4293
+ flex-wrap: wrap;
4294
+ justify-content: flex-start;
4295
+ align-items: flex-start;
4296
+ margin: 0;
4263
4297
  }
4264
- input {
4265
- background: transparent;
4266
- border: none;
4267
- color: $wac-main-text;
4268
- font-size: rem(14);
4269
- height: 50px;
4270
- line-height: 50px;
4271
- padding: 0 20px 0 48px;
4272
- font-weight: 400;
4273
- width: 100%;
4298
+ &__left {
4299
+ width: auto;
4300
+ display: flex;
4301
+ align-items: center;
4302
+ align-content: center;
4303
+ margin: 0 10px 0 0;
4274
4304
  @include media('<tablet') {
4275
- padding: 0 0 0 10px;
4276
- }
4277
- &::-webkit-input-placeholder {
4278
- /* Chrome/Opera/Safari */
4279
- color: $wac-multiple-search-input-color;
4280
- opacity: 1;
4281
- font-weight: 400;
4282
- @include media('<tablet') {
4283
- font-size: rem(11);
4284
- }
4285
- }
4286
- &::-moz-placeholder {
4287
- /* Firefox 19+ */
4288
- color: $wac-multiple-search-input-color;
4289
- opacity: 1;
4290
- font-weight: 400;
4291
- @include media('<tablet') {
4292
- font-size: rem(11);
4293
- }
4294
- }
4295
- &:-ms-input-placeholder {
4296
- /* IE 10+ */
4297
- color: $wac-multiple-search-input-color;
4298
- opacity: 1;
4299
- font-weight: 400;
4300
- @include media('<tablet') {
4301
- font-size: rem(11);
4302
- }
4303
- }
4304
- &:-moz-placeholder {
4305
- /* Firefox 18- */
4306
- color: $wac-multiple-search-input-color;
4307
- opacity: 1;
4308
- font-weight: 400;
4309
- @include media('<tablet') {
4310
- font-size: rem(11);
4311
- }
4305
+ width: 100%;
4306
+ margin: 0 0 30px;
4312
4307
  }
4313
- &:focus {
4314
- & + button i {
4315
- color: $wac-main-text;
4316
- }
4317
- &::-webkit-input-placeholder {
4318
- /* Chrome/Opera/Safari */
4319
- color: $wac-white;
4320
- opacity: 1;
4321
- }
4322
- &::-moz-placeholder {
4323
- /* Firefox 19+ */
4324
- color: $wac-white;
4325
- opacity: 1;
4308
+ a {
4309
+ display: flex;
4310
+ min-width: 40px;
4311
+ height: 40px;
4312
+ border-radius: 3px;
4313
+ border: 1px solid $wac-border-light;
4314
+ margin: 0 20px 0 0;
4315
+ transition: 0.3s ease;
4316
+ justify-content: center;
4317
+ align-items: center;
4318
+ i {
4319
+ font-size: rem(12);
4320
+ font-weight: 400;
4321
+ color: $wac-second-color;
4326
4322
  }
4327
- &:-ms-input-placeholder {
4328
- /* IE 10+ */
4329
- color: $wac-white;
4330
- opacity: 1;
4323
+ &:hover,
4324
+ &:focus {
4325
+ background-color: $wizishop-blue;
4326
+ border-color: $wizishop-blue;
4327
+ i {
4328
+ color: $white;
4329
+ }
4331
4330
  }
4332
- &:-moz-placeholder {
4333
- /* Firefox 18- */
4334
- color: $wac-white;
4335
- opacity: 1;
4331
+ & + * {
4332
+ @include media('>=tablet') {
4333
+ white-space: nowrap;
4334
+ }
4336
4335
  }
4337
4336
  }
4338
4337
  }
4339
- button {
4338
+ &__right {
4339
+ width: 100%;
4340
4340
  display: flex;
4341
+ justify-content: flex-end;
4341
4342
  align-items: center;
4342
4343
  align-content: center;
4343
- justify-content: center;
4344
- width: 18px;
4345
- height: 18px;
4346
- border-radius: 3px;
4347
- position: absolute;
4348
- left: 20px;
4349
- top: 50%;
4350
- transform: translateY(-50%);
4351
- border: none;
4352
- cursor: pointer;
4353
- background-color: $wac-white;
4354
- i {
4355
- font-size: rem(18);
4356
- color: $wac-color-icon-search-multiple-search;
4357
- transition: 0.3s ease;
4344
+ margin: 0 0 0 10px;
4345
+ @include media('<tablet') {
4346
+ width: 100%;
4347
+ margin: 0;
4348
+ justify-content: center;
4358
4349
  }
4359
- &:hover {
4360
- i {
4361
- color: $wac-wizishop-blue !important;
4350
+ > * {
4351
+ &:not(:last-child) {
4352
+ margin: 0 20px 0 0;
4362
4353
  }
4363
4354
  }
4364
4355
  }
4365
4356
  }
4366
4357
  }
4367
- &__error {
4358
+ }
4359
+ h2.wac-h2 {
4360
+ font-size: rem(18);
4361
+ line-height: rem(21);
4362
+ font-weight: 500;
4363
+ color: $wac-main-text;
4364
+ }a.wac-link {
4365
+ position: relative;
4366
+ color: $wac-link-color;
4367
+ display: inline-block;
4368
+ transition: 0.3s ease;
4369
+ font-size: rem(14);
4370
+ line-height: rem(16);
4371
+ &:before {
4372
+ content: '';
4373
+ display: block;
4368
4374
  position: absolute;
4369
- top: 100%;
4370
- margin-top: 10px;
4371
- width: auto;
4372
- right: 0;
4373
- height: 30px;
4374
- line-height: 30px;
4375
- text-align: center;
4376
- background-color: $wac-multiple-search-error;
4377
- color: $wac-white;
4378
- font-size: rem(16);
4379
- font-weight: 500;
4380
- white-space: nowrap;
4381
- padding: 0 20px;
4375
+ width: 100%;
4376
+ max-width: 0;
4377
+ height: 1px;
4382
4378
  border-radius: 3px;
4379
+ background-color: darken($wac-link-color, 15%);
4380
+ left: 0;
4381
+ bottom: -2px;
4382
+ transition: 0.3s ease;
4383
+ }
4384
+ &:hover,
4385
+ &:focus {
4386
+ color: darken($wac-link-color, 15%);
4387
+ &:before {
4388
+ max-width: 100%;
4389
+ }
4383
4390
  }
4384
4391
  }
4385
- h4.wac-h4 {
4386
- font-size: rem(14);
4387
- line-height: rem(16);
4392
+ h3.wac-h3 {
4393
+ font-size: rem(16);
4394
+ line-height: rem(19);
4388
4395
  font-weight: 500;
4389
4396
  color: $wac-main-text;
4390
4397
  &.grey {
4391
4398
  color: $wac-second-color;
4392
4399
  }
4393
4400
  }
4394
- .wac-alert {
4395
- width: 100%;
4396
- background-color: transparentize($wac-link-color, 0.85);
4397
- color: $wac-link-color;
4398
- border-radius: 3px;
4399
- display: flex;
4400
- flex-wrap: nowrap;
4401
- justify-content: space-between;
4402
- padding: 20px;
4403
- &.success {
4404
- background-color: transparentize($wac-green-color, 0.85);
4405
- p {
4406
- color: $wac-p-alert-color-success;
4407
- > * {
4408
- color: $wac-p-alert-color-success;
4409
- }
4410
- }
4411
- i {
4412
- color: $wac-green-color;
4413
- }
4414
- }
4415
- &.warning {
4416
- background-color: transparentize($wac-primary-button, 0.85);
4417
- p {
4418
- color: $wac-p-alert-color-warning;
4419
- > * {
4420
- color: $wac-p-alert-color-warning;
4421
- }
4422
- }
4423
- i {
4424
- color: $wac-primary-button;
4425
- }
4426
- }
4427
- &.alert {
4428
- background-color: transparentize($wac-orange-color, 0.85);
4429
- p {
4430
- color: $wac-p-alert-color-alert;
4431
- > * {
4432
- color: $wac-p-alert-color-alert;
4433
- }
4434
- }
4435
- i {
4436
- color: $wac-orange-color;
4437
- }
4438
- }
4439
- p {
4440
- width: 100%;
4441
- font-size: rem(14);
4442
- line-height: rem(25);
4443
- margin: 0;
4444
- padding: 0;
4445
- color: $wac-p-alert-color-default;
4446
- > * {
4447
- color: $wac-p-alert-color-default;
4448
- }
4449
- }
4450
- i {
4451
- width: auto;
4452
- margin: 0 10px 0 0;
4453
- color: inherit;
4454
- font-size: rem(14);
4455
- line-height: rem(25);
4456
- }
4401
+ .wac-multiple-search-plus {
4457
4402
 
4458
- .wac-button i {
4459
- color: $wac-white;
4460
- }
4461
- }
4462
- .wac-calendar {
4463
- position: relative;
4464
- margin: 0 0 20px;
4465
- width: 268px;
4466
- &--open {
4467
- z-index: 9;
4468
- .wac-calendar {
4469
- &__absolute {
4470
- visibility: visible;
4471
- opacity: 1;
4472
- transition: 0.3s ease opacity 0.1s, 0s visibility linear 0s;
4473
- }
4474
- }
4475
- }
4476
- &--edit {
4477
- display: flex;
4478
- justify-content: flex-start;
4479
- align-items: center;
4480
- align-content: center;
4481
- & > * {
4482
- display: inline-block;
4483
- &:nth-child(2) {
4484
- margin: 0 10px;
4485
- }
4486
- }
4487
- }
4488
- &--no-margin {
4489
- margin: 0;
4490
- .wac-calendar__autoHide {
4491
- margin: 0;
4492
- }
4493
- }
4494
- &__label {
4495
- font-size: rem(14) !important;
4496
- line-height: rem(16) !important;
4497
- margin: 0 0 10px !important;
4498
- color: $wac-color-text-grey !important;
4499
- cursor: pointer;
4500
- }
4501
- &__autoHide {
4502
- max-width: 300px;
4503
- position: relative;
4504
- }
4505
4403
  &__wrapper {
4506
- &__input {
4507
- border-radius: 3px;
4404
+ margin: rem(14) 0;
4405
+ width: fit-content;
4406
+
4407
+ &__block {
4408
+
4508
4409
  display: flex;
4509
- justify-content: flex-start;
4510
4410
  align-items: center;
4411
+ justify-content: space-between;
4511
4412
  align-content: center;
4512
- min-width: 240px;
4513
- max-width: 240px;
4514
- padding: 7px 20px;
4515
- border: 1px solid $wac-border-form;
4516
- cursor: pointer;
4517
- &__icon {
4518
- width: 16px;
4519
- margin: 0 10px 0 0;
4520
- display: flex;
4521
- justify-content: space-between;
4522
- align-items: center;
4523
- align-content: center;
4524
- cursor: pointer;
4525
- &:hover,
4526
- &:focus {
4527
- i {
4528
- color: darken($wac-wizishop-blue, 15%);
4529
- }
4530
- }
4531
- i {
4532
- color: $wac-second-color;
4533
- font-size: rem(18);
4534
- transition: color 300ms ease;
4535
- }
4536
- }
4537
- &__date {
4538
- width: auto;
4539
- white-space: nowrap;
4540
- position: relative;
4541
- color: $wac-main-text;
4542
- font-size: rem(14);
4543
- line-height: rem(24);
4544
- margin: 0 15px 0 0;
4545
- letter-spacing: 0.65px;
4546
- &:after {
4547
- content: '';
4548
- display: block;
4549
- position: absolute;
4550
- width: 1px;
4551
- height: 15px;
4552
- background-color: $wac-input-border;
4553
- top: 50%;
4554
- right: -15px;
4555
- transform: translateY(-50%);
4556
- }
4413
+ color: $wac-white;
4414
+ font-size: rem(14);
4415
+ line-height: rem(16);
4416
+ border-radius: rem(3);
4417
+ padding: rem(8) rem(15);
4418
+ font-weight: 500;
4419
+ transition: 0.3s ease;
4420
+ margin: rem(10) 0;
4421
+
4422
+ .wac-text {
4423
+ margin: 0;
4557
4424
  }
4558
- &__time {
4559
- width: auto;
4560
- white-space: nowrap;
4561
- font-size: rem(14);
4562
- line-height: rem(24);
4563
- color: $wac-main-text;
4564
- margin: 0 15px;
4565
- letter-spacing: 1.3px;
4425
+
4426
+ :nth-child(n){
4427
+ padding: 0 3px;
4566
4428
  }
4567
- &__close {
4568
- width: 10px;
4429
+
4430
+ i {
4431
+ color: $wac-white;
4432
+ font-weight: 400;
4433
+ margin: 0 0 0 rem(15);
4434
+ font-size: rem(13);
4569
4435
  cursor: pointer;
4436
+ }
4437
+
4438
+ &.default {
4439
+ background-color: $wac-tag-default;
4440
+ border: 1px solid $wac-border-light;
4441
+ color: $wac-second-color;
4442
+ font-weight: 400;
4570
4443
  i {
4571
- font-size: 14px;
4572
- transition: color 300ms ease;
4573
- color: $wac-primary-button;
4574
- font-weight: 400;
4444
+ color: $wac-border-form;
4575
4445
  }
4576
- &:hover,
4577
- &:focus {
4446
+ &.hover:hover,
4447
+ &.hover:focus {
4448
+ background-color: darken($wac-tag-default, 15%);
4449
+ color: $wac-main-text;
4578
4450
  i {
4579
- color: darken($wac-primary-button, 15%);
4451
+ color: $wac-main-text;
4580
4452
  }
4581
4453
  }
4582
4454
  }
4455
+
4456
+ }
4457
+ }
4458
+
4459
+ }
4460
+
4461
+ .wac-multiple-search {
4462
+ width: 100%;
4463
+ min-height: 50px;
4464
+ border-radius: 3px;
4465
+ background-color: $wac-white;
4466
+ position: relative;
4467
+ z-index: 2;
4468
+ border: 1px solid $wac-border-light;
4469
+ transition: 0.3s ease;
4470
+ &.open {
4471
+ border-color: $wac-wizishop-blue;
4472
+ }
4473
+ &__wrapper {
4474
+ position: relative;
4475
+ display: flex;
4476
+ justify-content: space-between;
4477
+ align-items: stretch;
4478
+ align-content: stretch;
4479
+ flex-wrap: nowrap;
4480
+ @include media('<tablet') {
4481
+ padding: 0 12px;
4583
4482
  }
4584
- &__editInPlace {
4483
+ &__left {
4484
+ width: auto;
4585
4485
  display: flex;
4586
4486
  justify-content: space-between;
4587
- padding: 5px 0;
4588
- position: relative;
4589
4487
  align-content: center;
4590
4488
  align-items: center;
4591
- cursor: pointer;
4592
- max-width: 140px;
4593
- &:after {
4489
+ flex-wrap: nowrap;
4490
+ position: relative;
4491
+ min-height: 50px;
4492
+ transition: background-color 0.3s ease;
4493
+ background-color: $wac-select-icon-background;
4494
+ &__background {
4594
4495
  position: absolute;
4595
- content: '';
4596
- border-bottom: dashed 1px $wac-calendar-primary;
4597
4496
  width: 100%;
4598
- bottom: 0;
4599
4497
  left: 0;
4498
+ top: 0;
4499
+ height: 100%;
4500
+ opacity: 0;
4501
+ z-index: 4;
4502
+ transition: opacity 0.3s ease;
4503
+ cursor: pointer;
4600
4504
  }
4601
- &__icon {
4602
- width: 12px;
4603
- margin: 0 5px 0 0;
4604
- display: flex;
4605
- justify-content: space-between;
4606
- align-items: center;
4607
- align-content: center;
4608
- i {
4609
- font-size: rem(14);
4610
- color: $wac-wizishop-blue;
4611
- transition: color 300ms ease;
4505
+ > span {
4506
+ color: $wac-second-color;
4507
+ white-space: nowrap;
4508
+ font-size: rem(14);
4509
+ line-height: rem(16);
4510
+ margin: 0 40px 0 20px;
4511
+ transition: 0.3s ease;
4512
+ position: relative;
4513
+ z-index: 2;
4514
+ cursor: pointer;
4515
+ @include media('<tablet') {
4516
+ text-indent: -9999999px;
4517
+ margin: 0;
4518
+ width: 11px;
4612
4519
  }
4613
4520
  }
4614
- &__date {
4521
+ > i {
4522
+ transition: 0.3s ease;
4615
4523
  position: relative;
4616
- color: $wac-header-color;
4617
- font-size: rem(14);
4618
- width: auto;
4619
- transition: 300ms ease;
4620
- white-space: nowrap;
4524
+ z-index: 2;
4525
+ cursor: pointer;
4526
+ &:nth-child(2) {
4527
+ font-size: rem(10);
4528
+ color: $wac-main-text;
4529
+ margin: 0 20px 0 0;
4530
+ @include media('<tablet') {
4531
+ margin: 0 10px 0 0;
4532
+ }
4533
+ }
4621
4534
  }
4622
- &:hover,
4623
- &:focus {
4624
- .wac-calendar {
4625
- &__wrapper {
4626
- &__editInPlace {
4627
- &__date {
4628
- color: darken($wac-header-color, 30%);
4629
- }
4630
- &__icon {
4631
- i {
4632
- color: darken($wac-wizishop-blue, 15%);
4633
- }
4634
- }
4635
- }
4535
+ &__select {
4536
+ position: absolute;
4537
+ top: 50px;
4538
+ width: 100%;
4539
+ left: 0;
4540
+ margin-top: 11px;
4541
+ background-color: $wac-white;
4542
+ z-index: 3;
4543
+ box-shadow: 3px 3px 20px $wac-multiple-search-box-shadow;
4544
+ border-radius: 3px;
4545
+ border: 1px solid $wac-border-light;
4546
+ padding: 10px;
4547
+ min-width: 340px;
4548
+ &__item {
4549
+ display: inline-flex;
4550
+ width: 100%;
4551
+ font-size: rem(14);
4552
+ line-height: rem(30);
4553
+ cursor: pointer;
4554
+ transition: 0.3s ease;
4555
+ position: relative;
4556
+ padding: 0 10px;
4557
+ .wac-text {
4558
+ margin: 0;
4559
+ }
4560
+ :nth-child(n) {
4561
+ padding: 2px;
4562
+ }
4563
+ &:nth-child(2n) {
4564
+ background-color: $wac-gray-background;
4565
+ }
4566
+ &:not(:last-child) {
4567
+ margin: 0 0 rem(10);
4568
+ }
4569
+ span {
4570
+ color: $wac-main-text;
4571
+ font-size: rem(12);
4572
+ text-align: left;
4573
+ }
4574
+ &:hover,
4575
+ &:focus {
4576
+ background-color: darken($wac-gray-background, 15%);
4577
+ color: $wac-main-text;
4636
4578
  }
4637
4579
  }
4638
4580
  }
4581
+ &:hover,
4582
+ &:focus,
4583
+ &.open {
4584
+ background-color: $wac-hover-multiple-search;
4585
+ }
4639
4586
  }
4640
- &__select {
4641
- border-radius: 3px;
4642
- display: flex;
4643
- justify-content: flex-start;
4644
- align-items: center;
4645
- align-content: center;
4646
- min-width: 220px;
4647
- max-width: 220px;
4648
- padding: 11px 19px;
4649
- border: 1px solid $wac-input-border;
4650
- cursor: pointer;
4651
- background: $wac-white no-repeat center right 15px
4652
- url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%226.032%22%3E%3Cpath%20data-name%3D%22Arrow%20copie%203%22%20d%3D%22M0%20.016L5%204.65l5-4.634v1.378L5%206.028%200%201.394V.02z%22%20fill%3D%22%231e2e43%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E);
4653
- &__icon {
4654
- width: 16px;
4655
- margin: 0 10px 0 0;
4656
- display: flex;
4657
- justify-content: space-between;
4658
- align-items: center;
4659
- align-content: center;
4660
- cursor: pointer;
4661
- &:hover,
4662
- &:focus {
4663
- i {
4664
- color: darken($wac-second-color, 15%);
4587
+ &__right {
4588
+ width: 100%;
4589
+ min-height: 50px;
4590
+ position: relative;
4591
+ form {
4592
+ width: 100%;
4593
+ }
4594
+ input {
4595
+ background: transparent;
4596
+ border: none;
4597
+ color: $wac-main-text;
4598
+ font-size: rem(14);
4599
+ height: 50px;
4600
+ line-height: 50px;
4601
+ padding: 0 20px 0 48px;
4602
+ font-weight: 400;
4603
+ width: 100%;
4604
+ @include media('<tablet') {
4605
+ padding: 0 0 0 10px;
4606
+ }
4607
+ &::-webkit-input-placeholder {
4608
+ /* Chrome/Opera/Safari */
4609
+ color: $wac-multiple-search-input-color;
4610
+ opacity: 1;
4611
+ font-weight: 400;
4612
+ @include media('<tablet') {
4613
+ font-size: rem(11);
4665
4614
  }
4666
4615
  }
4667
- i {
4668
- font-size: rem(18);
4616
+ &::-moz-placeholder {
4617
+ /* Firefox 19+ */
4618
+ color: $wac-multiple-search-input-color;
4619
+ opacity: 1;
4669
4620
  font-weight: 400;
4670
- color: $wac-second-color;
4671
- transition: color 300ms ease;
4621
+ @include media('<tablet') {
4622
+ font-size: rem(11);
4623
+ }
4672
4624
  }
4673
- }
4674
- &__date {
4675
- width: auto;
4676
- position: relative;
4677
- color: $wac-header-color;
4678
- font-size: rem(14);
4679
- white-space: nowrap;
4680
- margin: 0;
4681
- &:after {
4682
- display: none;
4625
+ &:-ms-input-placeholder {
4626
+ /* IE 10+ */
4627
+ color: $wac-multiple-search-input-color;
4628
+ opacity: 1;
4629
+ font-weight: 400;
4630
+ @include media('<tablet') {
4631
+ font-size: rem(11);
4632
+ }
4633
+ }
4634
+ &:-moz-placeholder {
4635
+ /* Firefox 18- */
4636
+ color: $wac-multiple-search-input-color;
4637
+ opacity: 1;
4638
+ font-weight: 400;
4639
+ @include media('<tablet') {
4640
+ font-size: rem(11);
4641
+ }
4642
+ }
4643
+ &:focus {
4644
+ & + button i {
4645
+ color: $wac-main-text;
4646
+ }
4647
+ &::-webkit-input-placeholder {
4648
+ /* Chrome/Opera/Safari */
4649
+ color: $wac-white;
4650
+ opacity: 1;
4651
+ }
4652
+ &::-moz-placeholder {
4653
+ /* Firefox 19+ */
4654
+ color: $wac-white;
4655
+ opacity: 1;
4656
+ }
4657
+ &:-ms-input-placeholder {
4658
+ /* IE 10+ */
4659
+ color: $wac-white;
4660
+ opacity: 1;
4661
+ }
4662
+ &:-moz-placeholder {
4663
+ /* Firefox 18- */
4664
+ color: $wac-white;
4665
+ opacity: 1;
4666
+ }
4683
4667
  }
4684
4668
  }
4685
- &__close {
4686
- width: 10px;
4669
+ button {
4670
+ display: flex;
4671
+ align-items: center;
4672
+ align-content: center;
4673
+ justify-content: center;
4674
+ width: 18px;
4675
+ height: 18px;
4676
+ border-radius: 3px;
4677
+ position: absolute;
4678
+ left: 20px;
4679
+ top: 50%;
4680
+ transform: translateY(-50%);
4681
+ border: none;
4687
4682
  cursor: pointer;
4683
+ background-color: $wac-white;
4688
4684
  i {
4689
- font-size: 14px;
4690
- transition: color 300ms ease;
4691
- color: $wac-primary-button;
4685
+ font-size: rem(18);
4686
+ color: $wac-color-icon-search-multiple-search;
4687
+ transition: 0.3s ease;
4692
4688
  }
4693
- &:hover,
4694
- &:focus {
4689
+ &:hover {
4695
4690
  i {
4696
- color: darken($wac-primary-button, 15%);
4691
+ color: $wac-wizishop-blue !important;
4697
4692
  }
4698
4693
  }
4699
4694
  }
4700
4695
  }
4701
4696
  }
4702
- &__absolute {
4697
+ &__error {
4703
4698
  position: absolute;
4704
4699
  top: 100%;
4705
- left: 50%;
4706
- transform: translateX(-50%);
4707
- visibility: hidden;
4708
- opacity: 0;
4709
- transition: 0.3s ease opacity, 0s visibility 0.31s;
4710
- border: 1px solid $wac-border-light;
4711
- background-color: $wac-white;
4712
- box-shadow: 3px 3px 20px $wac-calendar-box-shadow;
4700
+ margin-top: 10px;
4701
+ width: auto;
4702
+ right: 0;
4703
+ height: 30px;
4704
+ line-height: 30px;
4705
+ text-align: center;
4706
+ background-color: $wac-multiple-search-error;
4707
+ color: $wac-white;
4708
+ font-size: rem(16);
4709
+ font-weight: 500;
4710
+ white-space: nowrap;
4711
+ padding: 0 20px;
4713
4712
  border-radius: 3px;
4714
- max-width: 268px;
4715
- min-width: 268px;
4716
- &.bottom {
4717
- transform: translateX(-50%) translateY(10px);
4718
- }
4719
- &.top {
4720
- top: auto;
4721
- bottom: 100%;
4722
- transform: translateX(-50%) translateY(-10px);
4723
- }
4724
- &.left {
4725
- transform: translateY(-50%) translateX(-10px);
4726
- left: auto;
4727
- right: 100%;
4728
- top: 50%;
4729
- }
4730
- &.right {
4731
- transform: translateY(-50%) translateX(10px);
4732
- left: 100%;
4733
- top: 50%;
4734
- }
4735
- &.left-top {
4736
- left: auto;
4737
- right: 100%;
4738
- top: auto;
4739
- bottom: 0;
4740
- transform: translateY(-10px) translateX(-10px);
4741
- }
4742
- &.left-bottom {
4743
- left: auto;
4744
- right: 100%;
4745
- top: 0;
4746
- transform: translateY(10px) translateX(-10px);
4747
- }
4748
- &.right-top {
4749
- left: 100%;
4750
- top: auto;
4751
- bottom: 0;
4752
- transform: translateY(-10px) translateX(10px);
4753
- }
4754
- &.right-bottom {
4755
- left: 100%;
4756
- top: 0;
4757
- transform: translateY(10px) translateX(10px);
4713
+ }
4714
+ }
4715
+ h4.wac-h4 {
4716
+ font-size: rem(14);
4717
+ line-height: rem(16);
4718
+ font-weight: 500;
4719
+ color: $wac-main-text;
4720
+ &.grey {
4721
+ color: $wac-second-color;
4722
+ }
4723
+ }
4724
+ .wac-alert {
4725
+ width: 100%;
4726
+ background-color: transparentize($wac-link-color, 0.85);
4727
+ color: $wac-link-color;
4728
+ border-radius: 3px;
4729
+ display: flex;
4730
+ flex-wrap: nowrap;
4731
+ justify-content: space-between;
4732
+ padding: 20px;
4733
+ &.success {
4734
+ background-color: transparentize($wac-green-color, 0.85);
4735
+ p {
4736
+ color: $wac-p-alert-color-success;
4737
+ > * {
4738
+ color: $wac-p-alert-color-success;
4739
+ }
4758
4740
  }
4759
- & > * > * {
4760
- width: 265px;
4741
+ i {
4742
+ color: $wac-green-color;
4761
4743
  }
4762
- &__time {
4763
- position: relative;
4764
- background-color: $wac-white;
4765
- padding: 20px;
4766
- width: 100%;
4767
- &:before {
4768
- content: '';
4769
- width: 100%;
4770
- height: 5px;
4771
- bottom: 100%;
4772
- margin-bottom: -2px;
4773
- display: block;
4774
- position: absolute;
4775
- left: 0;
4776
- background-color: $wac-white;
4777
- }
4778
- &__wrapper {
4779
- width: 100% !important;
4780
- display: flex;
4781
- align-items: center;
4782
- align-content: center;
4783
- justify-content: center;
4784
- min-height: 42px;
4785
- position: relative;
4786
- &:before {
4787
- content: '';
4788
- display: block;
4789
- background-color: $wac-wizishop-blue;
4790
- width: 4px;
4791
- height: 4px;
4792
- border-radius: 50%;
4793
- position: absolute;
4794
- top: 50%;
4795
- left: 50%;
4796
- transform: translate(-50%, -50%);
4797
- margin-top: -4px;
4798
- }
4799
- &:after {
4800
- content: '';
4801
- display: block;
4802
- background-color: $wac-wizishop-blue;
4803
- width: 4px;
4804
- height: 4px;
4805
- border-radius: 50%;
4806
- position: absolute;
4807
- top: 50%;
4808
- left: 50%;
4809
- transform: translate(-50%, -50%);
4810
- margin-top: 4px;
4811
- }
4812
- &__hours,
4813
- &__minutes {
4814
- position: relative;
4815
- width: 100px;
4816
- display: flex;
4817
- flex-wrap: nowrap;
4818
- &__left,
4819
- &__right {
4820
- width: 100%;
4821
- display: flex;
4822
- flex-wrap: nowrap;
4823
- justify-content: center;
4824
- flex-direction: column;
4825
- align-items: center;
4826
- align-content: center;
4827
- }
4828
- &__btn {
4829
- display: flex;
4830
- justify-content: center;
4831
- flex-direction: column;
4832
- align-items: center;
4833
- align-content: center;
4834
- width: 40px;
4835
- height: 20px;
4836
- background-color: $wac-gray-background;
4837
- box-shadow: none;
4838
- border: none;
4839
- cursor: pointer;
4840
- transition: 0.3s ease;
4841
- &:hover,
4842
- &:focus {
4843
- background-color: $wac-wizishop-blue;
4844
- i {
4845
- color: $wac-white;
4846
- }
4847
- }
4848
- &:first-child {
4849
- margin: 0 0 2px;
4850
- }
4851
- i {
4852
- font-size: rem(10);
4853
- color: $wac-second-color;
4854
- margin: 0;
4855
- }
4856
- }
4857
-
4858
- input::-webkit-outer-spin-button,
4859
- input::-webkit-inner-spin-button {
4860
- -webkit-appearance: none;
4861
- margin: 0;
4862
- }
4863
-
4864
- /* Firefox */
4865
- input[type='number'] {
4866
- -moz-appearance: textfield;
4867
- }
4868
-
4869
- input {
4870
- border: none;
4871
- text-align: center;
4872
- font-size: rem(24);
4873
- color: $wac-wizishop-blue;
4874
- padding: 0;
4875
- line-height: 1.4;
4876
- margin: 0;
4877
- width: 100%;
4878
- }
4879
- }
4880
- &__hours {
4881
- margin: 0 10px 0 0;
4882
- }
4883
- &__minutes {
4884
- margin: 0 0 0 10px;
4885
- }
4744
+ }
4745
+ &.warning {
4746
+ background-color: transparentize($wac-primary-button, 0.85);
4747
+ p {
4748
+ color: $wac-p-alert-color-warning;
4749
+ > * {
4750
+ color: $wac-p-alert-color-warning;
4886
4751
  }
4887
4752
  }
4753
+ i {
4754
+ color: $wac-primary-button;
4755
+ }
4888
4756
  }
4889
- }
4890
-
4891
- .datetimepicker-dummy .datetimepicker-clear-button {
4892
- top: -3px !important;
4893
- }
4894
-
4895
- .datetimepicker-dummy .datetimepicker-dummy-wrapper {
4896
- border: 1px solid $wac-border-color;
4897
- border-radius: rem(3);
4898
-
4899
- &:hover,
4900
- &:focus {
4901
- border: 1px solid $wac-wizishop-blue;
4902
- }
4903
- }
4904
-
4905
-
4906
- .datetimepicker {
4907
- box-shadow: none !important;
4908
- &-wrapper {
4909
- border: none !important;
4910
- box-shadow: none;
4911
- background: $wac-white;
4757
+ &.alert {
4758
+ background-color: transparentize($wac-orange-color, 0.85);
4759
+ p {
4760
+ color: $wac-p-alert-color-alert;
4761
+ > * {
4762
+ color: $wac-p-alert-color-alert;
4763
+ }
4764
+ }
4765
+ i {
4766
+ color: $wac-orange-color;
4767
+ }
4912
4768
  }
4913
- }
4914
-
4915
- .datepicker {
4916
- .datepicker {
4917
- &-nav {
4918
- background: $wac-white !important;
4919
- color: $wac-main-text !important;
4920
- padding: 15px !important;
4769
+ p {
4770
+ width: 100%;
4771
+ font-size: rem(14);
4772
+ line-height: rem(25);
4773
+ margin: 0;
4774
+ padding: 0;
4775
+ color: $wac-p-alert-color-default;
4776
+ > * {
4777
+ color: $wac-p-alert-color-default;
4921
4778
  }
4922
4779
  }
4923
- }
4924
-
4925
- .datetimepicker .datepicker-nav .datepicker-nav-month,
4926
- .datetimepicker .datepicker-nav .datepicker-nav-year {
4927
- color: $wac-main-text !important;
4928
- font-weight: 500 !important;
4929
- &:hover,
4930
- &:focus {
4931
- color: $wac-wizishop-blue !important;
4780
+ i {
4781
+ width: auto;
4782
+ margin: 0 10px 0 0;
4783
+ color: inherit;
4784
+ font-size: rem(14);
4785
+ line-height: rem(25);
4932
4786
  }
4933
- }
4934
-
4935
- .datepicker-nav-year {
4936
- font-weight: 500 !important;
4937
- }
4938
4787
 
4939
- .datetimepicker .datepicker-nav .datepicker-nav-previous,
4940
- .datetimepicker .datepicker-nav .datepicker-nav-next {
4941
- border-radius: 3px;
4942
- color: $wac-main-text !important;
4943
- width: 25px !important;
4944
- height: 25px !important;
4945
- display: flex;
4946
- justify-content: center;
4947
- align-items: center;
4948
- align-content: center;
4949
- border: 1px solid $wac-border-light;
4950
- transition: 0.3s ease;
4951
- > svg {
4952
- display: none !important;
4788
+ .wac-button i {
4789
+ color: $wac-white;
4953
4790
  }
4954
4791
  }
4955
-
4956
- .datetimepicker .datepicker-nav .datepicker-nav-previous {
4957
- background: $wac-white
4958
- url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='chevron-left' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-left fa-w-10 fa-2x'%3E%3Cpath fill='currentColor' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z' class=''%3E%3C/path%3E%3C/svg%3E")
4959
- center center no-repeat !important;
4960
- background-size: 6px auto !important;
4961
- &:hover,
4962
- &:focus {
4963
- border-color: $wac-wizishop-blue !important;
4792
+ .wac-field-checkbox {
4793
+ &__row {
4794
+ position: relative;
4795
+ min-width: 100%;
4796
+ margin: 0;
4797
+ }
4798
+ &--nowrap {
4799
+ display: inline-block;
4800
+ width: auto;
4801
+ min-width: 0;
4802
+ margin: 0 10px 10px 0;
4803
+ .field {
4804
+ &__row {
4805
+ width: auto;
4806
+ display: inline-block;
4807
+ margin: 0;
4808
+ }
4809
+ }
4964
4810
  }
4965
- }
4966
4811
 
4967
- .datetimepicker .datepicker-nav .datepicker-nav-next {
4968
- background: $wac-white
4969
- url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='chevron-right' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-chevron-right fa-w-10 fa-2x'%3E%3Cpath fill='currentColor' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z' class=''%3E%3C/path%3E%3C/svg%3E")
4970
- center center no-repeat !important;
4971
- background-size: 6px auto !important;
4972
- &:hover,
4973
- &:focus {
4974
- border-color: $wac-wizishop-blue !important;
4812
+ input[type='text'] {
4813
+ height: 40px;
4814
+ max-height: 40px;
4815
+ padding: 0 20px;
4816
+ line-height: 40px;
4817
+ border: 1px solid $wac-border-form;
4818
+ border-radius: 3px;
4819
+ margin: 15px 0 10px !important;
4820
+ font-size: rem(14) !important;
4821
+ color: $wac-main-text;
4822
+ &:focus {
4823
+ border-color: $wac-wizishop-blue !important;
4824
+ box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
4825
+ &::-webkit-input-placeholder {
4826
+ /* Chrome/Opera/Safari */
4827
+ opacity: 0;
4828
+ }
4829
+ &::-moz-placeholder {
4830
+ /* Firefox 19+ */
4831
+ opacity: 0;
4832
+ }
4833
+ &:-ms-input-placeholder {
4834
+ /* IE 10+ */
4835
+ opacity: 0;
4836
+ }
4837
+ &:-moz-placeholder {
4838
+ /* Firefox 18- */
4839
+ opacity: 0;
4840
+ }
4841
+ }
4975
4842
  }
4976
- }
4843
+ &.alone {
4844
+ .is-checkradio[type='checkbox'] {
4845
+ & + label {
4846
+ padding-left: 9px;
4847
+ margin-right: 0px;
4977
4848
 
4978
- .wac-calendar__absolute {
4979
- .datetimepicker .datepicker-body .datepicker-weekdays {
4980
- padding: 0 15px;
4849
+ &:before {
4850
+ border-width: 1px;
4851
+ width: 16px;
4852
+ height: 16px;
4853
+ border-radius: 2px;
4854
+ }
4855
+ }
4856
+ &:checked + label {
4857
+ &:after {
4858
+ top: 7px;
4859
+ transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
4860
+ }
4861
+ }
4862
+ }
4981
4863
  }
4982
- .datepicker-weekdays {
4983
- height: 14px;
4984
- margin: 0 0 rem(12);
4985
- .datepicker-date {
4986
- font-size: rem(12);
4864
+
4865
+ .is-checkradio[type='checkbox'] {
4866
+ outline: 0 !important;
4867
+ top: 0;
4868
+ & + label {
4869
+ font-size: rem(14);
4870
+ line-height: 0;
4871
+ color: $wac-input-radio-color-label;
4987
4872
  white-space: nowrap;
4988
- line-height: 1;
4989
- padding: 0 !important;
4990
- color: $wac-secondary-color !important;
4873
+ padding: 0 8px;
4874
+ margin-right: 0;
4875
+ outline: 0 !important;
4876
+ &:before {
4877
+ width: 16px;
4878
+ height: 16px;
4879
+ border: 1px solid $wac-border-color;
4880
+ top: 0;
4881
+ transition: all 0.3s ease-in-out;
4882
+ }
4883
+ &:after {
4884
+ top: 2.3px !important;
4885
+ left: 3px !important;
4886
+ width: 10px;
4887
+ height: 12px;
4888
+ border: none !important;
4889
+ background: transparent
4890
+ 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")
4891
+ center center / 8px 8px no-repeat;
4892
+ transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
4893
+ transition: all 0.3s ease-in-out;
4894
+ }
4895
+ span {
4896
+ margin: 0 0 0 rem(16);
4897
+ display: inline-block;
4898
+ }
4899
+ &:hover,
4900
+ &:focus {
4901
+ &:before {
4902
+ border-color: $wac-input-active-color !important;
4903
+ }
4904
+ }
4905
+ &:before,
4906
+ &:after {
4907
+ outline: 0 !important;
4908
+ }
4909
+ }
4910
+ &:hover {
4911
+ & + label {
4912
+ color: $wac-input-radio-color-active-label;
4913
+ &:before {
4914
+ border-color: $wac-input-active-color !important;
4915
+ }
4916
+ &:after {
4917
+ border-color: $wac-white !important;
4918
+ }
4919
+ }
4920
+ &:not([disabled]) {
4921
+ & + label {
4922
+ &:before {
4923
+ border-color: $wac-input-active-color !important;
4924
+ }
4925
+ }
4926
+ }
4927
+ }
4928
+ &:checked + label {
4929
+ color: $wac-input-radio-color-active-label;
4930
+ &:before {
4931
+ border: 1px solid $wac-input-active-color;
4932
+ background-color: $wac-input-active-color;
4933
+ transition: all 0.3s ease-in-out;
4934
+ }
4935
+ &:after {
4936
+ left: 7px;
4937
+ top: 8px;
4938
+ transition: all 0.3s ease-in-out;
4939
+ }
4991
4940
  }
4992
4941
  }
4993
- .datepicker-days {
4994
- padding: 0 15px !important;
4995
- }
4996
- .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active {
4997
- background-color: $wac-wizishop-blue;
4998
- }
4999
- .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover {
5000
- border-color: $wac-wizishop-blue;
5001
- }
5002
- }
5003
4942
 
5004
- .datetimepicker .datetimepicker-footer {
5005
- display: none;
5006
4943
  }
5007
4944
 
5008
4945
 
@@ -5962,88 +5899,174 @@ div.wac-field-input-search {
5962
5899
  }
5963
5900
  }
5964
5901
  }
5965
- .wac-filters {
5902
+ .wac-edit-in-place.nwb-wrapper {
5903
+ display: inline-block;
5904
+ position: relative;
5905
+ width: auto;
5906
+ min-width: 12px;
5907
+ min-height: 1.4em;
5908
+
5909
+ input {
5910
+ font-size: inherit;
5911
+ transition: width 50ms;
5912
+ position: absolute;
5913
+ top: 0;
5914
+ left: -5px;
5915
+ width: calc(100% + 16px) !important;
5916
+ height: calc(100% + 14px) !important;
5917
+ padding: 5px;
5918
+ z-index: 1;
5919
+ margin: 0;
5920
+ outline: none !important;
5921
+ border: 1px solid $wac-edit-in-place-border;
5922
+ background: inherit;
5923
+ transform: translateY(-17%);
5924
+ background-color: $wac-edit-in-place-background;
5925
+
5926
+ &.nwb-editable {
5927
+ text-decoration: none;
5928
+ color: inherit;
5929
+ border: none;
5930
+ cursor: pointer;
5931
+ height: 26px;
5932
+ }
5933
+
5934
+ &.nwb-editing {
5935
+ color: $wac-edit-in-place-border;
5936
+ }
5937
+ }
5938
+
5939
+ div.select {
5940
+ position: absolute;
5941
+ left: 0;
5942
+
5943
+ &:before,
5944
+ &:after {
5945
+ display: block;
5946
+ position: absolute;
5947
+ height: 10px;
5948
+ width: 10px;
5949
+ }
5950
+ }
5951
+
5952
+ span.nwb-loader {
5953
+ &.nwb-is-loading {
5954
+ z-index: 2;
5955
+ opacity: 1;
5956
+ position: absolute;
5957
+ top: -7px;
5958
+ left: -7px;
5959
+ width: calc(100% + 16px) !important;
5960
+ height: calc(100% + 14px) !important;
5961
+ min-width: 12px;
5962
+ min-height: 1em;
5963
+ margin: 0;
5964
+ background-size: auto 70%;
5965
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ellipsis' style='background: none;'%3E%3C!--circle(cx='16',cy='50',r='10')--%3E%3Ccircle cx='84' cy='50' r='0' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='10;0;0;0;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='84;84;84;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='28.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3C/circle%3E%3Ccircle cx='16' cy='50' r='3.71582' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/circle%3E%3Ccircle cx='84' cy='50' r='6.28418' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='62.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;0;10;10;10' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;16;50;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3C/svg%3E");
5966
+ background-repeat: no-repeat;
5967
+ background-position: center center;
5968
+ }
5969
+ }
5970
+ span {
5971
+ color: inherit;
5972
+ font-weight: 500;
5973
+ &:not(.nwb-loader) {
5974
+ display: inline-block;
5975
+ min-width: 12px;
5976
+ }
5977
+ &.nwb-editing {
5978
+ visibility: hidden;
5979
+ }
5980
+
5981
+ &.nwb-is-loading {
5982
+ text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
5983
+ color: rgba(0, 0, 0, 0.4);
5984
+ opacity: 0.25;
5985
+ }
5986
+
5987
+ &.nwbSelect {
5988
+ cursor: pointer;
5989
+ }
5990
+ }
5991
+ }
5992
+
5993
+ .wac-edit-in-place.nwb-wrapper--editable::after {
5994
+ position: absolute;
5995
+ content: '';
5996
+ border-bottom: dashed 1px $wac-primary;
5966
5997
  width: 100%;
5967
- &__wrapper {
5968
- width: 100%;
5998
+ bottom: 0;
5999
+ left: 0;
6000
+ }
6001
+
6002
+ .wac-edit-in-place.nwbSelect {
6003
+ &__container {
5969
6004
  display: flex;
5970
- flex-wrap: wrap;
5971
- justify-content: flex-start;
5972
- align-items: center;
5973
- align-content: center;
5974
- button {
5975
- position: relative;
5976
- width: auto;
5977
- display: flex;
5978
- align-items: center;
5979
- font-size: rem(14);
5980
- line-height: rem(16);
5981
- font-weight: 400;
5982
- color: $wac-second-color;
5983
- border: 1px solid $wac-border-light;
5984
- border-radius: 3px;
5985
- background: transparent;
5986
- box-shadow: none;
5987
- margin-bottom: rem(10);
5988
- transition: 0.3s ease;
5989
- cursor: pointer;
5990
- padding: 12px 20px;
5991
- .event {
5992
- position: absolute;
5993
- top: 0;
5994
- left: 0;
5995
- width: 100%;
5996
- height: 100%;
5997
- z-index: 2;
5998
- display: inline-block;
5999
- }
6000
- i {
6001
- color: $wac-main-text;
6002
- font-size: rem(14);
6003
- margin: 0 rem(10) 0 0;
6004
- }
6005
- &:hover,
6006
- &:focus,
6007
- &.active {
6008
- border-color: $wac-wizishop-blue;
6009
- color: $wac-main-text;
6010
- }
6011
- &:not(:last-child) {
6012
- margin: 0 rem(10) rem(10) 0;
6013
- }
6005
+ flex-direction: column;
6006
+ position: absolute;
6007
+ white-space: nowrap;
6008
+ border: solid 1px rgba(0, 0, 0, 0.2);
6009
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
6010
+ border-radius: 3px;
6011
+ top: calc(100% + 7px);
6012
+
6013
+ &::before {
6014
+ position: absolute;
6015
+ top: -7px;
6016
+ left: 9px;
6017
+ content: '';
6018
+ border-left: 7px solid transparent;
6019
+ border-right: 7px solid transparent;
6020
+ border-bottom: 7px solid $wac-edit-in-place-before-border-bottom;
6021
+ border-bottom-color: rgba(0, 0, 0, 0.2);
6022
+ display: inline-block;
6014
6023
  }
6015
- > span {
6016
- position: relative;
6017
- color: $wac-link-color;
6024
+
6025
+ &::after {
6026
+ position: absolute;
6027
+ top: -6px;
6028
+ left: 10px;
6029
+ content: '';
6030
+ border-left: 6px solid transparent;
6031
+ border-right: 6px solid transparent;
6032
+ border-bottom: 6px solid $wac-white;
6018
6033
  display: inline-block;
6019
- transition: 0.3s ease;
6020
- font-size: rem(14);
6021
- line-height: rem(16);
6022
- margin: 0 0 0 rem(30);
6034
+ }
6035
+
6036
+ &__item {
6037
+ border: none;
6038
+ padding: 8px 10px;
6039
+ background-color: $wac-white;
6023
6040
  cursor: pointer;
6024
- z-index: 1;
6025
- &:before {
6026
- content: '';
6027
- display: block;
6028
- position: absolute;
6029
- width: 100%;
6030
- max-width: 0;
6031
- height: 1px;
6032
- border-radius: 3px;
6033
- background-color: darken($wac-link-color, 15%);
6034
- left: 0;
6035
- bottom: -2px;
6036
- transition: 0.3s ease;
6041
+ transition: all 0.3s ease-in-out;
6042
+ z-index: 3;
6043
+ font-size: rem(12);
6044
+ text-align: left;
6045
+ border-radius: 0;
6046
+
6047
+ &:hover {
6048
+ background-color: darken($wac-white, 10%);
6049
+ color: $wac-main-text;
6050
+ transition: all 0.3s ease-in-out;
6037
6051
  }
6038
- &:hover,
6039
- &:focus {
6040
- color: darken($wac-link-color, 15%);
6041
- &:before {
6042
- max-width: 100%;
6043
- }
6052
+
6053
+ &--selected,
6054
+ &--selected:hover {
6055
+ background-color: $wac-wizishop-blue;
6056
+ color: $wac-white;
6057
+ transition: all 0.3s ease-in-out;
6044
6058
  }
6045
6059
  }
6046
6060
  }
6061
+
6062
+ &__background {
6063
+ position: fixed;
6064
+ top: 0;
6065
+ left: 0;
6066
+ width: 100vw;
6067
+ height: 100vh;
6068
+ z-index: 2;
6069
+ }
6047
6070
  }
6048
6071
  .wac-back {
6049
6072
  width: 40px;