@miljodirektoratet/md-css 0.0.4 → 0.0.6
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 +1 -1
- package/src/button.css +47 -40
- package/src/chips.css +61 -0
- package/src/colors.css +22 -2
- package/src/filelist.css +72 -0
- package/src/formElements/checkbox.css +73 -0
- package/src/formElements/fileupload.css +66 -0
- package/src/formElements/input.css +171 -0
- package/src/formElements/multiselect.css +182 -0
- package/src/formElements/radiogroup.css +132 -0
- package/src/formElements/select.css +144 -0
- package/src/formElements/textarea.css +97 -0
- package/src/help.css +57 -0
- package/src/index.css +12 -2
- package/src/link.css +8 -5
- package/src/shortcut.css +1 -1
- package/src/toggle.css +96 -0
- package/src/utils.css +4 -0
- package/src/checkbox.css +0 -45
- package/src/select.css +0 -16
package/package.json
CHANGED
package/src/button.css
CHANGED
|
@@ -4,56 +4,61 @@
|
|
|
4
4
|
border: 2px solid var(--primaryColor);
|
|
5
5
|
color: #ffffff;
|
|
6
6
|
display: flex;
|
|
7
|
-
font-weight:
|
|
8
|
-
font-family: '
|
|
9
|
-
|
|
7
|
+
font-weight: 400;
|
|
8
|
+
font-family: 'Open sans';
|
|
9
|
+
font-size: 1rem;
|
|
10
10
|
outline: 2px solid var(--primaryColor);
|
|
11
|
-
padding:
|
|
11
|
+
padding: .65rem 1.5rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.md-button--small {
|
|
15
|
+
padding: .4rem .8rem;
|
|
16
|
+
border-radius: .43rem;
|
|
12
17
|
}
|
|
13
18
|
|
|
14
19
|
.md-button__leftIcon {
|
|
15
|
-
height:
|
|
16
|
-
width:
|
|
20
|
+
height: 16px;
|
|
21
|
+
width: 16px;
|
|
17
22
|
position: relative;
|
|
18
23
|
right: 8px;
|
|
19
|
-
top:
|
|
24
|
+
top: 0;
|
|
20
25
|
}
|
|
21
26
|
|
|
22
27
|
.md-button__rightIcon {
|
|
23
|
-
height:
|
|
24
|
-
width:
|
|
28
|
+
height: 16px;
|
|
29
|
+
width: 16px;
|
|
25
30
|
position: relative;
|
|
26
31
|
left: 8px;
|
|
27
|
-
top:
|
|
32
|
+
top: 0;
|
|
28
33
|
}
|
|
29
34
|
|
|
30
35
|
.md-button:focus {
|
|
31
|
-
background-color: var(--
|
|
32
|
-
border-color: var(--
|
|
33
|
-
outline: 2px solid var(--
|
|
36
|
+
background-color: var(--primaryColor80);
|
|
37
|
+
border-color: var(--primaryColor80);
|
|
38
|
+
outline: 2px solid var(--primaryColor80);
|
|
34
39
|
outline-offset: 2px;
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
.md-button:hover {
|
|
38
43
|
cursor: pointer;
|
|
39
|
-
background-color:
|
|
40
|
-
border-color:
|
|
41
|
-
outline: 2px solid
|
|
44
|
+
background-color: var(--primaryColor120);
|
|
45
|
+
border-color: var(--primaryColor120);
|
|
46
|
+
outline: 2px solid var(--primaryColor120);
|
|
42
47
|
}
|
|
43
48
|
|
|
44
49
|
.md-button[disabled],
|
|
45
50
|
.md-button:disabled {
|
|
46
|
-
background-color:
|
|
47
|
-
border: 2px solid
|
|
48
|
-
color:
|
|
51
|
+
background-color: var(--greyColor20);
|
|
52
|
+
border: 2px solid var(--greyColor20);
|
|
53
|
+
color: var(--greyColor60);
|
|
49
54
|
cursor: not-allowed;
|
|
50
|
-
outline: 2px solid
|
|
55
|
+
outline: 2px solid var(--greyColor20);
|
|
51
56
|
}
|
|
52
57
|
|
|
53
58
|
.md-button--secondary {
|
|
54
59
|
background-color: #ffffff;
|
|
55
|
-
border: 2px solid var(--
|
|
56
|
-
color: var(--
|
|
60
|
+
border: 2px solid var(--primaryColor20);
|
|
61
|
+
color: var(--primaryColor);
|
|
57
62
|
}
|
|
58
63
|
|
|
59
64
|
.md-button--secondary:hover:enabled {
|
|
@@ -61,34 +66,36 @@
|
|
|
61
66
|
}
|
|
62
67
|
|
|
63
68
|
.md-button--secondary:focus:enabled {
|
|
64
|
-
|
|
65
|
-
|
|
69
|
+
/* background-color: #ccdfde; */
|
|
70
|
+
background-color: #ffffff;
|
|
71
|
+
outline: 2px solid var(--primaryColor80);
|
|
72
|
+
border-color: var(--primaryColor80);
|
|
66
73
|
}
|
|
67
74
|
|
|
68
75
|
.md-button--secondary:disabled {
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
background-color: #fff;
|
|
77
|
+
border: 2px solid var(--greyColor20);
|
|
78
|
+
color: var(--greyColor20);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.md-button--secondary > .md-button__rightIcon {
|
|
82
|
+
color: var(--primaryColor);
|
|
71
83
|
}
|
|
72
84
|
|
|
73
85
|
.md-button--danger {
|
|
74
|
-
border: 2px solid
|
|
75
|
-
background-color:
|
|
76
|
-
outline: 2px solid
|
|
86
|
+
border: 2px solid var(--errorColor);
|
|
87
|
+
background-color: var(--errorColor);
|
|
88
|
+
outline: 2px solid var(--errorColor);
|
|
77
89
|
}
|
|
78
90
|
|
|
79
91
|
.md-button--danger:focus:enabled {
|
|
80
|
-
background-color:
|
|
81
|
-
border-color:
|
|
82
|
-
outline: 2px solid
|
|
92
|
+
background-color: var(--errorColor);
|
|
93
|
+
border-color: var(--errorColor);
|
|
94
|
+
outline: 2px solid var(--errorColor);
|
|
83
95
|
}
|
|
84
96
|
|
|
85
97
|
.md-button--danger:hover:enabled {
|
|
86
|
-
background-color:
|
|
87
|
-
border-color:
|
|
88
|
-
outline: 2px solid
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.md-button--danger:disabled {
|
|
92
|
-
border: 2px solid #808080;
|
|
93
|
-
color: #808080;
|
|
98
|
+
background-color: var(--errorColor120);
|
|
99
|
+
border-color: var(--errorColor120);
|
|
100
|
+
outline: 2px solid var(--errorColor120);
|
|
94
101
|
}
|
package/src/chips.css
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
.md-chip {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
background-color: #fff;
|
|
5
|
+
border: 1px solid var(--primaryColor);
|
|
6
|
+
border-radius: 10em;
|
|
7
|
+
color: var(--primaryColor);
|
|
8
|
+
font-weight: 400;
|
|
9
|
+
font-family: 'Open sans';
|
|
10
|
+
font-size: 1rem;
|
|
11
|
+
line-height: 22px;
|
|
12
|
+
padding: .5rem 1rem;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.md-chip:not(.md-chip--disabled):hover {
|
|
17
|
+
background-color: var(--primaryColor20);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.md-chip:not(.md-chip--disabled):focus {
|
|
21
|
+
outline: 2px solid var(--primaryColor);
|
|
22
|
+
outline-offset: -2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.md-chip--disabled {
|
|
26
|
+
background-color: var(--greyColor20);
|
|
27
|
+
color: var(--greyColor60);
|
|
28
|
+
border: 1px solid var(--greyColor60);
|
|
29
|
+
cursor: default;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.md-chip--disabled:focus {
|
|
33
|
+
outline: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.md-chip:not(.md-chip--disabled).md-chip--active {
|
|
37
|
+
background-color: var(--primaryColor);
|
|
38
|
+
color: #fff;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.md-chip:not(.md-chip--disabled).md-chip--active:focus {
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.md-chip__left-icon {
|
|
46
|
+
display: flex;
|
|
47
|
+
width: 16px;
|
|
48
|
+
height: 16px;
|
|
49
|
+
margin-right: .66em;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.md-chip__label {
|
|
53
|
+
display: flex;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.md-chip__right-icon {
|
|
57
|
+
display: flex;
|
|
58
|
+
width: 12px;
|
|
59
|
+
height: 12px;
|
|
60
|
+
margin-left: .8em;
|
|
61
|
+
}
|
package/src/colors.css
CHANGED
|
@@ -1,8 +1,28 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--primaryColor: #
|
|
3
|
-
--
|
|
2
|
+
--primaryColor: #005e5d;
|
|
3
|
+
--primaryColor120: #005251;
|
|
4
|
+
--primaryColor80: #337E7D;
|
|
5
|
+
--primaryColor20: #CCDFDE;
|
|
6
|
+
--primaryColor10: #E5EEEE;
|
|
7
|
+
|
|
4
8
|
--lightPrimaryColor: #40c1ac;
|
|
9
|
+
--darkPrimaryColor: #005251;
|
|
10
|
+
|
|
11
|
+
--secondaryColor: #ECE7D2;
|
|
12
|
+
--secondaryVariantColor: #F3F0E4;
|
|
13
|
+
|
|
14
|
+
--textColor: #222222;
|
|
5
15
|
|
|
6
16
|
--outlineColor: #00615c;
|
|
7
17
|
--outlineColor2: #009b96;
|
|
18
|
+
|
|
19
|
+
--errorColor: #ca0000;
|
|
20
|
+
--errorColor120: #B7090D;
|
|
21
|
+
|
|
22
|
+
--greyColor: #222222;
|
|
23
|
+
--greyColor10: #E8E8E8;
|
|
24
|
+
--greyColor20: #D2D2D2;
|
|
25
|
+
--greyColor40: #A6A6A6;
|
|
26
|
+
--greyColor60: #808080;
|
|
27
|
+
--greyColor80: #4E4E4E;
|
|
8
28
|
}
|
package/src/filelist.css
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
.md-filelist {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: .5em;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.md-filelist__file {
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: space-between;
|
|
10
|
+
border: 1px solid var(--primaryColor);
|
|
11
|
+
padding: .8em 1.1em;
|
|
12
|
+
font-family: 'Open sans';
|
|
13
|
+
background-color: #fff;
|
|
14
|
+
transition: background .2s linear;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.md-filelist__file:hover {
|
|
18
|
+
background-color: var(--primaryColor20);
|
|
19
|
+
transition: background .2s linear;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.md-filelist__file-label {
|
|
23
|
+
display: flex;
|
|
24
|
+
gap: 1.5em;
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.md-filelist__file-icon {
|
|
29
|
+
height: 24px;
|
|
30
|
+
width: 19px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.md-filelist__file-size {
|
|
34
|
+
font-size: 14px;
|
|
35
|
+
margin-top: .3em;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* File actions */
|
|
39
|
+
.md-filelist__file-actions {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
gap: 1em;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.md-filelist__file-actions-button {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
width: 40px;
|
|
50
|
+
height: 40px;
|
|
51
|
+
background-color: transparent;
|
|
52
|
+
border-radius: 100px;
|
|
53
|
+
border: 0;
|
|
54
|
+
padding: .2em;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
transition: background .1s linear;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.md-filelist__file-actions-button:hover {
|
|
60
|
+
background-color: #fff;
|
|
61
|
+
transition: background .1s linear;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.md-filelist__file-delete-icon {
|
|
65
|
+
height: 18px;
|
|
66
|
+
width: 15px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.md-filelist__file-download-icon {
|
|
70
|
+
height: 20px;
|
|
71
|
+
width: 20px;
|
|
72
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
.md-checkbox {
|
|
2
|
+
cursor: pointer;
|
|
3
|
+
font-family: 'Open sans';
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.md-checkbox__input {
|
|
8
|
+
opacity: 0;
|
|
9
|
+
position: absolute;
|
|
10
|
+
left: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.md-checkbox__label {
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
position: relative;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.md-checkbox__label::before {
|
|
20
|
+
background-color: #ffffff;
|
|
21
|
+
border: 1px solid var(--greyColor60);
|
|
22
|
+
content: '';
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
height: 20px;
|
|
25
|
+
width: 20px;
|
|
26
|
+
min-width: 20px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.md-checkbox:focus-within .md-checkbox__label::before,
|
|
30
|
+
.md-checkbox:hover .md-checkbox__label::before {
|
|
31
|
+
background-color: var(--primaryColor20);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.md-checkbox:focus-within .md-checkbox__label {
|
|
35
|
+
outline: 2px solid var(--primaryColor);
|
|
36
|
+
outline-offset: 2px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.md-checkbox__input:checked + .md-checkbox__label::before {
|
|
40
|
+
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iZTk2NWRkN2EtN2NlNS00MTc0LThjMjEtY2UwNjIzYmFmNTJhIiBkYXRhLW5hbWU9ImNoZWNrbWFyay1ncmVlbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTMgMTAuMDIiPjx0aXRsZT5jaGVja21hcmstZ3JlZW48L3RpdGxlPjxwYXRoIGQ9Ik0xMS4xNCwwLDQuODMsNi4zMWwtMy0zTDAsNS4xOSw0LjgzLDEwLDEzLDEuODZaIiBmaWxsPSIjMDA2MTVjIiAvPjwvc3ZnPg==);
|
|
41
|
+
background-repeat: no-repeat;
|
|
42
|
+
background-position-y: 2px;
|
|
43
|
+
background-position-x: 1px;
|
|
44
|
+
background-size: 18px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.md-checkbox--disabled .md-checkbox__input:checked + .md-checkbox__label::before {
|
|
48
|
+
filter: grayscale(100%);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.md-checkbox--disabled .md-checkbox__label::before,
|
|
52
|
+
.md-checkbox--disabled:focus-within .md-checkbox__label::before,
|
|
53
|
+
.md-checkbox--disabled:hover .md-checkbox__label::before {
|
|
54
|
+
background-color: var(--greyColor20);
|
|
55
|
+
border-color: var(--greyColor80);
|
|
56
|
+
cursor: default;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.md-checkbox--disabled .md-checkbox__labelText,
|
|
60
|
+
.md-checkbox--disabled .md-checkbox__label {
|
|
61
|
+
cursor: default;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.md-checkbox__labelText {
|
|
65
|
+
font-size: 1rem;
|
|
66
|
+
left: 8px;
|
|
67
|
+
position: relative;
|
|
68
|
+
padding-right: 8px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.md-checkbox:not(.md-checkbox--disabled):hover .md-checkbox__labelText {
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
.md-fileupload {
|
|
2
|
+
background-color: #fff;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.md-fileupload__droparea {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
align-items: center;
|
|
9
|
+
padding: 2em;
|
|
10
|
+
border: 1px dashed var(--greyColor80);
|
|
11
|
+
margin-bottom: 4em;
|
|
12
|
+
background-color: #fff;
|
|
13
|
+
transition: background .2s linear;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.md-fileupload__droparea.md-fileupload__droparea--active {
|
|
17
|
+
background-color: var(--greyColor20);
|
|
18
|
+
transition: background .2s linear;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.md-fileupload__droparea.md-fileupload__droparea--active * {
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.md-fileupload__droparea-icon {
|
|
26
|
+
width: 32px;
|
|
27
|
+
height: 32px;
|
|
28
|
+
color: #000;
|
|
29
|
+
margin-bottom: 1.5em;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.md-fileupload__droparea-content {
|
|
33
|
+
font-family: 'Open sans';
|
|
34
|
+
font-size: 16px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.md-fileupload__droparea-content button {
|
|
38
|
+
background: none;
|
|
39
|
+
border: 0;
|
|
40
|
+
font-size: 16px;
|
|
41
|
+
color: var(--primaryColor);
|
|
42
|
+
text-decoration: underline;
|
|
43
|
+
padding: 0;
|
|
44
|
+
margin: 0;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.md-fileupload__input {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.md-fileupload__files-wrapper {
|
|
53
|
+
width: 100%;
|
|
54
|
+
margin: 1.5em 0 0 0;
|
|
55
|
+
padding: 1.5em 0 0 0;
|
|
56
|
+
border-top: 1px solid #000;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.md-fileupload__actions {
|
|
60
|
+
display: flex;
|
|
61
|
+
justify-content: flex-end;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.md-fileupload__actions > * + * {
|
|
65
|
+
margin-left: 1em;
|
|
66
|
+
}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
.md-input__outer-wrapper {
|
|
2
|
+
font-family: 'Open sans';
|
|
3
|
+
font-size: 16px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.md-input {
|
|
7
|
+
padding: 1em 2em 1em 1em;
|
|
8
|
+
max-width: 100%;
|
|
9
|
+
width: 100%;
|
|
10
|
+
background-color: #fff;
|
|
11
|
+
border-radius: 0;
|
|
12
|
+
border: 1px solid var(--greyColor60);
|
|
13
|
+
margin: 1px;
|
|
14
|
+
color: var(--greyColor);
|
|
15
|
+
font-size: 16px;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.md-input--small {
|
|
20
|
+
padding: .5em 2em .5em 1em;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.md-input:not(.md-input.md-input--readonly):not(.md-input.md-input--disabled):active,
|
|
24
|
+
.md-input:not(.md-input.md-input--readonly):not(.md-input.md-input--disabled):focus {
|
|
25
|
+
margin: 0;
|
|
26
|
+
border: 2px solid var(--primaryColor80);
|
|
27
|
+
outline: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.md-input.md-input--disabled:focus,
|
|
31
|
+
.md-input.md-input--readonly:focus {
|
|
32
|
+
outline: 0;
|
|
33
|
+
cursor: default;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.md-input.md-input--disabled {
|
|
37
|
+
background-color: var(--greyColor20);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.md-input.md-input--readonly:not(.md-input.md-input--disabled) {
|
|
41
|
+
border-left-color: #fff;
|
|
42
|
+
border-right-color: #fff;
|
|
43
|
+
border-top-color: #fff;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.md-input.md-input--error {
|
|
47
|
+
border-color: var(--errorColor);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.md-input.md-input--has-suffix {
|
|
51
|
+
padding-right: 5em;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.md-input--small.md-input--has-suffix {
|
|
55
|
+
padding-right: 3.5em;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.md-input.md-input--has-prefix {
|
|
59
|
+
padding-left: 2.5em;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.md-input--small.md-input--has-prefix {
|
|
63
|
+
padding-left: 1.8em;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.md-input__wrapper {
|
|
67
|
+
position: relative;
|
|
68
|
+
margin: .7em 0 .3em 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.md-input__wrapper.md-input__wrapper--small {
|
|
72
|
+
max-width: 336px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.md-input__label {
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: flex-end;
|
|
78
|
+
font-weight: 600;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.md-input__label > * + * {
|
|
82
|
+
margin-left: 1em;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.md-input__help-button {
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-grow: 1;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.md-input__error {
|
|
91
|
+
color: var(--errorColor);
|
|
92
|
+
font-size: .88em;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.md-input__help-text {
|
|
96
|
+
max-height: 0;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
transition: max-height 0.15s ease-out;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.md-input__help-text--open {
|
|
102
|
+
padding-top: .5em;
|
|
103
|
+
max-height: 2000px;
|
|
104
|
+
transition: max-height 0.5s ease-in;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.md-input__prefix {
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: 1.1em;
|
|
110
|
+
left: 1em;
|
|
111
|
+
height: 16px;
|
|
112
|
+
width: 16px;
|
|
113
|
+
display: flex;
|
|
114
|
+
color: var(--primaryColor);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.md-input__prefix.md-input__prefix--disabled {
|
|
118
|
+
color: var(--greyColor60);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.md-input__wrapper.md-input__wrapper--small .md-input__prefix {
|
|
122
|
+
top: .65em;
|
|
123
|
+
left: .5em;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.md-input__suffix {
|
|
127
|
+
position: absolute;
|
|
128
|
+
top: 1.05em;
|
|
129
|
+
right: .9em;
|
|
130
|
+
display: flex;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.md-input__suffix-content {
|
|
134
|
+
color: var(--greyColor60);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.md-input__suffix > * + * {
|
|
138
|
+
margin-left: .5em;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.md-input__error-icon {
|
|
142
|
+
width: 20px;
|
|
143
|
+
height: 20px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.md-input__wrapper.md-input__wrapper--small .md-input__suffix {
|
|
147
|
+
top: .55em;
|
|
148
|
+
right: .7em;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.md-input__wrapper.md-input__wrapper--small .md-input__suffix > * + * {
|
|
152
|
+
margin-left: .3em;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Placeholder "hacks" */
|
|
156
|
+
.md-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
|
157
|
+
color: var(--greyColor40);
|
|
158
|
+
font-family: 'Open sans';
|
|
159
|
+
}
|
|
160
|
+
.md-input::-moz-placeholder { /* Firefox 19+ */
|
|
161
|
+
color: var(--greyColor40);
|
|
162
|
+
font-family: 'Open sans';
|
|
163
|
+
}
|
|
164
|
+
.md-input:-ms-input-placeholder { /* IE 10+ */
|
|
165
|
+
color: var(--greyColor40);
|
|
166
|
+
font-family: 'Open sans';
|
|
167
|
+
}
|
|
168
|
+
.md-input:-moz-placeholder { /* Firefox 18- */
|
|
169
|
+
color: var(--greyColor40);
|
|
170
|
+
font-family: 'Open sans';
|
|
171
|
+
}
|