1 | @use './variables.scss' as *;
|
2 | @use './mixins.scss';
|
3 |
|
4 | $gutter-pt: 0.115 !default;
|
5 | $tag-padding-left: 0.35em !default;
|
6 | $tag-padding-right: 0.35em !default;
|
7 |
|
8 | $tag-color: null !default;
|
9 | $tag-border-color: $gray-300 !default;
|
10 | $tag-bg: $gray-300 !default;
|
11 |
|
12 | $tag-height-pt: 1 - ($gutter-pt * 2) !default;
|
13 | $tag-gutter: calc(
|
14 | #{$input-height} * #{$gutter-pt} - #{$input-border-width}
|
15 | ) !default;
|
16 | $tag-height: calc(#{$input-height} * #{$tag-height-pt}) !default;
|
17 | $tag-border-radius: 3px !default;
|
18 |
|
19 | $tag-btn-padding-y: 0 !default;
|
20 | $tag-btn-padding-x: 0.35em !default;
|
21 |
|
22 | $tag-btn-bg: null !default;
|
23 | $tag-btn-border-color: null !default;
|
24 | $tag-btn-color: null !default;
|
25 |
|
26 | $tag-btn-hover-bg: null !default;
|
27 | $tag-btn-hover-border-color: null !default;
|
28 | $tag-btn-hover-color: null !default;
|
29 |
|
30 | $tag-btn-active-bg: null !default;
|
31 | $tag-btn-active-border-color: null !default;
|
32 | $tag-btn-active-color: null !default;
|
33 |
|
34 | @mixin Multiselect() {
|
35 | .rw-multiselect {
|
36 | }
|
37 |
|
38 | .rw-multiselect-input {
|
39 | @include mixins.btn-input-reset;
|
40 | @include mixins.input-base;
|
41 |
|
42 | height: calc(#{$input-height} - #{$input-border-width} * 2);
|
43 | padding: 0 $input-padding-x;
|
44 | max-width: 100%;
|
45 |
|
46 | &:disabled,
|
47 | &:read-only {
|
48 |
|
49 | cursor: inherit;
|
50 | }
|
51 | }
|
52 |
|
53 | .rw-multiselect-taglist {
|
54 | display: flex;
|
55 | flex-wrap: wrap;
|
56 | align-items: flex-start;
|
57 | width: 100%;
|
58 | outline: none;
|
59 | cursor: text;
|
60 |
|
61 | .rw-state-disabled & {
|
62 | cursor: unset;
|
63 | }
|
64 | }
|
65 |
|
66 | .rw-multiselect-tag {
|
67 | display: inline-flex;
|
68 | color: $tag-color;
|
69 | margin-left: $tag-gutter;
|
70 | margin-top: $tag-gutter;
|
71 | min-height: $tag-height;
|
72 | border-radius: $tag-border-radius;
|
73 | background-color: $tag-bg;
|
74 | border: if($tag-border-color, 1px solid $tag-border-color, null);
|
75 |
|
76 | cursor: default;
|
77 | max-width: 100%;
|
78 | align-items: center;
|
79 |
|
80 |
|
81 | overflow: hidden;
|
82 |
|
83 | &:focus {
|
84 | outline: none;
|
85 | }
|
86 |
|
87 | [dir='rtl'] & {
|
88 | margin-left: 0;
|
89 | margin-right: $tag-gutter;
|
90 | padding: 0 $tag-padding-left 0 $tag-padding-right;
|
91 | }
|
92 |
|
93 | &.rw-state-focus {
|
94 | @include mixins.focus-ring();
|
95 | }
|
96 |
|
97 | &.rw-state-disabled,
|
98 | fieldset[disabled] & {
|
99 | opacity: 0.65;
|
100 | }
|
101 | }
|
102 |
|
103 | .rw-multiselect-tag-label {
|
104 | padding: 0 $tag-padding-right 0 $tag-padding-left;
|
105 | }
|
106 |
|
107 | .rw-multiselect-tag-btn {
|
108 | @include mixins.btn-input-reset;
|
109 |
|
110 | cursor: pointer;
|
111 | align-self: stretch;
|
112 |
|
113 | padding: $tag-btn-padding-y $tag-btn-padding-x;
|
114 | color: $tag-btn-color;
|
115 | border-color: $tag-btn-border-color;
|
116 | background-color: $tag-btn-bg;
|
117 |
|
118 | &:hover {
|
119 | color: $tag-btn-hover-color;
|
120 | border-color: $tag-btn-hover-border-color;
|
121 | background-color: $tag-btn-hover-bg;
|
122 | }
|
123 | &:active {
|
124 | color: $tag-btn-active-color;
|
125 | background-color: $tag-btn-active-bg;
|
126 | border-color: $tag-btn-active-border-color;
|
127 | }
|
128 |
|
129 | &:focus {
|
130 | outline: none;
|
131 | }
|
132 |
|
133 | &:disabled {
|
134 | cursor: inherit;
|
135 | }
|
136 | }
|
137 | }
|