@miljodirektoratet/md-css 3.0.2 → 3.2.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/colors.css +1 -0
  3. package/src/tile/tile.css +39 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "3.0.2",
3
+ "version": "3.2.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/tile.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* HORIZONTAL TILES */
2
2
  .md-tile {
3
- padding: 26px;
3
+ padding: 24px;
4
4
  border: 1px solid var(--mdGreyColor60);
5
5
  background-color: var(--mdPrimaryColor10);
6
6
  color: var(--mdGreyColor);
@@ -9,14 +9,22 @@
9
9
  justify-content: space-between;
10
10
  text-decoration: none;
11
11
  font-family: 'Open sans';
12
- width: 440px;
13
- max-width: 100%;
12
+ box-sizing: border-box;
13
+ gap: 1.5em;
14
+ text-align: start;
15
+ width: 100%;
16
+ max-width: 440px;
17
+ min-width: 340px;
14
18
  transition: all 0.15s ease-in-out;
15
19
  }
16
20
 
21
+ .md-tile--secondary {
22
+ background-color: var(--mdSecondaryColor40);
23
+ }
24
+
17
25
  .md-tile:not(.md-tile--disabled):hover {
18
26
  border: 1px solid var(--mdPrimaryColor);
19
- background-color: var(--mdPrimaryColor20);
27
+ background-color: var(--mdPrimaryColor30);
20
28
  transition: all 0.15s ease-in-out;
21
29
  cursor: pointer;
22
30
  }
@@ -24,7 +32,15 @@
24
32
  .md-tile:not(.md-tile--disabled):focus {
25
33
  outline: 2px solid var(--mdPrimaryColor);
26
34
  outline-offset: -2px;
27
- background-color: var(--mdPrimaryColor20);
35
+ background-color: var(--mdPrimaryColor30);
36
+ }
37
+
38
+ .md-tile--secondary:not(.md-tile--disabled):hover {
39
+ background-color: var(--mdSecondaryColor80);
40
+ }
41
+
42
+ .md-tile--secondary:not(.md-tile--disabled):focus {
43
+ background-color: var(--mdSecondaryColor80);
28
44
  }
29
45
 
30
46
  .md-tile--disabled {
@@ -74,7 +90,9 @@
74
90
  .md-tile-vertical {
75
91
  display: flex;
76
92
  width: 190px;
93
+ box-sizing: border-box;
77
94
  flex-direction: row;
95
+ text-align: center;
78
96
  align-items: center;
79
97
  justify-content: center;
80
98
  border: 1px solid var(--mdGreyColor60);
@@ -85,6 +103,10 @@
85
103
  transition: all 0.15s ease-in-out;
86
104
  }
87
105
 
106
+ .md-tile-vertical--secondary {
107
+ background-color: var(--mdSecondaryColor40);
108
+ }
109
+
88
110
  .md-tile-vertical--small {
89
111
  width: 178px;
90
112
  }
@@ -103,7 +125,7 @@
103
125
 
104
126
  .md-tile-vertical:hover {
105
127
  border: 1px solid var(--mdPrimaryColor);
106
- background-color: var(--mdPrimaryColor20);
128
+ background-color: var(--mdPrimaryColor30);
107
129
  cursor: pointer;
108
130
  transition: all 0.15s ease-in-out;
109
131
  }
@@ -111,7 +133,15 @@
111
133
  .md-tile-vertical:focus {
112
134
  outline: 2px solid var(--mdPrimaryColor);
113
135
  outline-offset: -2px;
114
- background-color: var(--mdPrimaryColor20);
136
+ background-color: var(--mdPrimaryColor30);
137
+ }
138
+
139
+ .md-tile-vertical--secondary:hover {
140
+ background-color: var(--mdSecondaryColor80);
141
+ }
142
+
143
+ .md-tile-vertical--secondary:focus {
144
+ background-color: var(--mdSecondaryColor80);
115
145
  }
116
146
 
117
147
  .md-tile-vertical__content {
@@ -123,11 +153,11 @@
123
153
  }
124
154
 
125
155
  .md-tile-vertical--small .md-tile-vertical__content {
126
- padding: 26px;
156
+ padding: 24px;
127
157
  }
128
158
 
129
159
  .md-tile-vertical--large .md-tile-vertical__content {
130
- padding: 40px;
160
+ padding: 48px;
131
161
  }
132
162
 
133
163
  .md-tile-vertical__content-text {