sdga-ui 1.0.2 → 1.0.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 (119) hide show
  1. package/.editorconfig +23 -23
  2. package/.github/workflows/deploy.yml +57 -0
  3. package/.github/workflows/publish.yml +36 -33
  4. package/.prettierignore +73 -73
  5. package/.prettierrc +17 -17
  6. package/LICENSE +21 -21
  7. package/README.md +175 -167
  8. package/css/dga-ui.css +60 -30
  9. package/css/dga-ui.css.map +1 -1
  10. package/demo-angular/.editorconfig +17 -0
  11. package/demo-angular/.vscode/extensions.json +4 -0
  12. package/demo-angular/.vscode/launch.json +20 -0
  13. package/demo-angular/.vscode/tasks.json +42 -0
  14. package/demo-angular/README.md +59 -0
  15. package/demo-angular/angular.json +90 -0
  16. package/demo-angular/package-lock.json +10459 -0
  17. package/demo-angular/package.json +50 -0
  18. package/demo-angular/public/.nojekyll +0 -0
  19. package/demo-angular/public/favicon.ico +0 -0
  20. package/demo-angular/public/i18n/ar.json +239 -0
  21. package/demo-angular/public/i18n/en.json +239 -0
  22. package/demo-angular/src/app/app.config.ts +20 -0
  23. package/demo-angular/src/app/app.html +52 -0
  24. package/demo-angular/src/app/app.routes.ts +45 -0
  25. package/demo-angular/src/app/app.scss +430 -0
  26. package/demo-angular/src/app/app.spec.ts +23 -0
  27. package/demo-angular/src/app/app.ts +88 -0
  28. package/demo-angular/src/app/shared/code-example/code-example.component.html +30 -0
  29. package/demo-angular/src/app/shared/code-example/code-example.component.scss +183 -0
  30. package/demo-angular/src/app/shared/code-example/code-example.component.ts +78 -0
  31. package/demo-angular/src/app/views/alerts/alerts.component.html +155 -0
  32. package/demo-angular/src/app/views/alerts/alerts.component.scss +3 -0
  33. package/demo-angular/src/app/views/alerts/alerts.component.ts +134 -0
  34. package/demo-angular/src/app/views/bootstrap/bootstrap.component.html +14 -0
  35. package/demo-angular/src/app/views/bootstrap/bootstrap.component.scss +91 -0
  36. package/demo-angular/src/app/views/bootstrap/bootstrap.component.ts +23 -0
  37. package/demo-angular/src/app/views/buttons/buttons.component.html +289 -0
  38. package/demo-angular/src/app/views/buttons/buttons.component.scss +14 -0
  39. package/demo-angular/src/app/views/buttons/buttons.component.ts +155 -0
  40. package/demo-angular/src/app/views/cards/cards.component.html +156 -0
  41. package/demo-angular/src/app/views/cards/cards.component.html.backup +156 -0
  42. package/demo-angular/src/app/views/cards/cards.component.scss +11 -0
  43. package/demo-angular/src/app/views/cards/cards.component.ts +194 -0
  44. package/demo-angular/src/app/views/forms/forms.component.html +347 -0
  45. package/demo-angular/src/app/views/forms/forms.component.scss +3 -0
  46. package/demo-angular/src/app/views/forms/forms.component.ts +222 -0
  47. package/demo-angular/src/app/views/home/home.component.html +38 -0
  48. package/demo-angular/src/app/views/home/home.component.scss +35 -0
  49. package/demo-angular/src/app/views/home/home.component.ts +12 -0
  50. package/demo-angular/src/app/views/links/links.component.html +140 -0
  51. package/demo-angular/src/app/views/links/links.component.scss +60 -0
  52. package/demo-angular/src/app/views/links/links.component.ts +123 -0
  53. package/demo-angular/src/app/views/tables/tables.component.html +289 -0
  54. package/demo-angular/src/app/views/tables/tables.component.scss +3 -0
  55. package/demo-angular/src/app/views/tables/tables.component.ts +278 -0
  56. package/demo-angular/src/app/views/toasts/toasts.component.html +201 -0
  57. package/demo-angular/src/app/views/toasts/toasts.component.scss +0 -0
  58. package/demo-angular/src/app/views/toasts/toasts.component.ts +182 -0
  59. package/demo-angular/src/index.html +14 -0
  60. package/demo-angular/src/main.ts +6 -0
  61. package/demo-angular/src/styles.scss +4 -0
  62. package/demo-angular/tsconfig.app.json +15 -0
  63. package/demo-angular/tsconfig.json +33 -0
  64. package/demo-angular/tsconfig.spec.json +15 -0
  65. package/fonts/IBM_Plex_Sans_Arabic/OFL.txt +93 -93
  66. package/package.json +50 -47
  67. package/theme/_fonts.scss +58 -58
  68. package/theme/_functions.scss +11 -11
  69. package/theme/_variables.scss +50 -50
  70. package/theme/components/_accordion.scss +35 -35
  71. package/theme/components/_alerts.scss +11 -11
  72. package/theme/components/_badges.scss +8 -8
  73. package/theme/components/_breadcrumb.scss +13 -13
  74. package/theme/components/_buttons.scss +270 -270
  75. package/theme/components/_cards.scss +21 -21
  76. package/theme/components/_carousel.scss +33 -33
  77. package/theme/components/_content.scss +211 -211
  78. package/theme/components/_dropdowns.scss +45 -45
  79. package/theme/components/_forms-check.scss +124 -124
  80. package/theme/components/_forms-floating.scss +17 -17
  81. package/theme/components/_forms-inputs.scss +70 -70
  82. package/theme/components/_forms-range.scss +26 -26
  83. package/theme/components/_forms-select.scss +47 -47
  84. package/theme/components/_forms-switch.scss +63 -63
  85. package/theme/components/_forms-validation.scss +16 -16
  86. package/theme/components/_forms.scss +14 -14
  87. package/theme/components/_list-group.scss +26 -26
  88. package/theme/components/_modals.scss +42 -42
  89. package/theme/components/_navbar.scss +40 -40
  90. package/theme/components/_navigation.scss +151 -151
  91. package/theme/components/_offcanvas.scss +15 -15
  92. package/theme/components/_overlays.scss +112 -112
  93. package/theme/components/_pagination.scss +39 -39
  94. package/theme/components/_popovers.scss +26 -26
  95. package/theme/components/_progress.scss +11 -11
  96. package/theme/components/_spinners.scss +11 -11
  97. package/theme/components/_tables.scss +47 -47
  98. package/theme/components/_toasts.scss +16 -16
  99. package/theme/components/_tooltips.scss +15 -15
  100. package/theme/config/_base.scss +111 -111
  101. package/theme/config/_colors.scss +303 -303
  102. package/theme/config/_effects.scss +227 -227
  103. package/theme/config/_radius.scss +78 -78
  104. package/theme/config/_spacing.scss +155 -155
  105. package/theme/config/_typography.scss +118 -118
  106. package/theme/customizations/_alerts.scss +242 -242
  107. package/theme/customizations/_badges.scss +15 -15
  108. package/theme/customizations/_buttons.scss +209 -209
  109. package/theme/customizations/_cards.scss +117 -117
  110. package/theme/customizations/_forms-check.scss +278 -278
  111. package/theme/customizations/_forms-inputs.scss +9 -9
  112. package/theme/customizations/_forms-switch.scss +91 -91
  113. package/theme/customizations/_forms.scss +5 -5
  114. package/theme/customizations/_global.scss +25 -25
  115. package/theme/customizations/_links.scss +94 -46
  116. package/theme/customizations/_tables.scss +67 -67
  117. package/theme/customizations/_toasts.scss +221 -221
  118. package/theme/customizations/_utilities.scss +138 -138
  119. package/theme/dga-ui.scss +28 -28
package/theme/customizations/_forms-check.scss CHANGED
@@ -1,279 +1,279 @@
1
- // Form Check Customizations - Checkboxes & Radios
2
- // Excludes switches (use _forms-switch.scss for switches)
3
-
4
- // ============================================
5
- // BASE WRAPPER
6
- // ============================================
7
-
8
- .form-check {
9
- display: flex;
10
- align-items: center;
11
- gap: 1rem;
12
- }
13
-
14
- // ============================================
15
- // RIPPLE EFFECT APPLICATION
16
- // ============================================
17
-
18
- // Force enable ripple on specific elements
19
- .form-check-input.ripple {
20
- @include ripple-effect();
21
- }
22
-
23
- .form-check-neutral .form-check-input.ripple {
24
- &:checked,
25
- &:indeterminate {
26
- color: $neutral;
27
- }
28
- }
29
-
30
- // ============================================
31
- // PRIMARY VARIANT (DEFAULT)
32
- // ============================================
33
-
34
- // Target: Checkboxes and radios (excluding switches and neutral variant)
35
- .form-check-input:not([type="checkbox"][role="switch"]):not(.form-check-neutral .form-check-input) {
36
-
37
- // Focus state
38
- &:focus {
39
- border-color: $form-check-input-focus-border;
40
- }
41
-
42
- // Unchecked state interactions
43
- &:not(:checked):not(:indeterminate):not(:disabled):not([readonly]) {
44
- &:hover {
45
- border-color: $form-check-input-unchecked-hover-border;
46
- background-color: $form-check-input-unchecked-hover-bg;
47
- }
48
-
49
- &:active {
50
- border-color: $form-check-input-unchecked-active-border;
51
- background-color: $form-check-input-unchecked-active-bg;
52
- }
53
- }
54
-
55
- // Checked state interactions
56
- &:checked:not(:disabled):not([readonly]) {
57
- &:hover {
58
- border-color: $form-check-input-checked-hover-border;
59
- background-color: $form-check-input-checked-hover-bg;
60
- }
61
-
62
- &:active {
63
- border-color: $form-check-input-checked-active-border;
64
- background-color: $form-check-input-checked-active-bg;
65
- }
66
- }
67
-
68
- // Indeterminate state interactions
69
- &:indeterminate:not(:disabled):not([readonly]) {
70
- &:hover {
71
- border-color: $form-check-input-indeterminate-hover-border;
72
- background-color: $form-check-input-indeterminate-hover-bg;
73
- }
74
-
75
- &:active {
76
- border-color: $form-check-input-indeterminate-active-border;
77
- background-color: $form-check-input-indeterminate-active-bg;
78
- }
79
- }
80
-
81
- // Disabled state
82
- &:disabled {
83
- background-color: $form-check-input-disabled-bg;
84
- border-color: $form-check-input-disabled-border-color;
85
- cursor: not-allowed;
86
-
87
- &:checked {
88
- background-color: $form-check-input-disabled-checked-bg;
89
- border-color: $form-check-input-disabled-checked-bg;
90
-
91
- &[type="checkbox"] {
92
- $escaped-color: svg-encode-color($form-check-input-disabled-checked-color);
93
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
94
- }
95
-
96
- &[type="radio"] {
97
- $escaped-color: svg-encode-color($form-check-input-disabled-checked-color);
98
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='none' stroke='#{$escaped-color}'/></svg>");
99
- }
100
- }
101
-
102
- &:indeterminate[type="checkbox"] {
103
- background-color: $form-check-input-disabled-indeterminate-bg;
104
- border-color: $form-check-input-disabled-indeterminate-bg;
105
- $escaped-color: svg-encode-color($form-check-input-disabled-indeterminate-color);
106
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
107
- }
108
-
109
- ~ .form-check-label {
110
- cursor: not-allowed;
111
- opacity: $form-check-label-disabled-opacity;
112
- }
113
- }
114
-
115
- // Readonly state
116
- &[readonly] {
117
- background-color: $form-check-input-readonly-bg;
118
- border-color: $form-check-input-readonly-border-color;
119
- cursor: $form-check-input-readonly-cursor;
120
- pointer-events: none;
121
-
122
- &:checked {
123
- background-color: $form-check-input-readonly-checked-bg;
124
-
125
- &[type="checkbox"] {
126
- $escaped-color: svg-encode-color($form-check-input-readonly-checked-color);
127
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
128
- }
129
-
130
- &[type="radio"] {
131
- background-color: $form-check-radio-readonly-checked-bg;
132
- border-color: $form-check-radio-readonly-checked-border;
133
- $escaped-color: svg-encode-color($form-check-radio-readonly-checked-color);
134
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='none' stroke='#{$escaped-color}'/></svg>");
135
- }
136
- }
137
-
138
- &:indeterminate[type="checkbox"] {
139
- background-color: $form-check-input-readonly-indeterminate-bg;
140
- border-color: $form-check-input-readonly-indeterminate-bg;
141
- $escaped-color: svg-encode-color($form-check-input-readonly-indeterminate-color);
142
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
143
- }
144
-
145
- ~ .form-check-label {
146
- cursor: $form-check-input-readonly-cursor;
147
- pointer-events: none;
148
- }
149
- }
150
- }
151
-
152
- // ============================================
153
- // NEUTRAL VARIANT
154
- // ============================================
155
-
156
- .form-check-neutral {
157
- .form-check-input:not([type="checkbox"][role="switch"]) {
158
-
159
- // Base checked states
160
- &:checked {
161
- background-color: $form-check-neutral-checked-bg-color;
162
- border-color: $form-check-neutral-checked-bg-color;
163
- }
164
-
165
- &:indeterminate {
166
- background-color: $form-check-neutral-indeterminate-bg-color;
167
- border-color: $form-check-neutral-indeterminate-bg-color;
168
- }
169
-
170
- // Focus state
171
- &:focus {
172
- border-color: $form-check-neutral-checked-bg-color;
173
- }
174
-
175
- // Unchecked state interactions
176
- &:not(:checked):not(:indeterminate):not(:disabled):not([readonly]) {
177
- &:hover {
178
- border-color: $form-check-neutral-unchecked-hover-border;
179
- background-color: $form-check-neutral-unchecked-hover-bg;
180
- }
181
-
182
- &:active {
183
- border-color: $form-check-neutral-unchecked-active-border;
184
- background-color: $form-check-neutral-unchecked-active-bg;
185
- }
186
- }
187
-
188
- // Checked state interactions
189
- &:checked:not(:disabled):not([readonly]) {
190
- &:hover {
191
- border-color: $form-check-neutral-checked-hover-border;
192
- background-color: $form-check-neutral-checked-hover-bg;
193
- }
194
-
195
- &:active {
196
- border-color: $form-check-neutral-checked-active-border;
197
- background-color: $form-check-neutral-checked-active-bg;
198
- }
199
- }
200
-
201
- // Indeterminate state interactions
202
- &:indeterminate:not(:disabled):not([readonly]) {
203
- &:hover {
204
- border-color: $form-check-neutral-indeterminate-hover-border;
205
- background-color: $form-check-neutral-indeterminate-hover-bg;
206
- }
207
-
208
- &:active {
209
- border-color: $form-check-neutral-indeterminate-active-border;
210
- background-color: $form-check-neutral-indeterminate-active-bg;
211
- }
212
- }
213
- }
214
- }
215
-
216
- // ============================================
217
- // SIZE VARIANTS
218
- // ============================================
219
-
220
- // Size on wrapper (affects input and label)
221
- .form-check {
222
- &.form-check-md {
223
- .form-check-input {
224
- width: $form-check-input-width-md;
225
- height: $form-check-input-width-md;
226
- }
227
- }
228
-
229
- &.form-check-sm {
230
- .form-check-input {
231
- width: $form-check-input-width-sm;
232
- height: $form-check-input-width-sm;
233
- }
234
-
235
- .form-check-label {
236
- font-size: .875rem;
237
- }
238
- }
239
-
240
- &.form-check-xs {
241
- .form-check-input {
242
- width: $form-check-input-width-xs;
243
- height: $form-check-input-width-xs;
244
- }
245
-
246
- .form-check-label {
247
- font-size: .75rem;
248
- }
249
- }
250
-
251
- // Variant + size combinations
252
- &.form-check-neutral {
253
- &.form-check-sm .form-check-input {
254
- width: $form-check-input-width-sm;
255
- height: $form-check-input-width-sm;
256
- }
257
-
258
- &.form-check-xs .form-check-input {
259
- width: $form-check-input-width-xs;
260
- height: $form-check-input-width-xs;
261
- }
262
- }
263
- }
264
-
265
- // Size directly on input (standalone usage without wrapper)
266
- .form-check-input-md {
267
- width: $form-check-input-width-md;
268
- height: $form-check-input-width-md;
269
- }
270
-
271
- .form-check-input-sm {
272
- width: $form-check-input-width-sm;
273
- height: $form-check-input-width-sm;
274
- }
275
-
276
- .form-check-input-xs {
277
- width: $form-check-input-width-xs;
278
- height: $form-check-input-width-xs;
1
+ // Form Check Customizations - Checkboxes & Radios
2
+ // Excludes switches (use _forms-switch.scss for switches)
3
+
4
+ // ============================================
5
+ // BASE WRAPPER
6
+ // ============================================
7
+
8
+ .form-check {
9
+ display: flex;
10
+ align-items: center;
11
+ gap: 1rem;
12
+ }
13
+
14
+ // ============================================
15
+ // RIPPLE EFFECT APPLICATION
16
+ // ============================================
17
+
18
+ // Force enable ripple on specific elements
19
+ .form-check-input.ripple {
20
+ @include ripple-effect();
21
+ }
22
+
23
+ .form-check-neutral .form-check-input.ripple {
24
+ &:checked,
25
+ &:indeterminate {
26
+ color: $neutral;
27
+ }
28
+ }
29
+
30
+ // ============================================
31
+ // PRIMARY VARIANT (DEFAULT)
32
+ // ============================================
33
+
34
+ // Target: Checkboxes and radios (excluding switches and neutral variant)
35
+ .form-check-input:not([type="checkbox"][role="switch"]):not(.form-check-neutral .form-check-input) {
36
+
37
+ // Focus state
38
+ &:focus {
39
+ border-color: $form-check-input-focus-border;
40
+ }
41
+
42
+ // Unchecked state interactions
43
+ &:not(:checked):not(:indeterminate):not(:disabled):not([readonly]) {
44
+ &:hover {
45
+ border-color: $form-check-input-unchecked-hover-border;
46
+ background-color: $form-check-input-unchecked-hover-bg;
47
+ }
48
+
49
+ &:active {
50
+ border-color: $form-check-input-unchecked-active-border;
51
+ background-color: $form-check-input-unchecked-active-bg;
52
+ }
53
+ }
54
+
55
+ // Checked state interactions
56
+ &:checked:not(:disabled):not([readonly]) {
57
+ &:hover {
58
+ border-color: $form-check-input-checked-hover-border;
59
+ background-color: $form-check-input-checked-hover-bg;
60
+ }
61
+
62
+ &:active {
63
+ border-color: $form-check-input-checked-active-border;
64
+ background-color: $form-check-input-checked-active-bg;
65
+ }
66
+ }
67
+
68
+ // Indeterminate state interactions
69
+ &:indeterminate:not(:disabled):not([readonly]) {
70
+ &:hover {
71
+ border-color: $form-check-input-indeterminate-hover-border;
72
+ background-color: $form-check-input-indeterminate-hover-bg;
73
+ }
74
+
75
+ &:active {
76
+ border-color: $form-check-input-indeterminate-active-border;
77
+ background-color: $form-check-input-indeterminate-active-bg;
78
+ }
79
+ }
80
+
81
+ // Disabled state
82
+ &:disabled {
83
+ background-color: $form-check-input-disabled-bg;
84
+ border-color: $form-check-input-disabled-border-color;
85
+ cursor: not-allowed;
86
+
87
+ &:checked {
88
+ background-color: $form-check-input-disabled-checked-bg;
89
+ border-color: $form-check-input-disabled-checked-bg;
90
+
91
+ &[type="checkbox"] {
92
+ $escaped-color: svg-encode-color($form-check-input-disabled-checked-color);
93
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
94
+ }
95
+
96
+ &[type="radio"] {
97
+ $escaped-color: svg-encode-color($form-check-input-disabled-checked-color);
98
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='none' stroke='#{$escaped-color}'/></svg>");
99
+ }
100
+ }
101
+
102
+ &:indeterminate[type="checkbox"] {
103
+ background-color: $form-check-input-disabled-indeterminate-bg;
104
+ border-color: $form-check-input-disabled-indeterminate-bg;
105
+ $escaped-color: svg-encode-color($form-check-input-disabled-indeterminate-color);
106
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
107
+ }
108
+
109
+ ~ .form-check-label {
110
+ cursor: not-allowed;
111
+ opacity: $form-check-label-disabled-opacity;
112
+ }
113
+ }
114
+
115
+ // Readonly state
116
+ &[readonly] {
117
+ background-color: $form-check-input-readonly-bg;
118
+ border-color: $form-check-input-readonly-border-color;
119
+ cursor: $form-check-input-readonly-cursor;
120
+ pointer-events: none;
121
+
122
+ &:checked {
123
+ background-color: $form-check-input-readonly-checked-bg;
124
+
125
+ &[type="checkbox"] {
126
+ $escaped-color: svg-encode-color($form-check-input-readonly-checked-color);
127
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
128
+ }
129
+
130
+ &[type="radio"] {
131
+ background-color: $form-check-radio-readonly-checked-bg;
132
+ border-color: $form-check-radio-readonly-checked-border;
133
+ $escaped-color: svg-encode-color($form-check-radio-readonly-checked-color);
134
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='none' stroke='#{$escaped-color}'/></svg>");
135
+ }
136
+ }
137
+
138
+ &:indeterminate[type="checkbox"] {
139
+ background-color: $form-check-input-readonly-indeterminate-bg;
140
+ border-color: $form-check-input-readonly-indeterminate-bg;
141
+ $escaped-color: svg-encode-color($form-check-input-readonly-indeterminate-color);
142
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
143
+ }
144
+
145
+ ~ .form-check-label {
146
+ cursor: $form-check-input-readonly-cursor;
147
+ pointer-events: none;
148
+ }
149
+ }
150
+ }
151
+
152
+ // ============================================
153
+ // NEUTRAL VARIANT
154
+ // ============================================
155
+
156
+ .form-check-neutral {
157
+ .form-check-input:not([type="checkbox"][role="switch"]) {
158
+
159
+ // Base checked states
160
+ &:checked {
161
+ background-color: $form-check-neutral-checked-bg-color;
162
+ border-color: $form-check-neutral-checked-bg-color;
163
+ }
164
+
165
+ &:indeterminate {
166
+ background-color: $form-check-neutral-indeterminate-bg-color;
167
+ border-color: $form-check-neutral-indeterminate-bg-color;
168
+ }
169
+
170
+ // Focus state
171
+ &:focus {
172
+ border-color: $form-check-neutral-checked-bg-color;
173
+ }
174
+
175
+ // Unchecked state interactions
176
+ &:not(:checked):not(:indeterminate):not(:disabled):not([readonly]) {
177
+ &:hover {
178
+ border-color: $form-check-neutral-unchecked-hover-border;
179
+ background-color: $form-check-neutral-unchecked-hover-bg;
180
+ }
181
+
182
+ &:active {
183
+ border-color: $form-check-neutral-unchecked-active-border;
184
+ background-color: $form-check-neutral-unchecked-active-bg;
185
+ }
186
+ }
187
+
188
+ // Checked state interactions
189
+ &:checked:not(:disabled):not([readonly]) {
190
+ &:hover {
191
+ border-color: $form-check-neutral-checked-hover-border;
192
+ background-color: $form-check-neutral-checked-hover-bg;
193
+ }
194
+
195
+ &:active {
196
+ border-color: $form-check-neutral-checked-active-border;
197
+ background-color: $form-check-neutral-checked-active-bg;
198
+ }
199
+ }
200
+
201
+ // Indeterminate state interactions
202
+ &:indeterminate:not(:disabled):not([readonly]) {
203
+ &:hover {
204
+ border-color: $form-check-neutral-indeterminate-hover-border;
205
+ background-color: $form-check-neutral-indeterminate-hover-bg;
206
+ }
207
+
208
+ &:active {
209
+ border-color: $form-check-neutral-indeterminate-active-border;
210
+ background-color: $form-check-neutral-indeterminate-active-bg;
211
+ }
212
+ }
213
+ }
214
+ }
215
+
216
+ // ============================================
217
+ // SIZE VARIANTS
218
+ // ============================================
219
+
220
+ // Size on wrapper (affects input and label)
221
+ .form-check {
222
+ &.form-check-md {
223
+ .form-check-input {
224
+ width: $form-check-input-width-md;
225
+ height: $form-check-input-width-md;
226
+ }
227
+ }
228
+
229
+ &.form-check-sm {
230
+ .form-check-input {
231
+ width: $form-check-input-width-sm;
232
+ height: $form-check-input-width-sm;
233
+ }
234
+
235
+ .form-check-label {
236
+ font-size: .875rem;
237
+ }
238
+ }
239
+
240
+ &.form-check-xs {
241
+ .form-check-input {
242
+ width: $form-check-input-width-xs;
243
+ height: $form-check-input-width-xs;
244
+ }
245
+
246
+ .form-check-label {
247
+ font-size: .75rem;
248
+ }
249
+ }
250
+
251
+ // Variant + size combinations
252
+ &.form-check-neutral {
253
+ &.form-check-sm .form-check-input {
254
+ width: $form-check-input-width-sm;
255
+ height: $form-check-input-width-sm;
256
+ }
257
+
258
+ &.form-check-xs .form-check-input {
259
+ width: $form-check-input-width-xs;
260
+ height: $form-check-input-width-xs;
261
+ }
262
+ }
263
+ }
264
+
265
+ // Size directly on input (standalone usage without wrapper)
266
+ .form-check-input-md {
267
+ width: $form-check-input-width-md;
268
+ height: $form-check-input-width-md;
269
+ }
270
+
271
+ .form-check-input-sm {
272
+ width: $form-check-input-width-sm;
273
+ height: $form-check-input-width-sm;
274
+ }
275
+
276
+ .form-check-input-xs {
277
+ width: $form-check-input-width-xs;
278
+ height: $form-check-input-width-xs;
279
279
  }
package/theme/customizations/_forms-inputs.scss CHANGED
@@ -1,9 +1,9 @@
1
- // Form Input Customizations - Text Controls
2
-
3
- .form-control-lg {
4
- min-height: calc(1.5em + 1.25rem + 2px);
5
- }
6
-
7
- .form-control-sm {
8
- min-height: calc(1.5em + 0.75rem + 2px);
9
- }
1
+ // Form Input Customizations - Text Controls
2
+
3
+ .form-control-lg {
4
+ min-height: calc(1.5em + 1.25rem + 2px);
5
+ }
6
+
7
+ .form-control-sm {
8
+ min-height: calc(1.5em + 0.75rem + 2px);
9
+ }