@navikt/ds-css 0.18.23 → 1.0.0-rc.2
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 +43 -0
- package/alert.css +1 -7
- package/chat.css +90 -0
- package/dist/index.css +123 -556
- package/form/textarea.css +0 -1
- package/help-text.css +19 -11
- package/index.css +1 -7
- package/link-panel.css +2 -2
- package/package.json +3 -3
- package/pagination.css +18 -72
- package/popover.css +5 -27
- package/table.css +1 -1
- package/tabs.css +4 -0
- package/tooltip.css +0 -3
- package/card.css +0 -55
- package/menu.css +0 -102
- package/page-header.css +0 -76
- package/speech-bubble.css +0 -85
- package/step-indicator.css +0 -202
package/README.md
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# NAV designsystem styling
|
|
2
|
+
|
|
3
|
+
CSS-package containing design for @navikt/ds-react and more.
|
|
4
|
+
|
|
5
|
+
- All our tokens (Colors, border, shadows etc)
|
|
6
|
+
- Component-styling for `@navikt/ds-react` packages
|
|
7
|
+
- Normalize.css v8
|
|
8
|
+
- Fonts
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
Install `@navikt/ds-css` with yarn
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
yarn add @navikt/ds-css
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Install `@navikt/ds-css` with npm
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install @navikt/ds-css
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
Import styling for make it accessible. Only need to do this one place.
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
import "@navikt/ds-css";
|
|
30
|
+
|
|
31
|
+
function App() {
|
|
32
|
+
return <Component />;
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Learn more
|
|
37
|
+
|
|
38
|
+
- [Designsystem documentation](https://aksel.nav.no/designsystem)
|
|
39
|
+
- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
|
|
40
|
+
|
|
41
|
+
## License
|
|
42
|
+
|
|
43
|
+
[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
|
package/alert.css
CHANGED
|
@@ -33,19 +33,13 @@
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.navds-alert--small {
|
|
36
|
-
padding: var(--navds-spacing-2);
|
|
37
|
-
gap: var(--navds-spacing-2);
|
|
36
|
+
padding: var(--navds-spacing-2) var(--navds-spacing-4);
|
|
38
37
|
}
|
|
39
38
|
|
|
40
39
|
.navds-alert--full-width {
|
|
41
40
|
border-radius: 0;
|
|
42
41
|
}
|
|
43
42
|
|
|
44
|
-
.navds-alert--full-width.navds-alert--small {
|
|
45
|
-
padding-right: var(--navds-spacing-4);
|
|
46
|
-
padding-left: var(--navds-spacing-4);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
43
|
.navds-alert > .navds-alert__icon {
|
|
50
44
|
flex-shrink: 0;
|
|
51
45
|
font-size: 1.5rem;
|
package/chat.css
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--navds-chat-color-background: var(--navds-semantic-color-canvas-background);
|
|
3
|
+
--navds-chat-color-avatar: var(--navds-semantic-color-text);
|
|
4
|
+
--navds-chat-color-avatar-background: var(
|
|
5
|
+
--navds-semantic-color-canvas-background
|
|
6
|
+
);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.navds-chat {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: flex-end;
|
|
12
|
+
gap: var(--navds-spacing-4);
|
|
13
|
+
padding-right: var(--navds-spacing-16);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.navds-chat--right {
|
|
17
|
+
flex-direction: row-reverse;
|
|
18
|
+
padding-right: 0;
|
|
19
|
+
padding-left: var(--navds-spacing-16);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.navds-chat__bubble-wrapper {
|
|
23
|
+
list-style: none;
|
|
24
|
+
margin: 0;
|
|
25
|
+
padding: 0;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
gap: var(--navds-spacing-3);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.navds-chat--right .navds-chat__bubble-wrapper {
|
|
32
|
+
align-items: flex-end;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.navds-chat__avatar {
|
|
36
|
+
align-items: center;
|
|
37
|
+
background: var(--navds-chat-color-avatar-background);
|
|
38
|
+
color: var(--navds-chat-color-avatar);
|
|
39
|
+
border-radius: var(--navds-border-radius-full);
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-shrink: 0;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
height: 3rem;
|
|
45
|
+
width: 3rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.navds-chat__avatar svg {
|
|
49
|
+
align-self: center;
|
|
50
|
+
height: 100%;
|
|
51
|
+
width: 100%;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.navds-chat__bubble {
|
|
55
|
+
padding: 1rem;
|
|
56
|
+
box-shadow: var(--navds-shadow-small);
|
|
57
|
+
width: fit-content;
|
|
58
|
+
max-width: 37.5rem;
|
|
59
|
+
background-color: var(--navds-chat-color-background);
|
|
60
|
+
border-radius: var(--navds-border-radius-xlarge);
|
|
61
|
+
border-bottom-left-radius: 2px;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
gap: var(--navds-spacing-2);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.navds-chat__bubble:focus {
|
|
68
|
+
box-shadow: var(--navds-shadow-focus);
|
|
69
|
+
outline: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.navds-chat--right .navds-chat__bubble {
|
|
73
|
+
border-radius: var(--navds-border-radius-xlarge);
|
|
74
|
+
border-bottom-right-radius: 2px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.navds-chat__top-text {
|
|
78
|
+
color: var(--navds-semantic-color-text-muted);
|
|
79
|
+
display: flex;
|
|
80
|
+
gap: var(--navds-spacing-2);
|
|
81
|
+
align-items: baseline;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.navds-chat--right .navds-chat__top-text {
|
|
85
|
+
align-self: flex-end;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.navds-chat__name {
|
|
89
|
+
font-weight: var(--navds-font-weight-bold);
|
|
90
|
+
}
|