mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

CSS Vars refactoring

Browse source
This commit is contained in:
Lucas Larroche 2021-07-02 16:54:41 +07:00
parent 14460576bf
commit d12af72cab
64 changed files with 4878 additions and 4948 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/scss/layout/_aside.scss
View file

@ -6,10 +6,10 @@ main > aside {
nav {
width: 100%;
margin-bottom: var(--spacing-block);
margin-bottom: var(--block-spacing-vertical);
h1 {
margin-bottom: var(--spacing-typography);
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: map-get($breakpoints, "lg")) {
@ -55,7 +55,7 @@ main > aside {
border-bottom: none;
summary {
color: var(--h3);
color: var(--h3-color);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
@ -66,7 +66,7 @@ main > aside {
}
&[open] summary {
color: var(--h3);
color: var(--h3-color);
}
}
}

30
docs/scss/layout/_documentation.scss
View file

@ -3,8 +3,6 @@
*/
// Docs: Themes
// ––––––––––––––––––––
#themes {
button i {
font-style: normal;
@ -12,8 +10,6 @@
}
// Docs: Customization
// ––––––––––––––––––––
#customization {
figure {
@ -26,8 +22,8 @@
@media (min-width: map-get($breakpoints, "sm")) {
grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr;
border-top-right-radius: var(--block-round);
border-top-left-radius: var(--block-round);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
~ article {
@ -75,14 +71,14 @@
// Docs: Grids
// ––––––––––––––––––––
#grids {
--grid-spacing-vertical: 1rem;
button {
display: block;
width: 100%;
margin-bottom: calc(var(--spacing-typography) / 2);
margin-bottom: var(--spacing);
@media (min-width: map-get($breakpoints, "sm")) {
display: inline-block;
@ -99,14 +95,18 @@
}
}
.grid > * {
padding: calc(var(--spacing-gutter) / 2) 0;
background: var(--code-background);
text-align: center;
.grid {
> * {
padding: calc(var(--spacing) / 2) 0;
background: var(--secondary);
color: var(--secondary-inverse);
text-align: center;
opacity: .5;
}
}
details {
margin-top: calc(var(--spacing-typography) * 2);
margin-top: calc(var(--typography-spacing-vertical) * 2);
svg {
vertical-align: bottom;
@ -115,8 +115,6 @@
}
// Docs: Forms
// ––––––––––––––––––––
#forms div.grid {
grid-row-gap: 0;
}

93
docs/scss/layout/_main.scss
View file

@ -2,71 +2,73 @@
* Docs: Main (Grid)
*/
// Config
$navHeight: 3.5rem;
// Main grid
body > main {
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
@media (min-width: map-get($breakpoints, "sm")) {
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
display: grid;
grid-template-columns: 200px auto;
}
}
@media (min-width: map-get($breakpoints, "md")) {
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
@media (min-width: map-get($breakpoints, "lg")) {
grid-column-gap: calc(var(--spacing-gutter) * 4);
display: grid;
grid-template-columns: 200px auto;
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
}
@media (min-width: map-get($breakpoints, "xl")) {
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
}
> * {
min-width: 0; // HACK for childs in overflow
> aside,
div[role="document"] {
min-width: 0;
}
}
// Anchors hacks for internal links
// ––––––––––––––––––––
div[role="document"] > section::before {
display: block;
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
height: calc(2rem + #{$navHeight} - .5rem);
margin-top: calc(-2rem - #{$navHeight} + .5rem);
content: '';
@media (min-width: map-get($breakpoints, "sm")) {
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
height: calc(2.5rem + #{$navHeight} - .5rem);
height: calc(-2.5rem - #{$navHeight} + .5rem);
}
}
@media (min-width: map-get($breakpoints, "md")) {
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
height: calc(3rem + #{$navHeight} - .5rem);
margin-top: calc(-3rem - #{$navHeight} + .5rem);
}
}
@media (min-width: map-get($breakpoints, "lg")) {
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
height: calc(3.5rem + #{$navHeight} - .5rem);
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
}
}
@media (min-width: map-get($breakpoints, "xl")) {
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
height: calc(4rem + #{$navHeight} - .5rem);
margin-top: calc(-4rem - #{$navHeight} + .5rem);
}
}
}
// External links
// ––––––––––––––––––––
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block;
width: 1rem;
@ -78,20 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: '';
}
// Form grid
// ––––––––––––––––––––
form.grid {
> input:not([type=checkbox]):not([type=radio]),
> button {
margin-bottom: 0;
}
}
// Embedded SVG
// ––––––––––––––––––––
svg {
height: 1rem;
}