💄(react) improve FileUploader style
Based on recent QA feedbacks we needed to do small changes to the style of the FileUploader.
This commit is contained in:
5
.changeset/quick-rings-leave.md
Normal file
5
.changeset/quick-rings-leave.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@openfun/cunningham-react": minor
|
||||
---
|
||||
|
||||
improve FileUploader style
|
||||
@@ -40,7 +40,7 @@ export const FileUploaderMulti = forwardRef<
|
||||
<span>{formatBytes(file.size)}</span>
|
||||
<Button
|
||||
color="tertiary"
|
||||
size="small"
|
||||
size="nano"
|
||||
aria-label={t(
|
||||
"components.forms.file_uploader.delete_file_name",
|
||||
{
|
||||
|
||||
@@ -93,13 +93,14 @@
|
||||
font-size: var(--c--components--forms-fileuploader--file-text-size);
|
||||
font-weight: var(--c--components--forms-fileuploader--file-text-weight);
|
||||
color: var(--c--components--forms-fileuploader--file-text-color);
|
||||
height: 2.5rem;
|
||||
padding: 0 .75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
&__name {
|
||||
padding: 0.5rem;
|
||||
min-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@@ -112,6 +113,7 @@
|
||||
font-size: var(--c--components--forms-fileuploader--file-specs-size);
|
||||
color: var(--c--components--forms-fileuploader--file-specs-color);
|
||||
flex-shrink: 0;
|
||||
gap: 0.5rem;
|
||||
|
||||
.material-icons {
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -4,7 +4,7 @@ export const tokens = (defaults: DefaultTokens) => ({
|
||||
"background-color": "white",
|
||||
"border-color": defaults.theme.colors["greyscale-300"],
|
||||
"border-radius": "0.5rem",
|
||||
"border-width": "1px",
|
||||
"border-width": "2px",
|
||||
"border-style": "dotted",
|
||||
"background-color--active": defaults.theme.colors["primary-100"],
|
||||
color: defaults.theme.colors["greyscale-900"],
|
||||
|
||||
@@ -160,7 +160,7 @@
|
||||
--c--components--forms-fileuploader--background-color: white;
|
||||
--c--components--forms-fileuploader--border-color: var(--c--theme--colors--greyscale-300);
|
||||
--c--components--forms-fileuploader--border-radius: 0.5rem;
|
||||
--c--components--forms-fileuploader--border-width: 1px;
|
||||
--c--components--forms-fileuploader--border-width: 2px;
|
||||
--c--components--forms-fileuploader--border-style: dotted;
|
||||
--c--components--forms-fileuploader--background-color--active: var(--c--theme--colors--primary-100);
|
||||
--c--components--forms-fileuploader--color: var(--c--theme--colors--greyscale-900);
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user