mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Remove icon spacing logic
This commit is contained in:
Jeremy Thomas
parent
3384082ddf
commit
6ac14c316f
@ -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;
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
$body-background: $white !default
|
||||
$body-size: $size-6 !default
|
||||
|
||||
html
|
||||
background-color: $body-background
|
||||
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
|
||||
|
||||
@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
|
||||
=button-small
|
||||
border-radius: $radius-small
|
||||
font-size: $size-small
|
||||
+button-icon($size-small)
|
||||
=button-medium
|
||||
font-size: $size-medium
|
||||
+button-icon($size-medium)
|
||||
=button-large
|
||||
font-size: $size-large
|
||||
+button-icon($size-large)
|
||||
|
||||
.button
|
||||
+control
|
||||
@ -94,7 +36,22 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
||||
white-space: nowrap
|
||||
strong
|
||||
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
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
|
||||
@ -76,7 +76,7 @@ $input-radius: $radius !default
|
||||
max-width: 100%
|
||||
min-height: 120px
|
||||
min-width: 100%
|
||||
padding: 10px
|
||||
padding: 0.625em
|
||||
resize: vertical
|
||||
|
||||
.checkbox,
|
||||
@ -105,7 +105,7 @@ $input-radius: $radius !default
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
height: 2.5em
|
||||
height: 2.25em
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:after
|
||||
@ -221,9 +221,11 @@ $input-radius: $radius !default
|
||||
&.has-icon
|
||||
.icon
|
||||
color: $input-icon
|
||||
height: 2.25em
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: ($size-normal * 2.5) / 2
|
||||
top: 0
|
||||
width: 2.25em
|
||||
z-index: 4
|
||||
.input
|
||||
&:focus
|
||||
@ -231,43 +233,43 @@ $input-radius: $radius !default
|
||||
color: $input-icon-active
|
||||
&.is-small
|
||||
& + .icon
|
||||
top: ($size-small * 2.5) / 2
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
& + .icon
|
||||
top: ($size-medium * 2.5) / 2
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
& + .icon
|
||||
top: ($size-large * 2.5) / 2
|
||||
font-size: $size-large
|
||||
&:not(.has-icon-right)
|
||||
.icon
|
||||
left: ($size-normal * 2.5) / 2
|
||||
transform: translateX(-50%) translateY(-50%)
|
||||
left: 0
|
||||
// transform: translateX(-50%) translateY(-50%)
|
||||
.input
|
||||
padding-left: 2.5em
|
||||
&.is-small
|
||||
& + .icon
|
||||
left: ($size-small * 2.5) / 2
|
||||
&.is-medium
|
||||
& + .icon
|
||||
left: ($size-medium * 2.5) / 2
|
||||
&.is-large
|
||||
& + .icon
|
||||
left: ($size-large * 2.5) / 2
|
||||
padding-left: 2.25em
|
||||
// &.is-small
|
||||
// & + .icon
|
||||
// left: ($size-small * 2.5) / 2
|
||||
// &.is-medium
|
||||
// & + .icon
|
||||
// left: ($size-medium * 2.5) / 2
|
||||
// &.is-large
|
||||
// & + .icon
|
||||
// left: ($size-large * 2.5) / 2
|
||||
&.has-icon-right
|
||||
.icon
|
||||
right: ($size-normal * 2.5) / 2
|
||||
transform: translateX(50%) translateY(-50%)
|
||||
right: 0
|
||||
// transform: translateX(50%) translateY(-50%)
|
||||
.input
|
||||
padding-right: 2.5em
|
||||
&.is-small
|
||||
& + .icon
|
||||
right: ($size-small * 2.5) / 2
|
||||
&.is-medium
|
||||
& + .icon
|
||||
right: ($size-medium * 2.5) / 2
|
||||
&.is-large
|
||||
& + .icon
|
||||
right: ($size-large * 2.5) / 2
|
||||
padding-right: 2.25em
|
||||
// &.is-small
|
||||
// & + .icon
|
||||
// right: ($size-small * 2.5) / 2
|
||||
// &.is-medium
|
||||
// & + .icon
|
||||
// right: ($size-medium * 2.5) / 2
|
||||
// &.is-large
|
||||
// & + .icon
|
||||
// right: ($size-large * 2.5) / 2
|
||||
&.is-grouped
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
|
||||
@ -1,12 +1,26 @@
|
||||
.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
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
font-size: 21px
|
||||
// Sizes
|
||||
&.is-small
|
||||
+fa(14px, 1rem)
|
||||
height: 1rem
|
||||
width: 1rem
|
||||
.fa
|
||||
font-size: 14px
|
||||
&.is-medium
|
||||
+fa(28px, 2rem)
|
||||
height: 2rem
|
||||
width: 2rem
|
||||
.fa
|
||||
font-size: 28px
|
||||
&.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
|
||||
display: inline-flex
|
||||
font-size: $size-normal
|
||||
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
|
||||
// States
|
||||
|
||||
@ -34,7 +34,7 @@ $size-2: 2.75rem !default
|
||||
$size-3: 2rem !default
|
||||
$size-4: 1.5rem !default
|
||||
$size-5: 1.25rem !default
|
||||
$size-6: 14px !default
|
||||
$size-6: 1rem !default
|
||||
$size-7: 0.75rem !default
|
||||
|
||||
$weight-light: 300 !default
|
||||
@ -42,6 +42,10 @@ $weight-normal: 400 !default
|
||||
$weight-semibold: 500 !default
|
||||
$weight-bold: 700 !default
|
||||
|
||||
// Body
|
||||
$body-background: $white !default
|
||||
$body-size: 14px !default
|
||||
|
||||
// Miscellaneous
|
||||
$easing: ease-out !default
|
||||
$radius-small: 2px !default
|
||||
@ -122,7 +126,7 @@ $family-primary: $family-sans-serif !default
|
||||
$family-code: $family-monospace !default
|
||||
|
||||
$size-small: $size-7 !default
|
||||
$size-normal: 1rem !default
|
||||
$size-normal: $size-6 !default
|
||||
$size-medium: $size-5 !default
|
||||
$size-large: $size-4 !default
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user