Skip to content

Commit 0b2711e

Browse files
taglialatagliala
committed
Add support for feedback icons
1 parent 954b920 commit 0b2711e

File tree

7 files changed

+105
-29
lines changed

7 files changed

+105
-29
lines changed

‎dist/select2-bootstrap4.css‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,21 +52,23 @@
5252
border-color: #ced4da;
5353
box-shadow: none; }
5454

55+
select.is-valid ~ .select2-container--bootstrap4 .select2-selection,
56+
form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection {
57+
border-color: #28a745; }
58+
59+
select.is-valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,
60+
form.was-validated select:valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection {
61+
border-color: #28a745;
62+
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); }
63+
5564
select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,
5665
form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection {
5766
border-color: #dc3545; }
58-
select.is-invalid ~ .select2-container--bootstrap4 .select2-selection:focus,
59-
form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection:focus {
60-
border-color: #dc3545;
61-
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
6267

63-
select.is-valid ~ .select2-container--bootstrap4 .select2-selection,
64-
form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection {
65-
border-color: #28a745; }
66-
select.is-valid ~ .select2-container--bootstrap4 .select2-selection:focus,
67-
form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection:focus {
68-
border-color: #28a745;
69-
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
68+
select.is-invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,
69+
form.was-validated select:invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection {
70+
border-color: #dc3545;
71+
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
7072

7173
.select2-container--bootstrap4 .select2-dropdown {
7274
border-color: #ced4da;
@@ -123,6 +125,14 @@ form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-select
123125

124126
.select2-container--bootstrap4 .select2-selection--single {
125127
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat; }
128+
select.is-valid ~ .select2-container--bootstrap4 .select2-selection--single,
129+
form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--single {
130+
padding-right: calc(1em + 2.3125rem) !important;
131+
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
132+
select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--single,
133+
form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--single {
134+
padding-right: calc(1em + 2.3125rem) !important;
135+
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
126136
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
127137
color: #6c757d; }
128138
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
@@ -186,6 +196,20 @@ form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-select
186196
position: absolute;
187197
top: 0.375rem;
188198
right: 0.75rem; }
199+
select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple,
200+
form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple {
201+
padding-right: calc(1.5em + 0.75rem) !important;
202+
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem)/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
203+
select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,
204+
form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
205+
right: calc(1.5em + 0.75rem); }
206+
select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple,
207+
form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple {
208+
padding-right: calc(1.5em + 0.75rem) !important;
209+
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem)/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
210+
select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,
211+
form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
212+
right: calc(1.5em + 0.75rem); }
189213

190214
.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
191215
padding-left: 5px;

‎dist/select2-bootstrap4.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/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
4545
<option>4</option>
4646
<option>5</option>
4747
</select>
48+
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
49+
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
4850
</div>
4951

5052
<div class="form-group">
@@ -55,6 +57,8 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
5557
<option>2</option>
5658
<option>3</option>
5759
</select>
60+
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
61+
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
5862
</div>
5963

6064
<div class="form-group">
@@ -81,6 +85,8 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
8185
<option>Else Stupka</option>
8286
<option>Pennie Khang</option>
8387
</select>
88+
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
89+
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
8490
</div>
8591

8692
<div class="form-group">
@@ -90,6 +96,8 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
9096
<option>Hye Panter</option>
9197
<option>Vi Yohe</option>
9298
</select>
99+
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
100+
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
93101
</div>
94102

95103
<div class="form-group">
@@ -116,6 +124,8 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
116124
<option>Else Stupka</option>
117125
<option selected="selected">Pennie Khang</option>
118126
</select>
127+
<a href="#" class="btn btn-sm btn-success mt-2 toggle-validation-js" data-validation-class="is-valid">Toggle <code>is-valid</code> state</a>
128+
<a href="#" class="btn btn-sm btn-danger mt-2 ml-2 toggle-validation-js" data-validation-class="is-invalid">Toggle <code>is-invalid</code> state</a>
119129
</div>
120130

121131
<div class="form-group">
@@ -192,6 +202,14 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
192202

193203
<div class="form-group">
194204
<label>Example of validated select</label>
205+
<select data-placeholder="Valid example" class="form-control is-valid" data-allow-clear="1">
206+
<option></option>
207+
</select>
208+
<div class="valid-feedback">
209+
Everything is fine.
210+
</div>
211+
</div>
212+
<div class="form-group">
195213
<select data-placeholder="Invalid example" class="form-control is-invalid" data-allow-clear="1">
196214
<option></option>
197215
</select>

‎src/_layout.scss‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -76,23 +76,17 @@
7676

7777
// validated input box
7878
// stylelint-disable selector-no-qualifying-type
79-
select.is-invalid ~ & .select2-selection,
80-
form.was-validated select:invalid ~ & .select2-selection {
81-
border-color: $danger;
82-
83-
&:focus {
84-
border-color: $danger;
85-
box-shadow: 0 0 0 $select2-bootstrap4-focus-width rgba($danger, .25);
86-
}
87-
}
88-
89-
select.is-valid ~ & .select2-selection,
90-
form.was-validated select:valid ~ & .select2-selection {
91-
border-color: $success;
79+
@each $state, $data in $select2-bootstrap4-validation-states {
80+
select.is-#{$state} ~ &,
81+
form.was-validated select:#{$state} ~ & {
82+
.select2-selection {
83+
border-color: map-get($data, color);
84+
}
9285

93-
&:focus {
94-
border-color: $success;
95-
box-shadow: 0 0 0 $select2-bootstrap4-focus-width rgba($danger, .25);
86+
&.select2-container--focus .select2-selection {
87+
border-color: map-get($data, color);
88+
box-shadow: 0 0 0 $select2-bootstrap4-focus-width rgba(map-get($data, color), .25);
89+
}
9690
}
9791
}
9892
// stylelint-enable selector-no-qualifying-type

‎src/_multiple.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,22 @@
6565
top: $select2-bootstrap4-padding-y;
6666
right: $select2-bootstrap4-padding-x;
6767
}
68+
69+
// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
70+
@if $select2-bootstrap4-enable-validation-icons {
71+
@each $state, $data in $select2-bootstrap4-validation-states {
72+
select.is-#{$state} ~ &,
73+
form.was-validated select:#{$state} ~ & {
74+
padding-right: $select2-bootstrap4-height-inner !important; // stylelint-disable-line declaration-no-important
75+
background: $select2-bootstrap4-bg escape-svg(map-get($data, icon)) top $select2-bootstrap4-height-inner-quarter right $select2-bootstrap4-height-inner-quarter / $select2-bootstrap4-feedback-icon-size no-repeat;
76+
77+
.select2-selection__clear {
78+
right: $select2-bootstrap4-height-inner;
79+
}
80+
}
81+
}
82+
}
83+
// stylelint-enable selector-no-qualifying-type, selector-max-compound-selectors
6884
}
6985

7086
// hide x button of each selected item in disabled input box

‎src/_single.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@
22
.select2-selection--single {
33
background: $select2-bootstrap4-bg $select2-bootstrap4-background;
44

5+
// stylelint-disable selector-no-qualifying-type
6+
@if $select2-bootstrap4-enable-validation-icons {
7+
@each $state, $data in $select2-bootstrap4-validation-states {
8+
select.is-#{$state} ~ &,
9+
form.was-validated select:#{$state} ~ & {
10+
padding-right: $select2-bootstrap4-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
11+
background: $select2-bootstrap4-background, $select2-bootstrap4-bg escape-svg(map-get($data, icon)) $select2-bootstrap4-feedback-icon-position / $select2-bootstrap4-feedback-icon-size no-repeat;
12+
}
13+
}
14+
}
15+
// stylelint-enable selector-no-qualifying-type
16+
517
.select2-selection__placeholder {
618
color: $select2-bootstrap4-placeholder-color;
719
}

‎src/_variables.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
// Inherit from Bootstrap variables
2-
$select2-bootstrap4-placeholder-color: $input-placeholder-color !default;
2+
$select2-bootstrap4-enable-validation-icons: $enable-validation-icons !default;
3+
4+
$select2-bootstrap4-placeholder-color: $input-placeholder-color !default;
5+
$select2-bootstrap4-height-inner: $input-height-inner !default;
6+
$select2-bootstrap4-height-inner-quarter: $input-height-inner-quarter !default;
37

48
$select2-bootstrap4-transition: $custom-forms-transition !default;
59

@@ -24,11 +28,19 @@ $select2-bootstrap4-indicator-color: $custom-select-indicator-color !default;
2428
$select2-bootstrap4-indicator: $custom-select-indicator !default;
2529
$select2-bootstrap4-background: $custom-select-background !default;
2630

31+
// `feedback-icon-padding-right` adds some extra space compared to Boostrap
32+
// because of the clear button
33+
$select2-bootstrap4-feedback-icon-padding-right: add(1em, (2 * $select2-bootstrap4-padding-y * .75) + $select2-bootstrap4-padding-x + $select2-bootstrap4-indicator-padding) !default;
34+
$select2-bootstrap4-feedback-icon-position: $custom-select-feedback-icon-position !default;
35+
$select2-bootstrap4-feedback-icon-size: $custom-select-feedback-icon-size !default;
36+
2737
$select2-bootstrap4-border-width: $custom-select-border-width !default;
2838
$select2-bootstrap4-border-color: $custom-select-border-color !default;
2939
$select2-bootstrap4-border-radius: $custom-select-border-radius !default;
3040
$select2-bootstrap4-box-shadow: $custom-select-box-shadow !default;
3141

42+
$select2-bootstrap4-validation-states: $form-validation-states !default;
43+
3244
// Font family fallback. Needed because `$custom-select-font-family` defaults
3345
// to `null`, but Select2 comes with a `font-family: sans-serif` CSS rule that
3446
// this theme needs to override

0 commit comments

Comments
 (0)