mirror of
https://github.com/jgthms/bulma
synced 2026-03-21 20:54:30 -07:00
Remove icon spacing logic
This commit is contained in:
Jeremy Thomas
@@ -580,11 +580,13 @@ a.box:active {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
height: 2.285em;
|
height: 2.25em;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding-left: 0.75em;
|
padding-bottom: 0.375em;
|
||||||
padding-right: 0.75em;
|
padding-left: 0.625em;
|
||||||
|
padding-right: 0.625em;
|
||||||
|
padding-top: 0.375em;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
@@ -615,58 +617,24 @@ a.box:active {
|
|||||||
color: inherit;
|
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) {
|
.button .icon:first-child:not(:last-child) {
|
||||||
margin-left: -0.25rem;
|
margin-left: calc(-0.375em - 1px);
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.375em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button .icon:last-child:not(:first-child) {
|
.button .icon:last-child:not(:first-child) {
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.375em;
|
||||||
margin-right: -0.25rem;
|
margin-right: calc(-0.375em - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button .icon:first-child:last-child {
|
.button .icon:first-child:last-child {
|
||||||
margin-left: calc(-1px + -0.25rem);
|
margin-left: calc(-0.375em - 1px);
|
||||||
margin-right: calc(-1px + -0.25rem);
|
margin-right: calc(-0.375em - 1px);
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover, .button.is-hovered {
|
.button:hover, .button.is-hovered {
|
||||||
@@ -1288,176 +1256,14 @@ a.box:active {
|
|||||||
font-size: 0.75rem;
|
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 {
|
.button.is-medium {
|
||||||
font-size: 1.25rem;
|
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 {
|
.button.is-large {
|
||||||
font-size: 1.5rem;
|
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 {
|
.button[disabled], .button.is-disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
@@ -1653,11 +1459,13 @@ a.box:active {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
height: 2.285em;
|
height: 2.25em;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding-left: 0.75em;
|
padding-bottom: 0.375em;
|
||||||
padding-right: 0.75em;
|
padding-left: 0.625em;
|
||||||
|
padding-right: 0.625em;
|
||||||
|
padding-top: 0.375em;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@@ -1814,7 +1622,7 @@ a.box:active {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
padding: 10px;
|
padding: 0.625em;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1857,7 +1665,7 @@ a.box:active {
|
|||||||
|
|
||||||
.select {
|
.select {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 2.5em;
|
height: 2.25em;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
@@ -1888,11 +1696,13 @@ a.box:active {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
height: 2.285em;
|
height: 2.25em;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding-left: 0.75em;
|
padding-bottom: 0.375em;
|
||||||
padding-right: 0.75em;
|
padding-left: 0.625em;
|
||||||
|
padding-right: 0.625em;
|
||||||
|
padding-top: 0.375em;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@@ -2138,9 +1948,11 @@ a.box:active {
|
|||||||
|
|
||||||
.control.has-icon .icon {
|
.control.has-icon .icon {
|
||||||
color: #dbdbdb;
|
color: #dbdbdb;
|
||||||
|
height: 2.25em;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1.25rem;
|
top: 0;
|
||||||
|
width: 2.25em;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2149,57 +1961,31 @@ a.box:active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.control.has-icon .input.is-small + .icon {
|
.control.has-icon .input.is-small + .icon {
|
||||||
top: 0.9375rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control.has-icon .input.is-medium + .icon {
|
.control.has-icon .input.is-medium + .icon {
|
||||||
top: 1.5625rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control.has-icon .input.is-large + .icon {
|
.control.has-icon .input.is-large + .icon {
|
||||||
top: 1.875rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control.has-icon:not(.has-icon-right) .icon {
|
.control.has-icon:not(.has-icon-right) .icon {
|
||||||
left: 1.25rem;
|
left: 0;
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control.has-icon:not(.has-icon-right) .input {
|
.control.has-icon:not(.has-icon-right) .input {
|
||||||
padding-left: 2.5em;
|
padding-left: 2.25em;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control.has-icon.has-icon-right .icon {
|
.control.has-icon.has-icon-right .icon {
|
||||||
right: 1.25rem;
|
right: 0;
|
||||||
transform: translateX(50%) translateY(-50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control.has-icon.has-icon-right .input {
|
.control.has-icon.has-icon-right .input {
|
||||||
padding-right: 2.5em;
|
padding-right: 2.25em;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control.is-grouped {
|
.control.is-grouped {
|
||||||
@@ -2259,50 +2045,46 @@ a.box:active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
display: inline-block;
|
align-items: center;
|
||||||
font-size: 21px;
|
background-color: coral;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
line-height: 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon .fa {
|
.icon .fa {
|
||||||
font-size: inherit;
|
font-size: 21px;
|
||||||
line-height: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.is-small {
|
.icon.is-small {
|
||||||
display: inline-block;
|
|
||||||
font-size: 14px;
|
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
line-height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon.is-small .fa {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.icon.is-medium {
|
.icon.is-medium {
|
||||||
display: inline-block;
|
|
||||||
font-size: 28px;
|
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
line-height: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon.is-medium .fa {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
.icon.is-large {
|
.icon.is-large {
|
||||||
display: inline-block;
|
|
||||||
font-size: 42px;
|
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
line-height: 3rem;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon.is-large .fa {
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -2779,7 +2561,7 @@ a.box:active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title.is-6 {
|
.title.is-6 {
|
||||||
font-size: 14px;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
@@ -2818,7 +2600,7 @@ a.box:active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.subtitle.is-6 {
|
.subtitle.is-6 {
|
||||||
font-size: 14px;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block:not(:last-child) {
|
.block:not(:last-child) {
|
||||||
@@ -2860,13 +2642,13 @@ a.box:active {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
height: 20px;
|
height: 0px;
|
||||||
outline: none;
|
outline: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 20px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete:before, .delete:after {
|
.delete:before, .delete:after {
|
||||||
@@ -2898,18 +2680,18 @@ a.box:active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.delete.is-small {
|
.delete.is-small {
|
||||||
height: 14px;
|
height: 0px;
|
||||||
width: 14px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete.is-medium {
|
.delete.is-medium {
|
||||||
height: 26px;
|
height: 0px;
|
||||||
width: 26px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete.is-large {
|
.delete.is-large {
|
||||||
height: 30px;
|
height: 2px;
|
||||||
width: 30px;
|
width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa {
|
.fa {
|
||||||
@@ -3485,13 +3267,13 @@ a.box:active {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
height: 20px;
|
height: 0px;
|
||||||
outline: none;
|
outline: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 20px;
|
width: 0px;
|
||||||
background: none;
|
background: none;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -3529,18 +3311,18 @@ a.box:active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-close.is-small {
|
.modal-close.is-small {
|
||||||
height: 14px;
|
height: 0px;
|
||||||
width: 14px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-close.is-medium {
|
.modal-close.is-medium {
|
||||||
height: 26px;
|
height: 0px;
|
||||||
width: 26px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-close.is-large {
|
.modal-close.is-large {
|
||||||
height: 30px;
|
height: 2px;
|
||||||
width: 30px;
|
width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-card {
|
.modal-card {
|
||||||
@@ -3859,11 +3641,13 @@ a.nav-item.is-tab.is-active {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
height: 2.285em;
|
height: 2.25em;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding-left: 0.75em;
|
padding-bottom: 0.375em;
|
||||||
padding-right: 0.75em;
|
padding-left: 0.625em;
|
||||||
|
padding-right: 0.625em;
|
||||||
|
padding-top: 0.375em;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
|
|||||||
@@ -1,6 +1,3 @@
|
|||||||
$body-background: $white !default
|
|
||||||
$body-size: $size-6 !default
|
|
||||||
|
|
||||||
html
|
html
|
||||||
background-color: $body-background
|
background-color: $body-background
|
||||||
font-size: $body-size
|
font-size: $body-size
|
||||||
|
|||||||
@@ -13,72 +13,14 @@ $button-active-border: $link-active-border !default
|
|||||||
|
|
||||||
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
||||||
|
|
||||||
@function buttonIconSpacing($button-font-size, $icon-width)
|
|
||||||
// The button font-size value with no unit
|
|
||||||
$button-value: removeUnit($button-font-size)
|
|
||||||
// The rem height of the button
|
|
||||||
// based on a height of 2.5em
|
|
||||||
$button-height: 2.5rem * $button-value // rem
|
|
||||||
// The rem total horizontal padding of the button
|
|
||||||
$button-horizontal-padding: 2 * 0.75rem * $button-value // rem
|
|
||||||
// For the icon center to align with the button center
|
|
||||||
// the horizontal padding + the icon width must equal the button height
|
|
||||||
// $button-height = $button-horizontal-padding + $icon-width + $difference
|
|
||||||
$difference: $button-height - $button-horizontal-padding - $icon-width
|
|
||||||
@return $difference / 2
|
|
||||||
|
|
||||||
=button-icon($button-font-size)
|
|
||||||
$small-offset: buttonIconSpacing($button-font-size, 1rem)
|
|
||||||
$normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
|
|
||||||
$medium-offset: buttonIconSpacing($button-font-size, 2rem)
|
|
||||||
$large-offset: buttonIconSpacing($button-font-size, 3rem)
|
|
||||||
.icon
|
|
||||||
&:first-child:not(:last-child)
|
|
||||||
margin-left: $normal-offset
|
|
||||||
margin-right: $button-font-size / 2
|
|
||||||
&:last-child:not(:first-child)
|
|
||||||
margin-left: $button-font-size / 2
|
|
||||||
margin-right: $normal-offset
|
|
||||||
&:first-child:last-child
|
|
||||||
// The -1px is to account for the button 1px border
|
|
||||||
margin-left: calc(-1px + #{$normal-offset})
|
|
||||||
margin-right: calc(-1px + #{$normal-offset})
|
|
||||||
&.is-small
|
|
||||||
&:first-child:not(:last-child)
|
|
||||||
margin-left: $small-offset
|
|
||||||
&:last-child:not(:first-child)
|
|
||||||
margin-right: $small-offset
|
|
||||||
&:first-child:last-child
|
|
||||||
margin-left: calc(-1px + #{$small-offset})
|
|
||||||
margin-right: calc(-1px + #{$small-offset})
|
|
||||||
&.is-medium
|
|
||||||
&:first-child:not(:last-child)
|
|
||||||
margin-left: $medium-offset
|
|
||||||
&:last-child:not(:first-child)
|
|
||||||
margin-right: $medium-offset
|
|
||||||
&:first-child:last-child
|
|
||||||
margin-left: calc(-1px + #{$medium-offset})
|
|
||||||
margin-right: calc(-1px + #{$medium-offset})
|
|
||||||
&.is-large
|
|
||||||
&:first-child:not(:last-child)
|
|
||||||
margin-left: $large-offset
|
|
||||||
&:last-child:not(:first-child)
|
|
||||||
margin-right: $large-offset
|
|
||||||
&:first-child:last-child
|
|
||||||
margin-left: calc(-1px + #{$large-offset})
|
|
||||||
margin-right: calc(-1px + #{$large-offset})
|
|
||||||
|
|
||||||
// The button sizes use mixins so they can be used at different breakpoints
|
// The button sizes use mixins so they can be used at different breakpoints
|
||||||
=button-small
|
=button-small
|
||||||
border-radius: $radius-small
|
border-radius: $radius-small
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
+button-icon($size-small)
|
|
||||||
=button-medium
|
=button-medium
|
||||||
font-size: $size-medium
|
font-size: $size-medium
|
||||||
+button-icon($size-medium)
|
|
||||||
=button-large
|
=button-large
|
||||||
font-size: $size-large
|
font-size: $size-large
|
||||||
+button-icon($size-large)
|
|
||||||
|
|
||||||
.button
|
.button
|
||||||
+control
|
+control
|
||||||
@@ -94,7 +36,22 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
|||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
strong
|
strong
|
||||||
color: inherit
|
color: inherit
|
||||||
+button-icon($size-normal)
|
.icon
|
||||||
|
&,
|
||||||
|
&.is-small,
|
||||||
|
&.is-medium,
|
||||||
|
&.is-large
|
||||||
|
height: 1.5em
|
||||||
|
width: 1.5em
|
||||||
|
&:first-child:not(:last-child)
|
||||||
|
margin-left: calc(-0.375em - 1px)
|
||||||
|
margin-right: 0.375em
|
||||||
|
&:last-child:not(:first-child)
|
||||||
|
margin-left: 0.375em
|
||||||
|
margin-right: calc(-0.375em - 1px)
|
||||||
|
&:first-child:last-child
|
||||||
|
margin-left: calc(-0.375em - 1px)
|
||||||
|
margin-right: calc(-0.375em - 1px)
|
||||||
// States
|
// States
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-hovered
|
&.is-hovered
|
||||||
|
|||||||
@@ -76,7 +76,7 @@ $input-radius: $radius !default
|
|||||||
max-width: 100%
|
max-width: 100%
|
||||||
min-height: 120px
|
min-height: 120px
|
||||||
min-width: 100%
|
min-width: 100%
|
||||||
padding: 10px
|
padding: 0.625em
|
||||||
resize: vertical
|
resize: vertical
|
||||||
|
|
||||||
.checkbox,
|
.checkbox,
|
||||||
@@ -105,7 +105,7 @@ $input-radius: $radius !default
|
|||||||
|
|
||||||
.select
|
.select
|
||||||
display: inline-block
|
display: inline-block
|
||||||
height: 2.5em
|
height: 2.25em
|
||||||
position: relative
|
position: relative
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
&:after
|
&:after
|
||||||
@@ -221,9 +221,11 @@ $input-radius: $radius !default
|
|||||||
&.has-icon
|
&.has-icon
|
||||||
.icon
|
.icon
|
||||||
color: $input-icon
|
color: $input-icon
|
||||||
|
height: 2.25em
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
position: absolute
|
position: absolute
|
||||||
top: ($size-normal * 2.5) / 2
|
top: 0
|
||||||
|
width: 2.25em
|
||||||
z-index: 4
|
z-index: 4
|
||||||
.input
|
.input
|
||||||
&:focus
|
&:focus
|
||||||
@@ -231,43 +233,43 @@ $input-radius: $radius !default
|
|||||||
color: $input-icon-active
|
color: $input-icon-active
|
||||||
&.is-small
|
&.is-small
|
||||||
& + .icon
|
& + .icon
|
||||||
top: ($size-small * 2.5) / 2
|
font-size: $size-small
|
||||||
&.is-medium
|
&.is-medium
|
||||||
& + .icon
|
& + .icon
|
||||||
top: ($size-medium * 2.5) / 2
|
font-size: $size-medium
|
||||||
&.is-large
|
&.is-large
|
||||||
& + .icon
|
& + .icon
|
||||||
top: ($size-large * 2.5) / 2
|
font-size: $size-large
|
||||||
&:not(.has-icon-right)
|
&:not(.has-icon-right)
|
||||||
.icon
|
.icon
|
||||||
left: ($size-normal * 2.5) / 2
|
left: 0
|
||||||
transform: translateX(-50%) translateY(-50%)
|
// transform: translateX(-50%) translateY(-50%)
|
||||||
.input
|
.input
|
||||||
padding-left: 2.5em
|
padding-left: 2.25em
|
||||||
&.is-small
|
// &.is-small
|
||||||
& + .icon
|
// & + .icon
|
||||||
left: ($size-small * 2.5) / 2
|
// left: ($size-small * 2.5) / 2
|
||||||
&.is-medium
|
// &.is-medium
|
||||||
& + .icon
|
// & + .icon
|
||||||
left: ($size-medium * 2.5) / 2
|
// left: ($size-medium * 2.5) / 2
|
||||||
&.is-large
|
// &.is-large
|
||||||
& + .icon
|
// & + .icon
|
||||||
left: ($size-large * 2.5) / 2
|
// left: ($size-large * 2.5) / 2
|
||||||
&.has-icon-right
|
&.has-icon-right
|
||||||
.icon
|
.icon
|
||||||
right: ($size-normal * 2.5) / 2
|
right: 0
|
||||||
transform: translateX(50%) translateY(-50%)
|
// transform: translateX(50%) translateY(-50%)
|
||||||
.input
|
.input
|
||||||
padding-right: 2.5em
|
padding-right: 2.25em
|
||||||
&.is-small
|
// &.is-small
|
||||||
& + .icon
|
// & + .icon
|
||||||
right: ($size-small * 2.5) / 2
|
// right: ($size-small * 2.5) / 2
|
||||||
&.is-medium
|
// &.is-medium
|
||||||
& + .icon
|
// & + .icon
|
||||||
right: ($size-medium * 2.5) / 2
|
// right: ($size-medium * 2.5) / 2
|
||||||
&.is-large
|
// &.is-large
|
||||||
& + .icon
|
// & + .icon
|
||||||
right: ($size-large * 2.5) / 2
|
// right: ($size-large * 2.5) / 2
|
||||||
&.is-grouped
|
&.is-grouped
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
|
|||||||
@@ -1,12 +1,26 @@
|
|||||||
.icon
|
.icon
|
||||||
+fa(21px, 1.5rem)
|
align-items: center
|
||||||
|
background-color: coral
|
||||||
|
display: inline-flex
|
||||||
|
justify-content: center
|
||||||
|
height: 1.5rem
|
||||||
|
vertical-align: top
|
||||||
|
width: 1.5rem
|
||||||
.fa
|
.fa
|
||||||
font-size: inherit
|
font-size: 21px
|
||||||
line-height: inherit
|
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
+fa(14px, 1rem)
|
height: 1rem
|
||||||
|
width: 1rem
|
||||||
|
.fa
|
||||||
|
font-size: 14px
|
||||||
&.is-medium
|
&.is-medium
|
||||||
+fa(28px, 2rem)
|
height: 2rem
|
||||||
|
width: 2rem
|
||||||
|
.fa
|
||||||
|
font-size: 28px
|
||||||
&.is-large
|
&.is-large
|
||||||
+fa(42px, 3rem)
|
height: 3rem
|
||||||
|
width: 3rem
|
||||||
|
.fa
|
||||||
|
font-size: 42px
|
||||||
|
|||||||
@@ -10,11 +10,13 @@ $control-radius-small: $radius-small !default
|
|||||||
box-shadow: none
|
box-shadow: none
|
||||||
display: inline-flex
|
display: inline-flex
|
||||||
font-size: $size-normal
|
font-size: $size-normal
|
||||||
height: 2.285em
|
height: 2.25em
|
||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
padding-left: 0.75em
|
padding-bottom: 0.375em
|
||||||
padding-right: 0.75em
|
padding-left: 0.625em
|
||||||
|
padding-right: 0.625em
|
||||||
|
padding-top: 0.375em
|
||||||
position: relative
|
position: relative
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
// States
|
// States
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ $size-2: 2.75rem !default
|
|||||||
$size-3: 2rem !default
|
$size-3: 2rem !default
|
||||||
$size-4: 1.5rem !default
|
$size-4: 1.5rem !default
|
||||||
$size-5: 1.25rem !default
|
$size-5: 1.25rem !default
|
||||||
$size-6: 14px !default
|
$size-6: 1rem !default
|
||||||
$size-7: 0.75rem !default
|
$size-7: 0.75rem !default
|
||||||
|
|
||||||
$weight-light: 300 !default
|
$weight-light: 300 !default
|
||||||
@@ -42,6 +42,10 @@ $weight-normal: 400 !default
|
|||||||
$weight-semibold: 500 !default
|
$weight-semibold: 500 !default
|
||||||
$weight-bold: 700 !default
|
$weight-bold: 700 !default
|
||||||
|
|
||||||
|
// Body
|
||||||
|
$body-background: $white !default
|
||||||
|
$body-size: 14px !default
|
||||||
|
|
||||||
// Miscellaneous
|
// Miscellaneous
|
||||||
$easing: ease-out !default
|
$easing: ease-out !default
|
||||||
$radius-small: 2px !default
|
$radius-small: 2px !default
|
||||||
@@ -122,7 +126,7 @@ $family-primary: $family-sans-serif !default
|
|||||||
$family-code: $family-monospace !default
|
$family-code: $family-monospace !default
|
||||||
|
|
||||||
$size-small: $size-7 !default
|
$size-small: $size-7 !default
|
||||||
$size-normal: 1rem !default
|
$size-normal: $size-6 !default
|
||||||
$size-medium: $size-5 !default
|
$size-medium: $size-5 !default
|
||||||
$size-large: $size-4 !default
|
$size-large: $size-4 !default
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user