You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.5 KiB
50 lines
1.5 KiB
6 years ago
|
button, a.btn, span.btn {
|
||
|
6 years ago
|
display: inline-block;
|
||
|
6 years ago
|
border: thin solid var(--darken-2);
|
||
|
|
background: var(--darken-1);
|
||
|
|
padding: var(--space-3);
|
||
|
|
color: inherit;
|
||
|
|
text-transform: uppercase;
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: .875rem;
|
||
|
|
font-weight: 100;
|
||
|
|
cursor: pointer;
|
||
|
6 years ago
|
text-shadow: var(--extruded-light);
|
||
|
6 years ago
|
|
||
|
|
&.primary {
|
||
|
|
background-color: var(--primary);
|
||
|
|
color: var(--primary-txt);
|
||
|
6 years ago
|
text-shadow: var(--extruded-dark);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.btn-icon-only {
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-left: 1ch;
|
||
|
|
padding: var(--space-2);
|
||
|
|
border-color: transparent;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
--size: 1.5rem;
|
||
|
|
width: var(--size);
|
||
|
|
height: var(--size);
|
||
|
|
display: inline-block;
|
||
|
|
content: '';
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Icons
|
||
|
|
&.icon-direction::before {
|
||
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M502.61 233.32L278.68 9.39c-12.52-12.52-32.83-12.52-45.36 0L9.39 233.32c-12.52 12.53-12.52 32.83 0 45.36l223.93 223.93c12.52 12.53 32.83 12.53 45.36 0l223.93-223.93c12.52-12.53 12.52-32.83 0-45.36zm-100.98 12.56l-84.21 77.73c-5.12 4.73-13.43 1.1-13.43-5.88V264h-96v64c0 4.42-3.58 8-8 8h-32c-4.42 0-8-3.58-8-8v-80c0-17.67 14.33-32 32-32h112v-53.73c0-6.97 8.3-10.61 13.43-5.88l84.21 77.73c3.43 3.17 3.43 8.59 0 11.76z"></path></svg>');
|
||
|
6 years ago
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
form:invalid button,
|
||
|
|
button[aria-disabled],
|
||
|
|
a.btn[aria-disabled],
|
||
|
|
span.btn[aria-disabled] {
|
||
|
|
opacity: .5;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|