library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -10,6 +10,7 @@
### Improvements
* #987 Improve `tag > icon` spacing
* Improve `hamburger` alignment
### Issues closed

59
docs/css/bulma-docs.css
View File

@ -4816,7 +4816,7 @@ a.box:active {
width: 100%;
}
.table.is-hoverable tbody tr:hover {
.table.is-hoverable tbody tr:not(.is-selected):hover {
background-color: #fafafa;
}
@ -4961,6 +4961,21 @@ a.box:active {
font-size: 1.25rem;
}
.tag:not(body) .icon:first-child:not(:last-child) {
margin-left: -0.375em;
margin-right: 0.1875em;
}
.tag:not(body) .icon:last-child:not(:first-child) {
margin-left: 0.1875em;
margin-right: -0.375em;
}
.tag:not(body) .icon:first-child:last-child {
margin-left: -0.375em;
margin-right: -0.375em;
}
.tag:not(body).is-delete {
margin-left: 1px;
padding: 0;
@ -6892,29 +6907,31 @@ a.dropdown-item.is-active {
background-color: currentColor;
display: block;
height: 1px;
left: 50%;
margin-left: -7px;
left: calc(50% - 8px);
position: absolute;
top: 50%;
-webkit-transition: none 86ms ease-out;
transition: none 86ms ease-out;
-webkit-transition-property: background, left, opacity, -webkit-transform;
transition-property: background, left, opacity, -webkit-transform;
transition-property: background, left, opacity, transform;
transition-property: background, left, opacity, transform, -webkit-transform;
width: 15px;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition-duration: 86ms;
transition-duration: 86ms;
-webkit-transition-property: background-color, opacity, -webkit-transform;
transition-property: background-color, opacity, -webkit-transform;
transition-property: background-color, opacity, transform;
transition-property: background-color, opacity, transform, -webkit-transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
width: 16px;
}
.navbar-burger span:nth-child(1) {
margin-top: -6px;
top: calc(50% - 6px);
}
.navbar-burger span:nth-child(2) {
margin-top: -1px;
top: calc(50% - 1px);
}
.navbar-burger span:nth-child(3) {
margin-top: 4px;
top: calc(50% + 4px);
}
.navbar-burger:hover {
@ -6922,11 +6939,8 @@ a.dropdown-item.is-active {
}
.navbar-burger.is-active span:nth-child(1) {
margin-left: -5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: translateY(5px) rotate(45deg);
transform: translateY(5px) rotate(45deg);
}
.navbar-burger.is-active span:nth-child(2) {
@ -6934,11 +6948,8 @@ a.dropdown-item.is-active {
}
.navbar-burger.is-active span:nth-child(3) {
margin-left: -5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translateY(-5px) rotate(-45deg);
transform: translateY(-5px) rotate(-45deg);
}
.navbar-menu {

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