eSales Media Git repositories
Browse code

Add tom select npm package

Benjamin Roth authored on02/02/2023 12:00:30
Showing1 changed files
public/lib/tomselect/scss/tom-select.bootstrap5.scss
History View file @de23398
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,284 @@
1 
+/**
2 
+ * Tom Select bootstrap 5
3 
+ */
4 
+
5 
+//Import Boostrap 5 functions and variables
6 
+$state-valid: map-get($form-validation-states,'valid') !default;
7 
+$state-invalid: map-get($form-validation-states,'invalid') !default;
8 
+
9 
+
10 
+$enable-shadows: true !default;
11 
+$select-font-family: inherit !default;
12 
+$select-font-size: inherit !default;
13 
+$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
14 
+
15 
+$select-color-text: $gray-800 !default;
16 
+$select-color-highlight: rgba(255,237,40,0.4) !default;
17 
+$select-color-input: $input-bg !default;
18 
+$select-color-input-full: $input-bg !default;
19 
+
20 
+
21 
+$select-color-disabled: $input-disabled-bg !default;
22 
+$select-color-item: #efefef !default;
23 
+$select-color-item-border: $border-color !default;
24 
+$select-color-item-active: $component-active-bg !default;
25 
+$select-color-item-active-text: #fff !default;
26 
+$select-color-item-active-border: rgba(0,0,0,0) !default;
27 
+$select-color-optgroup: $dropdown-bg !default;
28 
+$select-color-optgroup-text: $dropdown-header-color !default;
29 
+$select-color-optgroup-border: $dropdown-divider-bg !default;
30 
+$select-color-dropdown: $dropdown-bg !default;
31 
+$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
32 
+$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
33 
+$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
34 
+$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
35 
+$select-opacity-disabled: 0.5 !default;
36 
+
37 
+$select-border: 1px solid $input-border-color !default;
38 
+$select-border-radius: $input-border-radius !default;
39 
+
40 
+$select-width-item-border: 0px !default;
41 
+$select-padding-x: $input-padding-x !default;
42 
+$select-padding-y: $input-padding-y !default;
43 
+$select-padding-dropdown-item-x: $input-btn-padding-x !default;
44 
+$select-padding-dropdown-item-y: 3px !default;
45 
+$select-padding-item-x: 5px !default;
46 
+$select-padding-item-y: 1px !default;
47 
+$select-margin-item-x: 3px !default;
48 
+$select-margin-item-y: 3px !default;
49 
+
50 
+$select-arrow-size: 5px !default;
51 
+$select-arrow-color: $select-color-text !default;
52 
+$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
53 
+
54 
+
55 
+@import "tom-select";
56 
+
57 
+
58 
+@mixin ts-form-validation-state-selector($state) {
59 
+
60 
+	$state-map: map-get($form-validation-states,$state);
61 
+
62 
+	.#{$select-ns}-wrapper.is-#{$state},
63 
+	.was-validated .#{$state},
64 
+	.was-validated :#{$state} + .#{$select-ns}-wrapper{
65 
+
66 
+		$color: map-get($state-map,'color');
67 
+		$icon: map-get($state-map,'icon');
68 
+
69 
+		border-color: $color;
70 
+
71 
+		&:not(.single){
72 
+			background-image: escape-svg($icon);
73 
+			background-position: right $input-height-inner-quarter center;
74 
+			background-size: $input-height-inner-half $input-height-inner-half;
75 
+			background-repeat: no-repeat;
76 
+		}
77 
+
78 
+		&.single{
79 
+			background-image: escape-svg($form-select-indicator), escape-svg($icon);
80 
+			background-position: $form-select-bg-position, $form-select-feedback-icon-position;
81 
+			background-size: $form-select-bg-size, $form-select-feedback-icon-size;
82 
+			background-repeat: no-repeat;
83 
+		}
84 
+
85 
+		&.focus .#{$select-ns}-control{
86 
+			border-color: $color;
87 
+	        box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity);
88 
+		}
89 
+
90 
+	}
91 
+}
92 
+
93 
+
94 
+.#{$select-ns}-wrapper.form-control,
95 
+.#{$select-ns}-wrapper.form-select{
96 
+	padding:0 !important;
97 
+	height: auto;
98 
+	box-shadow: none;
99 
+	display: flex;
100 
+}
101 
+
102 
+.#{$select-ns}-dropdown,
103 
+.#{$select-ns}-dropdown.form-control,
104 
+.#{$select-ns}-dropdown.form-select{
105 
+	height: auto;
106 
+	padding: 0;
107 
+	z-index: $zindex-dropdown;
108 
+	background: $select-color-dropdown;
109 
+	border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
110 
+	border-radius: $border-radius;
111 
+	box-shadow: 0 6px 12px rgba(0,0,0,.175);
112 
+}
113 
+
114 
+.#{$select-ns}-dropdown {
115 
+	.optgroup-header {
116 
+		font-size: $font-size-sm;
117 
+		line-height: $line-height-base;
118 
+	}
119 
+	.optgroup:first-child:before {
120 
+		display: none;
121 
+	}
122 
+	.optgroup:before {
123 
+		content: ' ';
124 
+		display:	 block;
125 
+		height: 0;
126 
+		margin: $dropdown-divider-margin-y 0;
127 
+		overflow: hidden;
128 
+		border-top: 1px solid $dropdown-divider-bg;
129 
+		margin-left: $select-padding-dropdown-item-x * -1;
130 
+		margin-right: $select-padding-dropdown-item-x * -1;
131 
+	}
132 
+
133 
+	.create {
134 
+		padding-left: $select-padding-dropdown-item-x;
135 
+	}
136 
+}
137 
+
138 
+.#{$select-ns}-dropdown-content {
139 
+	padding: 5px 0;
140 
+}
141 
+
142 
+.#{$select-ns}-control {
143 
+	@include box-shadow($input-box-shadow);
144 
+	@include transition($input-transition);
145 
+	display:flex;
146 
+	align-items: center;
147 
+
148 
+	&.dropdown	-active {
149 
+		border-radius: $select-border-radius;
150 
+	}
151 
+
152 
+	.focus &{
153 
+		border-color: $input-focus-border-color;
154 
+		outline: 0;
155 
+		@if $enable-shadows {
156 
+			box-shadow: $input-box-shadow, $input-focus-box-shadow;
157 
+		} @else {
158 
+			box-shadow: $input-focus-box-shadow;
159 
+		}
160 
+	}
161 
+
162 
+	.item{
163 
+		display:	flex;
164 
+		align-items: center;
165 
+	}
166 
+}
167 
+
168 
+
169 
+@include ts-form-validation-state-selector('invalid');
170 
+@include ts-form-validation-state-selector('valid');
171 
+
172 
+
173 
+.#{$select-ns}-wrapper {
174 
+	min-height: $input-height;
175 
+	display:flex;
176 
+
177 
+	.input-group-sm > &,
178 
+	&.form-select-sm,
179 
+	&.form-control-sm{
180 
+		min-height: $input-height-sm;
181 
+
182 
+		.#{$select-ns}-control{
183 
+				//padding: $input-padding-y-sm $input-padding-x-sm;
184 
+			@include border-radius($input-border-radius-sm);
185 
+			@include font-size($input-font-size-sm);
186 
+		}
187 
+
188 
+		&.has-items .#{$select-ns}-control{
189 
+			font-size: $input-font-size-sm;
190 
+			padding-bottom: 0;
191 
+		}
192 
+	}
193 
+
194 
+
195 
+	.input-group-sm > &.multi.has-items,
196 
+	&.form-select-sm.multi.has-items,
197 
+	&.form-control-sm.multi.has-items{
198 
+		.#{$select-ns}-control{
199 
+			// padding-top = ($input-height-sm - border-width - item-height) / 2;
200 
+			// item-height = ($select-line-height * $input-font-size-sm) + ($select-padding-item-y * 2)
201 
+			$border-and-padding: add($input-border-width,$select-padding-item-y) * 2;
202 
+			$ts-select-padding-sm: calc( (#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
203 
+			padding-top: $ts-select-padding-sm !important;
204 
+		}
205 
+	}
206 
+
207 
+
208 
+	&.multi {
209 
+		&.has-items .#{$select-ns}-control {
210 
+			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
211 
+			--ts-pr-min: calc(#{$select-padding-x} - #{$select-padding-item-x});
212 
+		}
213 
+		.#{$select-ns}-control > div {
214 
+			border-radius: calc(#{$select-border-radius} - 1px);
215 
+		}
216 
+	}
217 
+
218 
+	.input-group-lg > &,
219 
+	&.form-control-lg,
220 
+	&.form-select-lg{
221 
+		min-height: $input-height-lg;
222 
+		.#{$select-ns}-control{
223 
+			@include border-radius($input-border-radius-lg);
224 
+			@include font-size($input-font-size-lg);
225 
+		}
226 
+	}
227 
+}
228 
+
229 
+
230 
+.#{$select-ns}-wrapper{
231 
+
232 
+	&:not(.form-control):not(.form-select){
233 
+		padding: 0;
234 
+		border: none;
235 
+		height: auto;
236 
+		box-shadow: none;
237 
+		background: none;
238 
+
239 
+		&.single .#{$select-ns}-control{
240 
+			background-image: escape-svg($form-select-indicator);
241 
+			background-repeat: no-repeat;
242 
+			background-position: $form-select-bg-position;
243 
+			background-size: $form-select-bg-size;
244 
+		}
245 
+	}
246 
+
247 
+	&.form-select,
248 
+	&.single{
249 
+		--ts-pr-caret: #{$form-select-indicator-padding};
250 
+	}
251 
+
252 
+}
253 
+
254 
+.#{$select-ns}-wrapper.form-control,
255 
+.#{$select-ns}-wrapper.form-select{
256 
+
257 
+	.#{$select-ns}-control,
258 
+	&.single.input-active .#{$select-ns}-control{
259 
+		border:		none !important;
260 
+	}
261 
+
262 
+	&:not(.disabled) .#{$select-ns}-control,
263 
+	&:not(.disabled).single.input-active .#{$select-ns}-control{
264 
+		background: transparent !important; // let the background of .form-select show through
265 
+	}
266 
+
267 
+}
268 
+
269 
+.input-group{
270 
+
271 
+	& > .#{$select-ns}-wrapper{
272 
+		flex-grow: 1;
273 
+	}
274 
+
275 
+	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control{
276 
+		border-top-left-radius: 0;
277 
+		border-bottom-left-radius: 0;
278 
+	}
279 
+
280 
+	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control{
281 
+		border-top-right-radius: 0;
282 
+		border-bottom-right-radius: 0;
283 
+	}
284 
+}