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

refonte burger button

Browse source
This commit is contained in:
Raphael Goetter 2017-09-07 15:11:47 +02:00
parent 4a013641e5
commit 49a0a27f7f
4 changed files with 101 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
css/knacss-unminified.css
View file

@ -1108,7 +1108,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
} }
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ /* hidden but not for an assistive technology like a screen reader, Yahoo! method */
.visually-hidden, .button-burger > *, .checkbox, .radio, .tabs-content-item[aria-hidden="true"] { .visually-hidden, .checkbox, .radio, .tabs-content-item[aria-hidden="true"] {
position: absolute !important; position: absolute !important;
border: 0 !important; border: 0 !important;
height: 1px !important; height: 1px !important;
@ -2183,38 +2183,51 @@ button:focus {
} }
.button-burger { .button-burger {
position: relative;
height: 2.4rem;
width: 2.8rem;
background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
background-image: linear-gradient(#000, #000);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 5px;
padding: 0; padding: 0;
background-color: transparent;
outline: 0; outline: 0;
border: 0; border: 0;
color: #333;
cursor: pointer; cursor: pointer;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-transition: 0.25s cubic-bezier(0.17, 0.67, 0.89, 1.4);
transition: 0.25s cubic-bezier(0.17, 0.67, 0.89, 1.4);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
will-change: transform;
} }
.button-burger::before, .button-burger::after { .button-burger > * {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
height: 2.4rem;
width: 2.4rem;
padding: 0;
background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#333));
background-image: linear-gradient(#333, #333);
background-position: center;
background-repeat: no-repeat;
background-origin: content-box;
background-size: 100% calc(2.4rem * (16 / 100));
-webkit-transition: .25s;
transition: .25s;
-webkit-transition-property: background, -webkit-transform;
transition-property: background, -webkit-transform;
transition-property: transform, background;
transition-property: transform, background, -webkit-transform;
will-change: transform, background;
}
.button-burger > *::before, .button-burger > *::after {
content: ""; content: "";
position: absolute; height: calc(2.4rem * (16 / 100));
left: 0; background: #333;
right: 0;
display: block;
height: 5px;
background: #000;
-webkit-transition: .25s; -webkit-transition: .25s;
transition: .25s; transition: .25s;
-webkit-transition-property: top, -webkit-transform; -webkit-transition-property: top, -webkit-transform;
@ -2224,30 +2237,25 @@ button:focus {
will-change: transform, top; will-change: transform, top;
} }
.button-burger::before { .button-burger:hover > * {
top: 0; background-color: transparent;
} }
.button-burger:after { .button-burger:focus > *, .button-burger.is-active > *, .button-burger.js-active > * {
top: calc(100% - 4px);
}
.button-burger:focus, .button-burger.is-active, .button-burger.js-active {
background-image: none; background-image: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} }
.button-burger:focus::before, .button-burger:focus::after, .button-burger.is-active::before, .button-burger.is-active::after, .button-burger.js-active::before, .button-burger.js-active::after { .button-burger:focus > *::before, .button-burger.is-active > *::before, .button-burger.js-active > *::before {
top: 50%; -webkit-transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
} }
.button-burger:focus::before, .button-burger.is-active::before, .button-burger.js-active::before { .button-burger:focus > *::after, .button-burger.is-active > *::after, .button-burger.js-active > *::after {
-webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 45deg); -webkit-transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
transform: translate3d(0, -50%, 0) 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 {
-webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -45deg);
transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -45deg);
} }
/* ----------------------------- */ /* ----------------------------- */

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

10
sass/_config/_variables.scss
View file

@ -54,7 +54,7 @@ $color-link-hover: $color-dark;
$color-forms : $color-gray3; $color-forms : $color-gray3;
$color-burger : $color-dark; $color-burger : $color-dark;
// button, badges, alerts color variants list // buttons, badges, alerts color variants list
// name - background-color - color - border // name - background-color - color - border
$variants-list: ( $variants-list: (
(primary, $color-primary, $color-light, none), (primary, $color-primary, $color-light, none),
@ -66,6 +66,14 @@ $variants-list: (
(ghost, $color-ghost, $color-light, 0 0 0 1px $color-light inset) (ghost, $color-ghost, $color-light, 0 0 0 1px $color-light inset)
); );
// burger button
$color-burger : $color-gray1;
$background-burger : transparent;
$background-burger-hover : transparent;
$size-burger : 2.4rem;
$weight-burger : 16; // sort of percentage
$padding-burger : 0;
// spacings (choose unit you prefer) // spacings (choose unit you prefer)
$tiny-value : .5rem ; // tiny value for margins / paddings $tiny-value : .5rem ; // tiny value for margins / paddings
$tiny-plus-value : .7rem ; // tiny+ value for margins / paddings $tiny-plus-value : .7rem ; // tiny+ value for margins / paddings

82
sass/components/_buttons.scss
View file

@ -94,64 +94,64 @@ button {
// burger button // burger button
// active it with :focus, .is-active or .js-active // active it with :focus, .is-active or .js-active
// recommanded HTML : <button class="button-burger" type="button" role="button" aria-label="open/close navigation"><i></i></button>
.button-burger { .button-burger {
position: relative;
height: 2.4rem;
width: 2.8rem;
background-color: transparent;
background-image: linear-gradient($color-burger, $color-burger);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 5px;
padding: 0; padding: 0;
background-color: transparent;
outline: 0; outline: 0;
border: 0; border: 0;
color: #333;
cursor: pointer; cursor: pointer;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
transition: .25s cubic-bezier(.17,.67,.89,1.4);
transition-property: transform;
will-change: transform;
& > * { & > * {
@extend .visually-hidden; display: flex;
} flex-direction: column;
justify-content: space-between;
&::before, align-items: stretch;
&::after { height: $size-burger;
content: ""; width: $size-burger;
position: absolute; padding: $padding-burger;
left: 0; right: 0; background-color: $background-burger;
display: block; background-image: linear-gradient($color-burger, $color-burger);
height: 5px; background-position: center;
background: $color-burger; background-repeat: no-repeat;
background-origin: content-box;
background-size: 100% calc(#{$size-burger} * (#{$weight-burger} / 100));
transition: .25s; transition: .25s;
transition-property: transform, top; transition-property: transform, background;
will-change: transform, top; will-change: transform, background;
&::before,
&::after {
content: "";
height: calc(#{$size-burger} * (#{$weight-burger} / 100));
background: $color-burger;
transition: .25s;
transition-property: transform, top;
will-change: transform, top;
}
} }
&::before { &:hover {
top: 0; & > * {
} background-color: $background-burger-hover;
}
&:after {
top: calc(100% - 4px);
} }
&:focus, &:focus,
&.is-active, &.is-active,
&.js-active { &.js-active {
background-image: none;
&::before, & > * {
&::after { background-image: none;
top: 50%; justify-content: center;
}
&::before { &::before {
transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg); transform: translateY(50%) rotate3d(0,0,1,45deg);
} }
&::after { &::after {
transform: translate3d(0,-50%,0) rotate3d(0,0,1,-45deg); transform: translateY(-50%) rotate3d(0,0,1,-45deg);
}
} }
} }
} }