@skyux/theme 11.17.0 → 11.18.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 +104 -64
- package/documentation.json +102 -102
- package/fesm2022/skyux-theme.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1249,6 +1249,25 @@
|
|
|
1249
1249
|
opacity: 1;
|
|
1250
1250
|
}
|
|
1251
1251
|
|
|
1252
|
+
.sky-theme-modern:not(.sky-theme-brand-blackbaud) {
|
|
1253
|
+
--sky-override-icon-switch-border-width-disabled: 0;
|
|
1254
|
+
--sky-override-icon-color-group: var(--sky-color-icon-action);
|
|
1255
|
+
--sky-override-switch-icon-checked-color-no-group: var(
|
|
1256
|
+
--sky-color-text-default
|
|
1257
|
+
);
|
|
1258
|
+
--sky-override-icon-switch-size: 35px;
|
|
1259
|
+
--sky-override-icon-switch-font-size: 18px;
|
|
1260
|
+
--sky-override-icon-switch-size-group: 40px;
|
|
1261
|
+
--sky-override-icon-switch-font-size-group: 20px;
|
|
1262
|
+
--sky-override-switch-background-color: var(--modern-color-white);
|
|
1263
|
+
--sky-override-switch-background-color-success: #d2e8c0;
|
|
1264
|
+
--sky-override-switch-background-color-warning: #ffeaca;
|
|
1265
|
+
--sky-override-switch-background-color-danger: #fac8bf;
|
|
1266
|
+
--sky-override-switch-border-color: var(--modern-color-blue-74);
|
|
1267
|
+
--sky-override-switch-checked-color: var(--sky-color-icon-action);
|
|
1268
|
+
--sky-switch-label-margin-right: 10px;
|
|
1269
|
+
}
|
|
1270
|
+
|
|
1252
1271
|
.sky-theme-modern .sky-switch {
|
|
1253
1272
|
cursor: pointer;
|
|
1254
1273
|
display: inline-flex;
|
|
@@ -1260,10 +1279,6 @@
|
|
|
1260
1279
|
.sky-theme-modern .sky-switch.sky-control-label-required .sky-switch-label {
|
|
1261
1280
|
margin-right: 0;
|
|
1262
1281
|
}
|
|
1263
|
-
.sky-theme-modern .sky-switch:hover .sky-switch-control {
|
|
1264
|
-
border-color: var(--sky-highlight-color-info);
|
|
1265
|
-
border-width: 2px;
|
|
1266
|
-
}
|
|
1267
1282
|
.sky-theme-modern .sky-switch .sky-switch-input {
|
|
1268
1283
|
border: 0;
|
|
1269
1284
|
clip: rect(0 0 0 0);
|
|
@@ -1277,54 +1292,78 @@
|
|
|
1277
1292
|
-webkit-appearance: none;
|
|
1278
1293
|
}
|
|
1279
1294
|
.sky-theme-modern .sky-switch .sky-switch-input.sky-switch-invalid + .sky-switch-control {
|
|
1280
|
-
|
|
1281
|
-
border:
|
|
1282
|
-
outline: none;
|
|
1295
|
+
border-width: var(--sky-border-width-input-error);
|
|
1296
|
+
border-color: var(--sky-color-border-input-error);
|
|
1283
1297
|
}
|
|
1284
1298
|
.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 {
|
|
1285
|
-
background-color: var(--sky-
|
|
1299
|
+
background-color: var(--sky-color-background-selected-heavy);
|
|
1300
|
+
border-width: var(--sky-border-width-input-selected);
|
|
1301
|
+
border-color: var(--sky-color-border-selected);
|
|
1302
|
+
}
|
|
1303
|
+
.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control:not(.sky-switch-control-icon), .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control:not(.sky-switch-control-icon) {
|
|
1304
|
+
color: var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse));
|
|
1305
|
+
}
|
|
1306
|
+
.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-icon, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-icon {
|
|
1307
|
+
color: var(--sky-override-switch-icon-checked-color-no-group, var(--sky-color-icon-inverse));
|
|
1308
|
+
}
|
|
1309
|
+
.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control:is(.sky-switch-control-success,
|
|
1310
|
+
.sky-switch-control-warning,
|
|
1311
|
+
.sky-switch-control-danger), .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control:is(.sky-switch-control-success,
|
|
1312
|
+
.sky-switch-control-warning,
|
|
1313
|
+
.sky-switch-control-danger) {
|
|
1314
|
+
color: var(--sky-color-icon-default);
|
|
1286
1315
|
}
|
|
1287
1316
|
.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 {
|
|
1288
|
-
background-color:
|
|
1317
|
+
background-color: var(--sky-override-switch-background-color-success, var(--sky-color-background-selected-success));
|
|
1289
1318
|
}
|
|
1290
1319
|
.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 {
|
|
1291
|
-
background-color:
|
|
1320
|
+
background-color: var(--sky-override-switch-background-color-warning, var(--sky-color-background-selected-warning));
|
|
1292
1321
|
}
|
|
1293
1322
|
.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 {
|
|
1294
|
-
background-color:
|
|
1323
|
+
background-color: var(--sky-override-switch-background-color-danger, var(--sky-color-background-selected-danger));
|
|
1295
1324
|
}
|
|
1296
1325
|
.sky-theme-modern .sky-switch .sky-switch-input:disabled + .sky-switch-control {
|
|
1297
|
-
background-color: var(--sky-background-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
outline: -webkit-focus-ring-color auto 5px;
|
|
1326
|
+
background-color: var(--sky-color-background-input-disabled);
|
|
1327
|
+
border-width: var(--sky-border-width-input-disabled);
|
|
1328
|
+
border-color: var(--sky-color-border-input-disabled);
|
|
1329
|
+
color: var(--sky-color-text-deemphasized);
|
|
1302
1330
|
}
|
|
1303
|
-
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled)
|
|
1304
|
-
border:
|
|
1305
|
-
|
|
1331
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):hover + .sky-switch-control {
|
|
1332
|
+
border-width: var(--sky-border-width-input-hover);
|
|
1333
|
+
border-color: var(--sky-color-border-input-hover);
|
|
1306
1334
|
}
|
|
1307
|
-
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):
|
|
1308
|
-
border:
|
|
1335
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):active + .sky-switch-control {
|
|
1336
|
+
border-width: var(--sky-border-width-input-active);
|
|
1337
|
+
border-color: var(--sky-color-border-input-active);
|
|
1309
1338
|
}
|
|
1310
|
-
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus
|
|
1311
|
-
border:
|
|
1339
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus-visible + .sky-switch-control {
|
|
1340
|
+
border-width: var(--sky-border-width-input-focus);
|
|
1341
|
+
border-color: var(--sky-color-border-input-focus);
|
|
1312
1342
|
}
|
|
1313
|
-
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus:not(:active) + .sky-switch-control {
|
|
1314
|
-
box-shadow:
|
|
1343
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus-visible:not(:active) + .sky-switch-control {
|
|
1344
|
+
box-shadow: var(--sky-elevation-focus);
|
|
1315
1345
|
outline: none;
|
|
1316
1346
|
}
|
|
1347
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible):checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible)[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
|
|
1348
|
+
border-color: var(--sky-override-switch-border-color, var(--sky-color-border-success));
|
|
1349
|
+
}
|
|
1350
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible):checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible)[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
|
|
1351
|
+
border-color: var(--sky-override-switch-border-color, var(--sky-color-border-warning));
|
|
1352
|
+
}
|
|
1353
|
+
.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible):checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover, :active, :focus-visible)[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
|
|
1354
|
+
border-color: var(--sky-override-switch-border-color, var(--sky-color-border-danger));
|
|
1355
|
+
}
|
|
1317
1356
|
.sky-theme-modern .sky-switch .sky-switch-control {
|
|
1318
|
-
width: var(--sky-switch
|
|
1319
|
-
max-width: var(--sky-switch
|
|
1320
|
-
height: var(--sky-switch
|
|
1321
|
-
flex: 1 0 var(--sky-switch
|
|
1322
|
-
margin: 0 var(--sky-
|
|
1357
|
+
width: var(--sky-size-switch);
|
|
1358
|
+
max-width: var(--sky-size-switch);
|
|
1359
|
+
height: var(--sky-size-switch);
|
|
1360
|
+
flex: 1 0 var(--sky-size-switch);
|
|
1361
|
+
margin: 0 var(--sky-space-gap-label-s) auto auto;
|
|
1323
1362
|
display: inline-flex;
|
|
1324
1363
|
position: relative;
|
|
1325
|
-
border:
|
|
1326
|
-
background-color:
|
|
1327
|
-
color: var(--sky-
|
|
1364
|
+
border: var(--sky-border-width-input-base) solid var(--sky-color-border-input-base);
|
|
1365
|
+
background-color: var(--sky-override-switch-background-color, var(--sky-color-background-input-base));
|
|
1366
|
+
color: var(--sky-color-icon-default);
|
|
1328
1367
|
text-align: center;
|
|
1329
1368
|
line-height: 1;
|
|
1330
1369
|
align-items: center;
|
|
@@ -1333,19 +1372,19 @@
|
|
|
1333
1372
|
}
|
|
1334
1373
|
.sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon {
|
|
1335
1374
|
max-width: none;
|
|
1336
|
-
width:
|
|
1337
|
-
height:
|
|
1338
|
-
flex: 1 0
|
|
1339
|
-
font-size:
|
|
1375
|
+
width: var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
|
|
1376
|
+
height: var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
|
|
1377
|
+
flex: 1 0 var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
|
|
1378
|
+
font-size: var(--sky-override-icon-switch-font-size, var(--sky-size-icon-m));
|
|
1340
1379
|
}
|
|
1341
1380
|
.sky-theme-modern .sky-switch .sky-switch-control::before {
|
|
1342
1381
|
content: "";
|
|
1343
1382
|
}
|
|
1344
1383
|
.sky-theme-modern .sky-switch .sky-switch-label {
|
|
1345
|
-
line-height: var(--sky-switch
|
|
1384
|
+
line-height: var(--sky-size-switch);
|
|
1346
1385
|
flex: 1 1 auto;
|
|
1347
1386
|
width: 100%;
|
|
1348
|
-
margin-right:
|
|
1387
|
+
margin-right: var(--sky-switch-label-margin-right, 0);
|
|
1349
1388
|
min-width: 0;
|
|
1350
1389
|
}
|
|
1351
1390
|
|
|
@@ -1355,30 +1394,40 @@
|
|
|
1355
1394
|
border-radius: 0;
|
|
1356
1395
|
}
|
|
1357
1396
|
.sky-theme-modern .sky-switch-icon-group .sky-switch-control {
|
|
1358
|
-
background-color:
|
|
1397
|
+
background-color: var(--sky-color-background-action-tertiary-base);
|
|
1398
|
+
border-width: var(--sky-width-action-base);
|
|
1399
|
+
border-color: var(--sky-color-border-action-tertiary-base);
|
|
1359
1400
|
}
|
|
1360
|
-
.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 {
|
|
1361
|
-
|
|
1401
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-icon, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-icon {
|
|
1402
|
+
border-width: var(--sky-border-width-action-selected-s);
|
|
1403
|
+
color: var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse));
|
|
1362
1404
|
}
|
|
1363
|
-
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled + .sky-switch-control {
|
|
1364
|
-
|
|
1365
|
-
border:
|
|
1366
|
-
color: var(--sky-text-color-deemphasized);
|
|
1405
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:disabled + .sky-switch-control.sky-switch-control-icon {
|
|
1406
|
+
border-color: var(--sky-color-border-action-tertiary-disabled);
|
|
1407
|
+
border-width: var(--sky-override-icon-switch-border-width-disabled, var(--sky-border-width-action-disabled));
|
|
1367
1408
|
}
|
|
1368
|
-
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked + .sky-switch-control
|
|
1369
|
-
color: var(--sky-
|
|
1409
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:checked:disabled + .sky-switch-control.sky-switch-control-icon, .sky-theme-modern .sky-switch-icon-group .sky-switch-input[type=checkbox]:indeterminate:disabled + .sky-switch-control.sky-switch-control-icon {
|
|
1410
|
+
color: var(--sky-color-icon-action);
|
|
1370
1411
|
}
|
|
1371
|
-
.sky-theme-modern .sky-switch-icon-group .sky-switch-control {
|
|
1372
|
-
border:
|
|
1373
|
-
border-
|
|
1412
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:not(:disabled):hover + .sky-switch-control {
|
|
1413
|
+
border-width: var(--sky-border-width-action-hover);
|
|
1414
|
+
border-color: var(--sky-color-border-action-tertiary-hover);
|
|
1415
|
+
}
|
|
1416
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:not(:disabled):active + .sky-switch-control {
|
|
1417
|
+
border-width: var(--sky-border-width-action-active);
|
|
1418
|
+
border-color: var(--sky-color-border-action-tertiary-active);
|
|
1419
|
+
}
|
|
1420
|
+
.sky-theme-modern .sky-switch-icon-group .sky-switch-input:not(:disabled):focus-visible + .sky-switch-control {
|
|
1421
|
+
border-width: var(--sky-border-width-action-focus);
|
|
1422
|
+
border-color: var(--sky-color-border-action-tertiary-focus);
|
|
1374
1423
|
}
|
|
1375
1424
|
.sky-theme-modern .sky-switch-icon-group .sky-switch-control.sky-switch-control-icon {
|
|
1376
|
-
font-size
|
|
1377
|
-
height:
|
|
1378
|
-
|
|
1425
|
+
width: var(--sky-override-icon-switch-size-group, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
|
|
1426
|
+
height: var(--sky-override-icon-switch-size-group, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
|
|
1427
|
+
font-size: var(--sky-override-icon-switch-font-size-group, var(--sky-size-icon-m));
|
|
1379
1428
|
}
|
|
1380
1429
|
.sky-theme-modern .sky-switch-icon-group sky-checkbox .sky-switch-control-icon {
|
|
1381
|
-
margin-right:
|
|
1430
|
+
margin-right: var(--sky-space-gap-action_group-m);
|
|
1382
1431
|
}
|
|
1383
1432
|
.sky-theme-modern .sky-switch-icon-group sky-checkbox:last-of-type .sky-switch-control-icon {
|
|
1384
1433
|
margin-right: 0;
|
|
@@ -1387,15 +1436,6 @@
|
|
|
1387
1436
|
border-radius: 6px;
|
|
1388
1437
|
}
|
|
1389
1438
|
|
|
1390
|
-
.sky-theme-modern.sky-theme-mode-dark .sky-switch-input:disabled + .sky-switch-control {
|
|
1391
|
-
background-color: #232427;
|
|
1392
|
-
border-color: #686c73;
|
|
1393
|
-
color: #c0c2c5;
|
|
1394
|
-
}
|
|
1395
|
-
.sky-theme-modern.sky-theme-mode-dark .sky-switch-icon-group .sky-switch-control {
|
|
1396
|
-
color: #fbfcfe;
|
|
1397
|
-
}
|
|
1398
|
-
|
|
1399
1439
|
.sky-theme-modern:not(.sky-theme-brand-blackbaud) {
|
|
1400
1440
|
--sky-override-font-size: var(--sky-font-size-body-m);
|
|
1401
1441
|
--sky-override-form-font-weight: var(--sky-font-weight-body-m);
|