You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
4.6 KiB
215 lines
4.6 KiB
$label-color: $text-strong !default |
|
$label-weight: $weight-bold !default |
|
|
|
$help-size: $size-small !default |
|
|
|
$label-colors: $form-colors !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 $label-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) |
|
+ltr-property("margin", -1px) |
|
&:not(:first-child):not(:last-child) |
|
.button, |
|
.input, |
|
.select select |
|
border-radius: 0 |
|
&:first-child:not(:only-child) |
|
.button, |
|
.input, |
|
.select select |
|
+ltr |
|
border-bottom-right-radius: 0 |
|
border-top-right-radius: 0 |
|
+rtl |
|
border-bottom-left-radius: 0 |
|
border-top-left-radius: 0 |
|
&:last-child:not(:only-child) |
|
.button, |
|
.input, |
|
.select select |
|
+ltr |
|
border-bottom-left-radius: 0 |
|
border-top-left-radius: 0 |
|
+rtl |
|
border-bottom-right-radius: 0 |
|
border-top-right-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 |
|
+ltr-property("margin", 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 |
|
+ltr-property("margin", 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) |
|
+ltr-property("margin", 0.75rem) |
|
|
|
.control |
|
box-sizing: border-box |
|
clear: both |
|
font-size: $size-normal |
|
position: relative |
|
text-align: inherit |
|
// 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 |
|
+ltr-position(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
|
|
|