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

burger rename

Browse source
This commit is contained in:
Raphael Goetter 2017-09-07 18:52:29 +02:00
parent 5e1c4bced1
commit 57b057a5f5
4 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
css/knacss-unminified.css
View file

@ -2182,7 +2182,7 @@ button:focus {
outline: none; outline: none;
} }
.button-burger { .nav-button {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
outline: 0; outline: 0;
@ -2191,7 +2191,7 @@ button:focus {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.button-burger > * { .nav-button > * {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -2224,7 +2224,7 @@ button:focus {
will-change: transform, background; will-change: transform, background;
} }
.button-burger > *::before, .button-burger > *::after { .nav-button > *::before, .nav-button > *::after {
content: ""; content: "";
height: 5px; height: 5px;
background: #333; background: #333;
@ -2237,23 +2237,23 @@ button:focus {
will-change: transform, top; will-change: transform, top;
} }
.button-burger:hover > * { .nav-button:hover > * {
background-color: transparent; background-color: transparent;
} }
.button-burger.is-active > * { .nav-button.is-active > * {
background-image: none; background-image: none;
-webkit-box-pack: center; -webkit-box-pack: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
} }
.button-burger.is-active > *::before { .nav-button.is-active > *::before {
-webkit-transform: translateY(50%) rotate3d(0, 0, 1, 45deg); -webkit-transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
transform: translateY(50%) rotate3d(0, 0, 1, 45deg); transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
} }
.button-burger.is-active > *::after { .nav-button.is-active > *::after {
-webkit-transform: translateY(-50%) rotate3d(0, 0, 1, -45deg); -webkit-transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
transform: translateY(-50%) rotate3d(0, 0, 1, -45deg); transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
} }

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

2
sass/_config/_variables.scss
View file

@ -74,7 +74,7 @@ $background-tabs : transparent;
$background-tabs-active : transparent; $background-tabs-active : transparent;
$border-radius-tabs : 0; $border-radius-tabs : 0;
// burger button // nav burger button
$color-burger : $color-gray1; $color-burger : $color-gray1;
$background-burger : transparent; $background-burger : transparent;
$background-burger-hover : transparent; $background-burger-hover : transparent;

6
sass/components/_buttons.scss
View file

@ -92,11 +92,11 @@ button {
} }
} }
// burger button // nav "burger" button
// active it with a JS toggle-class to .is-active // active it with a JS toggle-class to .is-active
// recommanded HTML : <button class="button-burger" type="button" role="button" aria-label="open/close navigation"><i></i></button> // recommanded HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
// see doc : https://knacss.com/styleguide.html#buttons // see doc : https://knacss.com/styleguide.html#buttons
.button-burger { .nav-button {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
outline: 0; outline: 0;