138 lines
2.4 KiB
SCSS
138 lines
2.4 KiB
SCSS
/**
|
|
* Docs: Documentation
|
|
*/
|
|
|
|
// Docs: Themes
|
|
#themes {
|
|
button.theme-switcher {
|
|
&:first-of-type {
|
|
--font-weight: bold;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Docs: Customization
|
|
#customization {
|
|
figure {
|
|
display: grid;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-template-columns: repeat(9, 1fr);
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
|
|
@media (min-width: map-get($breakpoints, "sm")) {
|
|
grid-template-rows: 1fr;
|
|
grid-template-columns: repeat(18, 1fr);
|
|
border-top-right-radius: var(--border-radius);
|
|
border-top-left-radius: var(--border-radius);
|
|
}
|
|
|
|
~ article {
|
|
margin-top: 0;
|
|
border-top-right-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
button {
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
padding-top: 100%;
|
|
border: none;
|
|
border-radius: 0;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.picked {
|
|
background-image: var(--icon-check);
|
|
background-position: center;
|
|
background-size: 0.66rem auto;
|
|
background-repeat: no-repeat;
|
|
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
&[data-color="lime"],
|
|
&[data-color="yellow"],
|
|
&[data-color="amber"] {
|
|
&.picked {
|
|
background-image: var(--icon-check-dark);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
transition: color var(--transition);
|
|
}
|
|
|
|
pre[data-theme="generated"] {
|
|
border-color: var(--primary);
|
|
}
|
|
}
|
|
|
|
// Docs: Grid
|
|
#grid {
|
|
--grid-spacing-vertical: 1rem;
|
|
|
|
button {
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: var(--spacing);
|
|
|
|
@media (min-width: map-get($breakpoints, "sm")) {
|
|
display: inline-block;
|
|
width: auto;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
svg {
|
|
stroke: var(--secondary);
|
|
margin-right: 0.5rem;
|
|
border: 2px solid currentColor;
|
|
border-radius: 1rem;
|
|
background: currentColor;
|
|
}
|
|
}
|
|
|
|
.grid {
|
|
> * {
|
|
padding: calc(var(--spacing) / 2) 0;
|
|
border-radius: var(--border-radius);
|
|
background: var(--code-background-color);
|
|
font-size: 87.5%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
details {
|
|
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
|
|
|
svg {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Docs: Buttons
|
|
#buttons {
|
|
a[role="button"] {
|
|
margin-right: calc(var(--spacing) * 0.5);
|
|
}
|
|
}
|
|
|
|
// Docs: Forms
|
|
#forms div.grid {
|
|
grid-row-gap: 0;
|
|
}
|
|
|
|
// Docs: Modal
|
|
#modal {
|
|
button {
|
|
--font-weight: bold;
|
|
}
|
|
}
|