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
Branches
Tags
37 merge requests!8528Issue #3456871 by Tim Bozeman: Support NULL services,!8323Fix source code editing and in place front page site studio editing.,!6278Issue #3187770 by godotislate, smustgrave, catch, quietone: Views Rendered...,!3878Removed unused condition head title for views,!38582585169-10.1.x,!3818Issue #2140179: $entity->original gets stale between updates,!3742Issue #3328429: Create item list field formatter for displaying ordered and unordered lists,!3731Claro: role=button on status report items,!3668Resolve #3347842 "Deprecate the trusted",!3651Issue #3347736: Create new SDC component for Olivero (header-search),!3546refactored dialog.pcss file,!3531Issue #3336994: StringFormatter always displays links to entity even if the user in context does not have access,!3502Issue #3335308: Confusing behavior with FormState::setFormState and FormState::setMethod,!3452Issue #3332701: Refactor Claro's tablesort-indicator stylesheet,!3355Issue #3209129: Scrolling problems when adding a block via layout builder,!3226Issue #2987537: Custom menu link entity type should not declare "bundle" entity key,!3154Fixes #2987987 - CSRF token validation broken on routes with optional parameters.,!3147Issue #3328457: Replace most substr($a, $i) where $i is negative with str_ends_with(),!3146Issue #3328456: Replace substr($a, 0, $i) with str_starts_with(),!3133core/modules/system/css/components/hidden.module.css,!2964Issue #2865710 : Dependencies from only one instance of a widget are used in display modes,!2812Issue #3312049: [Followup] Fix Drupal.Commenting.FunctionComment.MissingReturnType returns for NULL,!2614Issue #2981326: Replace non-test usages of \Drupal::logger() with IoC injection,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2334Issue #3228209: Add hasRole() method to AccountInterface,!2062Issue #3246454: Add weekly granularity to views date sort,!1255Issue #3238922: Refactor (if feasible) uses of the jQuery serialize function to use vanillaJS,!1105Issue #3025039: New non translatable field on translatable content throws error,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!877Issue #2708101: Default value for link text is not saved,!844Resolve #3036010 "Updaters",!673Issue #3214208: FinishResponseSubscriber could create duplicate headers,!617Issue #3043725: Provide a Entity Handler for user cancelation,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493
Pipeline #55662 failed
Pipeline: drupal

#55669

    Pipeline: drupal

    #55668

      Pipeline: drupal

      #55667

        +1
        ......@@ -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);
        }
        ......@@ -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% Loading or .
        You are about to add 0 people to the discussion. Proceed with caution.
        Please register or to comment