@miljodirektoratet/md-css 1.0.12 → 1.0.14
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,58 @@
|
|
|
1
|
+
# Structure
|
|
2
|
+
|
|
3
|
+
To use the `Autocomplete` 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-autocomplete [md-autocomplete--open, md-autocomplete--disabled, md-autocomplete--medium, md-autocomplete--small, md-autocomplete--error]">
|
|
11
|
+
<div className="md-autocomplete__label">
|
|
12
|
+
<div>{label}</div>
|
|
13
|
+
<div className="md-autocomplete__help-button">
|
|
14
|
+
{button to trigger help text}
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<div className="md-autocomplete__help-text [md-autocomplete__help-text--open]">
|
|
19
|
+
{helpText}
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<MdClickOutsideWrapper> <- optional wrapper to close autocomplete box when clicking outside
|
|
23
|
+
<!-- Optional prefix-icon -->
|
|
24
|
+
<div className="md-autocomplete__input__prefix [md-autocomplete__input__prefix--disabled]">
|
|
25
|
+
{prefixIcon}
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<input
|
|
29
|
+
id=""
|
|
30
|
+
className="md-autocomplete__input [md-autocomplete__input--open, md-autocomplete__input--error, md-autocomplete__input--has-prefix]"
|
|
31
|
+
value={value}
|
|
32
|
+
...
|
|
33
|
+
/>
|
|
34
|
+
|
|
35
|
+
<div className="md-autocomplete__input-icon">
|
|
36
|
+
<MdChevronIcon />
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div className="md-autocomplete__dropdown">
|
|
40
|
+
<button
|
|
41
|
+
tabIndex={open ? 0: -1}
|
|
42
|
+
className="md-autocomplete__dropdown-item [md-autocomplete__dropdown-item--selected]"
|
|
43
|
+
onClick={function to handle select|deselect option}
|
|
44
|
+
>
|
|
45
|
+
<div className="md-autocomplete__dropdown-item-text">{option.text}</div>
|
|
46
|
+
|
|
47
|
+
{if seleceted option
|
|
48
|
+
<div className="md-autocomplete__dropdown-item-clear" title="Klikk for å fjerne valg">
|
|
49
|
+
<MdXIcon />
|
|
50
|
+
</div>
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
</button>
|
|
54
|
+
</div>
|
|
55
|
+
</MdClickOutsideWrapper>
|
|
56
|
+
<div className="md-autocomplete__error">{errorText}</div>
|
|
57
|
+
</div>
|
|
58
|
+
```
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
.md-autocomplete {
|
|
2
|
+
font-family: 'Open sans';
|
|
3
|
+
width: 634px;
|
|
4
|
+
max-width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.md-autocomplete--medium {
|
|
8
|
+
width: 440px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.md-autocomplete--small {
|
|
12
|
+
width: 260px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.md-autocomplete__container {
|
|
16
|
+
position: relative;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.md-autocomplete__label {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: flex-end;
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.md-autocomplete__label > * + * {
|
|
26
|
+
margin-left: 1em;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.md-autocomplete__input {
|
|
30
|
+
max-width: 100%;
|
|
31
|
+
width: 100%;
|
|
32
|
+
background-color: #fff;
|
|
33
|
+
border-radius: 0;
|
|
34
|
+
color: var(--mdGreyColor);
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
font-family: 'Open sans';
|
|
37
|
+
font-size: 1em;
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
padding: 1em;
|
|
42
|
+
border: 1px solid var(--mdGreyColor60);
|
|
43
|
+
margin: .8em 0 0 0;
|
|
44
|
+
text-align: left;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.md-autocomplete__input.md-autocomplete__input--error {
|
|
49
|
+
border-color: var(--mdErrorColor);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.md-autocomplete--disabled .md-autocomplete__input {
|
|
53
|
+
background-color: var(--mdGreyColor20);
|
|
54
|
+
color: var(--mdGreyColor60);
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.md-autocomplete__input:focus,
|
|
59
|
+
.md-autocomplete__input:focus-within {
|
|
60
|
+
outline: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.md-autocomplete__input-text {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-grow: 1;
|
|
66
|
+
padding-right: 1em;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.md-autocomplete__input-icon {
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-shrink: 0;
|
|
72
|
+
width: 15px;
|
|
73
|
+
height: 15px;
|
|
74
|
+
rotate: 90deg;
|
|
75
|
+
color: var(--mdGreyColor);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.md-autocomplete__input.md-autocomplete__input--has-prefix {
|
|
79
|
+
padding-left: 2.5em;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.md-autocomplete__input--small.md-autocomplete__input--has-prefix {
|
|
83
|
+
padding-left: 1.8em;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.md-autocomplete__input__prefix {
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: 1.3em;
|
|
89
|
+
left: 1em;
|
|
90
|
+
height: 16px;
|
|
91
|
+
width: 16px;
|
|
92
|
+
display: flex;
|
|
93
|
+
color: var(--mdPrimaryColor);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.md-autocomplete__input__prefix.md-autocomplete__input__prefix--disabled {
|
|
97
|
+
color: var(--mdGreyColor60);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.md-autocomplete__input-icon {
|
|
101
|
+
position: absolute;
|
|
102
|
+
top: 1.3em;
|
|
103
|
+
right: .9em;
|
|
104
|
+
display: flex;
|
|
105
|
+
width: 15px;
|
|
106
|
+
height: 15px;
|
|
107
|
+
rotate: 90deg;
|
|
108
|
+
color: var(--mdGreyColor);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.md-autocomplete__help-text {
|
|
112
|
+
max-height: 0;
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
transition: max-height 0.15s ease-out;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.md-autocomplete__help-text--open {
|
|
118
|
+
padding-top: .5em;
|
|
119
|
+
max-height: 2000px;
|
|
120
|
+
transition: max-height 0.5s ease-in;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.md-autocomplete__dropdown {
|
|
124
|
+
position: absolute;
|
|
125
|
+
max-height: 0;
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
opacity: 0;
|
|
128
|
+
transition: max-height .5s ease-in-out;
|
|
129
|
+
width: calc(100% - 4px); /* Full width minus border-width */
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.md-autocomplete__dropdown-item {
|
|
133
|
+
display: flex;
|
|
134
|
+
font-family: 'Open sans';
|
|
135
|
+
border: 0;
|
|
136
|
+
background-color: #fff;
|
|
137
|
+
width: 100%;
|
|
138
|
+
text-align: left;
|
|
139
|
+
padding: .9em;
|
|
140
|
+
transition: background-color .15s ease-in-out;
|
|
141
|
+
cursor: pointer;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.md-autocomplete__dropdown-item:hover,
|
|
145
|
+
.md-autocomplete__dropdown-item:focus {
|
|
146
|
+
outline: none;
|
|
147
|
+
background-color: var(--mdPrimaryColor20);
|
|
148
|
+
transition: background-color .15s ease-in-out;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.md-autocomplete__dropdown-item--selected {
|
|
152
|
+
background-color: var(--mdPrimaryColor10);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.md-autocomplete__dropdown-item-text {
|
|
156
|
+
display: flex;
|
|
157
|
+
flex-grow: 1;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.md-autocomplete__dropdown-item-clear {
|
|
161
|
+
display: flex;
|
|
162
|
+
flex-shrink: 0;
|
|
163
|
+
height: 12px;
|
|
164
|
+
width: 12px;
|
|
165
|
+
color: var(--mdPrimaryColor);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* Open state */
|
|
169
|
+
.md-autocomplete--open .md-autocomplete__input {
|
|
170
|
+
border-left: 2px solid var(--mdPrimaryColor);
|
|
171
|
+
border-right: 2px solid var(--mdPrimaryColor);
|
|
172
|
+
border-top: 2px solid var(--mdPrimaryColor);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.md-autocomplete--open .md-autocomplete__dropdown {
|
|
176
|
+
max-height: 350px;
|
|
177
|
+
overflow-y: auto;
|
|
178
|
+
opacity: 1;
|
|
179
|
+
transition: max-height .5s ease-in-out;
|
|
180
|
+
border-right: 2px solid var(--mdPrimaryColor);
|
|
181
|
+
border-left: 2px solid var(--mdPrimaryColor);
|
|
182
|
+
border-bottom: 2px solid var(--mdPrimaryColor);
|
|
183
|
+
z-index: 2;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* open + error */
|
|
187
|
+
.md-autocomplete--open.md-autocomplete--error .md-autocomplete__input {
|
|
188
|
+
border-color: var(--mdErrorColor);
|
|
189
|
+
}
|
|
190
|
+
.md-autocomplete--open.md-autocomplete--error .md-autocomplete__dropdown {
|
|
191
|
+
border-color: var(--mdErrorColor);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* Error text */
|
|
195
|
+
.md-autocomplete__error {
|
|
196
|
+
color: var(--mdErrorColor);
|
|
197
|
+
font-size: .88em;
|
|
198
|
+
}
|
package/src/index.css
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
@import './formElements/checkboxgroup/checkboxgroup.css';
|
|
19
19
|
@import './formElements/textarea/textarea.css';
|
|
20
20
|
@import './formElements/select/select.css';
|
|
21
|
+
@import './formElements/autocomplete/autocomplete.css';
|
|
21
22
|
@import './formElements/radiogroup/radiogroup.css';
|
|
22
23
|
@import './formElements/multiselect/multiselect.css';
|
|
23
24
|
@import './formElements/fileupload/fileupload.css';
|