alpaca/dist/lib/pick-a-color-m/src/less/pick-a-color.less

Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide

/*
* Pick-a-Color LESS v1.2.x
* Copyright 2013 Lauren Sperber and Broadstreet Ads
* https://github.com/lauren/pick-a-color/blob/master/LICENSE
*/

@import "bootstrap-src/variables.less"; 
@import "bootstrap-src/mixins.less";

//// variables

// basic colors

@black: #000;
@white: #fff;
@pacRed:hsl(0,100%,50%);
@pacOrange:hsl(24, 100%, 50%);
@pacYellow:hsl(60, 100%, 50%);
@pacGreen:hsl(120, 100%, 25%);
@pacBrightGreen:hsl(120, 100%, 50%);
@pacBlue:hsl(240, 100%, 50%);
@pacTeal:hsl(180, 100%, 50%);
@pacIndigo:hsl(275, 100%, 25%);
@pacViolet:hsl(300, 76%, 72%);
@pacLightPurple:hsl(300, 100%, 50%);
@pacPurple:hsl(300, 100%, 25%);
@pacBwMidpoint:lighten(@black,50%);

// widths

@color-box-width: 200px;
@color-box-width-phone: 160px;
@color-band-width: 11px;
@color-band-width-phone: 21px;
@advanced-color-box-width: 300px;
@advanced-color-box-width-phone: 270px;

@border-radius-base: 4px;
@defaultShadow: inset 0px 0px 2px 2px rgba(0, 0, 0, 0.075);

//// mixins

.borders-shadows (@radius: 4px, @width: 1px, @color: @btn-default-border, @style: solid, @shadow: @defaultShadow) {
  border: @width @style @color;
  border-radius: @radius;
  .box-shadow(@shadow);
}

.tab-borders-shadows (@radius: 4px, @width: 1px, @color: @btn-default-border, @style: solid) {
  border-top:@width @style @color;
  border-right:@width @style @color;
  border-left:@width @style @color;
  .border-top-radius(@radius);
}

.three-color-spectrum (@mid: @pacRed) {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0.0, lighten(@mid,50%)), color-stop(0.5, @mid), color-stop(1.0, darken(@mid,50%)));
  background-image: -moz-linear-gradient(left center, lighten(@mid,50%) 0%, @mid 50%, darken(@mid,50%) 100%);
  background-image: -webkit-linear-gradient(left, lighten(@mid,50%) 0%, @mid 50%, darken(@mid,50%) 100%);
  background-image: -o-linear-gradient(left, lighten(@mid,50%) 0%, @mid 50%, darken(@mid,50%) 100%);
  background-image: linear-gradient(to right, lighten(@mid,50%) 0%, @mid 50%, darken(@mid,50%) 100%);
  background-repeat: repeat-x;
}

.full-spectrum (@one: @pacRed, @two: @pacYellow, @three: @pacBrightGreen, @four: @pacTeal, @five: @pacBlue, @six: @pacLightPurple, @seven: @pacRed) {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @one), color-stop(17%, @two), color-stop(34%,@three), color-stop(51%, @four), color-stop(68%, @five), color-stop(85%, @six), color-stop(100%, @seven));
  background-image: -moz-linear-gradient(left center, @one 0%, @two 17%, @three 24%, @four 51%, @five 68%, @six 85%, @seven 100%);
  background-image: -webkit-linear-gradient(left, @one 0%, @two 17%, @three 24%, @four 51%, @five 68%, @six 85%, @seven 100%);
  background-image: -o-linear-gradient(left, @one 0%, @two 17%, @three 24%, @four 51%, @five 68%, @six 85%, @seven 100%);
  background-image: linear-gradient(to right, @one 0%, @two 17%, @three 24%, @four 51%, @five 68%, @six 85%, @seven 100%);
  background-repeat: repeat-x;
}

.saturation-spectrum (@color: @pacRed) {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0.0, desaturate(@color,100%)), color-stop(0.5, @color), color-stop(1.0, saturate(@color,100%)));
  background-image: -moz-linear-gradient(left center, desaturate(@color,100%) 0%, @color 50%, saturate(@color,100%) 100%);
  background-image: -webkit-linear-gradient(left, desaturate(@color,100%) 0%, @color 50%, saturate(@color,100%) 100%);
  background-image: -o-linear-gradient(left, desaturate(@color,100%) 0%, @color 50%, saturate(@color,100%) 100%);
  background-image: linear-gradient(to right, desaturate(@color,100%) 0%, @color 50%, saturate(@color,100%) 100%);
  background-repeat: repeat-x;
}

// IE spectrums

.spectrum-0(@color) {
  #gradient.horizontal(lighten(@color,50%),@color);
  .border-left-radius(@border-radius-base);
}

.spectrum-1(@color) {
  #gradient.horizontal(@color,darken(@color,50%));
  .border-right-radius(@border-radius-base);
}

.saturation-spectrum-0(@color) {
  #gradient.horizontal(desaturate(@color,100%),desaturate(@color,50%));
  .border-left-radius(@border-radius-base);
  width: @advanced-color-box-width / 2;
  @media screen and (max-width: (@screen-md - 1px)) {
    width:@advanced-color-box-width-phone / 2;
  }
}

.saturation-spectrum-1(@color) {
  #gradient.horizontal(desaturate(@color,50%),@color);
  .border-right-radius(@border-radius-base);
  width: @advanced-color-box-width / 2;
  @media screen and (max-width: (@screen-md - 1px)) {
    width:@advanced-color-box-width-phone / 2;
  }
}

//// actual styles

// input field

.pick-a-color-markup {

	* {
		.box-sizing(border-box);
	}

  .hex-pound {
  	padding-left: 8px;
  	padding-right: 8px;
    @media screen and (max-width: (@screen-md - 1px)) {
      padding:3px 5px 0px 5px;
      min-height:30px;
    }
  }

  .pick-a-color {
  	padding: 5px;
    @media screen and (max-width: (@screen-md - 1px)) {
      width: 100%;
      font-size:@font-size-large;
      padding:9px;
      min-width: 222px;
      height: 47px;
    }
  }

  // button to open picker

  .input-group-btn {
    .color-dropdown {
      padding:6px 5px;
      &.no-hex {
        .border-left-radius(@border-radius-base);
      }
      &:focus {
      	background-color: #fff;
      }
      @media screen and (max-width: (@screen-md - 1px)) {
        height:47px;
      }
    }
  }
  
  .color-preview {
    .borders-shadows;
    height:1.429em;
    width:1.429em;
    display:inline-block;
    cursor:pointer;
    margin-right: 5px;
    &.current-color {
      margin-bottom: -5px;
    }
    @media screen and (max-width: (@screen-md - 1px)) {
      height:1.875em;
      width:1.875em;
    }
  }

  // basic menu of colors

  .color-menu {
    text-align:left;
    padding:5px 0px; /*overwriting bootstrap default */
    width:330px;
    font-size: 14px;
    left: auto;

    &.color-menu--inline {
      left: -285px;
      @media screen and (max-width: (@screen-md - 1px)) {
        left:-242px;
      }
    }

    @media screen and (max-width: (@screen-md - 1px)) {
      left:-242px;
      width:293px;
    }

    &.small {
      width:100px;
      @media screen and (max-width: (@screen-md - 1px)) {
        left:-105px;
      }
    }
    
    &.no-hex {
      left:0px;
    }

    /* resets for ul / li styles */

    ul {
      padding:0px;
      margin:0px;
    }

    li {
      list-style-type:none;
      padding:5px 0px;
      margin:0px;
    }

    .color-preview {
      vertical-align:middle;
      margin:0px;
      @media screen and (max-width: (@screen-md - 1px)) {
      height: 35px;
      width: 35px;
      }

      &.current-color, &.white {
        background-color:@white;
      }

      &.red {
        background-color:@pacRed;
      }

      &.orange {
        background-color:@pacOrange;
      }

      &.yellow {
        background-color:@pacYellow;
      }

      &.green {
        background-color:@pacGreen;
      }

      &.blue {
        background-color:@pacBlue;
      }

      &.indigo {
        background-color:@pacIndigo;
      }

      &.violet {
        background-color:@pacViolet;
      }

      &.purple {
        background-color:@pacPurple;
      }

      &.black {
        background-color:@black;
      }
    }
    .basicColors-content, .savedColors-content {
      li > a {
        padding: 5px 15px 3px 15px;
        cursor: default;
        min-height:25px;
        color: #333;
        &:hover {
        	background-color: #fff;
        }
        @media screen and (max-width: (@screen-md - 1px)) {
          min-height:40px;
        }
      }
      li:hover a {
        color: #333;
        background-image:none;
        filter:none;
        text-decoration: none;
        font-weight: bold;
        @media screen and (max-width: (@screen-md - 1px)) {
          background-color: #fff;
          font-weight: normal;
        }
      }
    }

    .btn.color-select {
      margin: 0px 5px;
      height:20px;
      padding:0px 5px;
      margin-top:0px;
      line-height: 1.5px;
      border-radius: @border-radius-base;
      @media screen and (max-width: (@screen-md - 1px)) {
        height:35px;
      }
    }
  }

  .caret {
  	margin-bottom: 3px;
  }

  .color-menu-instructions, .advanced-instructions {
    text-align: center;
    padding:0px 6px;
    margin:0px;
    @media screen and (min-width: @screen-md) {
      display:none;
    }
    font-size: 14px;
    font-weight:normal;
  }

  .color-label {
    vertical-align:middle;
    margin:0px;
    margin-left:10px;
    cursor:pointer;
    @media screen and (max-width: (@screen-md - 1px)) {
    margin-left:8px;
    }
  }

  // color gradients

  .color-box {
    height:20px;
    width:@color-box-width;
    position:absolute;
    left:115px;
    .borders-shadows;
    cursor:pointer;
    @media screen and (max-width: (@screen-md - 1px)) {
      width:@color-box-width-phone;
      height:35px;
    }
  }

  .black .highlight-band-stripe {
    background-color:@white;
  }

  .spectrum-white {
    #gradient.horizontal(@white,@pacBwMidpoint);
    .highlight-band {
    left:0px;
    }
  }

  .spectrum-red {
    .three-color-spectrum(@pacRed);
  }

  .spectrum-orange {
    .three-color-spectrum(@pacOrange);
  }

  .spectrum-yellow {
    .three-color-spectrum(@pacYellow);
  }

  .spectrum-green {
    .three-color-spectrum(@pacGreen);
  }

  .spectrum-blue {
    .three-color-spectrum(@pacBlue);
  }

  .spectrum-purple {
    .three-color-spectrum(@pacPurple);
  }

  .spectrum-black {
    #gradient.horizontal(@black,@pacBwMidpoint);
    .highlight-band {
      left:0px;
      border: 1px solid @pacBwMidpoint;
    }
  }

  // IE spectrums

  .ie-spectrum {
    height:20px;
    width:@color-box-width/2;
    display:inline-block;
    &.hue {
      width:(@advanced-color-box-width/6) + .5px;
      @media screen and (max-width: (@screen-md - 1px)) {
        width: (@advanced-color-box-width-phone/6) + .5px;
      }
    }
    @media screen and (max-width: (@screen-md - 1px)) {
      width:@color-box-width-phone/2;
      height:35px;
    }
    top:-1;
  }

  .red-spectrum-0, .lightness-spectrum-0 {
    .spectrum-0(@pacRed);
  }

  .red-spectrum-1, .lightness-spectrum-1 {
    .spectrum-1(@pacRed);
  }

  .lightness-spectrum-0, .lightness-spectrum-1 {
    width: @advanced-color-box-width / 2;
    @media screen and (max-width: (@screen-md - 1px)) {
      width: @advanced-color-box-width-phone / 2;
    }
  }

  .orange-spectrum-0 {
    .spectrum-0(@pacOrange);
  }

  .orange-spectrum-1 {
    .spectrum-1(@pacOrange);
  }

  .yellow-spectrum-0 {
    .spectrum-0(@pacYellow);
  }

  .yellow-spectrum-1 {
    .spectrum-1(@pacYellow);
  }

  .green-spectrum-0 {
    .spectrum-0(@pacGreen);
  }

  .green-spectrum-1 {
    .spectrum-1(@pacGreen);
  }

  .blue-spectrum-0 {
    .spectrum-0(@pacBlue);
  }

  .blue-spectrum-1 {
    .spectrum-1(@pacBlue);
  }

  .purple-spectrum-0 {
    .spectrum-0(@pacPurple);
  }

  .purple-spectrum-1 {
    .spectrum-1(@pacPurple);
  }

  .saturation-spectrum-0 {
    .saturation-spectrum-0(@pacRed);
  }

  .saturation-spectrum-1 {
    .saturation-spectrum-1(@pacRed);
  }

  .hue-spectrum-0 {
    #gradient.horizontal(@pacRed,@pacYellow);
  }

  .hue-spectrum-1 {
    #gradient.horizontal(@pacYellow,@pacBrightGreen);
  }

  .hue-spectrum-2 {
    #gradient.horizontal(@pacBrightGreen,@pacTeal);
    left:-1px;
    position:relative;
  }

  .hue-spectrum-3 {
    #gradient.horizontal(@pacTeal,@pacBlue);
    left:-1px;
    position:relative;
  }

  .hue-spectrum-4 {
    #gradient.horizontal(@pacBlue,@pacLightPurple);
    left:-1px;
    position:relative;
  }

  .hue-spectrum-5 {
    #gradient.horizontal(@pacLightPurple,@pacRed);
    left:-2px;
    position:relative;
  }

  // highlight band

  .highlight-band {
    .borders-shadows(2px,1px,@gray-darker,solid, 1px 1px 1px #333);
    height:19px;
    width:@color-band-width;
    display:inline-block;
    cursor:pointer;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    position:absolute;
    top:-1px;
    left:(@color-box-width/2) - (@color-band-width/2);
    text-align:center;
    @media screen and (max-width: (@screen-md - 1px)) {
      width:@color-band-width-phone;
      left:(@color-box-width-phone/2) - (@color-band-width-phone/2);
      height:34px;
    }
  }

  .highlight-band-stripe {
    min-height: 80%;
    min-width: 1px;
    background-color:@black;
    opacity: 0.40;
    margin: 2px 1px;
    display:inline-block;
    .box-shadow(1px 0px 2px 0px #ffffff);
    @media screen and (max-width: (@screen-md - 1px)) {
      margin: 4px 2px;
    }
  }

  // tabbed navigation

  .color-menu-tabs {
    padding:5px 3px 3px 10px;
    font-size: 12px;
    color: #333;
    border-bottom:1px solid @btn-default-border;
    margin-bottom:5px;
    .tab {
      padding:4px 5px;
      margin:5px;
      border-left:1px solid #fff;
      border-right:1px solid #fff;
      cursor:pointer;
      background-color:#fff;
      &:hover {
        padding-bottom: 6px;
        .tab-borders-shadows;
      }
    }
    a {
      color: #333;
      text-decoration:none;
    }
    .tab-active {
      border-bottom:3px solid #fff;
      padding-bottom: 5px;
      .tab-borders-shadows;
    }
  }

  .active-content {
    display: block;
  }

  .inactive-content {
    display:none;
  }

  // saved colors tab

  .savedColors-content {
    padding:5px 15px;
    white-space:normal;
    li.color-item > a {
    margin-left:7px;
    padding-left:8px;
    border-radius: @border-radius-base;
    }
  }

  .saved-color-col {
    position:relative;
    left:-15px;
    float:left;
    width:149px;
    @media screen and (max-width: (@screen-md - 1px)) {
      width:130px;
    }
  }

  // advanced colors

  .advanced-content {
    ul {
      margin-top:10px;
    }
    li {
      padding: 5px 15px 3px 15px;
      cursor: default;
      min-height:25px;
      height:50px;
      position:relative;
      @media screen and (max-width: (@screen-md - 1px)) {
        min-height:70px;
      }
    }
    .color-preview {
      height:50px;
      width: @advanced-color-box-width;
      float:left;
      margin:0px 0px 10px 0px;
      background-color: @pacRed;
      text-align:center;
      .color-select.btn.advanced {
        margin-top:15px;
        display:none;
        @media screen and (max-width:(@screen-md - 1px)) {
          display:inline;
          margin-top:7px;
        }
      }
      &:hover .color-select.btn.advanced {
        display:inline;
      }
      @media screen and (max-width:(@screen-md - 1px)) {
        width:@advanced-color-box-width-phone;
        margin-left:-10px;
      }
    }

    .spectrum-hue {
      .full-spectrum;
      .highlight-band {
        left:0px;
      }
    }

    .spectrum-lightness {
      .three-color-spectrum(@pacRed);
    }

    .spectrum-saturation {
      .saturation-spectrum;
      .highlight-band {
        left:@advanced-color-box-width - (@color-band-width + 2);
        @media screen and (max-width: (@screen-md - 1px)) {
          left:@advanced-color-box-width-phone - (@color-band-width-phone + 2);
        }
      }
    }

    .spectrum-lightness .highlight-band {
      left: (@advanced-color-box-width / 2) - ((@color-band-width + 2) / 2);
      @media screen and (max-width: (@screen-md - 1px)) {
        left: (@advanced-color-box-width-phone / 2) - ((@color-band-width-phone + 2) / 2);
      }
    }

    .lightness-text, .hue-text, .saturation-text, .preview-text {
      vertical-align:middle;
      text-align:center;
      display:block;
    }

    .color-box {
      left:15px;
      top:25px;
      width:@advanced-color-box-width;
      @media screen and (max-width: (@screen-md - 1px)) {
        width:@advanced-color-box-width-phone;
        left:10px;
      }
    }

    .preview-item {
      height:80px;
    }

  }
}

@-moz-document url-prefix() {
	@media screen and (max-width: (@screen-md - 1px)) {
	  div.pick-a-color-markup .color-menu {
	  	left: 0px;
		}
	}
}