@miljodirektoratet/md-css 0.0.1
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/README.md +22 -0
- package/package.json +16 -0
- package/src/button.css +80 -0
- package/src/index.css +2 -0
- package/src/shortcut.css +30 -0
package/README.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
## @miljodirektoratet/md-css
|
|
2
|
+
|
|
3
|
+
To start using the stylesheets:
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
npm install @miljodirektoratet/md-css
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
Then import the CSS, for example from JavaScript:
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
import { MdButton } from '@miljodirektoratet/md-react';
|
|
13
|
+
import '@miljodirektoratet/md-css/src/index.css';
|
|
14
|
+
|
|
15
|
+
const MyComponent = () => {
|
|
16
|
+
return (
|
|
17
|
+
<MdButton>Example</MdButton>
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
_For React components, see @miljodirektoratet/md-react_
|
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@miljodirektoratet/md-css",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "CSS for Miljødirektoratet",
|
|
5
|
+
"author": "Miljødirektoratet",
|
|
6
|
+
"main": "./src/index.css",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"access": "public"
|
|
10
|
+
},
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/miljodir/md-components"
|
|
14
|
+
},
|
|
15
|
+
"files": ["src", "README.md"]
|
|
16
|
+
}
|
package/src/button.css
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
.md-button {
|
|
2
|
+
background-color: #005e5d;
|
|
3
|
+
border: 2px solid #005e5d;
|
|
4
|
+
border-radius: 0.3rem;
|
|
5
|
+
color: #ffffff;
|
|
6
|
+
font-weight: 300;
|
|
7
|
+
font-family: "Sofia Pro";
|
|
8
|
+
height: 44px;
|
|
9
|
+
outline: 2px solid #005e5d;
|
|
10
|
+
padding: 0 1.5rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.content {
|
|
14
|
+
display: flex;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.md-button:focus {
|
|
18
|
+
background-color: #337e7d;
|
|
19
|
+
border-color: #337e7d;
|
|
20
|
+
outline: 2px solid #337e7d;
|
|
21
|
+
outline-offset: 2px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.md-button:hover {
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
background-color: #005251;
|
|
27
|
+
border-color: #005251;
|
|
28
|
+
outline: 2px solid #005251;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.md-button[disabled], .md-button:disabled {
|
|
32
|
+
background-color: #d2d2d2;
|
|
33
|
+
border: 2px solid #d2d2d2;
|
|
34
|
+
color: #f3f0e4;
|
|
35
|
+
cursor: not-allowed;
|
|
36
|
+
outline: 2px solid #d2d2d2;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.md-button--secondary {
|
|
40
|
+
background-color: #ffffff;
|
|
41
|
+
border: 2px solid #005e5d;
|
|
42
|
+
color: #005e5d;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.md-button--secondary:hover:enabled {
|
|
46
|
+
background-color: #ccdfde;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.md-button--secondary:focus:enabled {
|
|
50
|
+
outline: 2px solid #337e7d;
|
|
51
|
+
border-color: #337e7d;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.md-button--secondary:disabled {
|
|
55
|
+
border: 2px solid #808080;
|
|
56
|
+
color: #808080;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.md-button--danger {
|
|
60
|
+
border: 2px solid #ca0000;
|
|
61
|
+
background-color: #ca0000;
|
|
62
|
+
outline: 2px solid #ca0000;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.md-button--danger:focus:enabled {
|
|
66
|
+
background-color: #b7090d;
|
|
67
|
+
border-color: #b7090d;
|
|
68
|
+
outline: 2px solid #b7090d;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.md-button--danger:hover:enabled {
|
|
72
|
+
background-color: #b7090d;
|
|
73
|
+
border-color: #b7090d;
|
|
74
|
+
outline: 2px solid #b7090d;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.md-button--danger:disabled {
|
|
78
|
+
border: 2px solid #808080;
|
|
79
|
+
color: #808080;
|
|
80
|
+
}
|
package/src/index.css
ADDED
package/src/shortcut.css
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
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 #005E5D;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.icon {
|
|
25
|
+
height: 10px;
|
|
26
|
+
width: 10px;
|
|
27
|
+
position: absolute;
|
|
28
|
+
right: 30px;
|
|
29
|
+
top: 26px;
|
|
30
|
+
}
|