From 7933eb77c1d9a57ecb23690f59f55d5aab6ec0f5 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Mon, 24 Nov 2014 18:30:58 -0500 Subject: [PATCH] Switch the multiple selection container This switches the container to use BEM for the class naming. --- dist/css/select2.css | 85 ++++++++++++------------- dist/css/select2.min.css | 2 +- dist/js/select2.amd.full.js | 32 ++++++---- dist/js/select2.amd.js | 32 ++++++---- dist/js/select2.full.js | 32 ++++++---- dist/js/select2.full.min.js | 2 +- dist/js/select2.js | 32 ++++++---- dist/js/select2.min.js | 4 +- src/js/select2/selection/multiple.js | 17 ++--- src/js/select2/selection/search.js | 15 +++-- src/scss/_dropdown.scss | 20 +++--- src/scss/_multiple.scss | 46 +++++++------- src/scss/theme/default/layout.scss | 93 +++++++++++++--------------- 13 files changed, 217 insertions(+), 195 deletions(-) diff --git a/dist/css/select2.css b/dist/css/select2.css index c6d04306..f1f48344 100644 --- a/dist/css/select2.css +++ b/dist/css/select2.css @@ -18,21 +18,22 @@ padding-left: 8px; text-overflow: ellipsis; } -.select2-container .selection .multiple-select { +.select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; user-select: none; -webkit-user-select: none; } - .select2-container .selection .multiple-select .rendered-selection { + .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; } -.select2-container .select2-search-inline { + +.select2-search--inline { float: left; } - .select2-container .select2-search-inline input { + .select2-search--inline .select2-search__field { border: none; font-size: 100%; margin-top: 5px; } @@ -59,18 +60,19 @@ -webkit-user-select: none; } .select2-container .dropdown .results .options .option[aria-selected] { cursor: pointer; } -.select2-container .select2-search { - display: block; - padding: 4px; } - .select2-container .select2-search input { - padding: 4px; - width: 100%; } .select2-container.open .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; @@ -80,59 +82,58 @@ line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } - -.select2-container.select2-theme-default .selection .multiple-select { +.select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; } - .select2-container.select2-theme-default .selection .multiple-select .rendered-selection { + .select2-container--default .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px; } - .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder { + .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 .select2-selection__choice__remove { color: #999; - margin-top: 5px; - float: left; } - .select2-container.select2-theme-default .selection .multiple-select .rendered-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.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove { - color: #999; - cursor: pointer; - display: inline-block; - font-weight: bold; - margin-right: 2px; } - .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover { - color: #333; } -.select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select { + cursor: pointer; + display: inline-block; + font-weight: bold; + margin-right: 2px; } + .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover { + color: #333; } +.select2-container--default.open .select2-selection--single, .select2-container--default.open .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.select2-container.select2-theme-default .select2-search input { +.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } -.select2-container.select2-theme-default .select2-search-inline input { +.select2-container--default .select2-search--inline .select2-search__field { border: none; outline: 0; } -.select2-container.select2-theme-default .dropdown .results > .options { +.select2-container--default .dropdown .results > .options { max-height: 200px; overflow-y: auto; } -.select2-container.select2-theme-default .dropdown .results .options .option[role=group] { +.select2-container--default .dropdown .results .options .option[role=group] { padding: 0; } - .select2-container.select2-theme-default .dropdown .results .options .option[role=group] .group-label { + .select2-container--default .dropdown .results .options .option[role=group] .group-label { cursor: default; display: block; padding: 6px; } -.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] { +.select2-container--default .dropdown .results .options .option[aria-disabled=true] { color: #999; } -.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] { +.select2-container--default .dropdown .results .options .option[aria-selected=true] { background-color: #ddd; } -.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted { +.select2-container--default .dropdown .results .options .option[aria-selected].highlighted { background-color: #5897fb; color: white; } diff --git a/dist/css/select2.min.css b/dist/css/select2.min.css index 70bd34f5..3c9b9ca5 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-container .selection .multiple-select{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .selection .multiple-select .rendered-selection{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .select2-search-inline{float:left;}.select2-container .select2-search-inline input{border:none;font-size:100%;margin-top:5px;}.select2-container .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-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-container .dropdown .results .options .option[aria-selected]{cursor:pointer;}.select2-container .select2-search{display:block;padding:4px;}.select2-container .select2-search input{padding:4px;width:100%;}.select2-container.open .dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.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.select2-theme-default .selection .multiple-select{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection{list-style:none;margin:0;padding:0 5px;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder{color:#999;margin-top:5px;float:left;}.select2-container.select2-theme-default .selection .multiple-select .rendered-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.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover{color:#333;}.select2-container.select2-theme-default.open .selection .single-select,.select2-container.select2-theme-default.open .selection .multiple-select{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-default .select2-search input{border:1px solid #aaa;}.select2-container.select2-theme-default .select2-search-inline input{border:none;outline:0;}.select2-container.select2-theme-default .dropdown .results>.options{max-height:200px;overflow-y:auto;}.select2-container.select2-theme-default .dropdown .results .options .option[role=group]{padding:0;}.select2-container.select2-theme-default .dropdown .results .options .option[role=group] .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true]{color:#999;}.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true]{background-color:#ddd;}.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted{background-color:#5897fb;color:white;}.select2-container.select2-theme-classic .selection .single-select{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.select2-theme-classic .selection .single-select:focus{border:1px solid #5897fb;}.select2-container.select2-theme-classic .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-classic .selection .single-select .rendered-selection .placeholder{color:#999;}.select2-container.select2-theme-classic.open .selection .single-select{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.select2-theme-classic.open .selection .single-select,.select2-container.select2-theme-classic.open .selection .multiple-select{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-classic .dropdown{background-color:white;border-top:none;}.select2-container.select2-theme-classic .dropdown .select2-search input{border:1px solid #aaa;outline:0;}.select2-container.select2-theme-classic .dropdown .results>.options{max-height:200px;overflow-y:auto;}.select2-container.select2-theme-classic .dropdown .results .options .option[role=group]{padding:0;}.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true]{color:grey;}.select2-container.select2-theme-classic .dropdown .results .options .option[aria-selected].highlighted{background-color:#3875d7;color:white;}.select2-container.select2-theme-classic.open .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-container .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-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-container .dropdown .results .options .option[aria-selected]{cursor:pointer;}.select2-container.open .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 .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 .select2-selection__choice__remove:hover{color:#333;}.select2-container--default.open .select2-selection--single,.select2-container--default.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 .dropdown .results>.options{max-height:200px;overflow-y:auto;}.select2-container--default .dropdown .results .options .option[role=group]{padding:0;}.select2-container--default .dropdown .results .options .option[role=group] .group-label{cursor:default;display:block;padding:6px;}.select2-container--default .dropdown .results .options .option[aria-disabled=true]{color:#999;}.select2-container--default .dropdown .results .options .option[aria-selected=true]{background-color:#ddd;}.select2-container--default .dropdown .results .options .option[aria-selected].highlighted{background-color:#5897fb;color:white;}.select2-container.select2-theme-classic .selection .single-select{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.select2-theme-classic .selection .single-select:focus{border:1px solid #5897fb;}.select2-container.select2-theme-classic .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-classic .selection .single-select .rendered-selection .placeholder{color:#999;}.select2-container.select2-theme-classic.open .selection .single-select{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.select2-theme-classic.open .selection .single-select,.select2-container.select2-theme-classic.open .selection .multiple-select{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-classic .dropdown{background-color:white;border-top:none;}.select2-container.select2-theme-classic .dropdown .select2-search input{border:1px solid #aaa;outline:0;}.select2-container.select2-theme-classic .dropdown .results>.options{max-height:200px;overflow-y:auto;}.select2-container.select2-theme-classic .dropdown .results .options .option[role=group]{padding:0;}.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true]{color:grey;}.select2-container.select2-theme-classic .dropdown .results .options .option[aria-selected].highlighted{background-color:#3875d7;color:white;}.select2-container.select2-theme-classic.open .dropdown{border:1px solid #5897fb;border-top:none;} \ No newline at end of file diff --git a/dist/js/select2.amd.full.js b/dist/js/select2.amd.full.js index 3a9b103f..da0994bf 100644 --- a/dist/js/select2.amd.full.js +++ b/dist/js/select2.amd.full.js @@ -814,9 +814,10 @@ define('select2/selection/multiple',[ MultipleSelection.prototype.render = function () { var $selection = $( - '