mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-06-16 19:25:24 -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

14
docs/scss/components/_nav.scss
View file

@ -10,8 +10,8 @@ body > nav {
right: 0;
left: 0;
backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background);
box-shadow: 0px 1px 0 var(--nav-border);
background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border-color);
a {
border-radius: 0;
@ -29,10 +29,10 @@ body > nav {
a {
width: 3.5rem;
height: 3.5rem;
margin-left: calc(var(--spacing-gutter) * -1);
margin-left: calc(var(--spacing) * -1);
padding: 0;
background: var(--h1);
color: var(--background);
background: var(--h1-color);
color: var(--nav-logo-color);
svg {
height: 3.5rem;
@ -43,8 +43,8 @@ body > nav {
// Title
&:nth-of-type(2) {
display: none;
margin-left: var(--spacing-gutter);
color: var(--h1);
margin-left: var(--spacing);
color: var(--h1-color);
@media (min-width: map-get($breakpoints, "lg")) {
display: inline;

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

@ -4,13 +4,13 @@
.switcher {
position: fixed;
right: calc(var(--spacing-gutter) / 2);
bottom: var(--spacing-gutter);
right: calc(var(--spacing) / 2);
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
box-shadow: var(--card-shadow);
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
@ -53,18 +53,17 @@
i {
max-width: 100%;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition),
padding var(--transition);
}
}
&:focus {
box-shadow: var(--card-shadow),
0 0 0 0.2rem var(--secondary-focus);
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
}
@media (min-width: map-get($breakpoints, "sm")) {
right: var(--spacing-gutter);
right: var(--spacing);
}
}

50
docs/scss/content/_code.scss
View file

@ -2,40 +2,16 @@
* Docs: Code
*/
// Custom spacings for <pre> (vertically aligned with <article> content)
pre {
code {
--font-weight: 400;
}
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
// Custom spacings for <pre> (Horizontally aligned with <article> content)
section > pre {
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
background-color: var( --card-sectionning-background-color);
box-shadow: var(--card-box-shadow);
}
// Badge for Valid & Invalid code
@ -57,8 +33,8 @@ pre {
line-height: 1;
@media (min-width: map-get($breakpoints, "lg")) {
top: var(--spacing-gutter);
right: var(--spacing-gutter);
top: var(--spacing);
right: var(--spacing);
}
}
@ -71,14 +47,14 @@ pre {
// Color for Valid & Invalid code
[data-theme="invalid"] {
&:before {
background: var(--invalid);
background: var(--invalid-color);
content: 'Not so great';
}
}
[data-theme="valid"] {
&:before {
background: var(--valid);
background: var(--valid-color);
content: 'Great';
}
}

6
docs/scss/content/_typography.scss
View file

@ -3,12 +3,12 @@
*/
section > hgroup {
margin-bottom: calc(var(--spacing-typography) * 2);
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
margin-right: calc(var(--spacing-typography) / 4);
margin-bottom: var(--spacing-typography);
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] {

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

12
docs/scss/themes/docs/_dark.scss
View file

@ -2,8 +2,11 @@
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)};
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}
}
@ -12,6 +15,9 @@
// Dark theme (Forced) [Additions for docs]
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
}

1
docs/scss/themes/docs/_icons.scss
View file

@ -1,6 +1,5 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-external: 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='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: 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");

7
docs/scss/themes/docs/_light.scss
View file

@ -2,6 +2,9 @@
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
--nav-background: #{rgba($white, .7)};
--nav-border: #{rgba($grey-500, .2)};
--invalid-color: #{$red-800};
--valid-color: #{$green-700};
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{$white};
}