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/_dropdown.scss
History View file @de23398
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,102 @@
1 
+
2 
+
3 
+.#{$select-ns}-dropdown {
4 
+	position: absolute;
5 
+	top: 100%;
6 
+	left: 0;
7 
+	width: 100%;
8 
+	z-index: 10;
9 
+
10 
+	border: $select-dropdown-border;
11 
+	background: $select-color-dropdown;
12 
+	margin: 0.25rem 0 0 0;
13 
+	border-top: 0 none;
14 
+	box-sizing: border-box;
15 
+	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
16 
+	border-radius: 0 0 $select-border-radius $select-border-radius;
17 
+
18 
+
19 
+	[data-selectable] {
20 
+		cursor: pointer;
21 
+		overflow: hidden;
22 
+		.highlight {
23 
+			background: $select-color-highlight;
24 
+			border-radius: 1px;
25 
+		}
26 
+	}
27 
+
28 
+	.option,
29 
+	.optgroup-header,
30 
+	.no-results,
31 
+	.create {
32 
+		padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
33 
+	}
34 
+
35 
+	.option, [data-disabled], [data-disabled] [data-selectable].option {
36 
+		cursor: inherit;
37 
+		opacity: 0.5;
38 
+	}
39 
+
40 
+	[data-selectable].option {
41 
+		opacity: 1;
42 
+		cursor: pointer;
43 
+	}
44 
+
45 
+	.optgroup:first-child .optgroup-header {
46 
+		border-top: 0 none;
47 
+	}
48 
+
49 
+	.optgroup-header {
50 
+		color: $select-color-optgroup-text;
51 
+		background: $select-color-optgroup;
52 
+		cursor: default;
53 
+	}
54 
+
55 
+	.active {
56 
+		background-color: $select-color-dropdown-item-active;
57 
+		color: $select-color-dropdown-item-active-text;
58 
+		&.create {
59 
+			color: $select-color-dropdown-item-create-active-text;
60 
+		}
61 
+	}
62 
+
63 
+	.create {
64 
+		color: $select-color-dropdown-item-create-text;
65 
+	}
66 
+
67 
+	.spinner{
68 
+		display: inline-block;
69 
+		width: $select-spinner-size;
70 
+		height: $select-spinner-size;
71 
+		margin: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
72 
+
73 
+
74 
+		&:after {
75 
+			content: " ";
76 
+			display: block;
77 
+			width: $select-spinner-size * .8;
78 
+			height: $select-spinner-size * .8;
79 
+			margin: $select-spinner-size * .1;
80 
+			border-radius: 50%;
81 
+			border: $select-spinner-border-size solid $select-spinner-border-color;
82 
+			border-color: $select-spinner-border-color transparent $select-spinner-border-color transparent;
83 
+			animation: lds-dual-ring 1.2s linear infinite;
84 
+		}
85 
+		@keyframes lds-dual-ring {
86 
+			0% {
87 
+				transform: rotate(0deg);
88 
+			}
89 
+			100% {
90 
+				transform: rotate(360deg);
91 
+			}
92 
+		}
93 
+	}
94 
+}
95 
+
96 
+.#{$select-ns}-dropdown-content {
97 
+	overflow-y: auto;
98 
+	overflow-x: hidden;
99 
+	max-height: $select-max-height-dropdown;
100 
+	overflow-scrolling: touch;
101 
+	scroll-behavior: smooth;
102 
+}