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

Add field element

Browse Source
This commit is contained in:
Jeremy Thomas
2017-03-12 17:29:26 +00:00
parent d5865cd4eb
commit 9fc8cdf225
3 changed files with 684 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
sass/elements/form.sass
View File

@@ -152,7 +152,7 @@ $input-radius: $radius !default
.help
display: block
font-size: $size-small
margin-top: 5px
margin-top: 0.25rem
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
@@ -160,64 +160,110 @@ $input-radius: $radius !default
// Containers
.control-label
+mobile
margin-bottom: 0.5em
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
margin-right: 1.5em
padding-top: 0.5em
text-align: right
.control
position: relative
text-align: left
.field
&:not(:last-child)
margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
justify-content: flex-start
.button,
.input,
.select
border-radius: 0
.control
margin-right: -1px
width: auto
&:hover
z-index: 2
&:focus,
&:active
z-index: 3
&:first-child
border-radius: $input-radius 0 0 $input-radius
select
border-radius: $input-radius 0 0 $input-radius
.button,
.input,
.select select
border-bottom-left-radius: $input-radius
border-top-left-radius: $input-radius
&:last-child
border-radius: 0 $input-radius $input-radius 0
select
border-radius: 0 $input-radius $input-radius 0
.button,
.input,
.select select
border-bottom-right-radius: $input-radius
border-top-right-radius: $input-radius
.button,
.input,
.select select
border-radius: 0
&.is-expanded
flex-grow: 1
flex-shrink: 0
.select select
&:hover
z-index: 2
&:focus,
&:active
z-index: 3
// width: auto
// .control:first-child &
// border-radius: $input-radius 0 0 $input-radius
// select
// border-radius: $input-radius 0 0 $input-radius
// .control:last-child &
// border-radius: 0 $input-radius $input-radius 0
// select
// border-radius: 0 $input-radius $input-radius 0
// .select select
// &:hover
// z-index: 2
// &:focus,
// &:active
// z-index: 3
&.has-addons-centered
justify-content: center
&.has-addons-right
justify-content: flex-end
&.has-addons-fullwidth
.button,
.input,
.select
.control
flex-grow: 1
flex-shrink: 0
&.is-grouped
display: flex
justify-content: flex-start
& > .control
flex-basis: 0
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
&.is-horizontal
+tablet
display: flex
.field-label
+mobile
margin-bottom: 0.5rem
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
margin-right: 1.5rem
padding-top: 0.375em
text-align: right
.field-body
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
flex-grow: 1
flex-shrink: 1
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
.control
position: relative
text-align: left
// Modifiers
&.has-icon
.icon
color: $input-icon
@@ -270,33 +316,9 @@ $input-radius: $radius !default
// &.is-large
// & + .icon
// right: ($size-large * 2.5) / 2
&.is-grouped
display: flex
justify-content: flex-start
& > .control
flex-basis: 0
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
&.is-horizontal
+tablet
display: flex
& > .control
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
&.is-loading
&:after
+loader
position: absolute !important
right: 0.75em
top: 0.75em
right: 0.625em
top: 0.625em