@skyux/theme 13.0.0-alpha.0 → 13.0.0-alpha.10

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 CHANGED
@@ -1,5 +1,3 @@
1
- @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
2
- @import url("https://sky.blackbaudcdn.net/static/skyux-icons/8.2.0/assets/css/skyux-icons.min.css");
3
1
  /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
4
2
  /* Document
5
3
  ========================================================================== */
@@ -342,6 +340,7 @@ textarea {
342
340
  :root {
343
341
  /* color */
344
342
  --sky-background-color-page-default: #ffffff;
343
+ --sky-background-color-container-default: #ffffff;
345
344
  --sky-background-color-neutral-light: #eeeeef;
346
345
  --sky-background-color-primary-dark: #0974a1;
347
346
  --sky-background-color-disabled: #cdcfd2;
@@ -353,7 +352,7 @@ textarea {
353
352
  --sky-background-color-danger: #f7a08f;
354
353
  --sky-background-color-danger-dark: #d93a3d;
355
354
  --sky-border-color-neutral-medium: #cdcfd2;
356
- --sky-category-color-light-blue: #bfecfb;
355
+ --sky-category-color-green: #bfecfb;
357
356
  --sky-category-color-teal: #80dbca;
358
357
  --sky-category-color-purple: #c9b6d7;
359
358
  --sky-category-color-orange: #f9ba90;
@@ -598,7 +597,7 @@ a.sky-btn:hover {
598
597
  text-decoration: none;
599
598
  }
600
599
 
601
- .sky-btn-tab-close {
600
+ .sky-btn-tab-close:not(.sky-btn-icon-borderless) {
602
601
  background-color: transparent;
603
602
  border: none;
604
603
  color: var(--sky-text-color-deemphasized);
@@ -606,7 +605,7 @@ a.sky-btn:hover {
606
605
  line-height: 1.4;
607
606
  margin-left: 5px;
608
607
  }
609
- .sky-btn-tab-close:hover {
608
+ .sky-btn-tab-close:not(.sky-btn-icon-borderless):hover {
610
609
  color: var(--sky-text-color-default);
611
610
  transition: color 150ms;
612
611
  }
@@ -625,7 +624,7 @@ a.sky-btn:hover {
625
624
  background-color: var(--sky-background-color-primary-dark);
626
625
  color: var(--sky-text-color-on-dark);
627
626
  }
628
- .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-btn-tab-close,
627
+ .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-btn-tab-close:not(.sky-btn-icon-borderless),
629
628
  .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-tab-header-count {
630
629
  color: #fff;
631
630
  }
@@ -964,10 +963,11 @@ textarea.ng-invalid.ng-touched {
964
963
  }
965
964
 
966
965
  .sky-error-label::before {
967
- content: "\f071";
968
- font-family: FontAwesome;
966
+ content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTEiIGQ9Ik0xNC4wNDM3IDMuMTgxODJDMTQuOTEzMiAxLjYwNjA2IDE3LjA4NjggMS42MDYwNiAxNy45NTYzIDMuMTgxODJMMjkuNjk0IDI0LjQ1NDVDMzAuNTYzNSAyNi4wMzAzIDI5LjQ3NjYgMjggMjcuNzM3NyAyOEg0LjI2MjI5QzIuNTIzMzcgMjggMS40MzY1NSAyNi4wMzAzIDIuMzA2MDEgMjQuNDU0NUwxNC4wNDM3IDMuMTgxODJaIiBmaWxsPSIjRUY0MDQ0Ii8+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTIiIGQ9Ik0xNC42MTA0IDEwLjM4MzRIMTcuNDgxNkwxNy4xNjg3IDE4Ljc5NDVIMTQuOTIzM0wxNC42MTA0IDEwLjM4MzRaTTE1Ljk5MDggMjMuNjE2NkMxNS41NzM2IDIzLjYxNjYgMTUuMjE3OCAyMy40NjkzIDE0LjkyMzMgMjMuMTc0OEMxNC42NDExIDIyLjg4MDQgMTQuNSAyMi41MjQ1IDE0LjUgMjIuMTA3NEMxNC41IDIxLjY5MDIgMTQuNjQxMSAyMS4zMzQ0IDE0LjkyMzMgMjEuMDM5OUMxNS4yMTc4IDIwLjc0NTQgMTUuNTczNiAyMC41OTgyIDE1Ljk5MDggMjAuNTk4MkMxNi40MDggMjAuNTk4MiAxNi43NjM4IDIwLjc0NTQgMTcuMDU4MyAyMS4wMzk5QzE3LjM1MjggMjEuMzM0NCAxNy41IDIxLjY5MDIgMTcuNSAyMi4xMDc0QzE3LjUgMjIuNTI0NSAxNy4zNTI4IDIyLjg4MDQgMTcuMDU4MyAyMy4xNzQ4QzE2Ljc3NjEgMjMuNDY5MyAxNi40MjAyIDIzLjYxNjYgMTUuOTkwOCAyMy42MTY2WiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K");
967
+ display: inline-block;
968
+ width: var(--sky-size-icon-s, 16px);
969
+ vertical-align: middle;
969
970
  margin-right: 5px;
970
- color: var(--sky-highlight-color-danger);
971
971
  }
972
972
 
973
973
  .sky-control-label {
@@ -1120,84 +1120,87 @@ body:not(.sky-theme-modern) {
1120
1120
  .sky-layout-host-blocks {
1121
1121
  --sky-layout-host-content-spacing: var(
1122
1122
  --sky-override-page-content-blocks-spacing-xs,
1123
- var(--sky-comp-page-content-blocks-space-inset-top)
1124
- var(--sky-comp-page-content-blocks-space-inset-right)
1125
- var(--sky-comp-page-content-blocks-space-inset-bottom)
1126
- var(--sky-comp-page-content-blocks-space-inset-left)
1123
+ var(--sky-comp-layout-content-blocks-space-inset-xs-top)
1124
+ var(--sky-comp-layout-content-blocks-space-inset-xs-right)
1125
+ var(--sky-comp-layout-content-blocks-space-inset-xs-bottom)
1126
+ var(--sky-comp-layout-content-blocks-space-inset-xs-left)
1127
1127
  );
1128
1128
  --sky-layout-host-header-spacing: var(
1129
1129
  --sky-override-page-header-spacing-xs,
1130
- var(--sky-comp-page-header-blocks-space-inset-top)
1131
- var(--sky-comp-page-header-blocks-space-inset-right)
1132
- var(--sky-comp-page-header-blocks-space-inset-bottom)
1133
- var(--sky-comp-page-header-blocks-space-inset-left)
1130
+ var(--sky-comp-layout-header-blocks-space-inset-xs-top)
1131
+ var(--sky-comp-layout-header-blocks-space-inset-xs-right)
1132
+ var(--sky-comp-layout-header-blocks-space-inset-xs-bottom)
1133
+ var(--sky-comp-layout-header-blocks-space-inset-xs-left)
1134
1134
  );
1135
1135
  --sky-layout-host-links-spacing: var(
1136
1136
  --sky-override-page-content-with-links-spacing-xs,
1137
- var(--sky-comp-page-links-blocks-space-inset-top)
1138
- var(--sky-comp-page-links-blocks-space-inset-right)
1139
- var(--sky-comp-page-links-blocks-space-inset-bottom)
1140
- var(--sky-comp-page-links-blocks-space-inset-left)
1137
+ var(--sky-comp-layout-links-blocks-space-inset-xs-top)
1138
+ var(--sky-comp-layout-links-blocks-space-inset-xs-right)
1139
+ var(--sky-comp-layout-links-blocks-space-inset-xs-bottom)
1140
+ var(--sky-comp-layout-links-blocks-space-inset-xs-left)
1141
1141
  );
1142
1142
  }
1143
1143
  .sky-layout-host-fit {
1144
1144
  --sky-layout-host-content-spacing: var(
1145
1145
  --sky-override-page-content-fit-list-spacing-xs,
1146
- var(--sky-comp-page-content-fit-space-inset-top)
1147
- var(--sky-comp-page-content-fit-space-inset-right)
1148
- var(--sky-comp-page-content-fit-space-inset-bottom)
1149
- var(--sky-comp-page-content-fit-space-inset-left)
1146
+ var(--sky-comp-layout-content-fit-space-inset-xs-top)
1147
+ var(--sky-comp-layout-content-fit-space-inset-xs-right)
1148
+ var(--sky-comp-layout-content-fit-space-inset-xs-bottom)
1149
+ var(--sky-comp-layout-content-fit-space-inset-xs-left)
1150
1150
  );
1151
1151
  --sky-layout-host-header-spacing: var(
1152
1152
  --sky-override-page-header-spacing-xs,
1153
- var(--sky-comp-page-header-fit-space-inset-top)
1154
- var(--sky-comp-page-header-fit-space-inset-right)
1155
- var(--sky-comp-page-header-fit-space-inset-bottom)
1156
- var(--sky-comp-page-header-fit-space-inset-left)
1153
+ var(--sky-comp-layout-header-fit-space-inset-xs-top)
1154
+ var(--sky-comp-layout-header-fit-space-inset-xs-right)
1155
+ var(--sky-comp-layout-header-fit-space-inset-xs-bottom)
1156
+ var(--sky-comp-layout-header-fit-space-inset-xs-left)
1157
1157
  );
1158
1158
  }
1159
1159
  .sky-layout-host-list {
1160
1160
  --sky-layout-host-content-spacing: var(
1161
1161
  --sky-override-page-content-fit-list-spacing-xs,
1162
- var(--sky-comp-page-content-list-space-inset-top)
1163
- var(--sky-comp-page-content-list-space-inset-right)
1164
- var(--sky-comp-page-content-list-space-inset-bottom)
1165
- var(--sky-comp-page-content-list-space-inset-left)
1162
+ var(--sky-comp-layout-content-list-space-inset-xs-top)
1163
+ var(--sky-comp-layout-content-list-space-inset-xs-right)
1164
+ var(--sky-comp-layout-content-list-space-inset-xs-bottom)
1165
+ var(--sky-comp-layout-content-list-space-inset-xs-left)
1166
1166
  );
1167
1167
  --sky-layout-host-links-spacing: var(
1168
1168
  --sky-override-page-content-with-links-spacing-xs,
1169
- var(--sky-comp-page-links-list-space-inset-top)
1170
- var(--sky-comp-page-links-list-space-inset-right)
1171
- var(--sky-comp-page-links-list-space-inset-bottom)
1172
- var(--sky-comp-page-links-list-space-inset-left)
1169
+ var(--sky-comp-layout-links-list-space-inset-xs-top)
1170
+ var(--sky-comp-layout-links-list-space-inset-xs-right)
1171
+ var(--sky-comp-layout-links-list-space-inset-xs-bottom)
1172
+ var(--sky-comp-layout-links-list-space-inset-xs-left)
1173
1173
  );
1174
1174
  --sky-layout-host-header-spacing: var(
1175
1175
  --sky-override-page-header-spacing-xs,
1176
- var(--sky-comp-page-header-list-space-inset-top)
1177
- var(--sky-comp-page-header-list-space-inset-right)
1178
- var(--sky-comp-page-header-list-space-inset-bottom)
1179
- var(--sky-comp-page-header-list-space-inset-left)
1176
+ var(--sky-comp-layout-header-list-space-inset-xs-top)
1177
+ var(--sky-comp-layout-header-list-space-inset-xs-right)
1178
+ var(--sky-comp-layout-header-list-space-inset-xs-bottom)
1179
+ var(--sky-comp-layout-header-list-space-inset-xs-left)
1180
1180
  );
1181
1181
  }
1182
1182
  .sky-layout-host-tabs {
1183
1183
  --sky-layout-host-content-spacing: 0;
1184
1184
  --sky-layout-host-tab-content-spacing: var(
1185
1185
  --sky-override-tabset-padding-xs-breakpoint,
1186
- var(--sky-comp-page-tabset-tabs-space-inset-left)
1186
+ var(--sky-comp-layout-tabset-tabs-space-inset-xs-top)
1187
+ var(--sky-comp-layout-tabset-tabs-space-inset-xs-right)
1188
+ var(--sky-comp-layout-tabset-tabs-space-inset-xs-bottom)
1189
+ var(--sky-comp-layout-tabset-tabs-space-inset-xs-left)
1187
1190
  );
1188
1191
  --sky-layout-host-links-spacing: var(
1189
1192
  --sky-override-page-content-with-links-spacing-xs,
1190
- var(--sky-comp-page-links-tabs-space-inset-top)
1191
- var(--sky-comp-page-links-tabs-space-inset-right)
1192
- var(--sky-comp-page-links-tabs-space-inset-bottom)
1193
- var(--sky-comp-page-links-tabs-space-inset-left)
1193
+ var(--sky-comp-layout-links-tabs-space-inset-xs-top)
1194
+ var(--sky-comp-layout-links-tabs-space-inset-xs-right)
1195
+ var(--sky-comp-layout-links-tabs-space-inset-xs-bottom)
1196
+ var(--sky-comp-layout-links-tabs-space-inset-xs-left)
1194
1197
  );
1195
1198
  --sky-layout-host-header-spacing: var(
1196
1199
  --sky-override-page-header-spacing-xs,
1197
- var(--sky-comp-page-header-tabs-space-inset-top)
1198
- var(--sky-comp-page-header-tabs-space-inset-right)
1199
- var(--sky-comp-page-header-tabs-space-inset-bottom)
1200
- var(--sky-comp-page-header-tabs-space-inset-left)
1200
+ var(--sky-comp-layout-header-tabs-space-inset-xs-top)
1201
+ var(--sky-comp-layout-header-tabs-space-inset-xs-right)
1202
+ var(--sky-comp-layout-header-tabs-space-inset-xs-bottom)
1203
+ var(--sky-comp-layout-header-tabs-space-inset-xs-left)
1201
1204
  );
1202
1205
  }
1203
1206
  .sky-layout-host-none {
@@ -1206,10 +1209,6 @@ body:not(.sky-theme-modern) {
1206
1209
 
1207
1210
  @media (min-width: 768px) {
1208
1211
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1209
- --sky-layout-host-links-spacing: var(
1210
- --sky-override-page-content-with-links-spacing-sm,
1211
- var(--sky-space-inline-xl)
1212
- );
1213
1212
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1214
1213
  grid-template-rows: minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) auto;
1215
1214
  grid-template-columns: 0 75% 25%;
@@ -1267,62 +1266,92 @@ body:not(.sky-theme-modern) {
1267
1266
  .sky-layout-host-blocks {
1268
1267
  --sky-layout-host-header-spacing: var(
1269
1268
  --sky-override-page-header-blocks-spacing-sm,
1270
- var(--sky-comp-page-header-blocks-space-inset-top)
1271
- var(--sky-comp-page-header-blocks-space-inset-right)
1272
- var(--sky-comp-page-header-blocks-space-inset-bottom)
1273
- var(--sky-comp-page-header-blocks-space-inset-left)
1269
+ var(--sky-comp-layout-header-blocks-space-inset-sm-top)
1270
+ var(--sky-comp-layout-header-blocks-space-inset-sm-right)
1271
+ var(--sky-comp-layout-header-blocks-space-inset-sm-bottom)
1272
+ var(--sky-comp-layout-header-blocks-space-inset-sm-left)
1274
1273
  );
1275
1274
  --sky-layout-host-content-spacing: var(
1276
1275
  --sky-override-page-content-blocks-spacing-sm,
1277
- var(--sky-comp-page-content-blocks-space-inset-top)
1278
- var(--sky-comp-page-content-blocks-space-inset-right)
1279
- var(--sky-comp-page-content-blocks-space-inset-bottom)
1280
- var(--sky-comp-page-content-blocks-space-inset-left)
1276
+ var(--sky-comp-layout-content-blocks-space-inset-sm-top)
1277
+ var(--sky-comp-layout-content-blocks-space-inset-sm-right)
1278
+ var(--sky-comp-layout-content-blocks-space-inset-sm-bottom)
1279
+ var(--sky-comp-layout-content-blocks-space-inset-sm-left)
1280
+ );
1281
+ }
1282
+ .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) {
1283
+ --sky-layout-host-links-spacing: var(
1284
+ --sky-override-page-content-with-links-spacing-sm,
1285
+ var(--sky-comp-layout-links-blocks-space-inset-sm-top)
1286
+ var(--sky-comp-layout-links-blocks-space-inset-sm-right)
1287
+ var(--sky-comp-layout-links-blocks-space-inset-sm-bottom)
1288
+ var(--sky-comp-layout-links-blocks-space-inset-sm-left)
1281
1289
  );
1282
1290
  }
1283
1291
  .sky-layout-host-fit {
1284
1292
  --sky-layout-host-header-spacing: var(
1285
1293
  --sky-override-page-header-fit-list-spacing-sm,
1286
- var(--sky-comp-page-header-fit-space-inset-top)
1287
- var(--sky-comp-page-header-fit-space-inset-right)
1288
- var(--sky-comp-page-header-fit-space-inset-bottom)
1289
- var(--sky-comp-page-header-fit-space-inset-left)
1294
+ var(--sky-comp-layout-header-fit-space-inset-sm-top)
1295
+ var(--sky-comp-layout-header-fit-space-inset-sm-right)
1296
+ var(--sky-comp-layout-header-fit-space-inset-sm-bottom)
1297
+ var(--sky-comp-layout-header-fit-space-inset-sm-left)
1290
1298
  );
1291
1299
  --sky-layout-host-content-spacing: var(
1292
1300
  --sky-override-page-content-fit-list-spacing-sm,
1293
- var(--sky-comp-page-content-fit-space-inset-top)
1294
- var(--sky-comp-page-content-fit-space-inset-right)
1295
- var(--sky-comp-page-content-fit-space-inset-bottom)
1296
- var(--sky-comp-page-content-fit-space-inset-left)
1301
+ var(--sky-comp-layout-content-fit-space-inset-sm-top)
1302
+ var(--sky-comp-layout-content-fit-space-inset-sm-right)
1303
+ var(--sky-comp-layout-content-fit-space-inset-sm-bottom)
1304
+ var(--sky-comp-layout-content-fit-space-inset-sm-left)
1297
1305
  );
1298
1306
  }
1299
1307
  .sky-layout-host-list {
1300
1308
  --sky-layout-host-header-spacing: var(
1301
1309
  --sky-override-page-header-fit-list-spacing-sm,
1302
- var(--sky-comp-page-header-list-space-inset-top)
1303
- var(--sky-comp-page-header-list-space-inset-right)
1304
- var(--sky-comp-page-header-list-space-inset-bottom)
1305
- var(--sky-comp-page-header-list-space-inset-left)
1310
+ var(--sky-comp-layout-header-list-space-inset-sm-top)
1311
+ var(--sky-comp-layout-header-list-space-inset-sm-right)
1312
+ var(--sky-comp-layout-header-list-space-inset-sm-bottom)
1313
+ var(--sky-comp-layout-header-list-space-inset-sm-left)
1306
1314
  );
1307
1315
  --sky-layout-host-content-spacing: var(
1308
1316
  --sky-override-page-content-fit-list-spacing-sm,
1309
- var(--sky-comp-page-content-list-space-inset-top)
1310
- var(--sky-comp-page-content-list-space-inset-right)
1311
- var(--sky-comp-page-content-list-space-inset-bottom)
1312
- var(--sky-comp-page-content-list-space-inset-left)
1317
+ var(--sky-comp-layout-content-list-space-inset-sm-top)
1318
+ var(--sky-comp-layout-content-list-space-inset-sm-right)
1319
+ var(--sky-comp-layout-content-list-space-inset-sm-bottom)
1320
+ var(--sky-comp-layout-content-list-space-inset-sm-left)
1321
+ );
1322
+ }
1323
+ .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) {
1324
+ --sky-layout-host-links-spacing: var(
1325
+ --sky-override-page-content-with-links-spacing-sm,
1326
+ var(--sky-comp-layout-links-list-space-inset-sm-top)
1327
+ var(--sky-comp-layout-links-list-space-inset-sm-right)
1328
+ var(--sky-comp-layout-links-list-space-inset-sm-bottom)
1329
+ var(--sky-comp-layout-links-list-space-inset-sm-left)
1313
1330
  );
1314
1331
  }
1315
1332
  .sky-layout-host-tabs {
1316
1333
  --sky-layout-host-header-spacing: var(
1317
1334
  --sky-override-page-header-tabs-spacing-sm,
1318
- var(--sky-comp-page-header-tabs-space-inset-top)
1319
- var(--sky-comp-page-header-tabs-space-inset-right)
1320
- var(--sky-comp-page-header-tabs-space-inset-bottom)
1321
- var(--sky-comp-page-header-tabs-space-inset-left)
1335
+ var(--sky-comp-layout-header-tabs-space-inset-sm-top)
1336
+ var(--sky-comp-layout-header-tabs-space-inset-sm-right)
1337
+ var(--sky-comp-layout-header-tabs-space-inset-sm-bottom)
1338
+ var(--sky-comp-layout-header-tabs-space-inset-sm-left)
1322
1339
  );
1323
1340
  --sky-layout-host-tab-content-spacing: var(
1324
1341
  --sky-override-page-content-tabs-spacing-sm,
1325
- var(--sky-comp-page-tabset-tabs-space-inset-left)
1342
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-top)
1343
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-right)
1344
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-bottom)
1345
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-left)
1346
+ );
1347
+ }
1348
+ .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1349
+ --sky-layout-host-links-spacing: var(
1350
+ --sky-override-page-content-with-links-spacing-sm,
1351
+ var(--sky-comp-layout-links-tabs-space-inset-sm-top)
1352
+ var(--sky-comp-layout-links-tabs-space-inset-sm-right)
1353
+ var(--sky-comp-layout-links-tabs-space-inset-sm-bottom)
1354
+ var(--sky-comp-layout-links-tabs-space-inset-sm-left)
1326
1355
  );
1327
1356
  }
1328
1357
  }
@@ -1333,10 +1362,6 @@ body:not(.sky-theme-modern) {
1333
1362
  .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1334
1363
  .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1335
1364
  .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1336
- --sky-layout-host-links-spacing: var(
1337
- --sky-override-page-content-with-links-spacing-sm,
1338
- var(--sky-space-inline-xl)
1339
- );
1340
1365
  grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1341
1366
  grid-template-rows: minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) auto;
1342
1367
  grid-template-columns: 0 75% 25%;
@@ -1462,17 +1487,28 @@ body:not(.sky-theme-modern) {
1462
1487
  .sky-responsive-container-lg .sky-layout-host-blocks {
1463
1488
  --sky-layout-host-header-spacing: var(
1464
1489
  --sky-override-page-header-blocks-spacing-sm,
1465
- var(--sky-comp-page-header-blocks-space-inset-top)
1466
- var(--sky-comp-page-header-blocks-space-inset-right)
1467
- var(--sky-comp-page-header-blocks-space-inset-bottom)
1468
- var(--sky-comp-page-header-blocks-space-inset-left)
1490
+ var(--sky-comp-layout-header-blocks-space-inset-sm-top)
1491
+ var(--sky-comp-layout-header-blocks-space-inset-sm-right)
1492
+ var(--sky-comp-layout-header-blocks-space-inset-sm-bottom)
1493
+ var(--sky-comp-layout-header-blocks-space-inset-sm-left)
1469
1494
  );
1470
1495
  --sky-layout-host-content-spacing: var(
1471
1496
  --sky-override-page-content-blocks-spacing-sm,
1472
- var(--sky-comp-page-content-blocks-space-inset-top)
1473
- var(--sky-comp-page-content-blocks-space-inset-right)
1474
- var(--sky-comp-page-content-blocks-space-inset-bottom)
1475
- var(--sky-comp-page-content-blocks-space-inset-left)
1497
+ var(--sky-comp-layout-content-blocks-space-inset-sm-top)
1498
+ var(--sky-comp-layout-content-blocks-space-inset-sm-right)
1499
+ var(--sky-comp-layout-content-blocks-space-inset-sm-bottom)
1500
+ var(--sky-comp-layout-content-blocks-space-inset-sm-left)
1501
+ );
1502
+ }
1503
+ .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1504
+ .sky-responsive-container-md .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1505
+ .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) {
1506
+ --sky-layout-host-links-spacing: var(
1507
+ --sky-override-page-content-with-links-spacing-sm,
1508
+ var(--sky-comp-layout-links-blocks-space-inset-sm-top)
1509
+ var(--sky-comp-layout-links-blocks-space-inset-sm-right)
1510
+ var(--sky-comp-layout-links-blocks-space-inset-sm-bottom)
1511
+ var(--sky-comp-layout-links-blocks-space-inset-sm-left)
1476
1512
  );
1477
1513
  }
1478
1514
  .sky-responsive-container-sm .sky-layout-host-fit,
@@ -1480,17 +1516,17 @@ body:not(.sky-theme-modern) {
1480
1516
  .sky-responsive-container-lg .sky-layout-host-fit {
1481
1517
  --sky-layout-host-header-spacing: var(
1482
1518
  --sky-override-page-header-fit-list-spacing-sm,
1483
- var(--sky-comp-page-header-fit-space-inset-top)
1484
- var(--sky-comp-page-header-fit-space-inset-right)
1485
- var(--sky-comp-page-header-fit-space-inset-bottom)
1486
- var(--sky-comp-page-header-fit-space-inset-left)
1519
+ var(--sky-comp-layout-header-fit-space-inset-sm-top)
1520
+ var(--sky-comp-layout-header-fit-space-inset-sm-right)
1521
+ var(--sky-comp-layout-header-fit-space-inset-sm-bottom)
1522
+ var(--sky-comp-layout-header-fit-space-inset-sm-left)
1487
1523
  );
1488
1524
  --sky-layout-host-content-spacing: var(
1489
1525
  --sky-override-page-content-fit-list-spacing-sm,
1490
- var(--sky-comp-page-content-fit-space-inset-top)
1491
- var(--sky-comp-page-content-fit-space-inset-right)
1492
- var(--sky-comp-page-content-fit-space-inset-bottom)
1493
- var(--sky-comp-page-content-fit-space-inset-left)
1526
+ var(--sky-comp-layout-content-fit-space-inset-sm-top)
1527
+ var(--sky-comp-layout-content-fit-space-inset-sm-right)
1528
+ var(--sky-comp-layout-content-fit-space-inset-sm-bottom)
1529
+ var(--sky-comp-layout-content-fit-space-inset-sm-left)
1494
1530
  );
1495
1531
  }
1496
1532
  .sky-responsive-container-sm .sky-layout-host-list,
@@ -1498,17 +1534,28 @@ body:not(.sky-theme-modern) {
1498
1534
  .sky-responsive-container-lg .sky-layout-host-list {
1499
1535
  --sky-layout-host-header-spacing: var(
1500
1536
  --sky-override-page-header-fit-list-spacing-sm,
1501
- var(--sky-comp-page-header-list-space-inset-top)
1502
- var(--sky-comp-page-header-list-space-inset-right)
1503
- var(--sky-comp-page-header-list-space-inset-bottom)
1504
- var(--sky-comp-page-header-list-space-inset-left)
1537
+ var(--sky-comp-layout-header-list-space-inset-sm-top)
1538
+ var(--sky-comp-layout-header-list-space-inset-sm-right)
1539
+ var(--sky-comp-layout-header-list-space-inset-sm-bottom)
1540
+ var(--sky-comp-layout-header-list-space-inset-sm-left)
1505
1541
  );
1506
1542
  --sky-layout-host-content-spacing: var(
1507
1543
  --sky-override-page-content-fit-list-spacing-sm,
1508
- var(--sky-comp-page-content-list-space-inset-top)
1509
- var(--sky-comp-page-content-list-space-inset-right)
1510
- var(--sky-comp-page-content-list-space-inset-bottom)
1511
- var(--sky-comp-page-content-list-space-inset-left)
1544
+ var(--sky-comp-layout-content-list-space-inset-sm-top)
1545
+ var(--sky-comp-layout-content-list-space-inset-sm-right)
1546
+ var(--sky-comp-layout-content-list-space-inset-sm-bottom)
1547
+ var(--sky-comp-layout-content-list-space-inset-sm-left)
1548
+ );
1549
+ }
1550
+ .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1551
+ .sky-responsive-container-md .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1552
+ .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) {
1553
+ --sky-layout-host-links-spacing: var(
1554
+ --sky-override-page-content-with-links-spacing-sm,
1555
+ var(--sky-comp-layout-links-list-space-inset-sm-top)
1556
+ var(--sky-comp-layout-links-list-space-inset-sm-right)
1557
+ var(--sky-comp-layout-links-list-space-inset-sm-bottom)
1558
+ var(--sky-comp-layout-links-list-space-inset-sm-left)
1512
1559
  );
1513
1560
  }
1514
1561
  .sky-responsive-container-sm .sky-layout-host-tabs,
@@ -1516,14 +1563,28 @@ body:not(.sky-theme-modern) {
1516
1563
  .sky-responsive-container-lg .sky-layout-host-tabs {
1517
1564
  --sky-layout-host-header-spacing: var(
1518
1565
  --sky-override-page-header-tabs-spacing-sm,
1519
- var(--sky-comp-page-header-tabs-space-inset-top)
1520
- var(--sky-comp-page-header-tabs-space-inset-right)
1521
- var(--sky-comp-page-header-tabs-space-inset-bottom)
1522
- var(--sky-comp-page-header-tabs-space-inset-left)
1566
+ var(--sky-comp-layout-header-tabs-space-inset-sm-top)
1567
+ var(--sky-comp-layout-header-tabs-space-inset-sm-right)
1568
+ var(--sky-comp-layout-header-tabs-space-inset-sm-bottom)
1569
+ var(--sky-comp-layout-header-tabs-space-inset-sm-left)
1523
1570
  );
1524
1571
  --sky-layout-host-tab-content-spacing: var(
1525
1572
  --sky-override-page-content-tabs-spacing-sm,
1526
- var(--sky-comp-page-tabset-tabs-space-inset-left)
1573
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-top)
1574
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-right)
1575
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-bottom)
1576
+ var(--sky-comp-layout-tabset-tabs-space-inset-sm-left)
1577
+ );
1578
+ }
1579
+ .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1580
+ .sky-responsive-container-md .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1581
+ .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1582
+ --sky-layout-host-links-spacing: var(
1583
+ --sky-override-page-content-with-links-spacing-sm,
1584
+ var(--sky-comp-layout-links-tabs-space-inset-sm-top)
1585
+ var(--sky-comp-layout-links-tabs-space-inset-sm-right)
1586
+ var(--sky-comp-layout-links-tabs-space-inset-sm-bottom)
1587
+ var(--sky-comp-layout-links-tabs-space-inset-sm-left)
1527
1588
  );
1528
1589
  }
1529
1590
 
@@ -2080,40 +2141,44 @@ symbol[id^=sky-i-]:not(.sky-i-branded) *.sky-i-path-2 {
2080
2141
  color: var(--sky-text-color-default);
2081
2142
  }
2082
2143
  .sky-text-info:before {
2083
- content: "\f06a";
2084
- font-family: FontAwesome;
2144
+ content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTEiIGQ9Ik0yMi41IDEyQzIyLjUgMTMuOTEzNiAyMi4wMjEgMTUuNjg0NyAyMS4wNjMgMTcuMzEyOUMyMC4xMzg2IDE4Ljg5MDkgMTguODg2NiAyMC4xNDE1IDE3LjMwNjcgMjEuMDY0N0MxNS42NzY1IDIyLjAyMTYgMTMuOTAzMyAyMi41IDExLjk4NzQgMjIuNUMxMC4wNzE1IDIyLjUgOC4yOTgzIDIyLjAyMTYgNi42NjgwNyAyMS4wNjQ3QzUuMDg4MjMgMjAuMTQxNSAzLjg0NDU0IDE4Ljg5MDkgMi45MzY5OCAxNy4zMTI5QzEuOTc5IDE1LjY4NDcgMS41IDEzLjkxMzYgMS41IDEyQzEuNSAxMC4wODYzIDEuOTc5IDguMzE1MzIgMi45MzY5OCA2LjY4NzA1QzMuODYxMzUgNS4xMDkxMiA1LjExMzQ1IDMuODU4NTIgNi42OTMyOCAyLjkzNTI1QzguMzIzNSAxLjk3ODQzIDEwLjA4ODMgMS41IDExLjk4NzQgMS41QzEzLjg4NjUgMS41IDE1LjY1MTIgMS45Nzg0MyAxNy4yODE1IDIuOTM1MjVDMTguODc4MiAzLjg1ODUyIDIwLjEzODYgNS4xMDkxMiAyMS4wNjMgNi42ODcwNUMyMi4wMjEgOC4zMTUzMiAyMi41IDEwLjA4NjMgMjIuNSAxMloiIGZpbGw9IiMwMEI0RjEiLz4KPHBhdGggY2xhc3M9InNreS1pLXBhdGgtMiIgZD0iTTEzLjAyIDE2Ljc4NUwxMy43NyAxNi45MkMxMy45MiAxNi45NSAxNC4wNCAxNy4wMSAxNC4xMTUgMTcuMDg1QzE0LjIwNSAxNy4xNiAxNC4yNSAxNy4yOCAxNC4yNSAxNy40M1YxOC4zNzVIOS43NVYxNy40M0M5Ljc1IDE3LjI4IDkuNzk1IDE3LjE2IDkuODcgMTcuMDg1QzkuOTYgMTcuMDEgMTAuMDggMTYuOTUgMTAuMjMgMTYuOTJMMTAuOTggMTYuNzg1VjExLjU2NUwxMC4yMyAxMS40M0MxMC4wOCAxMS40IDkuOTYgMTEuMzQgOS44NyAxMS4yNjVDOS43OTUgMTEuMTkgOS43NSAxMS4wNyA5Ljc1IDEwLjkyVjkuOTc1SDEzLjAyVjE2Ljc3VjE2Ljc4NVpNMTEuNzMgNS4yNUMxMi41NTUgNS4yNSAxMy4yMyA1LjkyNSAxMy4yMyA2Ljc1QzEzLjIzIDcuNTc1IDEyLjU1NSA4LjI1IDExLjczIDguMjVDMTAuOTA1IDguMjUgMTAuMjMgNy41NzUgMTAuMjMgNi43NUMxMC4yMyA1LjkyNSAxMC45MDUgNS4yNSAxMS43MyA1LjI1WiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K");
2145
+ display: inline-block;
2146
+ width: var(--sky-size-icon-s, 16px);
2147
+ vertical-align: middle;
2085
2148
  margin-right: 5px;
2086
- color: var(--sky-highlight-color-info);
2087
2149
  }
2088
2150
 
2089
2151
  .sky-text-success {
2090
2152
  color: var(--sky-text-color-default);
2091
2153
  }
2092
2154
  .sky-text-success:before {
2093
- content: "\f00c";
2094
- font-family: FontAwesome;
2155
+ content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTEiIGQ9Ik0zMCAxNkMzMCAxOC41NTE1IDI5LjM2MTMgMjAuOTEyOSAyOC4wODQgMjMuMDgzOUMyNi44NTE1IDI1LjE4NzggMjUuMTgyMSAyNi44NTUzIDIzLjA3NTYgMjguMDg2M0MyMC45MDIgMjkuMzYyMSAxOC41Mzc4IDMwIDE1Ljk4MzIgMzBDMTMuNDI4NiAzMCAxMS4wNjQ0IDI5LjM2MjEgOC44OTA3NiAyOC4wODYzQzYuNzg0MzEgMjYuODU1MyA1LjEyNjA1IDI1LjE4NzggMy45MTU5NyAyMy4wODM5QzIuNjM4NjYgMjAuOTEyOSAyIDE4LjU1MTUgMiAxNkMyIDEzLjQ0ODQgMi42Mzg2NiAxMS4wODcxIDMuOTE1OTcgOC45MTYwN0M1LjE0ODQ2IDYuODEyMTYgNi44MTc5MyA1LjE0NDY5IDguOTI0MzcgMy45MTM2N0MxMS4wOTggMi42Mzc5IDEzLjQ1MSAyIDE1Ljk4MzIgMkMxOC41MTU0IDIgMjAuODY4MyAyLjYzNzkgMjMuMDQyIDMuOTEzNjdDMjUuMTcwOSA1LjE0NDY5IDI2Ljg1MTUgNi44MTIxNiAyOC4wODQgOC45MTYwN0MyOS4zNjEzIDExLjA4NzEgMzAgMTMuNDQ4NCAzMCAxNloiIGZpbGw9IiM3MkJGNDQiLz4KPHBhdGggY2xhc3M9InNreS1pLXBhdGgtMiIgZD0iTTIyLjU4NzYgMTIuMTAyM0MyMi4xODczIDExLjY4MzUgMjEuNTE4NCAxMS42NjQgMjEuMDkzNiAxMi4wNTg3TDEzLjM4OTkgMTkuMjE3M0wxMS4yMTAxIDE3LjAzNjFDMTAuODAwNCAxNi42MjYyIDEwLjEzMTMgMTYuNjIxMyA5LjcxNTQ5IDE3LjAyNTJDOS4yOTk3MiAxNy40MjkxIDkuMjk0NzYgMTguMDg4OCA5LjcwNDQzIDE4LjQ5ODdMMTIuNTM3MiAyMS4zMzMzQzEyLjk4MDggMjEuNzc3MSAxMy43MDI3IDIxLjc5MDMgMTQuMTYyNiAyMS4zNjI5TDIyLjU0MzQgMTMuNTc1M0MyMi45NjgyIDEzLjE4MDYgMjIuOTg4IDEyLjUyMTEgMjIuNTg3NiAxMi4xMDIzWiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K");
2156
+ display: inline-block;
2157
+ width: var(--sky-size-icon-s, 16px);
2158
+ vertical-align: middle;
2095
2159
  margin-right: 5px;
2096
- color: var(--sky-highlight-color-success);
2097
2160
  }
2098
2161
 
2099
2162
  .sky-text-warning {
2100
2163
  color: var(--sky-text-color-default);
2101
2164
  }
2102
2165
  .sky-text-warning:before {
2103
- content: "\f071";
2104
- font-family: FontAwesome;
2166
+ content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTEiIGQ9Ik0xNC4wNDM3IDMuMTgxODJDMTQuOTEzMiAxLjYwNjA2IDE3LjA4NjggMS42MDYwNiAxNy45NTYzIDMuMTgxODJMMjkuNjk0IDI0LjQ1NDVDMzAuNTYzNSAyNi4wMzAzIDI5LjQ3NjYgMjggMjcuNzM3NyAyOEg0LjI2MjI5QzIuNTIzMzcgMjggMS40MzY1NSAyNi4wMzAzIDIuMzA2MDEgMjQuNDU0NUwxNC4wNDM3IDMuMTgxODJaIiBmaWxsPSIjRkJCMDM0Ii8+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTIiIGQ9Ik0xNC42MTA0IDEwLjM4MzRIMTcuNDgxNkwxNy4xNjg3IDE4Ljc5NDVIMTQuOTIzM0wxNC42MTA0IDEwLjM4MzRaTTE1Ljk5MDggMjMuNjE2NkMxNS41NzM2IDIzLjYxNjYgMTUuMjE3OCAyMy40NjkzIDE0LjkyMzMgMjMuMTc0OEMxNC42NDExIDIyLjg4MDQgMTQuNSAyMi41MjQ1IDE0LjUgMjIuMTA3NEMxNC41IDIxLjY5MDIgMTQuNjQxMSAyMS4zMzQ0IDE0LjkyMzMgMjEuMDM5OUMxNS4yMTc4IDIwLjc0NTQgMTUuNTczNiAyMC41OTgyIDE1Ljk5MDggMjAuNTk4MkMxNi40MDggMjAuNTk4MiAxNi43NjM4IDIwLjc0NTQgMTcuMDU4MyAyMS4wMzk5QzE3LjM1MjggMjEuMzM0NCAxNy41IDIxLjY5MDIgMTcuNSAyMi4xMDc0QzE3LjUgMjIuNTI0NSAxNy4zNTI4IDIyLjg4MDQgMTcuMDU4MyAyMy4xNzQ4QzE2Ljc3NjEgMjMuNDY5MyAxNi40MjAyIDIzLjYxNjYgMTUuOTkwOCAyMy42MTY2WiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K");
2167
+ display: inline-block;
2168
+ width: var(--sky-size-icon-s, 16px);
2169
+ vertical-align: middle;
2105
2170
  margin-right: 5px;
2106
- color: var(--sky-highlight-color-warning);
2107
2171
  }
2108
2172
 
2109
2173
  .sky-text-danger {
2110
2174
  color: var(--sky-text-color-default);
2111
2175
  }
2112
2176
  .sky-text-danger:before {
2113
- content: "\f071";
2114
- font-family: FontAwesome;
2177
+ content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTEiIGQ9Ik0xNC4wNDM3IDMuMTgxODJDMTQuOTEzMiAxLjYwNjA2IDE3LjA4NjggMS42MDYwNiAxNy45NTYzIDMuMTgxODJMMjkuNjk0IDI0LjQ1NDVDMzAuNTYzNSAyNi4wMzAzIDI5LjQ3NjYgMjggMjcuNzM3NyAyOEg0LjI2MjI5QzIuNTIzMzcgMjggMS40MzY1NSAyNi4wMzAzIDIuMzA2MDEgMjQuNDU0NUwxNC4wNDM3IDMuMTgxODJaIiBmaWxsPSIjRUY0MDQ0Ii8+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTIiIGQ9Ik0xNC42MTA0IDEwLjM4MzRIMTcuNDgxNkwxNy4xNjg3IDE4Ljc5NDVIMTQuOTIzM0wxNC42MTA0IDEwLjM4MzRaTTE1Ljk5MDggMjMuNjE2NkMxNS41NzM2IDIzLjYxNjYgMTUuMjE3OCAyMy40NjkzIDE0LjkyMzMgMjMuMTc0OEMxNC42NDExIDIyLjg4MDQgMTQuNSAyMi41MjQ1IDE0LjUgMjIuMTA3NEMxNC41IDIxLjY5MDIgMTQuNjQxMSAyMS4zMzQ0IDE0LjkyMzMgMjEuMDM5OUMxNS4yMTc4IDIwLjc0NTQgMTUuNTczNiAyMC41OTgyIDE1Ljk5MDggMjAuNTk4MkMxNi40MDggMjAuNTk4MiAxNi43NjM4IDIwLjc0NTQgMTcuMDU4MyAyMS4wMzk5QzE3LjM1MjggMjEuMzM0NCAxNy41IDIxLjY5MDIgMTcuNSAyMi4xMDc0QzE3LjUgMjIuNTI0NSAxNy4zNTI4IDIyLjg4MDQgMTcuMDU4MyAyMy4xNzQ4QzE2Ljc3NjEgMjMuNDY5MyAxNi40MjAyIDIzLjYxNjYgMTUuOTkwOCAyMy42MTY2WiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K");
2178
+ display: inline-block;
2179
+ width: var(--sky-size-icon-s, 16px);
2180
+ vertical-align: middle;
2115
2181
  margin-right: 5px;
2116
- color: var(--sky-highlight-color-danger);
2117
2182
  }
2118
2183
 
2119
2184
  .sky-font-body-default {