Merge pull request #1227 from bsorem-sugarcrm/sass

add SASS version

.gitignore

@@ -5,6 +5,7 @@
 # Folders to ignore
 node_modules
 bower_components
+.sass-cache
 
 # Dist zip
 bootstrap-select-*.zip

sass/bootstrap-select.scss

@@ -0,0 +1,374 @@
+/*!
+ * Bootstrap-select v1.8.0 (http://silviomoreto.github.io/bootstrap-select)
+ *
+ * Copyright 2013-2015 bootstrap-select
+ * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
+ */
+
+@import "variables";
+
+// Mixins
+@mixin cursor-disabled() {
+  cursor: not-allowed;
+}
+
+@mixin box-sizing($fmt) {
+  -webkit-box-sizing: $fmt;
+     -moz-box-sizing: $fmt;
+          box-sizing: $fmt;
+}
+
+@mixin box-shadow($fmt) {
+  -webkit-box-shadow: $fmt;
+          box-shadow: $fmt;
+}
+
+@function fade($color, $amnt) {
+  @if $amnt > 1 {
+    $amnt: $amnt / 100; // convert to percentage if int
+  }
+  @return rgba($color, $amnt);
+}
+
+// Rules
+.bootstrap-select {
+  width: 220px \0; /*IE9 and below*/
+
+  // The selectpicker button
+  > .dropdown-toggle {
+    width: 100%;
+    padding-right: 25px;
+    z-index: 1;
+  }
+
+  > select {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0.11px;
+    height: 100%;
+    opacity: 0;
+    border: none;
+  }
+
+  // Error display
+  .has-error & .dropdown-toggle,
+  .error & .dropdown-toggle {
+    border-color: $color-red-error;
+  }
+
+  &.fit-width {
+    width: auto !important;
+  }
+
+  &:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
+    width: $width-default;
+  }
+
+  .dropdown-toggle:focus {
+    outline: thin dotted #333333 !important;
+    outline: 5px auto -webkit-focus-ring-color !important;
+    outline-offset: -2px;
+  }
+}
+
+.bootstrap-select.form-control {
+  margin-bottom: 0;
+  padding: 0;
+  border: none;
+
+  &:not([class*="col-"]) {
+    width: 100%;
+  }
+
+  &.input-group-btn {
+    z-index: auto;
+  }
+}
+
+// The selectpicker components
+.bootstrap-select.btn-group {
+  &:not(.input-group-btn),
+  &[class*="col-"] {
+    float: none;
+    display: inline-block;
+    margin-left: 0;
+  }
+
+  // Forces the pull to the right, if necessary
+  &,
+  &[class*="col-"],
+  .row &[class*="col-"] {
+    &.dropdown-menu-right {
+      float: right;
+    }
+  }
+
+  .form-inline &,
+  .form-horizontal &,
+  .form-group & {
+    margin-bottom: 0;
+  }
+
+  .form-group-lg &.form-control,
+  .form-group-sm &.form-control {
+    padding: 0;
+  }
+
+  // Set the width of the live search (and any other form control within an inline form)
+  // see https://github.com/silviomoreto/bootstrap-select/issues/685
+  .form-inline & .form-control {
+    width: 100%;
+  }
+
+  &.disabled,
+  > .disabled {
+    @include cursor-disabled();
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  &.bs-container {
+    position: absolute;
+
+    .dropdown-menu {
+      z-index: $zindex-select-dropdown;
+    }
+  }
+
+  // The selectpicker button
+  .dropdown-toggle {
+    .filter-option {
+      display: inline-block;
+      overflow: hidden;
+      width: 100%;
+      text-align: left;
+    }
+
+    .caret {
+      position: absolute;
+      top: 50%;
+      right: 12px;
+      margin-top: -2px;
+      vertical-align: middle;
+    }
+  }
+
+  &[class*="col-"] .dropdown-toggle {
+    width: 100%;
+  }
+
+  // The selectpicker dropdown
+  .dropdown-menu {
+    min-width: 100%;
+    @include box-sizing(border-box);
+
+    &.inner {
+      position: static;
+      float: none;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    li {
+      position: relative;
+
+      &.active small {
+        color: #fff;
+      }
+
+      &.disabled a {
+        @include cursor-disabled();
+      }
+
+      a {
+        cursor: pointer;
+        -webkit-user-select: none;
+           -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+
+        &.opt {
+          position: relative;
+          padding-left: 2.25em;
+        }
+
+        span.check-mark {
+          display: none;
+        }
+
+        span.text {
+          display: inline-block;
+        }
+      }
+
+      small {
+        padding-left: 0.5em;
+      }
+    }
+
+    .notify {
+      position: absolute;
+      bottom: 5px;
+      width: 96%;
+      margin: 0 2%;
+      min-height: 26px;
+      padding: 3px 5px;
+      background: rgb(245, 245, 245);
+      border: 1px solid rgb(227, 227, 227);
+      @include box-shadow(inset 0 1px 1px fade(rgb(0, 0, 0), 5));
+      pointer-events: none;
+      opacity: 0.9;
+      @include box-sizing(border-box);
+    }
+  }
+
+  .no-results {
+    padding: 3px;
+    background: #f5f5f5;
+    margin: 0 5px;
+    white-space: nowrap;
+  }
+
+  &.fit-width .dropdown-toggle {
+    .filter-option {
+      position: static;
+    }
+
+    .caret {
+      position: static;
+      top: auto;
+      margin-top: -1px;
+    }
+  }
+
+  &.show-tick .dropdown-menu li {
+    &.selected a span.check-mark {
+      position: absolute;
+      display: inline-block;
+      right: 15px;
+      margin-top: 5px;
+    }
+
+    a span.text {
+      margin-right: 34px;
+    }
+  }
+}
+
+.bootstrap-select.show-menu-arrow {
+  &.open > .dropdown-toggle {
+    z-index: ($zindex-select-dropdown + 1);
+  }
+
+  .dropdown-toggle {
+    &:before {
+      content: '';
+      border-left: 7px solid transparent;
+      border-right: 7px solid transparent;
+      border-bottom: 7px solid $color-grey-arrow;
+      position: absolute;
+      bottom: -4px;
+      left: 9px;
+      display: none;
+    }
+
+    &:after {
+      content: '';
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-bottom: 6px solid white;
+      position: absolute;
+      bottom: -4px;
+      left: 10px;
+      display: none;
+    }
+  }
+
+  &.dropup .dropdown-toggle {
+    &:before {
+      bottom: auto;
+      top: -3px;
+      border-top: 7px solid $color-grey-arrow;
+      border-bottom: 0;
+    }
+
+    &:after {
+      bottom: auto;
+      top: -3px;
+      border-top: 6px solid white;
+      border-bottom: 0;
+    }
+  }
+
+  &.pull-right .dropdown-toggle {
+    &:before {
+      right: 12px;
+      left: auto;
+    }
+
+    &:after {
+      right: 13px;
+      left: auto;
+    }
+  }
+
+  &.open > .dropdown-toggle {
+    &:before,
+    &:after {
+      display: block;
+    }
+  }
+}
+
+.bs-searchbox,
+.bs-actionsbox,
+.bs-donebutton {
+  padding: 4px 8px;
+}
+
+.bs-actionsbox {
+  width: 100%;
+  @include box-sizing(border-box);
+
+  & .btn-group button {
+    width: 50%;
+  }
+}
+
+.bs-donebutton {
+  float: left;
+  width: 100%;
+  @include box-sizing(border-box);
+
+  & .btn-group button {
+    width: 100%;
+  }
+}
+
+.bs-searchbox {
+  & + .bs-actionsbox {
+    padding: 0 8px 4px;
+  }
+
+  & .form-control {
+    margin-bottom: 0;
+    width: 100%;
+    float: none;
+  }
+}
+
+select.mobile-device {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  display: block !important;
+  width: 100%;
+  height: 100% !important;
+  opacity: 0;
+}

sass/variables.scss

@@ -0,0 +1,6 @@
+$color-red-error: rgb(185, 74, 72);
+$color-grey-arrow: rgba(204, 204, 204, 0.2);
+
+$width-default: 220px; // 3 960px-grid columns
+
+$zindex-select-dropdown: 1060; // must be higher than a modal background (1050)