@oardi/css-utils 0.114.0 → 0.115.0

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/package.json +1 -1
  2. package/scss/components/file-upload.scss +233 -0
  3. package/scss/index.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.114.0",
3
+ "version": "0.115.0",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/components/file-upload.scss ADDED
@@ -0,0 +1,233 @@
1
+ @use '../layers.scss';
2
+
3
+ @layer components {
4
+ .file-upload {
5
+ --file-upload-gap: var(--spacer-2);
6
+ --file-upload-dropzone-gap: var(--spacer-3);
7
+ --file-upload-dropzone-padding: var(--spacer-4);
8
+ --file-upload-dropzone-bg-color: var(--bg-surface);
9
+ --file-upload-dropzone-border-width: var(--border-width);
10
+ --file-upload-dropzone-border-color: var(--control-border-color);
11
+ --file-upload-dropzone-border-radius: var(--border-radius-lg);
12
+ --file-upload-dropzone-hover-border-color: var(--primary-hover);
13
+ --file-upload-dropzone-active-bg-color: var(--bg-highlight);
14
+ --file-upload-dropzone-active-border-color: var(--primary);
15
+ --file-upload-input-bg-color: var(--bg-body);
16
+ --file-upload-input-border-color: var(--control-border-color);
17
+ --file-upload-input-border-radius: var(--border-radius);
18
+ --file-upload-input-padding: var(--spacer-2);
19
+ --file-upload-button-bg-color: var(--bg-highlight);
20
+ --file-upload-button-hover-bg-color: var(--bg-active);
21
+ --file-upload-button-color: var(--text-color);
22
+ --file-upload-button-padding-y: var(--spacer-1);
23
+ --file-upload-button-padding-x: var(--spacer-3);
24
+ --file-upload-summary-color: var(--text-muted);
25
+ --file-upload-invalid-color: var(--error);
26
+ --file-upload-disabled-text-color: var(--disabled-text-color);
27
+ --file-upload-disabled-bg-color: var(--disabled-bg-color);
28
+ --file-upload-disabled-border-color: var(--disabled-border-color);
29
+ --file-upload-focus-border-color: var(--primary-hover);
30
+ --file-upload-focus-outline-width: var(--focus-outline-width);
31
+ --file-upload-focus-outline-style: var(--focus-outline-style);
32
+ --file-upload-focus-outline-color: var(--focus-outline-color);
33
+ --file-upload-focus-outline-offset: var(--focus-offset);
34
+ --file-upload-transition-duration: var(--transition-duration);
35
+ --file-upload-transition-easing: var(--transition-easing);
36
+
37
+ display: grid;
38
+ gap: var(--file-upload-gap);
39
+ min-inline-size: 0;
40
+
41
+ > .form-label {
42
+ margin-block-end: 0;
43
+ }
44
+ }
45
+
46
+ .file-upload-hint,
47
+ .file-upload-summary,
48
+ .file-upload-feedback {
49
+ margin: 0;
50
+ }
51
+
52
+ .file-upload-hint,
53
+ .file-upload-summary {
54
+ color: var(--file-upload-summary-color);
55
+ font-size: var(--font-size-sm);
56
+ }
57
+
58
+ .file-upload-summary > p {
59
+ margin: 0;
60
+ }
61
+
62
+ .file-upload-dropzone {
63
+ display: grid;
64
+ gap: var(--file-upload-dropzone-gap);
65
+ min-inline-size: 0;
66
+ padding: var(--file-upload-dropzone-padding);
67
+ background-color: var(--file-upload-dropzone-bg-color);
68
+ border: var(--file-upload-dropzone-border-width) dashed
69
+ var(--file-upload-dropzone-border-color);
70
+ border-radius: var(--file-upload-dropzone-border-radius);
71
+
72
+ transition:
73
+ background-color var(--file-upload-transition-duration)
74
+ var(--file-upload-transition-easing),
75
+ border-color var(--file-upload-transition-duration) var(--file-upload-transition-easing),
76
+ outline-offset var(--file-upload-transition-duration)
77
+ var(--file-upload-transition-easing);
78
+
79
+ &:hover:not(:has(.file-upload-input:disabled)) {
80
+ border-color: var(--file-upload-dropzone-hover-border-color);
81
+ }
82
+
83
+ &:focus-within,
84
+ &:has(.file-upload-input.is-focus-visible) {
85
+ border-color: var(--file-upload-focus-border-color);
86
+ outline: var(--file-upload-focus-outline-width) var(--file-upload-focus-outline-style)
87
+ var(--file-upload-focus-outline-color);
88
+ outline-offset: var(--file-upload-focus-outline-offset);
89
+ }
90
+
91
+ &.is-dragover {
92
+ background-color: var(--file-upload-dropzone-active-bg-color);
93
+ border-color: var(--file-upload-dropzone-active-border-color);
94
+ border-style: solid;
95
+ }
96
+ }
97
+
98
+ .file-upload-prompt {
99
+ margin: 0;
100
+ text-align: center;
101
+ }
102
+
103
+ .file-upload-input {
104
+ box-sizing: border-box;
105
+ display: block;
106
+ inline-size: 100%;
107
+ min-inline-size: 0;
108
+ max-inline-size: 100%;
109
+ margin: 0;
110
+ padding: var(--file-upload-input-padding);
111
+ overflow: hidden;
112
+ color: var(--text-color);
113
+ background-color: var(--file-upload-input-bg-color);
114
+ border: var(--file-upload-dropzone-border-width) solid var(--file-upload-input-border-color);
115
+ border-radius: var(--file-upload-input-border-radius);
116
+ font: inherit;
117
+ white-space: nowrap;
118
+ text-overflow: ellipsis;
119
+ cursor: pointer;
120
+ outline: 0;
121
+
122
+ &::file-selector-button {
123
+ margin-block: calc(-1 * var(--file-upload-input-padding));
124
+ margin-inline-start: calc(-1 * var(--file-upload-input-padding));
125
+ margin-inline-end: var(--file-upload-input-padding);
126
+ padding: var(--file-upload-button-padding-y) var(--file-upload-button-padding-x);
127
+ color: var(--file-upload-button-color);
128
+ background-color: var(--file-upload-button-bg-color);
129
+ border: 0;
130
+ border-inline-end: var(--file-upload-dropzone-border-width) solid
131
+ var(--file-upload-input-border-color);
132
+ font: inherit;
133
+ cursor: pointer;
134
+
135
+ transition: background-color var(--file-upload-transition-duration)
136
+ var(--file-upload-transition-easing);
137
+ }
138
+
139
+ &:hover:not(:disabled)::file-selector-button {
140
+ background-color: var(--file-upload-button-hover-bg-color);
141
+ }
142
+
143
+ &:disabled {
144
+ color: var(--file-upload-disabled-text-color);
145
+ background-color: var(--file-upload-disabled-bg-color);
146
+ border-color: var(--file-upload-disabled-border-color);
147
+ cursor: not-allowed;
148
+
149
+ &::file-selector-button {
150
+ color: var(--file-upload-disabled-text-color);
151
+ background-color: var(--file-upload-disabled-bg-color);
152
+ border-color: var(--file-upload-disabled-border-color);
153
+ cursor: not-allowed;
154
+ }
155
+ }
156
+ }
157
+
158
+ .file-upload-list {
159
+ display: grid;
160
+ gap: var(--spacer-1);
161
+ margin: 0;
162
+ padding-inline-start: var(--spacer-5);
163
+ }
164
+
165
+ .file-upload-file-name {
166
+ overflow-wrap: anywhere;
167
+ }
168
+
169
+ .file-upload-feedback {
170
+ font-size: var(--font-size-sm);
171
+ }
172
+
173
+ .file-upload-feedback-error {
174
+ color: var(--file-upload-invalid-color);
175
+ }
176
+
177
+ .file-upload:has(.file-upload-input:is(.is-invalid, [aria-invalid='true'])) {
178
+ .file-upload-dropzone {
179
+ border-color: var(--file-upload-invalid-color);
180
+
181
+ &:focus-within,
182
+ &:has(.file-upload-input.is-focus-visible) {
183
+ outline-color: var(--file-upload-invalid-color);
184
+ }
185
+ }
186
+
187
+ .file-upload-input {
188
+ border-color: var(--file-upload-invalid-color);
189
+ }
190
+ }
191
+
192
+ .file-upload:has(.file-upload-input:disabled) {
193
+ .file-upload-dropzone {
194
+ color: var(--file-upload-disabled-text-color);
195
+ background-color: var(--file-upload-disabled-bg-color);
196
+ border-color: var(--file-upload-disabled-border-color);
197
+ cursor: not-allowed;
198
+ }
199
+ }
200
+
201
+ @media (prefers-reduced-motion: reduce) {
202
+ .file-upload {
203
+ --file-upload-transition-duration: 0s;
204
+ }
205
+ }
206
+
207
+ @media (forced-colors: active) {
208
+ .file-upload-dropzone,
209
+ .file-upload-input {
210
+ border-color: CanvasText;
211
+ }
212
+
213
+ .file-upload-dropzone:is(.is-dragover, :focus-within),
214
+ .file-upload-dropzone:has(.file-upload-input.is-focus-visible) {
215
+ border-color: Highlight;
216
+ outline-color: Highlight;
217
+ }
218
+
219
+ .file-upload:has(.file-upload-input:is(.is-invalid, [aria-invalid='true'])) {
220
+ .file-upload-dropzone,
221
+ .file-upload-input {
222
+ border-color: LinkText;
223
+ }
224
+ }
225
+
226
+ .file-upload:has(.file-upload-input:disabled) {
227
+ .file-upload-dropzone,
228
+ .file-upload-input {
229
+ border-color: GrayText;
230
+ }
231
+ }
232
+ }
233
+ }
package/scss/index.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  @forward './components/drawer.scss';
35
35
  @forward './components/empty-state.scss';
36
36
  @forward './components/expansion-panel.scss';
37
+ @forward './components/file-upload.scss';
37
38
  @forward './components/form.scss';
38
39
  @forward './components/icon-button.scss';
39
40
  @forward './components/input-group.scss';