@skyux/theme 13.12.0 → 14.0.0-alpha.1

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.
Files changed (6) hide show
  1. package/css/sky.css +33 -24
  2. package/css/themes/modern/styles.css +183 -75
  3. package/fesm2022/skyux-theme.mjs +28 -28
  4. package/fesm2022/skyux-theme.mjs.map +1 -1
  5. package/package.json +6 -6
  6. /package/{index.d.ts → types/skyux-theme.d.ts} +0 -0
package/css/sky.css CHANGED
@@ -189,9 +189,6 @@ button,
189
189
  /**
190
190
  * Remove the inner border and padding in Firefox.
191
191
  */
192
- /**
193
- * Restore the focus styles unset by the previous rule.
194
- */
195
192
  }
196
193
  button::-moz-focus-inner,
197
194
  [type=button]::-moz-focus-inner,
@@ -200,6 +197,14 @@ button::-moz-focus-inner,
200
197
  border-style: none;
201
198
  padding: 0;
202
199
  }
200
+ button,
201
+ [type=button],
202
+ [type=reset],
203
+ [type=submit] {
204
+ /**
205
+ * Restore the focus styles unset by the previous rule.
206
+ */
207
+ }
203
208
  button:-moz-focusring,
204
209
  [type=button]:-moz-focusring,
205
210
  [type=reset]:-moz-focusring,
@@ -671,12 +676,14 @@ a.sky-btn:hover {
671
676
  .sky-btn-borderless, .sky-btn-borderless-inline {
672
677
  color: #686c73;
673
678
  cursor: pointer;
674
- border: none;
675
679
  }
676
680
  .sky-btn-borderless:hover, .sky-btn-borderless-inline:hover {
677
681
  color: rgb(55.5616438356, 57.698630137, 61.4383561644);
678
682
  transition: color 150ms;
679
683
  }
684
+ .sky-btn-borderless, .sky-btn-borderless-inline {
685
+ border: none;
686
+ }
680
687
 
681
688
  .sky-btn-borderless:hover, .sky-btn-borderless-inline:hover {
682
689
  border: none;
@@ -696,15 +703,17 @@ a.sky-btn:hover {
696
703
  .sky-btn-icon-borderless {
697
704
  color: #686c73;
698
705
  cursor: pointer;
699
- height: 26px;
700
- width: 26px;
701
- border: none;
702
- padding: 0;
703
706
  }
704
707
  .sky-btn-icon-borderless:hover {
705
708
  color: rgb(55.5616438356, 57.698630137, 61.4383561644);
706
709
  transition: color 150ms;
707
710
  }
711
+ .sky-btn-icon-borderless {
712
+ height: 26px;
713
+ width: 26px;
714
+ border: none;
715
+ padding: 0;
716
+ }
708
717
 
709
718
  .sky-btn-block {
710
719
  display: block;
@@ -1212,11 +1221,6 @@ body:not(.sky-theme-modern) {
1212
1221
  }
1213
1222
 
1214
1223
  @media (min-width: 768px) {
1215
- .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) {
1216
- grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1217
- 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(0, min-content) auto;
1218
- grid-template-columns: 0 75% 25%;
1219
- }
1220
1224
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
1221
1225
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) .sky-page-header,
1222
1226
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) .sky-page-header-info,
@@ -1251,6 +1255,11 @@ body:not(.sky-theme-modern) {
1251
1255
  margin: var(--sky-layout-host-header-spacing);
1252
1256
  margin-top: 0;
1253
1257
  }
1258
+ .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) {
1259
+ grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1260
+ 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(0, min-content) auto;
1261
+ grid-template-columns: 0 75% 25%;
1262
+ }
1254
1263
  .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
1255
1264
  --sky-layout-host-header-avatar-size: calc(
1256
1265
  120px +
@@ -1359,17 +1368,6 @@ body:not(.sky-theme-modern) {
1359
1368
  );
1360
1369
  }
1361
1370
  }
1362
- .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1363
- .sky-responsive-container-md .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1364
- .sky-responsive-container-md .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1365
- .sky-responsive-container-md .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1366
- .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1367
- .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1368
- .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1369
- grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1370
- 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(0, min-content) auto;
1371
- grid-template-columns: 0 75% 25%;
1372
- }
1373
1371
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
1374
1372
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) .sky-page-header,
1375
1373
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) .sky-page-header-info,
@@ -1452,6 +1450,17 @@ body:not(.sky-theme-modern) {
1452
1450
  margin: var(--sky-layout-host-header-spacing);
1453
1451
  margin-top: 0;
1454
1452
  }
1453
+ .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1454
+ .sky-responsive-container-md .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1455
+ .sky-responsive-container-md .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1456
+ .sky-responsive-container-md .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
1457
+ .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
1458
+ .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
1459
+ .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
1460
+ grid-template: "header-alerts header-alerts header-alerts" "header-avatar header-text header-text" "header-avatar header-content links" "content content links";
1461
+ 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(0, min-content) auto;
1462
+ grid-template-columns: 0 75% 25%;
1463
+ }
1455
1464
  .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
1456
1465
  .sky-responsive-container-md .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
1457
1466
  .sky-responsive-container-md .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),