mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Split CSS utility regions into separate files
This commit is contained in:
Lea Verou
@@ -34,7 +34,7 @@
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities/index.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
||||
|
||||
{# Docs styles #}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<link rel="stylesheet" id="theme-stylesheet" />
|
||||
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities/index.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
||||
|
||||
{# Set the theme to prevent flashing #}
|
||||
|
||||
@@ -21,7 +21,7 @@ document.addEventListener('click', event => {
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/layout.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/utilities.css">\n\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/utilities/index.css">\n\n` +
|
||||
`${code.textContent}`;
|
||||
const css = 'html > body {\n font: 16px sans-serif;\n padding: 2rem;\n}';
|
||||
const js = '';
|
||||
|
||||
@@ -1,217 +0,0 @@
|
||||
/* #region Scroll Lock */
|
||||
/* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
|
||||
@supports (scrollbar-gutter: stable) {
|
||||
.wa-scroll-lock {
|
||||
scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
|
||||
}
|
||||
|
||||
.wa-scroll-lock body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** This can go away once Safari has scrollbar-gutter support. */
|
||||
@supports not (scrollbar-gutter: stable) {
|
||||
.wa-scroll-lock body {
|
||||
padding-right: var(--wa-scroll-lock-size) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Align Items */
|
||||
.wa-align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.wa-align-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.wa-align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.wa-align-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.wa-align-items-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Border Radius */
|
||||
.wa-border-radius-xs {
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
}
|
||||
.wa-border-radius-s {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
.wa-border-radius-m {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
.wa-border-radius-l {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
.wa-border-radius-pill {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
.wa-border-radius-circle {
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
}
|
||||
.wa-border-radius-square {
|
||||
border-radius: var(--wa-border-radius-square);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Gap */
|
||||
|
||||
/* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
|
||||
:where(
|
||||
.wa-gap-0,
|
||||
.wa-gap-3xs,
|
||||
.wa-gap-2xs,
|
||||
.wa-gap-xs,
|
||||
.wa-gap-s,
|
||||
.wa-gap-m,
|
||||
.wa-gap-l,
|
||||
.wa-gap-xl,
|
||||
.wa-gap-2xl,
|
||||
.wa-gap-3xl
|
||||
) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.wa-gap-0 {
|
||||
gap: 0px;
|
||||
}
|
||||
.wa-gap-3xs {
|
||||
gap: var(--wa-space-3xs);
|
||||
}
|
||||
.wa-gap-2xs {
|
||||
gap: var(--wa-space-2xs);
|
||||
}
|
||||
.wa-gap-xs {
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
.wa-gap-s {
|
||||
gap: var(--wa-space-s);
|
||||
}
|
||||
.wa-gap-m {
|
||||
gap: var(--wa-space-m);
|
||||
}
|
||||
.wa-gap-l {
|
||||
gap: var(--wa-space-l);
|
||||
}
|
||||
.wa-gap-xl {
|
||||
gap: var(--wa-space-xl);
|
||||
}
|
||||
.wa-gap-2xl {
|
||||
gap: var(--wa-space-2xl);
|
||||
}
|
||||
.wa-gap-3xl {
|
||||
gap: var(--wa-space-3xl);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Text */
|
||||
.wa-heading-xs,
|
||||
.wa-heading-s,
|
||||
.wa-heading-m,
|
||||
.wa-heading-l,
|
||||
.wa-heading-xl,
|
||||
.wa-heading-2xl,
|
||||
.wa-heading-3xl {
|
||||
font-family: var(--wa-font-family-heading);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.wa-heading-xs {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-heading-s {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-heading-m {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.wa-heading-l {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.wa-heading-xl {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.wa-heading-2xl {
|
||||
font-size: var(--wa-font-size-3xl);
|
||||
}
|
||||
|
||||
.wa-heading-3xl {
|
||||
font-size: var(--wa-font-size-4xl);
|
||||
}
|
||||
|
||||
.wa-body-xs,
|
||||
.wa-body-s,
|
||||
.wa-body-m,
|
||||
.wa-body-l,
|
||||
.wa-body-xl {
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-weight: var(--wa-font-weight-body);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-body-xs {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
.wa-body-s {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-body-m {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-body-l {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.wa-body-xl {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.wa-caption-xs,
|
||||
.wa-caption-s,
|
||||
.wa-caption-m,
|
||||
.wa-caption-l,
|
||||
.wa-caption-xl {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-weight: var(--wa-font-weight-body);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
}
|
||||
|
||||
.wa-caption-xs {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
}
|
||||
|
||||
.wa-caption-s {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
.wa-caption-m {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-caption-l {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-caption-xl {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
15
src/themes/utilities/align-items.css
Normal file
15
src/themes/utilities/align-items.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.wa-align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.wa-align-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.wa-align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.wa-align-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.wa-align-items-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
21
src/themes/utilities/border-radius.css
Normal file
21
src/themes/utilities/border-radius.css
Normal file
@@ -0,0 +1,21 @@
|
||||
.wa-border-radius-xs {
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
}
|
||||
.wa-border-radius-s {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
.wa-border-radius-m {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
.wa-border-radius-l {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
.wa-border-radius-pill {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
.wa-border-radius-circle {
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
}
|
||||
.wa-border-radius-square {
|
||||
border-radius: var(--wa-border-radius-square);
|
||||
}
|
||||
46
src/themes/utilities/gap.css
Normal file
46
src/themes/utilities/gap.css
Normal file
@@ -0,0 +1,46 @@
|
||||
/* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
|
||||
:where(
|
||||
.wa-gap-0,
|
||||
.wa-gap-3xs,
|
||||
.wa-gap-2xs,
|
||||
.wa-gap-xs,
|
||||
.wa-gap-s,
|
||||
.wa-gap-m,
|
||||
.wa-gap-l,
|
||||
.wa-gap-xl,
|
||||
.wa-gap-2xl,
|
||||
.wa-gap-3xl
|
||||
) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.wa-gap-0 {
|
||||
gap: 0px;
|
||||
}
|
||||
.wa-gap-3xs {
|
||||
gap: var(--wa-space-3xs);
|
||||
}
|
||||
.wa-gap-2xs {
|
||||
gap: var(--wa-space-2xs);
|
||||
}
|
||||
.wa-gap-xs {
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
.wa-gap-s {
|
||||
gap: var(--wa-space-s);
|
||||
}
|
||||
.wa-gap-m {
|
||||
gap: var(--wa-space-m);
|
||||
}
|
||||
.wa-gap-l {
|
||||
gap: var(--wa-space-l);
|
||||
}
|
||||
.wa-gap-xl {
|
||||
gap: var(--wa-space-xl);
|
||||
}
|
||||
.wa-gap-2xl {
|
||||
gap: var(--wa-space-2xl);
|
||||
}
|
||||
.wa-gap-3xl {
|
||||
gap: var(--wa-space-3xl);
|
||||
}
|
||||
5
src/themes/utilities/index.css
Normal file
5
src/themes/utilities/index.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@import url('scroll-lock.css');
|
||||
@import url('align-items.css');
|
||||
@import url('border-radius.css');
|
||||
@import url('gap.css');
|
||||
@import url('text.css');
|
||||
18
src/themes/utilities/scroll-lock.css
Normal file
18
src/themes/utilities/scroll-lock.css
Normal file
@@ -0,0 +1,18 @@
|
||||
/* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
|
||||
@supports (scrollbar-gutter: stable) {
|
||||
.wa-scroll-lock {
|
||||
scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
|
||||
}
|
||||
|
||||
.wa-scroll-lock body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** This can go away once Safari has scrollbar-gutter support. */
|
||||
@supports not (scrollbar-gutter: stable) {
|
||||
.wa-scroll-lock body {
|
||||
padding-right: var(--wa-scroll-lock-size) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
101
src/themes/utilities/text.css
Normal file
101
src/themes/utilities/text.css
Normal file
@@ -0,0 +1,101 @@
|
||||
.wa-heading-xs,
|
||||
.wa-heading-s,
|
||||
.wa-heading-m,
|
||||
.wa-heading-l,
|
||||
.wa-heading-xl,
|
||||
.wa-heading-2xl,
|
||||
.wa-heading-3xl {
|
||||
font-family: var(--wa-font-family-heading);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.wa-heading-xs {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-heading-s {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-heading-m {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.wa-heading-l {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.wa-heading-xl {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.wa-heading-2xl {
|
||||
font-size: var(--wa-font-size-3xl);
|
||||
}
|
||||
|
||||
.wa-heading-3xl {
|
||||
font-size: var(--wa-font-size-4xl);
|
||||
}
|
||||
|
||||
.wa-body-xs,
|
||||
.wa-body-s,
|
||||
.wa-body-m,
|
||||
.wa-body-l,
|
||||
.wa-body-xl {
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-weight: var(--wa-font-weight-body);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-body-xs {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
.wa-body-s {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-body-m {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-body-l {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.wa-body-xl {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.wa-caption-xs,
|
||||
.wa-caption-s,
|
||||
.wa-caption-m,
|
||||
.wa-caption-l,
|
||||
.wa-caption-xl {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-weight: var(--wa-font-weight-body);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
}
|
||||
|
||||
.wa-caption-xs {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
}
|
||||
|
||||
.wa-caption-s {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
.wa-caption-m {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-caption-l {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-caption-xl {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
Reference in New Issue
Block a user