@miljodirektoratet/md-css 3.10.0 → 3.11.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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/accordionitem/accordionitem.css +3 -1
  3. package/src/filelist/README.md +2 -4
  4. package/src/filelist/filelist.css +0 -25
  5. package/src/messages/AlertMessage.md +3 -3
  6. package/src/messages/README.md +1 -1
  7. package/src/messages/alertMessage.css +4 -5
  8. package/src/modal/README.md +3 -3
  9. package/src/modal/modal.css +1 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "3.10.0",
3
+ "version": "3.11.0",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
package/src/accordionitem/accordionitem.css CHANGED
@@ -77,6 +77,7 @@
77
77
  background-color: var(--mdGreyColor);
78
78
  transition: transform 0.15s ease-out;
79
79
  }
80
+
80
81
  /* Vertical line */
81
82
  .md-accordion-item__header .md-accordion-item__header-icon:before {
82
83
  top: 0;
@@ -85,7 +86,8 @@
85
86
  height: 100%;
86
87
  margin-left: -1px;
87
88
  }
88
- /* horizontal line */
89
+
90
+ /* Horizontal line */
89
91
  .md-accordion-item__header .md-accordion-item__header-icon:after {
90
92
  top: 50%;
91
93
  left: 0;
package/src/filelist/README.md CHANGED
@@ -18,10 +18,8 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
18
18
  </div>
19
19
 
20
20
  <div class="md-filelist__file-actions">
21
- <button class="md-filelist__file-actions-button">{downloadIcon}</button>
22
-
23
- <button class="md-filelist__file-actions-button">{deleteIcon}</button>
24
- }
21
+ <MdIconButton className="md-icon-button md-icon-button--plain">{downloadIcon}</MdIconButton>
22
+ <MdIconButton className="md-icon-button md-icon-button--plain">{deleteIcon}</MdIconButton>
25
23
  </div>
26
24
  </div>
27
25
 
package/src/filelist/filelist.css CHANGED
@@ -34,33 +34,8 @@
34
34
  margin-top: 0.3rem;
35
35
  }
36
36
 
37
- /* File actions */
38
37
  .md-filelist__file-actions {
39
38
  display: flex;
40
39
  align-items: center;
41
40
  gap: 1rem;
42
41
  }
43
-
44
- .md-filelist__file-actions-button {
45
- display: flex;
46
- align-items: center;
47
- justify-content: center;
48
- width: 2.5rem;
49
- height: 2.5rem;
50
- background-color: transparent;
51
- border-radius: 6.25rem;
52
- border: 0;
53
- padding: 0.2rem;
54
- cursor: pointer;
55
- transition: background 0.1s linear;
56
- }
57
-
58
- .md-filelist__file-actions-button:hover {
59
- background-color: #fff;
60
- transition: background 0.1s linear;
61
- }
62
-
63
- .md-filelist__file-action-icon {
64
- width: 1.25rem;
65
- height: 1.25rem;
66
- }
package/src/messages/AlertMessage.md CHANGED
@@ -15,8 +15,8 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
15
15
  {label}
16
16
  </div>
17
17
 
18
- <button className="md-alert-message__button" onClick="{handleClick}">
19
- <Icon width="16" height="16" />
20
- </button>
18
+ <MdIconButton className="md-alert-message__button md-icon-button md-icon-button--plain" onClick="{handleClick}">
19
+ {icon}
20
+ </MdIconButton>
21
21
  </div>
22
22
  ```
package/src/messages/README.md CHANGED
@@ -22,6 +22,6 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
22
22
  >
23
23
  <div className="md-alert-message__content">{Icon width="20" height="20"} {label}</div>
24
24
 
25
- <button className="md-alert-message__button" onClick="{handleClick}">{Icon width="16" height="16"}</button>
25
+ <MdIconButton className="md-alert-message__button md-icon-button md-icon-button--plain" onClick="{handleClick}">{icon}</MdIconButton>
26
26
  </div>
27
27
  ```
package/src/messages/alertMessage.css CHANGED
@@ -58,13 +58,12 @@
58
58
  }
59
59
 
60
60
  .md-alert-message__button {
61
- border: 0;
62
- background-color: transparent;
63
- margin: 0;
64
- padding: 1rem;
65
- cursor: pointer;
61
+ margin-right: 0.75rem;
66
62
  }
67
63
 
64
+ .md-alert-message--error .md-alert-message__button:hover {
65
+ outline-color: #fff;
66
+ }
68
67
  .md-alert-message--error .md-alert-message__button {
69
68
  color: #fff;
70
69
  }
package/src/modal/README.md CHANGED
@@ -18,10 +18,10 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
18
18
  <MdClickOutsideWrapper class="md-modal__inner-wrapper">
19
19
  <div class="md-modal__header">
20
20
  <div>{heading}</div>
21
- <button class="md-modal__close-button">
22
- <MdXIcon class="md-modal__close-button-icon" />
21
+ <MdIconButton class="md-modal__close-button md-icon-button md-icon-button--plain">
22
+ <MdXIcon className="md-icon-button__icon"/>
23
23
  <!-- Icon for close-button, use the react icon from Miljødir, or you own -->
24
- </button>
24
+ </MdIconButton>
25
25
  </div>
26
26
  <div class="md-modal__content-inner">MODAL CONTENT GOES HERE</div>
27
27
  </MdClickOutsideWrapper>
package/src/modal/modal.css CHANGED
@@ -59,17 +59,7 @@
59
59
  }
60
60
 
61
61
  .md-modal__close-button {
62
- padding-right: 2rem;
63
- padding-left: 2rem;
64
- background: transparent;
65
- border: 0;
66
- border-radius: 0;
67
- cursor: pointer;
68
- }
69
-
70
- .md-modal__close-button-icon {
71
- width: 1.125rem;
72
- height: 1.125rem;
62
+ margin-right: 2rem;
73
63
  }
74
64
 
75
65
  .md-modal__content-inner {