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

33
scss/content/_button-styles.scss
View file

@ -9,17 +9,24 @@
input[type="submit"].secondary,
input[type="reset"],
a[role="button"].secondary {
border: var(--button-border-width) solid var(--secondary-border);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border-color: var(--secondary-hover-border);
background-color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
@if $enable-important {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
}
@else {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
}
}
}
@ -29,17 +36,19 @@
input[type="submit"].contrast,
input[type="reset"].contrast,
a[role="button"].contrast {
border: var(--button-border-width) solid var(--contrast-border);
background-color: var(--contrast);
color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
border-color: var(--contrast-hover-border);
background-color: var(--contrast-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
}
}
@ -48,14 +57,14 @@
button.outline,
input[type="submit"].outline,
a.outline[role="button"] {
border: 1px solid var(--primary);
border: var(--button-border-width) solid var(--primary-border);
background-color: transparent;
color: var(--primary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover);
border: 1px solid var(--primary-hover-border);
color: var(--primary-hover);
}
}
@ -66,20 +75,16 @@
input[type="submit"].outline.secondary,
input[type="reset"].outline,
a[role="button"].outline.secondary {
border: 1px solid var(--secondary);
border: var(--button-border-width) solid var(--secondary-border);
background-color: transparent;
color: var(--secondary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
border: 1px solid var(--secondary-hover-border);
color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
@ -88,19 +93,15 @@
input[type="submit"].outline.contrast,
input[type="reset"].outline.contrast,
a[role="button"].outline.contrast {
border: 1px solid var(--contrast);
border: var(--button-border-width) solid var(--contrast-border);
background-color: transparent;
color: var(--contrast);
&:hover,
&:active,
&:focus {
border: 1px solid var(--contrast-hover);
border: 1px solid var(--contrast-hover-border);
color: var(--contrast-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
}
}