dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

button-burger color

Browse source
This commit is contained in:
Raphael Goetter 2017-07-31 21:42:15 +02:00
parent 221ee2f539
commit 1ad445f767
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
sass/_config/_variables.scss
View file

@ -54,6 +54,7 @@ $color-link-hover: $color4;
$brand-primary: $color5; $brand-primary: $color5;
$color-border: $color7; $color-border: $color7;
$color-burger: $color1;
// button, badges, alerts color variants list // button, badges, alerts color variants list
// name - background-color - color - border // name - background-color - color - border

8
sass/components/buttons.scss
View file

@ -100,7 +100,7 @@ button {
height: 2.4rem; height: 2.4rem;
width: 2.8rem; width: 2.8rem;
background-color: transparent; background-color: transparent;
background-image: linear-gradient(to right, currentColor, currentColor); background-image: linear-gradient($color-burger, $color-burger);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 5px; background-size: 100% 5px;
@ -114,6 +114,10 @@ button {
transition-property: transform; transition-property: transform;
will-change: transform; will-change: transform;
& > * {
@extend .visually-hidden;
}
&::before, &::before,
&::after { &::after {
content: ""; content: "";
@ -121,7 +125,7 @@ button {
left: 0; right: 0; left: 0; right: 0;
display: block; display: block;
height: 5px; height: 5px;
background: currentColor; background: $color-burger;
transition: .25s; transition: .25s;
transition-property: transform, top; transition-property: transform, top;
will-change: transform, top; will-change: transform, top;