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

Fix button icon spacing

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 20:02:48 +00:00
parent 0e5c14ac26
commit b016326ac8
6 changed files with 570 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -615,44 +615,64 @@ a.box:active {
color: inherit;
}
.button .icon:first-child {
margin-left: calc(-1px - 0.5rem);
}
.button .icon:last-child {
margin-right: calc(-1px - 0.5rem);
}
.button .icon.is-small:first-child {
margin-left: calc(-1px - 0.25rem);
}
.button .icon.is-small:last-child {
margin-right: calc(-1px - 0.25rem);
}
.button .icon.is-medium:first-child {
margin-left: calc(-1px - 0.75rem);
}
.button .icon.is-medium:last-child {
margin-right: calc(-1px - 0.75rem);
}
.button .icon.is-large:first-child {
margin-left: calc(-1px - 1.25rem);
}
.button .icon.is-large:last-child {
margin-right: calc(-1px - 1.25rem);
}
.button .icon:first-child:not(:last-child) {
margin-right: 0.25rem !important;
margin-left: -0.25rem;
margin-right: 0.5rem;
}
.button .icon:last-child:not(:first-child) {
margin-left: 0.25rem !important;
margin-left: 0.5rem;
margin-right: -0.25rem;
}
.button .icon:first-child:last-child {
margin-left: calc(-1px - 0.5rem);
margin-right: calc(-1px - 0.5rem);
}
.button .icon.is-small:first-child:not(:last-child) {
margin-left: -0.125rem;
margin-right: 0.25rem;
}
.button .icon.is-small:last-child:not(:first-child) {
margin-left: 0.25rem;
margin-right: -0.125rem;
}
.button .icon.is-small:first-child:last-child {
margin-left: calc(-1px - 0.25rem);
margin-right: calc(-1px - 0.25rem);
}
.button .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.375rem;
margin-right: 0.75rem;
}
.button .icon.is-medium:last-child:not(:first-child) {
margin-left: 0.75rem;
margin-right: -0.375rem;
}
.button .icon.is-medium:first-child:last-child {
margin-left: calc(-1px - 0.75rem);
margin-right: calc(-1px - 0.75rem);
}
.button .icon.is-large:first-child:not(:last-child) {
margin-left: -0.625rem;
margin-right: 1.25rem;
}
.button .icon.is-large:last-child:not(:first-child) {
margin-left: 1.25rem;
margin-right: -0.625rem;
}
.button .icon.is-large:first-child:last-child {
margin-left: calc(-1px - 1.25rem);
margin-right: calc(-1px - 1.25rem);
}
.button:hover, .button.is-hovered {
@@ -1148,35 +1168,63 @@ a.box:active {
font-size: 0.75rem;
}
.button.is-small .icon:first-child {
margin-left: calc(-1px - 0.5625rem);
.button.is-small .icon:first-child:not(:last-child) {
margin-left: -0.28125rem;
margin-right: 0.5625rem;
}
.button.is-small .icon:last-child {
.button.is-small .icon:last-child:not(:first-child) {
margin-left: 0.5625rem;
margin-right: -0.28125rem;
}
.button.is-small .icon:first-child:last-child {
margin-left: calc(-1px - 0.5625rem);
margin-right: calc(-1px - 0.5625rem);
}
.button.is-small .icon.is-small:first-child {
margin-left: calc(-1px - 0.3125rem);
.button.is-small .icon.is-small:first-child:not(:last-child) {
margin-left: -0.15625rem;
margin-right: 0.3125rem;
}
.button.is-small .icon.is-small:last-child {
.button.is-small .icon.is-small:last-child:not(:first-child) {
margin-left: 0.3125rem;
margin-right: -0.15625rem;
}
.button.is-small .icon.is-small:first-child:last-child {
margin-left: calc(-1px - 0.3125rem);
margin-right: calc(-1px - 0.3125rem);
}
.button.is-small .icon.is-medium:first-child {
margin-left: calc(-1px - 0.8125rem);
.button.is-small .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.40625rem;
margin-right: 0.8125rem;
}
.button.is-small .icon.is-medium:last-child {
.button.is-small .icon.is-medium:last-child:not(:first-child) {
margin-left: 0.8125rem;
margin-right: -0.40625rem;
}
.button.is-small .icon.is-medium:first-child:last-child {
margin-left: calc(-1px - 0.8125rem);
margin-right: calc(-1px - 0.8125rem);
}
.button.is-small .icon.is-large:first-child {
margin-left: calc(-1px - 1.3125rem);
.button.is-small .icon.is-large:first-child:not(:last-child) {
margin-left: -0.65625rem;
margin-right: 1.3125rem;
}
.button.is-small .icon.is-large:last-child {
.button.is-small .icon.is-large:last-child:not(:first-child) {
margin-left: 1.3125rem;
margin-right: -0.65625rem;
}
.button.is-small .icon.is-large:first-child:last-child {
margin-left: calc(-1px - 1.3125rem);
margin-right: calc(-1px - 1.3125rem);
}
@@ -1184,35 +1232,63 @@ a.box:active {
font-size: 1.25rem;
}
.button.is-medium .icon:first-child {
margin-left: calc(-1px - 0.4375rem);
.button.is-medium .icon:first-child:not(:last-child) {
margin-left: -0.21875rem;
margin-right: 0.4375rem;
}
.button.is-medium .icon:last-child {
.button.is-medium .icon:last-child:not(:first-child) {
margin-left: 0.4375rem;
margin-right: -0.21875rem;
}
.button.is-medium .icon:first-child:last-child {
margin-left: calc(-1px - 0.4375rem);
margin-right: calc(-1px - 0.4375rem);
}
.button.is-medium .icon.is-small:first-child {
margin-left: calc(-1px - 0.1875rem);
.button.is-medium .icon.is-small:first-child:not(:last-child) {
margin-left: -0.09375rem;
margin-right: 0.1875rem;
}
.button.is-medium .icon.is-small:last-child {
.button.is-medium .icon.is-small:last-child:not(:first-child) {
margin-left: 0.1875rem;
margin-right: -0.09375rem;
}
.button.is-medium .icon.is-small:first-child:last-child {
margin-left: calc(-1px - 0.1875rem);
margin-right: calc(-1px - 0.1875rem);
}
.button.is-medium .icon.is-medium:first-child {
margin-left: calc(-1px - 0.6875rem);
.button.is-medium .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.34375rem;
margin-right: 0.6875rem;
}
.button.is-medium .icon.is-medium:last-child {
.button.is-medium .icon.is-medium:last-child:not(:first-child) {
margin-left: 0.6875rem;
margin-right: -0.34375rem;
}
.button.is-medium .icon.is-medium:first-child:last-child {
margin-left: calc(-1px - 0.6875rem);
margin-right: calc(-1px - 0.6875rem);
}
.button.is-medium .icon.is-large:first-child {
margin-left: calc(-1px - 1.1875rem);
.button.is-medium .icon.is-large:first-child:not(:last-child) {
margin-left: -0.59375rem;
margin-right: 1.1875rem;
}
.button.is-medium .icon.is-large:last-child {
.button.is-medium .icon.is-large:last-child:not(:first-child) {
margin-left: 1.1875rem;
margin-right: -0.59375rem;
}
.button.is-medium .icon.is-large:first-child:last-child {
margin-left: calc(-1px - 1.1875rem);
margin-right: calc(-1px - 1.1875rem);
}
@@ -1220,35 +1296,63 @@ a.box:active {
font-size: 1.5rem;
}
.button.is-large .icon:first-child {
margin-left: calc(-1px - 0.375rem);
.button.is-large .icon:first-child:not(:last-child) {
margin-left: -0.1875rem;
margin-right: 0.375rem;
}
.button.is-large .icon:last-child {
.button.is-large .icon:last-child:not(:first-child) {
margin-left: 0.375rem;
margin-right: -0.1875rem;
}
.button.is-large .icon:first-child:last-child {
margin-left: calc(-1px - 0.375rem);
margin-right: calc(-1px - 0.375rem);
}
.button.is-large .icon.is-small:first-child {
margin-left: calc(-1px - 0.125rem);
.button.is-large .icon.is-small:first-child:not(:last-child) {
margin-left: -0.0625rem;
margin-right: 0.125rem;
}
.button.is-large .icon.is-small:last-child {
.button.is-large .icon.is-small:last-child:not(:first-child) {
margin-left: 0.125rem;
margin-right: -0.0625rem;
}
.button.is-large .icon.is-small:first-child:last-child {
margin-left: calc(-1px - 0.125rem);
margin-right: calc(-1px - 0.125rem);
}
.button.is-large .icon.is-medium:first-child {
margin-left: calc(-1px - 0.625rem);
.button.is-large .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.3125rem;
margin-right: 0.625rem;
}
.button.is-large .icon.is-medium:last-child {
.button.is-large .icon.is-medium:last-child:not(:first-child) {
margin-left: 0.625rem;
margin-right: -0.3125rem;
}
.button.is-large .icon.is-medium:first-child:last-child {
margin-left: calc(-1px - 0.625rem);
margin-right: calc(-1px - 0.625rem);
}
.button.is-large .icon.is-large:first-child {
margin-left: calc(-1px - 1.125rem);
.button.is-large .icon.is-large:first-child:not(:last-child) {
margin-left: -0.5625rem;
margin-right: 1.125rem;
}
.button.is-large .icon.is-large:last-child {
.button.is-large .icon.is-large:last-child:not(:first-child) {
margin-left: 1.125rem;
margin-right: -0.5625rem;
}
.button.is-large .icon.is-large:first-child:last-child {
margin-left: calc(-1px - 1.125rem);
margin-right: calc(-1px - 1.125rem);
}
@@ -2060,7 +2164,6 @@ a.box:active {
}
.icon {
background: whitesmoke;
display: inline-block;
font-size: 21px;
height: 1.5rem;
@@ -3602,9 +3705,9 @@ a.box:active {
.nav-toggle {
cursor: pointer;
display: block;
height: 50px;
height: 3rem;
position: relative;
width: 50px;
width: 3rem;
}
.nav-toggle span {
@@ -3668,7 +3771,7 @@ a.box:active {
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
padding: 10px;
padding: 0.5rem 0.75rem;
}
.nav-item a {
@@ -3677,19 +3780,19 @@ a.box:active {
}
.nav-item img {
max-height: 24px;
max-height: 1.5rem;
}
.nav-item .button + .button {
margin-left: 10px;
margin-left: 0.75rem;
}
.nav-item .tag:first-child {
margin-right: 5px;
margin-right: 0.25rem;
}
.nav-item .tag:last-child {
margin-left: 5px;
margin-left: 0.25rem;
}
@media screen and (max-width: 768px) {
@@ -3746,7 +3849,7 @@ a.nav-item.is-tab.is-active {
}
.nav-menu .nav-item {
border-top: 1px solid rgba(219, 219, 219, 0.5);
padding: 10px;
padding: 0.75rem;
}
.nav-menu.is-active {
display: block;
@@ -3755,7 +3858,7 @@ a.nav-item.is-tab.is-active {
@media screen and (min-width: 769px) and (max-width: 979px) {
.nav-menu {
padding-right: 20px;
padding-right: 1.5rem;
}
}
@@ -3794,7 +3897,7 @@ a.nav-item.is-tab.is-active {
align-items: stretch;
background-color: white;
display: flex;
min-height: 50px;
min-height: 3rem;
position: relative;
text-align: center;
z-index: 2;
@@ -3803,7 +3906,7 @@ a.nav-item.is-tab.is-active {
.nav > .container {
align-items: stretch;
display: flex;
min-height: 50px;
min-height: 3rem;
width: 100%;
}
@@ -3830,7 +3933,7 @@ a.nav-item.is-tab.is-active {
@media screen and (max-width: 979px) {
.nav > .container > .nav-left > .nav-item.is-brand:first-child,
.container > .nav > .nav-left > .nav-item.is-brand:first-child {
padding-left: 20px;
padding-left: 1.5rem;
}
}