Merge pull request snapappointments#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:https://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)