@skyux/theme 10.32.0 → 10.34.0
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.
- package/css/sky.css +27 -32
- package/css/themes/modern/styles.css +92 -10
- package/documentation.json +509 -391
- package/esm2022/index.mjs +2 -1
- package/esm2022/lib/theming/theme-component-class.directive.mjs +32 -0
- package/fesm2022/skyux-theme.mjs +31 -2
- package/fesm2022/skyux-theme.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/theming/theme-component-class.directive.d.ts +8 -0
- package/package.json +1 -1
- package/scss/mixins.scss +108 -0
package/css/sky.css
CHANGED
|
@@ -1422,24 +1422,25 @@ select::-ms-expand {
|
|
|
1422
1422
|
margin-bottom: 40px;
|
|
1423
1423
|
}
|
|
1424
1424
|
|
|
1425
|
-
.sky-switch {
|
|
1425
|
+
.sky-switch:not(.sky-theme-modern *) {
|
|
1426
1426
|
cursor: pointer;
|
|
1427
1427
|
display: inline-flex;
|
|
1428
1428
|
position: relative;
|
|
1429
1429
|
}
|
|
1430
|
-
.sky-switch:
|
|
1431
|
-
border-color: var(--sky-highlight-color-info);
|
|
1432
|
-
border-width: 2px;
|
|
1433
|
-
}
|
|
1434
|
-
|
|
1435
|
-
.sky-switch-disabled {
|
|
1430
|
+
.sky-switch:not(.sky-theme-modern *).sky-switch-disabled {
|
|
1436
1431
|
cursor: default;
|
|
1437
1432
|
}
|
|
1438
|
-
.sky-switch-disabled input {
|
|
1433
|
+
.sky-switch:not(.sky-theme-modern *).sky-switch-disabled input {
|
|
1439
1434
|
cursor: default;
|
|
1440
1435
|
}
|
|
1441
|
-
|
|
1442
|
-
|
|
1436
|
+
.sky-switch:not(.sky-theme-modern *).sky-control-label-required .sky-switch-label {
|
|
1437
|
+
margin-right: 0;
|
|
1438
|
+
}
|
|
1439
|
+
.sky-switch:not(.sky-theme-modern *):hover .sky-switch-control {
|
|
1440
|
+
border-color: var(--sky-highlight-color-info);
|
|
1441
|
+
border-width: 2px;
|
|
1442
|
+
}
|
|
1443
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-input {
|
|
1443
1444
|
border: 0;
|
|
1444
1445
|
clip: rect(0 0 0 0);
|
|
1445
1446
|
height: 1px;
|
|
@@ -1451,37 +1452,36 @@ select::-ms-expand {
|
|
|
1451
1452
|
outline: 0;
|
|
1452
1453
|
-webkit-appearance: none;
|
|
1453
1454
|
}
|
|
1454
|
-
.sky-switch-input.sky-switch-invalid + .sky-switch-control {
|
|
1455
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-input.sky-switch-invalid + .sky-switch-control {
|
|
1455
1456
|
box-shadow: 0 0 8px rgba(239, 64, 68, 0.6);
|
|
1456
1457
|
border: 1px solid var(--sky-highlight-color-danger);
|
|
1457
1458
|
outline: none;
|
|
1458
1459
|
}
|
|
1459
|
-
.sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
|
|
1460
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
|
|
1460
1461
|
background-color: var(--sky-background-color-input-selected);
|
|
1461
1462
|
border-color: var(--sky-highlight-color-info);
|
|
1462
1463
|
border-width: 2px;
|
|
1463
1464
|
}
|
|
1464
|
-
.sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
|
|
1465
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
|
|
1465
1466
|
background-color: #d2e8c0;
|
|
1466
1467
|
border-color: var(--sky-highlight-color-success);
|
|
1467
1468
|
}
|
|
1468
|
-
.sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
|
|
1469
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
|
|
1469
1470
|
background-color: #ffeaca;
|
|
1470
1471
|
border-color: var(--sky-highlight-color-warning);
|
|
1471
1472
|
}
|
|
1472
|
-
.sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
|
|
1473
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
|
|
1473
1474
|
background-color: #fac8bf;
|
|
1474
1475
|
border-color: var(--sky-highlight-color-danger);
|
|
1475
1476
|
}
|
|
1476
|
-
.sky-switch-input:disabled + .sky-switch-control {
|
|
1477
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-input:disabled + .sky-switch-control {
|
|
1477
1478
|
background-color: var(--sky-background-color-disabled);
|
|
1478
1479
|
}
|
|
1479
|
-
.sky-switch-input:focus + .sky-switch-control {
|
|
1480
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-input:focus + .sky-switch-control {
|
|
1480
1481
|
outline: thin dotted;
|
|
1481
1482
|
outline: -webkit-focus-ring-color auto 5px;
|
|
1482
1483
|
}
|
|
1483
|
-
|
|
1484
|
-
.sky-switch-control {
|
|
1484
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-control {
|
|
1485
1485
|
width: var(--sky-switch-size);
|
|
1486
1486
|
max-width: var(--sky-switch-size);
|
|
1487
1487
|
height: var(--sky-switch-size);
|
|
@@ -1497,18 +1497,17 @@ select::-ms-expand {
|
|
|
1497
1497
|
align-items: center;
|
|
1498
1498
|
justify-content: center;
|
|
1499
1499
|
}
|
|
1500
|
-
.sky-switch-control.sky-switch-control-icon {
|
|
1500
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-control.sky-switch-control-icon {
|
|
1501
1501
|
max-width: none;
|
|
1502
1502
|
width: 35px;
|
|
1503
1503
|
height: 35px;
|
|
1504
1504
|
flex: 1 0 35px;
|
|
1505
1505
|
font-size: 18px;
|
|
1506
1506
|
}
|
|
1507
|
-
.sky-switch-control::before {
|
|
1507
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-control::before {
|
|
1508
1508
|
content: "";
|
|
1509
1509
|
}
|
|
1510
|
-
|
|
1511
|
-
.sky-switch-label {
|
|
1510
|
+
.sky-switch:not(.sky-theme-modern *) .sky-switch-label {
|
|
1512
1511
|
line-height: var(--sky-switch-size);
|
|
1513
1512
|
flex: 1 1 auto;
|
|
1514
1513
|
width: 100%;
|
|
@@ -1516,22 +1515,18 @@ select::-ms-expand {
|
|
|
1516
1515
|
min-width: 0;
|
|
1517
1516
|
}
|
|
1518
1517
|
|
|
1519
|
-
.sky-
|
|
1520
|
-
margin-right: 0;
|
|
1521
|
-
}
|
|
1522
|
-
|
|
1523
|
-
.sky-switch-icon-group .sky-switch-control-icon {
|
|
1518
|
+
.sky-switch-icon-group:not(.sky-theme-modern *) .sky-switch-control-icon {
|
|
1524
1519
|
margin-left: 0;
|
|
1525
1520
|
margin-right: 0;
|
|
1526
1521
|
border-radius: 0;
|
|
1527
1522
|
}
|
|
1528
|
-
.sky-switch-icon-group sky-radio:first-of-type .sky-switch-control-icon,
|
|
1529
|
-
.sky-switch-icon-group sky-checkbox:first-of-type .sky-switch-control-icon {
|
|
1523
|
+
.sky-switch-icon-group:not(.sky-theme-modern *) sky-radio:first-of-type .sky-switch-control-icon,
|
|
1524
|
+
.sky-switch-icon-group:not(.sky-theme-modern *) sky-checkbox:first-of-type .sky-switch-control-icon {
|
|
1530
1525
|
border-top-left-radius: 3px;
|
|
1531
1526
|
border-bottom-left-radius: 3px;
|
|
1532
1527
|
}
|
|
1533
|
-
.sky-switch-icon-group sky-radio:last-of-type .sky-switch-control-icon,
|
|
1534
|
-
.sky-switch-icon-group sky-checkbox:last-of-type .sky-switch-control-icon {
|
|
1528
|
+
.sky-switch-icon-group:not(.sky-theme-modern *) sky-radio:last-of-type .sky-switch-control-icon,
|
|
1529
|
+
.sky-switch-icon-group:not(.sky-theme-modern *) sky-checkbox:last-of-type .sky-switch-control-icon {
|
|
1535
1530
|
border-top-right-radius: 3px;
|
|
1536
1531
|
border-bottom-right-radius: 3px;
|
|
1537
1532
|
}
|
|
@@ -568,29 +568,110 @@
|
|
|
568
568
|
opacity: 1;
|
|
569
569
|
}
|
|
570
570
|
|
|
571
|
-
.sky-theme-modern .sky-switch
|
|
571
|
+
.sky-theme-modern .sky-switch {
|
|
572
|
+
cursor: pointer;
|
|
573
|
+
display: inline-flex;
|
|
574
|
+
position: relative;
|
|
575
|
+
}
|
|
576
|
+
.sky-theme-modern .sky-switch.sky-switch-disabled {
|
|
577
|
+
cursor: not-allowed;
|
|
578
|
+
}
|
|
579
|
+
.sky-theme-modern .sky-switch.sky-control-label-required .sky-switch-label {
|
|
580
|
+
margin-right: 0;
|
|
581
|
+
}
|
|
582
|
+
.sky-theme-modern .sky-switch:hover .sky-switch-control {
|
|
583
|
+
border-color: var(--sky-highlight-color-info);
|
|
584
|
+
border-width: 2px;
|
|
585
|
+
}
|
|
586
|
+
.sky-theme-modern .sky-switch .sky-switch-input {
|
|
587
|
+
border: 0;
|
|
588
|
+
clip: rect(0 0 0 0);
|
|
589
|
+
height: 1px;
|
|
590
|
+
margin: -1px;
|
|
591
|
+
overflow: hidden;
|
|
592
|
+
padding: 0;
|
|
593
|
+
position: absolute;
|
|
594
|
+
width: 1px;
|
|
595
|
+
outline: 0;
|
|
596
|
+
-webkit-appearance: none;
|
|
597
|
+
}
|
|
598
|
+
.sky-theme-modern .sky-switch .sky-switch-input.sky-switch-invalid + .sky-switch-control {
|
|
599
|
+
box-shadow: 0 0 8px rgba(239, 64, 68, 0.6);
|
|
600
|
+
border: 1px solid var(--sky-highlight-color-danger);
|
|
601
|
+
outline: none;
|
|
602
|
+
}
|
|
603
|
+
.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
|
|
604
|
+
background-color: var(--sky-background-color-input-selected);
|
|
605
|
+
}
|
|
606
|
+
.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
|
|
607
|
+
background-color: #d2e8c0;
|
|
608
|
+
}
|
|
609
|
+
.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
|
|
610
|
+
background-color: #ffeaca;
|
|
611
|
+
}
|
|
612
|
+
.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
|
|
613
|
+
background-color: #fac8bf;
|
|
614
|
+
}
|
|
615
|
+
.sky-theme-modern .sky-switch .sky-switch-input:disabled + .sky-switch-control {
|
|
616
|
+
background-color: var(--sky-background-color-disabled);
|
|
617
|
+
}
|
|
618
|
+
.sky-theme-modern .sky-switch .sky-switch-input:focus + .sky-switch-control {
|
|
619
|
+
outline: thin dotted;
|
|
620
|
+
outline: -webkit-focus-ring-color auto 5px;
|
|
621
|
+
}
|
|
622
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled).sky-switch-invalid + .sky-switch-control {
|
|
572
623
|
border: solid 2px var(--sky-highlight-color-danger);
|
|
573
624
|
box-shadow: none;
|
|
574
625
|
}
|
|
575
|
-
.sky-theme-modern .sky-switch-input:not(:disabled):checked + .sky-switch-control, .sky-theme-modern .sky-switch-input:not(:disabled)[type=checkbox]:indeterminate + .sky-switch-control, .sky-theme-modern .sky-switch-input:not(:disabled):hover + .sky-switch-control {
|
|
626
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):checked + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled)[type=checkbox]:indeterminate + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):hover + .sky-switch-control {
|
|
576
627
|
border: solid 1px var(--sky-background-color-primary-dark);
|
|
577
628
|
}
|
|
578
|
-
.sky-theme-modern .sky-switch-input:not(:disabled):focus + .sky-switch-control, .sky-theme-modern .sky-switch-input:not(:disabled):active + .sky-switch-control {
|
|
629
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):active + .sky-switch-control {
|
|
579
630
|
border: solid 2px var(--sky-background-color-primary-dark);
|
|
580
631
|
}
|
|
581
|
-
.sky-theme-modern .sky-switch-input:not(:disabled):focus:not(:active) + .sky-switch-control {
|
|
632
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus:not(:active) + .sky-switch-control {
|
|
582
633
|
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
|
|
583
634
|
outline: none;
|
|
584
635
|
}
|
|
585
|
-
.sky-theme-modern .sky-switch-control {
|
|
586
|
-
|
|
636
|
+
.sky-theme-modern .sky-switch .sky-switch-control {
|
|
637
|
+
width: var(--sky-switch-size);
|
|
638
|
+
max-width: var(--sky-switch-size);
|
|
639
|
+
height: var(--sky-switch-size);
|
|
640
|
+
flex: 1 0 var(--sky-switch-size);
|
|
641
|
+
margin: 0 var(--sky-switch-margin) auto auto;
|
|
642
|
+
display: inline-flex;
|
|
643
|
+
position: relative;
|
|
587
644
|
border: 1px solid var(--sky-border-color-neutral-medium-dark);
|
|
645
|
+
background-color: #ffffff;
|
|
646
|
+
color: var(--sky-text-color-default);
|
|
647
|
+
text-align: center;
|
|
648
|
+
line-height: 1;
|
|
649
|
+
align-items: center;
|
|
650
|
+
justify-content: center;
|
|
651
|
+
transition: border-color 150ms, box-shadow 150ms, color 150ms;
|
|
588
652
|
}
|
|
589
|
-
.sky-theme-modern .sky-switch
|
|
590
|
-
|
|
653
|
+
.sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon {
|
|
654
|
+
max-width: none;
|
|
655
|
+
width: 35px;
|
|
656
|
+
height: 35px;
|
|
657
|
+
flex: 1 0 35px;
|
|
658
|
+
font-size: 18px;
|
|
591
659
|
}
|
|
592
|
-
.sky-theme-modern .sky-switch-
|
|
593
|
-
|
|
660
|
+
.sky-theme-modern .sky-switch .sky-switch-control::before {
|
|
661
|
+
content: "";
|
|
662
|
+
}
|
|
663
|
+
.sky-theme-modern .sky-switch .sky-switch-label {
|
|
664
|
+
line-height: var(--sky-switch-size);
|
|
665
|
+
flex: 1 1 auto;
|
|
666
|
+
width: 100%;
|
|
667
|
+
margin-right: 10px;
|
|
668
|
+
min-width: 0;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-control-icon {
|
|
672
|
+
margin-left: 0;
|
|
673
|
+
margin-right: 0;
|
|
674
|
+
border-radius: 0;
|
|
594
675
|
}
|
|
595
676
|
.sky-theme-modern .sky-switch-icon-group .sky-switch-control {
|
|
596
677
|
background-color: transparent;
|
|
@@ -624,6 +705,7 @@
|
|
|
624
705
|
.sky-theme-modern .sky-switch-icon-group sky-radio .sky-switch-control-icon {
|
|
625
706
|
border-radius: 6px;
|
|
626
707
|
}
|
|
708
|
+
|
|
627
709
|
.sky-theme-modern.sky-theme-mode-dark .sky-switch-input:disabled + .sky-switch-control {
|
|
628
710
|
background-color: #232427;
|
|
629
711
|
border-color: #686c73;
|