@abstraks-dev/ui-library 1.1.7 → 1.1.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 (72) hide show
  1. package/dist/components/Error.js +1 -1
  2. package/dist/components/Form.js +1 -1
  3. package/dist/components/Prompt.js +1 -1
  4. package/dist/styles/anchor.css +147 -0
  5. package/dist/styles/anchor.css.map +1 -0
  6. package/dist/styles/animation-accessibility.css +90 -0
  7. package/dist/styles/animation-accessibility.css.map +1 -0
  8. package/dist/styles/animation-toggle.css +223 -0
  9. package/dist/styles/animation-toggle.css.map +1 -0
  10. package/dist/styles/animation.css +3772 -0
  11. package/dist/styles/animation.css.map +1 -0
  12. package/dist/styles/avatar.css +349 -0
  13. package/dist/styles/avatar.css.map +1 -0
  14. package/dist/styles/button.css +491 -0
  15. package/dist/styles/button.css.map +1 -0
  16. package/dist/styles/card.css +306 -0
  17. package/dist/styles/card.css.map +1 -0
  18. package/dist/styles/checkbox.css +233 -0
  19. package/dist/styles/checkbox.css.map +1 -0
  20. package/dist/styles/crud.css +525 -0
  21. package/dist/styles/crud.css.map +1 -0
  22. package/dist/styles/dragAndDrop.css +400 -0
  23. package/dist/styles/dragAndDrop.css.map +1 -0
  24. package/dist/styles/error.css +311 -0
  25. package/dist/styles/error.css.map +1 -0
  26. package/dist/styles/footer.css +165 -0
  27. package/dist/styles/footer.css.map +1 -0
  28. package/dist/styles/form.css +492 -0
  29. package/dist/styles/form.css.map +1 -0
  30. package/dist/styles/grid.css +28 -0
  31. package/dist/styles/grid.css.map +1 -0
  32. package/dist/styles/header.css +345 -0
  33. package/dist/styles/header.css.map +1 -0
  34. package/dist/styles/heading.css +242 -0
  35. package/dist/styles/heading.css.map +1 -0
  36. package/dist/styles/hero.css +293 -0
  37. package/dist/styles/hero.css.map +1 -0
  38. package/dist/styles/htmlElements.css +129 -0
  39. package/dist/styles/htmlElements.css.map +1 -0
  40. package/dist/styles/image.css +10 -0
  41. package/dist/styles/image.css.map +1 -0
  42. package/dist/styles/label.css +407 -0
  43. package/dist/styles/label.css.map +1 -0
  44. package/dist/styles/list-item.css +6 -0
  45. package/dist/styles/list-item.css.map +1 -0
  46. package/dist/styles/loader.css +419 -0
  47. package/dist/styles/loader.css.map +1 -0
  48. package/dist/styles/logo.css +19 -0
  49. package/dist/styles/logo.css.map +1 -0
  50. package/dist/styles/menu-hover.css +142 -0
  51. package/dist/styles/menu-hover.css.map +1 -0
  52. package/dist/styles/paragraph.css +200 -0
  53. package/dist/styles/paragraph.css.map +1 -0
  54. package/dist/styles/prompt.css +168 -0
  55. package/dist/styles/prompt.css.map +1 -0
  56. package/dist/styles/radio.css +259 -0
  57. package/dist/styles/radio.css.map +1 -0
  58. package/dist/styles/select.css +403 -0
  59. package/dist/styles/select.css.map +1 -0
  60. package/dist/styles/side-menu.css +413 -0
  61. package/dist/styles/side-menu.css.map +1 -0
  62. package/dist/styles/tabs.css +562 -0
  63. package/dist/styles/tabs.css.map +1 -0
  64. package/dist/styles/text-area.css +451 -0
  65. package/dist/styles/text-area.css.map +1 -0
  66. package/dist/styles/text-input.css +243 -0
  67. package/dist/styles/text-input.css.map +1 -0
  68. package/dist/styles/toggle.css +3 -0
  69. package/dist/styles/toggle.css.map +1 -0
  70. package/dist/styles/unordered-list.css +9 -0
  71. package/dist/styles/unordered-list.css.map +1 -0
  72. package/package.json +3 -2
@@ -0,0 +1,165 @@
1
+ :root {
2
+ --small: (min-width: 607px);
3
+ --medium: (min-width: 768px);
4
+ --large: (min-width: 992px);
5
+ --xlarge: (min-width: 1200px);
6
+ --color-primary: #009900;
7
+ --color-primary-hover: rgba(1, 116, 1, 0.9);
8
+ --color-secondary: #7086f1;
9
+ --color-secondary-hover: rgba(83, 100, 185, 0.9);
10
+ --color-warning: #ff9800;
11
+ --color-warning-hover: rgba(214, 130, 4, 0.9);
12
+ --color-success: #57f500;
13
+ --color-success-hover: rgba(74, 207, 2, 0.9);
14
+ --color-error: #f44336;
15
+ --color-error-hover: rgba(216, 58, 47, 0.9);
16
+ --color-shade: rgba(0, 0, 0, 0.5);
17
+ --color-tint: rgba(250, 250, 250, 0.5);
18
+ --color-white: #fff;
19
+ --color-black: #000;
20
+ --color-font-body: #333;
21
+ --color-black-alpha: rgba(0, 0, 0, 0.6);
22
+ --focus-color: #4d90fe;
23
+ --shadow-primary: rgba(0, 153, 0, 0.2);
24
+ --shadow-primary-hover: rgba(0, 153, 0, 0.3);
25
+ --shadow-primary-strong: rgba(0, 153, 0, 0.4);
26
+ --shadow-primary-strongest: rgba(0, 153, 0, 0.5);
27
+ --shadow-secondary: rgba(112, 134, 241, 0.2);
28
+ --shadow-secondary-hover: rgba(112, 134, 241, 0.3);
29
+ --shadow-secondary-strong: rgba(112, 134, 241, 0.4);
30
+ --shadow-secondary-strongest: rgba(112, 134, 241, 0.5);
31
+ --shadow-success: rgba(87, 245, 0, 0.2);
32
+ --shadow-success-hover: rgba(87, 245, 0, 0.3);
33
+ --shadow-success-strong: rgba(87, 245, 0, 0.4);
34
+ --shadow-success-strongest: rgba(87, 245, 0, 0.5);
35
+ --shadow-error: rgba(244, 67, 54, 0.2);
36
+ --shadow-error-hover: rgba(244, 67, 54, 0.3);
37
+ --shadow-error-strong: rgba(244, 67, 54, 0.4);
38
+ --shadow-error-strongest: rgba(244, 67, 54, 0.5);
39
+ --shadow-warning: rgba(255, 152, 0, 0.2);
40
+ --shadow-warning-hover: rgba(255, 152, 0, 0.3);
41
+ --shadow-warning-strong: rgba(255, 152, 0, 0.4);
42
+ --shadow-warning-strongest: rgba(255, 152, 0, 0.5);
43
+ --border-radius-xs: 4px;
44
+ --border-radius-sm: 4px;
45
+ --border-radius-md: 6px;
46
+ --border-radius-lg: 8px;
47
+ --border-radius-xl: 10px;
48
+ --z-index-base: 1;
49
+ --z-index-low: 10;
50
+ --z-index-dropdown: 100;
51
+ --z-index-sticky: 200;
52
+ --z-index-popover: 300;
53
+ --z-index-tooltip: 400;
54
+ --z-index-overlay: 1000;
55
+ --z-index-modal: 1010;
56
+ --z-index-notification: 1020;
57
+ --gray-100: #f8f9fa;
58
+ --gray-200: #e9ecef;
59
+ --gray-300: #dee2e6;
60
+ --gray-400: #ced4da;
61
+ --gray-500: #adb5bd;
62
+ --gray-600: #6c757d;
63
+ --gray-700: #495057;
64
+ --gray-800: #343a40;
65
+ --gray-900: #212529;
66
+ --black: #000;
67
+ --color-muted-blue: #8793ab;
68
+ --heading-one: 2.5rem;
69
+ --heading-two: 2rem;
70
+ --heading-three: 1.75rem;
71
+ --heading-four: 1.5rem;
72
+ --heading-five: 1.25rem;
73
+ --heading-six: 1rem;
74
+ --font-family-body: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
75
+ --font-size-xs: 0.75rem;
76
+ --font-size-sm: 0.875rem;
77
+ --font-size-base: 1rem;
78
+ --font-size-lg: 1.125rem;
79
+ --font-size-xl: 1.25rem;
80
+ --line-height-tight: 1.25;
81
+ --line-height-base: 1.5;
82
+ --line-height-relaxed: 1.625;
83
+ --font-weight-light: 300;
84
+ --font-weight-normal: 400;
85
+ --font-weight-medium: 500;
86
+ --font-weight-semibold: 600;
87
+ --font-weight-bold: 700;
88
+ --spacing-xs: 0.25rem;
89
+ --spacing-sm: 0.5rem;
90
+ --spacing-md: 1rem;
91
+ --spacing-lg: 1.5rem;
92
+ --spacing-xl: 2rem;
93
+ --spacing-2xl: 3rem;
94
+ --text-color: #1f2937;
95
+ --text-muted: #6b7280;
96
+ --background-color: #ffffff;
97
+ --border-color: #d1d5db;
98
+ --border-color-hover: #9ca3af;
99
+ --error-text: #dc2626;
100
+ --error-background: #fef2f2;
101
+ --error-border: #fecaca;
102
+ --success-text: #059669;
103
+ --success-background: #f0fdf4;
104
+ --success-border: #bbf7d0;
105
+ --warning-text: #d97706;
106
+ --warning-background: #fffbeb;
107
+ --warning-border: #fed7aa;
108
+ --primary-color: #3b82f6;
109
+ --focus-ring-color: #3b82f6;
110
+ --border-radius: 0.375rem;
111
+ }
112
+
113
+ .footer {
114
+ width: 100%;
115
+ align-items: center;
116
+ flex-direction: row;
117
+ padding: 15px;
118
+ }
119
+ @media (min-width: 768px) {
120
+ .footer .navigation {
121
+ display: inline-flex;
122
+ justify-content: flex-end;
123
+ }
124
+ }
125
+ .footer .navigation .unordered-list {
126
+ display: flex;
127
+ flex-direction: column;
128
+ }
129
+ @media (min-width: 768px) {
130
+ .footer .navigation .unordered-list {
131
+ display: inline-flex;
132
+ flex-direction: row;
133
+ align-items: center;
134
+ justify-content: flex-end;
135
+ padding: 0;
136
+ margin: 0;
137
+ }
138
+ }
139
+ .footer .navigation .unordered-list.auth-menu {
140
+ border-top: 1px solid #e9ecef;
141
+ flex-direction: row;
142
+ justify-content: space-between;
143
+ }
144
+ .footer .navigation .unordered-list.auth-menu .list-item {
145
+ display: inline-flex;
146
+ /* width: 25%; */
147
+ }
148
+ .footer .navigation .unordered-list .list-item {
149
+ display: flex;
150
+ }
151
+ @media (min-width: 768px) {
152
+ .footer .navigation .unordered-list .list-item {
153
+ display: inline-flex;
154
+ padding: 0 15px;
155
+ }
156
+ }
157
+ .footer .navigation .anchor {
158
+ color: #6c757d;
159
+ text-decoration: none;
160
+ }
161
+ .footer .navigation .anchor:hover {
162
+ color: #333;
163
+ }
164
+
165
+ /*# sourceMappingURL=footer.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/footer.scss"],"names":[],"mappings":"AA2RA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACrRF;EACC;EACA;EACA;EACA;;AAGC;EADD;IAEE;IACA;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;IACA;IACA;IACA;IACA;IACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;AACA;;AAIF;EACC;;AAEA;EAHD;IAIE;IACA;;;AAKH;EACC,ODwCQ;ECvCR;;AAEA;EACC,OD1Bc","file":"footer.css"}
@@ -0,0 +1,492 @@
1
+ /* ==========================================================================
2
+ Form Component Styles
3
+ ========================================================================== */
4
+ :root {
5
+ --small: (min-width: 607px);
6
+ --medium: (min-width: 768px);
7
+ --large: (min-width: 992px);
8
+ --xlarge: (min-width: 1200px);
9
+ --color-primary: #009900;
10
+ --color-primary-hover: rgba(1, 116, 1, 0.9);
11
+ --color-secondary: #7086f1;
12
+ --color-secondary-hover: rgba(83, 100, 185, 0.9);
13
+ --color-warning: #ff9800;
14
+ --color-warning-hover: rgba(214, 130, 4, 0.9);
15
+ --color-success: #57f500;
16
+ --color-success-hover: rgba(74, 207, 2, 0.9);
17
+ --color-error: #f44336;
18
+ --color-error-hover: rgba(216, 58, 47, 0.9);
19
+ --color-shade: rgba(0, 0, 0, 0.5);
20
+ --color-tint: rgba(250, 250, 250, 0.5);
21
+ --color-white: #fff;
22
+ --color-black: #000;
23
+ --color-font-body: #333;
24
+ --color-black-alpha: rgba(0, 0, 0, 0.6);
25
+ --focus-color: #4d90fe;
26
+ --shadow-primary: rgba(0, 153, 0, 0.2);
27
+ --shadow-primary-hover: rgba(0, 153, 0, 0.3);
28
+ --shadow-primary-strong: rgba(0, 153, 0, 0.4);
29
+ --shadow-primary-strongest: rgba(0, 153, 0, 0.5);
30
+ --shadow-secondary: rgba(112, 134, 241, 0.2);
31
+ --shadow-secondary-hover: rgba(112, 134, 241, 0.3);
32
+ --shadow-secondary-strong: rgba(112, 134, 241, 0.4);
33
+ --shadow-secondary-strongest: rgba(112, 134, 241, 0.5);
34
+ --shadow-success: rgba(87, 245, 0, 0.2);
35
+ --shadow-success-hover: rgba(87, 245, 0, 0.3);
36
+ --shadow-success-strong: rgba(87, 245, 0, 0.4);
37
+ --shadow-success-strongest: rgba(87, 245, 0, 0.5);
38
+ --shadow-error: rgba(244, 67, 54, 0.2);
39
+ --shadow-error-hover: rgba(244, 67, 54, 0.3);
40
+ --shadow-error-strong: rgba(244, 67, 54, 0.4);
41
+ --shadow-error-strongest: rgba(244, 67, 54, 0.5);
42
+ --shadow-warning: rgba(255, 152, 0, 0.2);
43
+ --shadow-warning-hover: rgba(255, 152, 0, 0.3);
44
+ --shadow-warning-strong: rgba(255, 152, 0, 0.4);
45
+ --shadow-warning-strongest: rgba(255, 152, 0, 0.5);
46
+ --border-radius-xs: 4px;
47
+ --border-radius-sm: 4px;
48
+ --border-radius-md: 6px;
49
+ --border-radius-lg: 8px;
50
+ --border-radius-xl: 10px;
51
+ --z-index-base: 1;
52
+ --z-index-low: 10;
53
+ --z-index-dropdown: 100;
54
+ --z-index-sticky: 200;
55
+ --z-index-popover: 300;
56
+ --z-index-tooltip: 400;
57
+ --z-index-overlay: 1000;
58
+ --z-index-modal: 1010;
59
+ --z-index-notification: 1020;
60
+ --gray-100: #f8f9fa;
61
+ --gray-200: #e9ecef;
62
+ --gray-300: #dee2e6;
63
+ --gray-400: #ced4da;
64
+ --gray-500: #adb5bd;
65
+ --gray-600: #6c757d;
66
+ --gray-700: #495057;
67
+ --gray-800: #343a40;
68
+ --gray-900: #212529;
69
+ --black: #000;
70
+ --color-muted-blue: #8793ab;
71
+ --heading-one: 2.5rem;
72
+ --heading-two: 2rem;
73
+ --heading-three: 1.75rem;
74
+ --heading-four: 1.5rem;
75
+ --heading-five: 1.25rem;
76
+ --heading-six: 1rem;
77
+ --font-family-body: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
78
+ --font-size-xs: 0.75rem;
79
+ --font-size-sm: 0.875rem;
80
+ --font-size-base: 1rem;
81
+ --font-size-lg: 1.125rem;
82
+ --font-size-xl: 1.25rem;
83
+ --line-height-tight: 1.25;
84
+ --line-height-base: 1.5;
85
+ --line-height-relaxed: 1.625;
86
+ --font-weight-light: 300;
87
+ --font-weight-normal: 400;
88
+ --font-weight-medium: 500;
89
+ --font-weight-semibold: 600;
90
+ --font-weight-bold: 700;
91
+ --spacing-xs: 0.25rem;
92
+ --spacing-sm: 0.5rem;
93
+ --spacing-md: 1rem;
94
+ --spacing-lg: 1.5rem;
95
+ --spacing-xl: 2rem;
96
+ --spacing-2xl: 3rem;
97
+ --text-color: #1f2937;
98
+ --text-muted: #6b7280;
99
+ --background-color: #ffffff;
100
+ --border-color: #d1d5db;
101
+ --border-color-hover: #9ca3af;
102
+ --error-text: #dc2626;
103
+ --error-background: #fef2f2;
104
+ --error-border: #fecaca;
105
+ --success-text: #059669;
106
+ --success-background: #f0fdf4;
107
+ --success-border: #bbf7d0;
108
+ --warning-text: #d97706;
109
+ --warning-background: #fffbeb;
110
+ --warning-border: #fed7aa;
111
+ --primary-color: #3b82f6;
112
+ --focus-ring-color: #3b82f6;
113
+ --border-radius: 0.375rem;
114
+ }
115
+
116
+ /* Base Form Styles
117
+ ========================================================================== */
118
+ .form {
119
+ display: block;
120
+ width: 100%;
121
+ max-width: 100%;
122
+ margin: 0;
123
+ padding: 0;
124
+ background: none;
125
+ border: none;
126
+ font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
127
+ font-size: 1rem;
128
+ line-height: 1.5;
129
+ color: #1f2937;
130
+ }
131
+
132
+ /* Form States
133
+ ========================================================================== */
134
+ .form--disabled {
135
+ opacity: 0.6;
136
+ pointer-events: none;
137
+ cursor: not-allowed;
138
+ }
139
+
140
+ .form--submitting {
141
+ position: relative;
142
+ pointer-events: none;
143
+ }
144
+
145
+ .form--submitting::before {
146
+ content: "";
147
+ position: absolute;
148
+ top: 0;
149
+ left: 0;
150
+ right: 0;
151
+ bottom: 0;
152
+ background: rgba(255, 255, 255, 0.8);
153
+ z-index: 1;
154
+ cursor: wait;
155
+ }
156
+
157
+ .form--has-errors {
158
+ border-color: #fecaca;
159
+ }
160
+
161
+ /* Form Layout Utilities
162
+ ========================================================================== */
163
+ .form__fieldset {
164
+ border: 1px solid #d1d5db;
165
+ border-radius: 0.375rem;
166
+ padding: 1.5rem;
167
+ margin: 0 0 1.5rem 0;
168
+ min-width: 0;
169
+ background: #ffffff;
170
+ }
171
+
172
+ .form__legend {
173
+ font-weight: 600;
174
+ font-size: 1.125rem;
175
+ color: #1f2937;
176
+ padding: 0 0.5rem;
177
+ margin-bottom: 1rem;
178
+ }
179
+
180
+ .form__field-group {
181
+ margin-bottom: 1.5rem;
182
+ }
183
+
184
+ .form__field-group:last-child {
185
+ margin-bottom: 0;
186
+ }
187
+
188
+ .form__field-row {
189
+ display: flex;
190
+ gap: 1rem;
191
+ align-items: flex-start;
192
+ flex-wrap: wrap;
193
+ }
194
+
195
+ .form__field-row > * {
196
+ flex: 1;
197
+ min-width: 0;
198
+ }
199
+
200
+ /* Form Actions
201
+ ========================================================================== */
202
+ .form__actions {
203
+ display: flex;
204
+ gap: 1rem;
205
+ align-items: center;
206
+ justify-content: flex-end;
207
+ flex-wrap: wrap;
208
+ margin-top: 2rem;
209
+ padding-top: 1.5rem;
210
+ border-top: 1px solid #d1d5db;
211
+ }
212
+
213
+ .form__actions--left {
214
+ justify-content: flex-start;
215
+ }
216
+
217
+ .form__actions--center {
218
+ justify-content: center;
219
+ }
220
+
221
+ .form__actions--spread {
222
+ justify-content: space-between;
223
+ }
224
+
225
+ /* Error Summary Styles
226
+ ========================================================================== */
227
+ .form__errors-summary {
228
+ background: #fef2f2;
229
+ border: 1px solid #fecaca;
230
+ border-radius: 0.375rem;
231
+ padding: 1rem 1.5rem;
232
+ margin-bottom: 1.5rem;
233
+ color: #dc2626;
234
+ }
235
+
236
+ .form__errors-title {
237
+ font-weight: 600;
238
+ font-size: 0.875rem;
239
+ margin: 0 0 0.5rem 0;
240
+ color: #dc2626;
241
+ }
242
+
243
+ .form__errors-list {
244
+ list-style: none;
245
+ margin: 0;
246
+ padding: 0;
247
+ }
248
+
249
+ .form__error-item {
250
+ font-size: 0.875rem;
251
+ line-height: 1.25;
252
+ margin-bottom: 0.25rem;
253
+ color: #dc2626;
254
+ }
255
+
256
+ .form__error-item:last-child {
257
+ margin-bottom: 0;
258
+ }
259
+
260
+ .form__error-item strong {
261
+ font-weight: 600;
262
+ }
263
+
264
+ /* Loading States
265
+ ========================================================================== */
266
+ .form__loading-indicator {
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 0.5rem;
270
+ font-size: 0.875rem;
271
+ color: #6b7280;
272
+ margin-top: 1rem;
273
+ }
274
+
275
+ .form__loading-spinner {
276
+ width: 16px;
277
+ height: 16px;
278
+ border: 2px solid #d1d5db;
279
+ border-top: 2px solid #3b82f6;
280
+ border-radius: 50%;
281
+ animation: spin 1s linear infinite;
282
+ }
283
+
284
+ @keyframes spin {
285
+ 0% {
286
+ transform: rotate(0deg);
287
+ }
288
+ 100% {
289
+ transform: rotate(360deg);
290
+ }
291
+ }
292
+ /* Screen Reader Only Styles
293
+ ========================================================================== */
294
+ .sr-only {
295
+ position: absolute;
296
+ width: 1px;
297
+ height: 1px;
298
+ padding: 0;
299
+ margin: -1px;
300
+ overflow: hidden;
301
+ clip: rect(0, 0, 0, 0);
302
+ white-space: nowrap;
303
+ border: 0;
304
+ }
305
+
306
+ /* Responsive Design
307
+ ========================================================================== */
308
+ @media (max-width: 768px) {
309
+ .form__field-row {
310
+ flex-direction: column;
311
+ gap: 1rem;
312
+ }
313
+ .form__field-row > * {
314
+ flex: none;
315
+ }
316
+ .form__actions {
317
+ flex-direction: column;
318
+ align-items: stretch;
319
+ gap: 0.5rem;
320
+ }
321
+ .form__actions--spread {
322
+ justify-content: stretch;
323
+ }
324
+ .form__fieldset {
325
+ padding: 1rem;
326
+ }
327
+ }
328
+ @media (max-width: 480px) {
329
+ .form__fieldset {
330
+ padding: 0.5rem;
331
+ margin-bottom: 1rem;
332
+ }
333
+ .form__legend {
334
+ font-size: 1rem;
335
+ padding: 0 0.25rem;
336
+ }
337
+ .form__errors-summary {
338
+ padding: 0.5rem 1rem;
339
+ }
340
+ }
341
+ /* High Contrast Mode Support
342
+ ========================================================================== */
343
+ @media (prefers-contrast: high) {
344
+ .form__fieldset {
345
+ border-width: 2px;
346
+ border-color: #1f2937;
347
+ }
348
+ .form__errors-summary {
349
+ border-width: 2px;
350
+ border-color: #dc2626;
351
+ background: #ffffff;
352
+ }
353
+ .form--submitting::before {
354
+ background: #ffffff;
355
+ opacity: 0.9;
356
+ }
357
+ }
358
+ /* Reduced Motion Support
359
+ ========================================================================== */
360
+ @media (prefers-reduced-motion: reduce) {
361
+ .form__loading-spinner {
362
+ animation: none;
363
+ }
364
+ .form--submitting::before {
365
+ transition: none;
366
+ }
367
+ .form input,
368
+ .form textarea,
369
+ .form select,
370
+ .form button,
371
+ .form input::before,
372
+ .form input::after,
373
+ .form textarea::before,
374
+ .form textarea::after,
375
+ .form select::before,
376
+ .form select::after,
377
+ .form button::before,
378
+ .form button::after {
379
+ animation-duration: 0.01ms !important;
380
+ animation-iteration-count: 1 !important;
381
+ transition-duration: 0.01ms !important;
382
+ }
383
+ }
384
+ /* Focus Management
385
+ ========================================================================== */
386
+ /* Print Styles
387
+ ========================================================================== */
388
+ @media print {
389
+ .form--submitting::before {
390
+ display: none;
391
+ }
392
+ .form__loading-indicator,
393
+ .form__loading-spinner {
394
+ display: none;
395
+ }
396
+ .form__actions {
397
+ display: none;
398
+ }
399
+ .form__errors-summary {
400
+ border: 2px solid #000;
401
+ background: #fff;
402
+ color: #000;
403
+ }
404
+ }
405
+ /* Theme Variations
406
+ ========================================================================== */
407
+ .form--inline .form__field-group {
408
+ display: inline-flex;
409
+ align-items: center;
410
+ gap: 0.5rem;
411
+ margin-right: 1rem;
412
+ margin-bottom: 0.5rem;
413
+ }
414
+
415
+ .form--compact .form__field-group {
416
+ margin-bottom: 1rem;
417
+ }
418
+
419
+ .form--compact .form__fieldset {
420
+ padding: 1rem;
421
+ }
422
+
423
+ .form--compact .form__actions {
424
+ margin-top: 1.5rem;
425
+ padding-top: 1rem;
426
+ }
427
+
428
+ /* Dark Theme Support
429
+ ========================================================================== */
430
+ @media (prefers-color-scheme: dark) {
431
+ .form--submitting::before {
432
+ background: rgba(0, 0, 0, 0.8);
433
+ }
434
+ }
435
+ /* Interactive States
436
+ ========================================================================== */
437
+ .form__fieldset:hover:not(.form--disabled) {
438
+ border-color: #9ca3af;
439
+ }
440
+
441
+ .form__fieldset:focus-within {
442
+ border-color: #3b82f6;
443
+ box-shadow: 0 0 0 1px #3b82f6;
444
+ outline: none;
445
+ }
446
+
447
+ /* Validation States
448
+ ========================================================================== */
449
+ .form--has-errors .form__fieldset {
450
+ border-color: #fecaca;
451
+ }
452
+
453
+ .form--valid .form__fieldset {
454
+ border-color: #bbf7d0;
455
+ }
456
+
457
+ /* Form Layout Modifiers
458
+ ========================================================================== */
459
+ .form--horizontal .form__field-group {
460
+ display: grid;
461
+ grid-template-columns: 1fr 2fr;
462
+ gap: 1rem;
463
+ align-items: start;
464
+ }
465
+
466
+ .form--stacked .form__field-group {
467
+ display: flex;
468
+ flex-direction: column;
469
+ gap: 0.25rem;
470
+ }
471
+
472
+ /* Utility Classes
473
+ ========================================================================== */
474
+ .form__help-text {
475
+ font-size: 0.875rem;
476
+ color: #6b7280;
477
+ margin-top: 0.25rem;
478
+ line-height: 1.25;
479
+ }
480
+
481
+ .form__required-indicator {
482
+ color: #dc2626;
483
+ font-weight: 700;
484
+ }
485
+
486
+ .form__optional-indicator {
487
+ color: #6b7280;
488
+ font-size: 0.875rem;
489
+ font-style: italic;
490
+ }
491
+
492
+ /*# sourceMappingURL=form.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../src/styles/form.scss","../../src/styles/_variables.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AC2RA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ADjRF;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aCwFkB;EDvFlB,WC2FgB;ED1FhB,aCkGkB;EDjGlB,OCoHY;;;ADjHb;AAAA;AAGA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SCwBc;EDvBd;;;AAGD;EACC,cCiGc;;;AD9Ff;AAAA;AAGA;EACC;EACA,eCwGe;EDvGf,SCwEY;EDvEZ;EACA;EACA,YC8EkB;;;AD3EnB;EACC,aC0DsB;EDzDtB,WC2Cc;ED1Cd,OCoEY;EDnEZ;EACA,eC4DY;;;ADzDb;EACC,eCyDY;;;ADtDb;EACC;;;AAGD;EACC;EACA,KC+CY;ED9CZ;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAGA;EACC;EACA,KCgCY;ED/BZ;EACA;EACA;EACA,YC8BY;ED7BZ,aC4BY;ED3BZ;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAGA;EACC,YCuBkB;EDtBlB;EACA,eCqCe;EDpCf;EACA,eCIY;EDHZ,OCiBY;;;ADdb;EACC,aCRsB;EDStB,WCzBc;ED0Bd;EACA,OCUY;;;ADPb;EACC;EACA;EACA;;;AAGD;EACC,WCrCc;EDsCd,aC/BmB;EDgCnB,eCnBY;EDoBZ,OCHY;;;ADMb;EACC;;;AAGD;EACC,aChCsB;;;ADmCvB;AAAA;AAGA;EACC;EACA;EACA,KCpCY;EDqCZ,WC1Dc;ED2Dd,OC5BY;ED6BZ,YCtCY;;;ADyCb;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;IACC;;EAED;IACC;;;AAIF;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAGA;EACC;IACC;IACA,KChFW;;EDmFZ;IACC;;EAGD;IACC;IACA;IACA,KC3FW;;ED8FZ;IACC;;EAGD;IACC,SClGW;;;ADsGb;EACC;IACC,SCzGW;ID0GX,eCzGW;;ED4GZ;IACC,WClIe;IDmIf;;EAGD;IACC;;;AAIF;AAAA;AAGA;EACC;IACC;IACA,cCtHW;;EDyHZ;IACC;IACA,cClHW;IDmHX,YCxHiB;;ED2HlB;IACC,YC5HiB;ID6HjB;;;AAIF;AAAA;AAGA;EACC;IACC;;EAGD;IACC;;EAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAYC;IACA;IACA;;;AAIF;AAAA;AAGA;AAAA;AAGA;EACC;IACC;;EAGD;AAAA;IAEC;;EAGD;IACC;;EAGD;IACC;IACA;IACA;;;AAIF;AAAA;AAGA;EACC;EACA;EACA,KC5MY;ED6MZ,cC5MY;ED6MZ,eC9MY;;;ADiNb;EACC,eCjNY;;;ADoNb;EACC,SCrNY;;;ADwNb;EACC,YCxNY;EDyNZ,aC1NY;;;AD6Nb;AAAA;AAGA;EACC;IACC;;;AAIF;AAAA;AAGA;EACC,cC9NoB;;;ADiOrB;EACC,cCjNkB;EDkNlB;EACA;;;AAGD;AAAA;AAGA;EACC,cCtOc;;;ADyOf;EACC,cCtOgB;;;ADyOjB;AAAA;AAGA;EACC;EACA;EACA,KCpQY;EDqQZ;;;AAGD;EACC;EACA;EACA,KC7QY;;;ADgRb;AAAA;AAGA;EACC,WCxSc;EDySd,OC1QY;ED2QZ,YCtRY;EDuRZ,aCpSmB;;;ADuSpB;EACC,OC1QY;ED2QZ,aC/RkB;;;ADkSnB;EACC,OCrRY;EDsRZ,WCrTc;EDsTd","file":"form.css"}
@@ -0,0 +1,28 @@
1
+ .container {
2
+ margin-right: auto;
3
+ margin-left: auto;
4
+ }
5
+
6
+ *,
7
+ :after,
8
+ :before {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ @media (min-width: 768px) {
13
+ .container {
14
+ width: 750px;
15
+ }
16
+ }
17
+ @media (min-width: 992px) {
18
+ .container {
19
+ width: 970px;
20
+ }
21
+ }
22
+ @media (min-width: 1200px) {
23
+ .container {
24
+ width: 1170px;
25
+ }
26
+ }
27
+
28
+ /*# sourceMappingURL=grid.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../src/styles/grid.scss"],"names":[],"mappings":"AACA;EACI;EACA;;;AAGJ;AAAA;AAAA;EAGI;;;AAGJ;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI","file":"grid.css"}