From b51d68a746a23038db0dec960b406341261c2151 Mon Sep 17 00:00:00 2001 From: Nitin Shrivastava <61485-Nitin_shrivastava@users.noreply.drupalcode.org> Date: Wed, 29 Nov 2023 10:00:57 +0000 Subject: [PATCH 1/8] Update ui-dialog.css --- .../olivero/css/components/ui-dialog.css | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/core/themes/olivero/css/components/ui-dialog.css b/core/themes/olivero/css/components/ui-dialog.css index ef0721e67c7d..10cca67c9e86 100644 --- a/core/themes/olivero/css/components/ui-dialog.css +++ b/core/themes/olivero/css/components/ui-dialog.css @@ -33,3 +33,37 @@ .ui-dialog { z-index: 1260; } + + +.ui-dialog .ui-dialog-content{ + padding: 0; +} + +.ui-dialog-content #media-library-wrapper{ + display: flex; +} + +.ui-dialog-content #media-library-content{ + padding: 0 16px; +} + +.ui-dialog-content #media-library-wrapper .js-media-library-menu{ + margin: 0; +} + +.ui-dialog-content #media-library-wrapper .js-media-library-menu li a{ + text-decoration: none; +} + +.ui-dialog-content #media-library-wrapper .js-media-library-menu li{ + list-style-type: none; + padding: 8px 24px; + margin-bottom: 8px; + background-color: #e9e9e9; +} + +.ui-dialog-content .js-media-library-view > .view-header, +.ui-dialog-content .js-media-library-view > .view-filters, +.ui-dialog-content .js-media-library-view > .view-content{ + margin-bottom: 0; +} -- GitLab From 10d4f7338b94b276c90713eb19b2f419d74b5a18 Mon Sep 17 00:00:00 2001 From: Nitin Shrivastava <61485-Nitin_shrivastava@users.noreply.drupalcode.org> Date: Wed, 29 Nov 2023 10:03:10 +0000 Subject: [PATCH 2/8] Update ui-dialog.pcss.css --- .../olivero/css/components/ui-dialog.pcss.css | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/core/themes/olivero/css/components/ui-dialog.pcss.css b/core/themes/olivero/css/components/ui-dialog.pcss.css index 1bfb025ef506..2a7532b40c0c 100644 --- a/core/themes/olivero/css/components/ui-dialog.pcss.css +++ b/core/themes/olivero/css/components/ui-dialog.pcss.css @@ -28,3 +28,37 @@ .ui-dialog { z-index: 1260; } + + +.ui-dialog .ui-dialog-content{ + padding: 0; +} + +.ui-dialog-content #media-library-wrapper{ + display: flex; +} + +.ui-dialog-content #media-library-content{ + padding: 0 16px; +} + +.ui-dialog-content #media-library-wrapper .js-media-library-menu{ + margin: 0; +} + +.ui-dialog-content #media-library-wrapper .js-media-library-menu li a{ + text-decoration: none; +} + +.ui-dialog-content #media-library-wrapper .js-media-library-menu li{ + list-style-type: none; + padding: 8px 24px; + margin-bottom: 8px; + background-color: #e9e9e9; +} + +.ui-dialog-content .js-media-library-view > .view-header, +.ui-dialog-content .js-media-library-view > .view-filters, +.ui-dialog-content .js-media-library-view > .view-content{ + margin-bottom: 0; +} -- GitLab From 25e14df4ac803b90f60068cb6e145d698a73c276 Mon Sep 17 00:00:00 2001 From: Shweta Sharma Date: Wed, 29 Nov 2023 19:10:09 +0530 Subject: [PATCH 3/8] 3404866-drupal-media-modal: Fixed the coding standards. --- .../olivero/css/components/ui-dialog.css | 18 +++++++++--------- .../olivero/css/components/ui-dialog.pcss.css | 16 ++++++++-------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/core/themes/olivero/css/components/ui-dialog.css b/core/themes/olivero/css/components/ui-dialog.css index 10cca67c9e86..800668f3a70c 100644 --- a/core/themes/olivero/css/components/ui-dialog.css +++ b/core/themes/olivero/css/components/ui-dialog.css @@ -35,35 +35,35 @@ } -.ui-dialog .ui-dialog-content{ +.ui-dialog .ui-dialog-content { padding: 0; } -.ui-dialog-content #media-library-wrapper{ +.ui-dialog-content #media-library-wrapper { display: flex; } -.ui-dialog-content #media-library-content{ +.ui-dialog-content #media-library-content { padding: 0 16px; } -.ui-dialog-content #media-library-wrapper .js-media-library-menu{ +.ui-dialog-content #media-library-wrapper .js-media-library-menu { margin: 0; } -.ui-dialog-content #media-library-wrapper .js-media-library-menu li a{ +.ui-dialog-content #media-library-wrapper .js-media-library-menu li a { text-decoration: none; } -.ui-dialog-content #media-library-wrapper .js-media-library-menu li{ - list-style-type: none; - padding: 8px 24px; +.ui-dialog-content #media-library-wrapper .js-media-library-menu li { margin-bottom: 8px; + padding: 8px 24px; + list-style-type: none; background-color: #e9e9e9; } .ui-dialog-content .js-media-library-view > .view-header, .ui-dialog-content .js-media-library-view > .view-filters, -.ui-dialog-content .js-media-library-view > .view-content{ +.ui-dialog-content .js-media-library-view > .view-content { margin-bottom: 0; } diff --git a/core/themes/olivero/css/components/ui-dialog.pcss.css b/core/themes/olivero/css/components/ui-dialog.pcss.css index 2a7532b40c0c..e2f0fa3af924 100644 --- a/core/themes/olivero/css/components/ui-dialog.pcss.css +++ b/core/themes/olivero/css/components/ui-dialog.pcss.css @@ -34,31 +34,31 @@ padding: 0; } -.ui-dialog-content #media-library-wrapper{ +.ui-dialog-content #media-library-wrapper { display: flex; } -.ui-dialog-content #media-library-content{ +.ui-dialog-content #media-library-content { padding: 0 16px; } -.ui-dialog-content #media-library-wrapper .js-media-library-menu{ +.ui-dialog-content #media-library-wrapper .js-media-library-menu { margin: 0; } -.ui-dialog-content #media-library-wrapper .js-media-library-menu li a{ +.ui-dialog-content #media-library-wrapper .js-media-library-menu li a { text-decoration: none; } -.ui-dialog-content #media-library-wrapper .js-media-library-menu li{ - list-style-type: none; - padding: 8px 24px; +.ui-dialog-content #media-library-wrapper .js-media-library-menu li { margin-bottom: 8px; + padding: 8px 24px; + list-style-type: none; background-color: #e9e9e9; } .ui-dialog-content .js-media-library-view > .view-header, .ui-dialog-content .js-media-library-view > .view-filters, -.ui-dialog-content .js-media-library-view > .view-content{ +.ui-dialog-content .js-media-library-view > .view-content { margin-bottom: 0; } -- GitLab From 4ef4e766cbdbe44401f77fe4c5d2e80ad7527537 Mon Sep 17 00:00:00 2001 From: Shweta Sharma Date: Wed, 29 Nov 2023 19:18:24 +0530 Subject: [PATCH 4/8] Update ui-dialog.pcss.css file. --- core/themes/olivero/css/components/ui-dialog.pcss.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/themes/olivero/css/components/ui-dialog.pcss.css b/core/themes/olivero/css/components/ui-dialog.pcss.css index e2f0fa3af924..0aab2ca28efd 100644 --- a/core/themes/olivero/css/components/ui-dialog.pcss.css +++ b/core/themes/olivero/css/components/ui-dialog.pcss.css @@ -30,7 +30,7 @@ } -.ui-dialog .ui-dialog-content{ +.ui-dialog .ui-dialog-content { padding: 0; } -- GitLab From 703cf3f57ba7de02da420550c25bfa1507048411 Mon Sep 17 00:00:00 2001 From: Gaurav Mahlawat Date: Thu, 7 Dec 2023 09:55:01 +0530 Subject: [PATCH 5/8] Updated logical properties and fixed linting --- core/themes/olivero/css/components/ui-dialog.css | 11 +++++------ core/themes/olivero/css/components/ui-dialog.pcss.css | 5 ++--- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/core/themes/olivero/css/components/ui-dialog.css b/core/themes/olivero/css/components/ui-dialog.css index 800668f3a70c..e8a1fc789370 100644 --- a/core/themes/olivero/css/components/ui-dialog.css +++ b/core/themes/olivero/css/components/ui-dialog.css @@ -11,8 +11,7 @@ */ .ui-dialog .ui-dialog-buttonpane { - padding-inline-start: 0.2em; - padding-inline-end: 0.2em; + padding-inline: 0.2em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { @@ -34,7 +33,6 @@ z-index: 1260; } - .ui-dialog .ui-dialog-content { padding: 0; } @@ -44,7 +42,7 @@ } .ui-dialog-content #media-library-content { - padding: 0 16px; + padding: 0 1rem; } .ui-dialog-content #media-library-wrapper .js-media-library-menu { @@ -52,12 +50,13 @@ } .ui-dialog-content #media-library-wrapper .js-media-library-menu li a { + -webkit-text-decoration: none; text-decoration: none; } .ui-dialog-content #media-library-wrapper .js-media-library-menu li { - margin-bottom: 8px; - padding: 8px 24px; + margin-block-end: 0.5rem; + padding: 0.5rem 1.5rem; list-style-type: none; background-color: #e9e9e9; } diff --git a/core/themes/olivero/css/components/ui-dialog.pcss.css b/core/themes/olivero/css/components/ui-dialog.pcss.css index 0aab2ca28efd..f993955193ea 100644 --- a/core/themes/olivero/css/components/ui-dialog.pcss.css +++ b/core/themes/olivero/css/components/ui-dialog.pcss.css @@ -5,8 +5,7 @@ .ui-dialog { & .ui-dialog-buttonpane { - padding-inline-start: 0.2em; - padding-inline-end: 0.2em; + padding-inline: 0.2em; & .ui-dialog-buttonset { display: flex; @@ -51,7 +50,7 @@ } .ui-dialog-content #media-library-wrapper .js-media-library-menu li { - margin-bottom: 8px; + margin-block-end: 8px; padding: 8px 24px; list-style-type: none; background-color: #e9e9e9; -- GitLab From de638d45909e7492687d6ea0279015a3d2cf56b0 Mon Sep 17 00:00:00 2001 From: Gaurav Mahlawat Date: Fri, 8 Dec 2023 09:32:59 +0530 Subject: [PATCH 6/8] Added missing variables in media-library.pcss.css file --- core/themes/claro/css/theme/media-library.css | 22 +++++++++++ .../claro/css/theme/media-library.pcss.css | 22 +++++++++++ .../olivero/css/components/ui-dialog.css | 37 +------------------ .../olivero/css/components/ui-dialog.pcss.css | 37 +------------------ 4 files changed, 48 insertions(+), 70 deletions(-) diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css index 951f95d85f6e..f14cb5e88f14 100644 --- a/core/themes/claro/css/theme/media-library.css +++ b/core/themes/claro/css/theme/media-library.css @@ -16,6 +16,28 @@ * positioning that would otherwise hide the active tab indicator on the left. */ +:root { + --vertical-tabs-margin-vertical: var(--space-s); + --vertical-tabs-border-radius: var(--details-accordion-border-size-radius); + --vertical-tabs-shadow: var(--details-box-shadow); + --vertical-tabs-border-color: var(--details-border-color); + --vertical-tabs-border-size: 1px; + --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color); + --vertical-tabs-menu-item-shadow-extraspace: 0.5rem; + --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2); + --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1); + --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); + --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); + --vertical-tabs-menu-separator-color: var(--color-gray-200); + --vertical-tabs-menu-separator-size: 1px; + --vertical-tabs-menu-width: 20em; + --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width)); + --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size); + --vertical-tabs-menu-link--active-border-size: 0.25rem; + --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero); + --vertical-tabs-menu--z-index: 0; +} + .media-library-wrapper { display: flex; margin: -1rem -1.5rem -1rem -1rem; /* LTR */ diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css index 318b4339b0ea..c06d69920ab8 100644 --- a/core/themes/claro/css/theme/media-library.pcss.css +++ b/core/themes/claro/css/theme/media-library.pcss.css @@ -8,6 +8,28 @@ * Negative margins compensate for modal dialog padding and compensate for * positioning that would otherwise hide the active tab indicator on the left. */ + :root { + --vertical-tabs-margin-vertical: var(--space-s); + --vertical-tabs-border-radius: var(--details-accordion-border-size-radius); + --vertical-tabs-shadow: var(--details-box-shadow); + --vertical-tabs-border-color: var(--details-border-color); + --vertical-tabs-border-size: 1px; + --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color); + --vertical-tabs-menu-item-shadow-extraspace: 0.5rem; + --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2); + --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1); + --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); + --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); + --vertical-tabs-menu-separator-color: var(--color-gray-200); + --vertical-tabs-menu-separator-size: 1px; + --vertical-tabs-menu-width: 20em; + --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width)); + --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size); + --vertical-tabs-menu-link--active-border-size: 4px; + --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero); + --vertical-tabs-menu--z-index: 0; +} + .media-library-wrapper { display: flex; margin: -1rem -1.5rem -1rem -1rem; /* LTR */ diff --git a/core/themes/olivero/css/components/ui-dialog.css b/core/themes/olivero/css/components/ui-dialog.css index e8a1fc789370..ef0721e67c7d 100644 --- a/core/themes/olivero/css/components/ui-dialog.css +++ b/core/themes/olivero/css/components/ui-dialog.css @@ -11,7 +11,8 @@ */ .ui-dialog .ui-dialog-buttonpane { - padding-inline: 0.2em; + padding-inline-start: 0.2em; + padding-inline-end: 0.2em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { @@ -32,37 +33,3 @@ .ui-dialog { z-index: 1260; } - -.ui-dialog .ui-dialog-content { - padding: 0; -} - -.ui-dialog-content #media-library-wrapper { - display: flex; -} - -.ui-dialog-content #media-library-content { - padding: 0 1rem; -} - -.ui-dialog-content #media-library-wrapper .js-media-library-menu { - margin: 0; -} - -.ui-dialog-content #media-library-wrapper .js-media-library-menu li a { - -webkit-text-decoration: none; - text-decoration: none; -} - -.ui-dialog-content #media-library-wrapper .js-media-library-menu li { - margin-block-end: 0.5rem; - padding: 0.5rem 1.5rem; - list-style-type: none; - background-color: #e9e9e9; -} - -.ui-dialog-content .js-media-library-view > .view-header, -.ui-dialog-content .js-media-library-view > .view-filters, -.ui-dialog-content .js-media-library-view > .view-content { - margin-bottom: 0; -} diff --git a/core/themes/olivero/css/components/ui-dialog.pcss.css b/core/themes/olivero/css/components/ui-dialog.pcss.css index f993955193ea..1bfb025ef506 100644 --- a/core/themes/olivero/css/components/ui-dialog.pcss.css +++ b/core/themes/olivero/css/components/ui-dialog.pcss.css @@ -5,7 +5,8 @@ .ui-dialog { & .ui-dialog-buttonpane { - padding-inline: 0.2em; + padding-inline-start: 0.2em; + padding-inline-end: 0.2em; & .ui-dialog-buttonset { display: flex; @@ -27,37 +28,3 @@ .ui-dialog { z-index: 1260; } - - -.ui-dialog .ui-dialog-content { - padding: 0; -} - -.ui-dialog-content #media-library-wrapper { - display: flex; -} - -.ui-dialog-content #media-library-content { - padding: 0 16px; -} - -.ui-dialog-content #media-library-wrapper .js-media-library-menu { - margin: 0; -} - -.ui-dialog-content #media-library-wrapper .js-media-library-menu li a { - text-decoration: none; -} - -.ui-dialog-content #media-library-wrapper .js-media-library-menu li { - margin-block-end: 8px; - padding: 8px 24px; - list-style-type: none; - background-color: #e9e9e9; -} - -.ui-dialog-content .js-media-library-view > .view-header, -.ui-dialog-content .js-media-library-view > .view-filters, -.ui-dialog-content .js-media-library-view > .view-content { - margin-bottom: 0; -} -- GitLab From b97061cd9c7b2678e58e003d7ee52b1b47c68a15 Mon Sep 17 00:00:00 2001 From: omkar-pd Date: Fri, 15 Dec 2023 19:24:18 +0530 Subject: [PATCH 7/8] include vertical tabs lib in media form --- core/themes/claro/claro.theme | 1 + core/themes/claro/css/theme/media-library.css | 22 ------------------- .../claro/css/theme/media-library.pcss.css | 22 ------------------- 3 files changed, 1 insertion(+), 44 deletions(-) diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme index b5205023968d..c4749e37346a 100644 --- a/core/themes/claro/claro.theme +++ b/core/themes/claro/claro.theme @@ -1487,6 +1487,7 @@ function claro_preprocess_views_view_fields__media_library(array &$variables) { function claro_form_media_library_add_form_alter(array &$form, FormStateInterface $form_state) { $form['#attributes']['class'][] = 'media-library-add-form'; $form['#attached']['library'][] = 'claro/media_library.theme'; + $form['#attached']['library'][] = 'claro/vertical-tabs'; // If there are unsaved media items, apply styling classes to various parts // of the form. diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css index f14cb5e88f14..951f95d85f6e 100644 --- a/core/themes/claro/css/theme/media-library.css +++ b/core/themes/claro/css/theme/media-library.css @@ -16,28 +16,6 @@ * positioning that would otherwise hide the active tab indicator on the left. */ -:root { - --vertical-tabs-margin-vertical: var(--space-s); - --vertical-tabs-border-radius: var(--details-accordion-border-size-radius); - --vertical-tabs-shadow: var(--details-box-shadow); - --vertical-tabs-border-color: var(--details-border-color); - --vertical-tabs-border-size: 1px; - --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color); - --vertical-tabs-menu-item-shadow-extraspace: 0.5rem; - --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2); - --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1); - --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); - --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); - --vertical-tabs-menu-separator-color: var(--color-gray-200); - --vertical-tabs-menu-separator-size: 1px; - --vertical-tabs-menu-width: 20em; - --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width)); - --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size); - --vertical-tabs-menu-link--active-border-size: 0.25rem; - --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero); - --vertical-tabs-menu--z-index: 0; -} - .media-library-wrapper { display: flex; margin: -1rem -1.5rem -1rem -1rem; /* LTR */ diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css index c06d69920ab8..318b4339b0ea 100644 --- a/core/themes/claro/css/theme/media-library.pcss.css +++ b/core/themes/claro/css/theme/media-library.pcss.css @@ -8,28 +8,6 @@ * Negative margins compensate for modal dialog padding and compensate for * positioning that would otherwise hide the active tab indicator on the left. */ - :root { - --vertical-tabs-margin-vertical: var(--space-s); - --vertical-tabs-border-radius: var(--details-accordion-border-size-radius); - --vertical-tabs-shadow: var(--details-box-shadow); - --vertical-tabs-border-color: var(--details-border-color); - --vertical-tabs-border-size: 1px; - --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color); - --vertical-tabs-menu-item-shadow-extraspace: 0.5rem; - --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2); - --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1); - --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); - --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); - --vertical-tabs-menu-separator-color: var(--color-gray-200); - --vertical-tabs-menu-separator-size: 1px; - --vertical-tabs-menu-width: 20em; - --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width)); - --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size); - --vertical-tabs-menu-link--active-border-size: 4px; - --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero); - --vertical-tabs-menu--z-index: 0; -} - .media-library-wrapper { display: flex; margin: -1rem -1.5rem -1rem -1rem; /* LTR */ -- GitLab From dab99638fafcd53c29d4aa5421cf140c6d2fe1e0 Mon Sep 17 00:00:00 2001 From: Edward Wu Date: Tue, 26 Dec 2023 11:11:34 -0800 Subject: [PATCH 8/8] Issue #3404866: Move claro vertical-tabs CSS custom properties back to base variables.css --- core/themes/claro/claro.theme | 1 - core/themes/claro/css/base/variables.css | 26 +++++++++++++++++++ core/themes/claro/css/base/variables.pcss.css | 26 +++++++++++++++++++ .../claro/css/components/vertical-tabs.css | 25 ------------------ .../css/components/vertical-tabs.pcss.css | 25 ------------------ 5 files changed, 52 insertions(+), 51 deletions(-) diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme index c4749e37346a..b5205023968d 100644 --- a/core/themes/claro/claro.theme +++ b/core/themes/claro/claro.theme @@ -1487,7 +1487,6 @@ function claro_preprocess_views_view_fields__media_library(array &$variables) { function claro_form_media_library_add_form_alter(array &$form, FormStateInterface $form_state) { $form['#attributes']['class'][] = 'media-library-add-form'; $form['#attached']['library'][] = 'claro/media_library.theme'; - $form['#attached']['library'][] = 'claro/vertical-tabs'; // If there are unsaved media items, apply styling classes to various parts // of the form. diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css index 5dcccbf2608d..80e8ca32d77c 100644 --- a/core/themes/claro/css/base/variables.css +++ b/core/themes/claro/css/base/variables.css @@ -253,4 +253,30 @@ */ --layout-region-edit-width: min(60rem, 100%); --layout-region-edit-extended-width: min(68rem, 100%); + /** + * Vertical Tabs. + * + * These are shared between the vertical tabs and media library. + * @see ../components/vertical-tabs.pcss.css + * @see ../theme/media-library.pcss.css + */ + --vertical-tabs-margin-vertical: var(--space-s); + --vertical-tabs-border-radius: var(--details-accordion-border-size-radius); + --vertical-tabs-shadow: var(--details-box-shadow); + --vertical-tabs-border-color: var(--details-border-color); + --vertical-tabs-border-size: 1px; + --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color); + --vertical-tabs-menu-item-shadow-extraspace: 0.5rem; + --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2); + --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1); + --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); + --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); + --vertical-tabs-menu-separator-color: var(--color-gray-200); + --vertical-tabs-menu-separator-size: 1px; + --vertical-tabs-menu-width: 20em; + --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width)); + --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size); + --vertical-tabs-menu-link--active-border-size: 0.25rem; + --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero); + --vertical-tabs-menu--z-index: 0; } diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css index 202787031f36..96f738aa269a 100644 --- a/core/themes/claro/css/base/variables.pcss.css +++ b/core/themes/claro/css/base/variables.pcss.css @@ -247,4 +247,30 @@ */ --layout-region-edit-width: min(960px, 100%); --layout-region-edit-extended-width: min(1088px, 100%); + /** + * Vertical Tabs. + * + * These are shared between the vertical tabs and media library. + * @see ../components/vertical-tabs.pcss.css + * @see ../theme/media-library.pcss.css + */ + --vertical-tabs-margin-vertical: var(--space-s); + --vertical-tabs-border-radius: var(--details-accordion-border-size-radius); + --vertical-tabs-shadow: var(--details-box-shadow); + --vertical-tabs-border-color: var(--details-border-color); + --vertical-tabs-border-size: 1px; + --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color); + --vertical-tabs-menu-item-shadow-extraspace: 0.5rem; + --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2); + --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1); + --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); + --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); + --vertical-tabs-menu-separator-color: var(--color-gray-200); + --vertical-tabs-menu-separator-size: 1px; + --vertical-tabs-menu-width: 20em; + --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width)); + --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size); + --vertical-tabs-menu-link--active-border-size: 4px; + --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero); + --vertical-tabs-menu--z-index: 0; } diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css index f00e953cbb09..85d0f0f82f38 100644 --- a/core/themes/claro/css/components/vertical-tabs.css +++ b/core/themes/claro/css/components/vertical-tabs.css @@ -12,31 +12,6 @@ * Replaces /core/misc/vertical-tabs.css. */ -:root { - /** - * Vertical Tabs. - */ - --vertical-tabs-margin-vertical: var(--space-s); - --vertical-tabs-border-radius: var(--details-accordion-border-size-radius); - --vertical-tabs-shadow: var(--details-box-shadow); - --vertical-tabs-border-color: var(--details-border-color); - --vertical-tabs-border-size: 1px; - --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color); - --vertical-tabs-menu-item-shadow-extraspace: 0.5rem; - --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2); - --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1); - --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); - --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); - --vertical-tabs-menu-separator-color: var(--color-gray-200); - --vertical-tabs-menu-separator-size: 1px; - --vertical-tabs-menu-width: 20em; - --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width)); - --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size); - --vertical-tabs-menu-link--active-border-size: 0.25rem; - --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero); - --vertical-tabs-menu--z-index: 0; -} - /** * Main wrapper of vertical tabs. * This wrapper div is added by JavaScript. diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css index c85061f70b88..7c38c47e95cf 100644 --- a/core/themes/claro/css/components/vertical-tabs.pcss.css +++ b/core/themes/claro/css/components/vertical-tabs.pcss.css @@ -5,31 +5,6 @@ * Replaces /core/misc/vertical-tabs.css. */ -:root { - /** - * Vertical Tabs. - */ - --vertical-tabs-margin-vertical: var(--space-s); - --vertical-tabs-border-radius: var(--details-accordion-border-size-radius); - --vertical-tabs-shadow: var(--details-box-shadow); - --vertical-tabs-border-color: var(--details-border-color); - --vertical-tabs-border-size: 1px; - --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color); - --vertical-tabs-menu-item-shadow-extraspace: 0.5rem; - --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2); - --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1); - --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); - --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); - --vertical-tabs-menu-separator-color: var(--color-gray-200); - --vertical-tabs-menu-separator-size: 1px; - --vertical-tabs-menu-width: 20em; - --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width)); - --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size); - --vertical-tabs-menu-link--active-border-size: 4px; - --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero); - --vertical-tabs-menu--z-index: 0; -} - /** * Main wrapper of vertical tabs. * This wrapper div is added by JavaScript. -- GitLab