@navikt/ds-css 0.17.3 → 0.18.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.
Files changed (11) hide show
  1. package/accordion.css +4 -0
  2. package/button.css +1 -1
  3. package/dist/index.css +57 -31
  4. package/form/radio-checkbox.css +5 -1
  5. package/form/switch.css +4 -0
  6. package/loader.css +1 -1
  7. package/modal.css +1 -1
  8. package/package.json +3 -4
  9. package/page-header.css +4 -4
  10. package/read-more.css +44 -20
  11. package/tooltip.css +3 -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,
@@ -145,6 +148,7 @@
145
148
  + .navds-checkbox__label::before {
146
149
  background-position: 4px center;
147
150
  }
151
+
148
152
  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
149
153
  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
150
154
  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
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/loader.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --navds-loader-color-inverted-foreground: var(
11
11
  --navds-semantic-color-component-background-light
12
12
  );
13
- --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
13
+ --navds-loader-color-inverted-background: rgb(255 255 255 / 0.3);
14
14
  --navds-loader-color-transparent-background: transparent;
15
15
  }
16
16
 
package/modal.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --navds-modal-color-background: var(
3
3
  --navds-semantic-color-component-background-light
4
4
  );
5
- --navds-modal-color-overlay: rgba(38, 38, 38, 0.7);
5
+ --navds-modal-color-overlay: rgb(38 38 38 / 0.7);
6
6
  }
7
7
 
8
8
  .ReactModal__Body--open {
package/package.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.17.3",
4
- "private": false,
3
+ "version": "0.18.2",
5
4
  "description": "Css for NAV Designsystem components",
6
5
  "author": "NAV Designsystem team",
7
6
  "keywords": [
@@ -21,12 +20,12 @@
21
20
  "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
22
21
  },
23
22
  "devDependencies": {
24
- "@navikt/ds-tokens": "^0.9.1",
23
+ "@navikt/ds-tokens": "^0.9.2",
25
24
  "normalize.css": "^8.0.1",
26
25
  "postcss": "^8.3.6",
27
26
  "postcss-cli": "^8.3.1",
28
27
  "postcss-combine-duplicated-selectors": "10.0.3",
29
28
  "postcss-import": "^14.0.2"
30
29
  },
31
- "gitHead": "46b1186bb8614fd065e87c09b139a095b8993778"
30
+ "gitHead": "035f4e937ada8a9f8ed9836116024596a271ab4f"
32
31
  }
package/page-header.css CHANGED
@@ -15,10 +15,7 @@
15
15
  display: flex;
16
16
  justify-content: center;
17
17
  background-color: var(--navds-page-header-color-background);
18
- padding-top: 1.5rem;
19
- padding-bottom: 1.5rem;
20
- padding-left: calc((100vw - 100%) / 2);
21
- padding-right: calc((100vw - 100%) / 2);
18
+ padding: 1.5rem calc((100vw - 100%) / 2);
22
19
  margin-left: calc((100vw - 100%) / -2);
23
20
  margin-right: calc((100vw - 100%) / -2);
24
21
  }
@@ -58,9 +55,11 @@
58
55
  .navds-page-header--situation {
59
56
  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-situation) inset;
60
57
  }
58
+
61
59
  .navds-page-header--product {
62
60
  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-product) inset;
63
61
  }
62
+
64
63
  .navds-page-header--guide {
65
64
  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-guide) inset;
66
65
  }
@@ -70,6 +69,7 @@
70
69
  width: 3rem;
71
70
  height: 3rem;
72
71
  }
72
+
73
73
  .navds-page-header__title {
74
74
  font-size: var(--navds-font-size-heading-xlarge);
75
75
  }
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/tooltip.css CHANGED
@@ -2,6 +2,7 @@
2
2
  0% {
3
3
  opacity: 0;
4
4
  }
5
+
5
6
  100% {
6
7
  opacity: 1;
7
8
  }
@@ -17,8 +18,8 @@
17
18
  border-radius: var(--navds-border-radius-small);
18
19
  padding: 0 var(--navds-spacing-2);
19
20
  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));
21
+ filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1))
22
+ drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
22
23
  display: flex;
23
24
  flex-direction: column;
24
25
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);