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

Move styles in SCSS vars to CSS vars

Browse source
This commit is contained in:
Lucas 2020-09-29 08:38:35 +07:00
parent f67044ecae
commit 9b1ef33577
49 changed files with 2921 additions and 1841 deletions
Download patch file Download diff file Expand all files Collapse all files

15
scss/components/_accordion.scss
View file

@ -5,8 +5,8 @@
details {
display: block;
margin-bottom: $spacing-typography;
padding-bottom: $spacing-typography/2;
margin-bottom: var(--spacing-typography);
padding-bottom: calc(var(--spacing-typography) / 2);
border-bottom: 1px solid var(--muted-border);
summary {
@ -32,12 +32,15 @@ details {
height: 1rem;
float: right;
transform: rotate(-90deg);
// 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='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-image: var(--icon-chevron);
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;
content: '';
@if $enable-transitions {
transition: transform var(--transition);
}
}
&:focus {
@ -45,7 +48,7 @@ details {
}
~ * {
margin-top: $spacing-typography/2;
margin-top: calc(var(--spacing-typography) / 2);
~ * {
margin-top: 0;
@ -57,7 +60,7 @@ details {
&[open] {
summary {
margin-bottom: $spacing-typography/4;
margin-bottom: calc(var(--spacing-typography) / 4);
color: var(--muted-text);
&::after {

72
scss/components/_card-sectioning.scss
View file

@ -10,135 +10,123 @@ article {
> header,
> footer,
> pre {
margin: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
margin: calc(var(--spacing-gutter) * -1);
padding: var(--spacing-block) var(--spacing-gutter);
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin: -$spacing-block*map-get($spacing-factor, "sm");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: -$spacing-block*map-get($spacing-factor, "md");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin: -$spacing-block*map-get($spacing-factor, "lg");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: -$spacing-block*map-get($spacing-factor, "xl");
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
}
> header {
margin-top: -$spacing-gutter*2;
margin-bottom: $spacing-block;
margin-top: calc(var(--spacing-gutter) * -2);
margin-bottom: var(--spacing-block);
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
margin-bottom: $spacing-block*map-get($spacing-factor, "sm");
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: -($spacing-block*map-get($spacing-factor, "md"));
margin-bottom: $spacing-block*map-get($spacing-factor, "md");
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
margin-bottom: $spacing-block*map-get($spacing-factor, "lg");
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
margin-bottom: $spacing-block*map-get($spacing-factor, "xl");
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
}
> footer,
> pre {
margin-top: $spacing-block;
margin-bottom: -$spacing-gutter*2;
margin-top: var(--spacing-block);
margin-bottom: calc(var(--spacing-gutter) * -2);
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: $spacing-block*map-get($spacing-factor, "sm");
margin-bottom: -($spacing-block*map-get($spacing-factor, "sm"));
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: $spacing-block*map-get($spacing-factor, "md");
margin-bottom: -($spacing-block*map-get($spacing-factor, "md"));
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: $spacing-block*map-get($spacing-factor, "lg");
margin-bottom: -($spacing-block*map-get($spacing-factor, "lg"));
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: $spacing-block*map-get($spacing-factor, "xl");
margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
}
}
}

31
scss/components/_card.scss
View file

@ -3,53 +3,50 @@
*/
article {
margin: $spacing-block 0;
padding: $spacing-block $spacing-gutter;
margin: var(--spacing-block) 0;
padding: var(--spacing-block) var(--spacing-gutter);
overflow: hidden;
border-radius: $round;
border-radius: var(--block-round);
background: var(--card-background);
box-shadow: var(--card-shadow);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
padding: $spacing-block*map-get($spacing-factor, "sm");
@if $enable-responsive-spacings {
margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-sm));
}
@else {
margin: $spacing-block 0;
padding: $spacing-block;
margin: var(--spacing-block) 0;
padding: var(--spacing-block);
}
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
padding: $spacing-block*map-get($spacing-factor, "md");
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
padding: $spacing-block*map-get($spacing-factor, "lg");
margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
padding: $spacing-block*map-get($spacing-factor, "xl");
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}

40
scss/components/_nav.scss
View file

@ -19,17 +19,17 @@ nav {
list-style: none;
&:first-of-type {
margin-left: -$spacing-gutter/2;
margin-left: calc(var(--spacing-gutter) * -0.5);
}
&:last-of-type {
margin-right: -$spacing-gutter/2;
margin-right: calc(var(--spacing-gutter) * -0.5);
}
}
li {
display: inline-block;
margin: 0;
padding: $spacing-gutter $spacing-gutter/2;
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
// HACK: Input & Button inside Nav
> *,
@ -40,23 +40,25 @@ nav {
a {
display: block;
margin: -$spacing-gutter (-$spacing-gutter/2);
padding: $spacing-gutter $spacing-gutter/2;
border-radius: $round;
margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
border-radius: var(--block-round);
@if $enable-important {
text-decoration: none !important;
}
@else {
text-decoration: none;
}
&:hover,
&:active,
&:focus {
text-decoration: none;
}
// Disable underline for a.contrast in nav
@if $enable-classes {
&.contrast:not([role="button"]),
&.contrast:not([role="button"]):hover,
&.contrast:not([role="button"]):active,
&.contrast:not([role="button"]):focus {
box-shadow: none;
@if $enable-important {
text-decoration: none !important;
}
@else {
text-decoration: none;
}
}
}
@ -73,11 +75,11 @@ aside {
}
li {
padding: $spacing-gutter/2;
padding: calc(var(--spacing-gutter) / 2);
a {
margin: -$spacing-gutter/2;
padding: $spacing-gutter/2;
margin: calc(var(--spacing-gutter) * -0.5);
padding: calc(var(--spacing-gutter) / 2);
}
}
}

4
scss/components/_tooltip.scss
View file

@ -21,12 +21,12 @@
padding: .25rem .5rem;
overflow: hidden;
transform: translate(-50%, -.25rem);
border-radius: $round;
border-radius: var(--block-round);
background: var(--contrast);
color: var(--contrast-inverse);
font-size: .85rem;
font-style: normal;
font-weight: normal;
font-weight: var(--text-weight);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;