Skip to content

Commit 7933eb7

Browse files
committed
Switch the multiple selection container
This switches the container to use BEM for the class naming.
1 parent 971422f commit 7933eb7

13 files changed

Lines changed: 210 additions & 188 deletions

File tree

dist/css/select2.css

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,22 @@
1818
padding-left: 8px;
1919
text-overflow: ellipsis; }
2020

21-
.select2-container .selection .multiple-select {
21+
.select2-selection--multiple {
2222
box-sizing: border-box;
2323
cursor: pointer;
2424
display: block;
2525
min-height: 32px;
2626
user-select: none;
2727
-webkit-user-select: none; }
28-
.select2-container .selection .multiple-select .rendered-selection {
28+
.select2-selection--multiple .select2-selection__rendered {
2929
display: inline-block;
3030
overflow: hidden;
3131
padding-left: 8px;
3232
text-overflow: ellipsis; }
33-
.select2-container .select2-search-inline {
33+
34+
.select2-search--inline {
3435
float: left; }
35-
.select2-container .select2-search-inline input {
36+
.select2-search--inline .select2-search__field {
3637
border: none;
3738
font-size: 100%;
3839
margin-top: 5px; }
@@ -59,18 +60,19 @@
5960
-webkit-user-select: none; }
6061
.select2-container .dropdown .results .options .option[aria-selected] {
6162
cursor: pointer; }
62-
.select2-container .select2-search {
63-
display: block;
64-
padding: 4px; }
65-
.select2-container .select2-search input {
66-
padding: 4px;
67-
width: 100%; }
6863
.select2-container.open .dropdown {
6964
border-top: none;
7065
border-top-left-radius: 0;
7166
border-top-right-radius: 0;
7267
left: 0; }
7368

69+
.select2-search--dropdown {
70+
display: block;
71+
padding: 4px; }
72+
.select2-search--dropdown .select2-search__field {
73+
padding: 4px;
74+
width: 100%; }
75+
7476
.select2-container--default .select2-selection--single {
7577
background-color: #fff;
7678
border: 1px solid #aaa;
@@ -80,59 +82,58 @@
8082
line-height: 28px; }
8183
.select2-container--default .select2-selection--single .select2-selection__placeholder {
8284
color: #999; }
83-
84-
.select2-container.select2-theme-default .selection .multiple-select {
85+
.select2-container--default .select2-selection--multiple {
8586
background-color: white;
8687
border: 1px solid #aaa;
8788
border-radius: 4px;
8889
cursor: text; }
89-
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
90+
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
9091
list-style: none;
9192
margin: 0;
9293
padding: 0 5px; }
93-
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder {
94+
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
95+
color: #999;
96+
margin-top: 5px;
97+
float: left; }
98+
.select2-container--default .select2-selection--multiple .select2-selection__choice {
99+
background-color: #e4e4e4;
100+
border: 1px solid #aaa;
101+
border-radius: 4px;
102+
cursor: default;
103+
float: left;
104+
margin-right: 5px;
105+
margin-top: 5px;
106+
padding: 0 5px; }
107+
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
94108
color: #999;
95-
margin-top: 5px;
96-
float: left; }
97-
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice {
98-
background-color: #e4e4e4;
99-
border: 1px solid #aaa;
100-
border-radius: 4px;
101-
cursor: default;
102-
float: left;
103-
margin-right: 5px;
104-
margin-top: 5px;
105-
padding: 0 5px; }
106-
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
107-
color: #999;
108-
cursor: pointer;
109-
display: inline-block;
110-
font-weight: bold;
111-
margin-right: 2px; }
112-
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover {
113-
color: #333; }
114-
.select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select {
109+
cursor: pointer;
110+
display: inline-block;
111+
font-weight: bold;
112+
margin-right: 2px; }
113+
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
114+
color: #333; }
115+
.select2-container--default.open .select2-selection--single, .select2-container--default.open .select2-selection--multiple {
115116
border-bottom-left-radius: 0;
116117
border-bottom-right-radius: 0; }
117-
.select2-container.select2-theme-default .select2-search input {
118+
.select2-container--default .select2-search--dropdown .select2-search__field {
118119
border: 1px solid #aaa; }
119-
.select2-container.select2-theme-default .select2-search-inline input {
120+
.select2-container--default .select2-search--inline .select2-search__field {
120121
border: none;
121122
outline: 0; }
122-
.select2-container.select2-theme-default .dropdown .results > .options {
123+
.select2-container--default .dropdown .results > .options {
123124
max-height: 200px;
124125
overflow-y: auto; }
125-
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] {
126+
.select2-container--default .dropdown .results .options .option[role=group] {
126127
padding: 0; }
127-
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] .group-label {
128+
.select2-container--default .dropdown .results .options .option[role=group] .group-label {
128129
cursor: default;
129130
display: block;
130131
padding: 6px; }
131-
.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] {
132+
.select2-container--default .dropdown .results .options .option[aria-disabled=true] {
132133
color: #999; }
133-
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
134+
.select2-container--default .dropdown .results .options .option[aria-selected=true] {
134135
background-color: #ddd; }
135-
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
136+
.select2-container--default .dropdown .results .options .option[aria-selected].highlighted {
136137
background-color: #5897fb;
137138
color: white; }
138139

dist/css/select2.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)