app/assets/stylesheets/sass/elements/form.sass in bulma-rails-0.4.3 vs app/assets/stylesheets/sass/elements/form.sass in bulma-rails-0.5.1
- old
+ new
@@ -1,51 +1,70 @@
-$input: $grey-darker !default
-$input-background: $white !default
-$input-border: $grey-lighter !default
+$input-color: $grey-darker !default
+$input-background-color: $white !default
+$input-border-color: $grey-lighter !default
+$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
-$input-hover: $grey-darker !default
-$input-hover-border: $grey-light !default
+$input-hover-color: $grey-darker !default
+$input-hover-border-color: $grey-light !default
-$input-focus: $grey-darker !default
-$input-focus-border: $link !default
+$input-focus-color: $grey-darker !default
+$input-focus-border-color: $link !default
-$input-disabled: $text-light !default
-$input-disabled-background: $background !default
-$input-disabled-border: $background !default
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
-$input-arrow: $link !default
+$input-arrow: $link !default
-$input-icon: $grey-lighter !default
-$input-icon-active: $grey !default
+$input-icon-color: $grey-lighter !default
+$input-icon-active-color: $grey !default
-$input-radius: $radius !default
+$input-radius: $radius !default
+$file-border-color: $border !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $white-ter !default
+$file-cta-color: $grey-dark !default
+$file-cta-hover-color: $grey-darker !default
+$file-cta-active-color: $grey-darker !default
+
+$file-name-border-color: $border !default
+$file-name-border-style: solid !default
+$file-name-border-width: 1px 1px 1px 0 !default
+$file-name-max-width: 16em !default
+
+$label-color: $grey-darker !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
+
=input
+control
- background-color: $input-background
- border-color: $input-border
- color: $input
+ background-color: $input-background-color
+ border-color: $input-border-color
+ color: $input-color
&:hover,
&.is-hovered
- border-color: $input-hover-border
+ border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
- border-color: $input-focus-border
+ border-color: $input-focus-border-color
&[disabled]
- background-color: $input-disabled-background
- border-color: $input-disabled-border
+ background-color: $input-disabled-background-color
+ border-color: $input-disabled-border-color
box-shadow: none
- color: $input-disabled
+ color: $input-disabled-color
+placeholder
- color: rgba($input, 0.3)
+ color: rgba($input-disabled-color, 0.3)
.input,
.textarea
+input
- box-shadow: inset 0 1px 2px rgba($black, 0.1)
+ box-shadow: $input-shadow
max-width: 100%
width: 100%
&[type="search"]
border-radius: 290486px
// Colors
@@ -68,65 +87,80 @@
display: inline
width: auto
.textarea
display: block
- max-height: 600px
max-width: 100%
- min-height: 120px
min-width: 100%
padding: 0.625em
resize: vertical
+ &:not([rows])
+ max-height: 600px
+ min-height: 120px
+ &[rows]
+ height: unset
.checkbox,
.radio
cursor: pointer
display: inline-block
line-height: 1.25
position: relative
input
cursor: pointer
&:hover
- color: $input-hover
+ color: $input-hover-color
&[disabled]
- color: $input-disabled
+ color: $input-disabled-color
cursor: not-allowed
.radio
& + .radio
margin-left: 0.5em
.select
display: inline-block
- height: 2.25em
max-width: 100%
position: relative
vertical-align: top
- &:after
- +arrow($input-arrow)
- margin-top: -0.375em
- right: 1.125em
- top: 50%
- z-index: 4
+ &:not(.is-multiple)
+ height: 2.25em
+ &::after
+ +arrow($input-arrow)
+ margin-top: -0.375em
+ right: 1.125em
+ top: 50%
+ z-index: 4
select
+input
cursor: pointer
display: block
font-size: 1em
max-width: 100%
outline: none
- padding-right: 2.5em
&:hover
- border-color: $input-hover-border
+ border-color: $input-hover-border-color
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ border-color: $input-focus-border-color
&::-ms-expand
display: none
&[disabled]:hover
- border-color: $input-disabled-border
+ border-color: $input-disabled-border-color
+ &:not([multiple])
+ padding-right: 2.5em
+ &[multiple]
+ height: unset
+ padding: 0
+ option
+ padding: 0.5em 1em
// States
&:hover
- &:after
- border-color: $input-hover
+ &::after
+ border-color: $input-hover-color
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name} select
border-color: $color
@@ -137,18 +171,18 @@
+control-medium
&.is-large
+control-large
// Modifiers
&.is-disabled
- &:after
- border-color: $input-disabled
+ &::after
+ border-color: $input-disabled-color
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
- &:after
+ &::after
+loader
margin-top: 0
position: absolute
right: 0.625em
top: 0.625em
@@ -158,15 +192,178 @@
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large
+.file
+ +unselectable
+ align-items: stretch
+ display: flex
+ justify-content: flex-start
+ position: relative
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ .file-cta
+ background-color: $color
+ border-color: transparent
+ color: $color-invert
+ &:hover,
+ &.is-hovered
+ .file-cta
+ background-color: darken($color, 2.5%)
+ border-color: transparent
+ color: $color-invert
+ &:focus,
+ &.is-focused
+ .file-cta
+ border-color: transparent
+ box-shadow: 0 0 0.5em rgba($color, 0.25)
+ color: $color-invert
+ &:active,
+ &.is-active
+ .file-cta
+ background-color: darken($color, 5%)
+ border-color: transparent
+ color: $color-invert
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ .file-icon
+ .fa
+ font-size: 21px
+ &.is-large
+ font-size: $size-large
+ .file-icon
+ .fa
+ font-size: 28px
+ // Modifiers
+ &.has-name
+ .file-cta
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ .file-name
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ &.is-centered
+ justify-content: center
+ &.is-right
+ justify-content: flex-end
+ &.is-boxed
+ .file-label
+ flex-direction: column
+ .file-cta
+ flex-direction: column
+ height: auto
+ padding: 1em 3em
+ .file-name
+ border-width: 0 1px 1px
+ .file-icon
+ height: 1.5em
+ width: 1.5em
+ .fa
+ font-size: 21px
+ &.is-small
+ .file-icon .fa
+ font-size: 14px
+ &.is-medium
+ .file-icon .fa
+ font-size: 28px
+ &.is-large
+ .file-icon .fa
+ font-size: 35px
+ &.has-name
+ .file-cta
+ border-radius: $file-radius $file-radius 0 0
+ .file-name
+ border-radius: 0 0 $file-radius $file-radius
+ border-width: 0 1px 1px
+ &.is-right
+ .file-cta
+ border-radius: 0 $file-radius $file-radius 0
+ .file-name
+ border-radius: $file-radius 0 0 $file-radius
+ border-width: 1px 0 1px 1px
+ order: -1
+ &.is-fullwidth
+ .file-label
+ width: 100%
+ .file-name
+ flex-grow: 1
+ max-width: none
+
+.file-label
+ align-items: stretch
+ display: flex
+ cursor: pointer
+ justify-content: flex-start
+ overflow: hidden
+ position: relative
+ &:hover
+ .file-cta
+ background-color: darken($file-cta-background-color, 2.5%)
+ color: $file-cta-hover-color
+ .file-name
+ border-color: darken($file-name-border-color, 2.5%)
+ &:active
+ .file-cta
+ background-color: darken($file-cta-background-color, 5%)
+ color: $file-cta-active-color
+ .file-name
+ border-color: darken($file-name-border-color, 5%)
+
+.file-input
+ height: 0.01em
+ left: 0
+ outline: none
+ position: absolute
+ top: 0
+ width: 0.01em
+
+.file-cta,
+.file-name
+ +control
+ border-color: $file-border-color
+ border-radius: $file-radius
+ font-size: 1em
+ padding-left: 1em
+ padding-right: 1em
+ white-space: nowrap
+
+.file-cta
+ background-color: $file-cta-background-color
+ color: $file-cta-color
+
+.file-name
+ border-color: $file-name-border-color
+ border-style: $file-name-border-style
+ border-width: $file-name-border-width
+ display: block
+ max-width: $file-name-max-width
+ overflow: hidden
+ text-align: left
+ text-overflow: ellipsis
+
+.file-icon
+ align-items: center
+ display: flex
+ height: 1em
+ justify-content: center
+ margin-right: 0.5em
+ width: 1em
+ .fa
+ font-size: 14px
+
.label
- color: $input
+ color: $label-color
display: block
font-size: $size-normal
- font-weight: $weight-bold
+ font-weight: $label-weight
&:not(:last-child)
margin-bottom: 0.5em
// Sizes
&.is-small
font-size: $size-small
@@ -175,11 +372,11 @@
&.is-large
font-size: $size-large
.help
display: block
- font-size: $size-small
+ font-size: $help-size
margin-top: 0.25rem
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
@@ -192,11 +389,12 @@
// Modifiers
&.has-addons
display: flex
justify-content: flex-start
.control
- margin-right: -1px
+ &:not(:last-child)
+ margin-right: -1px
&:first-child
.button,
.input,
.select select
border-bottom-left-radius: $input-radius
@@ -244,10 +442,21 @@
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
+ &.is-grouped-multiline
+ flex-wrap: wrap
+ & > .control
+ &:last-child,
+ &:not(:last-child)
+ margin-bottom: 0.75rem
+ &:last-child
+ margin-bottom: -0.75rem
+ &:not(:last-child)
+ margin-bottom: 0
+
&.is-horizontal
+tablet
display: flex
.field-label
@@ -272,42 +481,45 @@
&.is-large
font-size: $size-large
padding-top: 0.375em
.field-body
+ .field .field
+ margin-bottom: 0
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
+ margin-bottom: 0
+ & > .field
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
- margin-bottom: 0
margin-right: 0.75rem
.control
font-size: $size-normal
position: relative
text-align: left
// Modifiers
// DEPRECATED
&.has-icon
.icon
- color: $input-icon
+ color: $input-icon-color
height: 2.25em
pointer-events: none
position: absolute
top: 0
width: 2.25em
z-index: 4
.input
&:focus
& + .icon
- color: $input-icon-active
+ color: $input-icon-active-color
&.is-small
& + .icon
font-size: $size-small
&.is-medium
& + .icon
@@ -326,22 +538,22 @@
.input
padding-right: 2.25em
&.has-icons-left,
&.has-icons-right
.input,
- .select select
+ .select
&:focus
& ~ .icon
- color: $input-icon-active
+ color: $input-icon-active-color
&.is-small ~ .icon
font-size: $size-small
&.is-medium ~ .icon
font-size: $size-medium
&.is-large ~ .icon
font-size: $size-large
.icon
- color: $input-icon
+ color: $input-icon-color
height: 2.25em
pointer-events: none
position: absolute
top: 0
width: 2.25em
@@ -357,10 +569,10 @@
.select select
padding-right: 2.25em
.icon.is-right
right: 0
&.is-loading
- &:after
+ &::after
+loader
position: absolute !important
right: 0.625em
top: 0.625em
&.is-small:after