Browse code
Add tom select npm package
Benjamin Roth authored on02/02/2023 12:00:30 Showing1 changed files
| 1 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,31 @@ |
| 1 |
+.plugin-clear_button{
|
|
| 2 |
+ --ts-pr-clear-button: 1em; |
|
| 3 |
+ |
|
| 4 |
+ .clear-button{
|
|
| 5 |
+ opacity: 0; |
|
| 6 |
+ position: absolute; |
|
| 7 |
+ top: 50%; |
|
| 8 |
+ transform: translateY(-50%); |
|
| 9 |
+ right: calc(#{$select-padding-x} - #{$select-padding-item-x});
|
|
| 10 |
+ margin-right: 0 !important; |
|
| 11 |
+ background: transparent !important; |
|
| 12 |
+ transition: opacity 0.5s; |
|
| 13 |
+ cursor: pointer; |
|
| 14 |
+ } |
|
| 15 |
+ |
|
| 16 |
+ &.form-select .clear-button, |
|
| 17 |
+ &.single .clear-button{
|
|
| 18 |
+ |
|
| 19 |
+ @if variable-exists(select-padding-dropdown-item-x) {
|
|
| 20 |
+ right: Max( var(--ts-pr-caret), #{$select-padding-dropdown-item-x});
|
|
| 21 |
+ } |
|
| 22 |
+ @else{
|
|
| 23 |
+ right: Max( var(--ts-pr-caret), calc(#{$select-padding-x} - #{$select-padding-item-x}) );
|
|
| 24 |
+ } |
|
| 25 |
+ } |
|
| 26 |
+ |
|
| 27 |
+ &.focus.has-items .clear-button, |
|
| 28 |
+ &:not(.disabled):hover.has-items .clear-button{
|
|
| 29 |
+ opacity: 1; |
|
| 30 |
+ } |
|
| 31 |
+} |