@miljodirektoratet/md-css 3.1.0 → 3.3.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/colors.css +1 -0
  3. package/src/tile/README.md +2 -2
  4. package/src/tile/tile.css +28 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "3.1.0",
3
+ "version": "3.3.0",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
package/src/colors.css CHANGED
@@ -2,6 +2,7 @@
2
2
  --mdPrimaryColor: #005e5d;
3
3
  --mdPrimaryColor120: #005251;
4
4
  --mdPrimaryColor80: #337e7d;
5
+ --mdPrimaryColor30: #b2cece;
5
6
  --mdPrimaryColor20: #ccdfde;
6
7
  --mdPrimaryColor10: #e5eeee;
7
8
 
package/src/tile/README.md CHANGED
@@ -9,7 +9,7 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
9
9
  ## Tile horizontal
10
10
 
11
11
  ```html
12
- <a className="md-tile" href="{href}" onClick="{handleClick}">
12
+ <a className="md-tile [md-tile--secondary]" href="{href}" onClick="{handleClick}">
13
13
  <div className="md-tile__content">
14
14
  <div className="md-tile__content-icon">{icon}</div>
15
15
  <div className="md-tile__content-text">
@@ -28,7 +28,7 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
28
28
 
29
29
  ```html
30
30
  <a
31
- className="md-tile-vertical [md-tile-vertical--small, md-tile-vertical--large]"
31
+ className="md-tile-vertical [md-tile-vertical--secondary, md-tile-vertical--small, md-tile-vertical--large]"
32
32
  href="{href}"
33
33
  onClick="{handleClick}"
34
34
  >
package/src/tile/tile.css CHANGED
@@ -17,9 +17,13 @@
17
17
  transition: all 0.15s ease-in-out;
18
18
  }
19
19
 
20
+ .md-tile--secondary {
21
+ background-color: var(--mdSecondaryColor40);
22
+ }
23
+
20
24
  .md-tile:not(.md-tile--disabled):hover {
21
25
  border: 1px solid var(--mdPrimaryColor);
22
- background-color: var(--mdPrimaryColor20);
26
+ background-color: var(--mdPrimaryColor30);
23
27
  transition: all 0.15s ease-in-out;
24
28
  cursor: pointer;
25
29
  }
@@ -27,7 +31,15 @@
27
31
  .md-tile:not(.md-tile--disabled):focus {
28
32
  outline: 2px solid var(--mdPrimaryColor);
29
33
  outline-offset: -2px;
30
- background-color: var(--mdPrimaryColor20);
34
+ background-color: var(--mdPrimaryColor30);
35
+ }
36
+
37
+ .md-tile--secondary:not(.md-tile--disabled):hover {
38
+ background-color: var(--mdSecondaryColor80);
39
+ }
40
+
41
+ .md-tile--secondary:not(.md-tile--disabled):focus {
42
+ background-color: var(--mdSecondaryColor80);
31
43
  }
32
44
 
33
45
  .md-tile--disabled {
@@ -90,6 +102,10 @@
90
102
  transition: all 0.15s ease-in-out;
91
103
  }
92
104
 
105
+ .md-tile-vertical--secondary {
106
+ background-color: var(--mdSecondaryColor40);
107
+ }
108
+
93
109
  .md-tile-vertical--small {
94
110
  width: 178px;
95
111
  }
@@ -108,7 +124,7 @@
108
124
 
109
125
  .md-tile-vertical:hover {
110
126
  border: 1px solid var(--mdPrimaryColor);
111
- background-color: var(--mdPrimaryColor20);
127
+ background-color: var(--mdPrimaryColor30);
112
128
  cursor: pointer;
113
129
  transition: all 0.15s ease-in-out;
114
130
  }
@@ -116,7 +132,15 @@
116
132
  .md-tile-vertical:focus {
117
133
  outline: 2px solid var(--mdPrimaryColor);
118
134
  outline-offset: -2px;
119
- background-color: var(--mdPrimaryColor20);
135
+ background-color: var(--mdPrimaryColor30);
136
+ }
137
+
138
+ .md-tile-vertical--secondary:hover {
139
+ background-color: var(--mdSecondaryColor80);
140
+ }
141
+
142
+ .md-tile-vertical--secondary:focus {
143
+ background-color: var(--mdSecondaryColor80);
120
144
  }
121
145
 
122
146
  .md-tile-vertical__content {