Skip to content

Commit ac5d584

Browse files
kevin-brownkevin-brown
committed
Added the arrow for the dropdown
1 parent ffed370 commit ac5d584

13 files changed

Lines changed: 236 additions & 83 deletions

File tree

‎dist/css/select2.css‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,26 @@
9191
margin-right: 10px; }
9292
.select2-container--default .select2-selection--single .select2-selection__placeholder {
9393
color: #999; }
94+
.select2-container--default .select2-selection--single .select2-selection__arrow {
95+
height: 26px;
96+
position: absolute;
97+
top: 1px;
98+
right: 1px;
99+
width: 20px; }
100+
.select2-container--default .select2-selection--single .select2-selection__arrow b {
101+
border-color: #888 transparent transparent transparent;
102+
border-style: solid;
103+
border-width: 5px 4px 0 4px;
104+
height: 0;
105+
left: 50%;
106+
margin-left: -4px;
107+
margin-top: -2px;
108+
position: absolute;
109+
top: 50%;
110+
width: 0; }
111+
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
112+
border-color: transparent transparent #888 transparent;
113+
border-width: 0 4px 5px 4px; }
94114
.select2-container--default .select2-selection--multiple {
95115
background-color: white;
96116
border: 1px solid #aaa;
@@ -168,17 +188,49 @@
168188
margin-right: 10px; }
169189
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
170190
color: #999; }
191+
.select2-container--classic .select2-selection--single .select2-selection__arrow {
192+
background-color: #ddd;
193+
border: none;
194+
border-left: 1px solid #aaa;
195+
border-top-right-radius: 4px;
196+
border-bottom-right-radius: 4px;
197+
height: 26px;
198+
position: absolute;
199+
top: 1px;
200+
right: 1px;
201+
width: 20px;
202+
background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
203+
background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
204+
background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
205+
background-repeat: repeat-x;
206+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0); }
207+
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
208+
border-color: #888 transparent transparent transparent;
209+
border-style: solid;
210+
border-width: 5px 4px 0 4px;
211+
height: 0;
212+
left: 50%;
213+
margin-left: -4px;
214+
margin-top: -2px;
215+
position: absolute;
216+
top: 50%;
217+
width: 0; }
171218
.select2-container--classic.select2-container--open .select2-selection--single {
172219
border: 1px solid #5897fb;
220+
border-bottom: none;
221+
border-bottom-left-radius: 0;
222+
border-bottom-right-radius: 0;
173223
background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%);
174224
background-image: -o-linear-gradient(top, #eee 50%, #ffffff 100%);
175225
background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
176226
background-repeat: repeat-x;
177227
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); }
178-
.select2-container--classic.select2-container--open .select2-selection--single {
179-
border-bottom: none;
180-
border-bottom-left-radius: 0;
181-
border-bottom-right-radius: 0; }
228+
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
229+
background: transparent;
230+
border: none; }
231+
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
232+
border-color: transparent transparent #888 transparent;
233+
border-width: 0 4px 5px 4px; }
182234
.select2-container--classic .select2-selection--multiple {
183235
background-color: white;
184236
border: 1px solid #aaa;

‎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.

‎dist/js/select2.amd.full.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -743,6 +743,9 @@ define('select2/selection/single',[
743743
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
744744
' aria-expanded="false">' +
745745
'<span class="select2-selection__rendered"></span>' +
746+
'<span class="select2-selection__arrow" role="presentation">' +
747+
'<b role="presentation"></b>' +
748+
'</span>' +
746749
'</span>'
747750
);
748751

‎dist/js/select2.amd.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -743,6 +743,9 @@ define('select2/selection/single',[
743743
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
744744
' aria-expanded="false">' +
745745
'<span class="select2-selection__rendered"></span>' +
746+
'<span class="select2-selection__arrow" role="presentation">' +
747+
'<b role="presentation"></b>' +
748+
'</span>' +
746749
'</span>'
747750
);
748751

‎dist/js/select2.full.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10278,6 +10278,9 @@ define('select2/selection/single',[
1027810278
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
1027910279
' aria-expanded="false">' +
1028010280
'<span class="select2-selection__rendered"></span>' +
10281+
'<span class="select2-selection__arrow" role="presentation">' +
10282+
'<b role="presentation"></b>' +
10283+
'</span>' +
1028110284
'</span>'
1028210285
);
1028310286

‎dist/js/select2.full.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1171,6 +1171,9 @@ define('select2/selection/single',[
11711171
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
11721172
' aria-expanded="false">' +
11731173
'<span class="select2-selection__rendered"></span>' +
1174+
'<span class="select2-selection__arrow" role="presentation">' +
1175+
'<b role="presentation"></b>' +
1176+
'</span>' +
11741177
'</span>'
11751178
);
11761179

‎dist/js/select2.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/select2/selection/single.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ define([
1515
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
1616
' aria-expanded="false">' +
1717
'<span class="select2-selection__rendered"></span>' +
18+
'<span class="select2-selection__arrow" role="presentation">' +
19+
'<b role="presentation"></b>' +
20+
'</span>' +
1821
'</span>'
1922
);
2023

‎src/scss/theme/classic/_single.scss‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,64 @@
2727
.select2-selection__placeholder {
2828
color: #999;
2929
}
30+
31+
.select2-selection__arrow {
32+
background-color: #ddd;
33+
34+
border: none;
35+
border-left: 1px solid $border-color;
36+
border-top-right-radius: $border-radius;
37+
border-bottom-right-radius: $border-radius;
38+
39+
height: 26px;
40+
41+
position: absolute;
42+
43+
top: 1px;
44+
right: 1px;
45+
46+
width: 20px;
47+
48+
@include gradient-vertical(#eee, #ccc, 50%, 100%);
49+
50+
b {
51+
border-color: #888 transparent transparent transparent;
52+
border-style: solid;
53+
border-width: 5px 4px 0 4px;
54+
55+
height: 0;
56+
left: 50%;
57+
58+
margin-left: -4px;
59+
margin-top: -2px;
60+
61+
position: absolute;
62+
63+
top: 50%;
64+
width: 0;
65+
}
66+
}
3067
}
3168

3269
&.select2-container--open {
3370
.select2-selection--single {
3471
border: 1px solid $focus-border-color;
3572

36-
@include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
37-
}
38-
39-
.select2-selection--single {
4073
border-bottom: none;
4174
border-bottom-left-radius: 0;
4275
border-bottom-right-radius: 0;
76+
77+
@include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
78+
79+
.select2-selection__arrow {
80+
background: transparent;
81+
82+
border: none;
83+
84+
b {
85+
border-color: transparent transparent #888 transparent;
86+
border-width: 0 4px 5px 4px;
87+
}
88+
}
4389
}
4490
}

0 commit comments

Comments
 (0)