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

Burger JS add-ons

This commit is contained in:
Raphael Goetter 2017-09-07 17:07:19 +02:00
parent b0030aeec2
commit 0f91666bbc
3 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/knacss-unminified.css
View File

@ -2241,19 +2241,19 @@ button:focus {
background-color: transparent;
}
.button-burger:focus > *, .button-burger.is-active > *, .button-burger.js-active > * {
.button-burger.is-active > * {
background-image: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.button-burger:focus > *::before, .button-burger.is-active > *::before, .button-burger.js-active > *::before {
.button-burger.is-active > *::before {
-webkit-transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
}
.button-burger:focus > *::after, .button-burger.is-active > *::after, .button-burger.js-active > *::after {
.button-burger.is-active > *::after {
-webkit-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

7
sass/components/_buttons.scss
View File

@ -93,8 +93,9 @@ button {
}
// burger button
// active it with :focus, .is-active or .js-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>
// see doc : https://knacss.com/styleguide.html#buttons
.button-burger {
padding: 0;
background-color: transparent;
@ -138,9 +139,7 @@ button {
}
}
&:focus,
&.is-active,
&.js-active {
&.is-active {
& > * {
background-image: none;