@skyux/theme 10.32.0 → 11.0.0-alpha.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 +517 -399
- package/esm2022/index.mjs +2 -1
- package/esm2022/lib/icons/icon-manifest.service.mjs +3 -3
- package/esm2022/lib/style-loader.mjs +3 -3
- package/esm2022/lib/theme.module.mjs +4 -4
- package/esm2022/lib/theming/theme-class.directive.mjs +3 -3
- package/esm2022/lib/theming/theme-component-class.directive.mjs +32 -0
- package/esm2022/lib/theming/theme-if.directive.mjs +3 -3
- package/esm2022/lib/theming/theme.directive.mjs +3 -3
- package/esm2022/lib/theming/theme.service.mjs +3 -3
- package/esm2022/lib/viewport/viewport.service.mjs +3 -3
- package/fesm2022/skyux-theme.mjs +56 -27
- 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 +4 -4
- 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;
|