Subversion Repositories web.active

@import "plugins/drag_drop";
@import "plugins/dropdown_header";
@import "plugins/optgroup_columns";
@import "plugins/remove_button";

// base styles

@selectize-font-family: inherit;
@selectize-font-smoothing: inherit;
@selectize-font-size: 13px;
@selectize-line-height: 18px;

@selectize-color-text: #303030;
@selectize-color-border: #d0d0d0;
@selectize-color-highlight: rgba(125,168,208,0.2);
@selectize-color-input: #fff;
@selectize-color-input-full: @selectize-color-input;
@selectize-color-disabled: #fafafa;
@selectize-color-item: #f2f2f2;
@selectize-color-item-text: @selectize-color-text;
@selectize-color-item-border: #d0d0d0;
@selectize-color-item-active: #e8e8e8;
@selectize-color-item-active-text: @selectize-color-text;
@selectize-color-item-active-border: #cacaca;
@selectize-color-dropdown: #fff;
@selectize-color-dropdown-border: @selectize-color-border;
@selectize-color-dropdown-border-top: #f0f0f0;
@selectize-color-dropdown-item-active: #f5fafd;
@selectize-color-dropdown-item-active-text: #495c68;
@selectize-color-dropdown-item-create-text: rgba(red(@selectize-color-text), green(@selectize-color-text), blue(@selectize-color-text), 0.5);
@selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text;
@selectize-color-optgroup: @selectize-color-dropdown;
@selectize-color-optgroup-text: @selectize-color-text;
@selectize-lighten-disabled-item: 30%;
@selectize-lighten-disabled-item-text: 30%;
@selectize-lighten-disabled-item-border: 30%;
@selectize-opacity-disabled: 0.5;

@selectize-shadow-input: inset 0 1px 1px rgba(0,0,0,0.1);
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-border: 1px solid @selectize-color-border;
@selectize-dropdown-border: 1px solid @selectize-color-dropdown-border;
@selectize-border-radius: 3px;

@selectize-width-item-border: 0;
@selectize-max-height-dropdown: 200px;

@selectize-padding-x: 8px;
@selectize-padding-y: 8px;
@selectize-padding-item-x: 6px;
@selectize-padding-item-y: 2px;
@selectize-padding-dropdown-item-x: @selectize-padding-x;
@selectize-padding-dropdown-item-y: 5px;
@selectize-margin-item-x: 3px;
@selectize-margin-item-y: 3px;

@selectize-arrow-size: 5px;
@selectize-arrow-color: #808080;
@selectize-arrow-offset: 15px;

@selectize-caret-margin: 0 2px 0 0;
@selectize-caret-margin-rtl: 0 4px 0 -2px;

.selectize-border-radius (@radii) {
  -webkit-border-radius: @radii;
  -moz-border-radius: @radii;
  border-radius: @radii;
}
.selectize-unselectable () {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectize-box-shadow (@shadow) {
  -webkit-box-shadow: @shadow;
  box-shadow: @shadow;
}
.selectize-box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing: @type;
  box-sizing: @type;
}
.selectize-vertical-gradient (@color-top, @color-bottom) {
    background-color: mix(@color-top, @color-bottom, 60%);
    background-image: -moz-linear-gradient(top, @color-top, @color-bottom); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@color-top), to(@color-bottom)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @color-top, @color-bottom); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @color-top, @color-bottom); // Opera 11.10
    background-image: linear-gradient(to bottom, @color-top, @color-bottom); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color-top),argb(@color-bottom))); // IE9 and down
}

.selectize-control {
  position: relative;
}

.selectize-dropdown, .selectize-input, .selectize-input input {
  color: @selectize-color-text;
  font-family: @selectize-font-family;
  font-size: @selectize-font-size;
  line-height: @selectize-line-height;
  -webkit-font-smoothing: @selectize-font-smoothing;
}

.selectize-input, .selectize-control.single .selectize-input.input-active {
  background: @selectize-color-input;
  cursor: text;
  display: inline-block;
}

.selectize-input {
  border: @selectize-border;
  padding: @selectize-padding-y @selectize-padding-x;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  .selectize-box-sizing(border-box);
  .selectize-box-shadow(@selectize-shadow-input);
  .selectize-border-radius(@selectize-border-radius);

  .selectize-control.multi &.has-items {
    @padding-x: @selectize-padding-x;
    @padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
    @padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y - @selectize-width-item-border;
    padding: @padding-top @padding-x @padding-bottom;
  }

  &.full {
    background-color: @selectize-color-input-full;
  }
  &.disabled, &.disabled * {
    cursor: default !important;
  }
  &.focus {
    .selectize-box-shadow(@selectize-shadow-input-focus);
  }
  &.dropdown-active {
    .selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
  }

  > * {
    vertical-align: baseline;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
  }
  .selectize-control.multi & > div {
    cursor: pointer;
    margin: 0 @selectize-margin-item-x @selectize-margin-item-y 0;
    padding: @selectize-padding-item-y @selectize-padding-item-x;
    background: @selectize-color-item;
    color: @selectize-color-item-text;
    border: @selectize-width-item-border solid @selectize-color-item-border;

    &.active {
      background: @selectize-color-item-active;
      color: @selectize-color-item-active-text;
      border: @selectize-width-item-border solid @selectize-color-item-active-border;
    }
  }
  .selectize-control.multi &.disabled > div {
    &, &.active {
      color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text);
      background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item);
      border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
    }
  }
  > input {
    &::-ms-clear {
      display: none;
    }
    display: inline-block !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    margin: @selectize-caret-margin !important;
    text-indent: 0 !important;
    border: 0 none !important;
    background: none !important;
    line-height: inherit !important;
    -webkit-user-select: auto !important;
    .selectize-box-shadow(none) !important;
    &:focus { outline: none !important; }
  }
}

.selectize-input::after {
  content: ' ';
  display: block;
  clear: left;
}

.selectize-input.dropdown-active::before {
  content: ' ';
  display: block;
  position: absolute;
  background: @selectize-color-dropdown-border-top;
  height: 1px;
  bottom: 0;
  left: 0;
  right: 0;
}

.selectize-dropdown {
  position: absolute;
  z-index: 10;
  border: @selectize-dropdown-border;
  background: @selectize-color-dropdown;
  margin: -1px 0 0 0;
  border-top: 0 none;
  .selectize-box-sizing(border-box);
  .selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
  .selectize-border-radius(0 0 @selectize-border-radius @selectize-border-radius);

  [data-selectable] {
    cursor: pointer;
    overflow: hidden;
    .highlight {
      background: @selectize-color-highlight;
      .selectize-border-radius(1px);
    }
  }
  [data-selectable], .optgroup-header {
    padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
  }
  .optgroup:first-child .optgroup-header {
    border-top: 0 none;
  }
  .optgroup-header {
    color: @selectize-color-optgroup-text;
    background: @selectize-color-optgroup;
    cursor: default;
  }
  .active {
    background-color: @selectize-color-dropdown-item-active;
    color: @selectize-color-dropdown-item-active-text;
    &.create {
      color: @selectize-color-dropdown-item-create-active-text;
    }
  }
  .create {
    color: @selectize-color-dropdown-item-create-text;
  }
}

.selectize-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: @selectize-max-height-dropdown;
  -webkit-overflow-scrolling: touch;
}

.selectize-control.single .selectize-input {
  &, input { cursor: pointer; }
  &.input-active, &.input-active input { cursor: text; }

  &:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    right: @selectize-arrow-offset;
    margin-top: round((-1 * @selectize-arrow-size / 2));
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @selectize-arrow-size @selectize-arrow-size 0 @selectize-arrow-size;
    border-color: @selectize-arrow-color transparent transparent transparent;
  }
  &.dropdown-active:after {
    margin-top: @selectize-arrow-size * -0.8;
    border-width: 0 @selectize-arrow-size @selectize-arrow-size @selectize-arrow-size;
    border-color: transparent transparent @selectize-arrow-color transparent;
  }
}

.selectize-control.rtl {
  &.single .selectize-input:after {
    left: @selectize-arrow-offset;
    right: auto;
  }
  .selectize-input > input {
    margin: @selectize-caret-margin-rtl !important;
  }
}

.selectize-control .selectize-input.disabled {
  opacity: @selectize-opacity-disabled;
  background-color: @selectize-color-disabled;
}