mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-06-17 03:35:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reorganization of Sass files

Browse source
This commit is contained in:
Lucas 2019-11-27 22:10:02 +07:00
parent 34e330a537
commit ec866e1e5a
9 changed files with 298 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

94
docs/scss/layout/_documentation.scss Normal file
View file

@ -0,0 +1,94 @@
/**
* Docs: Documentation
*/
// 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: 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;
}
}