@miljodirektoratet/md-css 0.0.17 → 0.0.19
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/colors.css +2 -0
- package/src/index.css +4 -1
- package/src/infoTag/README.md +18 -0
- package/src/infoTag/infoTag.css +41 -0
- package/src/loadingSpinner/loadingSpinner.css +3 -0
- package/src/messages/README.md +38 -0
- package/src/messages/alertMessage.css +53 -0
- package/src/tabs/REAMDE.md +26 -0
- package/src/tabs/tabs.css +52 -0
- package/src/tile/tile.css +4 -0
- package/src/utils.css +9 -0
- package/src/shortcut.css +0 -30
package/package.json
CHANGED
package/src/colors.css
CHANGED
package/src/index.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
@import './colors.css';
|
|
2
2
|
@import './button/button.css';
|
|
3
|
-
@import './shortcut.css';
|
|
4
3
|
@import './link/link.css';
|
|
5
4
|
@import './data-grid.css';
|
|
6
5
|
@import './help/help.css';
|
|
@@ -10,6 +9,10 @@
|
|
|
10
9
|
@import './accordionitem/accordionitem.css';
|
|
11
10
|
@import './modal/modal.css';
|
|
12
11
|
@import './tile/tile.css';
|
|
12
|
+
@import './tabs/tabs.css';
|
|
13
|
+
@import './loadingSpinner/loadingSpinner.css';
|
|
14
|
+
@import './infoTag/infoTag.css';
|
|
15
|
+
@import './messages/alertMessage.css';
|
|
13
16
|
@import './formElements/input/input.css';
|
|
14
17
|
@import './formElements/checkbox/checkbox.css';
|
|
15
18
|
@import './formElements/checkboxgroup/checkboxgroup.css';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# InfoTags
|
|
2
|
+
|
|
3
|
+
To use the `InfoTags` 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
|
|
11
|
+
className="md-info-tag [md-info-tag--secondary, md-info-tag--warning, md-info-tag--danger]"
|
|
12
|
+
>
|
|
13
|
+
<div className="md-info-tag__label">{label}</div>
|
|
14
|
+
<div className="md-info-tag__icon">
|
|
15
|
+
{icon}
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
```
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
.md-info-tag {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
justify-content: flex-start;
|
|
4
|
+
z-index: 2;
|
|
5
|
+
background-color: var(--mdPrimaryColor20);
|
|
6
|
+
color: var(--mdGreyColor);
|
|
7
|
+
align-items: center;
|
|
8
|
+
padding: 4px 12px 4px 12px;
|
|
9
|
+
border-radius: 4px;
|
|
10
|
+
font-family: 'Open Sans';
|
|
11
|
+
font-size: .88em;
|
|
12
|
+
font-weight: 400;
|
|
13
|
+
line-height: 18px;
|
|
14
|
+
letter-spacing: 0em;
|
|
15
|
+
text-align: left;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
text-overflow: ellipsis;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.md-info-tag--secondary {
|
|
22
|
+
background-color: var(--mdSecondaryColor40);
|
|
23
|
+
}
|
|
24
|
+
.md-info-tag--warning {
|
|
25
|
+
background-color: var(--mdWarningBackgoundColor);
|
|
26
|
+
}
|
|
27
|
+
.md-info-tag--danger {
|
|
28
|
+
background-color: var(--mdErrorColor);
|
|
29
|
+
color: #fff;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.md-info-tag__label {
|
|
33
|
+
display: flex;
|
|
34
|
+
align-self: flex-start;
|
|
35
|
+
margin-right: 12px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.md-info-tag__icon {
|
|
39
|
+
height: 20px;
|
|
40
|
+
width: 20px;
|
|
41
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# Info box
|
|
2
|
+
|
|
3
|
+
To use the `InfoBox` 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-info-box">
|
|
11
|
+
{Icon width="20" height="20"}
|
|
12
|
+
{label}
|
|
13
|
+
</div>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
# Alert message
|
|
17
|
+
|
|
18
|
+
To use the `AlertMessage` css as a standalone, without the accompanying React component, please use the following HTML structure.
|
|
19
|
+
|
|
20
|
+
Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
|
|
21
|
+
|
|
22
|
+
See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<div className="md-alert-message [md-alert-message--confirm, md-alert-message--warning, md-alert-message--error]">
|
|
26
|
+
<div className="md-alert-message__content">
|
|
27
|
+
{Icon width="20" height="20"}
|
|
28
|
+
{label}
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<button
|
|
32
|
+
className="md-alert-message__button"
|
|
33
|
+
onClick={handleClick}
|
|
34
|
+
>
|
|
35
|
+
{Icon width="16" height="16"}
|
|
36
|
+
</button>
|
|
37
|
+
</div>
|
|
38
|
+
```
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/* INFO BOX */
|
|
2
|
+
.md-info-box {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: 1em;
|
|
6
|
+
font-family: 'Open sans';
|
|
7
|
+
font-size: 1em;
|
|
8
|
+
padding: 1em;
|
|
9
|
+
background-color: var(--mdSecondaryColor20);
|
|
10
|
+
border: 1px dashed var(--mdPrimaryColor);
|
|
11
|
+
max-width: 634px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* ALERT MESSAGE */
|
|
15
|
+
.md-alert-message {
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: space-between;
|
|
19
|
+
font-family: 'Open sans';
|
|
20
|
+
font-size: 1em;
|
|
21
|
+
max-width: 634px;
|
|
22
|
+
background-color: var(--mdPrimaryColor10);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.md-alert-message--confirm {
|
|
26
|
+
background-color: var(--mdPrimaryColor20);
|
|
27
|
+
}
|
|
28
|
+
.md-alert-message--warning {
|
|
29
|
+
background-color: var(--mdWarningBackgoundColor);
|
|
30
|
+
}
|
|
31
|
+
.md-alert-message--error {
|
|
32
|
+
background-color: var(--mdErrorColor);
|
|
33
|
+
color: #fff;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.md-alert-message__content {
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
gap: 1em;
|
|
40
|
+
padding: 1em;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.md-alert-message__button {
|
|
44
|
+
border: 0;
|
|
45
|
+
background-color: transparent;
|
|
46
|
+
margin: 0;
|
|
47
|
+
padding: 1em;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.md-alert-message--error .md-alert-message__button {
|
|
52
|
+
color: #fff;
|
|
53
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# Tabs
|
|
2
|
+
|
|
3
|
+
To use the `Tabs` css as a standalone, without the accompanying React component, please use the following HTML structure. The styling for this component applies to the tab-buttons, content and what to show is up to you.
|
|
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 class="md-tabs-container">
|
|
11
|
+
<ul>
|
|
12
|
+
<li>
|
|
13
|
+
<button class="md-tabs-button [md-tabs-button--selected, md-tabs-button--disabled]">Tab 1</button>
|
|
14
|
+
</li>
|
|
15
|
+
<li>
|
|
16
|
+
<button class="md-tabs-button [md-tabs-button--selected, md-tabs-button--disabled]">Tab 2</button>
|
|
17
|
+
</li>
|
|
18
|
+
</ul>
|
|
19
|
+
|
|
20
|
+
<!-- This is the tab-content, and will need some logic to toggle what content to show. Handle as you see fit. -->
|
|
21
|
+
<div>
|
|
22
|
+
<div>This is the first tab</div>
|
|
23
|
+
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro maiores reprehenderit quasi itaque eveniet soluta aliquam consectetur perspiciatis assumenda laborum quam expedita, vitae, odio dignissimos obcaecati ipsa incidunt! Pariatur, blanditiis.</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
```
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
.md-tabs-container {
|
|
2
|
+
font-family: 'Open sans';
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.md-tabs-container ul {
|
|
6
|
+
list-style: none;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: row;
|
|
9
|
+
align-items: flex-start;
|
|
10
|
+
gap: 24px;
|
|
11
|
+
padding-inline-start: 0px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.md-tabs-container ul li {
|
|
15
|
+
list-style: none;
|
|
16
|
+
display: flex;
|
|
17
|
+
height: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.md-tabs-container ul li .md-tabs-button {
|
|
21
|
+
font-size: 1em;
|
|
22
|
+
font-weight: 400;
|
|
23
|
+
padding: 13px 24px 13px 24px;
|
|
24
|
+
border: 0;
|
|
25
|
+
background-color: transparent;
|
|
26
|
+
border-bottom: 1px solid var(--mdGreyColor80);
|
|
27
|
+
transition: border .1s linear, background .1s linear, margin .1s linear;
|
|
28
|
+
margin-bottom: 3px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.md-tabs-container ul li .md-tabs-button.md-tabs-button--disabled {
|
|
32
|
+
background-color: var(--mdGreyColor20);
|
|
33
|
+
color: var(--mdGreyColor80);
|
|
34
|
+
cursor: not-allowed;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.md-tabs-container ul li .md-tabs-button.md-tabs-button--selected {
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
border-bottom: 4px solid var(--mdPrimaryColor80);
|
|
40
|
+
margin-bottom: 0px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.md-tabs-container ul li .md-tabs-button:not(.md-tabs-button--disabled):hover {
|
|
44
|
+
background-color: var(--mdPrimaryColor20);
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.md-tabs-container ul li .md-tabs-button:not(.md-tabs-button--disabled):focus {
|
|
49
|
+
outline: 2px solid var(--mdPrimaryColor);
|
|
50
|
+
background-color: var(--mdPrimaryColor20);
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
}
|
package/src/tile/tile.css
CHANGED
|
@@ -40,6 +40,8 @@
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.md-tile__content-icon {
|
|
43
|
+
height: 64px;
|
|
44
|
+
width: 64px;
|
|
43
45
|
margin-right: 1em;
|
|
44
46
|
color: var(--mdPrimaryColor80);
|
|
45
47
|
}
|
|
@@ -132,6 +134,8 @@
|
|
|
132
134
|
justify-content: center;
|
|
133
135
|
margin-bottom: 1em;
|
|
134
136
|
color: var(--mdPrimaryColor80);
|
|
137
|
+
width: 128px;
|
|
138
|
+
height: 128px;
|
|
135
139
|
}
|
|
136
140
|
|
|
137
141
|
.md-tile-vertical--disabled .md-tile-vertical__content-icon {
|
package/src/utils.css
CHANGED
package/src/shortcut.css
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
.md-shortcut {
|
|
2
|
-
background-color: #ebf3f3;
|
|
3
|
-
border-radius: 2px;
|
|
4
|
-
color: #222;
|
|
5
|
-
display: flex;
|
|
6
|
-
font-family: 'Sofia Pro';
|
|
7
|
-
font-size: 22px;
|
|
8
|
-
max-width: 600px;
|
|
9
|
-
padding: 1.65rem 1.5rem 1.45rem 1.5rem;
|
|
10
|
-
position: relative;
|
|
11
|
-
text-decoration: none;
|
|
12
|
-
transition: background-color 0.3s ease;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.md-shortcut:hover {
|
|
16
|
-
background-color: #d9e4e4;
|
|
17
|
-
text-decoration: underline;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.md-shortcut:active {
|
|
21
|
-
border-bottom: 3px solid var(--mdPrimaryColor);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.icon {
|
|
25
|
-
height: 10px;
|
|
26
|
-
width: 16px;
|
|
27
|
-
position: absolute;
|
|
28
|
-
right: 30px;
|
|
29
|
-
top: 26px;
|
|
30
|
-
}
|