KNACSS/sass/components/_buttons.scss

166 lines
3.5 KiB
SCSS
Raw Normal View History

2017-07-31 13:24:04 +02:00
/* ----------------------------- */
/* ==Buttons */
/* ----------------------------- */
/* preferably use <button> for buttons !*/
/* use .btn-- or .button-- classes for variants */
$burger-color : $gray-800 !default;
$burger-background : transparent !default;
$burger-hover-background : transparent !default;
$burger-size : 2.6rem !default;
$burger-weight : 5px !default; // size of stripes
$burger-padding : 0 !default;
2017-07-31 13:24:04 +02:00
%btn {
display: inline-block;
padding: $spacer-small $spacer-small-plus;
2017-07-31 13:24:04 +02:00
cursor: pointer;
user-select: none;
2017-07-31 15:49:38 +02:00
transition: 0.25s;
2017-07-31 13:24:04 +02:00
transition-property: box-shadow, background-color, color, border;
2017-07-31 15:49:38 +02:00
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
color: $color-base;
border: none;
border-radius: $border-radius;
background-color: $color-muted;
font-family: inherit;
font-size: inherit;
line-height: 1;
2017-07-31 13:24:04 +02:00
}
.btn,
.button,
[type="button"],
button {
@extend %btn;
&:focus {
-webkit-tap-highlight-color: transparent;
}
}
2017-07-31 14:00:06 +02:00
2017-07-31 13:24:04 +02:00
.btn,
.button {
2017-07-31 15:49:38 +02:00
@each $name, $background-color, $color, $border in $variants-list {
2017-07-31 14:00:06 +02:00
&--#{$name} {
2017-07-31 13:24:04 +02:00
@extend %btn;
2017-07-31 14:00:06 +02:00
background-color: $background-color;
color: $color;
box-shadow: $border;
2017-07-31 13:24:04 +02:00
&:active,
&:focus,
&:hover {
2017-07-31 14:00:06 +02:00
background-color: darken( $background-color, 10% );
2017-07-31 13:24:04 +02:00
}
}
}
}
2017-07-31 14:00:06 +02:00
2017-07-31 13:24:04 +02:00
// button state variants
.btn,
.button {
&--small {
padding: $spacer-tiny-plus $spacer-small;
2017-08-01 16:13:25 +02:00
font-size: .8em;
2017-07-31 13:24:04 +02:00
}
&--big {
padding: $spacer-small-plus $spacer-medium;
2017-08-01 16:13:25 +02:00
font-size: 1.4em;
2017-07-31 13:24:04 +02:00
}
&--block {
width: 100% !important;
display: block;
}
2017-08-01 14:47:57 +02:00
2017-07-31 15:49:38 +02:00
&--unstyled {
2017-07-31 13:24:04 +02:00
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;
}
}
}
2017-07-31 21:31:56 +02:00
2017-09-07 18:52:29 +02:00
// nav "burger" button
2018-05-11 19:53:09 +02:00
// activate it with a JS toggle-class to .is-active
// recommended HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
2017-09-07 17:07:19 +02:00
// see doc : https://knacss.com/styleguide.html#buttons
2017-09-07 18:52:29 +02:00
.nav-button {
2017-07-31 21:31:56 +02:00
padding: 0;
2017-09-07 15:11:47 +02:00
background-color: transparent;
2017-07-31 21:31:56 +02:00
outline: 0;
border: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
2017-07-31 21:42:15 +02:00
& > * {
display: inline-flex;
vertical-align: top;
2017-09-07 15:11:47 +02:00
flex-direction: column;
justify-content: space-between;
align-items: stretch;
2017-09-26 11:42:46 +02:00
height: $burger-size;
width: $burger-size;
padding: $burger-padding;
background-color: $burger-background;
background-image: linear-gradient($burger-color, $burger-color);
2017-09-07 15:11:47 +02:00
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;
2017-09-26 11:42:46 +02:00
background-size: 100% $burger-weight;
2017-07-31 21:31:56 +02:00
transition: .25s;
2017-09-07 15:11:47 +02:00
transition-property: transform, background;
will-change: transform, background;
2017-07-31 21:31:56 +02:00
2017-09-07 15:11:47 +02:00
&::before,
&::after {
content: "";
2017-09-26 11:42:46 +02:00
height: $burger-weight;
background: $burger-color;
2017-09-07 15:11:47 +02:00
transition: .25s;
transition-property: transform, top;
will-change: transform, top;
}
2017-07-31 21:31:56 +02:00
}
2017-09-07 15:11:47 +02:00
&:hover {
& > * {
2017-09-26 11:42:46 +02:00
background-color: $burger-hover-background;
2017-09-07 15:11:47 +02:00
}
2017-07-31 21:31:56 +02:00
}
2017-10-31 12:33:55 +01:00
&:focus {
outline: 0;
}
2017-09-07 17:07:19 +02:00
&.is-active {
2017-09-07 15:11:47 +02:00
& > * {
background-image: none;
justify-content: center;
&::before {
transform: translateY(50%) rotate3d(0,0,1,45deg);
}
2018-05-11 19:53:09 +02:00
2017-09-07 15:11:47 +02:00
&::after {
transform: translateY(-50%) rotate3d(0,0,1,-45deg);
}
2017-07-31 21:31:56 +02:00
}
}
}