SiteWebAstrolabe/src/scss/components/_button.scss
2020-07-07 00:09:37 +02:00

75 lines
1.2 KiB
SCSS

.button,
.btn {
display: inline-block;
border: 0;
background-color: var(--color-action-bg);
color: var(--color-action-text);
padding: get-size(300) get-size('base');
line-height: 1;
margin: 0;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
}
.button:hover,
.button:focus {
filter: brightness(1.2);
}
.button:focus:hover,
.btn:focus:hover {
outline: none;
}
.button:focus:not(:hover),
.btn:not(button):focus:not(:hover) {
outline: 1px dotted var(--color-white);
outline-offset: -1rem;
}
.button:active,
.btn:active {
transform: scale(.99);
}
.btn {
display: inline-block;
padding: 1.125rem 2rem;
border: 0;
border-radius: 1.75rem;
line-height: 1.25rem;
text-decoration: none;
font-size: 1.125rem;
font-weight: 600;
&:focus {
outline: none;
}
+ .btn {
margin-left: 2rem;
}
svg {
margin-left: .5rem;
}
&.btn-primary {
color: var(--color-dark);
background-color: var(--color-primary);
font-weight: 700;
&:focus:not(:hover) {
outline-color: var(--color-dark);
}
}
&.btn-secondary {
color: var(--color-white);
background-color: var(--color-secondary);
font-weight: 500;
}
}