refonte burger button
This commit is contained in:
Raphael Goetter
parent
4a013641e5
commit
49a0a27f7f
4 changed files with 101 additions and 85 deletions
|
|
@ -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 */
|
||||
.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;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
|
|
@ -2183,38 +2183,51 @@ button:focus {
|
|||
}
|
||||
|
||||
.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;
|
||||
background-color: transparent;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
-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: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
height: 5px;
|
||||
background: #000;
|
||||
height: calc(2.4rem * (16 / 100));
|
||||
background: #333;
|
||||
-webkit-transition: .25s;
|
||||
transition: .25s;
|
||||
-webkit-transition-property: top, -webkit-transform;
|
||||
|
|
@ -2224,30 +2237,25 @@ button:focus {
|
|||
will-change: transform, top;
|
||||
}
|
||||
|
||||
.button-burger::before {
|
||||
top: 0;
|
||||
.button-burger:hover > * {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.button-burger:after {
|
||||
top: calc(100% - 4px);
|
||||
}
|
||||
|
||||
.button-burger:focus, .button-burger.is-active, .button-burger.js-active {
|
||||
.button-burger:focus > *, .button-burger.is-active > *, .button-burger.js-active > * {
|
||||
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 {
|
||||
top: 50%;
|
||||
.button-burger:focus > *::before, .button-burger.is-active > *::before, .button-burger.js-active > *::before {
|
||||
-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 {
|
||||
-webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 45deg);
|
||||
transform: translate3d(0, -50%, 0) 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);
|
||||
.button-burger:focus > *::after, .button-burger.is-active > *::after, .button-burger.js-active > *::after {
|
||||
-webkit-transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
|
||||
transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -54,7 +54,7 @@ $color-link-hover: $color-dark;
|
|||
$color-forms : $color-gray3;
|
||||
$color-burger : $color-dark;
|
||||
|
||||
// button, badges, alerts color variants list
|
||||
// buttons, badges, alerts color variants list
|
||||
// name - background-color - color - border
|
||||
$variants-list: (
|
||||
(primary, $color-primary, $color-light, none),
|
||||
|
|
@ -66,6 +66,14 @@ $variants-list: (
|
|||
(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)
|
||||
$tiny-value : .5rem ; // tiny value for margins / paddings
|
||||
$tiny-plus-value : .7rem ; // tiny+ value for margins / paddings
|
||||
|
|
|
|||
|
|
@ -94,64 +94,64 @@ button {
|
|||
|
||||
// burger button
|
||||
// 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 {
|
||||
position: relative;
|
||||
height: 2.4rem;
|
||||
width: 2.8rem;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
& > * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: $size-burger;
|
||||
width: $size-burger;
|
||||
padding: $padding-burger;
|
||||
background-color: $background-burger;
|
||||
background-image: linear-gradient($color-burger, $color-burger);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 5px;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: .25s cubic-bezier(.17,.67,.89,1.4);
|
||||
transition-property: transform;
|
||||
will-change: transform;
|
||||
|
||||
& > * {
|
||||
@extend .visually-hidden;
|
||||
}
|
||||
background-origin: content-box;
|
||||
background-size: 100% calc(#{$size-burger} * (#{$weight-burger} / 100));
|
||||
transition: .25s;
|
||||
transition-property: transform, background;
|
||||
will-change: transform, background;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
display: block;
|
||||
height: 5px;
|
||||
height: calc(#{$size-burger} * (#{$weight-burger} / 100));
|
||||
background: $color-burger;
|
||||
transition: .25s;
|
||||
transition-property: transform, top;
|
||||
will-change: transform, top;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: calc(100% - 4px);
|
||||
&:hover {
|
||||
& > * {
|
||||
background-color: $background-burger-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.is-active,
|
||||
&.js-active {
|
||||
background-image: none;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
}
|
||||
& > * {
|
||||
background-image: none;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
|
||||
transform: translateY(50%) rotate3d(0,0,1,45deg);
|
||||
}
|
||||
&::after {
|
||||
transform: translate3d(0,-50%,0) rotate3d(0,0,1,-45deg);
|
||||
transform: translateY(-50%) rotate3d(0,0,1,-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue