@aws-amplify/ui 6.4.0 → 6.5.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.
- package/dist/esm/theme/tokens/components/fileuploader.mjs +97 -0
- package/dist/esm/theme/tokens/components/index.mjs +2 -0
- package/dist/esm/types/primitives/componentClassName.mjs +1 -0
- package/dist/index.js +98 -0
- package/dist/styles/FileUploader.css +138 -0
- package/dist/styles/FileUploader.layer.css +140 -0
- package/dist/styles/avatar.css +20 -0
- package/dist/styles/avatar.layer.css +20 -0
- package/dist/styles/base.css +61 -0
- package/dist/styles/base.layer.css +61 -0
- package/dist/styles.css +220 -0
- package/dist/styles.layer.css +220 -0
- package/dist/theme.css +61 -0
- package/dist/types/theme/components/avatar.d.ts +1 -0
- package/dist/types/theme/components/index.d.ts +3 -1
- package/dist/types/theme/tokens/components/fileuploader.d.ts +24 -0
- package/dist/types/theme/tokens/components/index.d.ts +2 -0
- package/dist/types/types/primitives/componentClassName.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
const fileuploader = {
|
|
2
|
+
dropzone: {
|
|
3
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
4
|
+
borderRadius: { value: '{radii.small}' },
|
|
5
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
6
|
+
borderStyle: { value: 'dashed' },
|
|
7
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
8
|
+
gap: { value: '{space.small}' },
|
|
9
|
+
paddingBlock: { value: '{space.xl}' },
|
|
10
|
+
paddingInline: { value: '{space.large}' },
|
|
11
|
+
textAlign: { value: 'center' },
|
|
12
|
+
_active: {
|
|
13
|
+
backgroundColor: { value: '{colors.primary.10}' },
|
|
14
|
+
borderRadius: {
|
|
15
|
+
value: '{components.fileuploader.dropzone.borderRadius}',
|
|
16
|
+
},
|
|
17
|
+
borderColor: { value: '{colors.border.pressed}' },
|
|
18
|
+
borderStyle: {
|
|
19
|
+
value: '{components.fileuploader.dropzone.borderStyle}',
|
|
20
|
+
},
|
|
21
|
+
borderWidth: { value: '{borderWidths.medium}' },
|
|
22
|
+
},
|
|
23
|
+
icon: {
|
|
24
|
+
color: { value: '{colors.border.primary}' },
|
|
25
|
+
fontSize: { value: '{fontSizes.xxl}' },
|
|
26
|
+
},
|
|
27
|
+
text: {
|
|
28
|
+
color: { value: '{colors.font.tertiary}' },
|
|
29
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
30
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
file: {
|
|
34
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
35
|
+
borderRadius: { value: '{radii.small}' },
|
|
36
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
37
|
+
borderStyle: { value: 'solid' },
|
|
38
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
39
|
+
paddingBlock: { value: '{space.xs}' },
|
|
40
|
+
paddingInline: { value: '{space.small}' },
|
|
41
|
+
gap: { value: '{space.small}' },
|
|
42
|
+
alignItems: { value: 'baseline' },
|
|
43
|
+
name: {
|
|
44
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
45
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
46
|
+
color: { value: '{colors.font.primary}' },
|
|
47
|
+
},
|
|
48
|
+
size: {
|
|
49
|
+
fontSize: { value: '{fontSizes.small}' },
|
|
50
|
+
fontWeight: { value: '{fontWeights.normal}' },
|
|
51
|
+
color: { value: '{colors.font.tertiary}' },
|
|
52
|
+
},
|
|
53
|
+
image: {
|
|
54
|
+
width: { value: '{space.xxl}' },
|
|
55
|
+
height: { value: '{space.xxl}' },
|
|
56
|
+
backgroundColor: { value: '{colors.background.secondary}' },
|
|
57
|
+
color: { value: '{colors.font.tertiary}' },
|
|
58
|
+
borderRadius: { value: '{radii.small}' },
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
filelist: {
|
|
62
|
+
flexDirection: { value: 'column' },
|
|
63
|
+
gap: { value: '{space.small}' },
|
|
64
|
+
},
|
|
65
|
+
loader: {
|
|
66
|
+
strokeLinecap: { value: 'round' },
|
|
67
|
+
strokeEmpty: { value: '{colors.border.secondary}' },
|
|
68
|
+
strokeFilled: { value: '{components.loader.strokeFilled}' },
|
|
69
|
+
strokeWidth: { value: '{borderWidths.large}' },
|
|
70
|
+
},
|
|
71
|
+
previewer: {
|
|
72
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
73
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
74
|
+
borderStyle: { value: 'solid' },
|
|
75
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
76
|
+
borderRadius: { value: '{radii.small}' },
|
|
77
|
+
paddingBlock: { value: '{space.zero}' },
|
|
78
|
+
paddingInline: { value: '{space.zero}' },
|
|
79
|
+
maxHeight: { value: '40rem' },
|
|
80
|
+
maxWidth: { value: 'auto' },
|
|
81
|
+
text: {
|
|
82
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
83
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
84
|
+
color: { value: '{colors.font.primary}' },
|
|
85
|
+
},
|
|
86
|
+
body: {
|
|
87
|
+
paddingBlock: { value: '{space.medium}' },
|
|
88
|
+
paddingInline: { value: '{space.medium}' },
|
|
89
|
+
gap: { value: '{space.small}' },
|
|
90
|
+
},
|
|
91
|
+
footer: {
|
|
92
|
+
justifyContent: { value: 'flex-end' },
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export { fileuploader };
|
|
@@ -19,6 +19,7 @@ import { fieldcontrol } from './fieldControl.mjs';
|
|
|
19
19
|
import { fieldgroup } from './fieldGroup.mjs';
|
|
20
20
|
import { fieldset } from './fieldset.mjs';
|
|
21
21
|
import { fieldmessages } from './fieldMessages.mjs';
|
|
22
|
+
import { fileuploader } from './fileuploader.mjs';
|
|
22
23
|
import { flex } from './flex.mjs';
|
|
23
24
|
import { heading } from './heading.mjs';
|
|
24
25
|
import { highlightmatch } from './highlightMatch.mjs';
|
|
@@ -75,6 +76,7 @@ const components = {
|
|
|
75
76
|
fieldgroup,
|
|
76
77
|
fieldmessages,
|
|
77
78
|
fieldset,
|
|
79
|
+
fileuploader,
|
|
78
80
|
flex,
|
|
79
81
|
heading,
|
|
80
82
|
icon,
|
|
@@ -20,6 +20,7 @@ const ComponentClassName = {
|
|
|
20
20
|
Avatar: 'amplify-avatar',
|
|
21
21
|
AvatarIcon: 'amplify-avatar__icon',
|
|
22
22
|
AvatarImage: 'amplify-avatar__image',
|
|
23
|
+
AvatarLoader: 'amplify-avatar__loader',
|
|
23
24
|
AIConversation: 'amplify-ai-conversation',
|
|
24
25
|
AIConversationAttachment: 'amplify-ai-conversation__attachment',
|
|
25
26
|
AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
|
package/dist/index.js
CHANGED
|
@@ -2871,6 +2871,7 @@ const ComponentClassName = {
|
|
|
2871
2871
|
Avatar: 'amplify-avatar',
|
|
2872
2872
|
AvatarIcon: 'amplify-avatar__icon',
|
|
2873
2873
|
AvatarImage: 'amplify-avatar__image',
|
|
2874
|
+
AvatarLoader: 'amplify-avatar__loader',
|
|
2874
2875
|
AIConversation: 'amplify-ai-conversation',
|
|
2875
2876
|
AIConversationAttachment: 'amplify-ai-conversation__attachment',
|
|
2876
2877
|
AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
|
|
@@ -6873,6 +6874,102 @@ const fieldmessages = {
|
|
|
6873
6874
|
},
|
|
6874
6875
|
};
|
|
6875
6876
|
|
|
6877
|
+
const fileuploader = {
|
|
6878
|
+
dropzone: {
|
|
6879
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
6880
|
+
borderRadius: { value: '{radii.small}' },
|
|
6881
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
6882
|
+
borderStyle: { value: 'dashed' },
|
|
6883
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
6884
|
+
gap: { value: '{space.small}' },
|
|
6885
|
+
paddingBlock: { value: '{space.xl}' },
|
|
6886
|
+
paddingInline: { value: '{space.large}' },
|
|
6887
|
+
textAlign: { value: 'center' },
|
|
6888
|
+
_active: {
|
|
6889
|
+
backgroundColor: { value: '{colors.primary.10}' },
|
|
6890
|
+
borderRadius: {
|
|
6891
|
+
value: '{components.fileuploader.dropzone.borderRadius}',
|
|
6892
|
+
},
|
|
6893
|
+
borderColor: { value: '{colors.border.pressed}' },
|
|
6894
|
+
borderStyle: {
|
|
6895
|
+
value: '{components.fileuploader.dropzone.borderStyle}',
|
|
6896
|
+
},
|
|
6897
|
+
borderWidth: { value: '{borderWidths.medium}' },
|
|
6898
|
+
},
|
|
6899
|
+
icon: {
|
|
6900
|
+
color: { value: '{colors.border.primary}' },
|
|
6901
|
+
fontSize: { value: '{fontSizes.xxl}' },
|
|
6902
|
+
},
|
|
6903
|
+
text: {
|
|
6904
|
+
color: { value: '{colors.font.tertiary}' },
|
|
6905
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
6906
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
6907
|
+
},
|
|
6908
|
+
},
|
|
6909
|
+
file: {
|
|
6910
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
6911
|
+
borderRadius: { value: '{radii.small}' },
|
|
6912
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
6913
|
+
borderStyle: { value: 'solid' },
|
|
6914
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
6915
|
+
paddingBlock: { value: '{space.xs}' },
|
|
6916
|
+
paddingInline: { value: '{space.small}' },
|
|
6917
|
+
gap: { value: '{space.small}' },
|
|
6918
|
+
alignItems: { value: 'baseline' },
|
|
6919
|
+
name: {
|
|
6920
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
6921
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
6922
|
+
color: { value: '{colors.font.primary}' },
|
|
6923
|
+
},
|
|
6924
|
+
size: {
|
|
6925
|
+
fontSize: { value: '{fontSizes.small}' },
|
|
6926
|
+
fontWeight: { value: '{fontWeights.normal}' },
|
|
6927
|
+
color: { value: '{colors.font.tertiary}' },
|
|
6928
|
+
},
|
|
6929
|
+
image: {
|
|
6930
|
+
width: { value: '{space.xxl}' },
|
|
6931
|
+
height: { value: '{space.xxl}' },
|
|
6932
|
+
backgroundColor: { value: '{colors.background.secondary}' },
|
|
6933
|
+
color: { value: '{colors.font.tertiary}' },
|
|
6934
|
+
borderRadius: { value: '{radii.small}' },
|
|
6935
|
+
},
|
|
6936
|
+
},
|
|
6937
|
+
filelist: {
|
|
6938
|
+
flexDirection: { value: 'column' },
|
|
6939
|
+
gap: { value: '{space.small}' },
|
|
6940
|
+
},
|
|
6941
|
+
loader: {
|
|
6942
|
+
strokeLinecap: { value: 'round' },
|
|
6943
|
+
strokeEmpty: { value: '{colors.border.secondary}' },
|
|
6944
|
+
strokeFilled: { value: '{components.loader.strokeFilled}' },
|
|
6945
|
+
strokeWidth: { value: '{borderWidths.large}' },
|
|
6946
|
+
},
|
|
6947
|
+
previewer: {
|
|
6948
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
6949
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
6950
|
+
borderStyle: { value: 'solid' },
|
|
6951
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
6952
|
+
borderRadius: { value: '{radii.small}' },
|
|
6953
|
+
paddingBlock: { value: '{space.zero}' },
|
|
6954
|
+
paddingInline: { value: '{space.zero}' },
|
|
6955
|
+
maxHeight: { value: '40rem' },
|
|
6956
|
+
maxWidth: { value: 'auto' },
|
|
6957
|
+
text: {
|
|
6958
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
6959
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
6960
|
+
color: { value: '{colors.font.primary}' },
|
|
6961
|
+
},
|
|
6962
|
+
body: {
|
|
6963
|
+
paddingBlock: { value: '{space.medium}' },
|
|
6964
|
+
paddingInline: { value: '{space.medium}' },
|
|
6965
|
+
gap: { value: '{space.small}' },
|
|
6966
|
+
},
|
|
6967
|
+
footer: {
|
|
6968
|
+
justifyContent: { value: 'flex-end' },
|
|
6969
|
+
},
|
|
6970
|
+
},
|
|
6971
|
+
};
|
|
6972
|
+
|
|
6876
6973
|
const flex = {
|
|
6877
6974
|
gap: { value: '{space.medium.value}' },
|
|
6878
6975
|
justifyContent: { value: 'normal' },
|
|
@@ -8073,6 +8170,7 @@ const components = {
|
|
|
8073
8170
|
fieldgroup,
|
|
8074
8171
|
fieldmessages,
|
|
8075
8172
|
fieldset,
|
|
8173
|
+
fileuploader,
|
|
8076
8174
|
flex,
|
|
8077
8175
|
heading,
|
|
8078
8176
|
icon,
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
.amplify-fileuploader__dropzone {
|
|
2
|
+
background-color: var(--amplify-components-fileuploader-dropzone-background-color);
|
|
3
|
+
border-color: var(--amplify-components-fileuploader-dropzone-border-color);
|
|
4
|
+
border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
|
|
5
|
+
border-style: var(--amplify-components-fileuploader-dropzone-border-style);
|
|
6
|
+
border-width: var(--amplify-components-fileuploader-dropzone-border-width);
|
|
7
|
+
text-align: var(--amplify-components-fileuploader-dropzone-text-align);
|
|
8
|
+
padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
|
|
9
|
+
padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: var(--amplify-components-fileuploader-dropzone-gap);
|
|
14
|
+
}
|
|
15
|
+
.amplify-fileuploader__dropzone--small {
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
}
|
|
19
|
+
.amplify-fileuploader__dropzone--active {
|
|
20
|
+
border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
|
|
21
|
+
border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
|
|
22
|
+
background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
|
|
23
|
+
}
|
|
24
|
+
.amplify-fileuploader__dropzone__icon {
|
|
25
|
+
font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
|
|
26
|
+
color: var(--amplify-components-fileuploader-dropzone-icon-color);
|
|
27
|
+
}
|
|
28
|
+
.amplify-fileuploader__dropzone__text {
|
|
29
|
+
color: var(--amplify-components-fileuploader-dropzone-text-color);
|
|
30
|
+
font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
|
|
31
|
+
font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
|
|
32
|
+
}
|
|
33
|
+
.amplify-fileuploader__file__list {
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
|
|
36
|
+
gap: var(--amplify-components-fileuploader-filelist-gap);
|
|
37
|
+
}
|
|
38
|
+
.amplify-fileuploader__file {
|
|
39
|
+
position: relative;
|
|
40
|
+
border-width: var(--amplify-components-fileuploader-file-border-width);
|
|
41
|
+
border-style: var(--amplify-components-fileuploader-file-border-style);
|
|
42
|
+
border-color: var(--amplify-components-fileuploader-file-border-color);
|
|
43
|
+
border-radius: var(--amplify-components-fileuploader-file-border-radius);
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
|
|
47
|
+
padding-block: var(--amplify-components-fileuploader-file-padding-block);
|
|
48
|
+
align-items: var(--amplify-components-fileuploader-file-align-items);
|
|
49
|
+
}
|
|
50
|
+
.amplify-fileuploader__file__wrapper {
|
|
51
|
+
width: 100%;
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: row;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: var(--amplify-components-fileuploader-file-gap);
|
|
56
|
+
}
|
|
57
|
+
.amplify-fileuploader__file__name {
|
|
58
|
+
text-overflow: ellipsis;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
|
|
61
|
+
font-size: var(--amplify-components-fileuploader-file-name-font-size);
|
|
62
|
+
color: var(--amplify-components-fileuploader-file-name-color);
|
|
63
|
+
}
|
|
64
|
+
.amplify-fileuploader__file__size {
|
|
65
|
+
font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
|
|
66
|
+
font-size: var(--amplify-components-fileuploader-file-size-font-size);
|
|
67
|
+
color: var(--amplify-components-fileuploader-file-size-color);
|
|
68
|
+
}
|
|
69
|
+
.amplify-fileuploader__file__main {
|
|
70
|
+
flex: 1;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
overflow: hidden;
|
|
73
|
+
}
|
|
74
|
+
.amplify-fileuploader__file__image {
|
|
75
|
+
position: relative;
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
width: var(--amplify-components-fileuploader-file-image-width);
|
|
80
|
+
height: var(--amplify-components-fileuploader-file-image-height);
|
|
81
|
+
background-color: var(--amplify-components-fileuploader-file-image-background-color);
|
|
82
|
+
border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
|
|
83
|
+
color: var(--amplify-components-fileuploader-file-image-color);
|
|
84
|
+
}
|
|
85
|
+
.amplify-fileuploader__file__image img {
|
|
86
|
+
max-height: 100%;
|
|
87
|
+
}
|
|
88
|
+
.amplify-fileuploader__file__status--error {
|
|
89
|
+
color: var(--amplify-colors-font-error);
|
|
90
|
+
font-size: var(--amplify-components-fileuploader-file-size-font-size);
|
|
91
|
+
}
|
|
92
|
+
.amplify-fileuploader__file__status--success {
|
|
93
|
+
color: var(--amplify-colors-font-success);
|
|
94
|
+
}
|
|
95
|
+
.amplify-fileuploader__loader {
|
|
96
|
+
stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
|
|
97
|
+
stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
|
|
98
|
+
stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
|
|
99
|
+
height: var(--amplify-components-fileuploader-loader-stroke-width);
|
|
100
|
+
--amplify-components-loader-linear-stroke-filled: var(
|
|
101
|
+
--amplify-components-fileuploader-loader-stroke-filled
|
|
102
|
+
);
|
|
103
|
+
overflow: hidden;
|
|
104
|
+
position: absolute;
|
|
105
|
+
bottom: 0;
|
|
106
|
+
left: 0;
|
|
107
|
+
width: 100%;
|
|
108
|
+
}
|
|
109
|
+
.amplify-fileuploader__previewer {
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-direction: column;
|
|
112
|
+
max-width: var(--amplify-components-fileuploader-previewer-max-width);
|
|
113
|
+
max-height: var(--amplify-components-fileuploader-previewer-max-height);
|
|
114
|
+
overflow: auto;
|
|
115
|
+
gap: var(--amplify-components-fileuploader-previewer-body-gap);
|
|
116
|
+
padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
|
|
117
|
+
padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
|
|
118
|
+
background-color: var(--amplify-components-fileuploader-previewer-background-color);
|
|
119
|
+
border-width: var(--amplify-components-fileuploader-previewer-border-width);
|
|
120
|
+
border-style: var(--amplify-components-fileuploader-previewer-border-style);
|
|
121
|
+
border-color: var(--amplify-components-fileuploader-previewer-border-color);
|
|
122
|
+
border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
|
|
123
|
+
}
|
|
124
|
+
.amplify-fileuploader__previewer__text {
|
|
125
|
+
font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
|
|
126
|
+
font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
|
|
127
|
+
color: var(--amplify-components-fileuploader-previewer-text-color);
|
|
128
|
+
}
|
|
129
|
+
.amplify-fileuploader__previewer__footer {
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: row;
|
|
132
|
+
justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
|
|
133
|
+
}
|
|
134
|
+
.amplify-fileuploader__previewer__actions {
|
|
135
|
+
display: flex;
|
|
136
|
+
flex-direction: row;
|
|
137
|
+
gap: var(--amplify-space-small);
|
|
138
|
+
}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
@layer amplify.components {
|
|
2
|
+
.amplify-fileuploader__dropzone {
|
|
3
|
+
background-color: var(--amplify-components-fileuploader-dropzone-background-color);
|
|
4
|
+
border-color: var(--amplify-components-fileuploader-dropzone-border-color);
|
|
5
|
+
border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
|
|
6
|
+
border-style: var(--amplify-components-fileuploader-dropzone-border-style);
|
|
7
|
+
border-width: var(--amplify-components-fileuploader-dropzone-border-width);
|
|
8
|
+
text-align: var(--amplify-components-fileuploader-dropzone-text-align);
|
|
9
|
+
padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
|
|
10
|
+
padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
align-items: center;
|
|
14
|
+
gap: var(--amplify-components-fileuploader-dropzone-gap);
|
|
15
|
+
}
|
|
16
|
+
.amplify-fileuploader__dropzone--small {
|
|
17
|
+
flex-direction: row;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
}
|
|
20
|
+
.amplify-fileuploader__dropzone--active {
|
|
21
|
+
border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
|
|
22
|
+
border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
|
|
23
|
+
background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
|
|
24
|
+
}
|
|
25
|
+
.amplify-fileuploader__dropzone__icon {
|
|
26
|
+
font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
|
|
27
|
+
color: var(--amplify-components-fileuploader-dropzone-icon-color);
|
|
28
|
+
}
|
|
29
|
+
.amplify-fileuploader__dropzone__text {
|
|
30
|
+
color: var(--amplify-components-fileuploader-dropzone-text-color);
|
|
31
|
+
font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
|
|
32
|
+
font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
|
|
33
|
+
}
|
|
34
|
+
.amplify-fileuploader__file__list {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
|
|
37
|
+
gap: var(--amplify-components-fileuploader-filelist-gap);
|
|
38
|
+
}
|
|
39
|
+
.amplify-fileuploader__file {
|
|
40
|
+
position: relative;
|
|
41
|
+
border-width: var(--amplify-components-fileuploader-file-border-width);
|
|
42
|
+
border-style: var(--amplify-components-fileuploader-file-border-style);
|
|
43
|
+
border-color: var(--amplify-components-fileuploader-file-border-color);
|
|
44
|
+
border-radius: var(--amplify-components-fileuploader-file-border-radius);
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
|
|
48
|
+
padding-block: var(--amplify-components-fileuploader-file-padding-block);
|
|
49
|
+
align-items: var(--amplify-components-fileuploader-file-align-items);
|
|
50
|
+
}
|
|
51
|
+
.amplify-fileuploader__file__wrapper {
|
|
52
|
+
width: 100%;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: row;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: var(--amplify-components-fileuploader-file-gap);
|
|
57
|
+
}
|
|
58
|
+
.amplify-fileuploader__file__name {
|
|
59
|
+
text-overflow: ellipsis;
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
|
|
62
|
+
font-size: var(--amplify-components-fileuploader-file-name-font-size);
|
|
63
|
+
color: var(--amplify-components-fileuploader-file-name-color);
|
|
64
|
+
}
|
|
65
|
+
.amplify-fileuploader__file__size {
|
|
66
|
+
font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
|
|
67
|
+
font-size: var(--amplify-components-fileuploader-file-size-font-size);
|
|
68
|
+
color: var(--amplify-components-fileuploader-file-size-color);
|
|
69
|
+
}
|
|
70
|
+
.amplify-fileuploader__file__main {
|
|
71
|
+
flex: 1;
|
|
72
|
+
white-space: nowrap;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
}
|
|
75
|
+
.amplify-fileuploader__file__image {
|
|
76
|
+
position: relative;
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
width: var(--amplify-components-fileuploader-file-image-width);
|
|
81
|
+
height: var(--amplify-components-fileuploader-file-image-height);
|
|
82
|
+
background-color: var(--amplify-components-fileuploader-file-image-background-color);
|
|
83
|
+
border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
|
|
84
|
+
color: var(--amplify-components-fileuploader-file-image-color);
|
|
85
|
+
}
|
|
86
|
+
.amplify-fileuploader__file__image img {
|
|
87
|
+
max-height: 100%;
|
|
88
|
+
}
|
|
89
|
+
.amplify-fileuploader__file__status--error {
|
|
90
|
+
color: var(--amplify-colors-font-error);
|
|
91
|
+
font-size: var(--amplify-components-fileuploader-file-size-font-size);
|
|
92
|
+
}
|
|
93
|
+
.amplify-fileuploader__file__status--success {
|
|
94
|
+
color: var(--amplify-colors-font-success);
|
|
95
|
+
}
|
|
96
|
+
.amplify-fileuploader__loader {
|
|
97
|
+
stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
|
|
98
|
+
stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
|
|
99
|
+
stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
|
|
100
|
+
height: var(--amplify-components-fileuploader-loader-stroke-width);
|
|
101
|
+
--amplify-components-loader-linear-stroke-filled: var(
|
|
102
|
+
--amplify-components-fileuploader-loader-stroke-filled
|
|
103
|
+
);
|
|
104
|
+
overflow: hidden;
|
|
105
|
+
position: absolute;
|
|
106
|
+
bottom: 0;
|
|
107
|
+
left: 0;
|
|
108
|
+
width: 100%;
|
|
109
|
+
}
|
|
110
|
+
.amplify-fileuploader__previewer {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
max-width: var(--amplify-components-fileuploader-previewer-max-width);
|
|
114
|
+
max-height: var(--amplify-components-fileuploader-previewer-max-height);
|
|
115
|
+
overflow: auto;
|
|
116
|
+
gap: var(--amplify-components-fileuploader-previewer-body-gap);
|
|
117
|
+
padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
|
|
118
|
+
padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
|
|
119
|
+
background-color: var(--amplify-components-fileuploader-previewer-background-color);
|
|
120
|
+
border-width: var(--amplify-components-fileuploader-previewer-border-width);
|
|
121
|
+
border-style: var(--amplify-components-fileuploader-previewer-border-style);
|
|
122
|
+
border-color: var(--amplify-components-fileuploader-previewer-border-color);
|
|
123
|
+
border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
|
|
124
|
+
}
|
|
125
|
+
.amplify-fileuploader__previewer__text {
|
|
126
|
+
font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
|
|
127
|
+
font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
|
|
128
|
+
color: var(--amplify-components-fileuploader-previewer-text-color);
|
|
129
|
+
}
|
|
130
|
+
.amplify-fileuploader__previewer__footer {
|
|
131
|
+
display: flex;
|
|
132
|
+
flex-direction: row;
|
|
133
|
+
justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
|
|
134
|
+
}
|
|
135
|
+
.amplify-fileuploader__previewer__actions {
|
|
136
|
+
display: flex;
|
|
137
|
+
flex-direction: row;
|
|
138
|
+
gap: var(--amplify-space-small);
|
|
139
|
+
}
|
|
140
|
+
}
|
package/dist/styles/avatar.css
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--avatar-border-color: var(--amplify-components-avatar-border-color);
|
|
7
7
|
--avatar-size: var(--amplify-components-avatar-width);
|
|
8
8
|
--amplify-components-icon-height: 100%;
|
|
9
|
+
position: relative;
|
|
9
10
|
display: inline-flex;
|
|
10
11
|
align-items: center;
|
|
11
12
|
justify-content: center;
|
|
@@ -56,6 +57,9 @@
|
|
|
56
57
|
--avatar-filled-color: var(
|
|
57
58
|
--amplify-components-avatar-warning-background-color
|
|
58
59
|
);
|
|
60
|
+
--amplify-components-loader-stroke-filled: var(
|
|
61
|
+
--amplify-components-avatar-warning-color
|
|
62
|
+
);
|
|
59
63
|
}
|
|
60
64
|
.amplify-avatar--error {
|
|
61
65
|
--avatar-border-color: var(--amplify-components-avatar-error-border-color);
|
|
@@ -69,6 +73,9 @@
|
|
|
69
73
|
--avatar-filled-color: var(
|
|
70
74
|
--amplify-components-avatar-error-background-color
|
|
71
75
|
);
|
|
76
|
+
--amplify-components-loader-stroke-filled: var(
|
|
77
|
+
--amplify-components-avatar-error-color
|
|
78
|
+
);
|
|
72
79
|
}
|
|
73
80
|
.amplify-avatar--info {
|
|
74
81
|
--avatar-border-color: var(--amplify-components-avatar-info-border-color);
|
|
@@ -82,6 +89,9 @@
|
|
|
82
89
|
--avatar-filled-color: var(
|
|
83
90
|
--amplify-components-avatar-info-background-color
|
|
84
91
|
);
|
|
92
|
+
--amplify-components-loader-stroke-filled: var(
|
|
93
|
+
--amplify-components-avatar-info-color
|
|
94
|
+
);
|
|
85
95
|
}
|
|
86
96
|
.amplify-avatar--success {
|
|
87
97
|
--avatar-border-color: var(
|
|
@@ -97,6 +107,9 @@
|
|
|
97
107
|
--avatar-filled-color: var(
|
|
98
108
|
--amplify-components-avatar-success-background-color
|
|
99
109
|
);
|
|
110
|
+
--amplify-components-loader-stroke-filled: var(
|
|
111
|
+
--amplify-components-avatar-success-color
|
|
112
|
+
);
|
|
100
113
|
}
|
|
101
114
|
.amplify-avatar__icon {
|
|
102
115
|
display: flex;
|
|
@@ -108,4 +121,11 @@
|
|
|
108
121
|
-o-object-fit: cover;
|
|
109
122
|
object-fit: cover;
|
|
110
123
|
display: block;
|
|
124
|
+
}
|
|
125
|
+
.amplify-avatar__loader {
|
|
126
|
+
position: absolute;
|
|
127
|
+
inset: 0;
|
|
128
|
+
width: 100%;
|
|
129
|
+
height: 100%;
|
|
130
|
+
stroke: transparent;
|
|
111
131
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
--avatar-border-color: var(--amplify-components-avatar-border-color);
|
|
8
8
|
--avatar-size: var(--amplify-components-avatar-width);
|
|
9
9
|
--amplify-components-icon-height: 100%;
|
|
10
|
+
position: relative;
|
|
10
11
|
display: inline-flex;
|
|
11
12
|
align-items: center;
|
|
12
13
|
justify-content: center;
|
|
@@ -57,6 +58,9 @@
|
|
|
57
58
|
--avatar-filled-color: var(
|
|
58
59
|
--amplify-components-avatar-warning-background-color
|
|
59
60
|
);
|
|
61
|
+
--amplify-components-loader-stroke-filled: var(
|
|
62
|
+
--amplify-components-avatar-warning-color
|
|
63
|
+
);
|
|
60
64
|
}
|
|
61
65
|
.amplify-avatar--error {
|
|
62
66
|
--avatar-border-color: var(--amplify-components-avatar-error-border-color);
|
|
@@ -70,6 +74,9 @@
|
|
|
70
74
|
--avatar-filled-color: var(
|
|
71
75
|
--amplify-components-avatar-error-background-color
|
|
72
76
|
);
|
|
77
|
+
--amplify-components-loader-stroke-filled: var(
|
|
78
|
+
--amplify-components-avatar-error-color
|
|
79
|
+
);
|
|
73
80
|
}
|
|
74
81
|
.amplify-avatar--info {
|
|
75
82
|
--avatar-border-color: var(--amplify-components-avatar-info-border-color);
|
|
@@ -83,6 +90,9 @@
|
|
|
83
90
|
--avatar-filled-color: var(
|
|
84
91
|
--amplify-components-avatar-info-background-color
|
|
85
92
|
);
|
|
93
|
+
--amplify-components-loader-stroke-filled: var(
|
|
94
|
+
--amplify-components-avatar-info-color
|
|
95
|
+
);
|
|
86
96
|
}
|
|
87
97
|
.amplify-avatar--success {
|
|
88
98
|
--avatar-border-color: var(
|
|
@@ -98,6 +108,9 @@
|
|
|
98
108
|
--avatar-filled-color: var(
|
|
99
109
|
--amplify-components-avatar-success-background-color
|
|
100
110
|
);
|
|
111
|
+
--amplify-components-loader-stroke-filled: var(
|
|
112
|
+
--amplify-components-avatar-success-color
|
|
113
|
+
);
|
|
101
114
|
}
|
|
102
115
|
.amplify-avatar__icon {
|
|
103
116
|
display: flex;
|
|
@@ -110,4 +123,11 @@
|
|
|
110
123
|
object-fit: cover;
|
|
111
124
|
display: block;
|
|
112
125
|
}
|
|
126
|
+
.amplify-avatar__loader {
|
|
127
|
+
position: absolute;
|
|
128
|
+
inset: 0;
|
|
129
|
+
width: 100%;
|
|
130
|
+
height: 100%;
|
|
131
|
+
stroke: transparent;
|
|
132
|
+
}
|
|
113
133
|
}
|