KNACSS/sass/components/_buttons.scss

157 lines
3.3 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 */
%btn {
display: inline-block;
2017-08-01 14:47:57 +02:00
padding: $small-value $small-plus-value;
2017-07-31 13:24:04 +02:00
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
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 {
2017-08-01 16:13:25 +02:00
padding: $tiny-plus-value $small-value;
font-size: .8em;
2017-07-31 13:24:04 +02:00
}
&--big {
2017-08-01 16:13:25 +02:00
padding: $small-plus-value $medium-value;
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
// burger button
2017-09-07 17:07:19 +02:00
// active it with a JS toggle-class to .is-active
2017-09-07 15:11:47 +02:00
// recommanded HTML : <button class="button-burger" 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-07-31 21:31:56 +02:00
.button-burger {
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
& > * {
2017-09-07 15:11:47 +02:00
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: $size-burger;
width: $size-burger;
padding: $padding-burger;
background-color: $background-burger;
background-image: linear-gradient($color-burger, $color-burger);
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;
2017-09-07 18:48:39 +02:00
background-size: 100% $weight-burger;
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-07 18:48:39 +02:00
height: $weight-burger;
2017-09-07 15:11:47 +02:00
background: $color-burger;
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 {
& > * {
background-color: $background-burger-hover;
}
2017-07-31 21:31:56 +02:00
}
2017-09-07 17:07:19 +02:00
&.is-active {
2017-07-31 21:31:56 +02:00
2017-09-07 15:11:47 +02:00
& > * {
background-image: none;
justify-content: center;
&::before {
transform: translateY(50%) rotate3d(0,0,1,45deg);
}
&::after {
transform: translateY(-50%) rotate3d(0,0,1,-45deg);
}
2017-07-31 21:31:56 +02:00
}
}
}