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/_items.scss
History View file @de23398
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,115 @@
1 
+
2 
+
3 
+.#{$select-ns}-control {
4 
+
5 
+	border: $select-border;
6 
+	padding: $select-padding-y $select-padding-x;
7 
+	width: 100%;
8 
+	overflow: hidden;
9 
+	position: relative;
10 
+	z-index: 1;
11 
+	box-sizing: border-box;
12 
+	box-shadow: $select-shadow-input;
13 
+	border-radius: $select-border-radius;
14 
+	display: flex;
15 
+	flex-wrap: wrap;
16 
+
17 
+	.#{$select-ns}-wrapper.multi.has-items & {
18 
+		$padding-x: $select-padding-x;
19 
+		$padding-top: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border});
20 
+		$padding-bottom: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} - #{$select-width-item-border});
21 
+		padding: $padding-top $padding-x $padding-bottom;
22 
+	}
23 
+
24 
+	.full & {
25 
+		background-color: $select-color-input-full;
26 
+	}
27 
+
28 
+	.disabled &,
29 
+	.disabled & * {
30 
+		cursor: default !important;
31 
+	}
32 
+
33 
+	.focus & {
34 
+		box-shadow: $select-shadow-input-focus;
35 
+	}
36 
+
37 
+	> * {
38 
+		vertical-align: baseline;
39 
+		display: inline-block;
40 
+	}
41 
+
42 
+	.#{$select-ns}-wrapper.multi & > div {
43 
+		cursor: pointer;
44 
+		margin: 0 $select-margin-item-x $select-margin-item-y 0;
45 
+		padding: $select-padding-item-y $select-padding-item-x;
46 
+		background: $select-color-item;
47 
+		color: $select-color-item-text;
48 
+		border: $select-width-item-border solid $select-color-item-border;
49 
+
50 
+		&.active {
51 
+			background: $select-color-item-active;
52 
+			color: $select-color-item-active-text;
53 
+			border: $select-width-item-border solid $select-color-item-active-border;
54 
+		}
55 
+	}
56 
+
57 
+	.#{$select-ns}-wrapper.multi.disabled & > div {
58 
+		&, &.active {
59 
+			color: lighten(desaturate($select-color-item-text, 100%), $select-lighten-disabled-item-text);
60 
+			background: lighten(desaturate($select-color-item, 100%), $select-lighten-disabled-item);
61 
+			border: $select-width-item-border solid lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
62 
+		}
63 
+	}
64 
+
65 
+	> input {
66 
+		&::-ms-clear {
67 
+			display: none;
68 
+		}
69 
+
70 
+		flex: 1 1 auto;
71 
+		min-width: 7rem;
72 
+		display: inline-block !important;
73 
+		padding: 0 !important;
74 
+		min-height: 0 !important;
75 
+		max-height: none !important;
76 
+		max-width: 100% !important;
77 
+		margin: 0 !important;
78 
+		text-indent: 0 !important;
79 
+		border: 0 none !important;
80 
+		background: none !important;
81 
+		line-height: inherit !important;
82 
+		user-select: auto !important;
83 
+		box-shadow: none !important;
84 
+		&:focus { outline: none !important; }
85 
+	}
86 
+
87 
+	.has-items & > input{
88 
+		margin: $select-caret-margin !important;
89 
+	}
90 
+
91 
+	&.rtl {
92 
+		text-align: right;
93 
+		&.single .#{$select-ns}-control:after {
94 
+			left: $select-arrow-offset;
95 
+			right: auto;
96 
+		}
97 
+		.#{$select-ns}-control > input {
98 
+			margin: $select-caret-margin-rtl !important;
99 
+		}
100 
+	}
101 
+
102 
+	.disabled & {
103 
+		opacity: $select-opacity-disabled;
104 
+		background-color: $select-color-disabled;
105 
+	}
106 
+
107 
+	// hide input, while retaining its focus, and maintain layout so users can still click on the space to bring the display back
108 
+	// visibility:hidden can prevent the input from receiving focus
109 
+	.input-hidden & > input{
110 
+		opacity: 0;
111 
+		position: absolute;
112 
+		left: -10000px;
113 
+	}
114 
+
115 
+}