diff --git a/dist/css/select2.css b/dist/css/select2.css index dac2d61d..9da71bcf 100644 --- a/dist/css/select2.css +++ b/dist/css/select2.css @@ -165,13 +165,49 @@ background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); } -.select2-container--classic.select2-container--open .select2-selection--single, .select2-container--classic.select2-container--open .select2-selection--multiple { +.select2-container--classic.select2-container--open .select2-selection--single { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } +.select2-container--classic .select2-selection--multiple { + background-color: white; + border: 1px solid #aaa; + border-radius: 4px; + cursor: text; + outline: 0; } + .select2-container--classic .select2-selection--multiple:focus { + border: 1px solid #5897fb; } + .select2-container--classic .select2-selection--multiple .select2-selection__rendered { + list-style: none; + margin: 0; + padding: 0 5px; } + .select2-container--classic .select2-selection--multiple .select2-selection__choice { + background-color: #e4e4e4; + border: 1px solid #aaa; + border-radius: 4px; + cursor: default; + float: left; + margin-right: 5px; + margin-top: 5px; + padding: 0 5px; } + .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { + color: #888; + cursor: pointer; + display: inline-block; + font-weight: bold; + margin-right: 2px; } + .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { + color: #555; } +.select2-container--classic.select2-container--open .select2-selection--multiple { + border: 1px solid #5897fb; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } +.select2-container--classic .select2-search--inline .select2-search__field { + outline: 0; } .select2-container--classic .select2-dropdown { background-color: white; border-top: none; } diff --git a/dist/css/select2.min.css b/dist/css/select2.min.css index e584c48e..79419d42 100644 --- a/dist/css/select2.min.css +++ b/dist/css/select2.min.css @@ -1 +1 @@ -.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-search--inline{float:left;}.select2-search--inline .select2-search__field{border:none;font-size:100%;margin-top:5px;}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-results{display:block;}.select2-results__options{list-style:none;margin:0;padding:0;}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-results__option[aria-selected]{cursor:pointer;}.select2-container--open .select2-dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.select2-search--dropdown{display:block;padding:4px;}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container--default .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left;}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333;}.select2-container--default.select2-container--open .select2-selection--single,.select2-container--default.select2-container--open .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa;}.select2-container--default .select2-search--inline .select2-search__field{border:none;outline:0;}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--default .select2-results__option[role=group]{padding:0;}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999;}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd;}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white;}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic .select2-selection--single{background-color:#f6f6f6;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #ffffff 50%, #eee 100%);background-image:-o-linear-gradient(top, #ffffff 50%, #eee 100%);background-image:linear-gradient(to bottom, #ffffff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0);}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb;background-image:-webkit-linear-gradient(top, #eee 50%, #ffffff 100%);background-image:-o-linear-gradient(top, #eee 50%, #ffffff 100%);background-image:linear-gradient(to bottom, #eee 50%, #ffffff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0);}.select2-container--classic.select2-container--open .select2-selection--single,.select2-container--classic.select2-container--open .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0;}.select2-container--classic .select2-dropdown{background-color:white;border-top:none;}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--classic .select2-results__option[role=group]{padding:0;}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey;}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:white;}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic.select2-container--open .select2-dropdown{border:1px solid #5897fb;border-top:none;} \ No newline at end of file +.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-search--inline{float:left;}.select2-search--inline .select2-search__field{border:none;font-size:100%;margin-top:5px;}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-results{display:block;}.select2-results__options{list-style:none;margin:0;padding:0;}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-results__option[aria-selected]{cursor:pointer;}.select2-container--open .select2-dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.select2-search--dropdown{display:block;padding:4px;}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container--default .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left;}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333;}.select2-container--default.select2-container--open .select2-selection--single,.select2-container--default.select2-container--open .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa;}.select2-container--default .select2-search--inline .select2-search__field{border:none;outline:0;}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--default .select2-results__option[role=group]{padding:0;}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999;}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd;}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white;}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic .select2-selection--single{background-color:#f6f6f6;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #ffffff 50%, #eee 100%);background-image:-o-linear-gradient(top, #ffffff 50%, #eee 100%);background-image:linear-gradient(to bottom, #ffffff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0);}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb;background-image:-webkit-linear-gradient(top, #eee 50%, #ffffff 100%);background-image:-o-linear-gradient(top, #eee 50%, #ffffff 100%);background-image:linear-gradient(to bottom, #eee 50%, #ffffff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0);}.select2-container--classic.select2-container--open .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px;}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb;border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0;}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;}.select2-container--classic .select2-dropdown{background-color:white;border-top:none;}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--classic .select2-results__option[role=group]{padding:0;}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey;}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:white;}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic.select2-container--open .select2-dropdown{border:1px solid #5897fb;border-top:none;} \ No newline at end of file diff --git a/docs/examples.html b/docs/examples.html index 499f1819..e0b9999b 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -421,9 +421,50 @@ $.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {

 
-
+    
+  
+
+  
+
+

Theme support

+ +

+ Select2 supports custom themes using the + theme option + so you can style Select2 to match the rest of your application. +

+ +

+ +

+ +

+ These are using the classic theme, which matches the old + look of Select2. +

+ +

+ +

+
+
+

Example code

+ +

+
+
     
@@ -539,9 +580,7 @@ $.fn.select2.amd.require( var $diacritics = $(".js-example-diacritics"); var $language = $(".js-example-language"); - $basicSingle.select2({ - theme: "classic" - }); + $basicSingle.select2(); $basicMultiple.select2() $placeholderSingle.select2({ diff --git a/src/scss/theme/classic/_multiple.scss b/src/scss/theme/classic/_multiple.scss new file mode 100644 index 00000000..de8a4745 --- /dev/null +++ b/src/scss/theme/classic/_multiple.scss @@ -0,0 +1,59 @@ +.select2-selection--multiple { + background-color: white; + + border: 1px solid $border-color; + border-radius: $border-radius; + + cursor: text; + + outline: 0; + + &:focus { + border: 1px solid $focus-border-color; + } + + .select2-selection__rendered { + list-style: none; + margin: 0; + padding: 0 5px; + } + + .select2-selection__choice { + background-color: #e4e4e4; + + border: 1px solid $border-color; + border-radius: $border-radius; + + cursor: default; + + float: left; + + margin-right: 5px; + margin-top: 5px; + padding: 0 5px; + } + + .select2-selection__choice__remove { + color: $remove-color; + cursor: pointer; + + display: inline-block; + font-weight: bold; + + margin-right: 2px; + + &:hover { + color: $remove-hover-color; + } + } +} + +&.select2-container--open { + .select2-selection--multiple { + border: 1px solid $focus-border-color; + + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +} diff --git a/src/scss/theme/classic/_single.scss b/src/scss/theme/classic/_single.scss new file mode 100644 index 00000000..5560ad0a --- /dev/null +++ b/src/scss/theme/classic/_single.scss @@ -0,0 +1,37 @@ +.select2-selection--single { + background-color: mix($selection-bg-top-color, $selection-bg-bottom-color); + + border: 1px solid $border-color; + border-radius: $border-radius; + + outline: 0; + + @include gradient-vertical($selection-bg-top-color, $selection-bg-bottom-color, 50%, 100%); + + &:focus { + border: 1px solid $focus-border-color; + } + + .select2-selection__rendered { + color: #444; + line-height: 28px; + } + + .select2-selection__placeholder { + color: #999; + } +} + +&.select2-container--open { + .select2-selection--single { + border: 1px solid $focus-border-color; + + @include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%); + } + + .select2-selection--single { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +} diff --git a/src/scss/theme/classic/layout.scss b/src/scss/theme/classic/layout.scss index fdb5c5ee..8f70dddd 100644 --- a/src/scss/theme/classic/layout.scss +++ b/src/scss/theme/classic/layout.scss @@ -2,44 +2,8 @@ @import "../../mixins/gradients"; .select2-container--classic { - .select2-selection--single { - background-color: mix($selection-bg-top-color, $selection-bg-bottom-color); - - border: 1px solid $border-color; - border-radius: $border-radius; - - outline: 0; - - @include gradient-vertical($selection-bg-top-color, $selection-bg-bottom-color, 50%, 100%); - - &:focus { - border: 1px solid $focus-border-color; - } - - .select2-selection__rendered { - color: #444; - line-height: 28px; - } - - .select2-selection__placeholder { - color: #999; - } - } - - &.select2-container--open { - .select2-selection--single { - border: 1px solid $focus-border-color; - - @include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%); - } - - .select2-selection--single, - .select2-selection--multiple { - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } + @import "single"; + @import "multiple"; .select2-search--dropdown { .select2-search__field { @@ -48,6 +12,12 @@ } } + .select2-search--inline { + .select2-search__field { + outline: 0; + } + } + .select2-dropdown { background-color: $dropdown-bg-color; border-top: none;