quasar/src/components/color/QColor.styl

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

.q-color-picker
  overflow hidden
  background white
  max-width 350px
  vertical-align top

  min-width 150px

  border-radius $generic-border-radius
  box-shadow $shadow-2

  &__header
    height 88px

    input
      line-height 24px
      border 0
    .q-tab--inactive
      background linear-gradient(to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.1))

  &__error-icon
    bottom 2px
    right 2px
    font-size 24px
    opacity 0
    transition opacity .3s ease-in

  &__header-content
    position relative
    background white

    &--light
      color black

    &--dark
      color white
      .q-tab--inactive
        &:before
          content ''
          position absolute
          top 0
          right 0
          bottom 0
          left 0
          background rgba(255, 255, 255, .2)

  &__header-banner
    height 52px
  &__header-bg
    background white
    background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important

  &__footer
    .q-tab--inactive
      background linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.1))

  /* Saturation Tab */

  &__spectrum
    width 100%
    height 100%

  &__spectrum-tab
    padding 10px

  &__spectrum-white
    background linear-gradient(to right, white, rgba(255, 255, 255, 0))

  &__spectrum-black
    background linear-gradient(to top, black, rgba(0, 0, 0, 0))

  &__spectrum-circle
    width 10px
    height 10px
    box-shadow 0 0 0 1.5px white, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4)
    border-radius 50%
    transform translate(-5px, -5px)

  &__hue .q-slider__track-container
    background linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) // @stylint ignore
    opacity 1

  &__alpha .q-slider__track-container
    color white
    opacity 1
    height 8px
    background-color white
    background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
    &:after
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background linear-gradient(90deg, rgba(255, 255, 255, 0), $grey-7)

  &__sliders
    padding 4px 0 12px

    .q-slider__track-container
      height 9px

    .q-slider__track
      display none

    .q-slider__thumb-container
      top 4px

    .q-slider__thumb
      stroke-width 13px

    .q-slider
      height 20px
      margin-top 8px
      color $grey-9

  /* Tune Tab */

  &__tune-tab

    .q-slider
      margin-left 18px
      margin-right 18px

    input
      font-size 11px
      border 1px solid $grey-4
      border-radius $generic-border-radius
      width 4em

  /* Palette Tab */

  &__palette-rows
    &--editable .q-color-picker__cube
      cursor pointer

  &__cube
    padding-bottom 10%
    width 10% !important

  /* Generic  */

  input
    color inherit
    background transparent
    outline 0
    text-align center
  .q-tabs
    overflow hidden
  .q-tab
    &--active
      box-shadow 0px 0px 14px 3px rgba(0,0,0,0.2)
      .q-focus-helper
        display none
  .q-tab__indicator
    display none
  .q-tab-panels
    background inherit

  &--dark

    background $grey-9
    color white

    .q-color-picker__tune-tab input
      border 1px solid alpha(#fff, .3)

    .q-slider
      color $grey-5