blob: 87c05c0275552cee2aafa04abadb4c7c7e57d089 [file] [log] [blame]
// A set of styles to make buttons and select/options look more Material Design-ish.
@import '../themes/themes';
button {
min-width: 5.14em;
background-color: var(--surface);
color: var(--on-surface);
fill: var(--on-surface);
text-align: center;
text-transform: uppercase;
outline: none;
padding: 0.6em 1.2em;
border: solid var(--on-surface) 1px;
margin: 0.6em;
height: 3em;
button:hover {
background: var(--surface-1dp);
button.action:hover {
background: var(--primary-variant);
color: var(--on-primary-variant);
fill: var(--on-primary-variant);
button:focus {
outline: dashed 2px var(--on-surface);
outline-offset: 3px;
button.fab:active {
background-color: var(--background);
color: var(--on-background);
fill: var(--on-background);
button:disabled {
background: var(--disabled);
border-color: var(--on-disabled);
color: var(--on-disabled);
fill: var(--on-disabled);
button.action {
color: var(--on-primary);
fill: var(--on-primary);
background: var(--primary);
border: solid rgba(0, 0, 0, 0) 1px;
button.action:disabled {
background: var(--disabled);
color: var(--on-disabled);
fill: var(--on-disabled);
button.fab {
color: var(--on-secondary);
fill: var(--on-secondary);
background: var(--secondary);
border-radius: 50%;
border: none;
padding: 10px;
width: 48px;
height: 48px;
min-width: 0px;
font-weight: bold;
font-size: 22px;