quasar/src/ie-compat/ie.styl

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

str-fr(selector, name, i = '')
  unquote(replace(unquote('<i>'), unquote(i), replace(unquote('<name>'), unquote(name), unquote(selector))))

str-fe(selector, name, noProc, i = '')
  if noProc
    return str-fr(selector, name, i)
  return unquote(join(',', str-fr(selector, '', i) str-fr(selector, name, i)))

ie_style = @block

  /* Min Height */
  .q-item,
  .q-toolbar,
  .q-notification
    &:after
      content: ''
      font-size: 0
      visibility: collapse
      display: inline
      width: 0

  .q-banner > .q-banner__avatar
    min-height: 38px
  .q-banner--dense > .q-banner__avatar
    min-height: 20px
  .q-item:after
    min-height: 32px
  .q-list--dense > .q-item,
  .q-item--dense
    &after
      min-height: 24px
  .q-toolbar:after
    min-height: $toolbar-min-height
  .q-notification
    &--standard:after
      min-height: 48px
    &--multi-line
      min-height: 68px

  /* Flex Basis */
  .q-btn__wrapper,
  .q-time__content,
  .q-toolbar__title,
  .q-menu .q-item__section--main,
  .q-table__middle
    flex-basis: auto

  .q-banner__content
    flex-basis: 0 !important

  .q-menu,
  .q-dialog__inner
    > .q-banner > .q-banner__content
      flex-basis: auto !important

  .q-tab__content
    flex-basis: auto
    min-width: 100%

  .q-card__actions--vert
    flex: 0 0 auto

  .column
    min-width: 0%

  for $name, $size in $sizes
    $noProcNotZero = $size > 0

    @media (min-width $size)
      {str-fe('.col<name>', s('-%s', unquote($name)), $noProcNotZero)}
        .row > &, .flex > &
          flex-basis: auto
          min-width: 0%

  /* QItem */
  .q-item
    &__section
      &--avatar
        // overwritten above by min-width 0%
        min-width: 56px

  /* QBtn */
  button.q-btn--actionable:active:hover
    .q-btn__wrapper
      margin: -1px 1px 1px -1px

  .q-btn-group
    &--push
      > button.q-btn--push.q-btn--actionable:active:hover
        .q-btn__wrapper
          margin: 1px 1px -1px -1px

  .q-btn
    overflow: visible

    &--wrap
      flex-direction: row

  /* QCarousel */
  .q-carousel__slide > *
    max-width: 100%

  /* QTabs */
  .q-tabs--vertical
    .q-tab__indicator
      height: auto

  /* QSpinner */
  .q-spinner
    animation: q-ie-spinner 2s linear infinite /* rtl:ignore */
    transform-origin: center center /* rtl:ignore */
    opacity: .5

    &.q-spinner-mat .path
      stroke-dasharray: 89, 200

  /* QCheckbox indeterminate */
  .q-checkbox
    &__indet
      opacity: 0
    &__inner--indet
      .q-checkbox__indet
        opacity: 1

  /* QRadio */
  .q-radio
    &__check
      opacity: 0
    &__inner--truthy
      .q-radio__check
        opacity: 1

  /* QDate, QTime */
  .q-date__main
    min-height: 290px !important
  .q-date__months
    align-items: stretch
  .q-time--portrait .q-time__main
    display: flex
    flex-direction: column
    flex-wrap: nowrap
    flex: 1 0 auto

  /* QField */
  .q-field
    &__prefix, &__suffix
      flex: 1 0 auto

    &__bottom--stale
      .q-field__messages
        left: 12px

    &--borderless, &--standard
      .q-field__bottom--stale
        .q-field__messages
          left: 0

    &--float .q-field__label
      max-width: 100%

  /* focus-helper */
  .q-focus-helper
    z-index: 1

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
  {ie_style}

@supports (-ms-ime-align:auto)
  {ie_style}

@keyframes q-ie-spinner
  0%
    opacity: .5
  50%
    opacity: 1
  100%
    opacity: .5