@navikt/ds-css 0.11.1 → 0.11.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 (16) hide show
  1. package/baseline/baseline.css +1 -1
  2. package/dist/index.css +176 -306
  3. package/form/error-message.css +6 -1
  4. package/form/fieldset.css +8 -3
  5. package/form/form.css +1 -6
  6. package/form/index.css +1 -4
  7. package/form/radio-checkbox.css +168 -0
  8. package/form/search-field.css +4 -0
  9. package/form/select.css +10 -9
  10. package/form/text-field.css +22 -12
  11. package/form/textarea.css +13 -7
  12. package/package.json +3 -3
  13. package/form/checkbox-group.css +0 -13
  14. package/form/checkbox.css +0 -146
  15. package/form/radio-group.css +0 -13
  16. package/form/radio.css +0 -150
package/form/radio.css DELETED
@@ -1,150 +0,0 @@
1
- :root {
2
- --navds-radio-color-description: var(--navds-color-gray-80);
3
- --navds-radio-color-background: var(--navds-color-white);
4
- --navds-radio-color-border: var(--navds-color-gray-60);
5
- --navds-radio-color-label-hover: var(--navds-color-blue-50);
6
- --navds-radio-color-border-hover: var(--navds-color-blue-50);
7
- --navds-radio-color-background-hover: var(--navds-color-blue-10);
8
- --navds-radio-color-border-checked: var(--navds-color-blue-50);
9
- --navds-radio-color-shadow-checked: var(--navds-color-blue-50);
10
- --navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
11
- --navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
12
- --navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
13
- --navds-radio-color-shadow-error: var(--navds-color-red-50);
14
- --navds-radio-color-border-error: var(--navds-color-red-50);
15
-
16
- /* Disabled */
17
- --navds-radio-color-background-disabled: var(--navds-color-gray-10);
18
- --navds-radio-color-border-disabled: var(--navds-color-gray-60);
19
- --navds-radio-color-label-disabled: var(--navds-color-gray-40);
20
- --navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
21
- --navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
22
- --navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
23
- }
24
-
25
- .navds-radio {
26
- position: relative;
27
- padding: var(--navds-spacing-3) 0;
28
- }
29
-
30
- .navds-radio--with-description .navds-error-message {
31
- margin-top: 0;
32
- }
33
-
34
- .navds-radio .navds-error-message {
35
- margin-top: var(--navds-spacing-3);
36
- }
37
-
38
- .navds-radio__input {
39
- cursor: pointer;
40
- position: absolute;
41
- z-index: 1;
42
- width: 48px;
43
- height: 48px;
44
- left: -12px;
45
- margin: 0;
46
- opacity: 0;
47
- top: 0;
48
- }
49
-
50
- .navds-radio__label {
51
- display: flex;
52
- width: fit-content;
53
- gap: 12px;
54
- min-width: 48px;
55
- cursor: pointer;
56
- }
57
-
58
- .navds-radio__description {
59
- padding-left: calc(48px - 12px);
60
- color: var(--navds-radio-color-description);
61
- }
62
-
63
- .navds-radio--with-description {
64
- padding-bottom: 0;
65
- }
66
-
67
- .navds-radio--with-error-message {
68
- padding-bottom: var(--navds-spacing-2);
69
- }
70
-
71
- .navds-radio__label::before {
72
- content: "";
73
- background-color: var(--navds-radio-color-background);
74
- border: 1px solid var(--navds-radio-color-border);
75
- width: 1.5rem;
76
- height: 1.5rem;
77
- flex-shrink: 0;
78
- border-radius: 50%;
79
- }
80
-
81
- .navds-radio--small {
82
- padding: var(--navds-spacing-1) 0;
83
- }
84
-
85
- .navds-radio--small > .navds-radio__input {
86
- width: 24px;
87
- height: 24px;
88
- top: 2px;
89
- left: 0;
90
- }
91
-
92
- .navds-radio--small > .navds-radio__label::before {
93
- margin-top: -2px;
94
- margin-bottom: -2px;
95
- }
96
-
97
- .navds-radio__input:hover + .navds-radio__label {
98
- color: var(--navds-radio-color-label-hover);
99
- }
100
-
101
- .navds-radio__input:hover + .navds-radio__label::before {
102
- border-color: var(--navds-radio-color-border-hover);
103
- background-color: var(--navds-radio-color-background-hover);
104
- }
105
-
106
- .navds-radio__input:focus + .navds-radio__label::before {
107
- box-shadow: var(--navds-shadow-focus);
108
- }
109
-
110
- .navds-radio__input:checked + .navds-radio__label::before {
111
- border: 2px solid var(--navds-radio-color-border-checked);
112
- box-shadow: 0 0 0 3px #fff inset,
113
- 0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
114
- }
115
-
116
- .navds-radio__input:checked:focus + .navds-radio__label::before {
117
- transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
118
- box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
119
- 0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
120
- 0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
121
- }
122
-
123
- .navds-radio--error
124
- > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
125
- + .navds-radio__label::before {
126
- box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
127
- border-color: var(--navds-radio-color-border-error);
128
- }
129
-
130
- .navds-radio--small .navds-error-message {
131
- margin-top: 4px;
132
- }
133
-
134
- .navds-radio__input:disabled,
135
- .navds-radio__input:disabled + .navds-radio__label {
136
- color: var(--navds-radio-color-label-disabled);
137
- cursor: not-allowed;
138
- }
139
-
140
- .navds-radio__input:disabled + .navds-radio__label::before {
141
- background-color: var(--navds-radio-color-background-disabled);
142
- border-color: var(--navds-radio-color-border-disabled);
143
- }
144
-
145
- .navds-radio__input:disabled:checked + .navds-radio__label::before {
146
- background-color: var(--navds-radio-color-background-disabled-checked);
147
- border-color: var(--navds-radio-color-border-disabled-checked);
148
- box-shadow: 0 0 0 3px #fff inset,
149
- 0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
150
- }