mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 18:56:15 -04:00
345053a956
- Remove Increase headings font size inside <header> - Add $enable-transitions in _variables.scss - Bigger Checkbox, Radio, switch - Remove borders on button
100 lines
1.8 KiB
SCSS
100 lines
1.8 KiB
SCSS
@if $enable-classes {
|
|
|
|
/**
|
|
* Button Styles
|
|
*/
|
|
|
|
// Button .secondary
|
|
button.secondary,
|
|
input.secondary[type="submit"],
|
|
input[type="reset"],
|
|
a.secondary[role="button"] {
|
|
background-color: var(--secondary);
|
|
color: var(--secondary-inverse);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background-color: var(--secondary-hover);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
|
}
|
|
}
|
|
|
|
|
|
// Button .contrast
|
|
button.contrast,
|
|
input.contrast[type="submit"],
|
|
input.contrast[type="reset"],
|
|
a.contrast[role="button"] {
|
|
background-color: var(--contrast);
|
|
color: var(--contrast-inverse);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background-color: var(--contrast-hover);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
|
}
|
|
}
|
|
|
|
|
|
// Button .outline
|
|
button.outline,
|
|
input.outline[type="submit"],
|
|
a.outline[role="button"] {
|
|
background-color: transparent;
|
|
color: var(--primary);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: var(--primary-hover);
|
|
}
|
|
}
|
|
|
|
|
|
// Button .outline.secondary
|
|
button.outline.secondary,
|
|
input.outline.secondary[type="submit"],
|
|
input.outline[type="reset"],
|
|
a.outline.secondary[role="button"] {
|
|
background-color: transparent;
|
|
color: var(--secondary);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: var(--secondary-hover);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
|
}
|
|
}
|
|
|
|
|
|
// Button .outline.contrast
|
|
button.outline.contrast,
|
|
input.outline.contrast[type="submit"],
|
|
input.outline.contrast[type="reset"],
|
|
a.outline.contrast[role="button"] {
|
|
background-color: transparent;
|
|
color: var(--contrast);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: var(--contrast-hover);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
|
}
|
|
}
|
|
}
|