alpaca/dist/lib/bootstrap-tokenfield/less/bootstrap-tokenfield.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

/*!
 * bootstrap-tokenfield
 * https://github.com/sliptree/bootstrap-tokenfield
 * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
 */

@import "../bower_components/bootstrap/less/mixins.less";
@import "../bower_components/bootstrap/less/variables.less";

// Variables

@token-background: #ededed;
@token-border: #d9d9d9;
@token-hover-border: #b9b9b9;
@token-active-border: rgba(82, 168, 236, 0.8);
@token-active-border-fallback: rgb(82, 168, 236); // IE8
@token-active-invalid-border: @token-background;


// Mixins

.tokenfield-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  border-color: @color;
  outline: 0;
  .box-shadow(~"inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px @{color-rgba}");
}

.tokenfield-validation(@border-color) {
  border-color: darken(@border-color, 10%);
  @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@border-color, 20%);
  .box-shadow(@shadow);
}

.border-radius(@border-radius) {
  -webkit-border-radius: @border-radius;
     -moz-border-radius: @border-radius;
          border-radius: @border-radius;
}

// Blink animation for duplicate tokens

@-webkit-keyframes blink {
  0% {
    border-color: #ededed;
  }
  100% {
    border-color: #b94a48;
  }
}
@-moz-keyframes blink {
  0% {
    border-color: #ededed;
  }
  100% {
    border-color: #b94a48;
  }
}
@keyframes blink {
  0% {
    border-color: #ededed;
  }
  100% {
    border-color: #b94a48;
  }
}

// Tokenfield

.tokenfield {
  height: auto;
  min-height: @input-height-base;
  padding-bottom: 0px;
  &.focus {
    .tokenfield-focus();
  }

  // Tokens
  .token {
    .box-sizing(border-box);
    .border-radius(3px);
    display: inline-block;
    border: 1px solid @token-border;
    background-color: @token-background;
    white-space: nowrap;
    margin: -1px 5px 5px 0;
    height: 22px;
    vertical-align: top;
    cursor: default;
    &:hover {
      border-color: @token-hover-border;
    }
    &.active {
      border-color: rgb(82, 168, 236);
      border-color: rgba(82, 168, 236, 0.8);
    }
    &.duplicate {
      border-color: @state-danger-border;
      .animation-name(blink);
      .animation-duration(0.1s);
      .animation-direction(normal);
      .animation-timing-function(ease);
      .animation-iteration-count(infinite);
    }
    &.invalid {
      background: none;
      border: 1px solid transparent;
      .border-radius(0);
      border-bottom: 1px dotted @brand-danger;
      &.active {
        background: @token-background;
        border: 1px solid @token-active-invalid-border;
        .border-radius(3px);
      }
    }   
    .token-label {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 4px;
      vertical-align: top;
    }
    .close {
      font-family: Arial;
      display: inline-block;
      line-height: 100%;
      font-size: 1.1em;
      line-height: 1.49em;
      margin-left: 5px;
      float: none;
      height: 100%;
      vertical-align: top;
      padding-right: 4px;
    }    
  }

  // Inputs
  .token-input {
    background: none;
    width: 60px;
    min-width: 60px;
    border: 0;
    height: 20px;
    padding: 0;
    margin-bottom: 6px;
    .box-shadow(none);
  }
  .token-input:focus {
    border-color: transparent;
    outline: 0;
    /* IE6-9 */
    .box-shadow(none);
  }  

  // Disabled state
  &.disabled {
    cursor: not-allowed;
    background-color: @gray-lighter;
    .token-input {
      cursor: not-allowed;
    }
    .token:hover {
      cursor: not-allowed;
      border-color: @token-border;
      .close {
        cursor: not-allowed;
        .opacity(0.2);
      }
    }
  }  
}

// Validation states

.has-warning .tokenfield.focus {
  .tokenfield-validation(@state-warning-text);
}
.has-error .tokenfield.focus {
  .tokenfield-validation(@state-danger-text);
}
.has-success .tokenfield.focus {
  .tokenfield-validation(@state-success-text);
}

// Various sizes

.tokenfield.input-sm,
.input-group-sm .tokenfield {
  min-height: 30px;
  padding-bottom: 0px;
}
.input-group-sm .token,
.tokenfield.input-sm .token {
  height: 20px;
  margin-bottom: 4px;
}
.input-group-sm .token-input,
.tokenfield.input-sm .token-input {
  height: 18px;
  margin-bottom: 5px;
}

.tokenfield.input-lg,
.input-group-lg .tokenfield {
  min-height: 45px;
  padding-bottom: 4px;
}
.input-group-lg .token,
.tokenfield.input-lg .token {
  height: 25px;
}
.input-group-lg .token-label,
.tokenfield.input-lg .token-label {
  line-height: 23px;
}
.input-group-lg .token .close,
.tokenfield.input-lg .token .close {
  line-height: 1.3em;
}
.input-group-lg .token-input,
.tokenfield.input-lg .token-input {
  height: 23px;
  line-height: 23px;
  margin-bottom: 6px;
  vertical-align: top;
}

// RTL

.tokenfield.rtl {
  direction: rtl;
  text-align: right;
}
.tokenfield.rtl .token {
  margin: -1px 0 5px 5px;
}
.tokenfield.rtl .token .token-label {
  padding-left: 0px;
  padding-right: 4px;
}