mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -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

56
docs/css/pico.docs.css
View file

@ -32,22 +32,8 @@
}
/**
* Docs: Global layout
* Docs: Main (Grid)
*/
section > hgroup {
margin-bottom: 3rem;
}
section > hgroup p {
color: var(--muted-text);
font-size: 1.125rem;
}
a[role=button] {
margin-right: 0.25rem;
margin-bottom: 1.5rem;
}
body > main {
padding-top: 4.5rem;
}
@ -118,6 +104,9 @@ a[name]:not([href])::before {
}
}
/**
* Docs: Aside
*/
main > aside nav {
width: 100%;
margin-bottom: 2rem;
@ -147,6 +136,14 @@ main > aside li, main > aside summary {
font-size: 16px;
}
main > aside li a {
padding: 0.375rem 0.5rem;
}
main > aside li a svg {
vertical-align: middle;
}
main > aside a:focus,
main > aside a.secondary:focus {
background-color: transparent;
@ -173,6 +170,9 @@ main > aside details summary::after {
line-height: 1;
}
/**
* Docs: Documentation
*/
#customization figure {
display: grid;
grid-template-columns: repeat(9, 1fr);
@ -248,6 +248,29 @@ main > aside details summary::after {
text-align: center;
}
/**
* Docs: Typography
*/
section > hgroup {
margin-bottom: 3rem;
}
section > hgroup p {
color: var(--muted-text);
font-size: 1.125rem;
}
a[role=button] {
margin-right: 0.25rem;
margin-bottom: 1.5rem;
}
[role=document] section > h1,
[role=document] section > h2,
[role=document] section > h3 {
line-height: 1;
}
/**
* Docs: Code
*/
@ -424,7 +447,6 @@ button.switcher {
right: 0.5rem;
bottom: 1rem;
width: auto;
max-width: 3rem;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
@ -457,7 +479,7 @@ button.switcher i {
button.switcher:hover, button.switcher:focus {
max-width: 100%;
transition: max-width 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
button.switcher:hover::after {

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
docs/scss/components/_theme-switcher.scss
View file

@ -7,7 +7,6 @@ button.switcher {
right: $spacing-gutter/2;
bottom: $spacing-gutter;
width: auto;
max-width: 1rem + $spacing-gutter*2;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
@ -40,8 +39,7 @@ button.switcher {
&:hover,
&:focus {
max-width: 100%;
transition: max-width $transition,
background-color $transition,
transition: background-color $transition,
color $transition;
}

23
docs/scss/content/_typography.scss Normal file
View file

@ -0,0 +1,23 @@
/**
* Docs: Typography
*/
section > hgroup {
margin-bottom: $spacing-typography*2;
p {
color: var(--muted-text);
font-size: 1.125rem;
}
}
a[role=button] {
margin-right: $spacing-gutter/4;
margin-bottom: $spacing-typography;
}
[role=document] {
section > h1,
section > h2,
section > h3 {
line-height: 1;
}
}

72
docs/scss/layout/_aside.scss Normal file
View file

@ -0,0 +1,72 @@
/**
* Docs: Aside
*/
main > aside {
nav {
width: 100%;
margin-bottom: $spacing-block;
h1 {
margin-bottom: $spacing-typography;
}
@media (min-width: map-get($breakpoints, "lg")) {
position: fixed;
width: 200px;
max-height: calc(100vh - 5.5rem);
margin-bottom: 0;
overflow-x: hidden;
overflow-y: auto;
h1 {
display: none;
}
}
}
li, summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
}
li a {
padding: 0.375rem 0.5rem;
svg {
vertical-align: middle;
}
}
a,
a.secondary {
&:focus {
background-color: transparent;
color: var(--primary-hover);
}
}
details {
padding-bottom: .25rem;
border-bottom: none;
}
details summary {
font-weight: 300;
text-transform: uppercase;
&::after {
display: none;
}
}
}
[role=document] {
section > h1,
section > h2,
section > h3 {
line-height: 1;
}
}

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;
}
}

242
docs/scss/layout/_layout.scss
View file

@ -1,242 +0,0 @@
/**
* Docs: Global layout
*/
$navHeight: 3.5rem;
// Docs: Commons
// ––––––––––––––––––––
section > hgroup {
margin-bottom: $spacing-typography*2;
p {
color: var(--muted-text);
font-size: 1.125rem;
}
}
a[role=button] {
margin-right: $spacing-gutter/4;
margin-bottom: $spacing-typography;
}
// Main (Grid)
// ––––––––––––––––––––
body > main {
padding-top:map-get($spacing-factor, "xs") + $navHeight;
@media (min-width: map-get($breakpoints, "sm")) {
padding-top: map-get($spacing-factor, "sm") + $navHeight;
}
@media (min-width: map-get($breakpoints, "md")) {
padding-top: map-get($spacing-factor, "md") + $navHeight;
}
@media (min-width: map-get($breakpoints, "lg")) {
grid-column-gap: $spacing-gutter*4;
display: grid;
grid-template-columns: 200px auto;
padding-top: map-get($spacing-factor, "lg") + $navHeight;
}
@media (min-width: map-get($breakpoints, "xl")) {
padding-top: map-get($spacing-factor, "xl") + $navHeight;
}
> * {
min-width: 0; // HACK for childs in overflow
}
}
// Anchors hacks for internal links
// ––––––––––––––––––––
a[name]:not([href])::before {
display: block;
height: map-get($spacing-factor, "xs") + $navHeight;
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
content: '';
@media (min-width: map-get($breakpoints, "sm")) {
height: map-get($spacing-factor, "sm") + $navHeight;
margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
}
@media (min-width: map-get($breakpoints, "md")) {
height: map-get($spacing-factor, "md") + $navHeight;
margin-top: -(map-get($spacing-factor, "md") + $navHeight);
}
@media (min-width: map-get($breakpoints, "lg")) {
height: map-get($spacing-factor, "lg") + $navHeight;
margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
}
@media (min-width: map-get($breakpoints, "xl")) {
height: map-get($spacing-factor, "xl") + $navHeight;
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
}
}
// Aside
// ––––––––––––––––––––
main > aside {
nav {
width: 100%;
margin-bottom: $spacing-block;
h1 {
margin-bottom: $spacing-typography;
}
@media (min-width: map-get($breakpoints, "lg")) {
position: fixed;
width: 200px;
max-height: calc(100vh - 5.5rem);
margin-bottom: 0;
overflow-x: hidden;
overflow-y: auto;
h1 {
display: none;
}
}
}
li, summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
}
a,
a.secondary {
&:focus {
background-color: transparent;
color: var(--primary-hover);
}
}
details {
padding-bottom: .25rem;
border-bottom: none;
}
details summary {
font-weight: 300;
text-transform: uppercase;
&::after {
display: none;
}
}
}
[role=document] {
section > h1,
section > h2,
section > h3 {
line-height: 1;
}
}
// 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;
}
}

64
docs/scss/layout/_main.scss Normal file
View file

@ -0,0 +1,64 @@
/**
* Docs: Main (Grid)
*/
$navHeight: 3.5rem;
body > main {
padding-top:map-get($spacing-factor, "xs") + $navHeight;
@media (min-width: map-get($breakpoints, "sm")) {
padding-top: map-get($spacing-factor, "sm") + $navHeight;
}
@media (min-width: map-get($breakpoints, "md")) {
padding-top: map-get($spacing-factor, "md") + $navHeight;
}
@media (min-width: map-get($breakpoints, "lg")) {
grid-column-gap: $spacing-gutter*4;
display: grid;
grid-template-columns: 200px auto;
padding-top: map-get($spacing-factor, "lg") + $navHeight;
}
@media (min-width: map-get($breakpoints, "xl")) {
padding-top: map-get($spacing-factor, "xl") + $navHeight;
}
> * {
min-width: 0; // HACK for childs in overflow
}
}
// Anchors hacks for internal links
// ––––––––––––––––––––
a[name]:not([href])::before {
display: block;
height: map-get($spacing-factor, "xs") + $navHeight;
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
content: '';
@media (min-width: map-get($breakpoints, "sm")) {
height: map-get($spacing-factor, "sm") + $navHeight;
margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
}
@media (min-width: map-get($breakpoints, "md")) {
height: map-get($spacing-factor, "md") + $navHeight;
margin-top: -(map-get($spacing-factor, "md") + $navHeight);
}
@media (min-width: map-get($breakpoints, "lg")) {
height: map-get($spacing-factor, "lg") + $navHeight;
margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
}
@media (min-width: map-get($breakpoints, "xl")) {
height: map-get($spacing-factor, "xl") + $navHeight;
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
}
}

5
docs/scss/pico.docs.scss
View file

@ -11,9 +11,12 @@
@import "themes/dark";
// Layout
@import "layout/layout";
@import "layout/main";
@import "layout/aside";
@import "layout/documentation";
// Content
@import "content/typography";
@import "content/code";
// Components