mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
b96c3f318b
* move print styles * begin native styles split * unsplit button styles 😓 * unsplit callout; remove .wa-callout * merge forms * remove unused * remove unused * unsplit checkbox * remove old astro config * remove overflow * unsplit slider * fix tooltip position in RTL * unsplit radio * move required light DOM styles to <wa-page> * remove unused file * remove unused import * remove * goodbye * fix examples * unsplit dialog * unsplit select * remove select * unsplit input * unsplit details * update * update comment * update textarea * combine native docs; improvements * update * reorg and fix headings * fix details summary padding; fixes #684 * update * fix native details summary padding; fixes #684 * #684 * remove passthrough style nonsense * it's CSS not JS * fix details in sidebar * add spacing in native buttons for icons * whitespace * update docs * remove button group util * remove shadow folder, add component folder * layerize * default border radius * remove color contrast script from dist * add term * layerize themes + color folders * reorder * remove radio button; #504 * remove visual tests * remove visual tests * remove unused stylesheet * make search smarter * add radio styles * Fix filled textareas * re-introduce visual tests (with adjustments) * fix button appearances * fix textarea focus styles * re-introduce appearance classes * remove 'native styles' note from component pages * fix checked radio styles * touch up callout styles * remove errant `.wa-tag` * scope appearance classes to relevant elements * more visual test cases * fix details borders * minor visual tests reorg * add `--box-shadow` to buttons * fix Awesome theme * use same layer for all themes (allows unset properties to inherit from Default theme) * fix box-shadow in wa-textarea * set button box shadow to `initial` * fix Active theme * fix Brutalist theme * fix Glossy theme * fix Matter theme (mostly) * fix Playful theme * fix Premium theme * fix Shoelac theme * fix Tailspin theme * fix custom radio button styles * fix links to native styles doc --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
151 lines
3.7 KiB
CSS
151 lines
3.7 KiB
CSS
.code-example {
|
|
background: var(--wa-color-surface-lowered);
|
|
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
|
border-radius: var(--wa-border-radius-l);
|
|
color: var(--wa-color-text-normal);
|
|
margin-block-end: var(--wa-flow-spacing);
|
|
isolation: isolate;
|
|
}
|
|
|
|
.code-example-preview {
|
|
position: relative;
|
|
background: var(--wa-color-surface-default);
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
|
padding: 2rem 3.25rem 2rem 2rem;
|
|
min-width: 20rem;
|
|
max-width: 100%;
|
|
|
|
> :first-child:not(dialog) {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
> :last-child:not(dialog) {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
|
|
/* Block the preview while dragging to prevent iframes from intercepting drag events */
|
|
.code-example-preview--dragging:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.code-example-resizer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 1.75rem;
|
|
font-size: 20px;
|
|
color: var(--wa-color-text-quiet);
|
|
background-color: var(--wa-color-neutral--wa-color-surface-default);
|
|
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
|
border-top-right-radius: var(--wa-border-radius-l);
|
|
cursor: ew-resize;
|
|
|
|
wa-icon {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.code-example-preview {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.code-example-resizer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.code-example-source {
|
|
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
|
}
|
|
|
|
.code-example:not(.open) .code-example-source {
|
|
display: none;
|
|
}
|
|
|
|
.code-example.open .code-example-toggle wa-icon {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
.code-example-source pre {
|
|
position: relative;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
.code-example-source:not(:has(+ .code-example-buttons)) {
|
|
border-bottom: none;
|
|
|
|
pre {
|
|
border-bottom-right-radius: var(--wa-border-radius-l);
|
|
border-bottom-left-radius: var(--wa-border-radius-l);
|
|
}
|
|
}
|
|
|
|
.code-example-buttons {
|
|
display: flex;
|
|
align-items: stretch;
|
|
background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
|
|
color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
|
|
button {
|
|
position: relative;
|
|
all: unset;
|
|
flex: 1 0 auto;
|
|
font-size: 0.875rem;
|
|
color: var(--wa-color-text-quiet);
|
|
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet) !important; /* TODO - remove after native styles refactor */
|
|
background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
|
|
color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
|
|
}
|
|
|
|
&:first-of-type {
|
|
border-left: none;
|
|
border-bottom-left-radius: var(--wa-border-radius-l);
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-bottom-right-radius: var(--wa-border-radius-l);
|
|
}
|
|
|
|
&:focus-visible {
|
|
z-index: 3;
|
|
outline: var(--wa-focus-ring);
|
|
}
|
|
}
|
|
|
|
.code-example-pen {
|
|
flex: 0 0 100px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
wa-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -2px;
|
|
}
|
|
}
|