quasar/src/components/select/QSelect.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.q-select
  &--without-input
    .q-field__control
      cursor pointer
  &--with-input
    .q-field__control
      cursor text

  &__input
    border 0
    outline 0 !important // needed for FF
    background transparent
    min-width 50px !important
    padding 0
    height 0
    min-height 24px
    line-height 24px

    &--padding
      padding-left 4px

  &__dropdown-icon
    cursor pointer

  &.q-field--readonly
    .q-field__control, .q-select__dropdown-icon
      cursor default
    &.q-field--labeled
      .q-select__input
        cursor default
    &.q-field--float
      .q-select__input
        cursor text

  &__dialog
    width 90vw !important
    max-width 90vw !important
    max-height calc(100vh - 70px) !important
    background white
    display flex
    flex-direction column

    > .scroll
      position relative
      background inherit

  &__menu--dark
    color white
    background $grey-9

// addressbar always gets shown, so need to slim this down
body.mobile:not(.native-mobile) .q-select__dialog
  max-height calc(100vh - 108px) !important

body.platform-android

  &.native-mobile .q-dialog__inner--top .q-select__dialog
    max-height calc(100vh - 24px) !important

  &:not(.native-mobile) .q-dialog__inner--top .q-select__dialog
    max-height calc(100vh - 80px) !important

body.platform-ios

  &.native-mobile .q-dialog__inner--top
    > div
      border-radius $generic-border-radius

    .q-select__dialog--focused
      max-height 47vh !important

  &:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--focused
    max-height 50vh !important