bootstrap-tokenfield/less/bootstrap-tokenfield.less

/*!
 * 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;
}