node_modules/bulma/sass/form/tools.sass

   1 $label-color: $text-strong !default
   2 $label-weight: $weight-bold !default
   3
   4 $help-size: $size-small !default
   5
   6 .label
   7   color: $label-color
   8   display: block
   9   font-size: $size-normal
  10   font-weight: $label-weight
  11   &:not(:last-child)
  12     margin-bottom: 0.5em
  13   // Sizes
  14   &.is-small
  15     font-size: $size-small
  16   &.is-medium
  17     font-size: $size-medium
  18   &.is-large
  19     font-size: $size-large
  20
  21 .help
  22   display: block
  23   font-size: $help-size
  24   margin-top: 0.25rem
  25   @each $name, $pair in $colors
  26     $color: nth($pair, 1)
  27     &.is-#{$name}
  28       color: $color
  29
  30 // Containers
  31
  32 .field
  33   &:not(:last-child)
  34     margin-bottom: 0.75rem
  35   // Modifiers
  36   &.has-addons
  37     display: flex
  38     justify-content: flex-start
  39     .control
  40       &:not(:last-child)
  41         margin-right: -1px
  42       &:not(:first-child):not(:last-child)
  43         .button,
  44         .input,
  45         .select select
  46           border-radius: 0
  47       &:first-child:not(:only-child)
  48         .button,
  49         .input,
  50         .select select
  51           border-bottom-right-radius: 0
  52           border-top-right-radius: 0
  53       &:last-child:not(:only-child)
  54         .button,
  55         .input,
  56         .select select
  57           border-bottom-left-radius: 0
  58           border-top-left-radius: 0
  59       .button,
  60       .input,
  61       .select select
  62         &:not([disabled])
  63           &:hover,
  64           &.is-hovered
  65             z-index: 2
  66           &:focus,
  67           &.is-focused,
  68           &:active,
  69           &.is-active
  70             z-index: 3
  71             &:hover
  72               z-index: 4
  73       &.is-expanded
  74         flex-grow: 1
  75         flex-shrink: 1
  76     &.has-addons-centered
  77       justify-content: center
  78     &.has-addons-right
  79       justify-content: flex-end
  80     &.has-addons-fullwidth
  81       .control
  82         flex-grow: 1
  83         flex-shrink: 0
  84   &.is-grouped
  85     display: flex
  86     justify-content: flex-start
  87     & > .control
  88       flex-shrink: 0
  89       &:not(:last-child)
  90         margin-bottom: 0
  91         margin-right: 0.75rem
  92       &.is-expanded
  93         flex-grow: 1
  94         flex-shrink: 1
  95     &.is-grouped-centered
  96       justify-content: center
  97     &.is-grouped-right
  98       justify-content: flex-end
  99     &.is-grouped-multiline
 100       flex-wrap: wrap
 101       & > .control
 102         &:last-child,
 103         &:not(:last-child)
 104           margin-bottom: 0.75rem
 105       &:last-child
 106         margin-bottom: -0.75rem
 107       &:not(:last-child)
 108         margin-bottom: 0
 109   &.is-horizontal
 110     +tablet
 111       display: flex
 112
 113 .field-label
 114   .label
 115     font-size: inherit
 116   +mobile
 117     margin-bottom: 0.5rem
 118   +tablet
 119     flex-basis: 0
 120     flex-grow: 1
 121     flex-shrink: 0
 122     margin-right: 1.5rem
 123     text-align: right
 124     &.is-small
 125       font-size: $size-small
 126       padding-top: 0.375em
 127     &.is-normal
 128       padding-top: 0.375em
 129     &.is-medium
 130       font-size: $size-medium
 131       padding-top: 0.375em
 132     &.is-large
 133       font-size: $size-large
 134       padding-top: 0.375em
 135
 136 .field-body
 137   .field .field
 138     margin-bottom: 0
 139   +tablet
 140     display: flex
 141     flex-basis: 0
 142     flex-grow: 5
 143     flex-shrink: 1
 144     .field
 145       margin-bottom: 0
 146     & > .field
 147       flex-shrink: 1
 148       &:not(.is-narrow)
 149         flex-grow: 1
 150       &:not(:last-child)
 151         margin-right: 0.75rem
 152
 153 .control
 154   box-sizing: border-box
 155   clear: both
 156   font-size: $size-normal
 157   position: relative
 158   text-align: left
 159   // Modifiers
 160   &.has-icons-left,
 161   &.has-icons-right
 162     .input,
 163     .select
 164       &:focus
 165         & ~ .icon
 166           color: $input-icon-active-color
 167       &.is-small ~ .icon
 168         font-size: $size-small
 169       &.is-medium ~ .icon
 170         font-size: $size-medium
 171       &.is-large ~ .icon
 172         font-size: $size-large
 173     .icon
 174       color: $input-icon-color
 175       height: $input-height
 176       pointer-events: none
 177       position: absolute
 178       top: 0
 179       width: $input-height
 180       z-index: 4
 181   &.has-icons-left
 182     .input,
 183     .select select
 184       padding-left: $input-height
 185     .icon.is-left
 186       left: 0
 187   &.has-icons-right
 188     .input,
 189     .select select
 190       padding-right: $input-height
 191     .icon.is-right
 192       right: 0
 193   &.is-loading
 194     &::after
 195       @extend %loader
 196       position: absolute !important
 197       right: 0.625em
 198       top: 0.625em
 199       z-index: 4
 200     &.is-small:after
 201       font-size: $size-small
 202     &.is-medium:after
 203       font-size: $size-medium
 204     &.is-large:after
 205       font-size: $size-large