Skip to content
Snippets Groups Projects
Verified Commit 86a0d306 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3303550 by Gauravvvv, Aditya4478, rpayanm, bnjmnm, _utsavsharma,... 

Issue #3303550 by Gauravvvv, Aditya4478, rpayanm, bnjmnm, _utsavsharma, smustgrave, sasanikolic, nod_: Refactor Claro's form--managed-file stylesheet
parent cc1bc30d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
core/themes/claro/css/components/form--managed-file.css
+ 71
− 87
View file @ 86a0d306
......@@ -32,35 +32,21 @@
}
/**
* The main element of the file/image widget.
*
* This contains the upload input and the upload of the empty file/image
* widgets, or the file name (with icon and size) and the remove button of
* filled widgets.
*
* The inline-flex display shrinks the width to the minimal needed amount. This
* helps to keep the remove as close to the other elements as possible.
*/
.form-managed-file__main {
display: inline-flex;
align-items: center;
max-width: 100%;
}
* Modify component defaults for file/image widgets.
*/
/**
* Inside (draggable) tables, this should be flex-displayed. This keeps even
* long file names in the same visual line where the drag handle is.
*/
* File component style overrides for managed file widgets.
*/
.draggable .form-managed-file.has-value .form-managed-file__main {
display: flex;
.form-managed-file .file {
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
/* Add some bottom margin for single widgets if no meta is present. */
.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
margin-bottom: var(--space-m);
.form-managed-file .file__size {
word-break: normal;
}
/**
......@@ -82,15 +68,36 @@
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-top: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
margin-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
}
.form-managed-file__meta .form-element {
width: 100%;
}
/**
* In tables, this should be inline-flex. This is needed to make this element be
* pushed to a new line, to the bottom of the drag handle.
*/
* Limiting the width of form items inside the meta element.
*/
.form-managed-file__meta .form-item {
max-width: var(--file-widget-form-item-max-width);
margin-block: 0 var(--space-m); /* Top margin is added by the parent element */
/**
* Reduce the bottom margin of the last 'meta' form-item for field multiple
* tables.
*/
}
.form-managed-file__meta .form-item:last-child {
margin-block-end: var(--space-xs);
}
.draggable .form-managed-file.has-value .form-managed-file__meta {
/**
* In tables, this should be inline-flex. This is needed to make this element be
* pushed to a new line, to the bottom of the drag handle.
*/
display: inline-flex;
}
......@@ -103,27 +110,21 @@
.form-managed-file__image-preview {
flex: 0 0 auto;
max-width: 100%;
margin-bottom: var(--space-m);
margin-block-end: var(--space-m);
}
/* Add some 'end' margin if there are other meta inputs. */
.form-managed-file.has-meta .form-managed-file__image-preview {
margin-right: var(--space-m); /* LTR */
}
[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
margin-right: 0;
margin-left: var(--space-m);
/* Add some 'end' margin if there are other meta inputs. */
margin-inline-end: var(--space-m);
}
/**
* If this is rendered inside a file multiple table and there are no alt or
* title, we have to reduce the amount of the bottom margin.
*/
* If this is rendered inside a file multiple table and there are no alt or
* title, we have to reduce the amount of the bottom margin.
*/
td .form-managed-file.no-meta .form-managed-file__image-preview {
margin-bottom: var(--space-xs);
margin-block-end: var(--space-xs);
}
/**
......@@ -143,73 +144,57 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
}
/**
* Modify component defaults for file/image widgets.
*/
/**
* File component style overrides for managed file widgets.
* The main element of the file/image widget.
*
* This contains the upload input and the upload of the empty file/image
* widgets, or the file name (with icon and size) and the remove button of
* filled widgets.
*
* The inline-flex display shrinks the width to the minimal needed amount. This
* helps to keep the remove as close to the other elements as possible.
*/
.form-managed-file .file {
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
.form-managed-file .file__size {
word-break: normal;
.form-managed-file__main {
display: inline-flex;
align-items: center;
max-width: 100%;
}
.form-managed-file__main .file {
flex: 1 1 auto;
margin: var(--space-xs) var(--space-m) var(--space-xs) 0; /* LTR */
}
[dir="rtl"] .form-managed-file__main .file {
margin-right: 0;
margin-left: var(--space-m);
margin-block: var(--space-xs);
margin-inline: 0 var(--space-m);
}
/**
* The file upload input.
*/
/* The file upload input. */
.form-managed-file__main .form-element--api-file {
flex: 1 1 auto;
}
/**
* Remove the default button margins and prevent shrinking or growing buttons.
* This applies both on the 'no-js' upload button and the remove button. The
* weight of this ruleset has been increase for this to take effect on RTL.
*/
* Remove the default button margins and prevent shrinking or growing buttons.
* This applies both on the 'no-js' upload button and the remove button. The
* weight of this ruleset has been increase for this to take effect on RTL.
*/
.form-managed-file__main .button.button {
flex: 0 0 auto;
margin: 0;
}
/**
* Limiting the width of form items inside the meta element.
*/
.form-managed-file__meta .form-item {
max-width: var(--file-widget-form-item-max-width);
margin-top: 0; /* Top margin is added by the parent element */
margin-bottom: var(--space-m);
}
/**
* Reduce the bottom margin of the last 'meta' form-item for field multiple
* tables.
*/
/* Add some bottom margin for single widgets if no meta is present. */
.form-managed-file__meta .form-item:last-child {
margin-bottom: var(--space-xs);
.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
margin-block-end: var(--space-m);
}
.form-managed-file__meta .form-element {
width: 100%;
.draggable .form-managed-file.has-value .form-managed-file__main {
/**
* Inside (draggable) tables, this should be flex-displayed. This keeps even
* long file names in the same visual line where the drag handle is.
*/
display: flex;
}
/**
......@@ -217,6 +202,5 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
*/
.file-widget-multiple.has-table .form-type--managed-file {
margin-right: var(--space-m);
margin-left: var(--space-m);
margin-inline: var(--space-m);
}
core/themes/claro/css/components/form--managed-file.pcss.css
+ 112
− 122
View file @ 86a0d306
......@@ -13,43 +13,31 @@
/**
* The root element of the file/image widget.
*/
.form-managed-file.no-upload {
display: inline-flex;
flex-direction: column;
max-width: 100%;
}
.form-managed-file.has-value.is-multiple {
display: block;
}
/**
* The main element of the file/image widget.
*
* This contains the upload input and the upload of the empty file/image
* widgets, or the file name (with icon and size) and the remove button of
* filled widgets.
*
* The inline-flex display shrinks the width to the minimal needed amount. This
* helps to keep the remove as close to the other elements as possible.
*/
.form-managed-file__main {
display: inline-flex;
align-items: center;
max-width: 100%;
}
/**
* Inside (draggable) tables, this should be flex-displayed. This keeps even
* long file names in the same visual line where the drag handle is.
*/
.draggable .form-managed-file.has-value .form-managed-file__main {
display: flex;
}
/* Add some bottom margin for single widgets if no meta is present. */
.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
margin-bottom: var(--space-m);
.form-managed-file {
&.no-upload {
display: inline-flex;
flex-direction: column;
max-width: 100%;
}
&.has-value.is-multiple {
display: block;
}
/**
* Modify component defaults for file/image widgets.
*/
/**
* File component style overrides for managed file widgets.
*/
& .file {
word-break: break-all;
hyphens: auto;
}
& .file__size {
word-break: normal;
}
}
/**
......@@ -70,15 +58,35 @@
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-top: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
}
/**
* In tables, this should be inline-flex. This is needed to make this element be
* pushed to a new line, to the bottom of the drag handle.
*/
.draggable .form-managed-file.has-value .form-managed-file__meta {
display: inline-flex;
margin-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
& .form-element {
width: 100%;
}
/**
* Limiting the width of form items inside the meta element.
*/
& .form-item {
max-width: var(--file-widget-form-item-max-width);
margin-block: 0 var(--space-m); /* Top margin is added by the parent element */
/**
* Reduce the bottom margin of the last 'meta' form-item for field multiple
* tables.
*/
&:last-child {
margin-block-end: var(--space-xs);
}
}
@nest .draggable .form-managed-file.has-value & {
/**
* In tables, this should be inline-flex. This is needed to make this element be
* pushed to a new line, to the bottom of the drag handle.
*/
display: inline-flex;
}
}
/**
......@@ -89,24 +97,20 @@
.form-managed-file__image-preview {
flex: 0 0 auto;
max-width: 100%;
margin-bottom: var(--space-m);
}
margin-block-end: var(--space-m);
/* Add some 'end' margin if there are other meta inputs. */
.form-managed-file.has-meta .form-managed-file__image-preview {
margin-right: var(--space-m); /* LTR */
}
[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
margin-right: 0;
margin-left: var(--space-m);
}
@nest .form-managed-file.has-meta & {
/* Add some 'end' margin if there are other meta inputs. */
margin-inline-end: var(--space-m);
}
/**
* If this is rendered inside a file multiple table and there are no alt or
* title, we have to reduce the amount of the bottom margin.
*/
td .form-managed-file.no-meta .form-managed-file__image-preview {
margin-bottom: var(--space-xs);
/**
* If this is rendered inside a file multiple table and there are no alt or
* title, we have to reduce the amount of the bottom margin.
*/
@nest td .form-managed-file.no-meta & {
margin-block-end: var(--space-xs);
}
}
/**
......@@ -125,72 +129,58 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
}
/**
* Modify component defaults for file/image widgets.
*/
/**
* File component style overrides for managed file widgets.
*/
.form-managed-file .file {
word-break: break-all;
hyphens: auto;
}
.form-managed-file .file__size {
word-break: normal;
}
.form-managed-file__main .file {
flex: 1 1 auto;
margin: var(--space-xs) var(--space-m) var(--space-xs) 0; /* LTR */
}
[dir="rtl"] .form-managed-file__main .file {
margin-right: 0;
margin-left: var(--space-m);
}
/**
* The file upload input.
*/
.form-managed-file__main .form-element--api-file {
flex: 1 1 auto;
}
/**
* Remove the default button margins and prevent shrinking or growing buttons.
* This applies both on the 'no-js' upload button and the remove button. The
* weight of this ruleset has been increase for this to take effect on RTL.
*/
.form-managed-file__main .button.button {
flex: 0 0 auto;
margin: 0;
}
/**
* Limiting the width of form items inside the meta element.
*/
.form-managed-file__meta .form-item {
max-width: var(--file-widget-form-item-max-width);
margin-top: 0; /* Top margin is added by the parent element */
margin-bottom: var(--space-m);
}
/**
* Reduce the bottom margin of the last 'meta' form-item for field multiple
* tables.
* The main element of the file/image widget.
*
* This contains the upload input and the upload of the empty file/image
* widgets, or the file name (with icon and size) and the remove button of
* filled widgets.
*
* The inline-flex display shrinks the width to the minimal needed amount. This
* helps to keep the remove as close to the other elements as possible.
*/
.form-managed-file__meta .form-item:last-child {
margin-bottom: var(--space-xs);
}
.form-managed-file__main {
display: inline-flex;
align-items: center;
max-width: 100%;
.form-managed-file__meta .form-element {
width: 100%;
& .file {
flex: 1 1 auto;
margin-block: var(--space-xs);
margin-inline: 0 var(--space-m);
}
/* The file upload input. */
& .form-element--api-file {
flex: 1 1 auto;
}
/**
* Remove the default button margins and prevent shrinking or growing buttons.
* This applies both on the 'no-js' upload button and the remove button. The
* weight of this ruleset has been increase for this to take effect on RTL.
*/
& .button.button {
flex: 0 0 auto;
margin: 0;
}
/* Add some bottom margin for single widgets if no meta is present. */
@nest .form-managed-file.is-single.has-value &:last-child {
margin-block-end: var(--space-m);
}
@nest .draggable .form-managed-file.has-value & {
/**
* Inside (draggable) tables, this should be flex-displayed. This keeps even
* long file names in the same visual line where the drag handle is.
*/
display: flex;
}
}
/**
* Add side margins if a table precedes the managed file form element.
*/
.file-widget-multiple.has-table .form-type--managed-file {
margin-right: var(--space-m);
margin-left: var(--space-m);
margin-inline: var(--space-m);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment