@miljodirektoratet/md-css 6.4.2 → 6.5.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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/descriptionList/README.md +20 -0
  3. package/src/descriptionList/descriptionList.css +69 -0
  4. package/src/index.css +24 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "6.4.2",
3
+ "version": "6.5.0",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
package/src/descriptionList/README.md ADDED
@@ -0,0 +1,20 @@
1
+ # Structure
2
+
3
+ To use the `DescriptionList` 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
+ <dl class="md-description-list [md-description-list--narrow]">
11
+ <div class="md-description-list-item">
12
+ <dt class="md-description-list-item-label">Label 1</dt>
13
+ <dd class="md-description-list-item-description">Value 1</dd>
14
+ </div>
15
+ <div class="md-description-list-item">
16
+ <dt class="md-description-list-item-label">Label 2</dt>
17
+ <dd class="md-description-list-item-description">Value 2</dd>
18
+ </div>
19
+ </dl>
20
+ ```
package/src/descriptionList/descriptionList.css ADDED
@@ -0,0 +1,69 @@
1
+ .md-description-list {
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: var(--md-size-full);
5
+ }
6
+
7
+ .md-description-list--narrow {
8
+ max-width: 360px;
9
+ }
10
+
11
+ .md-description-list-item {
12
+ display: flex;
13
+ flex-direction: row;
14
+ justify-content: space-between;
15
+ gap: var(--md-size-12);
16
+ padding: var(--md-size-16);
17
+ background-color: var(--md-color-surface-primary);
18
+ border-bottom: 1px solid var(--md-color-border-primary);
19
+ }
20
+
21
+ .md-description-list--narrow .md-description-list-item {
22
+ flex-direction: column;
23
+ padding: var(--md-size-12);
24
+ }
25
+
26
+ @media (max-width: 640px) {
27
+ .md-description-list--narrow {
28
+ max-width: 100%;
29
+ }
30
+ .md-description-list-item {
31
+ flex-direction: column;
32
+ }
33
+ }
34
+
35
+ .md-description-list-item-label {
36
+ display: flex;
37
+ align-items: center;
38
+ font-family: var(--md-typography-family-label);
39
+ font-size: var(--md-typography-size-16);
40
+ font-weight: bold;
41
+ line-height: var(--md-typography-line-height-small);
42
+ }
43
+
44
+ .md-description-list-item-description {
45
+ display: flex;
46
+ align-items: center;
47
+ font-family: var(--md-typography-family-body);
48
+ font-size: var(--md-typography-size-16);
49
+ font-weight: var(--md-typography-weight-regular);
50
+ color: var(--md-color-text-primary);
51
+ margin: 0;
52
+ }
53
+ .md-description-list-item-description a:hover {
54
+ color: var(--md-color-cta-primary-hover);
55
+ text-decoration-thickness: 0.0938rem;
56
+ text-decoration-color: var(--md-color-cta-primary-hover);
57
+ }
58
+
59
+ .md-description-list-item-description a:focus-visible {
60
+ outline: var(--md-size-1) solid var(--md-color-border-tertiary);
61
+ }
62
+
63
+ .md-description-list-item-description a:active {
64
+ background-color: var(--md-color-surface-secondary);
65
+ }
66
+
67
+ .md-description-list-item-description a:visited {
68
+ color: var(--md-color-cta-primary-visited);
69
+ }
package/src/index.css CHANGED
@@ -1,36 +1,38 @@
1
1
  @import './colors.css';
2
2
  @import './tokens/index.css';
3
3
  @import './typography.css';
4
+ @import './utils.css';
5
+
6
+ @import './accordionitem/accordionitem.css';
4
7
  @import './button/button.css';
5
- @import './iconButton/iconButton.css';
6
- @import './link/link.css';
7
- @import './help/help.css';
8
- @import './toggle/toggle.css';
9
8
  @import './chips/chips.css';
9
+ @import './descriptionList/descriptionList.css';
10
10
  @import './filelist/filelist.css';
11
- @import './accordionitem/accordionitem.css';
11
+ @import './formElements/autocomplete/autocomplete.css';
12
+ @import './formElements/checkbox/checkbox.css';
13
+ @import './formElements/checkboxgroup/checkboxgroup.css';
14
+ @import './formElements/combobox/combobox.css';
15
+ @import './formElements/fileupload/fileupload.css';
16
+ @import './formElements/input/input.css';
17
+ @import './formElements/multiautocomplete/multiautocomplete.css';
18
+ @import './formElements/multiselect/multiselect.css';
19
+ @import './formElements/radiobutton/radiobutton.css';
20
+ @import './formElements/radiogroup/radiogroup.css';
21
+ @import './formElements/select/select.css';
22
+ @import './formElements/textarea/textarea.css';
23
+ @import './help/help.css';
24
+ @import './iconButton/iconButton.css';
25
+ @import './infoTag/infoTag.css';
26
+ @import './link/link.css';
27
+ @import './loadingSpinner/loadingSpinner.css';
28
+ @import './messages/alertMessage.css';
12
29
  @import './modal/modal.css';
13
30
  @import './skipToMainContent/skipToMainContent.css';
14
31
  @import './stepper/stepper.css';
15
- @import './tile/tile.css';
16
32
  @import './tabs/tabs.css';
17
- @import './loadingSpinner/loadingSpinner.css';
18
- @import './infoTag/infoTag.css';
33
+ @import './tile/tile.css';
34
+ @import './toggle/toggle.css';
19
35
  @import './tooltip/tooltip.css';
20
- @import './messages/alertMessage.css';
21
- @import './formElements/input/input.css';
22
- @import './formElements/checkbox/checkbox.css';
23
- @import './formElements/checkboxgroup/checkboxgroup.css';
24
- @import './formElements/textarea/textarea.css';
25
- @import './formElements/select/select.css';
26
- @import './formElements/autocomplete/autocomplete.css';
27
- @import './formElements/radiobutton/radiobutton.css';
28
- @import './formElements/radiogroup/radiogroup.css';
29
- @import './formElements/multiselect/multiselect.css';
30
- @import './formElements/multiautocomplete/multiautocomplete.css';
31
- @import './formElements/fileupload/fileupload.css';
32
- @import './formElements/combobox/combobox.css';
33
- @import './utils.css';
34
36
 
35
37
  html {
36
38
  box-sizing: border-box;