109 lines
1.7 KiB
SCSS
109 lines
1.7 KiB
SCSS
button {
|
|
&%block,
|
|
&.block {
|
|
background-color: transparent;
|
|
border: none;
|
|
font-size: 1em;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
button,
|
|
input[type="submit"] {
|
|
&.button {
|
|
appearance: none;
|
|
}
|
|
}
|
|
|
|
%button,
|
|
.button {
|
|
display: inline-block;
|
|
padding: 0.5em 1.25em;
|
|
border: 0.125em solid $black;
|
|
border-radius: 0.25em;
|
|
background-color: $black;
|
|
color: $white;
|
|
font-family: $font;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
white-space: normal;
|
|
cursor: pointer;
|
|
transition: 300ms ease all;
|
|
|
|
.knockout & {
|
|
background-color: $white;
|
|
border-color: $white;
|
|
color: currentcolor;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $white;
|
|
text-decoration: none;
|
|
background-color: rgba($black, 0.5);
|
|
border-color: rgba($black, 0.5);
|
|
|
|
.knockout & {
|
|
background-color: rgba($white, 0.5);
|
|
border-color: rgba($white, 0.5);
|
|
color: currentcolor;
|
|
}
|
|
}
|
|
|
|
&.outline {
|
|
border-color: $black;
|
|
background-color: transparent;
|
|
color: $black;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $black;
|
|
color: $white;
|
|
}
|
|
|
|
.knockout & {
|
|
@media screen {
|
|
border-color: $white;
|
|
color: $white;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $white;
|
|
color: $black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.wide {
|
|
padding-right: 3em;
|
|
padding-left: 3em;
|
|
}
|
|
|
|
&.thin {
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
&.full {
|
|
display: block;
|
|
width: 100%;
|
|
padding-right: 0.625em;
|
|
padding-left: 0.625em;
|
|
text-align: center;
|
|
}
|
|
|
|
&.small { font-size: 1em; }
|
|
&.smaller { font-size: 0.875em; }
|
|
&.big { font-size: 1.25em; }
|
|
&.bigger { font-size: 1.5em; }
|
|
}
|
|
|
|
.button-wrap {
|
|
margin: 1.5em -0.25em -0.25em;
|
|
|
|
.button {
|
|
margin: 0.25em;
|
|
}
|
|
}
|