@navikt/ds-css 0.17.2 → 0.18.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.
Files changed (9) hide show
  1. package/dist/index.css +55 -27
  2. package/form/radio-checkbox.css +4 -1
  3. package/form/switch.css +4 -0
  4. package/package.json +2 -2
  5. package/page-header.css +2 -2
  6. package/read-more.css +44 -20
  7. package/stepper.css +1 -1
  8. package/table.css +5 -0
  9. package/tooltip.css +2 -2
package/form/radio-checkbox.css CHANGED
@@ -3,6 +3,9 @@
3
3
  --navds-semantic-color-component-background-light
4
4
  );
5
5
  --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
6
+ --navds-radio-checkbox-color-description: var(
7
+ --navds-semantic-color-text-muted
8
+ );
6
9
  --navds-radio-checkbox-color-background-hover: var(
7
10
  --navds-semantic-color-interaction-primary-hover-subtle
8
11
  );
@@ -74,7 +77,7 @@
74
77
 
75
78
  .navds-checkbox__description,
76
79
  .navds-radio__description {
77
- color: var(--navds-radio-checkbox-color-text);
80
+ color: var(--navds-radio-checkbox-color-description);
78
81
  }
79
82
 
80
83
  .navds-checkbox--small > .navds-checkbox__input,
package/form/switch.css CHANGED
@@ -72,6 +72,10 @@
72
72
  padding: 0.75rem 0 0.75rem 3.25rem;
73
73
  }
74
74
 
75
+ .navds-switch__description {
76
+ color: var(--navds-semantic-color-text-muted);
77
+ }
78
+
75
79
  .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
76
80
  padding: 0.75rem 3.25rem 0.75rem 0;
77
81
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.17.2",
3
+ "version": "0.18.1",
4
4
  "private": false,
5
5
  "description": "Css for NAV Designsystem components",
6
6
  "author": "NAV Designsystem team",
@@ -28,5 +28,5 @@
28
28
  "postcss-combine-duplicated-selectors": "10.0.3",
29
29
  "postcss-import": "^14.0.2"
30
30
  },
31
- "gitHead": "41e6aa017f04ee0d1dc4a4ece225635142a219fd"
31
+ "gitHead": "c1a97b0b5e1bd237493d5bc70636052c16bb4471"
32
32
  }
package/page-header.css CHANGED
@@ -26,7 +26,7 @@
26
26
  .navds-page-header__wrapper {
27
27
  width: 100%;
28
28
  max-width: 56.5rem;
29
- text-align: start;
29
+ text-align: left;
30
30
  }
31
31
 
32
32
  .navds-page-header__title {
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .navds-page-header--left > .navds-page-header__wrapper {
41
- text-align: start;
41
+ text-align: left;
42
42
  }
43
43
 
44
44
  .navds-page-header--center > .navds-page-header__wrapper {
package/read-more.css CHANGED
@@ -1,54 +1,78 @@
1
1
  .navds-read-more {
2
2
  cursor: pointer;
3
3
  margin: 0;
4
- padding: 0;
5
- text-decoration: underline;
6
4
  border: none;
7
5
  background: none;
8
6
  display: flex;
9
7
  align-items: center;
10
8
  gap: var(--navds-spacing-2);
11
9
  color: var(--navds-semantic-color-link);
12
- text-align: left;
10
+ border-radius: var(--navds-border-radius-small);
11
+ padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1)
12
+ 2px;
13
+ text-align: start;
13
14
  }
14
15
 
15
- .navds-read-more:hover {
16
- text-decoration: none;
16
+ .navds-read-more--small {
17
+ padding: 2px var(--navds-spacing-1) 2px 2px;
17
18
  }
18
19
 
19
- .navds-read-more:focus {
20
- outline: none;
21
- color: var(--navds-link-color-text-focus);
22
- text-decoration: none;
23
- background-color: var(--navds-link-color-background-focus);
24
- box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
20
+ .navds-read-more:hover {
21
+ background-color: rgba(38, 38, 38, 0.06);
25
22
  }
26
23
 
27
- .navds-read-more__expand-icon {
28
- flex-shrink: 0;
29
- font-size: 1.25rem;
24
+ .navds-read-more:active {
25
+ background-color: rgba(38, 38, 38, 0.1);
30
26
  }
31
27
 
32
- .navds-read-more--open > .navds-read-more__expand-icon {
33
- transform: rotate(180deg);
28
+ .navds-read-more:focus {
29
+ outline: none;
30
+ box-shadow: var(--navds-shadow-focus);
34
31
  }
35
32
 
36
33
  .navds-read-more + .ReactCollapse--collapse {
37
- transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
34
+ transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
38
35
  padding-top: var(--navds-spacing-2);
39
36
  }
40
37
 
38
+ .navds-read-more:not(.navds-read-more--open) + .ReactCollapse--collapse {
39
+ padding: 0;
40
+ }
41
+
41
42
  .navds-read-more__content {
42
43
  display: flex;
43
44
  align-items: stretch;
44
- gap: var(--navds-spacing-2);
45
+ gap: 10px;
46
+ padding: 0 var(--navds-spacing-1);
45
47
  }
46
48
 
47
49
  .navds-read-more__content::before {
48
50
  content: "";
49
51
  display: block;
50
52
  width: 2px;
51
- background-color: var(--navds-semantic-color-border-muted);
52
- margin: 0 9px;
53
+ background-color: rgba(38, 38, 38, 0.36);
54
+ margin: 0 7px;
53
55
  flex-shrink: 0;
54
56
  }
57
+
58
+ .navds-read-more__expand-icon {
59
+ font-size: 1.25rem;
60
+ flex-shrink: 0;
61
+ }
62
+
63
+ .navds-read-more--open > .navds-read-more__expand-icon {
64
+ transform: rotate(-180deg);
65
+ }
66
+
67
+ .navds-read-more__expand-icon--filled {
68
+ display: none;
69
+ }
70
+
71
+ .navds-read-more:hover
72
+ > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
73
+ display: inherit;
74
+ }
75
+
76
+ .navds-read-more:hover > .navds-read-more__expand-icon {
77
+ display: none;
78
+ }
package/stepper.css CHANGED
@@ -68,7 +68,7 @@
68
68
  .navds-stepper__step-label {
69
69
  margin-top: 2px;
70
70
  color: var(--navds-semantic-color-interaction-primary);
71
- text-align: start;
71
+ text-align: left;
72
72
  }
73
73
 
74
74
  .navds-stepper__step:hover > .navds-stepper__step-label {
package/table.css CHANGED
@@ -72,6 +72,11 @@
72
72
  text-align: left;
73
73
  }
74
74
 
75
+ .navds-table__header .navds-table__header-cell,
76
+ .navds-table__header .navds-table__data-cell {
77
+ border-bottom-width: 2px;
78
+ }
79
+
75
80
  .navds-table__header-cell--align-right,
76
81
  .navds-table__data-cell--align-right {
77
82
  text-align: right;
package/tooltip.css CHANGED
@@ -17,8 +17,8 @@
17
17
  border-radius: var(--navds-border-radius-small);
18
18
  padding: 0 var(--navds-spacing-2);
19
19
  align-items: center;
20
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05))
21
- drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
20
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
21
+ drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
22
22
  display: flex;
23
23
  flex-direction: column;
24
24
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);