253 lines
4.7 KiB
Sass
253 lines
4.7 KiB
Sass
|
=form-control
|
||
|
|
+control
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: nth($pair, 1)
|
||
|
|
&.is-#{$name}
|
||
|
|
border-color: $color
|
||
|
|
|
||
|
|
.input
|
||
|
|
+form-control
|
||
|
|
box-shadow: inset 0 1px 2px rgba($black, 0.1)
|
||
|
|
max-width: 100%
|
||
|
|
width: 100%
|
||
|
|
&[type="search"]
|
||
|
|
border-radius: 290486px
|
||
|
|
// 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
|
||
|
|
|
||
|
|
.textarea
|
||
|
|
@extend .input
|
||
|
|
display: block
|
||
|
|
line-height: 1.2
|
||
|
|
max-height: 600px
|
||
|
|
max-width: 100%
|
||
|
|
min-height: 120px
|
||
|
|
min-width: 100%
|
||
|
|
padding: 10px
|
||
|
|
resize: vertical
|
||
|
|
|
||
|
|
%control-with-element
|
||
|
|
cursor: pointer
|
||
|
|
display: inline-block
|
||
|
|
line-height: 16px
|
||
|
|
position: relative
|
||
|
|
vertical-align: top
|
||
|
|
input
|
||
|
|
cursor: pointer
|
||
|
|
&:hover
|
||
|
|
color: $control-hover
|
||
|
|
&.is-disabled
|
||
|
|
color: $text-light
|
||
|
|
pointer-events: none
|
||
|
|
input
|
||
|
|
pointer-events: none
|
||
|
|
|
||
|
|
.checkbox
|
||
|
|
@extend %control-with-element
|
||
|
|
|
||
|
|
.radio
|
||
|
|
@extend %control-with-element
|
||
|
|
& + .radio
|
||
|
|
margin-left: 10px
|
||
|
|
|
||
|
|
.select
|
||
|
|
display: inline-block
|
||
|
|
height: 32px
|
||
|
|
position: relative
|
||
|
|
vertical-align: top
|
||
|
|
select
|
||
|
|
+form-control
|
||
|
|
cursor: pointer
|
||
|
|
display: block
|
||
|
|
outline: none
|
||
|
|
padding-right: 36px
|
||
|
|
&:hover
|
||
|
|
border-color: $control-hover-border
|
||
|
|
&::ms-expand
|
||
|
|
display: none
|
||
|
|
&.is-fullwidth
|
||
|
|
width: 100%
|
||
|
|
select
|
||
|
|
width: 100%
|
||
|
|
&:after
|
||
|
|
+arrow($link)
|
||
|
|
margin-top: -6px
|
||
|
|
right: 16px
|
||
|
|
top: 50%
|
||
|
|
&:hover
|
||
|
|
&:after
|
||
|
|
border-color: $link-hover
|
||
|
|
&.is-small
|
||
|
|
height: 24px
|
||
|
|
select
|
||
|
|
+control-small
|
||
|
|
padding-right: 28px
|
||
|
|
&.is-medium
|
||
|
|
height: 40px
|
||
|
|
select
|
||
|
|
+control-medium
|
||
|
|
padding-right: 44px
|
||
|
|
&.is-large
|
||
|
|
height: 48px
|
||
|
|
select
|
||
|
|
+control-large
|
||
|
|
padding-right: 52px
|
||
|
|
|
||
|
|
.label
|
||
|
|
color: $text-strong
|
||
|
|
display: block
|
||
|
|
font-weight: bold
|
||
|
|
&:not(:last-child)
|
||
|
|
margin-bottom: 5px
|
||
|
|
|
||
|
|
.help
|
||
|
|
display: block
|
||
|
|
font-size: $size-small
|
||
|
|
margin-top: 5px
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: nth($pair, 1)
|
||
|
|
&.is-#{$name}
|
||
|
|
color: $color
|
||
|
|
|
||
|
|
// Containers
|
||
|
|
|
||
|
|
.control-label
|
||
|
|
+mobile
|
||
|
|
margin-bottom: 5px
|
||
|
|
+tablet
|
||
|
|
flex-grow: 1
|
||
|
|
margin-right: 20px
|
||
|
|
padding-top: 7px
|
||
|
|
text-align: right
|
||
|
|
|
||
|
|
.control
|
||
|
|
position: relative
|
||
|
|
text-align: left
|
||
|
|
&:not(:last-child)
|
||
|
|
margin-bottom: 10px
|
||
|
|
// Modifiers
|
||
|
|
&.has-addons
|
||
|
|
display: flex
|
||
|
|
justify-content: flex-start
|
||
|
|
.button,
|
||
|
|
.input,
|
||
|
|
.select
|
||
|
|
border-radius: 0
|
||
|
|
margin-right: -1px
|
||
|
|
width: auto
|
||
|
|
&:hover
|
||
|
|
z-index: 2
|
||
|
|
&:active,
|
||
|
|
&:focus
|
||
|
|
z-index: 3
|
||
|
|
&:first-child
|
||
|
|
border-radius: $radius 0 0 $radius
|
||
|
|
select
|
||
|
|
border-radius: $radius 0 0 $radius
|
||
|
|
&:last-child
|
||
|
|
border-radius: 0 $radius $radius 0
|
||
|
|
select
|
||
|
|
border-radius: 0 $radius $radius 0
|
||
|
|
&.is-expanded
|
||
|
|
flex-grow: 1
|
||
|
|
&.has-addons-centered
|
||
|
|
justify-content: center
|
||
|
|
&.has-addons-right
|
||
|
|
justify-content: flex-end
|
||
|
|
&.has-addons-fullwidth
|
||
|
|
.button,
|
||
|
|
.input,
|
||
|
|
.select
|
||
|
|
flex-grow: 1
|
||
|
|
&.has-icon
|
||
|
|
& > .fa
|
||
|
|
+fa(14px, 24px)
|
||
|
|
color: $text-light
|
||
|
|
pointer-events: none
|
||
|
|
position: absolute
|
||
|
|
top: 4px
|
||
|
|
z-index: 4
|
||
|
|
.input
|
||
|
|
&:focus + .fa
|
||
|
|
color: $text-strong
|
||
|
|
&.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
|
||
|
|
&:not(.has-icon-right)
|
||
|
|
& > .fa
|
||
|
|
left: 4px
|
||
|
|
.input
|
||
|
|
padding-left: 32px
|
||
|
|
&.is-small
|
||
|
|
padding-left: 24px
|
||
|
|
& + .fa
|
||
|
|
left: 0
|
||
|
|
&.is-medium
|
||
|
|
padding-left: 40px
|
||
|
|
& + .fa
|
||
|
|
left: 8px
|
||
|
|
&.is-large
|
||
|
|
padding-left: 48px
|
||
|
|
& + .fa
|
||
|
|
left: 12px
|
||
|
|
&.has-icon-right
|
||
|
|
& > .fa
|
||
|
|
right: 4px
|
||
|
|
.input
|
||
|
|
padding-right: 32px
|
||
|
|
&.is-small
|
||
|
|
padding-right: 24px
|
||
|
|
& + .fa
|
||
|
|
right: 0
|
||
|
|
&.is-medium
|
||
|
|
padding-right: 40px
|
||
|
|
& + .fa
|
||
|
|
right: 8px
|
||
|
|
&.is-large
|
||
|
|
padding-right: 48px
|
||
|
|
& + .fa
|
||
|
|
right: 12px
|
||
|
|
&.is-grouped
|
||
|
|
display: flex
|
||
|
|
justify-content: flex-start
|
||
|
|
& > .control
|
||
|
|
&:not(:last-child)
|
||
|
|
margin-bottom: 0
|
||
|
|
margin-right: 10px
|
||
|
|
&.is-expanded
|
||
|
|
flex-grow: 1
|
||
|
|
&.is-grouped-centered
|
||
|
|
justify-content: center
|
||
|
|
&.is-grouped-right
|
||
|
|
justify-content: flex-end
|
||
|
|
&.is-horizontal
|
||
|
|
+tablet
|
||
|
|
display: flex
|
||
|
|
& > .control
|
||
|
|
display: flex
|
||
|
|
flex-grow: 5
|
||
|
|
&.is-loading
|
||
|
|
&:after
|
||
|
|
@extend .loader
|
||
|
|
position: absolute !important
|
||
|
|
right: 8px
|
||
|
|
top: 8px
|