Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Improve hamburger alignment

Browse Source
This commit is contained in:
Jeremy Thomas
2017-10-18 11:27:51 +01:00
parent 4bc5180c80
commit ff732c9aad
3 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
sass/utilities/mixins.sass
View File

@@ -115,34 +115,30 @@
background-color: currentColor
display: block
height: 1px
left: 50%
margin-left: -7px
left: calc(50% - 8px)
position: absolute
top: 50%
transition: none $speed $easing
transition-property: background, left, opacity, transform
width: 15px
transform-origin: center
transition-duration: $speed
transition-property: background-color, opacity, transform
transition-timing-function: $easing
width: 16px
&:nth-child(1)
margin-top: -6px
top: calc(50% - 6px)
&:nth-child(2)
margin-top: -1px
top: calc(50% - 1px)
&:nth-child(3)
margin-top: 4px
top: calc(50% + 4px)
&:hover
background-color: rgba(black, 0.05)
// Modifers
&.is-active
span
&:nth-child(1)
margin-left: -5px
transform: rotate(45deg)
transform-origin: left top
transform: translateY(5px) rotate(45deg)
&:nth-child(2)
opacity: 0
&:nth-child(3)
margin-left: -5px
transform: rotate(-45deg)
transform-origin: left bottom
transform: translateY(-5px) rotate(-45deg)
=loader
animation: spinAround 500ms infinite linear