💄(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>
|
<span>{formatBytes(file.size)}</span>
|
||||||
<Button
|
<Button
|
||||||
color="tertiary"
|
color="tertiary"
|
||||||
size="small"
|
size="nano"
|
||||||
aria-label={t(
|
aria-label={t(
|
||||||
"components.forms.file_uploader.delete_file_name",
|
"components.forms.file_uploader.delete_file_name",
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -93,13 +93,14 @@
|
|||||||
font-size: var(--c--components--forms-fileuploader--file-text-size);
|
font-size: var(--c--components--forms-fileuploader--file-text-size);
|
||||||
font-weight: var(--c--components--forms-fileuploader--file-text-weight);
|
font-weight: var(--c--components--forms-fileuploader--file-text-weight);
|
||||||
color: var(--c--components--forms-fileuploader--file-text-color);
|
color: var(--c--components--forms-fileuploader--file-text-color);
|
||||||
|
height: 2.5rem;
|
||||||
|
padding: 0 .75rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
padding: 0.5rem;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -112,6 +113,7 @@
|
|||||||
font-size: var(--c--components--forms-fileuploader--file-specs-size);
|
font-size: var(--c--components--forms-fileuploader--file-specs-size);
|
||||||
color: var(--c--components--forms-fileuploader--file-specs-color);
|
color: var(--c--components--forms-fileuploader--file-specs-color);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
.material-icons {
|
.material-icons {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ export const tokens = (defaults: DefaultTokens) => ({
|
|||||||
"background-color": "white",
|
"background-color": "white",
|
||||||
"border-color": defaults.theme.colors["greyscale-300"],
|
"border-color": defaults.theme.colors["greyscale-300"],
|
||||||
"border-radius": "0.5rem",
|
"border-radius": "0.5rem",
|
||||||
"border-width": "1px",
|
"border-width": "2px",
|
||||||
"border-style": "dotted",
|
"border-style": "dotted",
|
||||||
"background-color--active": defaults.theme.colors["primary-100"],
|
"background-color--active": defaults.theme.colors["primary-100"],
|
||||||
color: defaults.theme.colors["greyscale-900"],
|
color: defaults.theme.colors["greyscale-900"],
|
||||||
|
|||||||
@@ -160,7 +160,7 @@
|
|||||||
--c--components--forms-fileuploader--background-color: white;
|
--c--components--forms-fileuploader--background-color: white;
|
||||||
--c--components--forms-fileuploader--border-color: var(--c--theme--colors--greyscale-300);
|
--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-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--border-style: dotted;
|
||||||
--c--components--forms-fileuploader--background-color--active: var(--c--theme--colors--primary-100);
|
--c--components--forms-fileuploader--background-color--active: var(--c--theme--colors--primary-100);
|
||||||
--c--components--forms-fileuploader--color: var(--c--theme--colors--greyscale-900);
|
--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