@navikt/ds-css 0.12.11 → 0.13.0-rc.32

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.
package/accordion.css CHANGED
@@ -4,11 +4,16 @@
4
4
  ---navds-semantic-color-component-background-light
5
5
  );
6
6
  --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
7
+ --navds-accordion-color-border: var(--navds-semantic-color-border-muted);
7
8
  --navds-accordion-color-border-hover: var(
8
9
  --navds-semantic-color-interaction-primary
9
10
  );
10
- --navds-accordion-color-border-focus: var(
11
- ---navds-semantic-color-component-background-light
11
+ --navds-accordion-color-text-open: var(--navds-semantic-color-text);
12
+ --navds-accordion-color-text-open-hover: var(
13
+ --navds-semantic-color-interaction-primary
14
+ );
15
+ --navds-accordion-color-background-open: var(
16
+ --navds-semantic-color-interaction-primary-hover-subtle
12
17
  );
13
18
  }
14
19
 
@@ -20,16 +25,53 @@
20
25
  background: var(--navds-accordion-color-background);
21
26
  }
22
27
 
28
+ .navds-accordion__header {
29
+ width: 100%;
30
+ display: flex;
31
+ justify-content: space-between;
32
+ align-items: center;
33
+ gap: var(--navds-spacing-4);
34
+ padding: var(--navds-spacing-4) var(--navds-spacing-3);
35
+ margin: 0;
36
+ text-align: left;
37
+ background: transparent;
38
+ cursor: pointer;
39
+ border: none;
40
+ border-bottom: 2px solid var(--navds-accordion-color-border);
41
+ }
42
+
23
43
  .navds-accordion__header:focus {
24
44
  outline: none;
25
45
  box-shadow: var(--navds-shadow-focus);
26
- border-color: var(--navds-accordion-color-border-focus);
27
46
  }
28
47
 
29
48
  .navds-accordion__header:hover {
30
49
  color: var(--navds-accordion-color-text-hover);
31
50
  border-color: var(--navds-accordion-color-border-hover);
32
- text-decoration: underline;
51
+ }
52
+
53
+ .navds-accordion__item--open > .navds-accordion__header {
54
+ background-color: var(--navds-accordion-color-background-open);
55
+ color: var(--navds-accordion-color-text-open);
56
+ border-color: transparent;
57
+ }
58
+
59
+ .navds-accordion__item--open > .navds-accordion__header:hover {
60
+ border-color: transparent;
61
+ color: var(--navds-accordion-color-text-open-hover);
62
+ }
63
+
64
+ .navds-accordion__content {
65
+ color: var(--navds-accordion-color-text);
66
+ padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
67
+ border-bottom: 2px solid var(--navds-accordion-color-border);
68
+ }
69
+
70
+ .navds-accordion__item--open
71
+ > .navds-accordion__header:hover
72
+ + *
73
+ .navds-accordion__content {
74
+ border-color: var(--navds-accordion-color-border-hover);
33
75
  }
34
76
 
35
77
  .navds-accordion__expand-icon {
@@ -42,26 +84,6 @@
42
84
  transform: rotateZ(180deg);
43
85
  }
44
86
 
45
- .navds-accordion__header {
46
- padding: var(--navds-spacing-4) var(--navds-spacing-3);
47
- background: transparent;
48
- text-align: left;
49
- border: none;
50
- width: 100%;
51
- margin: 0;
52
- cursor: pointer;
53
- display: flex;
54
- justify-content: space-between;
55
- align-items: center;
56
- border-bottom: 2px solid #a0a0a0;
57
- gap: var(--navds-spacing-4);
58
- }
59
-
60
- .navds-accordion__content {
61
- color: var(--navds-accordion-color-text);
62
- padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
63
- }
64
-
65
87
  .navds-accordion__expand-icon--filled {
66
88
  display: none;
67
89
  }
package/button.css CHANGED
@@ -99,6 +99,11 @@
99
99
  min-width: 32px;
100
100
  }
101
101
 
102
+ .navds-button--xsmall {
103
+ padding: 0.125rem 0.375rem;
104
+ min-width: 24px;
105
+ }
106
+
102
107
  .navds-button:focus {
103
108
  outline: none;
104
109
  box-shadow: var(--navds-shadow-focus);
@@ -115,7 +120,8 @@
115
120
  font-size: 1.5rem;
116
121
  }
117
122
 
118
- .navds-button--small svg {
123
+ .navds-button--small svg,
124
+ .navds-button--xsmall svg {
119
125
  font-size: 1.25rem;
120
126
  }
121
127