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

Remove icon spacing logic

Browse Source
This commit is contained in:
Jeremy Thomas
2017-03-12 14:13:08 +00:00
parent 3384082ddf
commit 6ac14c316f
7 changed files with 157 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -580,11 +580,13 @@ a.box:active {
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.285em;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-left: 0.75em;
padding-right: 0.75em;
padding-bottom: 0.375em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
position: relative;
vertical-align: top;
-webkit-touch-callout: none;
@@ -615,58 +617,24 @@ a.box:active {
color: inherit;
}
.button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large {
height: 1.5em;
width: 1.5em;
}
.button .icon:first-child:not(:last-child) {
margin-left: -0.25rem;
margin-right: 0.5rem;
margin-left: calc(-0.375em - 1px);
margin-right: 0.375em;
}
.button .icon:last-child:not(:first-child) {
margin-left: 0.5rem;
margin-right: -0.25rem;
margin-left: 0.375em;
margin-right: calc(-0.375em - 1px);
}
.button .icon:first-child:last-child {
margin-left: calc(-1px + -0.25rem);
margin-right: calc(-1px + -0.25rem);
}
.button .icon.is-small:first-child:not(:last-child) {
margin-left: 0rem;
}
.button .icon.is-small:last-child:not(:first-child) {
margin-right: 0rem;
}
.button .icon.is-small:first-child:last-child {
margin-left: calc(-1px + 0rem);
margin-right: calc(-1px + 0rem);
}
.button .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.5rem;
}
.button .icon.is-medium:last-child:not(:first-child) {
margin-right: -0.5rem;
}
.button .icon.is-medium:first-child:last-child {
margin-left: calc(-1px + -0.5rem);
margin-right: calc(-1px + -0.5rem);
}
.button .icon.is-large:first-child:not(:last-child) {
margin-left: -1rem;
}
.button .icon.is-large:last-child:not(:first-child) {
margin-right: -1rem;
}
.button .icon.is-large:first-child:last-child {
margin-left: calc(-1px + -1rem);
margin-right: calc(-1px + -1rem);
margin-left: calc(-0.375em - 1px);
margin-right: calc(-0.375em - 1px);
}
.button:hover, .button.is-hovered {
@@ -1288,176 +1256,14 @@ a.box:active {
font-size: 0.75rem;
}
.button.is-small .icon:first-child:not(:last-child) {
margin-left: -0.375rem;
margin-right: 0.375rem;
}
.button.is-small .icon:last-child:not(:first-child) {
margin-left: 0.375rem;
margin-right: -0.375rem;
}
.button.is-small .icon:first-child:last-child {
margin-left: calc(-1px + -0.375rem);
margin-right: calc(-1px + -0.375rem);
}
.button.is-small .icon.is-small:first-child:not(:last-child) {
margin-left: -0.125rem;
}
.button.is-small .icon.is-small:last-child:not(:first-child) {
margin-right: -0.125rem;
}
.button.is-small .icon.is-small:first-child:last-child {
margin-left: calc(-1px + -0.125rem);
margin-right: calc(-1px + -0.125rem);
}
.button.is-small .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.625rem;
}
.button.is-small .icon.is-medium:last-child:not(:first-child) {
margin-right: -0.625rem;
}
.button.is-small .icon.is-medium:first-child:last-child {
margin-left: calc(-1px + -0.625rem);
margin-right: calc(-1px + -0.625rem);
}
.button.is-small .icon.is-large:first-child:not(:last-child) {
margin-left: -1.125rem;
}
.button.is-small .icon.is-large:last-child:not(:first-child) {
margin-right: -1.125rem;
}
.button.is-small .icon.is-large:first-child:last-child {
margin-left: calc(-1px + -1.125rem);
margin-right: calc(-1px + -1.125rem);
}
.button.is-medium {
font-size: 1.25rem;
}
.button.is-medium .icon:first-child:not(:last-child) {
margin-left: -0.125rem;
margin-right: 0.625rem;
}
.button.is-medium .icon:last-child:not(:first-child) {
margin-left: 0.625rem;
margin-right: -0.125rem;
}
.button.is-medium .icon:first-child:last-child {
margin-left: calc(-1px + -0.125rem);
margin-right: calc(-1px + -0.125rem);
}
.button.is-medium .icon.is-small:first-child:not(:last-child) {
margin-left: 0.125rem;
}
.button.is-medium .icon.is-small:last-child:not(:first-child) {
margin-right: 0.125rem;
}
.button.is-medium .icon.is-small:first-child:last-child {
margin-left: calc(-1px + 0.125rem);
margin-right: calc(-1px + 0.125rem);
}
.button.is-medium .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.375rem;
}
.button.is-medium .icon.is-medium:last-child:not(:first-child) {
margin-right: -0.375rem;
}
.button.is-medium .icon.is-medium:first-child:last-child {
margin-left: calc(-1px + -0.375rem);
margin-right: calc(-1px + -0.375rem);
}
.button.is-medium .icon.is-large:first-child:not(:last-child) {
margin-left: -0.875rem;
}
.button.is-medium .icon.is-large:last-child:not(:first-child) {
margin-right: -0.875rem;
}
.button.is-medium .icon.is-large:first-child:last-child {
margin-left: calc(-1px + -0.875rem);
margin-right: calc(-1px + -0.875rem);
}
.button.is-large {
font-size: 1.5rem;
}
.button.is-large .icon:first-child:not(:last-child) {
margin-left: 0rem;
margin-right: 0.75rem;
}
.button.is-large .icon:last-child:not(:first-child) {
margin-left: 0.75rem;
margin-right: 0rem;
}
.button.is-large .icon:first-child:last-child {
margin-left: calc(-1px + 0rem);
margin-right: calc(-1px + 0rem);
}
.button.is-large .icon.is-small:first-child:not(:last-child) {
margin-left: 0.25rem;
}
.button.is-large .icon.is-small:last-child:not(:first-child) {
margin-right: 0.25rem;
}
.button.is-large .icon.is-small:first-child:last-child {
margin-left: calc(-1px + 0.25rem);
margin-right: calc(-1px + 0.25rem);
}
.button.is-large .icon.is-medium:first-child:not(:last-child) {
margin-left: -0.25rem;
}
.button.is-large .icon.is-medium:last-child:not(:first-child) {
margin-right: -0.25rem;
}
.button.is-large .icon.is-medium:first-child:last-child {
margin-left: calc(-1px + -0.25rem);
margin-right: calc(-1px + -0.25rem);
}
.button.is-large .icon.is-large:first-child:not(:last-child) {
margin-left: -0.75rem;
}
.button.is-large .icon.is-large:last-child:not(:first-child) {
margin-right: -0.75rem;
}
.button.is-large .icon.is-large:first-child:last-child {
margin-left: calc(-1px + -0.75rem);
margin-right: calc(-1px + -0.75rem);
}
.button[disabled], .button.is-disabled {
opacity: 0.5;
}
@@ -1653,11 +1459,13 @@ a.box:active {
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.285em;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-left: 0.75em;
padding-right: 0.75em;
padding-bottom: 0.375em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
position: relative;
vertical-align: top;
background-color: white;
@@ -1814,7 +1622,7 @@ a.box:active {
max-width: 100%;
min-height: 120px;
min-width: 100%;
padding: 10px;
padding: 0.625em;
resize: vertical;
}
@@ -1857,7 +1665,7 @@ a.box:active {
.select {
display: inline-block;
height: 2.5em;
height: 2.25em;
position: relative;
vertical-align: top;
}
@@ -1888,11 +1696,13 @@ a.box:active {
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.285em;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-left: 0.75em;
padding-right: 0.75em;
padding-bottom: 0.375em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
position: relative;
vertical-align: top;
background-color: white;
@@ -2138,9 +1948,11 @@ a.box:active {
.control.has-icon .icon {
color: #dbdbdb;
height: 2.25em;
pointer-events: none;
position: absolute;
top: 1.25rem;
top: 0;
width: 2.25em;
z-index: 4;
}
@@ -2149,57 +1961,31 @@ a.box:active {
}
.control.has-icon .input.is-small + .icon {
top: 0.9375rem;
font-size: 0.75rem;
}
.control.has-icon .input.is-medium + .icon {
top: 1.5625rem;
font-size: 1.25rem;
}
.control.has-icon .input.is-large + .icon {
top: 1.875rem;
font-size: 1.5rem;
}
.control.has-icon:not(.has-icon-right) .icon {
left: 1.25rem;
transform: translateX(-50%) translateY(-50%);
left: 0;
}
.control.has-icon:not(.has-icon-right) .input {
padding-left: 2.5em;
}
.control.has-icon:not(.has-icon-right) .input.is-small + .icon {
left: 0.9375rem;
}
.control.has-icon:not(.has-icon-right) .input.is-medium + .icon {
left: 1.5625rem;
}
.control.has-icon:not(.has-icon-right) .input.is-large + .icon {
left: 1.875rem;
padding-left: 2.25em;
}
.control.has-icon.has-icon-right .icon {
right: 1.25rem;
transform: translateX(50%) translateY(-50%);
right: 0;
}
.control.has-icon.has-icon-right .input {
padding-right: 2.5em;
}
.control.has-icon.has-icon-right .input.is-small + .icon {
right: 0.9375rem;
}
.control.has-icon.has-icon-right .input.is-medium + .icon {
right: 1.5625rem;
}
.control.has-icon.has-icon-right .input.is-large + .icon {
right: 1.875rem;
padding-right: 2.25em;
}
.control.is-grouped {
@@ -2259,50 +2045,46 @@ a.box:active {
}
.icon {
display: inline-block;
font-size: 21px;
align-items: center;
background-color: coral;
display: inline-flex;
justify-content: center;
height: 1.5rem;
line-height: 1.5rem;
text-align: center;
vertical-align: top;
width: 1.5rem;
}
.icon .fa {
font-size: inherit;
line-height: inherit;
font-size: 21px;
}
.icon.is-small {
display: inline-block;
font-size: 14px;
height: 1rem;
line-height: 1rem;
text-align: center;
vertical-align: top;
width: 1rem;
}
.icon.is-small .fa {
font-size: 14px;
}
.icon.is-medium {
display: inline-block;
font-size: 28px;
height: 2rem;
line-height: 2rem;
text-align: center;
vertical-align: top;
width: 2rem;
}
.icon.is-medium .fa {
font-size: 28px;
}
.icon.is-large {
display: inline-block;
font-size: 42px;
height: 3rem;
line-height: 3rem;
text-align: center;
vertical-align: top;
width: 3rem;
}
.icon.is-large .fa {
font-size: 42px;
}
.image {
display: block;
position: relative;
@@ -2779,7 +2561,7 @@ a.box:active {
}
.title.is-6 {
font-size: 14px;
font-size: 1rem;
}
.subtitle {
@@ -2818,7 +2600,7 @@ a.box:active {
}
.subtitle.is-6 {
font-size: 14px;
font-size: 1rem;
}
.block:not(:last-child) {
@@ -2860,13 +2642,13 @@ a.box:active {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 20px;
height: 0px;
outline: none;
position: relative;
transform: rotate(45deg);
transform-origin: center center;
vertical-align: top;
width: 20px;
width: 0px;
}
.delete:before, .delete:after {
@@ -2898,18 +2680,18 @@ a.box:active {
}
.delete.is-small {
height: 14px;
width: 14px;
height: 0px;
width: 0px;
}
.delete.is-medium {
height: 26px;
width: 26px;
height: 0px;
width: 0px;
}
.delete.is-large {
height: 30px;
width: 30px;
height: 2px;
width: 2px;
}
.fa {
@@ -3485,13 +3267,13 @@ a.box:active {
cursor: pointer;
display: inline-block;
font-size: 1rem;
height: 20px;
height: 0px;
outline: none;
position: relative;
transform: rotate(45deg);
transform-origin: center center;
vertical-align: top;
width: 20px;
width: 0px;
background: none;
height: 40px;
position: fixed;
@@ -3529,18 +3311,18 @@ a.box:active {
}
.modal-close.is-small {
height: 14px;
width: 14px;
height: 0px;
width: 0px;
}
.modal-close.is-medium {
height: 26px;
width: 26px;
height: 0px;
width: 0px;
}
.modal-close.is-large {
height: 30px;
width: 30px;
height: 2px;
width: 2px;
}
.modal-card {
@@ -3859,11 +3641,13 @@ a.nav-item.is-tab.is-active {
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.285em;
height: 2.25em;
justify-content: flex-start;
line-height: 1.5;
padding-left: 0.75em;
padding-right: 0.75em;
padding-bottom: 0.375em;
padding-left: 0.625em;
padding-right: 0.625em;
padding-top: 0.375em;
position: relative;
vertical-align: top;
-webkit-touch-callout: none;