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 ### Improvements
* #987 Improve `tag > icon` spacing * #987 Improve `tag > icon` spacing
* Improve `hamburger` alignment
### Issues closed ### Issues closed

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

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

26
sass/utilities/mixins.sass
View File

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