@navikt/ds-css 0.12.8 → 0.12.9

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 (3) hide show
  1. package/dist/index.css +53 -16
  2. package/form/switch.css +51 -14
  3. package/package.json +2 -2
package/form/switch.css CHANGED
@@ -1,14 +1,17 @@
1
1
  :root {
2
- --navds-switch-color-label: var(--navds-color-text-primary);
2
+ --navds-switch-color-label: var(--navds-semantic-color-text);
3
3
  --navds-switch-color-label-hover: var(
4
4
  --navds-semantic-color-interaction-primary
5
5
  );
6
6
  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
7
7
  --navds-switch-color-track-background-checked: var(
8
- --navds-semantic-color-interaction-primary
8
+ --navds-semantic-color-feedback-success-border
9
+ );
10
+ --navds-switch-color-track-background-hover: var(
11
+ --navds-global-color-gray-800
9
12
  );
10
13
  --navds-switch-color-track-background-hover-checked: var(
11
- --navds-semantic-color-interaction-primary-hover
14
+ --navds-semantic-color-feedback-success-icon
12
15
  );
13
16
  --navds-switch-color-track-shadow-inner-focus: var(
14
17
  --navds-semantic-color-component-background-light
@@ -16,8 +19,12 @@
16
19
  --navds-switch-color-thumb: var(
17
20
  --navds-semantic-color-component-background-light
18
21
  );
22
+ --navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
23
+ --navds-switch-color-thumb-icon-checked: var(
24
+ --navds-semantic-color-feedback-success-border
25
+ );
19
26
  --navds-switch-color-thumb-loader-checked: var(
20
- --navds-semantic-color-interaction-primary
27
+ --navds-semantic-color-feedback-success-border
21
28
  );
22
29
  }
23
30
 
@@ -27,6 +34,10 @@
27
34
  width: fit-content;
28
35
  }
29
36
 
37
+ .navds-switch--right {
38
+ width: auto;
39
+ }
40
+
30
41
  .navds-switch--small {
31
42
  position: relative;
32
43
  min-height: 32px;
@@ -61,11 +72,22 @@
61
72
  padding: 0.75rem 0 0.75rem 3.25rem;
62
73
  }
63
74
 
75
+ .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
76
+ padding: 0.75rem 3.25rem 0.75rem 0;
77
+ }
78
+
64
79
  .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
65
80
  padding: calc(var(--navds-spacing-2) - 2px) 0
66
81
  calc(var(--navds-spacing-2) - 2px) 3.25rem;
67
82
  }
68
83
 
84
+ .navds-switch--right.navds-switch--small
85
+ > .navds-switch__label-wrapper
86
+ > .navds-switch__content {
87
+ padding: calc(var(--navds-spacing-2) - 2px) 3.25rem
88
+ calc(var(--navds-spacing-2) - 2px) 0;
89
+ }
90
+
69
91
  .navds-switch--with-description,
70
92
  .navds-switch--small
71
93
  > .navds-switch__label-wrapper
@@ -73,7 +95,8 @@
73
95
  padding-bottom: 0;
74
96
  }
75
97
 
76
- .navds-switch__input:hover ~ .navds-switch__label-wrapper {
98
+ .navds-switch__input:hover ~ .navds-switch__label-wrapper,
99
+ .navds-switch__label-wrapper:hover {
77
100
  color: var(--navds-switch-color-label-hover);
78
101
  }
79
102
 
@@ -89,7 +112,7 @@
89
112
  position: absolute;
90
113
  top: var(--navds-spacing-3);
91
114
  left: 0;
92
- border-radius: var(--navds-spacing-4);
115
+ border-radius: 4px;
93
116
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
94
117
  }
95
118
 
@@ -97,10 +120,20 @@
97
120
  top: var(--navds-spacing-1);
98
121
  }
99
122
 
123
+ .navds-switch--right > .navds-switch__input,
124
+ .navds-switch--right > .navds-switch__track {
125
+ right: 0;
126
+ left: auto;
127
+ }
128
+
100
129
  .navds-switch__input:checked ~ .navds-switch__track {
101
130
  background-color: var(--navds-switch-color-track-background-checked);
102
131
  }
103
132
 
133
+ .navds-switch__input:hover ~ .navds-switch__track {
134
+ background-color: var(--navds-switch-color-track-background-hover);
135
+ }
136
+
104
137
  .navds-switch__input:hover:checked ~ .navds-switch__track {
105
138
  background-color: var(--navds-switch-color-track-background-hover-checked);
106
139
  }
@@ -121,7 +154,8 @@
121
154
  /* Thumb */
122
155
  .navds-switch__thumb {
123
156
  background-color: var(--navds-switch-color-thumb);
124
- border-radius: 50%;
157
+ color: var(--navds-switch-color-thumb-icon);
158
+ border-radius: 2.5px;
125
159
  width: 20px;
126
160
  height: 20px;
127
161
  position: absolute;
@@ -136,16 +170,19 @@
136
170
 
137
171
  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
138
172
  transform: translateX(20px);
173
+ color: var(--navds-switch-color-thumb-icon-checked);
139
174
  }
140
175
 
141
- .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
142
- transform: translateX(2px);
143
- }
176
+ @media (hover: hover) and (pointer: fine) {
177
+ .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
178
+ transform: translateX(2px);
179
+ }
144
180
 
145
- .navds-switch__input:checked:hover
146
- ~ .navds-switch__track
147
- > .navds-switch__thumb {
148
- transform: translateX(18px);
181
+ .navds-switch__input:checked:hover
182
+ ~ .navds-switch__track
183
+ > .navds-switch__thumb {
184
+ transform: translateX(18px);
185
+ }
149
186
  }
150
187
 
151
188
  .navds-switch__input:disabled:hover
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.12.8",
3
+ "version": "0.12.9",
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": "3db81c9b79f8be93cb23f996002d0cbb38ca2348"
30
+ "gitHead": "d9359d1a862061125816b15efa464a8da14639cb"
31
31
  }