mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10:46: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

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

@ -28,7 +28,7 @@ body > nav {
a {
width: 3.5rem;
height: 3.5rem;
margin-left: -$spacing-gutter;
margin-left: calc(var(--spacing-gutter) * -1);
padding: 0;
background: var(--h1);
color: var(--background);
@ -38,7 +38,7 @@ body > nav {
// Title
&:nth-of-type(2) {
display: none;
margin-left: $spacing-gutter;
margin-left: var(--spacing-gutter);
color: var(--h1);
@media (min-width: map-get($breakpoints, "lg")) {

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

@ -4,15 +4,15 @@
.switcher {
position: fixed;
right: $spacing-gutter/2;
bottom: $spacing-gutter;
right: calc(var(--spacing-gutter) / 2);
bottom: var(--spacing-gutter);
width: auto;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
box-shadow: var(--card-shadow);
line-height: 1;
text-align: right;
box-shadow: var(--card-shadow);
&::after {
display: inline-block;
@ -23,7 +23,7 @@
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
vertical-align: bottom;
content: '';
transition: transform $transition;
transition: transform var(--transition);
}
i {
@ -40,10 +40,10 @@
&:focus {
max-width: 100%;
transition:
background-color $transition,
border-color $transition,
color $transition,
box-shadow $transition;
background-color var(--transition),
border-color var(--transition),
color var(--transition),
box-shadow var(--transition);
}
&:hover {
@ -53,9 +53,9 @@
i {
max-width: 100%;
padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4);
transition: max-width $transition,
padding $transition;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
transition: max-width var(--transition),
padding var(--transition);
}
}
@ -65,6 +65,6 @@
}
@media (min-width: map-get($breakpoints, "sm")) {
right: $spacing-gutter;
right: var(--spacing-gutter);
}
}