@navikt/ds-css 0.16.2 → 0.16.5

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 (6) hide show
  1. package/dist/index.css +69 -26
  2. package/form/search.css +2 -0
  3. package/help-text.css +21 -26
  4. package/index.css +1 -0
  5. package/package.json +2 -2
  6. package/read-more.css +52 -0
package/form/search.css CHANGED
@@ -8,10 +8,12 @@
8
8
  .navds-search {
9
9
  display: flex;
10
10
  flex-direction: column;
11
+ width: 100%;
11
12
  }
12
13
 
13
14
  .navds-search__wrapper-inner {
14
15
  position: relative;
16
+ width: 100%;
15
17
  }
16
18
 
17
19
  .navds-search__wrapper {
package/help-text.css CHANGED
@@ -1,22 +1,21 @@
1
1
  :root {
2
- --navds-help-text-color-button-background: transparent;
3
- --navds-help-text-color-icon: var(--navds-semantic-color-interaction-primary);
4
- --navds-help-text-color-icon-hover: var(
2
+ --navds-help-text-color: var(--navds-semantic-color-interaction-primary);
3
+ --navds-help-text-color-hover: var(
5
4
  --navds-semantic-color-component-background-light
6
5
  );
7
- --navds-help-text-color-icon-background-hover: var(
8
- --navds-semantic-color-interaction-primary
6
+ --navds-help-text-color-focus: var(
7
+ --navds-semantic-color-component-background-light
9
8
  );
10
- --navds-help-text-color-icon-shadow-hover: var(
9
+ --navds-help-text-color-background-hover: var(
11
10
  --navds-semantic-color-interaction-primary
12
11
  );
13
- --navds-help-text-color-icon-focus: var(
14
- --navds-semantic-color-component-background-light
12
+ --navds-help-text-color-background-focus: var(
13
+ --navds-semantic-color-interaction-primary
15
14
  );
16
- --navds-help-text-color-icon-background-focus: var(
15
+ --navds-help-text-color-shadow-hover: var(
17
16
  --navds-semantic-color-interaction-primary
18
17
  );
19
- --navds-help-text-color-icon-shadow-focus: var(--navds-semantic-color-focus);
18
+ --navds-help-text-color-shadow-focus: var(--navds-semantic-color-focus);
20
19
  --navds-help-text-color-popover-background: var(
21
20
  --navds-semantic-color-feedback-info-background
22
21
  );
@@ -27,34 +26,30 @@
27
26
  padding: 0;
28
27
  border: 0;
29
28
  cursor: pointer;
30
- background-color: var(--navds-help-text-color-button-background);
29
+ background-color: transparent;
31
30
  border-radius: 50%;
32
31
  display: flex;
33
32
  justify-content: center;
34
33
  align-items: center;
34
+ color: var(--navds-help-text-color);
35
+ font-size: 1.5rem;
36
+ }
37
+
38
+ .navds-help-text__button:hover {
39
+ color: var(--navds-help-text-color-hover);
40
+ background: var(--navds-help-text-color-background-hover);
41
+ box-shadow: 0 0 0 2px var(--navds-help-text-color-shadow-hover);
35
42
  }
36
43
 
37
44
  .navds-help-text__button:focus {
38
45
  outline: none;
46
+ color: var(--navds-help-text-color-focus);
47
+ background: var(--navds-help-text-color-background-focus);
48
+ box-shadow: 0 0 0 3px var(--navds-help-text-color-shadow-focus);
39
49
  }
40
50
 
41
51
  .navds-help-text__icon {
42
52
  border-radius: 50%;
43
- font-size: 1.5rem;
44
- color: var(--navds-help-text-color-icon);
45
- }
46
-
47
- .navds-help-text__button:hover > .navds-help-text__icon {
48
- color: var(--navds-help-text-color-icon-hover);
49
- background: var(--navds-help-text-color-icon-background-hover);
50
- box-shadow: 0 0 0 2px var(--navds-help-text-color-icon-shadow-hover);
51
- }
52
-
53
- .navds-help-text__button:focus > .navds-help-text__icon {
54
- outline: none;
55
- color: var(--navds-help-text-color-icon-focus);
56
- background: var(--navds-help-text-color-icon-background-focus);
57
- box-shadow: 0 0 0 3px var(--navds-help-text-color-icon-shadow-focus);
58
53
  }
59
54
 
60
55
  .navds-help-text__popover > .navds-popover__arrow::before {
package/index.css CHANGED
@@ -20,6 +20,7 @@
20
20
  @import "toggle-group.css";
21
21
  @import "panel.css";
22
22
  @import "link-panel.css";
23
+ @import "read-more.css";
23
24
  @import "speech-bubble.css";
24
25
  @import "step-indicator.css";
25
26
  @import "table.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.16.2",
3
+ "version": "0.16.5",
4
4
  "private": false,
5
5
  "description": "Css for NAV Designsystem components",
6
6
  "author": "NAV Designsystem team",
@@ -27,5 +27,5 @@
27
27
  "postcss-cli": "^8.3.1",
28
28
  "postcss-import": "^14.0.2"
29
29
  },
30
- "gitHead": "2f13905d615a6e358b24bd6269ce36a455c727ad"
30
+ "gitHead": "f6042d01aad8740107376679bdd2917fa56dd3a0"
31
31
  }
package/read-more.css ADDED
@@ -0,0 +1,52 @@
1
+ .navds-read-more {
2
+ cursor: pointer;
3
+ margin: 0;
4
+ padding: 0;
5
+ text-decoration: underline;
6
+ border: none;
7
+ background: none;
8
+ display: flex;
9
+ align-items: center;
10
+ gap: var(--navds-spacing-2);
11
+ color: var(--navds-semantic-color-link);
12
+ }
13
+
14
+ .navds-read-more:hover {
15
+ text-decoration: none;
16
+ }
17
+
18
+ .navds-read-more:focus {
19
+ outline: none;
20
+ color: var(--navds-link-color-text-focus);
21
+ text-decoration: none;
22
+ background-color: var(--navds-link-color-background-focus);
23
+ box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
24
+ }
25
+
26
+ .navds-read-more__expand-icon {
27
+ font-size: 1.25rem;
28
+ }
29
+
30
+ .navds-read-more--open > .navds-read-more__expand-icon {
31
+ transform: rotate(180deg);
32
+ }
33
+
34
+ .navds-read-more + .ReactCollapse--collapse {
35
+ transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
36
+ padding-top: var(--navds-spacing-2);
37
+ }
38
+
39
+ .navds-read-more__content {
40
+ display: flex;
41
+ align-items: stretch;
42
+ gap: var(--navds-spacing-2);
43
+ }
44
+
45
+ .navds-read-more__content::before {
46
+ content: "";
47
+ display: block;
48
+ width: 2px;
49
+ background-color: var(--navds-semantic-color-border-muted);
50
+ margin: 0 9px;
51
+ flex-shrink: 0;
52
+ }