From 026b3190c673a1f6986a8f941576c08eb8d61e0a Mon Sep 17 00:00:00 2001
From: effulgentsia <alex.bronstein@acquia.com>
Date: Sun, 1 Nov 2020 21:37:46 -0800
Subject: [PATCH] Issue #3062751 by katherined, bnjmnm, boulaffasae, HOG,
joseph.olstad, kapilkumar0324, Vidushi Mehta, shimpy, phenaproxima,
antonellasevero, lauriii, KondratievaS, SharmaAnmol, ckrina: Media and media
library
---
core/misc/icons/545560/ex.svg | 1 +
core/misc/icons/8e929c/ex.svg | 1 +
.../Core/Theme/ConfirmClassyCopiesTest.php | 1 -
core/themes/claro/claro.libraries.yml | 8 +
core/themes/claro/claro.theme | 20 +-
core/themes/claro/css/base/variables.css | 3 +
core/themes/claro/css/base/variables.pcss.css | 22 +
.../themes/claro/css/components/icon-link.css | 44 ++
.../claro/css/components/icon-link.pcss.css | 45 ++
.../css/components/vertical-tabs.pcss.css | 23 +-
core/themes/claro/css/theme/media-library.css | 443 ++++++++++++------
.../claro/css/theme/media-library.pcss.css | 430 +++++++++++------
.../claro/images/icons/545560/pencil.svg | 1 +
core/themes/claro/src/ClaroPreRender.php | 2 +-
.../media--media-library.html.twig | 2 +-
15 files changed, 734 insertions(+), 312 deletions(-)
create mode 100644 core/misc/icons/545560/ex.svg
create mode 100644 core/misc/icons/8e929c/ex.svg
create mode 100644 core/themes/claro/css/components/icon-link.css
create mode 100644 core/themes/claro/css/components/icon-link.pcss.css
create mode 100644 core/themes/claro/images/icons/545560/pencil.svg
rename core/themes/claro/templates/{classy => }/media-library/media--media-library.html.twig (96%)
diff --git a/core/misc/icons/545560/ex.svg b/core/misc/icons/545560/ex.svg
new file mode 100644
index 000000000000..e75c4a83d8c3
--- /dev/null
+++ b/core/misc/icons/545560/ex.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343" stroke="#55565B" stroke-width="3"/></svg>
\ No newline at end of file
diff --git a/core/misc/icons/8e929c/ex.svg b/core/misc/icons/8e929c/ex.svg
new file mode 100644
index 000000000000..20506f582779
--- /dev/null
+++ b/core/misc/icons/8e929c/ex.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#8e929c" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>
diff --git a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
index 5164f2b3337e..735b383aefe9 100644
--- a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
@@ -349,7 +349,6 @@ public function providerTestClassyCopies() {
'field--node--created.html.twig',
'file-video.html.twig',
'links--media-library-menu.html.twig',
- 'media--media-library.html.twig',
'container--media-library-content.html.twig',
'media-library-item--small.html.twig',
'container--media-library-widget-selection.html.twig',
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index 02ed758bc1c5..a40b1625ca17 100644
--- a/core/themes/claro/claro.libraries.yml
+++ b/core/themes/claro/claro.libraries.yml
@@ -186,6 +186,12 @@ checkbox:
dependencies:
- core/drupal
+icon-link:
+ version: VERSION
+ css:
+ component:
+ css/components/icon-link.css: {}
+
dropbutton:
version: VERSION
js:
@@ -257,6 +263,8 @@ media_library.theme:
css:
theme:
css/theme/media-library.css: {}
+ dependencies:
+ - claro/icon-link
media_library.ui:
version: VERSION
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index 8576c0e7f96d..dd4497f1699b 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -1338,7 +1338,11 @@ function claro_form_media_library_add_form_alter(array &$form, FormStateInterfac
*/
function claro_form_media_library_add_form_upload_alter(array &$form, FormStateInterface $form_state) {
$form['#attributes']['class'][] = 'media-library-add-form--upload';
-
+ if (isset($form['container']['upload'])) {
+ // Set this flag so we can prevent the details element from being added
+ // in \Drupal\claro\ClaroPreRender::managedFile.
+ $form['container']['upload']['#do_not_wrap_in_details'] = TRUE;
+ }
if (isset($form['container'])) {
$form['container']['#attributes']['class'][] = 'media-library-add-form__input-wrapper';
}
@@ -1371,10 +1375,15 @@ function claro_preprocess_item_list__media_library_add_form_media_list(array &$v
$item['value']['fields']['#attributes']['class'][] = 'media-library-add-form__fields';
$item['value']['remove_button']['#attributes']['class'][] = 'media-library-add-form__remove-button';
+ $item['value']['remove_button']['#attributes']['class'][] = 'button--extrasmall';
// #source_field_name is set by AddFormBase::buildEntityFormElement()
// to help themes and form_alter hooks identify the source field.
$fields = &$item['value']['fields'];
$source_field_name = $fields['#source_field_name'];
+
+ // Set this flag so we can remove the details element.
+ $fields[$source_field_name]['widget'][0]['#do_not_wrap_in_details'] = TRUE;
+
if (isset($fields[$source_field_name])) {
$fields[$source_field_name]['#attributes']['class'][] = 'media-library-add-form__source-field';
}
@@ -1388,6 +1397,7 @@ function claro_preprocess_item_list__media_library_add_form_media_list(array &$v
*/
function claro_preprocess_media_library_item__widget(array &$variables) {
$variables['content']['remove_button']['#attributes']['class'][] = 'media-library-item__remove';
+ $variables['content']['remove_button']['#attributes']['class'][] = 'icon-link';
}
/**
@@ -1408,6 +1418,9 @@ function claro_preprocess_media_library_item__small(array &$variables) {
*/
function claro_preprocess_fieldset__media_library_widget(array &$variables) {
if (isset($variables['prefix']['weight_toggle'])) {
+ $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'action-link';
+ $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'action-link--extrasmall';
+ $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'action-link--icon-show';
$variables['prefix']['weight_toggle']['#attributes']['class'][] = 'media-library-widget__toggle-weight';
}
if (isset($variables['suffix']['open_button'])) {
@@ -1443,9 +1456,11 @@ function claro_views_pre_render(ViewExecutable $view) {
}
if (array_key_exists('edit_media', $view->field)) {
$add_classes($view->field['edit_media']->options['alter']['link_class'], ['media-library-item__edit']);
+ $add_classes($view->field['edit_media']->options['alter']['link_class'], ['icon-link']);
}
if (array_key_exists('delete_media', $view->field)) {
$add_classes($view->field['delete_media']->options['alter']['link_class'], ['media-library-item__remove']);
+ $add_classes($view->field['delete_media']->options['alter']['link_class'], ['icon-link']);
}
}
elseif (strpos($view->current_display, 'widget') === 0) {
@@ -1477,6 +1492,9 @@ function claro_views_pre_render(ViewExecutable $view) {
*/
function claro_preprocess_links__media_library_menu(array &$variables) {
foreach ($variables['links'] as &$link) {
+ // Add a class to the Media Library menu items.
+ $link['attributes']->addClass('media-library-menu__item');
+
// This conditional exists because the media-library-menu__link class is
// currently added by Classy, but Claro will eventually not use Classy as a
// base theme.
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 00a95eca562b..aa94d6c938be 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -52,4 +52,7 @@
/**
* Breadcrumb.
*/
+ /**
+ * Vertical Tabs.
+ */
}
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index a11c984ad0bd..f4d5ef10be59 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -206,4 +206,26 @@
* Breadcrumb.
*/
--breadcrumb-height: 1.25rem;
+ /**
+ * 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-lightgray);
+ --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/icon-link.css b/core/themes/claro/css/components/icon-link.css
new file mode 100644
index 000000000000..0d1b84eade06
--- /dev/null
+++ b/core/themes/claro/css/components/icon-link.css
@@ -0,0 +1,44 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Icon link component.
+ */
+
+:root {
+ /* default */
+ /* active */
+ /* hover */
+}
+
+.icon-link {
+ display: flex;
+ padding: 0;
+ border: 1px solid #d4d4d8;
+ border-radius: 50%;
+ background-color: #fff;
+}
+
+.icon-link:hover {
+ border-color: rgba(212, 212, 218, 0.8);
+ background-color: #f0f5fd;
+}
+
+.icon-link:focus {
+ box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #26a769;
+}
+
+.icon-link:active,
+.open > .icon-link {
+ border-color: #003cc5;
+ background-color: #003cc5;
+}
+
+.icon-link--small:focus {
+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px #26a769;
+}
diff --git a/core/themes/claro/css/components/icon-link.pcss.css b/core/themes/claro/css/components/icon-link.pcss.css
new file mode 100644
index 000000000000..cdbfc8e685dc
--- /dev/null
+++ b/core/themes/claro/css/components/icon-link.pcss.css
@@ -0,0 +1,45 @@
+/**
+ * @file
+ * Icon link component.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+ /* default */
+ --icon-link-bg-color: var(--color-white);
+ --icon-link-border-color: var(--color-lightgray);
+ /* active */
+ --icon-link--active-bg-color: var(--color-absolutezero);
+ --icon-link--active-border-color: var(--color-absolutezero);
+ /* hover */
+ --icon-link--hover-bg-color: var(--color-bgblue-hover);
+ --icon-link--hover-border-color: var(--color-lightgray-o-80);
+}
+
+.icon-link {
+ display: flex;
+ padding: 0;
+ border: 1px solid var(--icon-link-border-color);
+ border-radius: 50%;
+ background-color: var(--icon-link-bg-color);
+}
+
+.icon-link:hover {
+ border-color: var(--icon-link--hover-border-color);
+ background-color: var(--icon-link--hover-bg-color);
+}
+
+.icon-link:focus {
+ box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus);
+}
+
+.icon-link:active,
+.open > .icon-link {
+ border-color: var(--icon-link--active-border-color);
+ background-color: var(--icon-link--active-bg-color);
+}
+
+.icon-link--small:focus {
+ box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-focus);
+}
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index 283cafaf6ea6..74d95f5c0e2c 100644
--- a/core/themes/claro/css/components/vertical-tabs.pcss.css
+++ b/core/themes/claro/css/components/vertical-tabs.pcss.css
@@ -7,23 +7,6 @@
@import "../base/variables.pcss.css";
-: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-separator-color: var(--color-lightgray);
- --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);
-}
-
/**
* Main wrapper of vertical tabs.
* This wrapper div is added by JavaScript.
@@ -70,12 +53,12 @@
*/
.vertical-tabs__menu-item {
overflow: hidden;
- margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2) calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1) calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); /* LTR */
+ margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0 var(--vertical-tabs-menu-item-shadow-extraspace) var(--vertical-tabs-menu-item-shadow-extraspace); /* LTR */
}
[dir="rtl"] .vertical-tabs__menu-item {
- margin-right: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
- margin-left: calc(var(--vertical-tabs-border-size) * -1);
+ margin-right: var(--vertical-tabs-menu-item--left-margin);
+ margin-left: var(--vertical-tabs-menu-item--right-margin);
padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
padding-left: 0;
}
diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css
index 32cedf7342c3..99fea79f7fa2 100644
--- a/core/themes/claro/css/theme/media-library.css
+++ b/core/themes/claro/css/theme/media-library.css
@@ -11,98 +11,189 @@
* Styling for Media Library.
*/
+/**
+ * Negative margins compensate for modal dialog padding and compensate for
+ * positioning that would otherwise hide the active tab indicator on the left.
+ */
+
.media-library-wrapper {
display: flex;
- margin: -1em;
+ margin: -1rem -1.5rem -1rem -1rem; /* LTR */
}
-/**
- * @todo Reuse or build on vertical tabs styling for the media library menu.
- * https://www.drupal.org/project/drupal/issues/3023767
- */
+[dir="rtl"] .media-library-wrapper {
+ margin-right: -1em;
+ margin-left: -1.5em;
+}
+
+.media-library-wrapper .messages-list,
+.media-library-wrapper .messages {
+ margin-top: 0;
+ margin-bottom: 1.5rem;
+}
.media-library-menu {
+ position: relative;
display: block;
- width: 600px;
- max-width: 20%;
- margin: 0; /* LTR */
- padding: 0;
- border-bottom: 1px solid #ccc;
- background-color: #e6e5e1;
- line-height: 1;
+ width: 20em;
+ margin: 0;
+ padding-top: 0.5rem;
+ list-style: none;
+ color: #222330;
}
[dir="rtl"] .media-library-menu {
margin: 0;
}
-/**
- * @todo Use a class instead of the li element.
- * https://www.drupal.org/project/drupal/issues/3029227
- */
+.media-library-menu__item {
+ overflow: hidden;
+ margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
+ padding: 0.5rem 0;
+}
-.media-library-menu li {
+[dir="rtl"] .media-library-menu__item {
+ margin-right: -0.5rem;
+ margin-left: -1px;
+}
+
+.media-library-menu__item::before {
+ z-index: 0; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
display: block;
- padding: 0;
- list-style: none;
+ width: 100%;
+ margin-top: -1px;
+ content: "";
+ border-top: 1px solid #d4d4d8;
}
.media-library-menu__link {
position: relative;
display: block;
- box-sizing: border-box;
- padding: 15px;
+ margin-top: -1px;
+ padding: 0.75rem 0.75rem 0.75rem calc(1.5rem - 4px); /* LTR */
text-decoration: none;
- border-bottom: 1px solid #b3b2ad;
- background-color: #f2f2f0;
- text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+ word-wrap: break-word;
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+ color: #222330;
+ border: 1px solid transparent;
+ border-width: 1px 0 1px 4px; /* LTR */
+ border-radius: 2px 0 0 2px; /* LTR */
+}
+
+[dir="rtl"] .media-library-menu__link {
+ padding-right: calc(1.5rem - 4px);
+ padding-left: 0.75rem;
+ border-width: 1px 4px 1px 0;
+ border-radius: 0 2px 2px 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .media-library-menu__link {
+ border-color: transparent;
+ }
}
-.media-library-menu__link:active,
-.media-library-menu__link:hover,
+/* Menu link states. */
+
.media-library-menu__link:focus {
- background: #fcfcfa;
- text-shadow: none;
+ z-index: 3; /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
+ text-decoration: none;
+ box-shadow: none;
}
-.media-library-menu__link:focus,
-.media-library-menu__link:active {
- outline: none;
+.media-library-menu__link:hover {
+ text-decoration: none;
+ color: #003cc5;
+ /* These borders are necessary to replace the dividing lines while in the hover state. */
+ border-top: 1px solid #d4d4d8;
+ border-bottom: 1px solid #d4d4d8;
+ background: #f0f5fd;
+}
+
+/* This pseudo element provides the background for the hover state. */
+
+.media-library-menu__link::before {
+ position: absolute;
+ z-index: -1; /* This should be on a lower level than the menu-item separator lines. */
+ top: -1px;
+ right: 0; /* LTR */
+ bottom: -1px;
+ left: -4px; /* LTR */
+ content: "";
+ pointer-events: none;
+ background-clip: padding-box;
+}
+
+[dir="rtl"] .media-library-menu__link::before {
+ right: -4px;
+ left: 0;
+}
+
+.media-library-menu__link:focus::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: -1px -4px;
+ content: "";
+ pointer-events: none;
+ border: 3px solid #26a769;
+ border-radius: 2px;
}
.media-library-menu__link.active {
- z-index: 1;
- margin-right: -1px; /* LTR */
- color: #000;
- border-right: 1px solid #fcfcfa; /* LTR */
- border-bottom: 1px solid #b3b2ad;
+ z-index: 2; /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
+ color: #003cc5;
+ border-color: rgba(216, 217, 224, 0.8) transparent;
background-color: #fff;
- box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
-[dir="rtl"] .media-library-menu__link.active {
- margin-right: 0;
- margin-left: -1px;
- border-right: 0;
- border-left: 1px solid #fcfcfa;
+.media-library-menu__link.active:hover {
+ color: #0036b1;
+ background-color: #f0f5fd;
+}
+
+.media-library-menu__link.active::before {
+ z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
+ border-left: 4px solid #003cc5; /* LTR */
+ border-radius: 2px 0 0 2px; /* LTR */
+}
+
+[dir=rtl] .media-library-menu__link.active::before {
+ border-right: 4px solid #003cc5;
+ border-left: 0;
+ border-radius: 0 2px 2px 0;
+}
+
+.media-library-menu__link.active:hover::before {
+ background: none;
}
.media-library-content {
width: 100%;
padding: 1em;
- border-left: 1px solid #b3b2ad; /* LTR */
outline: none;
}
-[dir="rtl"] .media-library-content {
- border-right: 1px solid #b3b2ad;
+.media-library-menu + .media-library-content {
+ z-index: 0;
+ border-left: 1px solid rgba(216, 217, 224, 0.8); /* LTR */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+[dir="rtl"] .media-library-menu + .media-library-content {
+ border-right: 1px solid rgba(216, 217, 224, 0.8);
border-left: 0;
}
/* Generic media add form styles. */
.media-library-add-form--without-input .form-item {
- margin: 0 0 1em;
+ margin-right: 1rem;
}
/**
@@ -118,11 +209,30 @@
outline: none;
}
+/**
+ * This Media Library form is an exception to the extrasmall button pattern.
+ * Additional padding is needed to accommodate the remove button icon. The
+ * margin is adjusted for alignment within the media library dialog.
+ */
+
+.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+ margin: 0.5rem 0; /* LTR */
+ /* Left padding is double the background size of the button icon. */
+ padding: calc(0.25rem - 1px) calc(0.75rem - 1px) calc(0.25rem - 1px) 1.5rem;
+}
+
+/* This is needed to override the default extrasmall button left margin. */
+
+[dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+ margin-left: 0;
+}
+
.media-library-add-form__input-wrapper {
- padding: 16px;
- border: 1px solid #bfbfbf;
+ padding: 0.5rem 1.5rem 1.5rem 1.5rem;
+ border: 1px solid rgba(216, 217, 224, 0.8);
border-radius: 2px;
- background: #fcfcfa;
+ background-color: #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Style the media add upload form. */
@@ -131,14 +241,37 @@
margin-bottom: 0;
}
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {
+ display: block;
+}
+
+/* Adjust the focus border on this element so it is not too close to buttons. */
+
+.media-library-add-form__added-media:focus {
+ box-shadow: 0 0 0 4px #fff, 0 0 0 7px #26a769;
+}
+
.media-library-add-form .file-upload-help {
margin: 8px 0 0;
}
+/* Align remove buttons with with Save button and compensate for IE scrollbar and focus padding. */
+
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .ui-dialog > .ui-dialog-content {
+ padding-right: calc(0.75rem - 7px);
+ }
+ [dir="rtl"] .ui-dialog > .ui-dialog-content {
+ padding-left: calc(0.75rem - 7px);
+ }
+}
+
/* Style the media add oEmbed form. */
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
display: flex;
+ align-items: center;
}
@media screen and (max-width: 37.5em) {
@@ -155,16 +288,6 @@
width: 100%;
}
-/**
- * @todo Remove .button when styles are moved to the seven theme in
- * https://www.drupal.org/project/drupal/issues/2980769
- */
-
-.button.media-library-add-form-oembed-submit {
- -ms-grid-row-align: center;
- align-self: center;
-}
-
/* Media add form selection styles. */
.media-library-add-form__selected-media {
@@ -200,7 +323,6 @@
.media-library-views-form,
.media-library-selection,
.media-library-add-form__selected-media .details-wrapper,
-.media-library-views-form__bulk_form,
.media-library-view .form--inline {
display: flex;
flex-wrap: wrap;
@@ -304,10 +426,38 @@
}
/**
-* The media library item container receives screen reader focus when items are
-* removed. Since it is not an interactive element, it does not need an
-* outline.
-*/
+ * Ajax throbbers inside a media library item.
+ */
+
+.media-library-item .ajax-progress.ajax-progress.ajax-progress {
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ left: 50%;
+ box-sizing: border-box;
+ width: 3rem; /* 56px */
+ height: 3rem;
+ margin: -1.5rem;
+ border: 1px solid rgba(216, 217, 224, 0.8);
+ border-radius: 3.5rem;
+ background: #fff;
+ box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
+}
+
+.media-library-item .ajax-progress__throbber {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 1.75rem;
+ height: 1.75rem;
+ margin: -0.875rem;
+ border: 3px solid #003cc5;
+ border-right: 3px dotted transparent;
+}
+
+.media-library-item .ajax-progress__message {
+ display: none;
+}
.media-library-item--grid {
justify-content: center;
@@ -329,6 +479,23 @@
transition: border-color 0.2s, color 0.2s, background 0.2s;
pointer-events: none;
border: 1px solid #dbdbdb;
+ border-radius: 2px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/**
+* The media library grid item focus border is moved to a child element to
+* improve padding.
+*/
+
+.media-library-item--grid:focus {
+ outline: none;
+ box-shadow: none;
+}
+
+.media-library-item--grid:focus .media-library-item__preview-wrapper {
+ outline: 2px dotted transparent;
+ box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
}
/* Media library widget weight field styles. */
@@ -432,12 +599,25 @@
top: 5px;
left: 5px;
border-width: 3px;
- border-color: #40b6ff;
border-radius: 3px;
}
+.media-library-item--grid.is-hover:before,
+.media-library-item--grid.checked.is-hover:before {
+ border-color: #0036b1;
+}
+
+.media-library-item--grid.is-focus:before {
+ border-color: #26a769;
+}
+
.media-library-item--grid.checked:before {
- border-color: #0076c0;
+ border-color: #5a8bed;
+}
+
+.media-library-item--grid .form-boolean--type-checkbox:checked {
+ border-color: #5a8bed;
+ background-color: #5a8bed;
}
.media-library-item__click-to-select-checkbox {
@@ -485,6 +665,11 @@
cursor: move;
}
+.field--widget-media-library-widget .media-library-item__preview img {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+}
+
.field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
cursor: inherit;
}
@@ -517,16 +702,13 @@
background: white;
}
-.media-library-item__name {
- font-size: 14px;
-}
-
.media-library-item__name {
display: block;
overflow: hidden;
- margin: 2px;
+ margin: 0.25rem 0.5rem;
white-space: nowrap;
text-overflow: ellipsis;
+ font-size: 14px;
}
.media-library-item__attributes:hover .media-library-item__name,
@@ -551,30 +733,16 @@
position: relative;
}
-/**
- * @todo Change to .media-library-open-button when styles are moved to the
- * seven theme in https://www.drupal.org/project/drupal/issues/2980769
- */
-
-.button.media-library-open-button {
- margin-bottom: 1em;
- margin-left: 0; /* LTR */
-}
-
-[dir="rtl"] .button.media-library-open-button {
- margin-right: 0;
- margin-left: 1em;
-}
-
-.media-library-widget__toggle-weight {
+.media-library-widget__toggle-weight.media-library-widget__toggle-weight {
position: absolute;
- top: 5px;
- right: 5px; /* LTR */
+ top: 0.75rem;
+ right: 1rem; /* LTR */
+ text-decoration: none;
}
-[dir="rtl"] .media-library-widget__toggle-weight {
+[dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
right: auto;
- left: 5px;
+ left: 1rem;
}
/* Add negative margin for flex grid. */
@@ -606,15 +774,13 @@
z-index: 1;
top: 10px;
overflow: hidden;
- width: 21px;
- height: 21px;
+ width: 24px;
+ height: 24px;
margin: 5px;
padding: 0;
transition: 0.2s border-color;
color: transparent;
- border: 2px solid #ccc;
- border-radius: 20px;
- background-size: 13px;
+ background-size: 12px;
text-shadow: none;
font-size: 0;
}
@@ -638,8 +804,16 @@
}
.media-library-item__edit {
- background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23787878' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23787878' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e") #fff center no-repeat;
- background-size: 13px;
+ /* !important to override button class border. */
+ border: 1px solid #d4d4d8 !important;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 12px;
+}
+
+.media-library-item__edit:active {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
}
.media-library-item__remove,
@@ -649,51 +823,28 @@
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
- background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e") #fff center no-repeat;
- background-size: 13px;
+ /* !important to override button class border. */
+ border: 1px solid #d4d4d8 !important;
+ background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 12px;
}
-.media-library-item__edit:hover,
-.media-library-item__edit:focus,
-.media-library-item__remove:hover,
-.media-library-item__remove:focus,
-.media-library-item__remove.button:hover,
-.media-library-item__remove.button:focus,
+.media-library-item__remove:active,
+.media-library-item__remove.button:active,
.media-library-item__remove.button:disabled:active {
- border-color: #40b6ff;
+ /* !important to override button class border. */
+ border-color: #003cc5 !important;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
}
-/**
- * Style the added media item container.
- *
- * The added media container receives screen reader focus since it has the role
- * 'listitem'. Since it is not an interactive element, it does not need an
- * outline.
- */
+/* Style the added media item container. */
.media-library-add-form__media {
position: relative;
display: flex;
- padding: 1em 0;
border-bottom: 1px solid #c0c0c0;
- outline: none;
-}
-
-/* Do not show the top padding for the first item. */
-
-.media-library-add-form__media:first-child {
- padding-top: 0;
-}
-
-/**
- * Change the position of the remove button for the first item.
- *
- * The first item doesn't have a top padding, change the location of the remove
- * button as well.
- */
-
-.media-library-add-form__media:first-child .media-library-add-form__remove-button[type="submit"] {
- top: 5px;
}
/* Do not show the bottom border and padding for the last item. */
@@ -709,7 +860,7 @@
justify-content: center;
width: 220px;
margin-right: 20px; /* LTR */
- background: #ebebeb;
+ background: rgba(243, 244, 249, 0.4);
}
[dir="rtl"] .media-library-add-form__preview {
@@ -721,22 +872,22 @@
flex-grow: 1;
}
-/**
- * @todo Remove [type="submit"] when styles are moved to the seven theme in
- * https://www.drupal.org/project/drupal/issues/2980769
- */
-
-.media-library-add-form__remove-button[type="submit"] {
+.media-library-add-form__remove-button {
position: absolute;
- top: 25px;
- right: 6px;
- margin-right: 0;
+ right: 0; /* LTR */
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: 0.5rem center;
+ background-size: 0.75rem;
}
-[dir="rtl"] .media-library-add-form__remove-button[type="submit"] {
+[dir="rtl"] .media-library-add-form__remove-button {
right: auto;
- left: 13px;
- margin-left: 0;
+ left: 0;
+}
+
+.media-library-add-form__remove-button.button:disabled {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%238e929c' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
}
/* @todo Remove in https://www.drupal.org/project/drupal/issues/3064914 */
diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css
index dbee8cfc88fc..8a88faf08a62 100644
--- a/core/themes/claro/css/theme/media-library.pcss.css
+++ b/core/themes/claro/css/theme/media-library.pcss.css
@@ -4,92 +4,181 @@
* Styling for Media Library.
*/
+@import "../base/variables.pcss.css";
+
+/**
+ * Negative margins compensate for modal dialog padding and compensate for
+ * positioning that would otherwise hide the active tab indicator on the left.
+ */
.media-library-wrapper {
display: flex;
- margin: -1em;
+ margin: -1rem -1.5rem -1rem -1rem; /* LTR */
+}
+[dir="rtl"] .media-library-wrapper {
+ margin-right: -1em;
+ margin-left: -1.5em;
+}
+
+.media-library-wrapper .messages-list,
+.media-library-wrapper .messages {
+ margin-top: 0;
+ margin-bottom: var(--space-l);
}
-/**
- * @todo Reuse or build on vertical tabs styling for the media library menu.
- * https://www.drupal.org/project/drupal/issues/3023767
- */
.media-library-menu {
+ position: relative;
display: block;
- width: 600px;
- max-width: 20%;
- margin: 0; /* LTR */
- padding: 0;
- border-bottom: 1px solid #ccc;
- background-color: #e6e5e1;
- line-height: 1;
+ width: var(--vertical-tabs-menu-width);
+ margin: 0;
+ padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
+ list-style: none;
+ color: var(--color-text);
}
[dir="rtl"] .media-library-menu {
margin: 0;
}
-/**
- * @todo Use a class instead of the li element.
- * https://www.drupal.org/project/drupal/issues/3029227
- */
-.media-library-menu li {
+.media-library-menu__item {
+ overflow: hidden;
+ margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
+ padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
+}
+
+[dir="rtl"] .media-library-menu__item {
+ margin-right: var(--vertical-tabs-menu-item--left-margin);
+ margin-left: var(--vertical-tabs-menu-item--right-margin);
+}
+
+.media-library-menu__item::before {
+ z-index: var(--vertical-tabs-menu--z-index); /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
display: block;
- padding: 0;
- list-style: none;
+ width: 100%;
+ margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
+ content: "";
+ border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
}
.media-library-menu__link {
position: relative;
display: block;
- box-sizing: border-box;
- padding: 15px;
+ margin-top: calc(var(--vertical-tabs-border-size) * -1);
+ padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
text-decoration: none;
- border-bottom: 1px solid #b3b2ad;
- background-color: #f2f2f0;
- text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+ word-wrap: break-word;
+ hyphens: auto;
+ color: var(--color-text);
+ border: var(--vertical-tabs-border-size) solid transparent;
+ border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
+ border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
+}
+
+[dir="rtl"] .media-library-menu__link {
+ padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
+ padding-left: var(--space-s);
+ border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
+ border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
}
-.media-library-menu__link:active,
-.media-library-menu__link:hover,
+@media screen and (-ms-high-contrast: active) {
+ .media-library-menu__link {
+ border-color: transparent;
+ }
+}
+
+/* Menu link states. */
.media-library-menu__link:focus {
- background: #fcfcfa;
- text-shadow: none;
+ z-index: calc(var(--vertical-tabs-menu--z-index) + 3); /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
+ text-decoration: none;
+ box-shadow: none;
}
-.media-library-menu__link:focus,
-.media-library-menu__link:active {
- outline: none;
+.media-library-menu__link:hover {
+ text-decoration: none;
+ color: var(--color-absolutezero);
+ /* These borders are necessary to replace the dividing lines while in the hover state. */
+ border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+ border-bottom: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+ background: var(--color-bgblue-hover);
+}
+
+/* This pseudo element provides the background for the hover state. */
+.media-library-menu__link::before {
+ position: absolute;
+ z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* This should be on a lower level than the menu-item separator lines. */
+ top: calc(var(--vertical-tabs-border-size) * -1);
+ right: 0; /* LTR */
+ bottom: calc(var(--vertical-tabs-border-size) * -1);
+ left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
+ content: "";
+ pointer-events: none;
+ background-clip: padding-box;
+}
+[dir="rtl"] .media-library-menu__link::before {
+ right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+ left: 0;
+}
+
+.media-library-menu__link:focus::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+ content: "";
+ pointer-events: none;
+ border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
+ border-radius: var(--vertical-tabs-border-radius);
}
.media-library-menu__link.active {
- z-index: 1;
- margin-right: -1px; /* LTR */
- color: #000;
- border-right: 1px solid #fcfcfa; /* LTR */
- border-bottom: 1px solid #b3b2ad;
- background-color: #fff;
- box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
-}
-[dir="rtl"] .media-library-menu__link.active {
- margin-right: 0;
- margin-left: -1px;
- border-right: 0;
- border-left: 1px solid #fcfcfa;
+ z-index: calc(var(--vertical-tabs-menu--z-index) + 2); /* The selected menu link should be on a higher level than the white masking line that hides the gray separator. */
+ color: var(--color-absolutezero);
+ border-color: var(--vertical-tabs-border-color) transparent;
+ background-color: var(--color-white);
+ box-shadow: var(--vertical-tabs-shadow);
+}
+
+.media-library-menu__link.active:hover {
+ color: var(--color-absolutezero-hover);
+ background-color: var(--color-bgblue-hover);
+}
+
+.media-library-menu__link.active::before {
+ z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
+ border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
+ border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
+}
+[dir=rtl] .media-library-menu__link.active::before {
+ border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
+ border-left: 0;
+ border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
+}
+
+.media-library-menu__link.active:hover::before {
+ background: none;
}
.media-library-content {
width: 100%;
padding: 1em;
- border-left: 1px solid #b3b2ad; /* LTR */
outline: none;
}
-[dir="rtl"] .media-library-content {
- border-right: 1px solid #b3b2ad;
+
+.media-library-menu + .media-library-content {
+ z-index: var(--vertical-tabs-menu--z-index);
+ border-left: var(--vertical-tabs-border); /* LTR */
+ box-shadow: var(--vertical-tabs-shadow);
+}
+
+[dir="rtl"] .media-library-menu + .media-library-content {
+ border-right: var(--vertical-tabs-border);
border-left: 0;
}
/* Generic media add form styles. */
.media-library-add-form--without-input .form-item {
- margin: 0 0 1em;
+ margin-right: 1rem;
}
/**
@@ -104,25 +193,62 @@
outline: none;
}
+/**
+ * This Media Library form is an exception to the extrasmall button pattern.
+ * Additional padding is needed to accommodate the remove button icon. The
+ * margin is adjusted for alignment within the media library dialog.
+ */
+.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+ margin: var(--space-xs) 0; /* LTR */
+ /* Left padding is double the background size of the button icon. */
+ padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px) calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) * 2);
+}
+
+/* This is needed to override the default extrasmall button left margin. */
+[dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+ margin-left: 0;
+}
+
.media-library-add-form__input-wrapper {
- padding: 16px;
- border: 1px solid #bfbfbf;
- border-radius: 2px;
- background: #fcfcfa;
+ padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
+ border: var(--details-border-size) solid var(--details-border-color);
+ border-radius: var(--base-border-radius);
+ background-color: var(--color-white);
+ box-shadow: var(--details-box-shadow);
}
/* Style the media add upload form. */
.media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
margin-bottom: 0;
}
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {
+ display: block;
+}
+
+/* Adjust the focus border on this element so it is not too close to buttons. */
+.media-library-add-form__added-media:focus {
+ box-shadow: 0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);
+}
.media-library-add-form .file-upload-help {
margin: 8px 0 0;
}
+/* Align remove buttons with with Save button and compensate for IE scrollbar and focus padding. */
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .ui-dialog > .ui-dialog-content {
+ padding-right: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));
+ }
+ [dir="rtl"] .ui-dialog > .ui-dialog-content {
+ padding-left: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));
+ }
+}
+
/* Style the media add oEmbed form. */
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
display: flex;
+ align-items: center;
}
@media screen and (max-width: 37.5em) {
@@ -139,14 +265,6 @@
width: 100%;
}
-/**
- * @todo Remove .button when styles are moved to the seven theme in
- * https://www.drupal.org/project/drupal/issues/2980769
- */
-.button.media-library-add-form-oembed-submit {
- align-self: center;
-}
-
/* Media add form selection styles. */
.media-library-add-form__selected-media {
margin-top: 1em;
@@ -177,7 +295,6 @@
.media-library-views-form,
.media-library-selection,
.media-library-add-form__selected-media .details-wrapper,
-.media-library-views-form__bulk_form,
.media-library-view .form--inline {
display: flex;
flex-wrap: wrap;
@@ -274,10 +391,36 @@
}
/**
-* The media library item container receives screen reader focus when items are
-* removed. Since it is not an interactive element, it does not need an
-* outline.
-*/
+ * Ajax throbbers inside a media library item.
+ */
+.media-library-item .ajax-progress.ajax-progress.ajax-progress {
+ position: absolute;
+ z-index: calc(var(--vertical-tabs-menu--z-index) + 1);
+ top: 50%;
+ left: 50%;
+ box-sizing: border-box;
+ width: 3rem; /* 56px */
+ height: 3rem;
+ margin: -1.5rem;
+ border: var(--input-border-size) solid var(--jui-dropdown-border-color);
+ border-radius: 3.5rem;
+ background: var(--color-white);
+ box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
+}
+.media-library-item .ajax-progress__throbber {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 1.75rem;
+ height: 1.75rem;
+ margin: -0.875rem;
+ border: 3px solid var(--color-absolutezero);
+ border-right: 3px dotted transparent;
+}
+.media-library-item .ajax-progress__message {
+ display: none;
+}
+
.media-library-item--grid {
justify-content: center;
box-sizing: border-box;
@@ -298,6 +441,22 @@
transition: border-color 0.2s, color 0.2s, background 0.2s;
pointer-events: none;
border: 1px solid #dbdbdb;
+ border-radius: 2px;
+ box-shadow: var(--details-box-shadow);
+}
+
+/**
+* The media library grid item focus border is moved to a child element to
+* improve padding.
+*/
+.media-library-item--grid:focus {
+ outline: none;
+ box-shadow: none;
+}
+
+.media-library-item--grid:focus .media-library-item__preview-wrapper {
+ outline: var(--focus-outline);
+ box-shadow: var(--focus-box-shadow);
}
/* Media library widget weight field styles. */
@@ -396,12 +555,24 @@
top: 5px;
left: 5px;
border-width: 3px;
- border-color: #40b6ff;
border-radius: 3px;
}
+.media-library-item--grid.is-hover:before,
+.media-library-item--grid.checked.is-hover:before {
+ border-color: var(--color-absolutezero-hover);
+}
+
+.media-library-item--grid.is-focus:before {
+ border-color: var(--color-focus);
+}
.media-library-item--grid.checked:before {
- border-color: #0076c0;
+ border-color: var(--button--focus-border-color);
+}
+
+.media-library-item--grid .form-boolean--type-checkbox:checked {
+ border-color: var(--button--focus-border-color);
+ background-color: var(--button--focus-border-color);
}
.media-library-item__click-to-select-checkbox {
@@ -446,6 +617,11 @@
cursor: move;
}
+.field--widget-media-library-widget .media-library-item__preview img {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+}
+
.field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
cursor: inherit;
}
@@ -477,16 +653,13 @@
background: white;
}
-.media-library-item__name {
- font-size: 14px;
-}
-
.media-library-item__name {
display: block;
overflow: hidden;
- margin: 2px;
+ margin: calc(var(--space-xs) / 2) var(--space-xs);
white-space: nowrap;
text-overflow: ellipsis;
+ font-size: 14px;
}
.media-library-item__attributes:hover .media-library-item__name,
@@ -510,27 +683,15 @@
position: relative;
}
-/**
- * @todo Change to .media-library-open-button when styles are moved to the
- * seven theme in https://www.drupal.org/project/drupal/issues/2980769
- */
-.button.media-library-open-button {
- margin-bottom: 1em;
- margin-left: 0; /* LTR */
-}
-[dir="rtl"] .button.media-library-open-button {
- margin-right: 0;
- margin-left: 1em;
-}
-
-.media-library-widget__toggle-weight {
+.media-library-widget__toggle-weight.media-library-widget__toggle-weight {
position: absolute;
- top: 5px;
- right: 5px; /* LTR */
+ top: var(--space-s);
+ right: var(--space-m); /* LTR */
+ text-decoration: none;
}
-[dir="rtl"] .media-library-widget__toggle-weight {
+[dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
right: auto;
- left: 5px;
+ left: var(--space-m);
}
/* Add negative margin for flex grid. */
@@ -560,15 +721,13 @@
z-index: 1;
top: 10px;
overflow: hidden;
- width: 21px;
- height: 21px;
+ width: 24px;
+ height: 24px;
margin: 5px;
padding: 0;
transition: 0.2s border-color;
color: transparent;
- border: 2px solid #ccc;
- border-radius: 20px;
- background-size: 13px;
+ background-size: 12px;
text-shadow: none;
font-size: 0;
}
@@ -590,8 +749,15 @@
}
.media-library-item__edit {
- background: url("../../../../misc/icons/787878/pencil.svg") #fff center no-repeat;
- background-size: 13px;
+ /* !important to override button class border. */
+ border: 1px solid var(--color-lightgray) !important;
+ background-image: url("../../images/icons/545560/pencil.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 12px;
+}
+.media-library-item__edit:active {
+ background-image: url("../../../../misc/icons/ffffff/pencil.svg");
}
.media-library-item__remove,
.media-library-item__remove.button,
@@ -600,47 +766,27 @@
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
- background: url("../../../../misc/icons/787878/ex.svg") #fff center no-repeat;
- background-size: 13px;
+ /* !important to override button class border. */
+ border: 1px solid var(--color-lightgray) !important;
+ background-image: url("../../../../misc/icons/545560/ex.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 12px;
}
-.media-library-item__edit:hover,
-.media-library-item__edit:focus,
-.media-library-item__remove:hover,
-.media-library-item__remove:focus,
-.media-library-item__remove.button:hover,
-.media-library-item__remove.button:focus,
+
+.media-library-item__remove:active,
+.media-library-item__remove.button:active,
.media-library-item__remove.button:disabled:active {
- border-color: #40b6ff;
+ /* !important to override button class border. */
+ border-color: var(--color-absolutezero) !important;
+ background-image: url("../../../../misc/icons/ffffff/ex.svg");
}
-/**
- * Style the added media item container.
- *
- * The added media container receives screen reader focus since it has the role
- * 'listitem'. Since it is not an interactive element, it does not need an
- * outline.
- */
+/* Style the added media item container. */
.media-library-add-form__media {
position: relative;
display: flex;
- padding: 1em 0;
border-bottom: 1px solid #c0c0c0;
- outline: none;
-}
-
-/* Do not show the top padding for the first item. */
-.media-library-add-form__media:first-child {
- padding-top: 0;
-}
-
-/**
- * Change the position of the remove button for the first item.
- *
- * The first item doesn't have a top padding, change the location of the remove
- * button as well.
- */
-.media-library-add-form__media:first-child .media-library-add-form__remove-button[type="submit"] {
- top: 5px;
}
/* Do not show the bottom border and padding for the last item. */
@@ -655,7 +801,7 @@
justify-content: center;
width: 220px;
margin-right: 20px; /* LTR */
- background: #ebebeb;
+ background: var(--color-whitesmoke-o-40);
}
[dir="rtl"] .media-library-add-form__preview {
margin-right: 0;
@@ -666,20 +812,20 @@
flex-grow: 1;
}
-/**
- * @todo Remove [type="submit"] when styles are moved to the seven theme in
- * https://www.drupal.org/project/drupal/issues/2980769
- */
-.media-library-add-form__remove-button[type="submit"] {
+.media-library-add-form__remove-button {
position: absolute;
- top: 25px;
- right: 6px;
- margin-right: 0;
+ right: 0; /* LTR */
+ background-image: url("../../../../misc/icons/000000/ex.svg");
+ background-repeat: no-repeat;
+ background-position: var(--space-xs) center;
+ background-size: var(--space-s);
}
-[dir="rtl"] .media-library-add-form__remove-button[type="submit"] {
+[dir="rtl"] .media-library-add-form__remove-button {
right: auto;
- left: 13px;
- margin-left: 0;
+ left: 0;
+}
+.media-library-add-form__remove-button.button:disabled {
+ background-image: url("../../../../misc/icons/8e929c/ex.svg");
}
/* @todo Remove in https://www.drupal.org/project/drupal/issues/3064914 */
diff --git a/core/themes/claro/images/icons/545560/pencil.svg b/core/themes/claro/images/icons/545560/pencil.svg
new file mode 100644
index 000000000000..e480e3f069b4
--- /dev/null
+++ b/core/themes/claro/images/icons/545560/pencil.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="#545560"><path d="M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z"/></g></svg>
\ No newline at end of file
diff --git a/core/themes/claro/src/ClaroPreRender.php b/core/themes/claro/src/ClaroPreRender.php
index d702543451a3..c8ec7db13753 100644
--- a/core/themes/claro/src/ClaroPreRender.php
+++ b/core/themes/claro/src/ClaroPreRender.php
@@ -26,7 +26,7 @@ public static function managedFile($element) {
}
// Wrap single-cardinality widgets with a details element.
- $single_file_widget = !empty($element['#cardinality']) && $element['#cardinality'] === 1;
+ $single_file_widget = empty($element['#do_not_wrap_in_details']) && !empty($element['#cardinality']) && $element['#cardinality'] === 1;
if ($single_file_widget && empty($element['#single_wrapped'])) {
$element['#theme_wrappers']['details'] = [
'#title' => $element['#title'],
diff --git a/core/themes/claro/templates/classy/media-library/media--media-library.html.twig b/core/themes/claro/templates/media-library/media--media-library.html.twig
similarity index 96%
rename from core/themes/claro/templates/classy/media-library/media--media-library.html.twig
rename to core/themes/claro/templates/media-library/media--media-library.html.twig
index e88635424fc0..b1f479f87c34 100644
--- a/core/themes/claro/templates/classy/media-library/media--media-library.html.twig
+++ b/core/themes/claro/templates/media-library/media--media-library.html.twig
@@ -38,7 +38,7 @@
* @ingroup themeable
*/
#}
-<article{{ attributes }}>
+<article{{ attributes.addClass('media-library-item__preview-wrapper') }}>
{% if content %}
<div{{ preview_attributes.addClass('media-library-item__preview js-media-library-item-preview') }}>
{{ content|without('name') }}
--
GitLab