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

Fix inputs with icons

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 14:59:46 +00:00
parent 73ab6b214d
commit 84a40052fc
8 changed files with 504 additions and 1079 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
sass/elements/content.sass
View File

@@ -11,10 +11,11 @@
li + li
margin-top: 0.25em
// Block
blockquote,
p,
ol,
ul
ul,
blockquote,
table
&:not(:last-child)
margin-bottom: 1em
h1,
@@ -69,6 +70,36 @@
margin-top: 0.5em
ul
list-style-type: square
table
width: 100%
td,
th
border: 1px solid $border
border-width: 0 0 1px
padding: 0.5em 0.75em
vertical-align: top
th
color: $text-strong
text-align: left
tr
&:hover
background-color: $background
thead
td,
th
border-width: 0 0 2px
color: $text-strong
tfoot
td,
th
border-width: 2px 0 0
color: $text-strong
tbody
tr
&:last-child
td,
th
border-bottom-width: 0
// Sizes
&.is-small
font-size: $size-small

74
sass/elements/form.sass
View File

@@ -15,7 +15,7 @@ $input-disabled-border: $background !default
$input-arrow: $link !default
$input-icon: $grey-lighter !default
$input-icon-active: $grey-light !default
$input-icon-active: $grey !default
$input-radius: $radius !default
@@ -219,59 +219,55 @@ $input-radius: $radius !default
flex-grow: 1
flex-shrink: 0
&.has-icon
& > .fa
+fa(14px, 24px)
.icon
color: $input-icon
pointer-events: none
position: absolute
top: 4px
top: ($size-normal * 2.5) / 2
z-index: 4
.input
&:focus + .fa
color: $input-icon-active
&.is-small + .fa
font-size: 10.5px
top: 0
&.is-medium + .fa
font-size: 21px
top: 8px
&.is-large + .fa
font-size: 21px
top: 12px
&:focus
& + .icon
color: $input-icon-active
&.is-small
& + .icon
top: ($size-small * 2.5) / 2
&.is-medium
& + .icon
top: ($size-medium * 2.5) / 2
&.is-large
& + .icon
top: ($size-large * 2.5) / 2
&:not(.has-icon-right)
& > .fa
left: 4px
.icon
left: ($size-normal * 2.5) / 2
transform: translateX(-50%) translateY(-50%)
.input
padding-left: 32px
padding-left: 2.5em
&.is-small
padding-left: 24px
& + .fa
left: 0
& + .icon
left: ($size-small * 2.5) / 2
&.is-medium
padding-left: 40px
& + .fa
left: 8px
& + .icon
left: ($size-medium * 2.5) / 2
&.is-large
padding-left: 48px
& + .fa
left: 12px
& + .icon
left: ($size-large * 2.5) / 2
&.has-icon-right
& > .fa
right: 4px
.icon
right: ($size-normal * 2.5) / 2
transform: translateX(50%) translateY(-50%)
.input
padding-right: 32px
padding-right: 2.5em
&.is-small
padding-right: 24px
& + .fa
right: 0
& + .icon
right: ($size-small * 2.5) / 2
&.is-medium
padding-right: 40px
& + .fa
right: 8px
& + .icon
right: ($size-medium * 2.5) / 2
&.is-large
padding-right: 48px
& + .fa
right: 12px
& + .icon
right: ($size-large * 2.5) / 2
&.is-grouped
display: flex
justify-content: flex-start

2
sass/elements/icon.sass
View File

@@ -1,5 +1,5 @@
.icon
background: pink
background: $background
+fa(21px, 1.5rem)
.fa
font-size: inherit

10
sass/elements/table.sass
View File

@@ -34,17 +34,17 @@ $table-row-even-hover-background: $white-ter !default
th
border-width: 0 0 2px
color: $table-head
tfoot
td,
th
border-width: 2px 0 0
color: $table-head
tbody
tr
&:last-child
td,
th
border-bottom-width: 0
tfoot
td,
th
border-width: 2px 0 0
color: $table-head
// Modifiers
&.is-bordered
td,