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; background-color: transparent;
} }
.button-burger:focus > *, .button-burger.is-active > *, .button-burger.js-active > * { .button-burger.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: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); -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: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); -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

7
sass/components/_buttons.scss
View File

@ -93,8 +93,9 @@ button {
} }
// burger 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> // 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 { .button-burger {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
@ -138,9 +139,7 @@ button {
} }
} }
&:focus, &.is-active {
&.is-active,
&.js-active {
& > * { & > * {
background-image: none; background-image: none;