mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
108 lines
2.6 KiB
SCSS
108 lines
2.6 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: 1px 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: 1px 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: 1px solid var(--contrast-hover-border);
|
|
color: var(--contrast-hover);
|
|
}
|
|
}
|
|
}
|