Skip to content

Commit 5300cee

Browse files
mortezafsmortezafs
authored
Add files via upload
1 parent 296a3d7 commit 5300cee

2 files changed

Lines changed: 196 additions & 0 deletions

File tree

‎dist/select2-bootstrap5.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/*!
2+
* Select2 Bootstrap v5.0.0 theme By ArizoTech
3+
* Copyright 2020-2025 Morteza Fard Saffari - ArizoTech Co. (https://arizotech.com)
4+
* Licensed under MIT License
5+
*/
6+
.select2-container--bootstrap5
7+
{
8+
width: 100% !important;
9+
}
10+
/* flex display required to using input-group-text in input-group for bootstrap 5 */
11+
.input-group .select2-container--bootstrap5
12+
{
13+
display: flex;
14+
align-content: center;
15+
align-items: center;
16+
flex-direction: row;
17+
flex: 1;
18+
}
19+
.select2-container--bootstrap5 .selection
20+
{
21+
width: 100%;
22+
}
23+
.select2-container--bootstrap5 .select2-selection {
24+
border: 1px solid #ced4da;
25+
-webkit-border-radius: .25rem;
26+
-moz-border-radius: .25rem;
27+
border-radius: .25rem;
28+
width: 100%;
29+
}
30+
.select2-container--bootstrap5 .select2-selection--single
31+
{
32+
height: calc(1.5em + 0.75rem + 2px);
33+
padding: .375rem .75rem .375rem 1.75rem;
34+
font-size: 1rem;
35+
font-weight: 400;
36+
line-height: 1.5;
37+
color: #212529;
38+
vertical-align: middle;
39+
background-color: #fff;
40+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
41+
background-repeat: no-repeat;
42+
background-position: left .75rem center;
43+
background-size: 16px 12px;
44+
-webkit-appearance: none;
45+
-moz-appearance: none;
46+
appearance: none;
47+
}
48+
.select2-container--bootstrap5.select2-container--open .select2-selection
49+
{
50+
border-color: #86b7fe;
51+
outline: 0;
52+
-webkit-box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
53+
-moz-box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
54+
box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
55+
}
56+
.select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder {
57+
color: #757575;
58+
line-height: inherit;
59+
}
60+
.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered
61+
{
62+
padding: 0 0 0 4px;
63+
line-height: inherit;
64+
margin: 0;
65+
list-style: none;
66+
}
67+
.select2-container--bootstrap5[dir="rtl"] .select2-selection--single .select2-selection__rendered {
68+
padding: 0 4px 0 0;
69+
}
70+
.select2-container--bootstrap5 .select2-selection--single .select2-selection__arrow,
71+
.select2-container--bootstrap5[dir="rtl"] .select2-selection--single .select2-selection__arrow {
72+
display: none;
73+
}
74+
.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field {
75+
display: block;
76+
width: 100%;
77+
padding: .375rem .75rem;
78+
font-size: 1rem;
79+
font-weight: 400;
80+
line-height: 1.5;
81+
color: #212529;
82+
background-clip: padding-box;
83+
border: 1px solid #ced4da;
84+
-webkit-appearance: none;
85+
-moz-appearance: none;
86+
appearance: none;
87+
-webkit-border-radius: .25rem;
88+
-moz-border-radius: .25rem;
89+
border-radius: .25rem;
90+
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
91+
}
92+
.select2-container--bootstrap5 .select2-results__message {
93+
color: #6c757d;
94+
}
95+
.select2-container--bootstrap5 .select2-selection--multiple {
96+
background-color: #fff;
97+
min-height: calc(1.5em + 0.75rem + 2px) !important;
98+
}
99+
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered {
100+
width: 100%;
101+
padding: 0;
102+
margin: 0;
103+
list-style: none;
104+
}
105+
.select2-container--bootstrap5 .select2-selection__clear,
106+
.select2-container--bootstrap5 .select2-search--inline{
107+
float: left;
108+
margin-left: 4px;
109+
}
110+
.select2-container--bootstrap5 .select2-search--inline .select2-search__field{
111+
outline: 0;
112+
}
113+
.select2-container--bootstrap5[dir="rtl"] .select2-selection__clear,
114+
.select2-container--bootstrap5[dir="rtl"] .select2-search--inline{
115+
float: right;
116+
margin-left: 0;
117+
margin-right: 4px;
118+
}
119+
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
120+
color: #212529;
121+
background-color: #fff;
122+
border: 1px solid #ced4da;
123+
-webkit-border-radius: .25rem;
124+
-moz-border-radius: .25rem;
125+
border-radius: .25rem;
126+
cursor: pointer;
127+
float: left;
128+
padding: 0 5px;
129+
margin: 4px 0 0 4px;
130+
}
131+
.select2-container--bootstrap5[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
132+
float: right;
133+
margin: 4px 4px 0 0;
134+
}
135+
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice__remove {
136+
color: #000;
137+
opacity: .5;
138+
padding: 0 .1rem;
139+
margin-right: .15rem;
140+
}
141+
.select2-container--bootstrap5[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
142+
margin-right: 0;
143+
margin-left: .15rem;
144+
}
145+
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice__remove:hover {
146+
opacity: 1;
147+
}
148+
.input-group-text ~ .select2-container--bootstrap5 .select2-selection {
149+
border-top-left-radius: 0;
150+
border-bottom-left-radius: 0;
151+
}
152+
.input-group-text ~ .select2-container--bootstrap5[dir="rtl"] .select2-selection {
153+
border-top-left-radius: .25rem;
154+
border-bottom-left-radius: .25rem;
155+
border-top-right-radius: 0;
156+
border-bottom-right-radius: 0;
157+
}
158+
.select2-container--bootstrap5:not(:last-child) .select2-selection{
159+
border-top-right-radius: 0;
160+
border-bottom-right-radius: 0;
161+
}
162+
.select2-container--bootstrap5[dir="rtl"]:not(:last-child) .select2-selection{
163+
border-top-left-radius: 0;
164+
border-bottom-left-radius: 0;
165+
}
166+
.select2-container--bootstrap5.select2-container--disabled .select2-selection,
167+
.select2-container--bootstrap5.select2-container--disabled .select2-selection .select2-selection__choice {
168+
background-color: #e9ecef;
169+
color: #7b758b;
170+
cursor: not-allowed;
171+
border-color: #ced4da;
172+
-webkit-box-shadow: none;
173+
box-shadow: none;
174+
}
175+
.select2-container--bootstrap5.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove:hover {
176+
opacity: 0.5;
177+
}
178+
.select2-container--bootstrap5 .select2-dropdown .select2-results__option[aria-selected=true] {
179+
background-color: #e9ecef;
180+
}
181+
.select2-container--bootstrap5 .select2-results__option--highlighted,
182+
.select2-container--bootstrap5 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
183+
background-color: #0076d7;
184+
color: #fff;
185+
}
186+
187+
.select2-container--bootstrap5 .select2-results > .select2-results__options {
188+
max-height: 60vh;
189+
overflow-y: auto;
190+
}

‎dist/select2-bootstrap5.min.css‎

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

0 commit comments

Comments
 (0)