@skyux/theme 11.9.0 → 11.10.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/themes/modern/styles.css +51 -51
- package/documentation.json +104 -104
- 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 +3 -3
- 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 +28 -28
- package/package.json +3 -3
- package/scss/mixins.scss +14 -8
|
@@ -1050,22 +1050,22 @@
|
|
|
1050
1050
|
opacity: 1;
|
|
1051
1051
|
}
|
|
1052
1052
|
|
|
1053
|
-
|
|
1053
|
+
.sky-theme-modern .sky-switch {
|
|
1054
1054
|
cursor: pointer;
|
|
1055
1055
|
display: inline-flex;
|
|
1056
1056
|
position: relative;
|
|
1057
1057
|
}
|
|
1058
|
-
|
|
1058
|
+
.sky-theme-modern .sky-switch.sky-switch-disabled {
|
|
1059
1059
|
cursor: not-allowed;
|
|
1060
1060
|
}
|
|
1061
|
-
|
|
1061
|
+
.sky-theme-modern .sky-switch.sky-control-label-required .sky-switch-label {
|
|
1062
1062
|
margin-right: 0;
|
|
1063
1063
|
}
|
|
1064
|
-
|
|
1064
|
+
.sky-theme-modern .sky-switch:hover .sky-switch-control {
|
|
1065
1065
|
border-color: var(--sky-highlight-color-info);
|
|
1066
1066
|
border-width: 2px;
|
|
1067
1067
|
}
|
|
1068
|
-
|
|
1068
|
+
.sky-theme-modern .sky-switch .sky-switch-input {
|
|
1069
1069
|
border: 0;
|
|
1070
1070
|
clip: rect(0 0 0 0);
|
|
1071
1071
|
height: 1px;
|
|
@@ -1077,45 +1077,45 @@
|
|
|
1077
1077
|
outline: 0;
|
|
1078
1078
|
-webkit-appearance: none;
|
|
1079
1079
|
}
|
|
1080
|
-
|
|
1080
|
+
.sky-theme-modern .sky-switch .sky-switch-input.sky-switch-invalid + .sky-switch-control {
|
|
1081
1081
|
box-shadow: 0 0 8px rgba(239, 64, 68, 0.6);
|
|
1082
1082
|
border: 1px solid var(--sky-highlight-color-danger);
|
|
1083
1083
|
outline: none;
|
|
1084
1084
|
}
|
|
1085
|
-
|
|
1085
|
+
.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 {
|
|
1086
1086
|
background-color: var(--sky-background-color-input-selected);
|
|
1087
1087
|
}
|
|
1088
|
-
|
|
1088
|
+
.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 {
|
|
1089
1089
|
background-color: #d2e8c0;
|
|
1090
1090
|
}
|
|
1091
|
-
|
|
1091
|
+
.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 {
|
|
1092
1092
|
background-color: #ffeaca;
|
|
1093
1093
|
}
|
|
1094
|
-
|
|
1094
|
+
.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 {
|
|
1095
1095
|
background-color: #fac8bf;
|
|
1096
1096
|
}
|
|
1097
|
-
|
|
1097
|
+
.sky-theme-modern .sky-switch .sky-switch-input:disabled + .sky-switch-control {
|
|
1098
1098
|
background-color: var(--sky-background-color-disabled);
|
|
1099
1099
|
}
|
|
1100
|
-
|
|
1100
|
+
.sky-theme-modern .sky-switch .sky-switch-input:focus + .sky-switch-control {
|
|
1101
1101
|
outline: thin dotted;
|
|
1102
1102
|
outline: -webkit-focus-ring-color auto 5px;
|
|
1103
1103
|
}
|
|
1104
|
-
|
|
1104
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled).sky-switch-invalid + .sky-switch-control {
|
|
1105
1105
|
border: solid 2px var(--sky-highlight-color-danger);
|
|
1106
1106
|
box-shadow: none;
|
|
1107
1107
|
}
|
|
1108
|
-
|
|
1108
|
+
.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 {
|
|
1109
1109
|
border: solid 1px var(--sky-background-color-primary-dark);
|
|
1110
1110
|
}
|
|
1111
|
-
|
|
1111
|
+
.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 {
|
|
1112
1112
|
border: solid 2px var(--sky-background-color-primary-dark);
|
|
1113
1113
|
}
|
|
1114
|
-
|
|
1114
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus:not(:active) + .sky-switch-control {
|
|
1115
1115
|
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
|
|
1116
1116
|
outline: none;
|
|
1117
1117
|
}
|
|
1118
|
-
|
|
1118
|
+
.sky-theme-modern .sky-switch .sky-switch-control {
|
|
1119
1119
|
width: var(--sky-switch-size);
|
|
1120
1120
|
max-width: var(--sky-switch-size);
|
|
1121
1121
|
height: var(--sky-switch-size);
|
|
@@ -1132,17 +1132,17 @@
|
|
|
1132
1132
|
justify-content: center;
|
|
1133
1133
|
transition: border-color 150ms, box-shadow 150ms, color 150ms;
|
|
1134
1134
|
}
|
|
1135
|
-
|
|
1135
|
+
.sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon {
|
|
1136
1136
|
max-width: none;
|
|
1137
1137
|
width: 35px;
|
|
1138
1138
|
height: 35px;
|
|
1139
1139
|
flex: 1 0 35px;
|
|
1140
1140
|
font-size: 18px;
|
|
1141
1141
|
}
|
|
1142
|
-
|
|
1142
|
+
.sky-theme-modern .sky-switch .sky-switch-control::before {
|
|
1143
1143
|
content: "";
|
|
1144
1144
|
}
|
|
1145
|
-
|
|
1145
|
+
.sky-theme-modern .sky-switch .sky-switch-label {
|
|
1146
1146
|
line-height: var(--sky-switch-size);
|
|
1147
1147
|
flex: 1 1 auto;
|
|
1148
1148
|
width: 100%;
|
|
@@ -1150,41 +1150,41 @@
|
|
|
1150
1150
|
min-width: 0;
|
|
1151
1151
|
}
|
|
1152
1152
|
|
|
1153
|
-
|
|
1153
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-control-icon {
|
|
1154
1154
|
margin-left: 0;
|
|
1155
1155
|
margin-right: 0;
|
|
1156
1156
|
border-radius: 0;
|
|
1157
1157
|
}
|
|
1158
|
-
|
|
1158
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-control {
|
|
1159
1159
|
background-color: transparent;
|
|
1160
1160
|
}
|
|
1161
|
-
|
|
1161
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate + .sky-switch-control {
|
|
1162
1162
|
background-color: var(--sky-background-color-input-selected);
|
|
1163
1163
|
}
|
|
1164
|
-
|
|
1164
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled + .sky-switch-control {
|
|
1165
1165
|
background-color: #ededee;
|
|
1166
1166
|
border: none;
|
|
1167
1167
|
color: var(--sky-text-color-deemphasized);
|
|
1168
1168
|
}
|
|
1169
|
-
|
|
1169
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled:checked + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate + .sky-switch-control, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:disabled:indeterminate + .sky-switch-control {
|
|
1170
1170
|
color: var(--sky-background-color-primary-dark);
|
|
1171
1171
|
}
|
|
1172
|
-
|
|
1172
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-control {
|
|
1173
1173
|
border: none;
|
|
1174
1174
|
border-radius: 6px;
|
|
1175
1175
|
}
|
|
1176
|
-
|
|
1176
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-control.sky-switch-control-icon {
|
|
1177
1177
|
font-size: 20px;
|
|
1178
1178
|
height: 40px;
|
|
1179
1179
|
width: 40px;
|
|
1180
1180
|
}
|
|
1181
|
-
|
|
1181
|
+
.sky-theme-modern .sky-switch-icon-group sky-checkbox .sky-switch-control-icon {
|
|
1182
1182
|
margin-right: 10px;
|
|
1183
1183
|
}
|
|
1184
|
-
|
|
1184
|
+
.sky-theme-modern .sky-switch-icon-group sky-checkbox:last-of-type .sky-switch-control-icon {
|
|
1185
1185
|
margin-right: 0;
|
|
1186
1186
|
}
|
|
1187
|
-
|
|
1187
|
+
.sky-theme-modern .sky-switch-icon-group sky-radio .sky-switch-control-icon {
|
|
1188
1188
|
border-radius: 6px;
|
|
1189
1189
|
}
|
|
1190
1190
|
|
|
@@ -1197,7 +1197,7 @@
|
|
|
1197
1197
|
color: #fbfcfe;
|
|
1198
1198
|
}
|
|
1199
1199
|
|
|
1200
|
-
|
|
1200
|
+
.sky-theme-modern:not(.sky-theme-brand-blackbaud) {
|
|
1201
1201
|
--sky-override-font-size: var(--sky-font-size-body-m);
|
|
1202
1202
|
--sky-override-form-font-weight: var(--sky-font-weight-body-m);
|
|
1203
1203
|
--sky-override-p-line-height: var(--sky-font-line_height-body-m);
|
|
@@ -1272,24 +1272,24 @@ html:has(.sky-theme-brand-blackbaud) {
|
|
|
1272
1272
|
border-radius: var(--sky-border-radius-s);
|
|
1273
1273
|
}
|
|
1274
1274
|
|
|
1275
|
-
|
|
1276
|
-
|
|
1275
|
+
.sky-theme-modern.sky-theme-brand-blackbaud h1,
|
|
1276
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-1 {
|
|
1277
1277
|
line-height: var(--sky-font-line_height-heading-1);
|
|
1278
1278
|
}
|
|
1279
|
-
|
|
1280
|
-
|
|
1279
|
+
.sky-theme-modern.sky-theme-brand-blackbaud h2,
|
|
1280
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-2 {
|
|
1281
1281
|
line-height: var(--sky-font-line_height-heading-2);
|
|
1282
1282
|
}
|
|
1283
|
-
|
|
1284
|
-
|
|
1283
|
+
.sky-theme-modern.sky-theme-brand-blackbaud h3,
|
|
1284
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-3 {
|
|
1285
1285
|
line-height: var(--sky-font-line_height-heading-3);
|
|
1286
1286
|
}
|
|
1287
|
-
|
|
1288
|
-
|
|
1287
|
+
.sky-theme-modern.sky-theme-brand-blackbaud h4,
|
|
1288
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-4 {
|
|
1289
1289
|
line-height: var(--sky-font-line_height-heading-4);
|
|
1290
1290
|
}
|
|
1291
|
-
|
|
1292
|
-
|
|
1291
|
+
.sky-theme-modern.sky-theme-brand-blackbaud h5,
|
|
1292
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-5 {
|
|
1293
1293
|
line-height: var(--sky-font-line_height-heading-5);
|
|
1294
1294
|
}
|
|
1295
1295
|
|
|
@@ -1361,32 +1361,32 @@ html:has(.sky-theme-brand-blackbaud) {
|
|
|
1361
1361
|
font-weight: var(--sky-font-weight-display-4);
|
|
1362
1362
|
}
|
|
1363
1363
|
|
|
1364
|
-
|
|
1364
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-default {
|
|
1365
1365
|
line-height: var(--sky-font-line_height-body-m);
|
|
1366
1366
|
}
|
|
1367
|
-
|
|
1367
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-sm {
|
|
1368
1368
|
line-height: var(--sky-font-line_height-body-s);
|
|
1369
1369
|
}
|
|
1370
|
-
|
|
1370
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-lg {
|
|
1371
1371
|
line-height: var(--sky-font-line_height-body-l);
|
|
1372
1372
|
}
|
|
1373
|
-
|
|
1373
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-data-label {
|
|
1374
1374
|
line-height: var(--sky-font-line_height-data_label);
|
|
1375
1375
|
}
|
|
1376
|
-
|
|
1376
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-field-label {
|
|
1377
1377
|
line-height: var(--sky-font-line_height-data_label);
|
|
1378
1378
|
}
|
|
1379
|
-
|
|
1379
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-1 {
|
|
1380
1380
|
line-height: var(--sky-font-line_height-display-1);
|
|
1381
1381
|
}
|
|
1382
|
-
|
|
1382
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-2 {
|
|
1383
1383
|
line-height: var(--sky-font-line_height-display-2);
|
|
1384
1384
|
}
|
|
1385
|
-
|
|
1386
|
-
|
|
1385
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-3,
|
|
1386
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-headline {
|
|
1387
1387
|
line-height: var(--sky-font-line_height-display-3);
|
|
1388
1388
|
}
|
|
1389
|
-
|
|
1389
|
+
.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-4 {
|
|
1390
1390
|
line-height: var(--sky-font-line_height-display-4);
|
|
1391
1391
|
}
|
|
1392
1392
|
|