frontend/src/css/components/quasar/field.styl

// QUASAR COMPONENT DEFAULT STYLING
// ===================== Q FIELD COMPPONENT ============================

$field-font-factor = 1.5  // relative to base font size
$field-label-font-factor = 1 // relative to field font size

$field-color               = $secondary-5
$field-text-color          = white // $secondary-1
$field-label-color         = $secondary-1 // field-text-color
$field-seperator-height    = $secondary-5

$field-focused-color       = $field-color
$field-focused-text-color  = $field-text-color

$field-dropdown-color               = $field-text-color
$field-dropdown-text-color          = $field-color

$field-disabled-opacity = 80%  // percent 0-1   1 = none

$field-check-color          = $field-text-color

// Classes
.q-field__native
  rfs($rfs-base-font-size * $field-font-factor)
  color $field-text-color
  .q-checkbox__label
  input
    color $field-text-color

.q-checkbox__label
.q-field__label
  rfs($rfs-base-font-size * $field-font-factor)
  color $field-label-color
  &.no-pointer-events
    rfs($rfs-base-font-size * $field-font-factor * $field-label-font-factor)
    padding-bottom .8em // needs to be dynamic based on font size

.q-field
  // margin .5em
  padding .2em 1em
  background $field-color
  &.q-field--focused
    .q-field__control
      background $field-focused-color
      color $field-focused-text-color
  .q-select__dropdown-icon
  .q-radio__inner
    color $field-text-color
  .q-checkbox__bg
    background $field-color
    color $field-text-color
  .q-checkbox__svg
    color  $field-check-color
  &.q-chips-checkbox-select__options
    background $field-dropdown-color
    .q-checkbox__inner
    .q-checkbox__label
      color $field-dropdown-text-color
    .q-checkbox__bg
      background $field-dropdown-color
      color $field-dropdown-text-color
    .q-checkbox__svg
      color  $field-dropdown-text-color
  &.q-select__options
    padding .2em
    .q-item
      background $field-dropdown-color
    .q-item__label
      color  $field-dropdown-text-color

.q-field__append
  color  $field-label-color

.q-field--disabled
  .q-field__control
    >div
      opacity $field-disabled-opacity !important