mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Split Applied CSS out to make it easier to manage and share w/ components
As discussed with @lindsaym-fa Still unsure about some of these (especially about whether blockquote & details should be separate) but I figured better go ahead and split and we can fine tune later Co-Authored-By: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
This commit is contained in:
Lea Verou
@@ -1,4 +1,11 @@
|
||||
@import url('utilities/visually-hidden.css');
|
||||
@import url('components/wa-page.css');
|
||||
@import url('native/content.css');
|
||||
@import url('native/code.css');
|
||||
@import url('native/forms.css');
|
||||
@import url('native/details.css');
|
||||
@import url('native/tables.css');
|
||||
@import url('native/blockquote.css');
|
||||
|
||||
/**
|
||||
* Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on
|
||||
@@ -12,24 +19,12 @@ html {
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
:is(html, body):has(wa-page) {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/** Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible. IE: `<a href="#id-for-h2">` anchors. */
|
||||
wa-page :is(*, *:after, *:before) {
|
||||
scroll-margin-top: var(--scroll-margin-top);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-family: var(--wa-font-family-body);
|
||||
@@ -90,398 +85,3 @@ body {
|
||||
):has(+ *) {
|
||||
margin: 0 0 var(--wa-space-xl) 0;
|
||||
}
|
||||
|
||||
/* Headings & text */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--wa-font-family-heading);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--wa-font-size-3xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
margin: var(--wa-space-xl) 0;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
s {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
del,
|
||||
ins,
|
||||
mark {
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
ins {
|
||||
background-color: var(--wa-color-success-fill-quiet);
|
||||
color: var(--wa-color-success-on-normal);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
del {
|
||||
background-color: var(--wa-color-danger-fill-quiet);
|
||||
color: var(--wa-color-danger-on-normal);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
text-decoration: none;
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--wa-color-warning-fill-quiet);
|
||||
color: inherit;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em; /* relative */
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.875em; /* relative */
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: none;
|
||||
border-bottom: dashed 1px currentColor;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Code and similar */
|
||||
code,
|
||||
pre,
|
||||
kbd,
|
||||
samp,
|
||||
var {
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: 0.875em;
|
||||
background-color: var(--wa-color-overlay-inline);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--wa-color-text-normal);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-m);
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
pre:has(code) {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
background-color: transparent;
|
||||
padding: var(--wa-space-m);
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
|
||||
border-bottom-width: var(--wa-border-width-m);
|
||||
font-family: var(--wa-font-family-code);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
color: var(--wa-color-neutral-on-normal);
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
kbd wa-icon {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
/* Block quotes */
|
||||
blockquote {
|
||||
position: relative;
|
||||
font-family: var(--wa-font-family-longform);
|
||||
font-size: var(--wa-font-size-l);
|
||||
font-style: italic;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-xl);
|
||||
margin: 0 0 var(--wa-space-xl) 0;
|
||||
}
|
||||
|
||||
blockquote > :first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
blockquote > :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0 0 var(--wa-space-xl) var(--wa-space-xl);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li > ul,
|
||||
li > ol {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Details */
|
||||
details {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-inline: var(--wa-space-m);
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
details :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
position: relative;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-indent: calc(0.4em + 1em);
|
||||
padding: 0;
|
||||
padding-block: var(--wa-space-m);
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
summary::before {
|
||||
content: '';
|
||||
border-width: 0.4em;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent currentColor;
|
||||
position: absolute;
|
||||
top: calc(50% - 0.4em);
|
||||
left: calc(0.4em / 2);
|
||||
rotate: 0;
|
||||
transform-origin: calc(0.4em / 2) 50%;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding-block-end: var(--wa-space-m);
|
||||
}
|
||||
|
||||
details[open] > summary::before {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
details + details {
|
||||
margin-top: calc(-1 * var(--wa-space-xl) + var(--wa-border-width-s));
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-quiet), transparent 50%);
|
||||
border-top-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
tbody tr:hover + tr {
|
||||
border-top-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
text-align: start;
|
||||
padding: var(--wa-space-l) var(--wa-space-s);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Definition lists */
|
||||
dt {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-inline-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
/* Fieldsets */
|
||||
fieldset {
|
||||
border: solid 1px var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-m);
|
||||
padding-block-end: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
padding-inline: var(--wa-space-2xs);
|
||||
}
|
||||
|
||||
/* Images, videos, iframes, etc. */
|
||||
img,
|
||||
svg,
|
||||
picture,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--wa-color-text-link);
|
||||
text-decoration: var(--wa-link-decoration-default);
|
||||
-webkit-text-decoration: var(--wa-link-decoration-default);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
|
||||
text-decoration: var(--wa-link-decoration-hover);
|
||||
-webkit-text-decoration: var(--wa-link-decoration-hover);
|
||||
}
|
||||
|
||||
a:focus,
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Native form controls */
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
|
||||
table.wa-alternating-row-colors tbody tr:nth-child(2n + 1) {
|
||||
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 80%);
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
/* Show URLs for printed links */
|
||||
a:not(.anchor-heading)[href]::after {
|
||||
content: ' (' attr(href) ')';
|
||||
}
|
||||
|
||||
details,
|
||||
pre {
|
||||
background: none;
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
summary::marker,
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
3
src/styles/components/README.md
Normal file
3
src/styles/components/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Styles for specific WA components
|
||||
|
||||
These should move to the components own light DOM styles once this is possible, see #301
|
||||
15
src/styles/components/wa-page.css
Normal file
15
src/styles/components/wa-page.css
Normal file
@@ -0,0 +1,15 @@
|
||||
/* Should move to wa-page's light DOM styles once this is possible */
|
||||
:is(html, body):has(wa-page) {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
|
||||
IE: `<a href="#id-for-h2">` anchors.
|
||||
*/
|
||||
wa-page :is(*, *:after, *:before) {
|
||||
scroll-margin-top: var(--scroll-margin-top);
|
||||
}
|
||||
19
src/styles/native/blockquote.css
Normal file
19
src/styles/native/blockquote.css
Normal file
@@ -0,0 +1,19 @@
|
||||
/* Block quotes, callouts etc */
|
||||
blockquote {
|
||||
position: relative;
|
||||
font-family: var(--wa-font-family-longform);
|
||||
font-size: var(--wa-font-size-l);
|
||||
font-style: italic;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-xl);
|
||||
margin: 0 0 var(--wa-space-xl) 0;
|
||||
|
||||
> :first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
59
src/styles/native/code.css
Normal file
59
src/styles/native/code.css
Normal file
@@ -0,0 +1,59 @@
|
||||
/* Code and similar */
|
||||
code,
|
||||
pre,
|
||||
kbd,
|
||||
samp,
|
||||
var {
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: 0.875em;
|
||||
background-color: var(--wa-color-overlay-inline);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--wa-color-text-normal);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-m);
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
pre:has(code) {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
background-color: transparent;
|
||||
padding: var(--wa-space-m);
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
|
||||
border-bottom-width: var(--wa-border-width-m);
|
||||
font-family: var(--wa-font-family-code);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
color: var(--wa-color-neutral-on-normal);
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
wa-icon {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
pre {
|
||||
background: none;
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
}
|
||||
}
|
||||
190
src/styles/native/content.css
Normal file
190
src/styles/native/content.css
Normal file
@@ -0,0 +1,190 @@
|
||||
/* Content: headings, text, links media */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--wa-font-family-heading);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--wa-font-size-3xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
margin: var(--wa-space-xl) 0;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
s {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
del,
|
||||
ins,
|
||||
mark {
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
ins {
|
||||
background-color: var(--wa-color-success-fill-quiet);
|
||||
color: var(--wa-color-success-on-normal);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
del {
|
||||
background-color: var(--wa-color-danger-fill-quiet);
|
||||
color: var(--wa-color-danger-on-normal);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
text-decoration: none;
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--wa-color-warning-fill-quiet);
|
||||
color: inherit;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em; /* relative */
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.875em; /* relative */
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: none;
|
||||
border-bottom: dashed 1px currentColor;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--wa-color-text-link);
|
||||
text-decoration: var(--wa-link-decoration-default);
|
||||
-webkit-text-decoration: var(--wa-link-decoration-default);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
|
||||
text-decoration: var(--wa-link-decoration-hover);
|
||||
-webkit-text-decoration: var(--wa-link-decoration-hover);
|
||||
}
|
||||
|
||||
a:focus,
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0 0 var(--wa-space-xl) var(--wa-space-xl);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li > ul,
|
||||
li > ol {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Definition lists */
|
||||
dt {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-inline-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
/* Images, videos, iframes, etc. */
|
||||
img,
|
||||
svg,
|
||||
picture,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
/* Show URLs for printed links */
|
||||
a:not(.anchor-heading)[href]::after {
|
||||
content: ' (' attr(href) ')';
|
||||
}
|
||||
}
|
||||
70
src/styles/native/details.css
Normal file
70
src/styles/native/details.css
Normal file
@@ -0,0 +1,70 @@
|
||||
/* Details */
|
||||
details {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-inline: var(--wa-space-m);
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
position: relative;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-indent: calc(0.4em + 1em);
|
||||
padding: 0;
|
||||
padding-block: var(--wa-space-m);
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
border-width: 0.4em;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent currentColor;
|
||||
position: absolute;
|
||||
top: calc(50% - 0.4em);
|
||||
left: calc(0.4em / 2);
|
||||
rotate: 0;
|
||||
transform-origin: calc(0.4em / 2) 50%;
|
||||
}
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding-block-end: var(--wa-space-m);
|
||||
|
||||
> summary::before {
|
||||
rotate: 90deg;
|
||||
}
|
||||
}
|
||||
|
||||
details + details {
|
||||
margin-top: calc(-1 * var(--wa-space-xl) + var(--wa-border-width-s));
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
details {
|
||||
background: none;
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
summary::marker,
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
20
src/styles/native/forms.css
Normal file
20
src/styles/native/forms.css
Normal file
@@ -0,0 +1,20 @@
|
||||
/* Fieldsets */
|
||||
fieldset {
|
||||
border: solid 1px var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-m);
|
||||
padding-block-end: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
padding-inline: var(--wa-space-2xs);
|
||||
}
|
||||
|
||||
/* Native form controls */
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
40
src/styles/native/tables.css
Normal file
40
src/styles/native/tables.css
Normal file
@@ -0,0 +1,40 @@
|
||||
/* Tables */
|
||||
table {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-quiet), transparent 50%);
|
||||
border-top-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
tbody tr:hover + tr {
|
||||
border-top-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
text-align: start;
|
||||
padding: var(--wa-space-l) var(--wa-space-s);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
table.wa-alternating-row-colors tbody tr:nth-child(2n + 1) {
|
||||
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 80%);
|
||||
}
|
||||
Reference in New Issue
Block a user