mirror of
https://github.com/jgthms/bulma
synced 2026-03-22 05:04:28 -07:00
Move form.sass into its own folder
This commit is contained in:
Jeremy Thomas
1
bulma.sass
vendored
1
bulma.sass
vendored
@@ -3,6 +3,7 @@
|
|||||||
@import "sass/utilities/_all"
|
@import "sass/utilities/_all"
|
||||||
@import "sass/base/_all"
|
@import "sass/base/_all"
|
||||||
@import "sass/elements/_all"
|
@import "sass/elements/_all"
|
||||||
|
@import "sass/form/_all"
|
||||||
@import "sass/components/_all"
|
@import "sass/components/_all"
|
||||||
@import "sass/grid/_all"
|
@import "sass/grid/_all"
|
||||||
@import "sass/layout/_all"
|
@import "sass/layout/_all"
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,6 @@
|
|||||||
@import "button.sass"
|
@import "button.sass"
|
||||||
@import "container.sass"
|
@import "container.sass"
|
||||||
@import "content.sass"
|
@import "content.sass"
|
||||||
@import "form.sass"
|
|
||||||
@import "icon.sass"
|
@import "icon.sass"
|
||||||
@import "image.sass"
|
@import "image.sass"
|
||||||
@import "notification.sass"
|
@import "notification.sass"
|
||||||
|
|||||||
@@ -1,604 +1 @@
|
|||||||
$input-color: $grey-darker !default
|
@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."
|
||||||
$input-background-color: $white !default
|
|
||||||
$input-border-color: $grey-lighter !default
|
|
||||||
$input-height: $control-height !default
|
|
||||||
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
|
|
||||||
$input-placeholder-color: rgba($input-color, 0.3) !default
|
|
||||||
|
|
||||||
$input-hover-color: $grey-darker !default
|
|
||||||
$input-hover-border-color: $grey-light !default
|
|
||||||
|
|
||||||
$input-focus-color: $grey-darker !default
|
|
||||||
$input-focus-border-color: $link !default
|
|
||||||
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
|
||||||
$input-focus-box-shadow-color: rgba($link, 0.25) !default
|
|
||||||
|
|
||||||
$input-disabled-color: $text-light !default
|
|
||||||
$input-disabled-background-color: $background !default
|
|
||||||
$input-disabled-border-color: $background !default
|
|
||||||
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
|
|
||||||
|
|
||||||
$input-arrow: $link !default
|
|
||||||
|
|
||||||
$input-icon-color: $grey-lighter !default
|
|
||||||
$input-icon-active-color: $grey !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
|
|
||||||
@extend %control
|
|
||||||
background-color: $input-background-color
|
|
||||||
border-color: $input-border-color
|
|
||||||
border-radius: $input-radius
|
|
||||||
color: $input-color
|
|
||||||
+placeholder
|
|
||||||
color: $input-placeholder-color
|
|
||||||
&:hover,
|
|
||||||
&.is-hovered
|
|
||||||
border-color: $input-hover-border-color
|
|
||||||
&:focus,
|
|
||||||
&.is-focused,
|
|
||||||
&:active,
|
|
||||||
&.is-active
|
|
||||||
border-color: $input-focus-border-color
|
|
||||||
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] &
|
|
||||||
background-color: $input-disabled-background-color
|
|
||||||
border-color: $input-disabled-border-color
|
|
||||||
box-shadow: none
|
|
||||||
color: $input-disabled-color
|
|
||||||
+placeholder
|
|
||||||
color: $input-disabled-placeholder-color
|
|
||||||
|
|
||||||
.input,
|
|
||||||
.textarea
|
|
||||||
+input
|
|
||||||
box-shadow: $input-shadow
|
|
||||||
max-width: 100%
|
|
||||||
width: 100%
|
|
||||||
&[readonly]
|
|
||||||
box-shadow: none
|
|
||||||
// Colors
|
|
||||||
@each $name, $pair in $colors
|
|
||||||
$color: nth($pair, 1)
|
|
||||||
&.is-#{$name}
|
|
||||||
border-color: $color
|
|
||||||
&:focus,
|
|
||||||
&.is-focused,
|
|
||||||
&:active,
|
|
||||||
&.is-active
|
|
||||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
|
||||||
// Sizes
|
|
||||||
&.is-small
|
|
||||||
+control-small
|
|
||||||
&.is-medium
|
|
||||||
+control-medium
|
|
||||||
&.is-large
|
|
||||||
+control-large
|
|
||||||
// Modifiers
|
|
||||||
&.is-fullwidth
|
|
||||||
display: block
|
|
||||||
width: 100%
|
|
||||||
&.is-inline
|
|
||||||
display: inline
|
|
||||||
width: auto
|
|
||||||
|
|
||||||
.input
|
|
||||||
&.is-rounded
|
|
||||||
border-radius: $radius-rounded
|
|
||||||
padding-left: 1em
|
|
||||||
padding-right: 1em
|
|
||||||
&.is-static
|
|
||||||
background-color: transparent
|
|
||||||
border-color: transparent
|
|
||||||
box-shadow: none
|
|
||||||
padding-left: 0
|
|
||||||
padding-right: 0
|
|
||||||
|
|
||||||
.textarea
|
|
||||||
display: block
|
|
||||||
max-width: 100%
|
|
||||||
min-width: 100%
|
|
||||||
padding: 0.625em
|
|
||||||
resize: vertical
|
|
||||||
&:not([rows])
|
|
||||||
max-height: 600px
|
|
||||||
min-height: 120px
|
|
||||||
&[rows]
|
|
||||||
height: initial
|
|
||||||
// Modifiers
|
|
||||||
&.has-fixed-size
|
|
||||||
resize: none
|
|
||||||
|
|
||||||
.checkbox,
|
|
||||||
.radio
|
|
||||||
cursor: pointer
|
|
||||||
display: inline-block
|
|
||||||
line-height: 1.25
|
|
||||||
position: relative
|
|
||||||
input
|
|
||||||
cursor: pointer
|
|
||||||
&:hover
|
|
||||||
color: $input-hover-color
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] &
|
|
||||||
color: $input-disabled-color
|
|
||||||
cursor: not-allowed
|
|
||||||
|
|
||||||
.radio
|
|
||||||
& + .radio
|
|
||||||
margin-left: 0.5em
|
|
||||||
|
|
||||||
.select
|
|
||||||
display: inline-block
|
|
||||||
max-width: 100%
|
|
||||||
position: relative
|
|
||||||
vertical-align: top
|
|
||||||
&:not(.is-multiple)
|
|
||||||
height: $input-height
|
|
||||||
&:not(.is-multiple):not(.is-loading)
|
|
||||||
&::after
|
|
||||||
@extend %arrow
|
|
||||||
border-color: $input-arrow
|
|
||||||
right: 1.125em
|
|
||||||
z-index: 4
|
|
||||||
&.is-rounded
|
|
||||||
select
|
|
||||||
border-radius: $radius-rounded
|
|
||||||
padding-left: 1em
|
|
||||||
select
|
|
||||||
+input
|
|
||||||
cursor: pointer
|
|
||||||
display: block
|
|
||||||
font-size: 1em
|
|
||||||
max-width: 100%
|
|
||||||
outline: none
|
|
||||||
&::-ms-expand
|
|
||||||
display: none
|
|
||||||
&[disabled]:hover,
|
|
||||||
fieldset[disabled] &:hover
|
|
||||||
border-color: $input-disabled-border-color
|
|
||||||
&:not([multiple])
|
|
||||||
padding-right: 2.5em
|
|
||||||
&[multiple]
|
|
||||||
height: auto
|
|
||||||
padding: 0
|
|
||||||
option
|
|
||||||
padding: 0.5em 1em
|
|
||||||
// States
|
|
||||||
&:not(.is-multiple):not(.is-loading):hover
|
|
||||||
&::after
|
|
||||||
border-color: $input-hover-color
|
|
||||||
// Colors
|
|
||||||
@each $name, $pair in $colors
|
|
||||||
$color: nth($pair, 1)
|
|
||||||
&.is-#{$name}
|
|
||||||
&:not(:hover)::after
|
|
||||||
border-color: $color
|
|
||||||
select
|
|
||||||
border-color: $color
|
|
||||||
&:hover,
|
|
||||||
&.is-hovered
|
|
||||||
border-color: darken($color, 5%)
|
|
||||||
&:focus,
|
|
||||||
&.is-focused,
|
|
||||||
&:active,
|
|
||||||
&.is-active
|
|
||||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
|
||||||
// Sizes
|
|
||||||
&.is-small
|
|
||||||
+control-small
|
|
||||||
&.is-medium
|
|
||||||
+control-medium
|
|
||||||
&.is-large
|
|
||||||
+control-large
|
|
||||||
// Modifiers
|
|
||||||
&.is-disabled
|
|
||||||
&::after
|
|
||||||
border-color: $input-disabled-color
|
|
||||||
&.is-fullwidth
|
|
||||||
width: 100%
|
|
||||||
select
|
|
||||||
width: 100%
|
|
||||||
&.is-loading
|
|
||||||
&::after
|
|
||||||
@extend %loader
|
|
||||||
margin-top: 0
|
|
||||||
position: absolute
|
|
||||||
right: 0.625em
|
|
||||||
top: 0.625em
|
|
||||||
transform: none
|
|
||||||
&.is-small:after
|
|
||||||
font-size: $size-small
|
|
||||||
&.is-medium:after
|
|
||||||
font-size: $size-medium
|
|
||||||
&.is-large:after
|
|
||||||
font-size: $size-large
|
|
||||||
|
|
||||||
.file
|
|
||||||
@extend %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-empty
|
|
||||||
.file-cta
|
|
||||||
border-radius: $file-radius
|
|
||||||
.file-name
|
|
||||||
display: none
|
|
||||||
&.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-centered
|
|
||||||
justify-content: center
|
|
||||||
&.is-fullwidth
|
|
||||||
.file-label
|
|
||||||
width: 100%
|
|
||||||
.file-name
|
|
||||||
flex-grow: 1
|
|
||||||
max-width: none
|
|
||||||
&.is-right
|
|
||||||
justify-content: flex-end
|
|
||||||
.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
|
|
||||||
|
|
||||||
.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: 100%
|
|
||||||
left: 0
|
|
||||||
opacity: 0
|
|
||||||
outline: none
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.file-cta,
|
|
||||||
.file-name
|
|
||||||
@extend %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: $label-color
|
|
||||||
display: block
|
|
||||||
font-size: $size-normal
|
|
||||||
font-weight: $label-weight
|
|
||||||
&:not(:last-child)
|
|
||||||
margin-bottom: 0.5em
|
|
||||||
// Sizes
|
|
||||||
&.is-small
|
|
||||||
font-size: $size-small
|
|
||||||
&.is-medium
|
|
||||||
font-size: $size-medium
|
|
||||||
&.is-large
|
|
||||||
font-size: $size-large
|
|
||||||
|
|
||||||
.help
|
|
||||||
display: block
|
|
||||||
font-size: $help-size
|
|
||||||
margin-top: 0.25rem
|
|
||||||
@each $name, $pair in $colors
|
|
||||||
$color: nth($pair, 1)
|
|
||||||
&.is-#{$name}
|
|
||||||
color: $color
|
|
||||||
|
|
||||||
// Containers
|
|
||||||
|
|
||||||
.field
|
|
||||||
&:not(:last-child)
|
|
||||||
margin-bottom: 0.75rem
|
|
||||||
// Modifiers
|
|
||||||
&.has-addons
|
|
||||||
display: flex
|
|
||||||
justify-content: flex-start
|
|
||||||
.control
|
|
||||||
&:not(:last-child)
|
|
||||||
margin-right: -1px
|
|
||||||
&:not(:first-child):not(:last-child)
|
|
||||||
.button,
|
|
||||||
.input,
|
|
||||||
.select select
|
|
||||||
border-radius: 0
|
|
||||||
&:first-child:not(:only-child)
|
|
||||||
.button,
|
|
||||||
.input,
|
|
||||||
.select select
|
|
||||||
border-bottom-right-radius: 0
|
|
||||||
border-top-right-radius: 0
|
|
||||||
&:last-child:not(:only-child)
|
|
||||||
.button,
|
|
||||||
.input,
|
|
||||||
.select select
|
|
||||||
border-bottom-left-radius: 0
|
|
||||||
border-top-left-radius: 0
|
|
||||||
.button,
|
|
||||||
.input,
|
|
||||||
.select select
|
|
||||||
&:not([disabled])
|
|
||||||
&:hover,
|
|
||||||
&.is-hovered
|
|
||||||
z-index: 2
|
|
||||||
&:focus,
|
|
||||||
&.is-focused,
|
|
||||||
&:active,
|
|
||||||
&.is-active
|
|
||||||
z-index: 3
|
|
||||||
&:hover
|
|
||||||
z-index: 4
|
|
||||||
&.is-expanded
|
|
||||||
flex-grow: 1
|
|
||||||
flex-shrink: 1
|
|
||||||
&.has-addons-centered
|
|
||||||
justify-content: center
|
|
||||||
&.has-addons-right
|
|
||||||
justify-content: flex-end
|
|
||||||
&.has-addons-fullwidth
|
|
||||||
.control
|
|
||||||
flex-grow: 1
|
|
||||||
flex-shrink: 0
|
|
||||||
&.is-grouped
|
|
||||||
display: flex
|
|
||||||
justify-content: flex-start
|
|
||||||
& > .control
|
|
||||||
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-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
|
|
||||||
.label
|
|
||||||
font-size: inherit
|
|
||||||
+mobile
|
|
||||||
margin-bottom: 0.5rem
|
|
||||||
+tablet
|
|
||||||
flex-basis: 0
|
|
||||||
flex-grow: 1
|
|
||||||
flex-shrink: 0
|
|
||||||
margin-right: 1.5rem
|
|
||||||
text-align: right
|
|
||||||
&.is-small
|
|
||||||
font-size: $size-small
|
|
||||||
padding-top: 0.375em
|
|
||||||
&.is-normal
|
|
||||||
padding-top: 0.375em
|
|
||||||
&.is-medium
|
|
||||||
font-size: $size-medium
|
|
||||||
padding-top: 0.375em
|
|
||||||
&.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-right: 0.75rem
|
|
||||||
|
|
||||||
.control
|
|
||||||
box-sizing: border-box
|
|
||||||
clear: both //fixes the icon floating out of the input when help text is floated right
|
|
||||||
font-size: $size-normal
|
|
||||||
position: relative
|
|
||||||
text-align: left
|
|
||||||
// Modifiers
|
|
||||||
&.has-icons-left,
|
|
||||||
&.has-icons-right
|
|
||||||
.input,
|
|
||||||
.select
|
|
||||||
&:focus
|
|
||||||
& ~ .icon
|
|
||||||
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
|
|
||||||
height: $input-height
|
|
||||||
pointer-events: none
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
width: $input-height
|
|
||||||
z-index: 4
|
|
||||||
&.has-icons-left
|
|
||||||
.input,
|
|
||||||
.select select
|
|
||||||
padding-left: $input-height
|
|
||||||
.icon.is-left
|
|
||||||
left: 0
|
|
||||||
&.has-icons-right
|
|
||||||
.input,
|
|
||||||
.select select
|
|
||||||
padding-right: $input-height
|
|
||||||
.icon.is-right
|
|
||||||
right: 0
|
|
||||||
&.is-loading
|
|
||||||
&::after
|
|
||||||
@extend %loader
|
|
||||||
position: absolute !important
|
|
||||||
right: 0.625em
|
|
||||||
top: 0.625em
|
|
||||||
z-index: 4
|
|
||||||
&.is-small:after
|
|
||||||
font-size: $size-small
|
|
||||||
&.is-medium:after
|
|
||||||
font-size: $size-medium
|
|
||||||
&.is-large:after
|
|
||||||
font-size: $size-large
|
|
||||||
|
|||||||
8
sass/form/_all.sass
Normal file
8
sass/form/_all.sass
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "shared.sass"
|
||||||
|
@import "input-textarea.sass"
|
||||||
|
@import "checkbox-radio.sass"
|
||||||
|
@import "select.sass"
|
||||||
|
@import "file.sass"
|
||||||
|
@import "tools.sass"
|
||||||
21
sass/form/checkbox-radio.sass
Normal file
21
sass/form/checkbox-radio.sass
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
%checkbox-radio
|
||||||
|
cursor: pointer
|
||||||
|
display: inline-block
|
||||||
|
line-height: 1.25
|
||||||
|
position: relative
|
||||||
|
input
|
||||||
|
cursor: pointer
|
||||||
|
&:hover
|
||||||
|
color: $input-hover-color
|
||||||
|
&[disabled],
|
||||||
|
fieldset[disabled] &
|
||||||
|
color: $input-disabled-color
|
||||||
|
cursor: not-allowed
|
||||||
|
|
||||||
|
.checkbox
|
||||||
|
@extend %checkbox-radio
|
||||||
|
|
||||||
|
.radio
|
||||||
|
@extend %checkbox-radio
|
||||||
|
& + .radio
|
||||||
|
margin-left: 0.5em
|
||||||
180
sass/form/file.sass
Normal file
180
sass/form/file.sass
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
$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
|
||||||
|
|
||||||
|
.file
|
||||||
|
@extend %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-empty
|
||||||
|
.file-cta
|
||||||
|
border-radius: $file-radius
|
||||||
|
.file-name
|
||||||
|
display: none
|
||||||
|
&.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-centered
|
||||||
|
justify-content: center
|
||||||
|
&.is-fullwidth
|
||||||
|
.file-label
|
||||||
|
width: 100%
|
||||||
|
.file-name
|
||||||
|
flex-grow: 1
|
||||||
|
max-width: none
|
||||||
|
&.is-right
|
||||||
|
justify-content: flex-end
|
||||||
|
.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
|
||||||
|
|
||||||
|
.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: 100%
|
||||||
|
left: 0
|
||||||
|
opacity: 0
|
||||||
|
outline: none
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
.file-cta,
|
||||||
|
.file-name
|
||||||
|
@extend %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
|
||||||
60
sass/form/input-textarea.sass
Normal file
60
sass/form/input-textarea.sass
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
%input-textarea
|
||||||
|
@extend %input
|
||||||
|
box-shadow: $input-shadow
|
||||||
|
max-width: 100%
|
||||||
|
width: 100%
|
||||||
|
&[readonly]
|
||||||
|
box-shadow: none
|
||||||
|
// Colors
|
||||||
|
@each $name, $pair in $colors
|
||||||
|
$color: nth($pair, 1)
|
||||||
|
&.is-#{$name}
|
||||||
|
border-color: $color
|
||||||
|
&:focus,
|
||||||
|
&.is-focused,
|
||||||
|
&:active,
|
||||||
|
&.is-active
|
||||||
|
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||||
|
// Sizes
|
||||||
|
&.is-small
|
||||||
|
+control-small
|
||||||
|
&.is-medium
|
||||||
|
+control-medium
|
||||||
|
&.is-large
|
||||||
|
+control-large
|
||||||
|
// Modifiers
|
||||||
|
&.is-fullwidth
|
||||||
|
display: block
|
||||||
|
width: 100%
|
||||||
|
&.is-inline
|
||||||
|
display: inline
|
||||||
|
width: auto
|
||||||
|
|
||||||
|
.input
|
||||||
|
@extend %input-textarea
|
||||||
|
&.is-rounded
|
||||||
|
border-radius: $radius-rounded
|
||||||
|
padding-left: 1em
|
||||||
|
padding-right: 1em
|
||||||
|
&.is-static
|
||||||
|
background-color: transparent
|
||||||
|
border-color: transparent
|
||||||
|
box-shadow: none
|
||||||
|
padding-left: 0
|
||||||
|
padding-right: 0
|
||||||
|
|
||||||
|
.textarea
|
||||||
|
@extend %input-textarea
|
||||||
|
display: block
|
||||||
|
max-width: 100%
|
||||||
|
min-width: 100%
|
||||||
|
padding: 0.625em
|
||||||
|
resize: vertical
|
||||||
|
&:not([rows])
|
||||||
|
max-height: 600px
|
||||||
|
min-height: 120px
|
||||||
|
&[rows]
|
||||||
|
height: initial
|
||||||
|
// Modifiers
|
||||||
|
&.has-fixed-size
|
||||||
|
resize: none
|
||||||
85
sass/form/select.sass
Normal file
85
sass/form/select.sass
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
.select
|
||||||
|
display: inline-block
|
||||||
|
max-width: 100%
|
||||||
|
position: relative
|
||||||
|
vertical-align: top
|
||||||
|
&:not(.is-multiple)
|
||||||
|
height: $input-height
|
||||||
|
&:not(.is-multiple):not(.is-loading)
|
||||||
|
&::after
|
||||||
|
@extend %arrow
|
||||||
|
border-color: $input-arrow
|
||||||
|
right: 1.125em
|
||||||
|
z-index: 4
|
||||||
|
&.is-rounded
|
||||||
|
select
|
||||||
|
border-radius: $radius-rounded
|
||||||
|
padding-left: 1em
|
||||||
|
select
|
||||||
|
@extend %input
|
||||||
|
cursor: pointer
|
||||||
|
display: block
|
||||||
|
font-size: 1em
|
||||||
|
max-width: 100%
|
||||||
|
outline: none
|
||||||
|
&::-ms-expand
|
||||||
|
display: none
|
||||||
|
&[disabled]:hover,
|
||||||
|
fieldset[disabled] &:hover
|
||||||
|
border-color: $input-disabled-border-color
|
||||||
|
&:not([multiple])
|
||||||
|
padding-right: 2.5em
|
||||||
|
&[multiple]
|
||||||
|
height: auto
|
||||||
|
padding: 0
|
||||||
|
option
|
||||||
|
padding: 0.5em 1em
|
||||||
|
// States
|
||||||
|
&:not(.is-multiple):not(.is-loading):hover
|
||||||
|
&::after
|
||||||
|
border-color: $input-hover-color
|
||||||
|
// Colors
|
||||||
|
@each $name, $pair in $colors
|
||||||
|
$color: nth($pair, 1)
|
||||||
|
&.is-#{$name}
|
||||||
|
&:not(:hover)::after
|
||||||
|
border-color: $color
|
||||||
|
select
|
||||||
|
border-color: $color
|
||||||
|
&:hover,
|
||||||
|
&.is-hovered
|
||||||
|
border-color: darken($color, 5%)
|
||||||
|
&:focus,
|
||||||
|
&.is-focused,
|
||||||
|
&:active,
|
||||||
|
&.is-active
|
||||||
|
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||||
|
// Sizes
|
||||||
|
&.is-small
|
||||||
|
+control-small
|
||||||
|
&.is-medium
|
||||||
|
+control-medium
|
||||||
|
&.is-large
|
||||||
|
+control-large
|
||||||
|
// Modifiers
|
||||||
|
&.is-disabled
|
||||||
|
&::after
|
||||||
|
border-color: $input-disabled-color
|
||||||
|
&.is-fullwidth
|
||||||
|
width: 100%
|
||||||
|
select
|
||||||
|
width: 100%
|
||||||
|
&.is-loading
|
||||||
|
&::after
|
||||||
|
@extend %loader
|
||||||
|
margin-top: 0
|
||||||
|
position: absolute
|
||||||
|
right: 0.625em
|
||||||
|
top: 0.625em
|
||||||
|
transform: none
|
||||||
|
&.is-small:after
|
||||||
|
font-size: $size-small
|
||||||
|
&.is-medium:after
|
||||||
|
font-size: $size-medium
|
||||||
|
&.is-large:after
|
||||||
|
font-size: $size-large
|
||||||
55
sass/form/shared.sass
Normal file
55
sass/form/shared.sass
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
$input-color: $grey-darker !default
|
||||||
|
$input-background-color: $white !default
|
||||||
|
$input-border-color: $grey-lighter !default
|
||||||
|
$input-height: $control-height !default
|
||||||
|
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
|
||||||
|
$input-placeholder-color: rgba($input-color, 0.3) !default
|
||||||
|
|
||||||
|
$input-hover-color: $grey-darker !default
|
||||||
|
$input-hover-border-color: $grey-light !default
|
||||||
|
|
||||||
|
$input-focus-color: $grey-darker !default
|
||||||
|
$input-focus-border-color: $link !default
|
||||||
|
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||||
|
$input-focus-box-shadow-color: rgba($link, 0.25) !default
|
||||||
|
|
||||||
|
$input-disabled-color: $text-light !default
|
||||||
|
$input-disabled-background-color: $background !default
|
||||||
|
$input-disabled-border-color: $background !default
|
||||||
|
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
|
||||||
|
|
||||||
|
$input-arrow: $link !default
|
||||||
|
|
||||||
|
$input-icon-color: $grey-lighter !default
|
||||||
|
$input-icon-active-color: $grey !default
|
||||||
|
|
||||||
|
$input-radius: $radius !default
|
||||||
|
|
||||||
|
=input
|
||||||
|
@extend %control
|
||||||
|
background-color: $input-background-color
|
||||||
|
border-color: $input-border-color
|
||||||
|
border-radius: $input-radius
|
||||||
|
color: $input-color
|
||||||
|
+placeholder
|
||||||
|
color: $input-placeholder-color
|
||||||
|
&:hover,
|
||||||
|
&.is-hovered
|
||||||
|
border-color: $input-hover-border-color
|
||||||
|
&:focus,
|
||||||
|
&.is-focused,
|
||||||
|
&:active,
|
||||||
|
&.is-active
|
||||||
|
border-color: $input-focus-border-color
|
||||||
|
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
|
||||||
|
&[disabled],
|
||||||
|
fieldset[disabled] &
|
||||||
|
background-color: $input-disabled-background-color
|
||||||
|
border-color: $input-disabled-border-color
|
||||||
|
box-shadow: none
|
||||||
|
color: $input-disabled-color
|
||||||
|
+placeholder
|
||||||
|
color: $input-disabled-placeholder-color
|
||||||
|
|
||||||
|
%input
|
||||||
|
+input
|
||||||
205
sass/form/tools.sass
Normal file
205
sass/form/tools.sass
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
$label-color: $grey-darker !default
|
||||||
|
$label-weight: $weight-bold !default
|
||||||
|
|
||||||
|
$help-size: $size-small !default
|
||||||
|
|
||||||
|
.label
|
||||||
|
color: $label-color
|
||||||
|
display: block
|
||||||
|
font-size: $size-normal
|
||||||
|
font-weight: $label-weight
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 0.5em
|
||||||
|
// Sizes
|
||||||
|
&.is-small
|
||||||
|
font-size: $size-small
|
||||||
|
&.is-medium
|
||||||
|
font-size: $size-medium
|
||||||
|
&.is-large
|
||||||
|
font-size: $size-large
|
||||||
|
|
||||||
|
.help
|
||||||
|
display: block
|
||||||
|
font-size: $help-size
|
||||||
|
margin-top: 0.25rem
|
||||||
|
@each $name, $pair in $colors
|
||||||
|
$color: nth($pair, 1)
|
||||||
|
&.is-#{$name}
|
||||||
|
color: $color
|
||||||
|
|
||||||
|
// Containers
|
||||||
|
|
||||||
|
.field
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 0.75rem
|
||||||
|
// Modifiers
|
||||||
|
&.has-addons
|
||||||
|
display: flex
|
||||||
|
justify-content: flex-start
|
||||||
|
.control
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-right: -1px
|
||||||
|
&:not(:first-child):not(:last-child)
|
||||||
|
.button,
|
||||||
|
.input,
|
||||||
|
.select select
|
||||||
|
border-radius: 0
|
||||||
|
&:first-child:not(:only-child)
|
||||||
|
.button,
|
||||||
|
.input,
|
||||||
|
.select select
|
||||||
|
border-bottom-right-radius: 0
|
||||||
|
border-top-right-radius: 0
|
||||||
|
&:last-child:not(:only-child)
|
||||||
|
.button,
|
||||||
|
.input,
|
||||||
|
.select select
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
border-top-left-radius: 0
|
||||||
|
.button,
|
||||||
|
.input,
|
||||||
|
.select select
|
||||||
|
&:not([disabled])
|
||||||
|
&:hover,
|
||||||
|
&.is-hovered
|
||||||
|
z-index: 2
|
||||||
|
&:focus,
|
||||||
|
&.is-focused,
|
||||||
|
&:active,
|
||||||
|
&.is-active
|
||||||
|
z-index: 3
|
||||||
|
&:hover
|
||||||
|
z-index: 4
|
||||||
|
&.is-expanded
|
||||||
|
flex-grow: 1
|
||||||
|
flex-shrink: 1
|
||||||
|
&.has-addons-centered
|
||||||
|
justify-content: center
|
||||||
|
&.has-addons-right
|
||||||
|
justify-content: flex-end
|
||||||
|
&.has-addons-fullwidth
|
||||||
|
.control
|
||||||
|
flex-grow: 1
|
||||||
|
flex-shrink: 0
|
||||||
|
&.is-grouped
|
||||||
|
display: flex
|
||||||
|
justify-content: flex-start
|
||||||
|
& > .control
|
||||||
|
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-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
|
||||||
|
.label
|
||||||
|
font-size: inherit
|
||||||
|
+mobile
|
||||||
|
margin-bottom: 0.5rem
|
||||||
|
+tablet
|
||||||
|
flex-basis: 0
|
||||||
|
flex-grow: 1
|
||||||
|
flex-shrink: 0
|
||||||
|
margin-right: 1.5rem
|
||||||
|
text-align: right
|
||||||
|
&.is-small
|
||||||
|
font-size: $size-small
|
||||||
|
padding-top: 0.375em
|
||||||
|
&.is-normal
|
||||||
|
padding-top: 0.375em
|
||||||
|
&.is-medium
|
||||||
|
font-size: $size-medium
|
||||||
|
padding-top: 0.375em
|
||||||
|
&.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-right: 0.75rem
|
||||||
|
|
||||||
|
.control
|
||||||
|
box-sizing: border-box
|
||||||
|
clear: both
|
||||||
|
font-size: $size-normal
|
||||||
|
position: relative
|
||||||
|
text-align: left
|
||||||
|
// Modifiers
|
||||||
|
&.has-icons-left,
|
||||||
|
&.has-icons-right
|
||||||
|
.input,
|
||||||
|
.select
|
||||||
|
&:focus
|
||||||
|
& ~ .icon
|
||||||
|
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
|
||||||
|
height: $input-height
|
||||||
|
pointer-events: none
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
width: $input-height
|
||||||
|
z-index: 4
|
||||||
|
&.has-icons-left
|
||||||
|
.input,
|
||||||
|
.select select
|
||||||
|
padding-left: $input-height
|
||||||
|
.icon.is-left
|
||||||
|
left: 0
|
||||||
|
&.has-icons-right
|
||||||
|
.input,
|
||||||
|
.select select
|
||||||
|
padding-right: $input-height
|
||||||
|
.icon.is-right
|
||||||
|
right: 0
|
||||||
|
&.is-loading
|
||||||
|
&::after
|
||||||
|
@extend %loader
|
||||||
|
position: absolute !important
|
||||||
|
right: 0.625em
|
||||||
|
top: 0.625em
|
||||||
|
z-index: 4
|
||||||
|
&.is-small:after
|
||||||
|
font-size: $size-small
|
||||||
|
&.is-medium:after
|
||||||
|
font-size: $size-medium
|
||||||
|
&.is-large:after
|
||||||
|
font-size: $size-large
|
||||||
Reference in New Issue
Block a user