Angular colorpicker style (stylus)

_colorpicker.styl

colorpickerContainerWidth = 192px
paletteColorSize = 24px

.color-container
  position fixed
  width colorpickerContainerWidth
  z-index 10000
  padding 5px
  background: #f9f9f9
  border 1px solid gray
  border-radius 0px 5px 5px 0px
  overflow hidden
  opacity 0
  top -1000px
  left -1000px
  clearfix()

  &.visible
    opacity 1

  .fix-container
    position relative
    top 0
    left 0
    margin 0
    padding 0

  .color-palette
    position: relative
    display block
    clearfix()
    li 
      cursor pointer
      position relative
      float left
      height paletteColorSize
      width paletteColorSize
      background:url('../images/transparent-bg.png') !important

      .preview-box
        position absolute
        top 0
        left 0
        height paletteColorSize
        width paletteColorSize
        margin 0
        padding 0

      &.color-preview
        height paletteColorSize*2 - 4px
        width paletteColorSize*2 - 4px
        margin 0 4px 4px 0
        //border: 2px solid white
        .preview-box
          height paletteColorSize*2 - 4px
          width paletteColorSize*2 - 4px
          

  .color-sat-val
    //border-radius: 50%
    position: relative
    height: colorpickerContainerWidth
    width: colorpickerContainerWidth
    background-color: red
    overflow: hidden

    .color-sat, .color-val
      //border-radius: 50%
      position: absolute
      top: 0
      left: 0
      height: 100%
      width: 100%

    .color-sat
      background-image: linear-gradient(left, #fff, rgba(204, 154, 129, 0))

      .color-val
        background-image: linear-gradient(bottom, #000, rgba(204, 154, 129, 0))

    .color-dragger
      position: absolute
      height: (colorpickerContainerWidth / 20)
      width: (colorpickerContainerWidth / 20)
      border: 1px solid white

  .color-hue
    position: relative
    height: paletteColorSize
    width: colorpickerContainerWidth
    background: linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)
    overflow: hidden

    .color-slider
      position: absolute
      height: (colorpickerContainerWidth / 5)
      width: (colorpickerContainerWidth / 20)
      top: 0
      border: 1px solid white
  
  .color-opacity
    width 100% !important
    .range
      width 100% !important

  .color-css-value
    border: 0px none
    background: transparent
    width: colorpickerContainerWidth
    font-size: 18px
    text-align: right

.pal-pre:first-child
  background-color: green 

// Animations

.color-container
  //max-height 400px
  //max-width colorpickerContainerWidth
  //transition max-height ease-in-out 0.1s, max-width ease-in-out 0.1s
  //border-spacing 0
  opacity 1
  transition opacity ease-in-out 0.09s

.color-container.ng-hide-add, .color-container.ng-hide-remove
  border-spacing 0
  display block!important
 
.color-container.ng-hide
  //border-spacing 0
  opacity 0