@navikt/ds-css 0.16.1 → 0.16.4

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 (5) hide show
  1. package/dist/index.css +35 -30
  2. package/form/confirmation-panel.css +11 -4
  3. package/form/search.css +2 -0
  4. package/help-text.css +21 -26
  5. package/package.json +2 -2
package/form/confirmation-panel.css CHANGED
@@ -1,16 +1,22 @@
1
1
  :root {
2
2
  --navds-confirmation-panel-color-background: var(
3
- --navds-semantic-color-feedback-warning-background
3
+ --navds-global-color-orange-50
4
4
  );
5
5
  --navds-confirmation-panel-color-background-checked: var(
6
- --navds-semantic-color-feedback-success-background
6
+ --navds-global-color-green-50
7
+ );
8
+ --navds-confirmation-panel-color-border: var(
9
+ --navds-semantic-color-feedback-warning-border
7
10
  );
8
11
  --navds-confirmation-panel-color-border-checked: var(
9
- --navds-semantic-color-feedback-success-background
12
+ --navds-semantic-color-feedback-success-border
10
13
  );
11
- --navds-confirmation-panel-color-background-error: var(
14
+ --navds-confirmation-panel-color-border-error: var(
12
15
  --navds-semantic-color-feedback-danger-background
13
16
  );
17
+ --navds-confirmation-panel-color-background-error: var(
18
+ --navds-global-color-red-50
19
+ );
14
20
  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
15
21
  --navds-global-color-green-700
16
22
  );
@@ -34,6 +40,7 @@
34
40
  gap: var(--navds-spacing-4);
35
41
  padding: var(--navds-spacing-4);
36
42
  border-radius: 4px;
43
+ border: 1px solid var(--navds-confirmation-panel-color-border);
37
44
  background-color: var(--navds-confirmation-panel-color-background);
38
45
  transition: background-color linear 100ms;
39
46
  }
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.16.1",
3
+ "version": "0.16.4",
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": "9d9bf898e9540aed7ff21ba6a3187a35a9670165"
30
+ "gitHead": "ddc0db1905160264958fcff8d59420b74740a5ac"
31
31
  }