Skip to content

Commit dafa99b

Browse files
kevin-brownkevin-brown
committed
Working on the classic theme
1 parent e686bce commit dafa99b

6 files changed

Lines changed: 186 additions & 45 deletions

File tree

‎dist/css/select2.css‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,13 +165,49 @@
165165
background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
166166
background-repeat: repeat-x;
167167
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); }
168-
.select2-container--classic.select2-container--open .select2-selection--single, .select2-container--classic.select2-container--open .select2-selection--multiple {
168+
.select2-container--classic.select2-container--open .select2-selection--single {
169+
border-bottom: none;
170+
border-bottom-left-radius: 0;
171+
border-bottom-right-radius: 0; }
172+
.select2-container--classic .select2-selection--multiple {
173+
background-color: white;
174+
border: 1px solid #aaa;
175+
border-radius: 4px;
176+
cursor: text;
177+
outline: 0; }
178+
.select2-container--classic .select2-selection--multiple:focus {
179+
border: 1px solid #5897fb; }
180+
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
181+
list-style: none;
182+
margin: 0;
183+
padding: 0 5px; }
184+
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
185+
background-color: #e4e4e4;
186+
border: 1px solid #aaa;
187+
border-radius: 4px;
188+
cursor: default;
189+
float: left;
190+
margin-right: 5px;
191+
margin-top: 5px;
192+
padding: 0 5px; }
193+
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
194+
color: #888;
195+
cursor: pointer;
196+
display: inline-block;
197+
font-weight: bold;
198+
margin-right: 2px; }
199+
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
200+
color: #555; }
201+
.select2-container--classic.select2-container--open .select2-selection--multiple {
202+
border: 1px solid #5897fb;
169203
border-bottom: none;
170204
border-bottom-left-radius: 0;
171205
border-bottom-right-radius: 0; }
172206
.select2-container--classic .select2-search--dropdown .select2-search__field {
173207
border: 1px solid #aaa;
174208
outline: 0; }
209+
.select2-container--classic .select2-search--inline .select2-search__field {
210+
outline: 0; }
175211
.select2-container--classic .select2-dropdown {
176212
background-color: white;
177213
border-top: none; }

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

‎docs/examples.html‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -421,9 +421,50 @@ <h2>Example code</h2>
421421

422422
<pre data-fill-from=".js-code-language"></pre>
423423

424-
<script type="text/x-example-code" class="js-code-language">
425-
$(".js-example-language").select2({
426-
language: "es"
424+
<script type="text/x-example-code" class="js-code-language">
425+
$(".js-example-language").select2({
426+
language: "es"
427+
});
428+
</script>
429+
</div>
430+
</section>
431+
432+
<section id="themes" class="row">
433+
<div class="col-md-4">
434+
<h1>Theme support</h1>
435+
436+
<p>
437+
Select2 supports custom themes using the
438+
<a href="options.html#theme">theme option</a>
439+
so you can style Select2 to match the rest of your application.
440+
</p>
441+
442+
<p>
443+
<select class="js-example-theme-single js-states form-control">
444+
</select>
445+
</p>
446+
447+
<p>
448+
These are using the <code>classic</code> theme, which matches the old
449+
look of Select2.
450+
</p>
451+
452+
<p>
453+
<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
454+
</p>
455+
</div>
456+
<div class="col-md-8">
457+
<h2>Example code</h2>
458+
459+
<pre data-fill-from=".js-code-theme"></pre>
460+
461+
<script type="text/javascript" class="js-code-theme">
462+
$(".js-example-theme-single").select2({
463+
theme: "classic"
464+
});
465+
466+
$(".js-example-theme-multiple").select2({
467+
theme: "classic"
427468
});
428469
</script>
429470
</div>
@@ -539,9 +580,7 @@ <h2>Example code</h2>
539580
var $diacritics = $(".js-example-diacritics");
540581
var $language = $(".js-example-language");
541582

542-
$basicSingle.select2({
543-
theme: "classic"
544-
});
583+
$basicSingle.select2();
545584
$basicMultiple.select2()
546585

547586
$placeholderSingle.select2({

‎src/scss/theme/classic/_multiple.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.select2-selection--multiple {
2+
background-color: white;
3+
4+
border: 1px solid $border-color;
5+
border-radius: $border-radius;
6+
7+
cursor: text;
8+
9+
outline: 0;
10+
11+
&:focus {
12+
border: 1px solid $focus-border-color;
13+
}
14+
15+
.select2-selection__rendered {
16+
list-style: none;
17+
margin: 0;
18+
padding: 0 5px;
19+
}
20+
21+
.select2-selection__choice {
22+
background-color: #e4e4e4;
23+
24+
border: 1px solid $border-color;
25+
border-radius: $border-radius;
26+
27+
cursor: default;
28+
29+
float: left;
30+
31+
margin-right: 5px;
32+
margin-top: 5px;
33+
padding: 0 5px;
34+
}
35+
36+
.select2-selection__choice__remove {
37+
color: $remove-color;
38+
cursor: pointer;
39+
40+
display: inline-block;
41+
font-weight: bold;
42+
43+
margin-right: 2px;
44+
45+
&:hover {
46+
color: $remove-hover-color;
47+
}
48+
}
49+
}
50+
51+
&.select2-container--open {
52+
.select2-selection--multiple {
53+
border: 1px solid $focus-border-color;
54+
55+
border-bottom: none;
56+
border-bottom-left-radius: 0;
57+
border-bottom-right-radius: 0;
58+
}
59+
}

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.select2-selection--single {
2+
background-color: mix($selection-bg-top-color, $selection-bg-bottom-color);
3+
4+
border: 1px solid $border-color;
5+
border-radius: $border-radius;
6+
7+
outline: 0;
8+
9+
@include gradient-vertical($selection-bg-top-color, $selection-bg-bottom-color, 50%, 100%);
10+
11+
&:focus {
12+
border: 1px solid $focus-border-color;
13+
}
14+
15+
.select2-selection__rendered {
16+
color: #444;
17+
line-height: 28px;
18+
}
19+
20+
.select2-selection__placeholder {
21+
color: #999;
22+
}
23+
}
24+
25+
&.select2-container--open {
26+
.select2-selection--single {
27+
border: 1px solid $focus-border-color;
28+
29+
@include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
30+
}
31+
32+
.select2-selection--single {
33+
border-bottom: none;
34+
border-bottom-left-radius: 0;
35+
border-bottom-right-radius: 0;
36+
}
37+
}

‎src/scss/theme/classic/layout.scss‎

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,18 @@
22
@import "../../mixins/gradients";
33

44
.select2-container--classic {
5-
.select2-selection--single {
6-
background-color: mix($selection-bg-top-color, $selection-bg-bottom-color);
5+
@import "single";
6+
@import "multiple";
77

8-
border: 1px solid $border-color;
9-
border-radius: $border-radius;
10-
11-
outline: 0;
12-
13-
@include gradient-vertical($selection-bg-top-color, $selection-bg-bottom-color, 50%, 100%);
14-
15-
&:focus {
16-
border: 1px solid $focus-border-color;
17-
}
18-
19-
.select2-selection__rendered {
20-
color: #444;
21-
line-height: 28px;
22-
}
23-
24-
.select2-selection__placeholder {
25-
color: #999;
26-
}
27-
}
28-
29-
&.select2-container--open {
30-
.select2-selection--single {
31-
border: 1px solid $focus-border-color;
32-
33-
@include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
34-
}
35-
36-
.select2-selection--single,
37-
.select2-selection--multiple {
38-
border-bottom: none;
39-
border-bottom-left-radius: 0;
40-
border-bottom-right-radius: 0;
8+
.select2-search--dropdown {
9+
.select2-search__field {
10+
border: 1px solid $border-color;
11+
outline: 0;
4112
}
4213
}
4314

44-
.select2-search--dropdown {
15+
.select2-search--inline {
4516
.select2-search__field {
46-
border: 1px solid $border-color;
4717
outline: 0;
4818
}
4919
}

0 commit comments

Comments
 (0)