quasar-framework/src/components/input-frame/input-frame.ios.styl

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

.q-if, .q-if:before, .q-if:after, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control, .q-field-bottom
  transition $input-frame-transition

.q-if
  min-height 32px
  outline 0
  padding-bottom 8px

  &:not(.q-if-hide-underline):not(.q-if-inverted)
    &:before, &:after
      content ''
  &:before, &:after
    position absolute
    bottom 0
    left 0
    right 0
    background currentColor
  &:before
    height 1px
    color $light
    transform scaleY(1)
  &:after
    width 0
    height 2px
    color currentColor

  &:hover:before
    color black

  .group
    margin -5px
    &:not(:first-child)
      margin-top 0

.q-if-hide-underline:not(.q-if-inverted)
  min-height 24px
  padding-bottom 0

.q-if-focusable
  outline 0
  cursor pointer

.q-if-inner
  min-height 24px !important
  align-items center

.q-if-has-label
  min-height 41px
  .q-if-inner
    min-height 36px !important
    padding-top 12px

.q-if-label
  pointer-events none
  user-select none
  top 15px
  left 0
  right 0
  transform-origin left top 0
  transform scale(1) translate(0, 0)
.q-if-label-above
  transform scale(.75) translate(0, -22px)

.q-if-addon
  pointer-events none
  opacity 0
.q-if-addon-left
  padding-right 1px
.q-if-addon-right
  padding-left 1px
.q-if-addon-visible
  opacity 1

.q-if-control
  cursor pointer
  font-size 24px
  align-self flex-end
  &.q-icon
    cursor pointer
  &:hover
    opacity .7
.q-if-control-before
  margin-left 0
  margin-right 4px

.q-if-label, .q-if-addon, .q-if-control
  color $form-dark

.q-if-inverted
  min-height 38px
  border-radius 2px
  padding 8px
  box-shadow $shadow-1

  .q-input-target
    color inherit
  .q-if-label, .q-if-addon,  .q-if-control
    color #ddd

div.q-input-target
  min-width 35px

.q-if-dark
  &:hover:before
    color white
  &:not(.q-if-inverted-light)
    .q-input-target
      color white

.q-if-inverted-light
  .q-if-label, .q-if-addon,  .q-if-control
    color #656565

.q-if-focused
  &:after
    width 100%
  .q-if-label, .q-if-addon, .q-if-control
    color currentColor !important

.q-if-error
  &:before, &:after, &:not(.q-if-inverted) .q-if-label
    color $negative
  &:hover:before
    color lighten($negative, 46%)

.q-if-warning
  &:before, &:after, &:not(.q-if-inverted) .q-if-label
    color $warning
  &:hover:before
    color lighten($warning, 46%)

.q-if-disabled
  cursor not-allowed !important
  .q-if-label, .q-if-control
    opacity .6
    cursor not-allowed !important
  &:before
    background-image linear-gradient(90deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .38) 33%, transparent 0)
    background-color transparent
    background-position bottom
    background-size 3px 1px
    background-repeat repeat-x
  &.q-if-dark:before
    background-image linear-gradient(90deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) 33%, transparent 0)