Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
44 lines (42 sloc) 1.21 KB
// Buttons
//
// Call to Action buttons come in different various flavors.
// They work with `button`, `input` and `link` elements.
// Check out the focus style and loading class.
// They can also be combined with different paddings classes.
.button {
padding: var(--space-s);
position: relative;
border-style: solid;
@include emboss();
&:focus { @extend .focusstyle; }
&:hover, &:focus { z-index: 2 }
&.active {
&:hover {
cursor: default;
background-color: currentColor;
color: currentColor;
}
}
&:hover, &:focus { color: var(--color, var(--color-main-5)) }
}
.prime {
border-width: var(--space-px);
border-color: var(--color, var(--color-main-5));
color: var(--color-bg-1, var(--color-prime-1));
background-color: var(--color-bg-4, var(--color-prime-4));
cursor: pointer; // for HTML buttons
&:hover, &:focus {
z-index: 2;
color: var(--color-bg-1, var(--color-prime-1));
background-color: var(--color-bg-5, var(--color-prime-5));
}
}
.ghost {
background-color: transparent;
color: var(--color-bg-4, var(--color-prime-4));
background-image: none !important;
&:hover {
background-color: var(--color-bg-2, var(--color-prime-2));
}
}