mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
c89db4ec2d
- Lighter <mark> - Better <hgroup> - Edit hover for [type="range"] - button.outline border-width dynamization - Fix font-family for headings
133 lines
3.3 KiB
SCSS
133 lines
3.3 KiB
SCSS
@if $enable-classes {
|
|
|
|
/**
|
|
* Button Styles
|
|
*/
|
|
|
|
// Button .secondary
|
|
button.secondary,
|
|
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 {
|
|
@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);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Button .contrast
|
|
button.contrast,
|
|
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: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
|
|
}
|
|
}
|
|
|
|
|
|
// Button .outline
|
|
button.outline,
|
|
input[type="submit"].outline,
|
|
a.outline[role="button"] {
|
|
border: var(--button-border-width) solid var(--primary-border);
|
|
background-color: transparent;
|
|
color: var(--primary);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
border: var(--button-border-width) solid var(--primary-hover-border);
|
|
color: var(--primary-hover);
|
|
}
|
|
}
|
|
|
|
|
|
// Button .outline.secondary
|
|
button.outline.secondary,
|
|
input[type="submit"].outline.secondary,
|
|
input[type="reset"].outline,
|
|
a[role="button"].outline.secondary {
|
|
border: var(--button-border-width) solid var(--secondary-border);
|
|
background-color: transparent;
|
|
color: var(--secondary);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
border: var(--button-border-width)solid var(--secondary-hover-border);
|
|
color: var(--secondary-hover);
|
|
}
|
|
}
|
|
|
|
|
|
// Button .outline.contrast
|
|
button.outline.contrast,
|
|
input[type="submit"].outline.contrast,
|
|
input[type="reset"].outline.contrast,
|
|
a[role="button"].outline.contrast {
|
|
border: var(--button-border-width) solid var(--contrast-border);
|
|
background-color: transparent;
|
|
color: var(--contrast);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
border: var(--button-border-width) solid var(--contrast-hover-border);
|
|
color: var(--contrast-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
@else {
|
|
|
|
// Button reset only for classless version
|
|
input[type="reset"] {
|
|
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 {
|
|
@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);
|
|
}
|
|
}
|
|
}
|
|
}
|