mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
0f6cf33020
* Fix double scrollbar * fix dialog double scroll * try `hidden` * try `clip` this time * remove extra newline (thx, prettier ❤️) --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
693 lines
13 KiB
CSS
693 lines
13 KiB
CSS
@import 'code-examples.css';
|
|
@import 'code-highlighter.css';
|
|
@import 'copy-code.css';
|
|
@import 'outline.css';
|
|
@import 'search.css';
|
|
@import 'cera-typeface.css';
|
|
@import 'theme-icons.css';
|
|
@import 'utils.css';
|
|
|
|
:root {
|
|
--wa-brand-orange: #f36944;
|
|
--wa-brand-grey: #30323b;
|
|
}
|
|
|
|
.wa-dark .only-light,
|
|
.only-dark:not(.wa-dark, .wa-dark *) {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
opacity: 1;
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
|
|
body.theme-transitioning {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
|
|
/* Header */
|
|
wa-page::part(header) {
|
|
background-color: var(--wa-color-surface-default);
|
|
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
|
}
|
|
|
|
wa-page::part(body) {
|
|
padding-top: 0px;
|
|
}
|
|
|
|
wa-page::part(header-actions) {
|
|
align-self: center;
|
|
}
|
|
|
|
wa-page > header {
|
|
padding-inline: var(--wa-space-xl);
|
|
|
|
a[href='/'] {
|
|
color: var(--wa-color-text-normal);
|
|
line-height: 1;
|
|
}
|
|
|
|
.brand-logo {
|
|
color: var(--wa-color-text-normal);
|
|
line-height: 1;
|
|
}
|
|
|
|
.brand-logo svg {
|
|
width: auto;
|
|
height: 1.75rem;
|
|
}
|
|
|
|
wa-button[data-toggle-nav] {
|
|
--text-color: currentColor;
|
|
font-size: 1rem;
|
|
margin-inline-start: -0.875rem;
|
|
margin-inline-end: 0;
|
|
|
|
&::part(base) {
|
|
padding: 0;
|
|
padding-inline: 0.875rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar,
|
|
#outline {
|
|
h2 {
|
|
font-size: var(--wa-font-size-s);
|
|
margin: 0;
|
|
}
|
|
|
|
h2:not(:first-child) {
|
|
margin-block-start: var(--wa-space-xs);
|
|
}
|
|
|
|
wa-details {
|
|
--spacing: 0;
|
|
|
|
&::part(header) {
|
|
padding: 0;
|
|
padding-block-start: var(--wa-space-xs);
|
|
}
|
|
|
|
&::part(content) {
|
|
padding-block-start: var(--wa-space-m);
|
|
}
|
|
|
|
&::part(base) {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
|
|
font-size: var(--wa-font-size-s);
|
|
line-height: var(--wa-line-height-condensed);
|
|
padding-inline-start: var(--wa-space-m);
|
|
margin: 0;
|
|
}
|
|
|
|
ul ul {
|
|
margin-block-start: var(--wa-space-m);
|
|
}
|
|
|
|
ul:empty {
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
+ li {
|
|
margin-block-start: var(--wa-space-m);
|
|
}
|
|
}
|
|
|
|
li a {
|
|
color: var(--wa-color-text-normal);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
li wa-badge::part(base) {
|
|
font-size: var(--wa-font-size-2xs);
|
|
font-weight: var(--wa-font-weight-bold);
|
|
}
|
|
|
|
li wa-icon {
|
|
color: var(--wa-color-text-quiet);
|
|
}
|
|
}
|
|
|
|
#outline-standard h2 {
|
|
margin-block-end: var(--wa-space-m);
|
|
}
|
|
|
|
#sidebar {
|
|
h2 {
|
|
color: var(--wa-color-text-quiet);
|
|
|
|
a {
|
|
color: var(--wa-color-text-normal);
|
|
text-decoration: none;
|
|
|
|
wa-icon {
|
|
font-size: var(--wa-font-size-s);
|
|
font-weight: var(--wa-font-weight-action);
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
wa-button.delete {
|
|
margin-inline-start: var(--wa-space-xs);
|
|
|
|
&:hover wa-icon {
|
|
color: var(--wa-color-danger-on-quiet);
|
|
}
|
|
|
|
&:not(li:hover > *, :focus) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
li wa-badge {
|
|
/* adding 1 scale below --wa-font-size-2xs to handle badge proportions in sidebar nav */
|
|
--font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */
|
|
font-size: var(--font-size-3xs);
|
|
}
|
|
|
|
wa-details {
|
|
--show-duration: 0;
|
|
--hide-duration: 0;
|
|
}
|
|
|
|
.the-socials {
|
|
/* nudge those linkies left */
|
|
margin-inline-start: calc(var(--wa-space-xs) * -1);
|
|
|
|
a[target='_blank'] {
|
|
color: var(--wa-color-text-quiet);
|
|
padding-inline: var(--wa-space-xs);
|
|
|
|
&:hover {
|
|
color: var(--wa-color-text-normal);
|
|
}
|
|
}
|
|
}
|
|
|
|
#version-icon-info {
|
|
--secondary-opacity: 1;
|
|
--secondary-color: var(--wa-brand-orange);
|
|
padding-inline: var(--wa-space-xs);
|
|
}
|
|
}
|
|
|
|
wa-button.delete {
|
|
&::part(base):hover {
|
|
color: var(--wa-color-danger-on-quiet);
|
|
background: var(--wa-color-danger-fill-quiet);
|
|
}
|
|
|
|
&:not(:hover, :focus) {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
[slot='navigation-header'] {
|
|
wa-select::part(listbox) {
|
|
font-weight: var(--wa-font-weight-normal);
|
|
}
|
|
}
|
|
|
|
/* planned sidebar item */
|
|
.is-planned {
|
|
color: var(--wa-color-text-quiet);
|
|
}
|
|
|
|
#sidebar-close-button {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
#sidebar-close-button {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
}
|
|
}
|
|
|
|
#sidebar nav {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
wa-page::part(drawer__dialog),
|
|
wa-page::part(menu) {
|
|
overflow: clip;
|
|
}
|
|
|
|
/* smaller viewports-based navigation */
|
|
wa-page > [slot='navigation-header'] {
|
|
padding: 0;
|
|
|
|
.brand-logo svg {
|
|
height: 1.25rem;
|
|
}
|
|
|
|
/* resetting font-weight of dropdown items in .title */
|
|
wa-dropdown {
|
|
font-weight: var(--wa-font-weight-normal);
|
|
}
|
|
}
|
|
|
|
wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
|
|
padding: 0;
|
|
|
|
& wa-details::part(icon) {
|
|
padding-inline: var(--wa-space-xs); /* aligns details icons with drawer close icon */
|
|
}
|
|
}
|
|
|
|
/* Main content */
|
|
wa-page > main {
|
|
max-width: var(--content-width-s);
|
|
padding: var(--wa-space-xl);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
h1.title {
|
|
wa-badge {
|
|
vertical-align: middle;
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.component-info {
|
|
display: flex;
|
|
gap: var(--wa-space-xs);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-block-end: var(--wa-content-spacing);
|
|
|
|
code {
|
|
line-height: var(--wa-line-height-condensed);
|
|
}
|
|
}
|
|
|
|
/* Current link */
|
|
#sidebar,
|
|
#outline {
|
|
.current {
|
|
font-weight: var(--wa-font-weight-bold);
|
|
text-decoration-style: solid;
|
|
}
|
|
}
|
|
|
|
/* Anchor headings */
|
|
.anchor-heading a {
|
|
visibility: hidden;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.anchor-heading:hover a {
|
|
visibility: visible;
|
|
padding: 0 0.125em;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
/* Show URLs for printed links */
|
|
a:not(.anchor-heading)[href]::after {
|
|
content: ' (' attr(href) ')';
|
|
}
|
|
}
|
|
|
|
/* Callouts */
|
|
.callout {
|
|
display: flex;
|
|
gap: 1rem;
|
|
border: var(--wa-border-style) var(--wa-border-width-s);
|
|
border-radius: var(--wa-border-radius-l);
|
|
padding: 1rem;
|
|
margin-block-end: var(--wa-content-spacing);
|
|
|
|
:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
|
|
.callout-icon {
|
|
flex: 0 0 auto;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.callout-content {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.callout-info {
|
|
background-color: var(--wa-color-brand-fill-quiet);
|
|
border-color: var(--wa-color-brand-border-quiet);
|
|
|
|
.callout-icon {
|
|
color: var(--wa-color-brand-on-normal);
|
|
}
|
|
|
|
code {
|
|
background-color: var(--wa-color-brand-fill-normal);
|
|
}
|
|
}
|
|
|
|
.callout-warning {
|
|
background-color: var(--wa-color-warning-fill-quiet);
|
|
border-color: var(--wa-color-warning-border-quiet);
|
|
|
|
.callout-icon {
|
|
color: var(--wa-color-warning-on-normal);
|
|
}
|
|
|
|
code {
|
|
background-color: var(--wa-color-warning-fill-normal);
|
|
}
|
|
}
|
|
|
|
/* Images & Figures */
|
|
|
|
figure.signpost {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: var(--wa-space-s);
|
|
|
|
img {
|
|
border: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
|
|
}
|
|
|
|
figcaption {
|
|
color: var(--wa-color-text-quiet);
|
|
font-size: var(--wa-font-size-xs);
|
|
line-height: var(--wa-line-height-condensed);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* Search list pages */
|
|
wa-page > main:has(> .search-list) {
|
|
max-width: var(--content-width-l);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.search-list {
|
|
.search-list-input {
|
|
margin-block-end: var(--wa-space-3xl);
|
|
}
|
|
|
|
.search-list-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--wa-space-2xl);
|
|
margin-block-end: var(--wa-space-3xl);
|
|
|
|
@media screen and (max-width: 1470px) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
@media screen and (max-width: 960px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
|
|
a {
|
|
border-radius: var(--wa-border-radius-l);
|
|
text-decoration: none;
|
|
}
|
|
|
|
wa-card {
|
|
--spacing: var(--wa-space-m);
|
|
box-shadow: none;
|
|
|
|
[slot='header'] {
|
|
display: flex;
|
|
}
|
|
|
|
&::part(header) {
|
|
background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-block-size: calc(6rem + var(--spacing));
|
|
}
|
|
|
|
&:hover {
|
|
border-color: var(--wa-color-brand-border-loud);
|
|
box-shadow: 0 0 0 0.0625rem var(--wa-color-brand-border-loud);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
wa-card .page-name {
|
|
font-size: var(--wa-font-size-s);
|
|
font-weight: var(--wa-font-weight-action);
|
|
}
|
|
|
|
/* Swatches */
|
|
.swatch {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: transparent;
|
|
border-color: var(--wa-color-neutral-border-normal);
|
|
border-style: var(--wa-border-style);
|
|
border-width: var(--wa-border-width-s);
|
|
border-radius: var(--wa-border-radius-m);
|
|
box-sizing: border-box;
|
|
min-height: 2.5em;
|
|
padding: var(--wa-space-xs);
|
|
font-weight: var(--wa-font-weight-semibold);
|
|
line-height: var(--wa-line-height-condensed);
|
|
|
|
&.color {
|
|
border-color: transparent;
|
|
transition: background var(--wa-transition-slow);
|
|
background: linear-gradient(var(--color-2, transparent) 0% 100%) no-repeat border-box var(--color,);
|
|
background-position: var(--color-2-position, bottom);
|
|
background-size: var(--color-2-width, 100%) var(--color-2-height, 50%);
|
|
|
|
&.contrast-fail {
|
|
outline: 1px dashed var(--wa-color-red);
|
|
outline-offset: calc(-1 * var(--wa-space-2xs));
|
|
}
|
|
}
|
|
|
|
> wa-copy-button {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
font-family: var(--wa-font-family-code);
|
|
|
|
&::part(button) {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
&::part(button):hover {
|
|
background-color: transparent;
|
|
cursor: copy;
|
|
}
|
|
|
|
&::part(copy-icon),
|
|
&::part(success-icon),
|
|
&::part(error-icon) {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
table.colors {
|
|
thead {
|
|
th {
|
|
text-align: center;
|
|
padding-block: 0;
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
border: none;
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
th {
|
|
width: 0;
|
|
vertical-align: middle;
|
|
text-align: right;
|
|
}
|
|
|
|
td {
|
|
padding-inline: var(--wa-space-3xs);
|
|
padding-block: var(--wa-space-s);
|
|
}
|
|
}
|
|
|
|
.core-column {
|
|
padding-inline-end: var(--wa-space-xl);
|
|
}
|
|
}
|
|
|
|
.value-up,
|
|
.value-down {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: ' ' var(--icon);
|
|
position: absolute;
|
|
margin-inline-start: 3em;
|
|
scale: 1 0.6;
|
|
color: color-mix(in oklch, oklch(from var(--icon-color) none c h) 0%, oklch(from currentColor l none none));
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
|
|
.value-down {
|
|
--icon: '▼';
|
|
--icon-color: var(--wa-color-danger-fill-quiet);
|
|
|
|
&::after {
|
|
margin-block-end: -0.2em;
|
|
}
|
|
}
|
|
|
|
.value-up {
|
|
--icon: '▲';
|
|
--icon-color: var(--wa-color-success-fill-quiet);
|
|
}
|
|
|
|
/* Layout Examples */
|
|
.layout-example-boundary {
|
|
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
|
border-radius: var(--wa-border-radius-l);
|
|
padding: var(--wa-space-s);
|
|
}
|
|
|
|
.layout-example-block {
|
|
background-color: var(--wa-color-indigo-60);
|
|
border-radius: var(--wa-border-radius-m);
|
|
min-block-size: 4rem;
|
|
min-inline-size: 4rem;
|
|
}
|
|
|
|
.layout-example-mixed-sizing .layout-example-block:nth-child(3n) {
|
|
min-inline-size: 6rem;
|
|
}
|
|
.layout-example-mixed-sizing .layout-example-block:nth-child(3n + 2) {
|
|
min-inline-size: 8rem;
|
|
}
|
|
|
|
/* Component API tables */
|
|
wa-scroller:has(.component-table) {
|
|
margin-block-end: var(--wa-space-xl);
|
|
}
|
|
|
|
.component-table {
|
|
.table-name {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-arguments,
|
|
.table-description {
|
|
min-width: var(--line-length-xs);
|
|
}
|
|
|
|
.table-reflect {
|
|
text-align: center;
|
|
}
|
|
|
|
code {
|
|
white-space: inherit;
|
|
}
|
|
}
|
|
|
|
.component-help {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: var(--wa-space-m);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: start;
|
|
margin-block-start: var(--wa-space-xl);
|
|
|
|
strong {
|
|
font-size: var(--wa-font-size-s);
|
|
font-weight: var(--wa-font-weight-semibold);
|
|
}
|
|
}
|
|
|
|
/** desktop */
|
|
@media screen and not (max-width: 1180px) {
|
|
/* Navigation sidebar */
|
|
wa-page::part(navigation) {
|
|
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
|
}
|
|
|
|
wa-page > #sidebar {
|
|
overflow: auto;
|
|
max-height: 100%;
|
|
min-width: 300px;
|
|
padding: var(--wa-space-xl);
|
|
max-width: 300px;
|
|
}
|
|
|
|
wa-page > main {
|
|
padding: var(--wa-space-3xl);
|
|
}
|
|
}
|
|
|
|
.page-wide {
|
|
wa-page > main {
|
|
max-width: var(--content-width-l);
|
|
|
|
.max-line-length {
|
|
max-width: var(--line-length-l);
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-theme {
|
|
iframe {
|
|
width: 100%;
|
|
min-height: 16lh;
|
|
height: 65vh;
|
|
max-height: 21lh;
|
|
}
|
|
}
|