@navikt/ds-css 0.18.18 → 0.18.21

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/dist/index.css +146 -76
  2. package/form/text-field.css +1 -1
  3. package/package.json +3 -3
  4. package/stepper.css +149 -68
package/form/text-field.css CHANGED
@@ -27,7 +27,7 @@
27
27
  [data-theme="dark"] {
28
28
  --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
29
29
  --navds-text-field-color-background: var(
30
- --navds-semantic-color-component-background-dark
30
+ --navds-semantic-color-component-background-inverted
31
31
  );
32
32
  --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
33
33
  --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.18.18",
3
+ "version": "0.18.21",
4
4
  "description": "Css for NAV Designsystem components",
5
5
  "author": "NAV Designsystem team",
6
6
  "keywords": [
@@ -20,12 +20,12 @@
20
20
  "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
21
21
  },
22
22
  "devDependencies": {
23
- "@navikt/ds-tokens": "^0.9.6",
23
+ "@navikt/ds-tokens": "^0.9.7",
24
24
  "normalize.css": "^8.0.1",
25
25
  "postcss": "^8.3.6",
26
26
  "postcss-cli": "^8.3.1",
27
27
  "postcss-combine-duplicated-selectors": "10.0.3",
28
28
  "postcss-import": "^14.0.2"
29
29
  },
30
- "gitHead": "8a156988fcb614d499e00ee4498069e0261bd74e"
30
+ "gitHead": "7596f3f5dc4c6d9faf919a06e7aa1408a6c98524"
31
31
  }
package/stepper.css CHANGED
@@ -1,99 +1,180 @@
1
1
  .navds-stepper {
2
- display: flex;
3
- flex-direction: column;
4
- padding: 0;
5
- margin: 0;
2
+ --navds-stepper-circle-size: 1.75rem;
3
+ --navds-stepper-border-width: 2px;
4
+ --navds-stepper-line-length: 1rem;
5
+
6
+ color: var(--navds-semantic-color-interaction-primary);
7
+ font-weight: 600;
8
+ line-height: 1;
6
9
  list-style: none;
10
+ padding-left: 0;
11
+ margin: 0;
12
+ }
13
+
14
+ .navds-stepper--horizontal {
15
+ display: flex;
16
+ align-items: start;
17
+ text-align: center;
18
+ }
19
+
20
+ .navds-stepper__item {
21
+ display: grid;
22
+ grid-template-rows:
23
+ [line-1] auto [step-start] var(--navds-stepper-circle-size)
24
+ [line-2 step-end] auto;
25
+ grid-template-columns: var(--navds-stepper-circle-size) auto;
26
+ justify-items: start;
27
+ gap: 0.5rem;
28
+ }
29
+
30
+ .navds-stepper__line {
31
+ background-color: var(--navds-semantic-color-border-muted);
32
+ width: var(--navds-stepper-border-width);
33
+ height: 100%;
34
+ min-height: var(--navds-stepper-line-length);
35
+ justify-self: center;
36
+ grid-column: 1;
37
+ }
38
+
39
+ .navds-stepper__line--1 {
40
+ grid-row: line-1;
41
+ display: none;
42
+ }
43
+
44
+ .navds-stepper__line--2 {
45
+ grid-row: line-2;
46
+ }
47
+
48
+ :where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
49
+ display: none;
7
50
  }
8
51
 
9
- /* Step */
10
52
  .navds-stepper__step {
11
- position: relative;
53
+ grid-row: 2 / -1;
54
+ grid-column: 1 / -1;
55
+ display: grid;
56
+ grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
57
+ gap: var(--navds-spacing-2);
58
+ align-items: baseline;
59
+ justify-content: start;
60
+ text-decoration: none;
12
61
  cursor: pointer;
13
- padding: calc(2.25rem / 2) 0;
14
- display: flex;
15
- background: none;
16
- border: none;
62
+ padding: var(--navds-stepper-border-width);
63
+ margin: calc(var(--navds-stepper-border-width) * -1)
64
+ calc(var(--navds-stepper-border-width) * -1) 1.75rem;
65
+ }
66
+
67
+ button.navds-stepper__step {
17
68
  appearance: none;
18
- width: 100%;
19
- color: var(--navds-semantic-color-text);
20
- text-decoration: none;
21
- flex-shrink: 0;
69
+ border: none;
70
+ background-color: transparent;
71
+ font: inherit;
72
+ color: inherit;
73
+ text-align: inherit;
74
+ }
75
+
76
+ :where(.navds-stepper__step):focus {
77
+ outline: none;
78
+ box-shadow: var(--navds-shadow-focus);
79
+ isolation: isolate;
22
80
  }
23
81
 
24
- .navds-stepper__step-number {
82
+ .navds-stepper__circle {
83
+ grid-column: circle;
84
+ display: inline-grid;
85
+ place-items: center;
25
86
  flex-shrink: 0;
26
- display: flex;
27
- width: 28px;
28
- height: 28px;
29
- margin: 0;
30
- margin-right: var(--navds-spacing-3);
87
+ width: var(--navds-stepper-circle-size);
88
+ height: var(--navds-stepper-circle-size);
89
+ border: var(--navds-stepper-border-width) solid currentColor;
31
90
  border-radius: var(--navds-border-radius-full);
32
- align-items: center;
33
- justify-content: center;
34
- color: var(--navds-semantic-color-interaction-primary);
35
- box-shadow: inset 0 0 0 2px var(--navds-semantic-color-interaction-primary);
36
- background-color: var(--navds-semantic-color-component-background-light);
91
+ line-height: 1;
37
92
  }
38
93
 
39
- /* Step-states: focus, active, hover */
40
- .navds-stepper__step-wrapper:hover
41
- > .navds-stepper__step
42
- > .navds-stepper__step-number {
43
- background-color: var(
44
- --navds-semantic-color-interaction-primary-hover-subtle
45
- );
94
+ .navds-stepper__content {
95
+ min-width: fit-content;
96
+ line-height: 1.5;
97
+ grid-column: content;
46
98
  }
47
99
 
48
- .navds-stepper__step--active > .navds-stepper__step-number,
49
- .navds-stepper__step-wrapper:hover
50
- > .navds-stepper__step--active
51
- > .navds-stepper__step-number {
52
- color: var(--navds-semantic-color-text-inverted);
53
- background-color: var(--navds-semantic-color-interaction-primary-selected);
54
- box-shadow: inset 0 0 0 2px
55
- var(--navds-semantic-color-interaction-primary-selected);
100
+ /* Horizontal */
101
+ :where(.navds-stepper--horizontal) .navds-stepper__item {
102
+ flex: 1 1 100%;
103
+ grid-template-columns:
104
+ [line-1-start] 1fr [step-start] auto [line-1-end] var(
105
+ --navds-stepper-circle-size
106
+ )
107
+ [line-2-start] auto [step-end] 1fr [line-2-end];
108
+ grid-template-rows: var(--navds-stepper-circle-size) auto;
56
109
  }
57
110
 
58
- .navds-stepper__step:focus {
59
- box-shadow: var(--navds-shadow-focus);
60
- outline: none;
111
+ :where(.navds-stepper--horizontal) .navds-stepper__line {
112
+ height: var(--navds-stepper-border-width);
113
+ width: 100%;
114
+ min-height: auto;
115
+ grid-row: 1;
116
+ display: block;
117
+ align-self: center;
61
118
  }
62
119
 
63
- .navds-stepper__step--active {
64
- cursor: default;
120
+ :where(.navds-stepper--horizontal) .navds-stepper__line--1 {
121
+ grid-column: line-1;
65
122
  }
66
123
 
67
- /* Step label */
68
- .navds-stepper__step-label {
69
- margin-top: 2px;
70
- color: var(--navds-semantic-color-interaction-primary);
71
- text-align: left;
124
+ :where(.navds-stepper--horizontal) .navds-stepper__line--2 {
125
+ grid-column: line-2;
72
126
  }
73
127
 
74
- .navds-stepper__step:hover > .navds-stepper__step-label {
75
- text-decoration: underline;
128
+ :where(.navds-stepper--horizontal .navds-stepper__item:first-of-type)
129
+ .navds-stepper__line--1,
130
+ :where(.navds-stepper--horizontal .navds-stepper__item:last-of-type)
131
+ .navds-stepper__line--2 {
132
+ visibility: hidden;
76
133
  }
77
134
 
78
- .navds-stepper__step--active > .navds-stepper__step-label {
79
- color: black;
135
+ :where(.navds-stepper--horizontal) .navds-stepper__step {
136
+ grid-row: 1 / -1;
137
+ grid-column: step;
138
+ display: grid;
139
+ grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
140
+ grid-template-columns:
141
+ [content-start] auto [circle] var(--navds-stepper-circle-size)
142
+ [content-end] auto;
143
+ justify-items: center;
144
+ align-items: center;
145
+ margin-bottom: 0;
80
146
  }
81
147
 
82
- .navds-stepper__step--active:hover > .navds-stepper__step-label {
83
- text-decoration: none;
148
+ :where(.navds-stepper--horizontal) .navds-stepper__circle {
149
+ grid-row: circle;
150
+ grid-column: 2;
84
151
  }
85
152
 
86
- /* Step Horizontal Lines */
153
+ :where(.navds-stepper--horizontal) .navds-stepper__content {
154
+ grid-row: content;
155
+ grid-column: 1 / -1;
156
+ max-width: 24ch;
157
+ }
87
158
 
88
- .navds-stepper__step-wrapper:not(:last-child) > .navds-stepper__step::after {
89
- content: "";
90
- position: absolute;
91
- top: calc(28px + 8px + (2.25rem / 2));
92
- left: 13px;
93
- height: calc(100% - 2.75rem);
94
- display: block;
95
- border-left: 2px solid var(--navds-semantic-color-border-muted);
96
- border-radius: var(--navds-border-radius-medium);
97
- pointer-events: none;
98
- z-index: 1;
159
+ /* Active step */
160
+ :where(.navds-stepper__step--active) .navds-stepper__content {
161
+ color: var(--navds-semantic-color-interaction-primary-selected);
162
+ }
163
+
164
+ :where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
165
+ .navds-stepper__content {
166
+ text-decoration: underline;
167
+ }
168
+
169
+ :where(.navds-stepper__step--active) .navds-stepper__circle {
170
+ background-color: var(--navds-semantic-color-interaction-primary-selected);
171
+ border-color: var(--navds-semantic-color-interaction-primary-selected);
172
+ color: var(--navds-semantic-color-text-inverted);
173
+ }
174
+
175
+ :where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
176
+ .navds-stepper__circle {
177
+ background-color: var(
178
+ --navds-semantic-color-interaction-primary-hover-subtle
179
+ );
99
180
  }