@navikt/ds-css 0.18.27 → 1.0.0-rc.3

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 (21) hide show
  1. package/README.md +43 -0
  2. package/accordion.css +0 -4
  3. package/alert.css +0 -6
  4. package/button.css +42 -16
  5. package/chat.css +90 -0
  6. package/dist/index.css +174 -591
  7. package/form/textarea.css +0 -1
  8. package/help-text.css +19 -11
  9. package/index.css +1 -7
  10. package/package.json +3 -3
  11. package/pagination.css +18 -72
  12. package/popover.css +5 -27
  13. package/read-more.css +19 -20
  14. package/table.css +1 -2
  15. package/tabs.css +4 -0
  16. package/tooltip.css +0 -3
  17. package/card.css +0 -55
  18. package/menu.css +0 -102
  19. package/page-header.css +0 -76
  20. package/speech-bubble.css +0 -85
  21. package/step-indicator.css +0 -202
package/speech-bubble.css DELETED
@@ -1,85 +0,0 @@
1
- :root {
2
- --navds-speechbubble-color-background: var(
3
- --navds-semantic-color-component-background-alternate
4
- );
5
- --navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
6
- --navds-speechbubble-color-illustration-background: var(
7
- --navds-semantic-color-canvas-background
8
- );
9
- --navds-speechbubble-color-detail-text: var(
10
- --navds-semantic-color-text-muted
11
- );
12
- }
13
-
14
- .navds-speechbubble {
15
- display: flex;
16
- align-items: flex-end;
17
- gap: var(--navds-spacing-4);
18
- }
19
-
20
- .navds-speechbubble--right {
21
- flex-direction: row-reverse;
22
- }
23
-
24
- .navds-speechbubble__bubble-list {
25
- list-style: none;
26
- margin: 0;
27
- padding: 0;
28
- display: flex;
29
- flex-direction: column;
30
- gap: var(--navds-spacing-3);
31
- }
32
-
33
- .navds-speechbubble--right .navds-speechbubble__bubble-list {
34
- align-items: flex-end;
35
- }
36
-
37
- .navds-speechbubble__illustration {
38
- align-items: center;
39
- background: var(--navds-speechbubble-color-illustration-background);
40
- color: var(--navds-speechbubble-color-illustration);
41
- border-radius: var(--navds-border-radius-full);
42
- display: flex;
43
- flex-shrink: 0;
44
- justify-content: center;
45
- overflow: hidden;
46
- height: 3rem;
47
- width: 3rem;
48
- }
49
-
50
- .navds-speechbubble__illustration svg {
51
- align-self: center;
52
- height: 100%;
53
- width: 100%;
54
- }
55
-
56
- .navds-speechbubble__bubble {
57
- padding: 1rem;
58
- box-shadow: var(--navds-shadow-small);
59
- width: fit-content;
60
- max-width: 37.5rem;
61
- background-color: var(--navds-speechbubble-color-background);
62
- border-radius: var(--navds-border-radius-xlarge);
63
- border-bottom-left-radius: 2px;
64
- display: flex;
65
- flex-direction: column;
66
- gap: var(--navds-spacing-2);
67
- }
68
-
69
- .navds-speechbubble__bubble:focus {
70
- box-shadow: var(--navds-shadow-focus);
71
- outline: none;
72
- }
73
-
74
- .navds-speechbubble--right .navds-speechbubble__bubble {
75
- border-radius: var(--navds-border-radius-xlarge);
76
- border-bottom-right-radius: 2px;
77
- }
78
-
79
- .navds-speechbubble__top-text {
80
- color: var(--navds-speechbubble-color-detail-text);
81
- }
82
-
83
- .navds-speechbubble--right .navds-speechbubble__top-text {
84
- align-self: flex-end;
85
- }
package/step-indicator.css DELETED
@@ -1,202 +0,0 @@
1
- :root {
2
- --navds-step-indicator-color-step-line: var(--navds-semantic-color-divider);
3
- --navds-step-indicator-color-step-text: var(--navds-semantic-color-text);
4
- --navds-step-indicator-color-step-label: var(
5
- --navds-semantic-color-interaction-primary
6
- );
7
- --navds-step-indicator-color-step-number-background: var(
8
- --navds-semantic-color-canvas-background-light
9
- );
10
- --navds-step-indicator-color-step-number-background-finished: var(
11
- --navds-semantic-color-canvas-background
12
- );
13
- --navds-step-indicator-color-step-number-shadow: var(
14
- --navds-semantic-color-border
15
- );
16
- --navds-step-indicator-color-step-number-shadow-active: var(
17
- --navds-semantic-color-interaction-primary-selected
18
- );
19
- --navds-step-indicator-color-step-number-shadow-hover: var(
20
- --navds-semantic-color-interaction-primary
21
- );
22
- --navds-step-indicator-color-step-number-background-active: var(
23
- --navds-semantic-color-interaction-primary-selected
24
- );
25
- --navds-step-indicator-color-step-number-text-active: var(
26
- --navds-semantic-color-text-inverted
27
- );
28
- --navds-step-indicator-color-step-number-shadow-inset: var(
29
- --navds-semantic-color-component-background-light
30
- );
31
- }
32
-
33
- /* StepIndicator */
34
- .navds-step-indicator {
35
- display: flex;
36
- align-items: flex-start;
37
- padding: 0;
38
- margin: 0;
39
- }
40
-
41
- /* Step */
42
- .navds-step-indicator__step-wrapper {
43
- padding: 0 var(--navds-spacing-2);
44
- flex: 1;
45
- position: relative;
46
- list-style: none;
47
- min-width: 10rem;
48
- }
49
-
50
- .navds-step-indicator__step-wrapper--hidelabel {
51
- min-width: 5rem;
52
- }
53
-
54
- .navds-step-indicator__step {
55
- display: flex;
56
- align-items: center;
57
- flex-direction: column;
58
- padding: 0;
59
- background: none;
60
- border: none;
61
- appearance: none;
62
- width: 100%;
63
- flex-shrink: 1;
64
- color: var(--navds-step-indicator-color-step-text);
65
- text-decoration: none;
66
- cursor: pointer;
67
- }
68
-
69
- .navds-step-indicator__step-number {
70
- flex-shrink: 0;
71
- display: flex;
72
- width: 2rem;
73
- height: 2rem;
74
- margin: 0.5rem;
75
- border-radius: var(--navds-border-radius-full);
76
- align-items: center;
77
- justify-content: center;
78
- box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
79
- background-color: var(--navds-step-indicator-color-step-number-background);
80
- }
81
-
82
- .navds-step-indicator__step-wrapper:first-child
83
- > .navds-step-indicator__step
84
- > .navds-step-indicator__step-number {
85
- padding-right: 0;
86
- }
87
-
88
- .navds-step-indicator__step-wrapper:last-child
89
- > .navds-step-indicator__step
90
- > .navds-step-indicator__step-number {
91
- padding-left: 0;
92
- }
93
-
94
- .navds-step-indicator__step-label {
95
- width: 100%;
96
- margin-top: var(--navds-spacing-4);
97
- text-align: center;
98
- color: var(--navds-step-indicator-color-step-label);
99
- text-decoration: underline;
100
- }
101
-
102
- .navds-step-indicator__step-line {
103
- flex: 1 1 100%;
104
- position: absolute;
105
- top: 1.5rem;
106
- right: calc(50% + 2rem);
107
- left: calc(-50% + 2rem);
108
- display: block;
109
- border-top: 2px solid var(--navds-step-indicator-color-step-line);
110
- border-radius: var(--navds-border-radius-medium);
111
- pointer-events: none;
112
- }
113
-
114
- .navds-step-indicator__step--active > .navds-step-indicator__step-label {
115
- color: var(--navds-step-indicator-color-step-text);
116
- font-weight: bold;
117
- }
118
-
119
- .navds-step-indicator__step--active > .navds-step-indicator__step-number {
120
- background-color: var(
121
- --navds-step-indicator-color-step-number-background-active
122
- );
123
- color: var(--navds-step-indicator-color-step-number-text-active);
124
- box-shadow: 0 0 0 1px
125
- var(--navds-step-indicator-color-step-number-shadow-active);
126
- width: 2.5rem;
127
- height: 2.5rem;
128
- margin: 0.25rem;
129
- }
130
-
131
- .navds-step-indicator__step:focus {
132
- outline: none;
133
- }
134
-
135
- .navds-step-indicator__step:hover > .navds-step-indicator__step-label {
136
- text-decoration: none;
137
- }
138
-
139
- .navds-step-indicator__step.navds-step-indicator__step--disabled:hover
140
- > .navds-step-indicator__step-label {
141
- text-decoration: underline;
142
- }
143
-
144
- .navds-step-indicator__step--active > .navds-step-indicator__step-label,
145
- .navds-step-indicator__step--active.navds-step-indicator__step--disabled:hover
146
- > .navds-step-indicator__step-label {
147
- text-decoration: none;
148
- }
149
-
150
- .navds-step-indicator__step:hover > .navds-step-indicator__step-number {
151
- background: var(--navds-step-indicator-color-step-number-background);
152
- box-shadow: 0 0 0 2px
153
- var(--navds-step-indicator-color-step-number-shadow-hover);
154
- }
155
-
156
- .navds-step-indicator__step--active:hover > .navds-step-indicator__step-number {
157
- background-color: var(
158
- --navds-step-indicator-color-step-number-background-active
159
- );
160
- color: var(--navds-step-indicator-color-step-number-text-active);
161
- box-shadow: 0 0 0 1px
162
- var(--navds-step-indicator-color-step-number-shadow-active);
163
- }
164
-
165
- .navds-step-indicator__step:focus > .navds-step-indicator__step-number {
166
- box-shadow: var(--navds-shadow-focus);
167
- outline: none;
168
- }
169
-
170
- .navds-step-indicator__step--active:focus > .navds-step-indicator__step-number {
171
- box-shadow: 0 0 0 1px inset
172
- var(--navds-step-indicator-color-step-number-shadow-inset),
173
- var(--navds-shadow-focus);
174
- }
175
-
176
- .navds-step-indicator__step--disabled:hover
177
- > .navds-step-indicator__step-number {
178
- box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
179
- }
180
-
181
- .navds-step-indicator__step--disabled.navds-step-indicator__step--active:disabled
182
- > .navds-step-indicator__step-number {
183
- box-shadow: 0 0 0 1px
184
- var(--navds-step-indicator-color-step-number-shadow-active);
185
- }
186
-
187
- /* Finished state */
188
- .navds-step-indicator__step--finished > .navds-step-indicator__step-number,
189
- .navds-step-indicator__step--finished.navds-step-indicator__step--disabled
190
- > .navds-step-indicator__step-number {
191
- background: var(--navds-step-indicator-color-step-number-background-finished);
192
- }
193
-
194
- /* Disabled */
195
- .navds-step-indicator__step--disabled > .navds-step-indicator__step-number,
196
- .navds-step-indicator__step--disabled > .navds-step-indicator__step-label {
197
- opacity: 0.3;
198
- }
199
-
200
- .navds-step-indicator__step--disabled {
201
- cursor: not-allowed;
202
- }