Skip to content

Commit 3e54fc9

Browse files
committed
Finish the core switch to BEM
This switches all of the dropdown components to use BEM.
1 parent 8cb074c commit 3e54fc9

14 files changed

Lines changed: 281 additions & 205 deletions

File tree

dist/css/select2.css

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
font-size: 100%;
3939
margin-top: 5px; }
4040

41-
.select2-container .dropdown {
41+
.select2-dropdown {
4242
background-color: white;
4343
border: 1px solid #aaa;
4444
border-radius: 4px;
@@ -48,19 +48,23 @@
4848
left: -100000px;
4949
width: 100%;
5050
z-index: 100; }
51-
.select2-container .dropdown .results {
52-
display: block; }
53-
.select2-container .dropdown .results .options {
54-
list-style: none;
55-
margin: 0;
56-
padding: 0; }
57-
.select2-container .dropdown .results .options .option {
58-
padding: 6px;
59-
user-select: none;
60-
-webkit-user-select: none; }
61-
.select2-container .dropdown .results .options .option[aria-selected] {
62-
cursor: pointer; }
63-
.select2-container.select2-container--open .dropdown {
51+
52+
.select2-results {
53+
display: block; }
54+
55+
.select2-results__options {
56+
list-style: none;
57+
margin: 0;
58+
padding: 0; }
59+
60+
.select2-results__option {
61+
padding: 6px;
62+
user-select: none;
63+
-webkit-user-select: none; }
64+
.select2-results__option[aria-selected] {
65+
cursor: pointer; }
66+
67+
.select2-container--open .select2-dropdown {
6468
border-top: none;
6569
border-top-left-radius: 0;
6670
border-top-right-radius: 0;
@@ -104,14 +108,14 @@
104108
margin-right: 5px;
105109
margin-top: 5px;
106110
padding: 0 5px; }
107-
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
108-
color: #999;
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; }
111+
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
112+
color: #999;
113+
cursor: pointer;
114+
display: inline-block;
115+
font-weight: bold;
116+
margin-right: 2px; }
117+
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
118+
color: #333; }
115119
.select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple {
116120
border-bottom-left-radius: 0;
117121
border-bottom-right-radius: 0; }
@@ -120,22 +124,22 @@
120124
.select2-container--default .select2-search--inline .select2-search__field {
121125
border: none;
122126
outline: 0; }
123-
.select2-container--default .dropdown .results > .options {
127+
.select2-container--default .select2-results > .select2-results__options {
124128
max-height: 200px;
125129
overflow-y: auto; }
126-
.select2-container--default .dropdown .results .options .option[role=group] {
130+
.select2-container--default .select2-results__option[role=group] {
127131
padding: 0; }
128-
.select2-container--default .dropdown .results .options .option[role=group] .group-label {
129-
cursor: default;
130-
display: block;
131-
padding: 6px; }
132-
.select2-container--default .dropdown .results .options .option[aria-disabled=true] {
132+
.select2-container--default .select2-results__option[aria-disabled=true] {
133133
color: #999; }
134-
.select2-container--default .dropdown .results .options .option[aria-selected=true] {
134+
.select2-container--default .select2-results__option[aria-selected=true] {
135135
background-color: #ddd; }
136-
.select2-container--default .dropdown .results .options .option[aria-selected].highlighted {
136+
.select2-container--default .select2-results__option--highlighted[aria-selected] {
137137
background-color: #5897fb;
138138
color: white; }
139+
.select2-container--default .select2-results__group {
140+
cursor: default;
141+
display: block;
142+
padding: 6px; }
139143

140144
.select2-container.select2-theme-classic .selection .single-select {
141145
background-color: #f6f6f6;

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)