Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -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

62
sass/elements/form.sass
View File

@@ -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