@wizishop/angular-components 15.1.139 → 15.1.140

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 (10) hide show
  1. package/angular-components.scss +1463 -1433
  2. package/esm2020/lib/components/calendar/calendar.component.mjs +24 -5
  3. package/fesm2015/wizishop-angular-components.mjs +23 -4
  4. package/fesm2015/wizishop-angular-components.mjs.map +1 -1
  5. package/fesm2020/wizishop-angular-components.mjs +23 -4
  6. package/fesm2020/wizishop-angular-components.mjs.map +1 -1
  7. package/lib/components/calendar/calendar.component.d.ts +5 -1
  8. package/package.json +1 -1
  9. package/wizishop-angular-components-15.1.140.tgz +0 -0
  10. package/wizishop-angular-components-15.1.139.tgz +0 -0
package/angular-components.scss CHANGED
@@ -1234,1039 +1234,838 @@ wac-block {
1234
1234
  }
1235
1235
  }
1236
1236
  }
1237
- wac-calendar {
1238
- &.ng-touched.ng-invalid {
1239
- .wac-calendar__wrapper__select, .wac-calendar__wrapper__editInPlace, .wac-calendar__wrapper__select {
1240
- border-color: $wac-form-control-touched-and-invalid-border;
1237
+ .wac-button {
1238
+ @include flexbox();
1239
+ @include justify-content(center);
1240
+ @include align-items(center);
1241
+ position: relative;
1242
+ padding: 11px 19px;
1243
+ border-style: solid;
1244
+ border-width: 1px;
1245
+ border-radius: 3px;
1246
+ box-sizing: border-box;
1247
+
1248
+ * {
1249
+ box-sizing: border-box;
1250
+ }
1251
+
1252
+ &.width-auto {
1253
+ width: fit-content;
1254
+ }
1255
+
1256
+ &.white-space-no-wrap {
1257
+ white-space: nowrap;
1258
+ }
1259
+
1260
+ &.no-padding {
1261
+ padding-left: 0!important;
1262
+ padding-right: 0!important;
1263
+ }
1264
+
1265
+ &.is-green.opacity {
1266
+ background-color: $wac-tag-success-light;
1267
+ border-color: transparent!important;
1268
+ transition: .3s;
1269
+ i {
1270
+ color: $wac-tag-success;
1271
+ }
1272
+ &:hover, &:focus {
1273
+ background-color: $wac-tag-success;
1274
+ i {
1275
+ color: $wac-white;
1276
+ }
1277
+ }
1278
+ }
1279
+ &.is-evolup.opacity {
1280
+ background-color: $wac-evolup-green-opacity;
1281
+ border-color: transparent!important;
1282
+ transition: .3s;
1283
+ i {
1284
+ color: $wac-evolup-green;
1285
+ }
1286
+ &:hover, &:focus {
1287
+ background-color: $wac-evolup-green;
1288
+ i {
1289
+ color: $wac-white;
1290
+ }
1241
1291
  }
1242
1292
  }
1243
- }
1244
1293
 
1245
- .wac-calendar {
1246
- position: relative;
1247
- margin: 0 0 20px;
1248
- width: 268px;
1249
- &--open {
1250
- z-index: 9;
1251
- .wac-calendar {
1252
- &__absolute {
1253
- visibility: visible;
1254
- opacity: 1;
1255
- transition: 0.3s ease opacity 0.1s, 0s visibility linear 0s;
1294
+ &.static-width {
1295
+ width: 40px;
1296
+ min-width: 40px;
1297
+ max-width: 40px;
1298
+ }
1299
+
1300
+ &.is-blue.opacity {
1301
+ background-color: $wac-wizishop-blue-button-light;
1302
+ border-color: transparent!important;
1303
+ transition: .3s;
1304
+ i {
1305
+ color: $wac-wizishop-blue-button;
1306
+ }
1307
+ &:hover, &:focus {
1308
+ background-color: $wac-wizishop-blue-button;
1309
+ i {
1310
+ color: $wac-white;
1256
1311
  }
1257
1312
  }
1313
+
1314
+ .wac-button__tooltips {
1315
+ background-color: $wac-wizishop-blue-button!important;
1316
+ color: $white!important;
1317
+ }
1258
1318
  }
1259
- &--edit {
1319
+
1320
+ &.animationText {
1321
+ width: rem(40);
1322
+ height: rem(40);
1323
+ padding: 0!important;
1324
+ border-radius: 3px;
1325
+ transition: 0s linear .3s!important;
1260
1326
  display: flex;
1261
- flex-direction: column;
1262
- justify-content: flex-start;
1327
+ justify-content: center;
1263
1328
  align-items: center;
1264
- align-content: center;
1265
- & > * {
1266
- display: inline-block;
1267
- &:nth-child(2) {
1268
- margin: 0 10px;
1329
+ cursor: pointer;
1330
+ border: none;
1331
+ position: relative;
1332
+ &:hover, &:focus {
1333
+ transition: 0s!important;
1334
+ border-radius: 3px 0 0 3px;
1335
+ &.animation-right {
1336
+ border-radius: 0 3px 3px 0;
1337
+ }
1338
+ .wac-button__animation {
1339
+ transition: .3s ease!important;
1269
1340
  }
1270
1341
  }
1271
1342
  }
1272
- &--no-margin {
1273
- margin: 0;
1274
- .wac-calendar__autoHide {
1275
- margin: 0;
1343
+
1344
+ &.small {
1345
+ padding: rem(4) rem(15);
1346
+ }
1347
+
1348
+ &__wrapper {
1349
+ position: relative;
1350
+ z-index: 2;
1351
+ color: $wac-white;
1352
+ font-size: 14px;
1353
+ line-height: 16px;
1354
+ font-weight: 500;
1355
+
1356
+ i {
1357
+ margin-right: 1.4px;
1276
1358
  }
1277
1359
  }
1278
- &--onlyDate {
1279
- .wac-calendar__wrapper__input__time, .wac-calendar__wrapper__input__date:after {
1280
- display: none;
1360
+
1361
+ .loading-class {
1362
+ display: flex;
1363
+ align-items: center;
1364
+ gap: 5px;
1365
+ }
1366
+
1367
+ &__coin {
1368
+ margin: 0 0 0 rem(15);
1369
+ display: flex;
1370
+ align-items: center;
1371
+ justify-content: center;
1372
+ border-radius: 40px;
1373
+ padding: 4px 6px;
1374
+ background-color: #F8EDD2;
1375
+ float: right;
1376
+ z-index: 2;
1377
+ position: relative;
1378
+ i {
1379
+ font-size: rem(18);
1380
+ color: #FDCD52;
1381
+ margin: 0 5px 0 0;
1281
1382
  }
1282
- .wac-calendar__wrapper__input {
1283
- max-width: 160px;
1284
- min-width: 160px;
1383
+ > span {
1384
+ font-size: rem(14);
1385
+ line-height: 1;
1386
+ color: #E0B146;
1387
+ font-weight: 600;
1388
+ letter-spacing: 0;
1285
1389
  }
1286
1390
  }
1287
- &__label {
1288
- font-size: rem(14) !important;
1289
- line-height: rem(16) !important;
1290
- margin: 0 0 10px !important;
1291
- color: $wac-color-text-grey !important;
1292
- cursor: pointer;
1293
1391
 
1294
- &.bold {
1295
- font-weight: 500;
1392
+ &__animation {
1393
+ overflow: hidden;
1394
+ max-width: 0;
1395
+ height: 40px;
1396
+ position: absolute;
1397
+ top: 0;
1398
+ left: 95%;
1399
+ z-index: 2;
1400
+ transition: .3s ease!important;
1401
+ .animation-right & {
1402
+ left: auto;
1403
+ right: 94%;
1404
+ > span {
1405
+ border-radius: 3px 0 0 3px;
1406
+ padding: 0 0 0 20px;
1407
+ }
1408
+ }
1409
+ &__text {
1410
+ position: absolute;
1411
+ top: 0;
1412
+ left: 0;
1413
+ width: auto;
1414
+ white-space: nowrap;
1415
+ height: rem(40);
1416
+ line-height: rem(40);
1417
+ color: $wac-white !important;
1418
+ border-radius: 0 3px 3px 0;
1419
+ padding: 0 20px 0 0;
1420
+ font-size: rem(14);
1421
+ .is-success & {
1422
+ background-color: $wac-green-color;
1423
+ }
1424
+ .is-danger & {
1425
+ background-color: $wac-primary-button;
1426
+ }
1296
1427
  }
1297
1428
  }
1298
- &__autoHide {
1299
- max-width: 300px;
1300
- position: relative;
1429
+
1430
+ &.deletePosition-center .wac-button__confirmDelete {
1431
+ left: 50%;
1432
+ transform: translateX(-50%) translateY(-1px);
1301
1433
  }
1302
- &__wrapper {
1303
- &__input {
1304
- border-radius: 3px;
1305
- display: flex;
1306
- justify-content: flex-start;
1307
- align-items: center;
1308
- align-content: center;
1309
- min-width: 240px;
1310
- max-width: 240px;
1311
- padding: 7px 20px;
1312
- border: 1px solid $wac-border-form;
1313
- cursor: pointer;
1314
- &__icon {
1315
- width: 16px;
1316
- margin: 0 10px 0 0;
1317
- display: flex;
1318
- justify-content: space-between;
1319
- align-items: center;
1320
- align-content: center;
1321
- cursor: pointer;
1322
- &:hover,
1323
- &:focus {
1324
- i {
1325
- color: darken($wac-wizishop-blue, 15%);
1326
- }
1327
- }
1328
- i {
1329
- color: $wac-second-color;
1330
- font-size: rem(18);
1331
- transition: color 300ms ease;
1332
- }
1333
- }
1334
- &__date {
1335
- width: auto;
1336
- white-space: nowrap;
1337
- position: relative;
1338
- color: $wac-main-text;
1339
- font-size: rem(14);
1340
- line-height: rem(24);
1341
- margin: 0 15px 0 0;
1342
- letter-spacing: 0.65px;
1343
- &:after {
1344
- content: '';
1345
- display: block;
1346
- position: absolute;
1347
- width: 1px;
1348
- height: 15px;
1349
- background-color: $wac-input-border;
1350
- top: 50%;
1351
- right: -15px;
1352
- transform: translateY(-50%);
1353
- }
1434
+
1435
+ &.deletePosition-right .wac-button__confirmDelete {
1436
+ right: 0;
1437
+ transform: translateY(-1px);
1438
+ }
1439
+
1440
+ &.deletePosition-left .wac-button__confirmDelete {
1441
+ left: 0;
1442
+ transform: translateY(-1px);
1443
+ }
1444
+
1445
+ &__confirmDelete {
1446
+ overflow: hidden;
1447
+ max-width: 0;
1448
+ height: 40px;
1449
+ position: absolute;
1450
+ top: 0;
1451
+ z-index: 2;
1452
+ transition: .3s ease!important;
1453
+ border-radius: 3px;
1454
+
1455
+
1456
+ .is-success & {
1457
+ background-color: $wac-green-color;
1458
+ &:hover, &:focus {
1459
+ background-color: darken($wac-green-color, 15%);
1354
1460
  }
1355
- &__time {
1356
- width: auto;
1357
- white-space: nowrap;
1358
- font-size: rem(14);
1359
- line-height: rem(24);
1360
- color: $wac-main-text;
1361
- margin: 0 15px;
1362
- letter-spacing: 1.3px;
1461
+ }
1462
+ .is-danger & {
1463
+ background-color: $wac-primary-button;
1464
+ &:hover, &:focus {
1465
+ background-color: darken($wac-primary-button, 15%);
1363
1466
  }
1364
- &__close {
1365
- width: 10px;
1366
- cursor: pointer;
1367
- i {
1368
- font-size: 14px;
1369
- transition: color 300ms ease;
1370
- color: $wac-primary-button;
1371
- font-weight: 400;
1372
- }
1373
- &:hover,
1374
- &:focus {
1375
- i {
1376
- color: darken($wac-primary-button, 15%);
1377
- }
1378
- }
1467
+ }
1468
+ &__text {
1469
+ position: absolute;
1470
+ top: 0;
1471
+ left: 50%;
1472
+ transform: translateX(-50%);
1473
+ width: auto;
1474
+ white-space: nowrap;
1475
+ height: rem(40);
1476
+ line-height: rem(40);
1477
+ color: $wac-white !important;
1478
+ padding: 0 20px;
1479
+ font-size: rem(14);
1480
+ opacity: 0;
1481
+ transition: .3s ease;
1482
+ }
1483
+ }
1484
+
1485
+ &.step-delete {
1486
+ i {
1487
+ transition: .3s ease!important;
1488
+ opacity: 0!important;
1489
+ }
1490
+ .wac-button__confirmDelete {
1491
+ transition: .6s ease .3s!important;
1492
+ &__text {
1493
+ opacity: 1;
1494
+ transition: .3s ease .9s;
1379
1495
  }
1380
1496
  }
1381
- &__editInPlace {
1382
- display: flex;
1383
- justify-content: space-between;
1384
- padding: 5px 0;
1385
- position: relative;
1386
- align-content: center;
1387
- align-items: center;
1388
- cursor: pointer;
1389
- &:after {
1390
- position: absolute;
1391
- content: '';
1392
- border-bottom: dashed 1px $wac-calendar-primary;
1393
- width: 100%;
1394
- bottom: 0;
1395
- left: 0;
1497
+ }
1498
+
1499
+ &.alone {
1500
+ padding: 7px 14.6px;
1501
+
1502
+ .wac-button__wrapper i {
1503
+ margin-right: 0;
1504
+ }
1505
+ }
1506
+
1507
+ &.is-outlined {
1508
+ &:hover,
1509
+ &.hover {
1510
+ .wac-button__wrapper, .wac-button__animation {
1511
+ color: $wac-white;
1512
+ transition: color 0.3s ease-in-out;
1396
1513
  }
1397
- &__icon {
1398
- width: 12px;
1399
- margin: 0 5px 0 0;
1400
- display: flex;
1401
- justify-content: space-between;
1402
- align-items: center;
1403
- align-content: center;
1404
- i {
1405
- font-size: rem(14);
1406
- color: $wac-wizishop-blue;
1407
- transition: color 300ms ease;
1514
+ }
1515
+ }
1516
+
1517
+ &.is-dark {
1518
+ background-color: $wac-main-text;
1519
+ border-color: $wac-main-text;
1520
+ transition: background-color 0.3s ease-in-out;
1521
+
1522
+ .wac-button__loader {
1523
+ background-color: $wac-main-text;
1524
+ }
1525
+
1526
+ .wac-button__tooltips {
1527
+ background-color: $wac-main-text-lighten!important;
1528
+ color: $wac-white!important;
1529
+
1530
+ &.right {
1531
+ &:before {
1532
+ border-color: transparent $wac-main-text-lighten transparent transparent;
1408
1533
  }
1409
1534
  }
1410
- &__date {
1411
- position: relative;
1412
- color: $wac-header-color;
1413
- font-size: rem(14);
1414
- width: auto;
1415
- transition: 300ms ease;
1416
- white-space: nowrap;
1417
- }
1418
- &:hover,
1419
- &:focus {
1420
- .wac-calendar {
1421
- &__wrapper {
1422
- &__editInPlace {
1423
- &__date {
1424
- color: darken($wac-header-color, 30%);
1425
- }
1426
- &__icon {
1427
- i {
1428
- color: darken($wac-wizishop-blue, 15%);
1429
- }
1430
- }
1431
- }
1432
- }
1535
+
1536
+ &.left {
1537
+ &:before {
1538
+ border-color: transparent transparent transparent $wac-main-text-lighten;
1433
1539
  }
1434
1540
  }
1435
- }
1436
- &__select {
1437
- border-radius: 3px;
1438
- display: flex;
1439
- justify-content: flex-start;
1440
- align-items: center;
1441
- align-content: center;
1442
- min-width: 220px;
1443
- max-width: 220px;
1444
- padding: 11px 19px;
1445
- border: 1px solid $wac-input-border;
1446
- cursor: pointer;
1447
- background: $wac-white no-repeat center right 15px
1448
- 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);
1449
- &__icon {
1450
- width: 16px;
1451
- margin: 0 10px 0 0;
1452
- display: flex;
1453
- justify-content: space-between;
1454
- align-items: center;
1455
- align-content: center;
1456
- cursor: pointer;
1457
- &:hover,
1458
- &:focus {
1459
- i {
1460
- color: darken($wac-second-color, 15%);
1461
- }
1462
- }
1463
- i {
1464
- font-size: rem(18);
1465
- font-weight: 400;
1466
- color: $wac-second-color;
1467
- transition: color 300ms ease;
1541
+
1542
+ &.top-center {
1543
+ &:before {
1544
+ border-color: $wac-main-text-lighten transparent transparent transparent;
1468
1545
  }
1469
1546
  }
1470
- &__date {
1471
- width: auto;
1472
- position: relative;
1473
- color: $wac-header-color;
1474
- font-size: rem(14);
1475
- white-space: nowrap;
1476
- margin: 0;
1477
- &:after {
1478
- display: none;
1547
+
1548
+ &.top-right {
1549
+ &:before {
1550
+ border-color: $wac-main-text-lighten transparent transparent transparent;
1479
1551
  }
1480
1552
  }
1481
- &__close {
1482
- width: 10px;
1483
- cursor: pointer;
1484
- i {
1485
- font-size: 14px;
1486
- transition: color 300ms ease;
1487
- color: $wac-primary-button;
1488
- }
1489
- &:hover,
1490
- &:focus {
1491
- i {
1492
- color: darken($wac-primary-button, 15%);
1493
- }
1553
+
1554
+ &.top-left {
1555
+ &:before {
1556
+ border-color: $wac-main-text-lighten transparent transparent transparent;
1494
1557
  }
1495
1558
  }
1496
- }
1497
- }
1498
- &__absolute {
1499
- position: absolute;
1500
- top: 100%;
1501
- left: 50%;
1502
- transform: translateX(-50%);
1503
- visibility: hidden;
1504
- opacity: 0;
1505
- transition: 0.3s ease opacity, 0s visibility 0.31s;
1506
- border: 1px solid $wac-border-light;
1507
- background-color: $wac-white;
1508
- box-shadow: 3px 3px 20px $wac-calendar-box-shadow;
1509
- border-radius: 3px;
1510
- max-width: 268px;
1511
- min-width: 268px;
1512
- &.bottom {
1513
- transform: translateX(-50%) translateY(10px);
1514
- }
1515
- &.top {
1516
- top: auto;
1517
- bottom: 100%;
1518
- transform: translateX(-50%) translateY(-10px);
1519
- }
1520
- &.left {
1521
- transform: translateY(-50%) translateX(-10px);
1522
- left: auto;
1523
- right: 100%;
1524
- top: 50%;
1525
- }
1526
- &.right {
1527
- transform: translateY(-50%) translateX(10px);
1528
- left: 100%;
1529
- top: 50%;
1530
- }
1531
- &.left-top {
1532
- left: auto;
1533
- right: 100%;
1534
- top: auto;
1535
- bottom: 0;
1536
- transform: translateY(-10px) translateX(-10px);
1537
- }
1538
- &.left-bottom {
1539
- left: auto;
1540
- right: 100%;
1541
- top: 0;
1542
- transform: translateY(10px) translateX(-10px);
1543
- }
1544
- &.right-top {
1545
- left: 100%;
1546
- top: auto;
1547
- bottom: 0;
1548
- transform: translateY(-10px) translateX(10px);
1549
- }
1550
- &.right-bottom {
1551
- left: 100%;
1552
- top: 0;
1553
- transform: translateY(10px) translateX(10px);
1554
- }
1555
- & > * > * {
1556
- width: 265px;
1557
- }
1558
- &__time {
1559
- position: relative;
1560
- background-color: $wac-white;
1561
- padding: 20px;
1562
- width: 100%;
1563
- &:before {
1564
- content: '';
1565
- width: 100%;
1566
- height: 5px;
1567
- bottom: 100%;
1568
- margin-bottom: -2px;
1569
- display: block;
1570
- position: absolute;
1571
- left: 0;
1572
- background-color: $wac-white;
1559
+
1560
+ &.bottom-center {
1561
+ &:before {
1562
+ border-color: transparent transparent $wac-main-text-lighten transparent;
1563
+ }
1573
1564
  }
1574
- &__wrapper {
1575
- width: 100% !important;
1576
- display: flex;
1577
- align-items: center;
1578
- align-content: center;
1579
- justify-content: center;
1580
- min-height: 42px;
1581
- position: relative;
1565
+
1566
+ &.bottom-right {
1582
1567
  &:before {
1583
- content: '';
1584
- display: block;
1585
- background-color: $wac-wizishop-blue;
1586
- width: 4px;
1587
- height: 4px;
1588
- border-radius: 50%;
1589
- position: absolute;
1590
- top: 50%;
1591
- left: 50%;
1592
- transform: translate(-50%, -50%);
1593
- margin-top: -4px;
1568
+ border-color: transparent transparent $wac-main-text-lighten transparent;
1594
1569
  }
1595
- &:after {
1596
- content: '';
1597
- display: block;
1598
- background-color: $wac-wizishop-blue;
1599
- width: 4px;
1600
- height: 4px;
1601
- border-radius: 50%;
1602
- position: absolute;
1603
- top: 50%;
1604
- left: 50%;
1605
- transform: translate(-50%, -50%);
1606
- margin-top: 4px;
1570
+ }
1571
+
1572
+ &.bottom-left {
1573
+ &:before {
1574
+ border-color: transparent transparent $wac-main-text-lighten transparent;
1607
1575
  }
1608
- &__hours,
1609
- &__minutes {
1610
- position: relative;
1611
- width: 100px;
1612
- display: flex;
1613
- flex-wrap: nowrap;
1614
- &__left,
1615
- &__right {
1616
- width: 100%;
1617
- display: flex;
1618
- flex-wrap: nowrap;
1619
- justify-content: center;
1620
- flex-direction: column;
1621
- align-items: center;
1622
- align-content: center;
1623
- }
1624
- &__btn {
1625
- display: flex;
1626
- justify-content: center;
1627
- flex-direction: column;
1628
- align-items: center;
1629
- align-content: center;
1630
- width: 40px;
1631
- height: 20px;
1632
- background-color: $wac-gray-background;
1633
- box-shadow: none;
1634
- border: none;
1635
- cursor: pointer;
1636
- transition: 0.3s ease;
1637
- &:hover,
1638
- &:focus {
1639
- background-color: $wac-wizishop-blue;
1640
- i {
1641
- color: $wac-white;
1642
- }
1643
- }
1644
- &:first-child {
1645
- margin: 0 0 2px;
1646
- }
1647
- i {
1648
- font-size: rem(10);
1649
- color: $wac-second-color;
1650
- margin: 0;
1651
- }
1652
- }
1576
+ }
1577
+ }
1653
1578
 
1654
- input::-webkit-outer-spin-button,
1655
- input::-webkit-inner-spin-button {
1656
- -webkit-appearance: none;
1657
- margin: 0;
1658
- }
1579
+ &:hover,
1580
+ &.hover {
1581
+ background-color: $wac-main-text-lighten;
1582
+ border-color: $wac-main-text-lighten;
1583
+ transition: background-color 0.3s ease-in-out;
1584
+ }
1659
1585
 
1660
- /* Firefox */
1661
- input[type='number'] {
1662
- -moz-appearance: textfield;
1663
- }
1586
+ &:focus,
1587
+ &.focus {
1588
+ background-color: $wac-main-text-lighten;
1589
+ border-color: $wac-main-text-lighten;
1590
+ transition: background-color 0.3s ease-in-out;
1591
+ }
1664
1592
 
1665
- input {
1666
- border: none;
1667
- text-align: center;
1668
- font-size: rem(24);
1669
- color: $wac-wizishop-blue;
1670
- padding: 0;
1671
- line-height: 1.4;
1672
- margin: 0;
1673
- width: 100%;
1674
- }
1675
- }
1676
- &__hours {
1677
- margin: 0 10px 0 0;
1593
+ &.is-outlined {
1594
+ background-color: transparent;
1595
+ border-color: $wac-main-text;
1596
+
1597
+ .wac-button__loader {
1598
+ background-color: $wac-main-text;
1599
+ }
1600
+
1601
+ .wac-button__wrapper, .wac-button__animation {
1602
+ color: $wac-main-text;
1603
+ transition: color 0.3s ease-in-out;
1604
+ }
1605
+
1606
+ &:hover,
1607
+ &.hover {
1608
+ background-color: $wac-main-text;
1609
+ border-color: $wac-main-text;
1610
+ .wac-button__wrapper, .wac-button__animation {
1611
+ color: $wac-white;
1612
+ transition: color 0.3s ease-in-out;
1678
1613
  }
1679
- &__minutes {
1680
- margin: 0 0 0 10px;
1614
+ }
1615
+
1616
+ &:focus,
1617
+ &.focus {
1618
+ background-color: $wac-main-text;
1619
+ border-color: $wac-main-text;
1620
+ transition: background-color 0.3s ease-in-out;
1621
+ .wac-button__wrapper, .wac-button__animation {
1622
+ color: $wac-white;
1623
+ transition: color 0.3s ease-in-out;
1681
1624
  }
1682
1625
  }
1683
1626
  }
1684
1627
  }
1685
- }
1686
-
1687
- .datetimepicker-dummy .datetimepicker-clear-button {
1688
- top: -3px !important;
1689
- }
1690
-
1691
- .datetimepicker-dummy .datetimepicker-dummy-wrapper {
1692
- border: 1px solid $wac-border-color;
1693
- border-radius: rem(3);
1694
1628
 
1695
- &:hover,
1696
- &:focus {
1697
- border: 1px solid $wac-wizishop-blue;
1698
- }
1699
- }
1629
+ &.is-info {
1630
+ background-color: $wac-wizishop-blue-button;
1631
+ border-color: $wac-wizishop-blue-button;
1632
+ transition: background-color 0.3s ease-in-out;
1700
1633
 
1634
+ .wac-button__loader {
1635
+ background-color: $wac-wizishop-blue-button-darken;
1636
+ }
1701
1637
 
1702
- .datetimepicker {
1703
- box-shadow: none !important;
1704
- &-wrapper {
1705
- border: none !important;
1706
- box-shadow: none;
1707
- background: $wac-white;
1708
- }
1709
- }
1710
-
1711
- .datepicker {
1712
- .datepicker {
1713
- &-nav {
1714
- background: $wac-white !important;
1715
- color: $wac-main-text !important;
1716
- padding: 15px !important;
1638
+ &:hover,
1639
+ &.hover {
1640
+ background-color: $wac-wizishop-blue-button-darken;
1641
+ border-color: $wac-wizishop-blue-button-darken;
1642
+ transition: background-color 0.3s ease-in-out;
1717
1643
  }
1718
- }
1719
- }
1720
-
1721
- .datetimepicker .datepicker-nav .datepicker-nav-month,
1722
- .datetimepicker .datepicker-nav .datepicker-nav-year {
1723
- color: $wac-main-text !important;
1724
- font-weight: 500 !important;
1725
- &:hover,
1726
- &:focus {
1727
- color: $wac-wizishop-blue !important;
1728
- }
1729
- }
1730
1644
 
1731
- .datepicker-nav-year {
1732
- font-weight: 500 !important;
1733
- }
1645
+ &:focus,
1646
+ &.focus {
1647
+ background-color: $wac-wizishop-blue-button-focus;
1648
+ border-color: $wac-wizishop-blue-button-focus;
1649
+ transition: background-color 0.3s ease-in-out;
1650
+ }
1734
1651
 
1735
- .datetimepicker .datepicker-nav .datepicker-nav-previous,
1736
- .datetimepicker .datepicker-nav .datepicker-nav-next {
1737
- border-radius: 3px;
1738
- color: $wac-main-text !important;
1739
- width: 25px !important;
1740
- height: 25px !important;
1741
- display: flex;
1742
- justify-content: center;
1743
- align-items: center;
1744
- align-content: center;
1745
- border: 1px solid $wac-border-light;
1746
- transition: 0.3s ease;
1747
- > svg {
1748
- display: none !important;
1749
- }
1750
- }
1652
+ &.opacity {
1653
+ background-color: $wac-wizishop-blue-button-light;
1654
+ border-color: transparent!important;
1751
1655
 
1752
- .datetimepicker .datepicker-nav .datepicker-nav-previous {
1753
- background: $wac-white
1754
- 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")
1755
- center center no-repeat !important;
1756
- background-size: 6px auto !important;
1757
- &:hover,
1758
- &:focus {
1759
- border-color: $wac-wizishop-blue !important;
1760
- }
1761
- }
1656
+ i {
1657
+ color: $wac-wizishop-blue-button;
1658
+ }
1762
1659
 
1763
- .datetimepicker .datepicker-nav .datepicker-nav-next {
1764
- background: $wac-white
1765
- 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")
1766
- center center no-repeat !important;
1767
- background-size: 6px auto !important;
1768
- &:hover,
1769
- &:focus {
1770
- border-color: $wac-wizishop-blue !important;
1771
- }
1772
- }
1660
+ &:hover,
1661
+ &.hover {
1662
+ background-color: $wac-wizishop-blue-button;
1663
+ border-color: $wac-wizishop-blue-button;
1664
+ transition: background-color 0.3s ease-in-out;
1665
+ i {
1666
+ color: $white;
1667
+ }
1668
+ }
1773
1669
 
1774
- .wac-calendar__absolute {
1775
- .datetimepicker .datepicker-body .datepicker-weekdays {
1776
- padding: 0 15px;
1777
- }
1778
- .datepicker-weekdays {
1779
- height: 14px;
1780
- margin: 0 0 rem(12);
1781
- .datepicker-date {
1782
- font-size: rem(12);
1783
- white-space: nowrap;
1784
- line-height: 1;
1785
- padding: 0 !important;
1786
- color: $wac-secondary-color !important;
1670
+ &:focus,
1671
+ &.focus {
1672
+ background-color: $wac-wizishop-blue-button;
1673
+ border-color: $wac-wizishop-blue-button;
1674
+ transition: background-color 0.3s ease-in-out;
1675
+ i {
1676
+ color: $white;
1677
+ }
1678
+ }
1787
1679
  }
1788
- }
1789
- .datepicker-days {
1790
- padding: 0 15px !important;
1791
- }
1792
- .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active {
1793
- background-color: $wac-wizishop-blue;
1794
- }
1795
- .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover {
1796
- border-color: $wac-wizishop-blue;
1797
- }
1798
- }
1799
-
1800
- .datetimepicker .datetimepicker-footer {
1801
- display: none;
1802
- }
1803
- .wac-button {
1804
- @include flexbox();
1805
- @include justify-content(center);
1806
- @include align-items(center);
1807
- position: relative;
1808
- padding: 11px 19px;
1809
- border-style: solid;
1810
- border-width: 1px;
1811
- border-radius: 3px;
1812
- box-sizing: border-box;
1813
1680
 
1814
- * {
1815
- box-sizing: border-box;
1816
- }
1681
+ &.is-outlined {
1682
+ background-color: transparent;
1683
+ border-color: $wac-wizishop-blue-button;
1817
1684
 
1818
- &.width-auto {
1819
- width: fit-content;
1820
- }
1685
+ .wac-button__loader {
1686
+ background-color: $wac-wizishop-blue-button-darken;
1687
+ }
1821
1688
 
1822
- &.white-space-no-wrap {
1823
- white-space: nowrap;
1824
- }
1689
+ .wac-button__wrapper, .wac-button__animation {
1690
+ color: $wac-wizishop-blue-button;
1691
+ transition: color 0.3s ease-in-out;
1692
+ }
1825
1693
 
1826
- &.no-padding {
1827
- padding-left: 0!important;
1828
- padding-right: 0!important;
1829
- }
1694
+ &:hover,
1695
+ &.hover {
1696
+ background-color: $wac-wizishop-blue-button;
1697
+ border-color: $wac-wizishop-blue-button;
1698
+ }
1830
1699
 
1831
- &.is-green.opacity {
1832
- background-color: $wac-tag-success-light;
1833
- border-color: transparent!important;
1834
- transition: .3s;
1835
- i {
1836
- color: $wac-tag-success;
1837
- }
1838
- &:hover, &:focus {
1839
- background-color: $wac-tag-success;
1840
- i {
1841
- color: $wac-white;
1700
+ &:focus,
1701
+ &.focus {
1702
+ background-color: $wac-wizishop-blue-button-focus;
1703
+ border-color: $wac-wizishop-blue-button-focus;
1704
+ transition: background-color 0.3s ease-in-out;
1842
1705
  }
1843
1706
  }
1844
- }
1845
- &.is-evolup.opacity {
1846
- background-color: $wac-evolup-green-opacity;
1847
- border-color: transparent!important;
1848
- transition: .3s;
1849
- i {
1850
- color: $wac-evolup-green;
1851
- }
1852
- &:hover, &:focus {
1853
- background-color: $wac-evolup-green;
1854
- i {
1855
- color: $wac-white;
1707
+
1708
+ &.is-loading {
1709
+ &:hover,
1710
+ &.hover {
1711
+ background-color: $wac-wizishop-blue-button;
1712
+ transition: background-color 0.3s ease-in-out;
1713
+ }
1714
+ &:focus,
1715
+ &.focus {
1716
+ background-color: $wac-wizishop-blue-button-focus;
1717
+ border-color: $wac-wizishop-blue-button-focus;
1718
+ transition: background-color 0.3s ease-in-out;
1856
1719
  }
1857
1720
  }
1858
1721
  }
1859
1722
 
1860
- &.static-width {
1861
- width: 40px;
1862
- min-width: 40px;
1863
- max-width: 40px;
1864
- }
1865
-
1866
- &.is-blue.opacity {
1867
- background-color: $wac-wizishop-blue-button-light;
1723
+ &.is-clear {
1724
+ background-color: transparent!important;
1868
1725
  border-color: transparent!important;
1869
- transition: .3s;
1870
- i {
1871
- color: $wac-wizishop-blue-button;
1726
+ color: $wac-second-color!important;
1727
+ transition: 0.3s ease-in-out;
1728
+
1729
+ .wac-button__loader {
1730
+ background-color: transparent;
1872
1731
  }
1873
- &:hover, &:focus {
1874
- background-color: $wac-wizishop-blue-button;
1875
- i {
1876
- color: $wac-white;
1732
+
1733
+ .wac-button__wrapper {
1734
+ color: $wac-second-color;
1735
+ }
1736
+
1737
+ &:hover,
1738
+ &.hover {
1739
+ background-color: transparent!important;
1740
+ border-color: transparent!important;
1741
+ color: $wac-wizishop-blue-button!important;
1742
+ transition: 0.3s ease-in-out;
1743
+ .wac-button__wrapper {
1744
+ color: $wac-wizishop-blue-button;
1877
1745
  }
1878
1746
  }
1879
1747
 
1880
- .wac-button__tooltips {
1881
- background-color: $wac-wizishop-blue-button!important;
1882
- color: $white!important;
1748
+ &:focus,
1749
+ &.focus {
1750
+ background-color: transparent!important;
1751
+ border-color: transparent!important;
1752
+ color: $wac-wizishop-blue-button!important;
1753
+ transition: 0.3s ease-in-out;
1754
+ .wac-button__wrapper {
1755
+ color: $wac-wizishop-blue-button;
1756
+ }
1883
1757
  }
1884
1758
  }
1885
1759
 
1886
- &.animationText {
1887
- width: rem(40);
1888
- height: rem(40);
1889
- padding: 0!important;
1890
- border-radius: 3px;
1891
- transition: 0s linear .3s!important;
1892
- display: flex;
1893
- justify-content: center;
1894
- align-items: center;
1895
- cursor: pointer;
1896
- border: none;
1897
- position: relative;
1898
- &:hover, &:focus {
1899
- transition: 0s!important;
1900
- border-radius: 3px 0 0 3px;
1901
- &.animation-right {
1902
- border-radius: 0 3px 3px 0;
1903
- }
1904
- .wac-button__animation {
1905
- transition: .3s ease!important;
1906
- }
1907
- }
1908
- }
1909
-
1910
- &.small {
1911
- padding: rem(4) rem(15);
1912
- }
1913
-
1914
- &__wrapper {
1915
- position: relative;
1916
- z-index: 2;
1917
- color: $wac-white;
1918
- font-size: 14px;
1919
- line-height: 16px;
1920
- font-weight: 500;
1760
+ &.is-orange {
1761
+ background-color: $wac-orange-color;
1762
+ border-color: $wac-orange-color;
1763
+ transition: background-color 0.3s ease-in-out;
1921
1764
 
1922
- i {
1923
- margin-right: 1.4px;
1765
+ .wac-button__loader {
1766
+ background-color: $wac-orange-color-darken;
1924
1767
  }
1925
- }
1926
1768
 
1927
- .loading-class {
1928
- display: flex;
1929
- align-items: center;
1930
- gap: 5px;
1931
- }
1932
-
1933
- &__coin {
1934
- margin: 0 0 0 rem(15);
1935
- display: flex;
1936
- align-items: center;
1937
- justify-content: center;
1938
- border-radius: 40px;
1939
- padding: 4px 6px;
1940
- background-color: #F8EDD2;
1941
- float: right;
1942
- z-index: 2;
1943
- position: relative;
1944
- i {
1945
- font-size: rem(18);
1946
- color: #FDCD52;
1947
- margin: 0 5px 0 0;
1948
- }
1949
- > span {
1950
- font-size: rem(14);
1951
- line-height: 1;
1952
- color: #E0B146;
1953
- font-weight: 600;
1954
- letter-spacing: 0;
1769
+ &:hover,
1770
+ &.hover {
1771
+ background-color: $wac-orange-color-darken;
1772
+ border-color: $wac-orange-color-darken;
1773
+ transition: background-color 0.3s ease-in-out;
1955
1774
  }
1956
- }
1957
1775
 
1958
- &__animation {
1959
- overflow: hidden;
1960
- max-width: 0;
1961
- height: 40px;
1962
- position: absolute;
1963
- top: 0;
1964
- left: 95%;
1965
- z-index: 2;
1966
- transition: .3s ease!important;
1967
- .animation-right & {
1968
- left: auto;
1969
- right: 94%;
1970
- > span {
1971
- border-radius: 3px 0 0 3px;
1972
- padding: 0 0 0 20px;
1973
- }
1974
- }
1975
- &__text {
1976
- position: absolute;
1977
- top: 0;
1978
- left: 0;
1979
- width: auto;
1980
- white-space: nowrap;
1981
- height: rem(40);
1982
- line-height: rem(40);
1983
- color: $wac-white !important;
1984
- border-radius: 0 3px 3px 0;
1985
- padding: 0 20px 0 0;
1986
- font-size: rem(14);
1987
- .is-success & {
1988
- background-color: $wac-green-color;
1989
- }
1990
- .is-danger & {
1991
- background-color: $wac-primary-button;
1992
- }
1776
+ &:focus,
1777
+ &.focus {
1778
+ background-color: $wac-orange-color-focus;
1779
+ border-color: $wac-orange-color-focus;
1780
+ transition: background-color 0.3s ease-in-out;
1993
1781
  }
1994
- }
1995
-
1996
- &.deletePosition-center .wac-button__confirmDelete {
1997
- left: 50%;
1998
- transform: translateX(-50%) translateY(-1px);
1999
- }
2000
1782
 
2001
- &.deletePosition-right .wac-button__confirmDelete {
2002
- right: 0;
2003
- transform: translateY(-1px);
2004
- }
2005
-
2006
- &.deletePosition-left .wac-button__confirmDelete {
2007
- left: 0;
2008
- transform: translateY(-1px);
2009
- }
1783
+ &.is-outlined {
1784
+ background-color: transparent;
1785
+ border-color: $wac-orange-color;
2010
1786
 
2011
- &__confirmDelete {
2012
- overflow: hidden;
2013
- max-width: 0;
2014
- height: 40px;
2015
- position: absolute;
2016
- top: 0;
2017
- z-index: 2;
2018
- transition: .3s ease!important;
2019
- border-radius: 3px;
1787
+ .wac-button__loader {
1788
+ background-color: $wac-orange-color-darken;
1789
+ }
2020
1790
 
1791
+ .wac-button__wrapper, .wac-button__animation {
1792
+ color: $wac-orange-color;
1793
+ transition: color 0.3s ease-in-out;
1794
+ }
2021
1795
 
2022
- .is-success & {
2023
- background-color: $wac-green-color;
2024
- &:hover, &:focus {
2025
- background-color: darken($wac-green-color, 15%);
1796
+ &:hover,
1797
+ &.hover {
1798
+ background-color: $wac-orange-color;
1799
+ border-color: $wac-orange-color;
2026
1800
  }
2027
- }
2028
- .is-danger & {
2029
- background-color: $wac-primary-button;
2030
- &:hover, &:focus {
2031
- background-color: darken($wac-primary-button, 15%);
1801
+
1802
+ &:focus,
1803
+ &.focus {
1804
+ background-color: $wac-orange-color-focus;
1805
+ border-color: $wac-orange-color-focus;
1806
+ transition: background-color 0.3s ease-in-out;
2032
1807
  }
2033
1808
  }
2034
- &__text {
2035
- position: absolute;
2036
- top: 0;
2037
- left: 50%;
2038
- transform: translateX(-50%);
2039
- width: auto;
2040
- white-space: nowrap;
2041
- height: rem(40);
2042
- line-height: rem(40);
2043
- color: $wac-white !important;
2044
- padding: 0 20px;
2045
- font-size: rem(14);
2046
- opacity: 0;
2047
- transition: .3s ease;
2048
- }
2049
- }
2050
1809
 
2051
- &.step-delete {
2052
- i {
2053
- transition: .3s ease!important;
2054
- opacity: 0!important;
2055
- }
2056
- .wac-button__confirmDelete {
2057
- transition: .6s ease .3s!important;
2058
- &__text {
2059
- opacity: 1;
2060
- transition: .3s ease .9s;
1810
+ &.is-loading {
1811
+ &:hover,
1812
+ &.hover {
1813
+ background-color: $wac-orange-color;
1814
+ transition: background-color 0.3s ease-in-out;
1815
+ }
1816
+ &:focus,
1817
+ &.focus {
1818
+ background-color: $wac-orange-color-focus;
1819
+ border-color: $wac-orange-color-focus;
1820
+ transition: background-color 0.3s ease-in-out;
2061
1821
  }
2062
1822
  }
2063
1823
  }
2064
1824
 
2065
- &.alone {
2066
- padding: 7px 14.6px;
1825
+ &.is-pink {
1826
+ background-color: $wac-pink-color;
1827
+ border-color: $wac-pink-color;
1828
+ transition: background-color 0.3s ease-in-out;
2067
1829
 
2068
- .wac-button__wrapper i {
2069
- margin-right: 0;
1830
+ .wac-button__loader {
1831
+ background-color: $wac-pink-color-darken;
2070
1832
  }
2071
- }
2072
1833
 
2073
- &.is-outlined {
2074
1834
  &:hover,
2075
1835
  &.hover {
2076
- .wac-button__wrapper, .wac-button__animation {
2077
- color: $wac-white;
2078
- transition: color 0.3s ease-in-out;
2079
- }
1836
+ background-color: $wac-pink-color-darken;
1837
+ border-color: $wac-pink-color-darken;
1838
+ transition: background-color 0.3s ease-in-out;
2080
1839
  }
2081
- }
2082
1840
 
2083
- &.is-dark {
2084
- background-color: $wac-main-text;
2085
- border-color: $wac-main-text;
2086
- transition: background-color 0.3s ease-in-out;
2087
-
2088
- .wac-button__loader {
2089
- background-color: $wac-main-text;
1841
+ &:focus,
1842
+ &.focus {
1843
+ background-color: $wac-pink-color-focus;
1844
+ border-color: $wac-pink-color-focus;
1845
+ transition: background-color 0.3s ease-in-out;
2090
1846
  }
2091
1847
 
2092
- .wac-button__tooltips {
2093
- background-color: $wac-main-text-lighten!important;
2094
- color: $wac-white!important;
1848
+ &.is-outlined {
1849
+ background-color: transparent;
1850
+ border-color: $wac-pink-color;
2095
1851
 
2096
- &.right {
2097
- &:before {
2098
- border-color: transparent $wac-main-text-lighten transparent transparent;
2099
- }
1852
+ .wac-button__loader {
1853
+ background-color: $wac-pink-color-darken;
2100
1854
  }
2101
1855
 
2102
- &.left {
2103
- &:before {
2104
- border-color: transparent transparent transparent $wac-main-text-lighten;
2105
- }
1856
+ .wac-button__wrapper, .wac-button__animation {
1857
+ color: $wac-pink-color;
1858
+ transition: color 0.3s ease-in-out;
2106
1859
  }
2107
1860
 
2108
- &.top-center {
2109
- &:before {
2110
- border-color: $wac-main-text-lighten transparent transparent transparent;
2111
- }
1861
+ &:hover,
1862
+ &.hover {
1863
+ background-color: $wac-pink-color;
1864
+ border-color: $wac-pink-color;
2112
1865
  }
2113
1866
 
2114
- &.top-right {
2115
- &:before {
2116
- border-color: $wac-main-text-lighten transparent transparent transparent;
2117
- }
1867
+ &:focus,
1868
+ &.focus {
1869
+ background-color: $wac-pink-color-focus;
1870
+ border-color: $wac-pink-color-focus;
1871
+ transition: background-color 0.3s ease-in-out;
2118
1872
  }
1873
+ }
2119
1874
 
2120
- &.top-left {
2121
- &:before {
2122
- border-color: $wac-main-text-lighten transparent transparent transparent;
2123
- }
1875
+ &.is-loading {
1876
+ &:hover,
1877
+ &.hover {
1878
+ background-color: $wac-pink-color;
1879
+ transition: background-color 0.3s ease-in-out;
2124
1880
  }
2125
-
2126
- &.bottom-center {
2127
- &:before {
2128
- border-color: transparent transparent $wac-main-text-lighten transparent;
2129
- }
1881
+ &:focus,
1882
+ &.focus {
1883
+ background-color: $wac-pink-color-focus;
1884
+ border-color: $wac-pink-color-focus;
1885
+ transition: background-color 0.3s ease-in-out;
2130
1886
  }
1887
+ }
1888
+ }
2131
1889
 
2132
- &.bottom-right {
2133
- &:before {
2134
- border-color: transparent transparent $wac-main-text-lighten transparent;
2135
- }
2136
- }
1890
+ &.is-white {
1891
+ background-color: $wac-background-color;
1892
+ border-color: $wac-background-color;
1893
+ transition: background-color 0.3s ease-in-out;
2137
1894
 
2138
- &.bottom-left {
2139
- &:before {
2140
- border-color: transparent transparent $wac-main-text-lighten transparent;
2141
- }
2142
- }
1895
+ .wac-button__loader {
1896
+ background-color: $wac-background-color-darken;
1897
+ }
1898
+
1899
+ .wac-button__wrapper, .wac-button__animation {
1900
+ color: $wac-white;
1901
+ transition: color 0.3s ease-in-out;
2143
1902
  }
2144
1903
 
2145
1904
  &:hover,
2146
1905
  &.hover {
2147
- background-color: $wac-main-text-lighten;
2148
- border-color: $wac-main-text-lighten;
1906
+ background-color: $wac-background-color-darken;
1907
+ border-color: $wac-background-color-darken;
2149
1908
  transition: background-color 0.3s ease-in-out;
2150
1909
  }
2151
1910
 
2152
1911
  &:focus,
2153
1912
  &.focus {
2154
- background-color: $wac-main-text-lighten;
2155
- border-color: $wac-main-text-lighten;
1913
+ background-color: $wac-background-color-focus;
1914
+ border-color: $wac-background-color-focus;
2156
1915
  transition: background-color 0.3s ease-in-out;
2157
1916
  }
2158
1917
 
2159
1918
  &.is-outlined {
2160
1919
  background-color: transparent;
2161
- border-color: $wac-main-text;
1920
+ border-color: $wac-white;
2162
1921
 
2163
1922
  .wac-button__loader {
2164
- background-color: $wac-main-text;
1923
+ background-color: $wac-background-color-darken;
2165
1924
  }
2166
1925
 
2167
1926
  .wac-button__wrapper, .wac-button__animation {
2168
- color: $wac-main-text;
1927
+ color: $wac-white !important;
2169
1928
  transition: color 0.3s ease-in-out;
2170
1929
  }
2171
1930
 
2172
1931
  &:hover,
2173
1932
  &.hover {
2174
- background-color: $wac-main-text;
2175
- border-color: $wac-main-text;
1933
+ background-color: $wac-white;
1934
+ border-color: $wac-white;
2176
1935
  .wac-button__wrapper, .wac-button__animation {
2177
- color: $wac-white;
2178
- transition: color 0.3s ease-in-out;
2179
- }
1936
+ color: $wac-second-color !important;
1937
+ transition: color 0.3s ease-in-out;
1938
+ }
2180
1939
  }
2181
1940
 
2182
1941
  &:focus,
2183
1942
  &.focus {
2184
- background-color: $wac-main-text;
2185
- border-color: $wac-main-text;
1943
+ background-color: $wac-background-color-focus;
1944
+ border-color: $wac-background-color-focus;
2186
1945
  transition: background-color 0.3s ease-in-out;
2187
- .wac-button__wrapper, .wac-button__animation {
2188
- color: $wac-white;
2189
- transition: color 0.3s ease-in-out;
2190
- }
2191
1946
  }
2192
1947
  }
2193
1948
  }
2194
1949
 
2195
- &.is-info {
2196
- background-color: $wac-wizishop-blue-button;
2197
- border-color: $wac-wizishop-blue-button;
1950
+ &.is-grey {
1951
+ background-color: $wac-background-color;
1952
+ border-color: $wac-background-color;
2198
1953
  transition: background-color 0.3s ease-in-out;
2199
1954
 
2200
1955
  .wac-button__loader {
2201
- background-color: $wac-wizishop-blue-button-darken;
1956
+ background-color: $wac-background-color-darken;
2202
1957
  }
2203
1958
 
2204
- &:hover,
2205
- &.hover {
2206
- background-color: $wac-wizishop-blue-button-darken;
2207
- border-color: $wac-wizishop-blue-button-darken;
2208
- transition: background-color 0.3s ease-in-out;
1959
+ &.opacity {
1960
+ background-color: $wac-grey-light;
1961
+ &:hover, &:focus {
1962
+ background-color: $wac-wizishop-blue!important;
1963
+ border-color: $wac-wizishop-blue!important;
1964
+ color: $white!important;
1965
+ .wac-button__wrapper {
1966
+ color: $white!important;
1967
+ i {
1968
+ color: $white!important;
1969
+ }
1970
+ }
1971
+ }
2209
1972
  }
2210
1973
 
2211
- &:focus,
2212
- &.focus {
2213
- background-color: $wac-wizishop-blue-button-focus;
2214
- border-color: $wac-wizishop-blue-button-focus;
2215
- transition: background-color 0.3s ease-in-out;
2216
- }
1974
+ .wac-button__tooltips {
1975
+ background-color: $wac-background-color-darken!important;
1976
+ color: $wac-main-text!important;
2217
1977
 
2218
- &.opacity {
2219
- background-color: $wac-wizishop-blue-button-light;
2220
- border-color: transparent!important;
1978
+ &.right {
1979
+ &:before {
1980
+ border-color: transparent $wac-background-color-darken transparent transparent;
1981
+ }
1982
+ }
2221
1983
 
2222
- i {
2223
- color: $wac-wizishop-blue-button;
1984
+ &.left {
1985
+ &:before {
1986
+ border-color: transparent transparent transparent $wac-background-color-darken;
1987
+ }
2224
1988
  }
2225
1989
 
2226
- &:hover,
2227
- &.hover {
2228
- background-color: $wac-wizishop-blue-button;
2229
- border-color: $wac-wizishop-blue-button;
2230
- transition: background-color 0.3s ease-in-out;
2231
- i {
2232
- color: $white;
1990
+ &.top-center {
1991
+ &:before {
1992
+ border-color: $wac-background-color-darken transparent transparent transparent;
2233
1993
  }
2234
1994
  }
2235
1995
 
2236
- &:focus,
2237
- &.focus {
2238
- background-color: $wac-wizishop-blue-button;
2239
- border-color: $wac-wizishop-blue-button;
2240
- transition: background-color 0.3s ease-in-out;
2241
- i {
2242
- color: $white;
1996
+ &.top-right {
1997
+ &:before {
1998
+ border-color: $wac-background-color-darken transparent transparent transparent;
2243
1999
  }
2244
2000
  }
2001
+
2002
+ &.top-left {
2003
+ &:before {
2004
+ border-color: $wac-background-color-darken transparent transparent transparent;
2005
+ }
2006
+ }
2007
+
2008
+ &.bottom-center {
2009
+ &:before {
2010
+ border-color: transparent transparent $wac-background-color-darken transparent;
2011
+ }
2012
+ }
2013
+
2014
+ &.bottom-right {
2015
+ &:before {
2016
+ border-color: transparent transparent $wac-background-color-darken transparent;
2017
+ }
2018
+ }
2019
+
2020
+ &.bottom-left {
2021
+ &:before {
2022
+ border-color: transparent transparent $wac-background-color-darken transparent;
2023
+ }
2024
+ }
2025
+ }
2026
+
2027
+ .wac-button__wrapper, .wac-button__animation {
2028
+ color: $wac-second-color;
2029
+ transition: color 0.3s ease-in-out;
2030
+ }
2031
+
2032
+ &:hover,
2033
+ &.hover {
2034
+ background-color: $wac-background-color-darken;
2035
+ border-color: $wac-background-color-darken;
2036
+ transition: background-color 0.3s ease-in-out;
2037
+ }
2038
+
2039
+ &:focus,
2040
+ &.focus {
2041
+ background-color: $wac-background-color-focus;
2042
+ border-color: $wac-background-color-focus;
2043
+ transition: background-color 0.3s ease-in-out;
2245
2044
  }
2246
2045
 
2247
2046
  &.is-outlined {
2248
2047
  background-color: transparent;
2249
- border-color: $wac-wizishop-blue-button;
2048
+ border-color: $wac-border-light;
2250
2049
 
2251
2050
  .wac-button__loader {
2252
- background-color: $wac-wizishop-blue-button-darken;
2051
+ background-color: $wac-background-color-darken;
2253
2052
  }
2254
2053
 
2255
2054
  .wac-button__wrapper, .wac-button__animation {
2256
- color: $wac-wizishop-blue-button;
2055
+ color: $wac-second-color !important;
2257
2056
  transition: color 0.3s ease-in-out;
2258
2057
  }
2259
2058
 
2260
2059
  &:hover,
2261
2060
  &.hover {
2262
- background-color: $wac-wizishop-blue-button;
2263
- border-color: $wac-wizishop-blue-button;
2061
+ background-color: $wac-background-color;
2062
+ border-color: $wac-background-color;
2264
2063
  }
2265
2064
 
2266
2065
  &:focus,
2267
2066
  &.focus {
2268
- background-color: $wac-wizishop-blue-button-focus;
2269
- border-color: $wac-wizishop-blue-button-focus;
2067
+ background-color: $wac-background-color-focus;
2068
+ border-color: $wac-background-color-focus;
2270
2069
  transition: background-color 0.3s ease-in-out;
2271
2070
  }
2272
2071
  }
@@ -2274,166 +2073,106 @@ wac-calendar {
2274
2073
  &.is-loading {
2275
2074
  &:hover,
2276
2075
  &.hover {
2277
- background-color: $wac-wizishop-blue-button;
2278
- transition: background-color 0.3s ease-in-out;
2279
- }
2280
- &:focus,
2281
- &.focus {
2282
- background-color: $wac-wizishop-blue-button-focus;
2283
- border-color: $wac-wizishop-blue-button-focus;
2076
+ background-color: $wac-background-color;
2284
2077
  transition: background-color 0.3s ease-in-out;
2285
2078
  }
2286
2079
  }
2287
2080
  }
2288
2081
 
2289
- &.is-clear {
2290
- background-color: transparent!important;
2291
- border-color: transparent!important;
2292
- color: $wac-second-color!important;
2293
- transition: 0.3s ease-in-out;
2082
+ &.is-danger {
2083
+ background-color: $wac-primary-button;
2084
+ border-color: $wac-primary-button;
2085
+ transition: background-color 0.3s ease-in-out;
2294
2086
 
2295
2087
  .wac-button__loader {
2296
- background-color: transparent;
2297
- }
2298
-
2299
- .wac-button__wrapper {
2300
- color: $wac-second-color;
2088
+ background-color: $wac-primary-button-darken;
2301
2089
  }
2302
2090
 
2303
- &:hover,
2304
- &.hover {
2305
- background-color: transparent!important;
2306
- border-color: transparent!important;
2307
- color: $wac-wizishop-blue-button!important;
2308
- transition: 0.3s ease-in-out;
2309
- .wac-button__wrapper {
2310
- color: $wac-wizishop-blue-button;
2091
+ .wac-button__tooltips {
2092
+ background-color: $wac-primary-button-darken!important;
2093
+ color: $wac-white!important;
2094
+ &.right {
2095
+ &:before {
2096
+ border-color: transparent $wac-primary-button-darken transparent transparent;
2097
+ }
2311
2098
  }
2312
- }
2313
2099
 
2314
- &:focus,
2315
- &.focus {
2316
- background-color: transparent!important;
2317
- border-color: transparent!important;
2318
- color: $wac-wizishop-blue-button!important;
2319
- transition: 0.3s ease-in-out;
2320
- .wac-button__wrapper {
2321
- color: $wac-wizishop-blue-button;
2100
+ &.left {
2101
+ &:before {
2102
+ border-color: transparent transparent transparent $wac-primary-button-darken;
2103
+ }
2322
2104
  }
2323
- }
2324
- }
2325
-
2326
- &.is-orange {
2327
- background-color: $wac-orange-color;
2328
- border-color: $wac-orange-color;
2329
- transition: background-color 0.3s ease-in-out;
2330
-
2331
- .wac-button__loader {
2332
- background-color: $wac-orange-color-darken;
2333
- }
2334
-
2335
- &:hover,
2336
- &.hover {
2337
- background-color: $wac-orange-color-darken;
2338
- border-color: $wac-orange-color-darken;
2339
- transition: background-color 0.3s ease-in-out;
2340
- }
2341
-
2342
- &:focus,
2343
- &.focus {
2344
- background-color: $wac-orange-color-focus;
2345
- border-color: $wac-orange-color-focus;
2346
- transition: background-color 0.3s ease-in-out;
2347
- }
2348
-
2349
- &.is-outlined {
2350
- background-color: transparent;
2351
- border-color: $wac-orange-color;
2352
2105
 
2353
- .wac-button__loader {
2354
- background-color: $wac-orange-color-darken;
2106
+ &.top-center {
2107
+ &:before {
2108
+ border-color: $wac-primary-button-darken transparent transparent transparent;
2109
+ }
2355
2110
  }
2356
2111
 
2357
- .wac-button__wrapper, .wac-button__animation {
2358
- color: $wac-orange-color;
2359
- transition: color 0.3s ease-in-out;
2112
+ &.top-right {
2113
+ &:before {
2114
+ border-color: $wac-primary-button-darken transparent transparent transparent;
2115
+ }
2360
2116
  }
2361
2117
 
2362
- &:hover,
2363
- &.hover {
2364
- background-color: $wac-orange-color;
2365
- border-color: $wac-orange-color;
2118
+ &.top-left {
2119
+ &:before {
2120
+ border-color: $wac-primary-button-darken transparent transparent transparent;
2121
+ }
2366
2122
  }
2367
2123
 
2368
- &:focus,
2369
- &.focus {
2370
- background-color: $wac-orange-color-focus;
2371
- border-color: $wac-orange-color-focus;
2372
- transition: background-color 0.3s ease-in-out;
2124
+ &.bottom-center {
2125
+ &:before {
2126
+ border-color: transparent transparent $wac-primary-button-darken transparent;
2127
+ }
2373
2128
  }
2374
- }
2375
2129
 
2376
- &.is-loading {
2377
- &:hover,
2378
- &.hover {
2379
- background-color: $wac-orange-color;
2380
- transition: background-color 0.3s ease-in-out;
2381
- }
2382
- &:focus,
2383
- &.focus {
2384
- background-color: $wac-orange-color-focus;
2385
- border-color: $wac-orange-color-focus;
2386
- transition: background-color 0.3s ease-in-out;
2130
+ &.bottom-right {
2131
+ &:before {
2132
+ border-color: transparent transparent $wac-primary-button-darken transparent;
2133
+ }
2387
2134
  }
2388
- }
2389
- }
2390
-
2391
- &.is-pink {
2392
- background-color: $wac-pink-color;
2393
- border-color: $wac-pink-color;
2394
- transition: background-color 0.3s ease-in-out;
2395
2135
 
2396
- .wac-button__loader {
2397
- background-color: $wac-pink-color-darken;
2136
+ &.bottom-left {
2137
+ &:before {
2138
+ border-color: transparent transparent $wac-primary-button-darken transparent;
2139
+ }
2140
+ }
2398
2141
  }
2399
2142
 
2400
2143
  &:hover,
2401
2144
  &.hover {
2402
- background-color: $wac-pink-color-darken;
2403
- border-color: $wac-pink-color-darken;
2145
+ background-color: $wac-primary-button-darken;
2146
+ border-color: $wac-primary-button-darken;
2404
2147
  transition: background-color 0.3s ease-in-out;
2405
2148
  }
2406
2149
 
2407
2150
  &:focus,
2408
2151
  &.focus {
2409
- background-color: $wac-pink-color-focus;
2410
- border-color: $wac-pink-color-focus;
2152
+ background-color: $wac-primary-button-focus;
2153
+ border-color: $wac-primary-button-focus;
2411
2154
  transition: background-color 0.3s ease-in-out;
2412
2155
  }
2413
2156
 
2414
2157
  &.is-outlined {
2415
2158
  background-color: transparent;
2416
- border-color: $wac-pink-color;
2417
-
2418
- .wac-button__loader {
2419
- background-color: $wac-pink-color-darken;
2420
- }
2159
+ border-color: $wac-primary-button;
2421
2160
 
2422
2161
  .wac-button__wrapper, .wac-button__animation {
2423
- color: $wac-pink-color;
2162
+ color: $wac-primary-button;
2424
2163
  transition: color 0.3s ease-in-out;
2425
2164
  }
2426
2165
 
2427
2166
  &:hover,
2428
2167
  &.hover {
2429
- background-color: $wac-pink-color;
2430
- border-color: $wac-pink-color;
2168
+ background-color: $wac-primary-button;
2169
+ border-color: $wac-primary-button;
2431
2170
  }
2432
2171
 
2433
2172
  &:focus,
2434
2173
  &.focus {
2435
- background-color: $wac-pink-color-focus;
2436
- border-color: $wac-pink-color-focus;
2174
+ background-color: $wac-primary-button-focus;
2175
+ border-color: $wac-primary-button-focus;
2437
2176
  transition: background-color 0.3s ease-in-out;
2438
2177
  }
2439
2178
  }
@@ -2441,387 +2180,82 @@ wac-calendar {
2441
2180
  &.is-loading {
2442
2181
  &:hover,
2443
2182
  &.hover {
2444
- background-color: $wac-pink-color;
2445
- transition: background-color 0.3s ease-in-out;
2446
- }
2447
- &:focus,
2448
- &.focus {
2449
- background-color: $wac-pink-color-focus;
2450
- border-color: $wac-pink-color-focus;
2451
- transition: background-color 0.3s ease-in-out;
2452
- }
2453
- }
2454
- }
2455
-
2456
- &.is-white {
2457
- background-color: $wac-background-color;
2458
- border-color: $wac-background-color;
2459
- transition: background-color 0.3s ease-in-out;
2460
-
2461
- .wac-button__loader {
2462
- background-color: $wac-background-color-darken;
2463
- }
2464
-
2465
- .wac-button__wrapper, .wac-button__animation {
2466
- color: $wac-white;
2467
- transition: color 0.3s ease-in-out;
2468
- }
2469
-
2470
- &:hover,
2471
- &.hover {
2472
- background-color: $wac-background-color-darken;
2473
- border-color: $wac-background-color-darken;
2474
- transition: background-color 0.3s ease-in-out;
2475
- }
2476
-
2477
- &:focus,
2478
- &.focus {
2479
- background-color: $wac-background-color-focus;
2480
- border-color: $wac-background-color-focus;
2481
- transition: background-color 0.3s ease-in-out;
2482
- }
2483
-
2484
- &.is-outlined {
2485
- background-color: transparent;
2486
- border-color: $wac-white;
2487
-
2488
- .wac-button__loader {
2489
- background-color: $wac-background-color-darken;
2490
- }
2491
-
2492
- .wac-button__wrapper, .wac-button__animation {
2493
- color: $wac-white !important;
2494
- transition: color 0.3s ease-in-out;
2495
- }
2496
-
2497
- &:hover,
2498
- &.hover {
2499
- background-color: $wac-white;
2500
- border-color: $wac-white;
2501
- .wac-button__wrapper, .wac-button__animation {
2502
- color: $wac-second-color !important;
2503
- transition: color 0.3s ease-in-out;
2504
- }
2505
- }
2506
-
2507
- &:focus,
2508
- &.focus {
2509
- background-color: $wac-background-color-focus;
2510
- border-color: $wac-background-color-focus;
2183
+ background-color: $wac-primary-button;
2511
2184
  transition: background-color 0.3s ease-in-out;
2512
2185
  }
2513
2186
  }
2514
- }
2515
-
2516
- &.is-grey {
2517
- background-color: $wac-background-color;
2518
- border-color: $wac-background-color;
2519
- transition: background-color 0.3s ease-in-out;
2520
-
2521
- .wac-button__loader {
2522
- background-color: $wac-background-color-darken;
2523
- }
2524
2187
 
2525
2188
  &.opacity {
2526
- background-color: $wac-grey-light;
2189
+ background-color: $wac-primary-button-light;
2190
+ border-color: transparent!important;
2527
2191
  &:hover, &:focus {
2528
- background-color: $wac-wizishop-blue!important;
2529
- border-color: $wac-wizishop-blue!important;
2530
- color: $white!important;
2531
- .wac-button__wrapper {
2532
- color: $white!important;
2533
- i {
2534
- color: $white!important;
2535
- }
2536
- }
2192
+ background-color: $wac-primary-button;
2193
+ border-color: $wac-primary-button;
2537
2194
  }
2538
2195
  }
2196
+ }
2539
2197
 
2198
+ &.is-green {
2540
2199
  .wac-button__tooltips {
2541
- background-color: $wac-background-color-darken!important;
2542
- color: $wac-main-text!important;
2543
-
2200
+ background-color: $wac-green-color-darken!important;
2201
+ color: $wac-white!important;
2544
2202
  &.right {
2545
2203
  &:before {
2546
- border-color: transparent $wac-background-color-darken transparent transparent;
2204
+ border-color: transparent $wac-green-color-darken transparent transparent;
2547
2205
  }
2548
2206
  }
2549
2207
 
2550
2208
  &.left {
2551
2209
  &:before {
2552
- border-color: transparent transparent transparent $wac-background-color-darken;
2210
+ border-color: transparent transparent transparent $wac-green-color-darken;
2553
2211
  }
2554
2212
  }
2555
2213
 
2556
2214
  &.top-center {
2557
2215
  &:before {
2558
- border-color: $wac-background-color-darken transparent transparent transparent;
2216
+ border-color: $wac-green-color-darken transparent transparent transparent;
2559
2217
  }
2560
2218
  }
2561
2219
 
2562
2220
  &.top-right {
2563
2221
  &:before {
2564
- border-color: $wac-background-color-darken transparent transparent transparent;
2222
+ border-color: $wac-green-color-darken transparent transparent transparent;
2565
2223
  }
2566
2224
  }
2567
2225
 
2568
2226
  &.top-left {
2569
2227
  &:before {
2570
- border-color: $wac-background-color-darken transparent transparent transparent;
2228
+ border-color: $wac-green-color-darken transparent transparent transparent;
2571
2229
  }
2572
2230
  }
2573
2231
 
2574
2232
  &.bottom-center {
2575
2233
  &:before {
2576
- border-color: transparent transparent $wac-background-color-darken transparent;
2234
+ border-color: transparent transparent $wac-green-color-darken transparent;
2577
2235
  }
2578
2236
  }
2579
2237
 
2580
2238
  &.bottom-right {
2581
2239
  &:before {
2582
- border-color: transparent transparent $wac-background-color-darken transparent;
2240
+ border-color: transparent transparent $wac-green-color-darken transparent;
2583
2241
  }
2584
2242
  }
2585
2243
 
2586
2244
  &.bottom-left {
2587
2245
  &:before {
2588
- border-color: transparent transparent $wac-background-color-darken transparent;
2246
+ border-color: transparent transparent $wac-green-color-darken transparent;
2589
2247
  }
2590
2248
  }
2591
2249
  }
2250
+ }
2592
2251
 
2593
- .wac-button__wrapper, .wac-button__animation {
2594
- color: $wac-second-color;
2595
- transition: color 0.3s ease-in-out;
2596
- }
2252
+ &.is-success {
2253
+ background-color: $wac-green-color;
2254
+ border-color: $wac-green-color;
2255
+ transition: background-color 0.3s ease-in-out;
2597
2256
 
2598
- &:hover,
2599
- &.hover {
2600
- background-color: $wac-background-color-darken;
2601
- border-color: $wac-background-color-darken;
2602
- transition: background-color 0.3s ease-in-out;
2603
- }
2604
-
2605
- &:focus,
2606
- &.focus {
2607
- background-color: $wac-background-color-focus;
2608
- border-color: $wac-background-color-focus;
2609
- transition: background-color 0.3s ease-in-out;
2610
- }
2611
-
2612
- &.is-outlined {
2613
- background-color: transparent;
2614
- border-color: $wac-border-light;
2615
-
2616
- .wac-button__loader {
2617
- background-color: $wac-background-color-darken;
2618
- }
2619
-
2620
- .wac-button__wrapper, .wac-button__animation {
2621
- color: $wac-second-color !important;
2622
- transition: color 0.3s ease-in-out;
2623
- }
2624
-
2625
- &:hover,
2626
- &.hover {
2627
- background-color: $wac-background-color;
2628
- border-color: $wac-background-color;
2629
- }
2630
-
2631
- &:focus,
2632
- &.focus {
2633
- background-color: $wac-background-color-focus;
2634
- border-color: $wac-background-color-focus;
2635
- transition: background-color 0.3s ease-in-out;
2636
- }
2637
- }
2638
-
2639
- &.is-loading {
2640
- &:hover,
2641
- &.hover {
2642
- background-color: $wac-background-color;
2643
- transition: background-color 0.3s ease-in-out;
2644
- }
2645
- }
2646
- }
2647
-
2648
- &.is-danger {
2649
- background-color: $wac-primary-button;
2650
- border-color: $wac-primary-button;
2651
- transition: background-color 0.3s ease-in-out;
2652
-
2653
- .wac-button__loader {
2654
- background-color: $wac-primary-button-darken;
2655
- }
2656
-
2657
- .wac-button__tooltips {
2658
- background-color: $wac-primary-button-darken!important;
2659
- color: $wac-white!important;
2660
- &.right {
2661
- &:before {
2662
- border-color: transparent $wac-primary-button-darken transparent transparent;
2663
- }
2664
- }
2665
-
2666
- &.left {
2667
- &:before {
2668
- border-color: transparent transparent transparent $wac-primary-button-darken;
2669
- }
2670
- }
2671
-
2672
- &.top-center {
2673
- &:before {
2674
- border-color: $wac-primary-button-darken transparent transparent transparent;
2675
- }
2676
- }
2677
-
2678
- &.top-right {
2679
- &:before {
2680
- border-color: $wac-primary-button-darken transparent transparent transparent;
2681
- }
2682
- }
2683
-
2684
- &.top-left {
2685
- &:before {
2686
- border-color: $wac-primary-button-darken transparent transparent transparent;
2687
- }
2688
- }
2689
-
2690
- &.bottom-center {
2691
- &:before {
2692
- border-color: transparent transparent $wac-primary-button-darken transparent;
2693
- }
2694
- }
2695
-
2696
- &.bottom-right {
2697
- &:before {
2698
- border-color: transparent transparent $wac-primary-button-darken transparent;
2699
- }
2700
- }
2701
-
2702
- &.bottom-left {
2703
- &:before {
2704
- border-color: transparent transparent $wac-primary-button-darken transparent;
2705
- }
2706
- }
2707
- }
2708
-
2709
- &:hover,
2710
- &.hover {
2711
- background-color: $wac-primary-button-darken;
2712
- border-color: $wac-primary-button-darken;
2713
- transition: background-color 0.3s ease-in-out;
2714
- }
2715
-
2716
- &:focus,
2717
- &.focus {
2718
- background-color: $wac-primary-button-focus;
2719
- border-color: $wac-primary-button-focus;
2720
- transition: background-color 0.3s ease-in-out;
2721
- }
2722
-
2723
- &.is-outlined {
2724
- background-color: transparent;
2725
- border-color: $wac-primary-button;
2726
-
2727
- .wac-button__wrapper, .wac-button__animation {
2728
- color: $wac-primary-button;
2729
- transition: color 0.3s ease-in-out;
2730
- }
2731
-
2732
- &:hover,
2733
- &.hover {
2734
- background-color: $wac-primary-button;
2735
- border-color: $wac-primary-button;
2736
- }
2737
-
2738
- &:focus,
2739
- &.focus {
2740
- background-color: $wac-primary-button-focus;
2741
- border-color: $wac-primary-button-focus;
2742
- transition: background-color 0.3s ease-in-out;
2743
- }
2744
- }
2745
-
2746
- &.is-loading {
2747
- &:hover,
2748
- &.hover {
2749
- background-color: $wac-primary-button;
2750
- transition: background-color 0.3s ease-in-out;
2751
- }
2752
- }
2753
-
2754
- &.opacity {
2755
- background-color: $wac-primary-button-light;
2756
- border-color: transparent!important;
2757
- &:hover, &:focus {
2758
- background-color: $wac-primary-button;
2759
- border-color: $wac-primary-button;
2760
- }
2761
- }
2762
- }
2763
-
2764
- &.is-green {
2765
- .wac-button__tooltips {
2766
- background-color: $wac-green-color-darken!important;
2767
- color: $wac-white!important;
2768
- &.right {
2769
- &:before {
2770
- border-color: transparent $wac-green-color-darken transparent transparent;
2771
- }
2772
- }
2773
-
2774
- &.left {
2775
- &:before {
2776
- border-color: transparent transparent transparent $wac-green-color-darken;
2777
- }
2778
- }
2779
-
2780
- &.top-center {
2781
- &:before {
2782
- border-color: $wac-green-color-darken transparent transparent transparent;
2783
- }
2784
- }
2785
-
2786
- &.top-right {
2787
- &:before {
2788
- border-color: $wac-green-color-darken transparent transparent transparent;
2789
- }
2790
- }
2791
-
2792
- &.top-left {
2793
- &:before {
2794
- border-color: $wac-green-color-darken transparent transparent transparent;
2795
- }
2796
- }
2797
-
2798
- &.bottom-center {
2799
- &:before {
2800
- border-color: transparent transparent $wac-green-color-darken transparent;
2801
- }
2802
- }
2803
-
2804
- &.bottom-right {
2805
- &:before {
2806
- border-color: transparent transparent $wac-green-color-darken transparent;
2807
- }
2808
- }
2809
-
2810
- &.bottom-left {
2811
- &:before {
2812
- border-color: transparent transparent $wac-green-color-darken transparent;
2813
- }
2814
- }
2815
- }
2816
- }
2817
-
2818
- &.is-success {
2819
- background-color: $wac-green-color;
2820
- border-color: $wac-green-color;
2821
- transition: background-color 0.3s ease-in-out;
2822
-
2823
- .wac-button__loader {
2824
- background-color: $wac-green-color-darken;
2257
+ .wac-button__loader {
2258
+ background-color: $wac-green-color-darken;
2825
2259
  }
2826
2260
 
2827
2261
  .wac-button__tooltips {
@@ -3170,166 +2604,762 @@ wac-calendar {
3170
2604
  }
3171
2605
  }
3172
2606
 
3173
- &__tooltips {
3174
- position: absolute;
3175
- width: auto;
3176
- padding: 4px;
3177
- border-radius: 3px;
3178
- background: $wizishop-blue;
3179
- color: $wac-white;
3180
- min-width: 100%;
3181
- visibility: hidden;
3182
- font-size: 12px;
3183
- opacity: 0;
3184
- transition: opacity .3s ease 0s, visibility 0s linear .35s;
2607
+ &__tooltips {
2608
+ position: absolute;
2609
+ width: auto;
2610
+ padding: 4px;
2611
+ border-radius: 3px;
2612
+ background: $wizishop-blue;
2613
+ color: $wac-white;
2614
+ min-width: 100%;
2615
+ visibility: hidden;
2616
+ font-size: 12px;
2617
+ opacity: 0;
2618
+ transition: opacity .3s ease 0s, visibility 0s linear .35s;
2619
+
2620
+ &.oneline {
2621
+ width: auto!important;
2622
+ white-space: nowrap;
2623
+ min-width: unset!important;
2624
+ }
2625
+
2626
+ @include media('>=tablet') {
2627
+ min-width: 600px;
2628
+ }
2629
+
2630
+ @include media('<tablet') {
2631
+ min-width: 100% !important;
2632
+ max-width: 100% !important;
2633
+ }
2634
+
2635
+ &:before {
2636
+ content: '';
2637
+ display: none!important;
2638
+ position: absolute;
2639
+ width: 0;
2640
+ height: 0;
2641
+ border-style: solid;
2642
+ border-width: 10px 10px 0 10px;
2643
+ border-color: $wizishop-blue transparent transparent transparent;
2644
+ }
2645
+
2646
+ &.right {
2647
+ left: 100%;
2648
+ transform: translate(10px, -50%);
2649
+ top: 50%;
2650
+ &:before {
2651
+ width: 0;
2652
+ height: 0;
2653
+ border-style: solid;
2654
+ border-width: 10px 10px 10px 0;
2655
+ border-color: transparent transparentize($wac-second-color, .1) transparent transparent;
2656
+ right: 100%;
2657
+ top: 50%;
2658
+ transform: translateY(-50%);
2659
+ }
2660
+ }
2661
+
2662
+ &.left {
2663
+ right: 100%;
2664
+ transform: translate(-10px, -50%);
2665
+ top: 50%;
2666
+ &:before {
2667
+ width: 0;
2668
+ height: 0;
2669
+ border-style: solid;
2670
+ border-width: 10px 0 10px 10px;
2671
+ border-color: transparent transparent transparent transparentize($wac-second-color, .1);
2672
+ left: 100%;
2673
+ top: 50%;
2674
+ transform: translateY(-50%);
2675
+ }
2676
+ }
2677
+
2678
+ &.top-center {
2679
+ left: 50%;
2680
+ transform: translate(-50%, -10px);
2681
+ bottom: 100%;
2682
+ &:before {
2683
+ left: 50%;
2684
+ top: 100%;
2685
+ transform: translateX(-50%);
2686
+ }
2687
+ }
2688
+
2689
+ &.top-right {
2690
+ right: 0;
2691
+ transform: translate(0, -10px);
2692
+ bottom: 100%;
2693
+ &:before {
2694
+ right: 10px;
2695
+ top: 100%;
2696
+ }
2697
+ }
2698
+
2699
+ &.top-left {
2700
+ left: 0;
2701
+ transform: translate(0, -10px);
2702
+ bottom: 100%;
2703
+ &:before {
2704
+ left: 10px;
2705
+ top: 100%;
2706
+ }
2707
+ }
2708
+
2709
+ &.bottom-center {
2710
+ left: 50%;
2711
+ transform: translate(-50%, 10px);
2712
+ top: 100%;
2713
+ &:before {
2714
+ width: 0;
2715
+ height: 0;
2716
+ border-style: solid;
2717
+ border-width: 0 10px 10px 10px;
2718
+ border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
2719
+ right: auto;
2720
+ top: auto;
2721
+ left: 50%;
2722
+ bottom: 100%;
2723
+ transform: translateX(-50%);
2724
+ }
2725
+ }
2726
+
2727
+ &.bottom-right {
2728
+ right: 0;
2729
+ transform: translate(0, 10px);
2730
+ top: 100%;
2731
+ &:before {
2732
+ width: 0;
2733
+ height: 0;
2734
+ border-style: solid;
2735
+ border-width: 0 10px 10px 10px;
2736
+ border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
2737
+ top: auto;
2738
+ right: 10px;
2739
+ bottom: 100%;
2740
+ }
2741
+ }
2742
+
2743
+ &.bottom-left {
2744
+ left: 0;
2745
+ transform: translate(0, 10px);
2746
+ top: 100%;
2747
+ &:before {
2748
+ width: 0;
2749
+ height: 0;
2750
+ border-style: solid;
2751
+ border-width: 0 10px 10px 10px;
2752
+ border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
2753
+ right: auto;
2754
+ top: auto;
2755
+ left: 10px;
2756
+ bottom: 100%;
2757
+ }
2758
+ }
2759
+ }
2760
+
2761
+ &:hover, &:focus {
2762
+ .wac-button {
2763
+ &__tooltips {
2764
+ visibility: visible;
2765
+ opacity: .9;
2766
+ transition: opacity .3s ease .05s, visibility 0s linear 0s;
2767
+ }
2768
+ }
2769
+ }
2770
+ }
2771
+ wac-calendar {
2772
+ &.ng-touched.ng-invalid {
2773
+ .wac-calendar__wrapper__select, .wac-calendar__wrapper__editInPlace, .wac-calendar__wrapper__select {
2774
+ border-color: $wac-form-control-touched-and-invalid-border;
2775
+ }
2776
+ }
2777
+ }
2778
+
2779
+ .wac-calendar {
2780
+ position: relative;
2781
+ margin: 0 0 20px;
2782
+ width: 268px;
2783
+ &--open {
2784
+ z-index: 9;
2785
+ .wac-calendar {
2786
+ &__absolute {
2787
+ visibility: visible;
2788
+ opacity: 1;
2789
+ transition: 0.3s ease opacity 0.1s, 0s visibility linear 0s;
2790
+ }
2791
+ }
2792
+ }
2793
+ &--edit {
2794
+ display: flex;
2795
+ flex-direction: column;
2796
+ justify-content: flex-start;
2797
+ align-items: center;
2798
+ align-content: center;
2799
+ & > * {
2800
+ display: inline-block;
2801
+ &:nth-child(2) {
2802
+ margin: 0 10px;
2803
+ }
2804
+ }
2805
+ }
2806
+ &--no-margin {
2807
+ margin: 0;
2808
+ .wac-calendar__autoHide {
2809
+ margin: 0;
2810
+ }
2811
+ }
2812
+ &--onlyDate {
2813
+ .wac-calendar__wrapper__input__time, .wac-calendar__wrapper__input__date:after {
2814
+ display: none;
2815
+ }
2816
+ .wac-calendar__wrapper__input {
2817
+ max-width: 160px;
2818
+ min-width: 160px;
2819
+ }
2820
+ }
2821
+ &__label {
2822
+ font-size: rem(14) !important;
2823
+ line-height: rem(16) !important;
2824
+ margin: 0 0 10px !important;
2825
+ color: $wac-color-text-grey !important;
2826
+ cursor: pointer;
2827
+
2828
+ &.bold {
2829
+ font-weight: 500;
2830
+ }
2831
+ }
2832
+ &__autoHide {
2833
+ max-width: 300px;
2834
+ position: relative;
2835
+ }
2836
+ &__wrapper {
2837
+ &__input {
2838
+ border-radius: 3px;
2839
+ display: flex;
2840
+ justify-content: flex-start;
2841
+ align-items: center;
2842
+ align-content: center;
2843
+ min-width: 240px;
2844
+ max-width: 240px;
2845
+ padding: 7px 20px;
2846
+ border: 1px solid $wac-border-form;
2847
+ cursor: pointer;
2848
+ &__icon {
2849
+ width: 16px;
2850
+ margin: 0 10px 0 0;
2851
+ display: flex;
2852
+ justify-content: space-between;
2853
+ align-items: center;
2854
+ align-content: center;
2855
+ cursor: pointer;
2856
+ &:hover,
2857
+ &:focus {
2858
+ i {
2859
+ color: darken($wac-wizishop-blue, 15%);
2860
+ }
2861
+ }
2862
+ i {
2863
+ color: $wac-second-color;
2864
+ font-size: rem(18);
2865
+ transition: color 300ms ease;
2866
+ }
2867
+ }
2868
+ &__date {
2869
+ width: auto;
2870
+ white-space: nowrap;
2871
+ position: relative;
2872
+ color: $wac-main-text;
2873
+ font-size: rem(14);
2874
+ line-height: rem(24);
2875
+ margin: 0 15px 0 0;
2876
+ letter-spacing: 0.65px;
2877
+ &:after {
2878
+ content: '';
2879
+ display: block;
2880
+ position: absolute;
2881
+ width: 1px;
2882
+ height: 15px;
2883
+ background-color: $wac-input-border;
2884
+ top: 50%;
2885
+ right: -15px;
2886
+ transform: translateY(-50%);
2887
+ }
2888
+ }
2889
+ &__time {
2890
+ width: auto;
2891
+ white-space: nowrap;
2892
+ font-size: rem(14);
2893
+ line-height: rem(24);
2894
+ color: $wac-main-text;
2895
+ margin: 0 15px;
2896
+ letter-spacing: 1.3px;
2897
+ }
2898
+ &__close {
2899
+ width: 10px;
2900
+ cursor: pointer;
2901
+ i {
2902
+ font-size: 14px;
2903
+ transition: color 300ms ease;
2904
+ color: $wac-primary-button;
2905
+ font-weight: 400;
2906
+ }
2907
+ &:hover,
2908
+ &:focus {
2909
+ i {
2910
+ color: darken($wac-primary-button, 15%);
2911
+ }
2912
+ }
2913
+ }
2914
+ }
2915
+ &__editInPlace {
2916
+ display: flex;
2917
+ justify-content: space-between;
2918
+ padding: 5px 0;
2919
+ position: relative;
2920
+ align-content: center;
2921
+ align-items: center;
2922
+ cursor: pointer;
2923
+ &:after {
2924
+ position: absolute;
2925
+ content: '';
2926
+ border-bottom: dashed 1px $wac-calendar-primary;
2927
+ width: 100%;
2928
+ bottom: 0;
2929
+ left: 0;
2930
+ }
2931
+ &__icon {
2932
+ width: 12px;
2933
+ margin: 0 5px 0 0;
2934
+ display: flex;
2935
+ justify-content: space-between;
2936
+ align-items: center;
2937
+ align-content: center;
2938
+ i {
2939
+ font-size: rem(14);
2940
+ color: $wac-wizishop-blue;
2941
+ transition: color 300ms ease;
2942
+ }
2943
+ }
2944
+ &__date {
2945
+ position: relative;
2946
+ color: $wac-header-color;
2947
+ font-size: rem(14);
2948
+ width: auto;
2949
+ transition: 300ms ease;
2950
+ white-space: nowrap;
2951
+ }
2952
+ &:hover,
2953
+ &:focus {
2954
+ .wac-calendar {
2955
+ &__wrapper {
2956
+ &__editInPlace {
2957
+ &__date {
2958
+ color: darken($wac-header-color, 30%);
2959
+ }
2960
+ &__icon {
2961
+ i {
2962
+ color: darken($wac-wizishop-blue, 15%);
2963
+ }
2964
+ }
2965
+ }
2966
+ }
2967
+ }
2968
+ }
2969
+ }
2970
+ &__select {
2971
+ border-radius: 3px;
2972
+ display: flex;
2973
+ justify-content: flex-start;
2974
+ align-items: center;
2975
+ align-content: center;
2976
+ min-width: 220px;
2977
+ max-width: 220px;
2978
+ padding: 11px 19px;
2979
+ border: 1px solid $wac-input-border;
2980
+ cursor: pointer;
2981
+ background: $wac-white no-repeat center right 15px
2982
+ 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);
2983
+ &__icon {
2984
+ width: 16px;
2985
+ margin: 0 10px 0 0;
2986
+ display: flex;
2987
+ justify-content: space-between;
2988
+ align-items: center;
2989
+ align-content: center;
2990
+ cursor: pointer;
2991
+ &:hover,
2992
+ &:focus {
2993
+ i {
2994
+ color: darken($wac-second-color, 15%);
2995
+ }
2996
+ }
2997
+ i {
2998
+ font-size: rem(18);
2999
+ font-weight: 400;
3000
+ color: $wac-second-color;
3001
+ transition: color 300ms ease;
3002
+ }
3003
+ }
3004
+ &__date {
3005
+ width: auto;
3006
+ position: relative;
3007
+ color: $wac-header-color;
3008
+ font-size: rem(14);
3009
+ white-space: nowrap;
3010
+ margin: 0;
3011
+ &:after {
3012
+ display: none;
3013
+ }
3014
+ }
3015
+ &__close {
3016
+ width: 10px;
3017
+ cursor: pointer;
3018
+ i {
3019
+ font-size: 14px;
3020
+ transition: color 300ms ease;
3021
+ color: $wac-primary-button;
3022
+ }
3023
+ &:hover,
3024
+ &:focus {
3025
+ i {
3026
+ color: darken($wac-primary-button, 15%);
3027
+ }
3028
+ }
3029
+ }
3030
+ }
3031
+ }
3032
+ &__absolute {
3033
+ position: absolute;
3034
+ top: 100%;
3035
+ left: 50%;
3036
+ transform: translateX(-50%);
3037
+ visibility: hidden;
3038
+ opacity: 0;
3039
+ transition: 0.3s ease opacity, 0s visibility 0.31s;
3040
+ border: 1px solid $wac-border-light;
3041
+ background-color: $wac-white;
3042
+ box-shadow: 3px 3px 20px $wac-calendar-box-shadow;
3043
+ border-radius: 3px;
3044
+ max-width: 268px;
3045
+ min-width: 268px;
3046
+ &.bottom {
3047
+ transform: translateX(-50%) translateY(10px);
3048
+ }
3049
+ &.top {
3050
+ top: auto;
3051
+ bottom: 100%;
3052
+ transform: translateX(-50%) translateY(-10px);
3053
+ }
3054
+ &.left {
3055
+ transform: translateY(-50%) translateX(-10px);
3056
+ left: auto;
3057
+ right: 100%;
3058
+ top: 50%;
3059
+ }
3060
+ &.right {
3061
+ transform: translateY(-50%) translateX(10px);
3062
+ left: 100%;
3063
+ top: 50%;
3064
+ }
3065
+ &.left-top {
3066
+ left: auto;
3067
+ right: 100%;
3068
+ top: auto;
3069
+ bottom: 0;
3070
+ transform: translateY(-10px) translateX(-10px);
3071
+ }
3072
+ &.left-bottom {
3073
+ left: auto;
3074
+ right: 100%;
3075
+ top: 0;
3076
+ transform: translateY(10px) translateX(-10px);
3077
+ }
3078
+ &.right-top {
3079
+ left: 100%;
3080
+ top: auto;
3081
+ bottom: 0;
3082
+ transform: translateY(-10px) translateX(10px);
3083
+ }
3084
+ &.right-bottom {
3085
+ left: 100%;
3086
+ top: 0;
3087
+ transform: translateY(10px) translateX(10px);
3088
+ }
3089
+ & > * > * {
3090
+ width: 265px;
3091
+ }
3092
+ &__time {
3093
+ position: relative;
3094
+ background-color: $wac-white;
3095
+ padding: 20px;
3096
+ width: 100%;
3097
+ &:before {
3098
+ content: '';
3099
+ width: 100%;
3100
+ height: 5px;
3101
+ bottom: 100%;
3102
+ margin-bottom: -2px;
3103
+ display: block;
3104
+ position: absolute;
3105
+ left: 0;
3106
+ background-color: $wac-white;
3107
+ }
3108
+ &__wrapper {
3109
+ width: 100% !important;
3110
+ display: flex;
3111
+ align-items: center;
3112
+ align-content: center;
3113
+ justify-content: center;
3114
+ min-height: 42px;
3115
+ position: relative;
3116
+ &:before {
3117
+ content: '';
3118
+ display: block;
3119
+ background-color: $wac-wizishop-blue;
3120
+ width: 4px;
3121
+ height: 4px;
3122
+ border-radius: 50%;
3123
+ position: absolute;
3124
+ top: 50%;
3125
+ left: 50%;
3126
+ transform: translate(-50%, -50%);
3127
+ margin-top: -4px;
3128
+ }
3129
+ &:after {
3130
+ content: '';
3131
+ display: block;
3132
+ background-color: $wac-wizishop-blue;
3133
+ width: 4px;
3134
+ height: 4px;
3135
+ border-radius: 50%;
3136
+ position: absolute;
3137
+ top: 50%;
3138
+ left: 50%;
3139
+ transform: translate(-50%, -50%);
3140
+ margin-top: 4px;
3141
+ }
3142
+ &__hours,
3143
+ &__minutes {
3144
+ position: relative;
3145
+ width: 100px;
3146
+ display: flex;
3147
+ flex-wrap: nowrap;
3148
+ &__left,
3149
+ &__right {
3150
+ width: 100%;
3151
+ display: flex;
3152
+ flex-wrap: nowrap;
3153
+ justify-content: center;
3154
+ flex-direction: column;
3155
+ align-items: center;
3156
+ align-content: center;
3157
+ }
3158
+ &__btn {
3159
+ display: flex;
3160
+ justify-content: center;
3161
+ flex-direction: column;
3162
+ align-items: center;
3163
+ align-content: center;
3164
+ width: 40px;
3165
+ height: 20px;
3166
+ background-color: $wac-gray-background;
3167
+ box-shadow: none;
3168
+ border: none;
3169
+ cursor: pointer;
3170
+ transition: 0.3s ease;
3171
+ &:hover,
3172
+ &:focus {
3173
+ background-color: $wac-wizishop-blue;
3174
+ i {
3175
+ color: $wac-white;
3176
+ }
3177
+ }
3178
+ &:first-child {
3179
+ margin: 0 0 2px;
3180
+ }
3181
+ i {
3182
+ font-size: rem(10);
3183
+ color: $wac-second-color;
3184
+ margin: 0;
3185
+ }
3186
+ }
3187
+
3188
+ input::-webkit-outer-spin-button,
3189
+ input::-webkit-inner-spin-button {
3190
+ -webkit-appearance: none;
3191
+ margin: 0;
3192
+ }
3193
+
3194
+ /* Firefox */
3195
+ input[type='number'] {
3196
+ -moz-appearance: textfield;
3197
+ }
3198
+
3199
+ input {
3200
+ border: none;
3201
+ text-align: center;
3202
+ font-size: rem(24);
3203
+ color: $wac-wizishop-blue;
3204
+ padding: 0;
3205
+ line-height: 1.4;
3206
+ margin: 0;
3207
+ width: 100%;
3208
+ }
3209
+ }
3210
+ &__hours {
3211
+ margin: 0 10px 0 0;
3212
+ }
3213
+ &__minutes {
3214
+ margin: 0 0 0 10px;
3215
+ }
3216
+ }
3217
+ }
3218
+ }
3219
+ }
3220
+
3221
+ .datetimepicker-dummy .datetimepicker-clear-button {
3222
+ top: -3px !important;
3223
+ }
3185
3224
 
3186
- &.oneline {
3187
- width: auto!important;
3188
- white-space: nowrap;
3189
- min-width: unset!important;
3190
- }
3225
+ .datetimepicker-dummy .datetimepicker-dummy-wrapper {
3226
+ border: 1px solid $wac-border-color;
3227
+ border-radius: rem(3);
3191
3228
 
3192
- @include media('>=tablet') {
3193
- min-width: 600px;
3194
- }
3229
+ &:hover,
3230
+ &:focus {
3231
+ border: 1px solid $wac-wizishop-blue;
3232
+ }
3233
+ }
3195
3234
 
3196
- @include media('<tablet') {
3197
- min-width: 100% !important;
3198
- max-width: 100% !important;
3199
- }
3200
3235
 
3201
- &:before {
3202
- content: '';
3203
- display: none!important;
3204
- position: absolute;
3205
- width: 0;
3206
- height: 0;
3207
- border-style: solid;
3208
- border-width: 10px 10px 0 10px;
3209
- border-color: $wizishop-blue transparent transparent transparent;
3210
- }
3236
+ .datetimepicker {
3237
+ box-shadow: none !important;
3238
+ &-wrapper {
3239
+ border: none !important;
3240
+ box-shadow: none;
3241
+ background: $wac-white;
3242
+ }
3243
+ }
3211
3244
 
3212
- &.right {
3213
- left: 100%;
3214
- transform: translate(10px, -50%);
3215
- top: 50%;
3216
- &:before {
3217
- width: 0;
3218
- height: 0;
3219
- border-style: solid;
3220
- border-width: 10px 10px 10px 0;
3221
- border-color: transparent transparentize($wac-second-color, .1) transparent transparent;
3222
- right: 100%;
3223
- top: 50%;
3224
- transform: translateY(-50%);
3225
- }
3245
+ .datepicker {
3246
+ .datepicker {
3247
+ &-nav {
3248
+ background: $wac-white !important;
3249
+ color: $wac-main-text !important;
3250
+ padding: 15px !important;
3226
3251
  }
3252
+ }
3253
+ }
3227
3254
 
3228
- &.left {
3229
- right: 100%;
3230
- transform: translate(-10px, -50%);
3231
- top: 50%;
3232
- &:before {
3233
- width: 0;
3234
- height: 0;
3235
- border-style: solid;
3236
- border-width: 10px 0 10px 10px;
3237
- border-color: transparent transparent transparent transparentize($wac-second-color, .1);
3238
- left: 100%;
3239
- top: 50%;
3240
- transform: translateY(-50%);
3241
- }
3242
- }
3255
+ .datetimepicker .datepicker-nav .datepicker-nav-month,
3256
+ .datetimepicker .datepicker-nav .datepicker-nav-year {
3257
+ color: $wac-main-text !important;
3258
+ font-weight: 500 !important;
3259
+ &:hover,
3260
+ &:focus {
3261
+ color: $wac-wizishop-blue !important;
3262
+ }
3263
+ }
3243
3264
 
3244
- &.top-center {
3245
- left: 50%;
3246
- transform: translate(-50%, -10px);
3247
- bottom: 100%;
3248
- &:before {
3249
- left: 50%;
3250
- top: 100%;
3251
- transform: translateX(-50%);
3252
- }
3253
- }
3265
+ .datepicker-nav-year {
3266
+ font-weight: 500 !important;
3267
+ }
3254
3268
 
3255
- &.top-right {
3256
- right: 0;
3257
- transform: translate(0, -10px);
3258
- bottom: 100%;
3259
- &:before {
3260
- right: 10px;
3261
- top: 100%;
3262
- }
3263
- }
3269
+ .datetimepicker .datepicker-nav .datepicker-nav-previous,
3270
+ .datetimepicker .datepicker-nav .datepicker-nav-next {
3271
+ border-radius: 3px;
3272
+ color: $wac-main-text !important;
3273
+ width: 25px !important;
3274
+ height: 25px !important;
3275
+ display: flex;
3276
+ justify-content: center;
3277
+ align-items: center;
3278
+ align-content: center;
3279
+ border: 1px solid $wac-border-light;
3280
+ transition: 0.3s ease;
3281
+ > svg {
3282
+ display: none !important;
3283
+ }
3284
+ }
3264
3285
 
3265
- &.top-left {
3266
- left: 0;
3267
- transform: translate(0, -10px);
3268
- bottom: 100%;
3269
- &:before {
3270
- left: 10px;
3271
- top: 100%;
3272
- }
3273
- }
3286
+ .datetimepicker .datepicker-nav .datepicker-nav-previous {
3287
+ background: $wac-white
3288
+ 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")
3289
+ center center no-repeat !important;
3290
+ background-size: 6px auto !important;
3291
+ &:hover,
3292
+ &:focus {
3293
+ border-color: $wac-wizishop-blue !important;
3294
+ }
3295
+ }
3274
3296
 
3275
- &.bottom-center {
3276
- left: 50%;
3277
- transform: translate(-50%, 10px);
3278
- top: 100%;
3279
- &:before {
3280
- width: 0;
3281
- height: 0;
3282
- border-style: solid;
3283
- border-width: 0 10px 10px 10px;
3284
- border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
3285
- right: auto;
3286
- top: auto;
3287
- left: 50%;
3288
- bottom: 100%;
3289
- transform: translateX(-50%);
3290
- }
3291
- }
3297
+ .datetimepicker .datepicker-nav .datepicker-nav-next {
3298
+ background: $wac-white
3299
+ 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")
3300
+ center center no-repeat !important;
3301
+ background-size: 6px auto !important;
3302
+ &:hover,
3303
+ &:focus {
3304
+ border-color: $wac-wizishop-blue !important;
3305
+ }
3306
+ }
3292
3307
 
3293
- &.bottom-right {
3294
- right: 0;
3295
- transform: translate(0, 10px);
3296
- top: 100%;
3297
- &:before {
3298
- width: 0;
3299
- height: 0;
3300
- border-style: solid;
3301
- border-width: 0 10px 10px 10px;
3302
- border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
3303
- top: auto;
3304
- right: 10px;
3305
- bottom: 100%;
3306
- }
3308
+ .wac-calendar__absolute {
3309
+ .datetimepicker .datepicker-body .datepicker-weekdays {
3310
+ padding: 0 15px;
3311
+ }
3312
+ .datepicker-weekdays {
3313
+ height: 14px;
3314
+ margin: 0 0 rem(12);
3315
+ .datepicker-date {
3316
+ font-size: rem(12);
3317
+ white-space: nowrap;
3318
+ line-height: 1;
3319
+ padding: 0 !important;
3320
+ color: $wac-secondary-color !important;
3307
3321
  }
3322
+ }
3323
+ .datepicker-days {
3324
+ padding: 0 15px !important;
3325
+ }
3326
+ .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active {
3327
+ background-color: $wac-wizishop-blue;
3328
+ }
3329
+ .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover {
3330
+ border-color: $wac-wizishop-blue;
3331
+ }
3332
+ }
3308
3333
 
3309
- &.bottom-left {
3310
- left: 0;
3311
- transform: translate(0, 10px);
3312
- top: 100%;
3313
- &:before {
3314
- width: 0;
3315
- height: 0;
3316
- border-style: solid;
3317
- border-width: 0 10px 10px 10px;
3318
- border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
3319
- right: auto;
3320
- top: auto;
3321
- left: 10px;
3322
- bottom: 100%;
3334
+ .datetimepicker .datetimepicker-footer {
3335
+ display: none;
3336
+ }
3337
+
3338
+ .wac-calendar--range {
3339
+ .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range {
3340
+ background-color: $wac-wizishop-blue;
3341
+ button {
3342
+ background-color: $wac-wizishop-blue!important;
3343
+ }
3344
+ &.datepicker-range-start, &.datepicker-range-end, &.is-today.datepicker-range-start {
3345
+ button {
3346
+ background-color: $white!important;
3347
+ border-color: $white!important;
3348
+ color: $wac-wizishop-blue!important;
3323
3349
  }
3324
3350
  }
3325
3351
  }
3326
-
3327
- &:hover, &:focus {
3328
- .wac-button {
3329
- &__tooltips {
3330
- visibility: visible;
3331
- opacity: .9;
3332
- transition: opacity .3s ease .05s, visibility 0s linear 0s;
3352
+ .wac-calendar__wrapper__input {
3353
+ min-width: 270px;
3354
+ max-width: 270px;
3355
+ &__date {
3356
+ margin: 0;
3357
+ }
3358
+ &__separator {
3359
+ margin: 0 12px 0 10px;
3360
+ i {
3361
+ font-size: rem(14);
3362
+ color: $wac-main-text;
3333
3363
  }
3334
3364
  }
3335
3365
  }