Skip to content

Commit c2bda04

Browse files
ghiscodingghiscoding
authored
Merge pull request #11 from ghiscoding/feat/sass-variables
feat: add SASS and CSS variables
2 parents af9104a + 93ca2c2 commit c2bda04

File tree

4 files changed

+156
-89
lines changed

4 files changed

+156
-89
lines changed

‎lib/src/styles/_variables.scss‎

Lines changed: 58 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,74 @@
1+
/*
2+
* Multiple-Select-Vanilla SASS variables
3+
*/
14
$primary-color: #000 !default;
25

36
$ms-item-border: 1px solid transparent !default;
47
$ms-item-hover-border: 1px solid #d5d5d5 !default;
5-
$ms-icon-font-size: 16px !default;
68
$ms-checkbox-hover-bg-color: #fafafa !default;
9+
$ms-choice-border: 1px solid #aaa !default;
10+
$ms-choice-bgcolor: #fff !default;
11+
$ms-choice-disabled-bgcolor: #f4f4f4 !default;
12+
$ms-choice-disabled-border: 1px solid #ddd !default;
13+
$ms-choice-border-radius: 4px !default;
14+
$ms-choice-color: #444 !default;
15+
$ms-choice-text-align: left !default;
16+
$ms-choice-line-height: 26px !default;
17+
$ms-drop-background: #fff !default;
18+
$ms-drop-color: #000 !default;
19+
$ms-drop-border: 1px solid #aaa !default;
20+
$ms-drop-bottom-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15) !default;
21+
$ms-drop-top-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15) !default;
22+
$ms-drop-border-radius: 4px !default;
23+
$ms-drop-hide-radio-padding: 0 !default;
24+
$ms-drop-hide-radio-hover-bgcolor: #f8f9fa !default;
25+
$ms-drop-hide-radio-label-margin-bottom: 0 !default;
26+
$ms-drop-hide-radio-label-padding: 5px 8px !default;
27+
$ms-drop-hide-radio-selected-color: #fff !default;
28+
$ms-drop-hide-radio-selected-bgcolor: #007bff !default;
29+
$ms-drop-input-margin-left: -1.25rem !default;
30+
$ms-drop-input-margin-top: 0.3rem !default;
31+
$ms-drop-optgroup-font-weight: bold !default;
32+
$ms-drop-list-item-level1-padding-left: 28px !default;
33+
$ms-drop-option-divider-padding: 0 !default;
34+
$ms-drop-option-divider-border-top: 1px solid #e9ecef !default;
35+
$ms-drop-margin-top: -1px !default;
36+
$ms-drop-padding: 0 !default;
37+
$ms-drop-list-item-padding: 0.25rem 8px !default;
38+
$ms-drop-list-item-disabled-filter: Alpha(Opacity = 35) !default;
39+
$ms-drop-list-item-disabled-opacity: 0.35 !default;
40+
$ms-drop-zindex: 1050 !default;
41+
$ms-label-margin-bottom: 0 !default;
42+
$ms-label-padding-left: 1.25rem !default;
743
$ms-ok-button-bg-color: #fff !default;
844
$ms-ok-button-bg-hover-color: #f9f9f9 !default;
945
$ms-ok-button-border-color: #ccc !default;
1046
$ms-ok-button-border-radius: 0 0 4px 4px !default;
1147
$ms-ok-button-border-width: 1px 0 0 0 !default;
1248
$ms-ok-button-font-weight: 600 !default;
49+
$ms-ok-button-padding: 0 !default;
1350
$ms-ok-button-text-color: $primary-color !default;
1451
$ms-ok-button-text-hover-color: darken($primary-color, 5%) !default;
1552
$ms-ok-button-height: 26px !default;
1653
$ms-ok-button-width: 100% !default;
1754
$ms-ok-button-text-align: center !default;
18-
$ms-all-border-bottom: 1px solid #ddd !default;
19-
$ms-all-label-border: $ms-item-border !default;
20-
$ms-all-label-hover-border: 1px solid transparent !default;
21-
$ms-all-label-hover-bg-color: $ms-checkbox-hover-bg-color !default;
22-
$ms-all-label-padding: 4px !default;
23-
$ms-all-line-height: calc(#{$ms-icon-font-size} + 2px) !default;
24-
$ms-all-padding: 4px !default;
25-
$ms-all-text-color: darken($primary-color, 5%) !default;
26-
$ms-all-text-hover-color: transparent !default;
55+
$ms-placeholder-color: #999 !default;
56+
$ms-search-margin: 0 !default;
57+
$ms-search-min-height: 26px !default;
58+
$ms-search-padding: 4px !default;
59+
$ms-search-zindex: 10000 !default;
60+
$ms-search-input-border: 1px solid #aaa !default;
61+
$ms-search-input-border-radius: 5px !default;
62+
$ms-search-input-min-height: 24px !default;
63+
$ms-search-input-margin: 0 !default;
64+
$ms-search-input-padding: 0 5px !default;
65+
$ms-select-all-border-bottom: 1px solid #ddd !default;
66+
$ms-select-all-label-border: $ms-item-border !default;
67+
$ms-select-all-label-hover-border: 1px solid transparent !default;
68+
$ms-select-all-label-hover-bg-color: $ms-checkbox-hover-bg-color !default;
69+
$ms-select-all-label-padding: 4px !default;
70+
$ms-select-all-label-span-padding-left: $ms-label-padding-left !default;
71+
$ms-select-all-line-height: 18px !default;
72+
$ms-select-all-padding: 4px !default;
73+
$ms-select-all-text-color: darken($primary-color, 5%) !default;
74+
$ms-select-all-text-hover-color: transparent !default;

‎lib/src/styles/multiple-select.scss‎

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* sass variables */
1+
/* css/sass variables */
22
@import './variables';
33

44
/*!
@@ -27,26 +27,26 @@
2727
}
2828

2929
.ms-choice {
30+
cursor: pointer;
3031
display: block;
3132
width: 100%;
3233
height: 26px;
3334
padding: 0;
3435
overflow: hidden;
35-
cursor: pointer;
36-
border: 1px solid #aaa;
37-
text-align: left;
38-
white-space: nowrap;
39-
line-height: 26px;
40-
color: #444;
36+
background-color: var(--ms-choice-bgcolor, $ms-choice-bgcolor);
37+
border: var(--ms-choice-border, $ms-choice-border);
38+
border-radius: var(--ms-choice-border-radius, $ms-choice-border-radius);
39+
line-height: var(--ms-choice-line-height, $ms-choice-line-height);
40+
color: var(--ms-choice-color, $ms-choice-color);
41+
text-align: var(--ms-choice-text-align, $ms-choice-text-align);
4142
text-decoration: none;
42-
border-radius: 4px;
43-
background-color: #fff;
4443
user-select: none;
44+
white-space: nowrap;
4545

4646
&.disabled {
47-
background-color: #f4f4f4;
47+
border: var(--ms-choice-disabled-border, $ms-choice-disabled-border);
48+
background-color: var(--ms-choice-disabled-bgcolor, $ms-choice-disabled-bgcolor);
4849
background-image: none;
49-
border: 1px solid #ddd;
5050
cursor: default;
5151
}
5252

@@ -63,7 +63,7 @@
6363
padding-left: 8px;
6464

6565
&.ms-placeholder {
66-
color: #999;
66+
color: var(--ms-placeholder-color, $ms-placeholder-color);
6767
}
6868
}
6969
div.icon-close {
@@ -110,59 +110,59 @@
110110
min-width: 100%;
111111
overflow: hidden;
112112
display: none;
113-
margin-top: -1px;
114-
padding: 0;
115113
position: absolute;
116-
z-index: 1050;
117-
background: #fff;
118-
color: #000;
119-
border: 1px solid #aaa;
120-
border-radius: 4px;
114+
background: var(--ms-drop-background, $ms-drop-background);
115+
border: var(--ms-drop-border, $ms-drop-border);
116+
border-radius: var(--ms-drop-border-radius, $ms-drop-border-radius);
117+
color: var(--ms-drop-color, $ms-drop-color);
118+
margin-top: var(--ms-drop-margin-top, $ms-drop-margin-top);
119+
padding: var(--ms-drop-padding, $ms-drop-padding);
120+
z-index: var(--ms-drop-zindex, $ms-drop-zindex);
121121

122122
&.bottom {
123123
top: 100%;
124-
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
124+
box-shadow: var(--ms-drop-bottom-box-shadow, $ms-drop-bottom-box-shadow);
125125
}
126126

127127
&.top {
128128
bottom: 100%;
129-
box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
129+
box-shadow: var(--ms-drop-top-box-shadow, $ms-drop-top-box-shadow);
130130
}
131131

132132
.ms-select-all {
133-
border-bottom: var(--ms-all-border-bottom, $ms-all-border-bottom);
134-
padding: var(--ms-all-padding, $ms-all-padding);
135-
line-height: var(--ms-all-line-height, $ms-all-line-height);
133+
border-bottom: var(--ms-select-all-border-bottom, $ms-select-all-border-bottom);
134+
line-height: var(--ms-select-all-line-height, $ms-select-all-line-height);
135+
padding: var(--ms-select-all-padding, $ms-select-all-padding);
136136
width: 100%;
137137
&:hover {
138-
background-color: var(--ms-all-text-hover-color, $ms-all-text-hover-color);
138+
background-color: var(--ms-select-all-text-hover-color, $ms-select-all-text-hover-color);
139139
}
140140

141141
label {
142142
display: inline-block;
143143
font-weight: normal;
144-
padding: var(--ms-all-label-padding, $ms-all-label-padding);
145-
border: var(--ms-all-label-border, $ms-all-label-border);
146-
color: var(--ms-all-text-color, $ms-all-text-color);
144+
padding: var(--ms-select-all-label-padding, $ms-select-all-label-padding);
145+
border: var(--ms-select-all-label-border, $ms-select-all-label-border);
146+
color: var(--ms-select-all-text-color, $ms-select-all-text-color);
147147
width: 100%;
148148
&:hover {
149149
cursor: pointer;
150-
border: var(--ms-all-label-hover-border, $ms-all-label-hover-border);
151-
background-color: var(--ms-all-label-hover-bg-color, $ms-all-label-hover-bg-color);
150+
border: var(--ms-select-all-label-hover-border, $ms-select-all-label-hover-border);
151+
background-color: var(--ms-select-all-label-hover-bg-color, $ms-select-all-label-hover-bg-color);
152152
}
153153
input {
154154
margin-left: 0;
155155
}
156156
span {
157-
padding-left: 1.25rem;
157+
padding-left: var(--ms-select-all-label-span-padding-left, $ms-select-all-label-span-padding-left);
158158
}
159159
}
160160
}
161161

162162
.ms-ok-button {
163163
cursor: pointer;
164164
display: block;
165-
padding: 0;
165+
padding: var(--ms-ok-button-padding, $ms-ok-button-padding);
166166
width: var(--ms-ok-button-width, $ms-ok-button-width);
167167
height: var(--ms-ok-button-height, $ms-ok-button-height);
168168
border-color: var(--ms-ok-button-border-color, $ms-ok-button-border-color);
@@ -181,25 +181,25 @@
181181

182182
.ms-search {
183183
display: inline-block;
184-
margin: 0;
185-
min-height: 26px;
186-
padding: 4px;
187184
position: relative;
188185
white-space: nowrap;
189186
width: 100%;
190-
z-index: 10000;
187+
margin: var(--ms-search-margin, $ms-search-margin);
188+
min-height: var(--ms-search-min-height, $ms-search-min-height);
189+
padding: var(--ms-search-padding, $ms-search-padding);
190+
z-index: var(--ms-search-zindex, $ms-search-zindex);
191191

192192
input {
193-
width: 100%;
193+
box-shadow: none;
194+
font-family: sans-serif;
194195
height: auto !important;
195-
min-height: 24px;
196-
padding: 0 5px;
197-
margin: 0;
198196
outline: 0;
199-
font-family: sans-serif;
200-
border: 1px solid #aaa;
201-
border-radius: 5px;
202-
box-shadow: none;
197+
width: 100%;
198+
border: var(--ms-search-input-border, $ms-search-input-border);
199+
border-radius: var(--ms-search-input-border-radius, $ms-search-input-border-radius);
200+
min-height: var(--ms-search-input-min-height, $ms-search-input-min-height);
201+
padding: var(--ms-search-input-padding, $ms-search-input-padding);
202+
margin: var(--ms-search-input-margin, $ms-search-input-margin);
203203
}
204204

205205
box-sizing: border-box;
@@ -212,17 +212,17 @@
212212
padding: 0;
213213

214214
> li {
215-
list-style: none;
216-
display: list-item;
217215
background-image: none;
216+
display: list-item;
217+
list-style: none;
218218
position: static;
219-
padding: 0.25rem 8px;
219+
padding: var(--ms-drop-list-item-padding, $ms-drop-list-item-padding);
220220

221221
.disabled {
222-
font-weight: normal !important;
223-
opacity: 0.35;
224-
filter: Alpha(Opacity = 35);
225222
cursor: default;
223+
font-weight: normal !important;
224+
opacity: var(--ms-drop-list-item-disabled-opacity, $ms-drop-list-item-disabled-opacity);
225+
filter: var(--ms-drop-list-item-disabled-filter, $ms-drop-list-item-disabled-filter);
226226
}
227227

228228
&.multiple {
@@ -243,35 +243,35 @@
243243
}
244244

245245
label {
246-
position: relative;
247-
padding-left: 1.25rem;
248-
margin-bottom: 0;
249-
font-weight: normal;
246+
cursor: pointer;
250247
display: block;
248+
font-weight: normal;
249+
position: relative;
251250
white-space: nowrap;
252-
cursor: pointer;
251+
margin-bottom: var(--ms-label-margin-bottom, $ms-label-margin-bottom);
252+
padding-left: var(--ms-label-padding-left, $ms-label-padding-left);
253253

254254
&.optgroup {
255-
font-weight: bold;
255+
font-weight: var(--ms-drop-optgroup-font-weight, $ms-drop-optgroup-font-weight);
256256
}
257257
}
258258

259259
&.hide-radio {
260-
padding: 0;
260+
padding: var(--ms-drop-hide-radio-padding, $ms-drop-hide-radio-padding);
261261

262262
&:focus,
263263
&:hover {
264-
background-color: #f8f9fa;
264+
background-color: var(--ms-drop-hide-radio-hover-bgcolor, $ms-drop-hide-radio-hover-bgcolor);
265265
}
266266

267267
&.selected {
268-
color: #fff;
269-
background-color: #007bff;
268+
color: var(--ms-drop-hide-radio-selected-color, $ms-drop-hide-radio-selected-color);
269+
background-color: var(--ms-drop-hide-radio-selected-bgcolor, $ms-drop-hide-radio-selected-bgcolor);
270270
}
271271

272272
label {
273-
margin-bottom: 0;
274-
padding: 5px 8px;
273+
margin-bottom: var(--ms-drop-hide-radio-label-margin-bottom, $ms-drop-hide-radio-label-margin-bottom);
274+
padding: var(--ms-drop-hide-radio-label-padding, $ms-drop-hide-radio-label-padding);
275275
}
276276

277277
input {
@@ -281,13 +281,13 @@
281281

282282
&.option-level-1 {
283283
label {
284-
padding-left: 28px;
284+
padding-left: var(--ms-drop-list-item-level1-padding-left, $ms-drop-list-item-level1-padding-left);
285285
}
286286
}
287287

288288
&.option-divider {
289-
padding: 0;
290-
border-top: 1px solid #e9ecef;
289+
padding: var(--ms-drop-option-divider-padding, $ms-drop-option-divider-padding);
290+
border-top: var(--ms-drop-option-divider-border-top, $ms-drop-option-divider-border-top);
291291
}
292292
}
293293
}
@@ -296,8 +296,8 @@
296296
&[type='radio'],
297297
&[type='checkbox'] {
298298
position: absolute;
299-
margin-top: 0.3rem;
300-
margin-left: -1.25rem;
299+
margin-left: var(--ms-drop-input-margin-left, $ms-drop-input-margin-left);
300+
margin-top: var(--ms-drop-input-margin-top, $ms-drop-input-margin-top);
301301
}
302302
}
303303

‎lib/src/styles/themes/_variables-theme-bootstrap.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
* Multiple-Select-Vanilla SASS variables
3+
*/
4+
$ms-choice-border: 0 !default;
5+
$ms-parent-form-control-border-radius: 4px !default;
6+
$ms-parent-form-control-padding: 0 !default;
7+
$ms-drop-input-sm-margin-top: 0.4rem !default;
8+
$ms-drop-input-lg-margin-top: 0.5rem !default;
9+
$ms-drop-list-item-padding: 0.25rem 8px !default;
10+
$ms-drop-hide-radio-font-size: 87.5% !default;
11+
$ms-drop-hide-radio-margin-bottom: 0 !default;
12+
$ms-drop-hide-radio-color: #6c757d !default;
13+
$ms-drop-hide-radio-opacity: 1 !default;
14+
$ms-drop-hide-radio-option-level1-padding-left: 8px !default;
15+
$ms-dropdown-divider-group-border-top: 1px solid #e9ecef !default;
16+
$ms-dropdown-divider-first-group-border-top: none !default;

0 commit comments

Comments
 (0)