simple-color-picker-jq/src/css/simple-color-picker.styl

Simple Color picker in common.js. (Jquery mod)

pickerSize = 150px
pickerHueWidth = 20px

.Scp
  width pickerSize + pickerHueWidth + 5px
  height pickerSize
  user-select none
  position relative
  
.Scp-saturation
  position relative
  width calc(100% - 25px)
  height 100%
  background linear-gradient(to right, #FFFFFF 0%, #FF0000 100%);
  float left
  margin-right 5px
  
.Scp-brightness
  width 100%
  height 100%
  background linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
  
.Scp-sbSelector
  border 2px solid
  border-color white
  position absolute
  width 14px
  height 14px
  background white
  border-radius 10px
  top -7px
  left -7px
  box-sizing border-box
  z-index 10

.Scp-hue
  width pickerHueWidth
  height 100%
  position relative
  float left
  background linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 34%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 84%, rgb(255, 0, 0) 100%)
    
.Scp-hSelector
  position absolute
  background white
  border-bottom 1px solid black
  right -3px
  width 10px
  height 2px