KNACSS/sass/components/_button.scss

71 lines
1.2 KiB
SCSS
Raw Normal View History

/*
* basic button component
*/
/*
* HTML template example:
* preferably use <button> for buttons !
* use .button or .btn (for structure) and .btn-- (for variants) (see appearance mixin)
*/
/*
* button reset
*/
%btn {
display: inline-flex;
justify-content: center;
align-items: center;
2022-01-19 17:10:53 +01:00
padding: $spacer-small $spacer-medium;
cursor: pointer;
user-select: none;
transition: 0.25s;
transition-property: box-shadow, background-color, color, border;
text-decoration: none;
border: none;
box-shadow: none;
}
.btn,
.button {
@extend %btn;
&:focus {
-webkit-tap-highlight-color: transparent;
}
}
// button state variants
.btn,
.button {
&--small {
2022-01-19 17:10:53 +01:00
padding: $spacer-micro-plus $spacer-small;
font-size: .8em;
}
&--big {
2022-01-19 17:10:53 +01:00
padding: $spacer-medium $spacer-medium;
font-size: 1.4em;
}
&--block {
width: 100% !important;
display: block;
}
&--unstyled {
padding: 0;
border: none;
text-align: left;
background: none;
border-radius: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
box-shadow: none;
outline: none;
}
}
}