diff --git a/demo/demo.js b/demo/demo.js index cadccc3bd..3d0eb85a0 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -3,28 +3,36 @@ angular.module('DemoApp', ['ui.select']) $scope.data = {}; $scope.data.items = [ - {title: "ActionScript" }, - {title: "AppleScript" }, - {title: "Asp" }, - {title: "BASIC" }, - {title: "C" }, - {title: "C++" }, - {title: "Clojure" }, - {title: "COBOL" }, - {title: "ColdFusion" }, - {title: "Erlang" }, - {title: "Fortran" }, - {title: "Groovy" }, - {title: "Haskell" }, - {title: "Java" }, - {title: "JavaScript" }, - {title: "Lisp" }, - {title: "Perl" }, - {title: "PHP" }, - {title: "Python" }, - {title: "Ruby" }, - {title: "Scala" }, - {title: "Scheme" } + { + "id": 1, + "name": "Wladimir Coka", + "email": "wcoka@email.com", + }, + { + "id": 2, + "name": "Samantha Smith", + "email": "sam@email.com", + }, + { + "id": 3, + "name": "Estefanía Smith", + "email": "esmith@email.com", + }, + { + "id": 4, + "name": "Natasha Jones", + "email": "ncoka@email.com", + }, + { + "id": 5, + "name": "Nicole Smith", + "email": "nicky@email.com", + }, + { + "id": 6, + "name": "Adrian Jones", + "email": "asmith@email.com", + }, ]; - }]); \ No newline at end of file +}]); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 3111d3572..514b1d6df 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,25 +12,32 @@ - + + + + - +

- Selected: {{data.custom}} + Selected: {{data.custom.name}}

- -
  • -

    {{item.title}}

    -
    • + + {{$select.selected.name}} + +
    +
    {{item.email}}
    +     - \ No newline at end of file diff --git a/src/select.js b/src/select.js index c57245594..9d9417b61 100644 --- a/src/select.js +++ b/src/select.js @@ -3,11 +3,13 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc restrict: 'E', /* jshint multistr: true */ template: - '
    \ - \ -
    \ - \ -
      \ + '
      \ + \ +
      \ +
      \ + \ +
      \ +
        \
      \
      ', replace: true, @@ -17,7 +19,12 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc compile: function(tElement, tAttrs, transcludeFn) { return function($scope, $elm, $attrs, ngModel){ transcludeFn($scope, function(clone) { - + $scope.open = false; + //Helper functions (no jQuery) + var hasClass = function (elem, klass) { + if (!elem) return; + return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1; + }; var getElementsByClassName = (function() { //To support IE8 return document.getElementsByClassdName ? @@ -29,9 +36,12 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc }; })(); - var dropDiv = getElementsByClassName(tElement[0],'ui-select-drop'); - var choices = getElementsByClassName(tElement[0],'ui-select-choices').append(clone); - dropDiv.append(choices); + //Set transcluded elements to their correct position on template + var transcluded = angular.element('
      ').append(clone); + var transChoices = getElementsByClassName(transcluded[0],'ui-select-results'); + var transMatch = getElementsByClassName(transcluded[0],'ui-select-choice'); + getElementsByClassName($elm[0],'ui-select-results').replaceWith(transChoices[0]); + getElementsByClassName($elm[0],'ui-select-choice').replaceWith(transMatch[0]); var input = $elm.find('input'); $scope.activate = function(){ @@ -45,13 +55,16 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc $scope.$select.index = 0; }); $scope.up = function(){ - if ($scope.$select.index > 0) + if ($scope.$select.index > 0){ $scope.$select.index--; + $scope.ensureHighlightVisible(); + } }; $scope.down = function(){ - items = $elm.find('ul').children().length; + items = $elm.find('ul').children().length -1; if ($scope.$select.index < items) { $scope.$select.index++; + $scope.ensureHighlightVisible(); } else { $scope.$select.index = items; } @@ -66,12 +79,18 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc $scope.open = false; $scope.$select.search = ""; }; + var choiceArrow = getElementsByClassName(tElement[0],'ui-select-arrow'); + var searchDiv = getElementsByClassName(tElement[0],'ui-select-search'); var dismissClickHandler = function (evt) { - //FIXME - if ($elm[0] !== evt.target.parentElement) { - $scope.close(); - $scope.$digest(); + if ( + hasClass(evt.target,'ui-select-choice') || //Chosen label for selection + hasClass(evt.target.parentElement,'ui-select-choice') || //No selection (Placeholder) + choiceArrow[0] === evt.target.parentElement || + searchDiv[0] === evt.target.parentElement) { + return; } + $scope.close(); + $scope.$digest(); }; $document.bind('click', dismissClickHandler); ngModel.$render = function(){ @@ -81,4 +100,73 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc }; } }; +}) + +.directive('choices', function($sce) { + return { + // require: '^uiSelect', + restrict: 'E', + transclude: true, + replace: true, + template: + '
        ' + + '
      • ' + + '
        ' + + '
      ', + compile: function(tElement, tAttrs, transcludeFn) { + tElement[0].children[0].setAttribute("ng-repeat", tAttrs.data); + return function(scope, element, attrs){ + scope.trustAsHtml = function(value) { + return $sce.trustAsHtml(value); + }; + scope.ensureHighlightVisible = function(){ + var highlighted = element[0].children[scope.$select.index], + ul = element[0], + posY = highlighted.offsetTop + highlighted.clientHeight - ul.scrollTop, + maxHeight = 200; //Same as css + if (posY>maxHeight){ + ul.scrollTop += posY-maxHeight; + }else if (posY \ + \ + {{selectedLabel}} \ + ', + compile: function(tElement, tAttrs, transcludeFn) { + return function($scope, $elm, $attrs, ngModel){ + transcludeFn($scope, function(clone) { + var labelWrap = angular.element("
      " + tAttrs.placeholder + "
      "); + var labelWrapCompiled = $compile(labelWrap)($scope); + $elm.append(labelWrapCompiled); + $elm.append(clone); + }); + }; + } + }; +}) + +.filter('highlight', function() { + function escapeRegexp(queryToEscape) { + return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"); + } + return function(matchItem, query) { + return query ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '$&') : matchItem; + }; }); diff --git a/src/select2.css b/src/select2.css new file mode 100644 index 000000000..ce4156dcf --- /dev/null +++ b/src/select2.css @@ -0,0 +1,628 @@ +/* +Based on https://github.com/ivaynberg/select2/blob/master/select2.css +*/ + +.ui-select-container { + margin: 0; + position: relative; + display: inline-block; + /* inline-block for ie7 */ + zoom: 1; + *display: inline; + vertical-align: middle; +} + +.ui-select-container, +.ui-select-drop, +.ui-select-search, +.ui-select-search input { + /* + Force border-box so that % widths fit the parent + container without overlap because of margin/padding. + More Info : http://www.quirksmode.org/css/box.html + */ + -webkit-box-sizing: border-box; /* webkit */ + -moz-box-sizing: border-box; /* firefox */ + box-sizing: border-box; /* css3 */ +} + +.ui-select-container .ui-select-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + + border: 1px solid #aaa; + white-space: nowrap; + line-height: 26px; + color: #444; + text-decoration: none; + + border-radius: 4px; + + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #fff; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff)); + background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%); + background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); + background-image: linear-gradient(top, #fff 0%, #eee 50%); +} + +.ui-select-container.ui-select-drop-above .ui-select-choice { + border-bottom-color: #aaa; + + border-radius: 0 0 4px 4px; + + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff)); + background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%); + background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); + background-image: linear-gradient(top, #eee 0%, #fff 90%); +} + +.ui-select-container.ui-select-allowclear .ui-select-choice .ui-select-chosen { + margin-right: 42px; +} + +.ui-select-container .ui-select-choice > .ui-select-chosen { + margin-right: 26px; + display: block; + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; +} + +.ui-select-container .ui-select-choice abbr { + display: none; + width: 12px; + height: 12px; + position: absolute; + right: 24px; + top: 8px; + + font-size: 1px; + text-decoration: none; + + border: 0; + background: url('select2.png') right top no-repeat; + cursor: pointer; + outline: 0; +} + +.ui-select-container.ui-select-allowclear .ui-select-choice abbr { + display: inline-block; +} + +.ui-select-container .ui-select-choice abbr:hover { + background-position: right -11px; + cursor: pointer; +} + +.ui-select-drop-mask { + border: 0; + margin: 0; + padding: 0; + position: fixed; + left: 0; + top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; + z-index: 9998; + /* styles required for IE to work */ + background-color: #fff; + filter: alpha(opacity=0); +} + +.ui-select-drop { + width: 100%; + margin-top: -1px; + position: absolute; + z-index: 9999; + top: 100%; + + background: #fff; + color: #000; + border: 1px solid #aaa; + border-top: 0; + + border-radius: 0 0 4px 4px; + + -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 4px 5px rgba(0, 0, 0, .15); +} + +.ui-select-drop.ui-select-drop-above { + margin-top: 1px; + border-top: 1px solid #aaa; + border-bottom: 0; + + border-radius: 4px 4px 0 0; + + -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); +} + +.ui-select-drop-active { + border: 1px solid #5897fb; + border-top: none; +} + +.ui-select-drop.ui-select-drop-above.ui-select-drop-active { + border-top: 1px solid #5897fb; +} + +.ui-select-drop-auto-width { + border-top: 1px solid #aaa; + width: auto; +} + +.ui-select-drop-auto-width .ui-select-search { + padding-top: 4px; +} + +.ui-select-container .ui-select-choice .ui-select-arrow { + display: inline-block; + width: 18px; + height: 100%; + position: absolute; + right: 0; + top: 0; + + border-left: 1px solid #aaa; + border-radius: 0 4px 4px 0; + + background-clip: padding-box; + + background: #ccc; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); + background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); + background-image: linear-gradient(top, #ccc 0%, #eee 60%); +} + +.ui-select-container .ui-select-choice .ui-select-arrow b { + display: block; + width: 100%; + height: 100%; + background: url('select2.png') no-repeat 0 1px; +} + +.ui-select-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + + position: relative; + z-index: 10000; + + white-space: nowrap; +} + +.ui-select-search input { + width: 100%; + height: auto !important; + min-height: 26px; + padding: 4px 20px 4px 5px; + margin: 0; + + outline: 0; + font-family: sans-serif; + font-size: 1em; + + border: 1px solid #aaa; + border-radius: 0; + + -webkit-box-shadow: none; + box-shadow: none; + + background: #fff url('select2.png') no-repeat 100% -22px; + background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); + background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%); +} + +.ui-select-drop.ui-select-drop-above .ui-select-search input { + margin-top: 4px; +} + +.ui-select-search input.ui-select-active { + background: #fff url('select2-spinner.gif') no-repeat 100%; + background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%); +} + +.ui-select-container-active .ui-select-choice, +.ui-select-container-active .ui-select-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); + box-shadow: 0 0 5px rgba(0, 0, 0, .3); +} + +.ui-select-dropdown-open .ui-select-choice { + border-bottom-color: transparent; + -webkit-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + background-color: #eee; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee)); + background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%); + background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); + background-image: linear-gradient(top, #fff 0%, #eee 50%); +} + +.ui-select-dropdown-open.ui-select-drop-above .ui-select-choice, +.ui-select-dropdown-open.ui-select-drop-above .ui-select-choices { + border: 1px solid #5897fb; + border-top-color: transparent; + + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee)); + background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%); + background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); + background-image: linear-gradient(bottom, #fff 0%, #eee 50%); +} + +.ui-select-dropdown-open .ui-select-choice .ui-select-arrow { + background: transparent; + border-left: none; + filter: none; +} +.ui-select-dropdown-open .ui-select-choice .ui-select-arrow b { + background-position: -18px 1px; +} + +/* results */ +.ui-select-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.ui-select-results ul.ui-select-result-sub { + margin: 0; + padding-left: 0; +} + +.ui-select-results ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 20px } +.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 40px } +.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 60px } +.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 80px } +.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 100px } +.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 110px } +.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 120px } + +.ui-select-results li { + list-style: none; + display: list-item; + background-image: none; +} + +.ui-select-results li.ui-select-result-with-children > .ui-select-result-label { + font-weight: bold; +} + +.ui-select-results .ui-select-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + + min-height: 1em; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-select-results .ui-select-highlighted { + background: #3875d7; + color: #fff; +} + +.ui-select-results li em { + background: #feffde; + font-style: normal; +} + +.ui-select-results .ui-select-highlighted em { + background: transparent; +} + +.ui-select-results .ui-select-highlighted ul { + background: #fff; + color: #000; +} + + +.ui-select-results .ui-select-no-results, +.ui-select-results .ui-select-searching, +.ui-select-results .ui-select-selection-limit { + background: #f4f4f4; + display: list-item; +} + +/* +disabled look for disabled choices in the results dropdown +*/ +.ui-select-results .ui-select-disabled.ui-select-highlighted { + color: #666; + background: #f4f4f4; + display: list-item; + cursor: default; +} +.ui-select-results .ui-select-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.ui-select-results .ui-select-selected { + display: none; +} + +.ui-select-more-results.ui-select-active { + background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%; +} + +.ui-select-more-results { + background: #f4f4f4; + display: list-item; +} + +/* disabled styles */ + +.ui-select-container.ui-select-container-disabled .ui-select-choice { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.ui-select-container.ui-select-container-disabled .ui-select-choice .ui-select-arrow { + background-color: #f4f4f4; + background-image: none; + border-left: 0; +} + +.ui-select-container.ui-select-container-disabled .ui-select-choice abbr { + display: none; +} + + +/* multiselect */ + +.ui-select-container-multi .ui-select-choices { + height: auto !important; + height: 1%; + margin: 0; + padding: 0; + position: relative; + + border: 1px solid #aaa; + cursor: text; + overflow: hidden; + + background-color: #fff; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff)); + background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%); + background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%); + background-image: linear-gradient(top, #eee 1%, #fff 15%); +} + +.ui-select-locked { + padding: 3px 5px 3px 5px !important; +} + +.ui-select-container-multi .ui-select-choices { + min-height: 26px; +} + +.ui-select-container-multi.ui-select-container-active .ui-select-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); + box-shadow: 0 0 5px rgba(0, 0, 0, .3); +} +.ui-select-container-multi .ui-select-choices li { + float: left; + list-style: none; +} +html[dir="rtl"] .ui-select-container-multi .ui-select-choices li +{ + float: right; +} +.ui-select-container-multi .ui-select-choices .ui-select-search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} + +.ui-select-container-multi .ui-select-choices .ui-select-search-field input { + padding: 5px; + margin: 1px 0; + + font-family: sans-serif; + font-size: 100%; + color: #666; + outline: 0; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: transparent !important; +} + +.ui-select-container-multi .ui-select-choices .ui-select-search-field input.ui-select-active { + background: #fff url('select2-spinner.gif') no-repeat 100% !important; +} + +.ui-select-default { + color: #999 !important; +} + +.ui-select-container-multi .ui-select-choices .ui-select-search-choice { + padding: 3px 5px 3px 18px; + margin: 3px 0 3px 5px; + position: relative; + + line-height: 13px; + color: #333; + cursor: default; + border: 1px solid #aaaaaa; + + border-radius: 3px; + + -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); + + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #e4e4e4; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee)); + background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); + background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); + background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); +} +html[dir="rtl"] .ui-select-container-multi .ui-select-choices .ui-select-search-choice +{ + margin-left: 0; + margin-right: 5px; +} +.ui-select-container-multi .ui-select-choices .ui-select-search-choice .ui-select-chosen { + cursor: default; +} +.ui-select-container-multi .ui-select-choices .ui-select-search-choice-focus { + background: #d4d4d4; +} + +.ui-select-search-choice-close { + display: block; + width: 12px; + height: 13px; + position: absolute; + right: 3px; + top: 4px; + + font-size: 1px; + outline: none; + background: url('select2.png') right top no-repeat; +} +html[dir="rtl"] .ui-select-search-choice-close { + right: auto; + left: 3px; +} + +.ui-select-container-multi .ui-select-search-choice-close { + left: 3px; +} + +.ui-select-container-multi .ui-select-choices .ui-select-search-choice .ui-select-search-choice-close:hover { + background-position: right -11px; +} +.ui-select-container-multi .ui-select-choices .ui-select-search-choice-focus .ui-select-search-choice-close { + background-position: right -11px; +} + +/* disabled styles */ +.ui-select-container-multi.ui-select-container-disabled .ui-select-choices { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.ui-select-container-multi.ui-select-container-disabled .ui-select-choices .ui-select-search-choice { + padding: 3px 5px 3px 5px; + border: 1px solid #ddd; + background-image: none; + background-color: #f4f4f4; +} + +.ui-select-container-multi.ui-select-container-disabled .ui-select-choices .ui-select-search-choice .ui-select-search-choice-close { display: none; + background: none; +} +/* end multiselect */ + + +.ui-select-result-selectable .ui-select-match, +.ui-select-result-unselectable .ui-select-match { + text-decoration: underline; +} + +.ui-select-offscreen, .ui-select-offscreen:focus { + clip: rect(0 0 0 0) !important; + width: 1px !important; + height: 1px !important; + border: 0 !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + position: absolute !important; + outline: 0 !important; + left: 0px !important; + top: 0px !important; +} + +.ui-select-display-none { + display: none; +} + +.ui-select-measure-scrollbar { + position: absolute; + top: -10000px; + left: -10000px; + width: 100px; + height: 100px; + overflow: scroll; +} +/* Retina-ize icons */ + +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { + .ui-select-search input, .ui-select-search-choice-close, .ui-select-container .ui-select-choice abbr, .ui-select-container .ui-select-choice .ui-select-arrow b { + background-image: url('select2x2.png') !important; + background-repeat: no-repeat !important; + background-size: 60px 40px !important; + } + .ui-select-search input { + background-position: 100% -21px !important; + } +} \ No newline at end of file diff --git a/src/select2.png b/src/select2.png new file mode 100644 index 000000000..1d804ffb9 Binary files /dev/null and b/src/select2.png differ diff --git a/src/select2x2.png b/src/select2x2.png new file mode 100644 index 000000000..4bdd5c961 Binary files /dev/null and b/src/select2x2.png differ