mirror of
https://github.com/picocss/pico.git
synced 2025-02-25 00:41:27 -05:00
73237bdcd4
- Add .contrast variant - Separate _button-styles.scss - Edit .secondary, mark, figcaption, hgroup, tooltips - Docs: Add More about grids, External links icon, Second theme switcher
114 lines
2.7 KiB
SCSS
114 lines
2.7 KiB
SCSS
/**
|
||
* Docs: Documentation
|
||
*/
|
||
|
||
// Docs: Themes
|
||
// ––––––––––––––––––––
|
||
|
||
#themes {
|
||
button i {
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
// Docs: Customization
|
||
// ––––––––––––––––––––
|
||
|
||
#customization {
|
||
|
||
figure {
|
||
display: grid;
|
||
grid-template-columns: repeat(9, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
margin-bottom: 0;
|
||
overflow: hidden;
|
||
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
grid-template-columns: repeat(18, 1fr);
|
||
grid-template-rows: 1fr;
|
||
border-top-right-radius: $round;
|
||
border-top-left-radius: $round;
|
||
}
|
||
|
||
~ 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 {
|
||
// Source: https://feathericons.com/
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: .66rem auto;
|
||
box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
|
||
}
|
||
&[data-color="lime"],
|
||
&[data-color="yellow"],
|
||
&[data-color="amber"] {
|
||
&.picked {
|
||
// Source: https://feathericons.com/
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
h4 {
|
||
transition: color $transition;
|
||
}
|
||
|
||
pre[data-theme="generated"] {
|
||
border-color: var(--primary);
|
||
}
|
||
}
|
||
|
||
|
||
// Docs: Grids
|
||
// ––––––––––––––––––––
|
||
|
||
#grids {
|
||
|
||
button {
|
||
display: block;
|
||
width: 100%;
|
||
margin-bottom: $spacing-typography/2;
|
||
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
display: inline-block;
|
||
width: auto;
|
||
margin-right: .5rem;
|
||
}
|
||
|
||
svg {
|
||
stroke: var(--secondary);
|
||
margin-right: .5rem;
|
||
border: 3px solid currentColor;
|
||
border-radius: 1rem;
|
||
background: currentColor;
|
||
}
|
||
}
|
||
|
||
.grid > * {
|
||
padding: ($spacing-gutter/2) 0;
|
||
background: var(--code-background);
|
||
text-align: center;
|
||
}
|
||
|
||
details {
|
||
margin-top: $spacing-typography*2;
|
||
}
|
||
}
|