@miljodirektoratet/md-css 2.2.1 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Structure
|
|
2
|
+
|
|
3
|
+
To use the `MultiAutocomplete` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
|
|
4
|
+
|
|
5
|
+
Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
|
|
6
|
+
|
|
7
|
+
See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<div className="md-multiautocomplete [md-multiautocomplete--open, md-multiautocomplete--disabled, md-multiautocomplete--medium, md-multiautocomplete--small, md-multiautocomplete--error]">
|
|
11
|
+
<div className="md-multiautocomplete__label">
|
|
12
|
+
<div>{label}</div>
|
|
13
|
+
<div className="md-multiautocomplete__help-button">
|
|
14
|
+
{button to trigger help text}
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<div className="md-multiautocomplete__help-text [md-multiautocomplete__help-text--open]">
|
|
19
|
+
{helpText}
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<MdClickOutsideWrapper> <- optional wrapper to close multiautocomplete box when clicking outside
|
|
23
|
+
<!-- Optional prefix-icon -->
|
|
24
|
+
<div className="md-multiautocomplete__input__prefix [md-multiautocomplete__input__prefix--disabled]">
|
|
25
|
+
{prefixIcon}
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<input
|
|
29
|
+
id=""
|
|
30
|
+
className="md-multiautocomplete__input [md-multiautocomplete__input--open, md-multiautocomplete__input--error, md-multiautocomplete__input--has-prefix]"
|
|
31
|
+
value={value}
|
|
32
|
+
...
|
|
33
|
+
/>
|
|
34
|
+
|
|
35
|
+
{number of selected items > 1 && !open &&
|
|
36
|
+
<div className="md-multiautocomplete__button-hasmultiple">+{selected.length - 1}</div>
|
|
37
|
+
}
|
|
38
|
+
<div className="md-multiautocomplete__input-icon">
|
|
39
|
+
<MdChevronIcon />
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div className="md-multiautocomplete__dropdown [md-multiautocomplete__dropdown--open]">
|
|
43
|
+
<div className="md-multiautocomplete__dropdown-item [md-multiautocomplete__dropdown-item--selected]">
|
|
44
|
+
{IMPORTANT! see MdCheckbox styles for description for the individual checkboxes}
|
|
45
|
+
<MdCheckbox
|
|
46
|
+
label="{option.text}"
|
|
47
|
+
tabIndex="{open"
|
|
48
|
+
?
|
|
49
|
+
0
|
|
50
|
+
:
|
|
51
|
+
-1}
|
|
52
|
+
checked="{true|false}"
|
|
53
|
+
value="{option.value}"
|
|
54
|
+
id="id-for-checkbox"
|
|
55
|
+
disabled="{true|false}"
|
|
56
|
+
data-value="{option.value}"
|
|
57
|
+
data-text="{option.text}"
|
|
58
|
+
onChange="{function"
|
|
59
|
+
for
|
|
60
|
+
change
|
|
61
|
+
handling}
|
|
62
|
+
/>
|
|
63
|
+
... ...
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</MdClickOutsideWrapper>
|
|
67
|
+
|
|
68
|
+
<div className="md-multiautocomplete__error">{errorText}</div>
|
|
69
|
+
|
|
70
|
+
<div className="md-multiautocomplete__chips">
|
|
71
|
+
To show input chips for selected options, see doc for MdInputChip. These can be listed here.
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
```
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
.md-multiautocomplete {
|
|
2
|
+
font-family: 'Open sans';
|
|
3
|
+
width: 100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.md-multiautocomplete--medium {
|
|
7
|
+
max-width: 440px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.md-multiautocomplete--small {
|
|
11
|
+
max-width: 260px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.md-multiautocomplete__container {
|
|
15
|
+
position: relative;
|
|
16
|
+
background-color: white;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.md-multiautocomplete__label {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: flex-end;
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
padding-bottom: 0.5em;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.md-multiautocomplete__label > * + * {
|
|
27
|
+
margin-left: 1em;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.md-multiautocomplete__input {
|
|
31
|
+
max-width: 100%;
|
|
32
|
+
width: 100%;
|
|
33
|
+
background-color: transparent;
|
|
34
|
+
border-radius: 0;
|
|
35
|
+
color: var(--mdGreyColor);
|
|
36
|
+
box-sizing: border-box;
|
|
37
|
+
font-family: 'Open sans';
|
|
38
|
+
font-size: 1em;
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: space-between;
|
|
42
|
+
padding: 1em;
|
|
43
|
+
border: 1px solid var(--mdGreyColor60);
|
|
44
|
+
text-align: left;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
position: relative;
|
|
47
|
+
z-index: 1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.md-multiautocomplete__input.md-multiautocomplete__input--error {
|
|
51
|
+
border-color: var(--mdErrorColor);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.md-multiautocomplete--small > .md-multiautocomplete__input {
|
|
55
|
+
padding: 0.75em;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.md-multiautocomplete--disabled .md-multiautocomplete__input {
|
|
59
|
+
background-color: var(--mdGreyColor20);
|
|
60
|
+
color: var(--mdGreyColor60);
|
|
61
|
+
cursor: not-allowed;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.md-multiautocomplete__input:focus,
|
|
65
|
+
.md-multiautocomplete__input:focus-within {
|
|
66
|
+
outline: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.md-multiautocomplete__input-text {
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-grow: 1;
|
|
72
|
+
padding-right: 1em;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.md-multiautocomplete__input.md-multiautocomplete__input--has-prefix {
|
|
76
|
+
padding-left: 2.5em;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.md-multiautocomplete__input--small.md-multiautocomplete__input--has-prefix {
|
|
80
|
+
padding-left: 1.8em;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.md-multiautocomplete__input__prefix {
|
|
84
|
+
position: absolute;
|
|
85
|
+
top: 1.3em;
|
|
86
|
+
left: 1em;
|
|
87
|
+
height: 16px;
|
|
88
|
+
width: 16px;
|
|
89
|
+
display: flex;
|
|
90
|
+
color: var(--mdPrimaryColor);
|
|
91
|
+
z-index: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.md-multiautocomplete--small > .md-multiautocomplete__input__prefix {
|
|
95
|
+
top: 1em;
|
|
96
|
+
left: 1em;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.md-multiautocomplete__input__prefix.md-multiautocomplete__input__prefix--disabled {
|
|
100
|
+
color: var(--mdGreyColor60);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.md-multiautocomplete__input-icon {
|
|
104
|
+
position: absolute;
|
|
105
|
+
top: 1.3em;
|
|
106
|
+
right: 0.9em;
|
|
107
|
+
display: flex;
|
|
108
|
+
width: 16px;
|
|
109
|
+
height: 16px;
|
|
110
|
+
rotate: 90deg;
|
|
111
|
+
color: var(--mdGreyColor);
|
|
112
|
+
z-index: 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.md-multiautocomplete--small > .md-multiautocomplete__input-icon {
|
|
116
|
+
top: 1em;
|
|
117
|
+
right: 1em;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.md-multiautocomplete__button-text {
|
|
121
|
+
padding-right: 0.5em;
|
|
122
|
+
width: 90%;
|
|
123
|
+
overflow: hidden;
|
|
124
|
+
white-space: nowrap;
|
|
125
|
+
text-overflow: ellipsis;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.md-multiautocomplete__button-hasmultiple {
|
|
129
|
+
position: absolute;
|
|
130
|
+
top: 1.5em;
|
|
131
|
+
right: 4.5em;
|
|
132
|
+
display: flex;
|
|
133
|
+
z-index: 0;
|
|
134
|
+
font-size: 0.8em;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.md-multiautocomplete__help-text {
|
|
138
|
+
max-height: 0;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
transition: max-height 0.15s ease-out;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.md-multiautocomplete__help-text--open {
|
|
144
|
+
padding-top: 0.5em;
|
|
145
|
+
padding-bottom: 0.5em;
|
|
146
|
+
max-height: 2000px;
|
|
147
|
+
transition: max-height 0.5s ease-in;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.md-multiautocomplete__dropdown {
|
|
151
|
+
position: absolute;
|
|
152
|
+
max-height: 0;
|
|
153
|
+
overflow: hidden;
|
|
154
|
+
z-index: -1;
|
|
155
|
+
opacity: 0;
|
|
156
|
+
transition: max-height 0.5s ease-in-out;
|
|
157
|
+
width: calc(100% - 4px); /* Full width minus border-width */
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.md-multiautocomplete__dropdown-item {
|
|
161
|
+
display: flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
font-family: 'Open sans';
|
|
164
|
+
border: 0;
|
|
165
|
+
background-color: #fff;
|
|
166
|
+
width: 100%;
|
|
167
|
+
text-align: left;
|
|
168
|
+
padding: 0.9em;
|
|
169
|
+
transition: background-color 0.15s ease-in-out;
|
|
170
|
+
cursor: pointer;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.md-multiautocomplete__dropdown-item:hover,
|
|
174
|
+
.md-multiautocomplete__dropdown-item:focus {
|
|
175
|
+
outline: none;
|
|
176
|
+
background-color: var(--mdPrimaryColor20);
|
|
177
|
+
transition: background-color 0.15s ease-in-out;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.md-multiautocomplete__dropdown-item--selected {
|
|
181
|
+
background-color: var(--mdPrimaryColor10);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.md-multiautocomplete__dropdown-item-text {
|
|
185
|
+
display: flex;
|
|
186
|
+
flex-grow: 1;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.md-multiautocomplete__dropdown-item-clear {
|
|
190
|
+
display: flex;
|
|
191
|
+
flex-shrink: 0;
|
|
192
|
+
height: 12px;
|
|
193
|
+
width: 12px;
|
|
194
|
+
color: var(--mdPrimaryColor);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.md-multiautocomplete__chips {
|
|
198
|
+
display: flex;
|
|
199
|
+
margin-top: 0.7em;
|
|
200
|
+
flex-wrap: wrap;
|
|
201
|
+
gap: 0.5em;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* Open state */
|
|
205
|
+
.md-multiautocomplete--open .md-multiautocomplete__input {
|
|
206
|
+
border-left: 2px solid var(--mdPrimaryColor);
|
|
207
|
+
border-right: 2px solid var(--mdPrimaryColor);
|
|
208
|
+
border-top: 2px solid var(--mdPrimaryColor);
|
|
209
|
+
padding-bottom: calc(1em - 1px);
|
|
210
|
+
}
|
|
211
|
+
.md-multiautocomplete--open.md-multiautocomplete--small .md-multiautocomplete__input {
|
|
212
|
+
padding-bottom: calc(0.75em - 1px);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.md-multiautocomplete--open .md-multiautocomplete__dropdown {
|
|
216
|
+
max-height: 350px;
|
|
217
|
+
overflow-y: auto;
|
|
218
|
+
opacity: 1;
|
|
219
|
+
transition: max-height 0.5s ease-in-out;
|
|
220
|
+
border-right: 2px solid var(--mdPrimaryColor);
|
|
221
|
+
border-left: 2px solid var(--mdPrimaryColor);
|
|
222
|
+
border-bottom: 2px solid var(--mdPrimaryColor);
|
|
223
|
+
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
|
|
224
|
+
z-index: 2;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* Focus state */
|
|
228
|
+
.md-multiautocomplete:not(.md-multiautocomplete--open) .md-multiautocomplete__input:focus {
|
|
229
|
+
border: 2px solid var(--mdPrimaryColor);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* open + error */
|
|
233
|
+
.md-multiautocomplete--open.md-multiautocomplete--error .md-multiautocomplete__input {
|
|
234
|
+
border-color: var(--mdErrorColor);
|
|
235
|
+
}
|
|
236
|
+
.md-multiautocomplete--open.md-multiautocomplete--error .md-multiautocomplete__dropdown {
|
|
237
|
+
border-color: var(--mdErrorColor);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* Error text */
|
|
241
|
+
.md-multiautocomplete__error {
|
|
242
|
+
color: var(--mdErrorColor);
|
|
243
|
+
font-size: 0.88em;
|
|
244
|
+
}
|
package/src/index.css
CHANGED
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
@import './formElements/radiobutton/radiobutton.css';
|
|
26
26
|
@import './formElements/radiogroup/radiogroup.css';
|
|
27
27
|
@import './formElements/multiselect/multiselect.css';
|
|
28
|
+
@import './formElements/multiautocomplete/multiautocomplete.css';
|
|
28
29
|
@import './formElements/fileupload/fileupload.css';
|
|
29
30
|
@import './utils.css';
|
|
30
31
|
|