quasar-framework/src/components/field/field.ios.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.q-field-icon
  width $field-icon-size
  height $field-icon-size
  min-width $field-icon-size
  font-size $field-icon-size
  margin-right 16px
  color $field-label-color

.q-field-label
  padding-right 8px
  color $field-label-color
.q-field-label-inner
  min-height $field-icon-size
.q-field-label-hint
  padding-left 8px

.q-field-bottom
  font-size 12px
  padding-top 8px
  color $form-dark
.q-field-no-input
  margin-top 8px
  border-top 1px solid rgba(0, 0, 0, .12)
.q-field-counter
  color $field-label-color
  padding-left 8px

.q-field-dark
  .q-field-label, .q-field-icon, .q-field-counter, .q-field-bottom
    color $form-light
  .q-field-no-input
    border-top 1px solid $field-label-color

.q-field-with-error
  .q-field-icon, .q-field-label, .q-field-bottom
    color $negative
  .q-field-no-input
    border-top 1px solid $negative

.q-field-with-warning
  .q-field-icon, .q-field-label, .q-field-bottom
    color $warning
  .q-field-no-input
    border-top 1px solid $warning

qfield-vertical()
  .q-field-label + .q-field-content
    padding-top 8px
  &.q-field-floating.q-field-no-label
    .q-field-margin
      margin-top 12px
  &.q-field-no-label .q-field-label
    display none

qfield-horizontal()
  &.q-field-floating
    .q-field-margin
      margin-top 12px
  .q-field-label + .q-field-content
    padding-top 0

.q-field-vertical
  qfield-vertical()
.q-field-horizontal
  qfield-horizontal()

@media (max-width $breakpoint-xs-max)
  .q-field-responsive
    qfield-vertical()

@media (min-width $breakpoint-sm-min)
  .q-field-responsive
    qfield-horizontal()