mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
456539a52e
- CSS icons color dynamization in `_color.scss` - Bigger Checkboxes and Radio buttons - Small refactoring for Checkboxes and Radio buttons in `_form.scss` and `form-checkbox-radio.scss` - Styles for new form elements: `type=date`, `type=datetime-local`, `type=month`, `type=time`, `type=week`, `type=range`, `type=search` - Reordering @import in `pico.scss` and `pico.slim.scss`
107 lines
2.1 KiB
SCSS
107 lines
2.1 KiB
SCSS
@if $enable-classes {
|
|
|
|
/**
|
|
* Button Styles
|
|
*/
|
|
|
|
// Button .secondary
|
|
button.secondary,
|
|
input[type="submit"].secondary,
|
|
input[type="reset"],
|
|
a[role="button"].secondary {
|
|
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[type="submit"].contrast,
|
|
input[type="reset"].contrast,
|
|
a[role="button"].contrast {
|
|
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[type="submit"].outline,
|
|
a.outline[role="button"] {
|
|
border: 1px solid var(--primary);
|
|
background-color: transparent;
|
|
color: var(--primary);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
border: 1px solid var(--primary-hover);
|
|
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: 1px solid var(--secondary);
|
|
background-color: transparent;
|
|
color: var(--secondary);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
border: 1px solid var(--secondary-hover);
|
|
color: var(--secondary-hover);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
|
}
|
|
}
|
|
|
|
|
|
// Button .outline.contrast
|
|
button.outline.contrast,
|
|
input[type="submit"].outline.contrast,
|
|
input[type="reset"].outline.contrast,
|
|
a[role="button"].outline.contrast {
|
|
border: 1px solid var(--contrast);
|
|
background-color: transparent;
|
|
color: var(--contrast);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
border: 1px solid var(--contrast-hover);
|
|
color: var(--contrast-hover);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
|
}
|
|
}
|
|
}
|