diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index d4fbca8419..492044d1c2 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:
@@ -258,6 +264,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 5d735acb6b..71e6ee468f 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -551,6 +551,117 @@ function claro_form_node_form_alter(&$form, FormStateInterface $form_state) {
$form['revision_information']['#type'] = 'container';
$form['revision_information']['#group'] = 'meta';
$form['revision_information']['#attributes']['class'][] = 'entity-meta__revision';
+
+ /* THE FOLLOWING ONLY EXISTS TO MAKE REVIEW EASIER FOR ISSUE 3083256, THIS
+ NEEDS TO BE REMOVED BEFORE RTBC */
+ $form['default'] = [
+ '#type' => 'container',
+ ];
+ $form['default']['title'] = [
+ '#type' => 'item',
+ '#title' => 'Default Form Elements',
+ ];
+ $form['default']['select'] = [
+ '#type' => 'select',
+ '#title' => 'Select',
+ '#options' => [
+ 'one' => 'First Option',
+ 'two' => 'Second Option',
+ 'three' => 'Third Option',
+ 'four' => 'Fourth Option',
+ ],
+ ];
+ $form['default']['text'] = [
+ '#type' => 'textfield',
+ '#title' => 'Text Field',
+ ];
+ $form['default']['autocomplete'] = [
+ '#type' => 'textfield',
+ '#title' => 'Autocomplete Field',
+ '#autocomplete_route_name' => 'block.category_autocomplete',
+ ];
+ $form['small'] = [
+ '#type' => 'container',
+ ];
+ $form['small']['title'] = [
+ '#type' => 'item',
+ '#title' => 'Small Form Elements',
+ ];
+ $form['small']['select'] = [
+ '#type' => 'select',
+ '#title' => 'Select',
+ '#options' => [
+ 'one' => 'First Option',
+ 'two' => 'Second Option',
+ 'three' => 'Third Option',
+ 'four' => 'Fourth Option',
+ ],
+ '#attributes' => [
+ 'class' => [
+ 'form-element--small',
+ ],
+ ],
+ ];
+ $form['small']['text'] = [
+ '#type' => 'textfield',
+ '#title' => 'Text Field',
+ '#attributes' => [
+ 'class' => [
+ 'form-element--small',
+ ],
+ ],
+ ];
+ $form['small']['autocomplete'] = [
+ '#type' => 'textfield',
+ '#title' => 'Autocomplete Field',
+ '#autocomplete_route_name' => 'block.category_autocomplete',
+ '#attributes' => [
+ 'class' => [
+ 'form-element--small',
+ ],
+ ],
+ ];
+ $form['extrasmall'] = [
+ '#type' => 'container',
+ ];
+ $form['extrasmall']['title'] = [
+ '#type' => 'item',
+ '#title' => 'Extrasmall Form Elements',
+ ];
+ $form['extrasmall']['select'] = [
+ '#title' => 'Select',
+ '#type' => 'select',
+ '#options' => [
+ 'one' => 'First Option',
+ 'two' => 'Second Option',
+ 'three' => 'Third Option',
+ 'four' => 'Fourth Option',
+ ],
+ '#attributes' => [
+ 'class' => [
+ 'form-element--extrasmall',
+ ],
+ ],
+ ];
+ $form['extrasmall']['text'] = [
+ '#type' => 'textfield',
+ '#title' => 'Text Field',
+ '#attributes' => [
+ 'class' => [
+ 'form-element--extrasmall',
+ ],
+ ],
+ ];
+ $form['extrasmall']['autocomplete'] = [
+ '#type' => 'textfield',
+ '#title' => 'Autocomplete Field',
+ '#autocomplete_route_name' => 'block.category_autocomplete',
+ '#attributes' => [
+ 'class' => [
+ 'form-element--extrasmall',
+ ],
+ ],
+ ];
}
/**
@@ -639,7 +750,7 @@ function claro_views_ui_display_tab_alter(&$element) {
}
/**
- * Implements hook_preprocess_HOOK for views_exposed_form.
+ * Implements hook_preprocess_HOOK() for views_exposed_form.
*/
function claro_preprocess_views_exposed_form(&$variables) {
$form = &$variables['form'];
@@ -679,6 +790,9 @@ function claro_form_views_exposed_form_alter(&$form, FormStateInterface $form_st
$view = $form_state->getStorage()['view'];
$view_title = $view->getTitle();
+ // Use small form elements.
+ $form['#attributes']['class'][] = 'form--small';
+
// Add a label so screenreaders can identify the purpose of the exposed form
// without having to scan content that appears further down the page.
$form['#attributes']['aria-label'] = t('Filter the contents of the %view_title view', ['%view_title' => $view_title]);
@@ -1263,7 +1377,10 @@ 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 remove the details element.
+ $form['container']['upload']['#do_not_wrap_in_details'] = TRUE;
+ }
if (isset($form['container'])) {
$form['container']['#attributes']['class'][] = 'media-library-add-form__input-wrapper';
}
@@ -1291,15 +1408,22 @@ function claro_form_media_library_add_form_oembed_alter(array &$form, FormStateI
* they are saved.
*/
function claro_preprocess_item_list__media_library_add_form_media_list(array &$variables) {
+ $variables['attributes']['class'][] = 'form--small';
+
foreach ($variables['items'] as &$item) {
$item['value']['preview']['#attributes']['class'][] = 'media-library-add-form__preview';
$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]['#media_library_upload'] = TRUE;
+
if (isset($fields[$source_field_name])) {
$fields[$source_field_name]['#attributes']['class'][] = 'media-library-add-form__source-field';
}
@@ -1313,6 +1437,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';
}
/**
@@ -1333,6 +1458,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'])) {
@@ -1368,9 +1496,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) {
@@ -1402,6 +1532,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/elements.css b/core/themes/claro/css/base/elements.css
index 60e691f799..2ef0f89625 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -29,7 +29,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css
index 3f1a7f27ea..5654e20df2 100644
--- a/core/themes/claro/css/base/off-canvas.theme.css
+++ b/core/themes/claro/css/base/off-canvas.theme.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index c4904762f0..c64f94992f 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -24,7 +24,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
@@ -49,4 +49,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 c0987bb801..9d80e9277f 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -98,14 +98,21 @@
--input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
--input-border-size: 1px; /* (1/16)em ~ 1px */
--input--error-border-size: 2px;
- --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
+ --input-min-height: var(--space-xl); /* 48px */
+ --input-padding-vertical: calc((var(--input-min-height) - var(--input-line-height) - (var(--input-border-size) * 2)) / 2);
--input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
--input-font-size: var(--font-size-base);
- --input-line-height: var(--space-l);
- --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
- --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
- --input--extrasmall-font-size: var(--font-size-s);
- --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
+ --input-line-height: calc(var(--input-font-size) * 1.5); /* 150% */
+ --input-min-height--small: 2rem; /* 32px */
+ --input-padding-vertical--small: calc((var(--input-min-height--small) - var(--input-line-height--small) - (var(--input-border-size) * 2)) / 2);
+ --input-padding-horizontal--small: var(--input-padding-horizontal);
+ --input-font-size--small: var(--font-size-s);
+ --input-line-height--small: calc(var(--font-size-s) * 1.5); /* 150 % */
+ --input-min-height--extrasmall: var(--space-l); /* 24px */
+ --input-padding-vertical--extrasmall: calc((var(--input-min-height--extrasmall) - var(--input-line-height--extrasmall) - (var(--input-border-size) * 2)) / 2);
+ --input-padding-horizontal--extrasmall: calc(var(--space-xs) - var(--input-border-size));
+ --input-font-size--extrasmall: var(--font-size-xs);
+ --input-line-height--extrasmall: calc(var(--input-font-size--extrasmall) * 1.5); /* 150% */
--input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
--input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
/*
@@ -196,4 +203,23 @@
* 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--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);
+ --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/accordion.css b/core/themes/claro/css/components/accordion.css
index 262abe90ed..96fdc8b21f 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index a597ec2187..29ea0e0dde 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
@@ -57,6 +57,9 @@
/**
* Breadcrumb.
*/
+ /**
+ * Vertical Tabs.
+ */
}
/**
@@ -111,14 +114,16 @@
/* Small variant. */
-.no-touchevents .action-link--small {
+.no-touchevents .action-link--small,
+.no-touchevents .form--small .action-link {
padding: 0.375rem 0.75rem;
font-size: 0.889rem;
}
/* Extra small variant. */
-.no-touchevents .action-link--extrasmall {
+.no-touchevents .action-link--extrasmall,
+.no-touchevents .form--extrasmall .action-link {
padding: 0 0.5rem;
font-size: 0.889rem;
}
diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css
index b506ae9af4..7c105658f3 100644
--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -54,13 +54,15 @@
}
/* Small variant. */
-.no-touchevents .action-link--small {
+.no-touchevents .action-link--small,
+.no-touchevents .form--small .action-link {
padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
font-size: var(--font-size-s);
}
/* Extra small variant. */
-.no-touchevents .action-link--extrasmall {
+.no-touchevents .action-link--extrasmall,
+.no-touchevents .form--extrasmall .action-link {
padding: 0 var(--space-xs);
font-size: var(--font-size-s);
}
diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css
index 8aebb372e1..bd6824a129 100644
--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index 0b7c46a09f..e2f9ff5315 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
@@ -57,6 +57,9 @@
/**
* Breadcrumb.
*/
+ /**
+ * Vertical Tabs.
+ */
}
/**
@@ -79,9 +82,36 @@
*/
.js .form-autocomplete {
- background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
+ max-width: calc(100% - 2rem - 1px);
+ padding-right: 3rem; /* LTR */
+ background-image: url(../../../../misc/icons/868686/magnifier.svg);
background-repeat: no-repeat;
- background-position: 100% 50%;
+ background-position: calc(100% - 1rem + 1px) 50%; /* LTR */
+ background-size: calc(1rem + 2px) 100%;
+}
+
+.js .form--small .form-autocomplete,
+.js .form-autocomplete.form-element--small {
+ /*
+ * This calculation uses 15px where --input-padding-horizontal--small would
+ * be as as calc() returns an incorrect value when the variable is used.
+ */
+ max-width: calc(100% - 2.25rem + 13px);
+ padding-right: calc(2.25rem + 2px); /* LTR */
+ background-position: calc(100% - 0.5rem - 2px) 50%; /* LTR */
+ background-size: calc(0.75rem + 2px) 100%;
+}
+
+.js .form--extrasmall .form-autocomplete,
+.js .form-autocomplete.form-element--extrasmall {
+ /*
+ * This calculation uses 15px where --input-padding-horizontal--extrasmall
+ * would be as as calc() returns an incorrect value when the variable is used.
+ */
+ max-width: calc(100% - 1.75rem + 9px);
+ padding-right: calc(1.75rem - 2px);
+ background-position: calc(100% - 0.5rem - 2px) 50%;
+ background-size: 0.75rem 100%;
}
.js .form-autocomplete::-ms-clear {
@@ -89,8 +119,24 @@
}
.js[dir="rtl"] .form-autocomplete {
- background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
- background-position: 0 50%;
+ padding-right: calc(1rem - 1px);
+ padding-left: 3rem;
+ background-image: url(../../../../misc/icons/868686/magnifier-rtl.svg);
+ background-position: calc(1rem - 1px) 50%;
+}
+
+.js[dir="rtl"] .form--small .form-autocomplete,
+.js[dir="rtl"] .form-autocomplete.form-element--small {
+ padding-right: calc(1rem - 1px);
+ padding-left: calc(2.25rem + 2px);
+ background-position: calc(0.5rem - 2px) 50%;
+}
+
+.js[dir="rtl"] .form--extrasmall .form-autocomplete,
+.js[dir="rtl"] .form-autocomplete.form-element--extrasmall {
+ padding-right: calc(0.5rem - 1px);
+ padding-left: calc(1.75rem - 2px);
+ background-position: calc(0.5rem - 2px) 50%;
}
.js .form-autocomplete.is-autocompleting {
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
index 8369dc723c..3332224ea4 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
@@ -26,17 +26,65 @@
* feedback would be a usability/accessibility issue as well.
*/
+:root {
+ --autocomplete-background-width: calc(var(--space-m) + (var(--input-border-size) * 2));
+ --autocomplete-background-width--small: calc(var(--space-s) + (var(--input-border-size) * 2));
+ --autocomplete-background-width--extrasmall: var(--space-s);
+ --autocomplete-icon-padding: calc((var(--input-padding-horizontal) * 2) + var(--autocomplete-background-width));
+ --autocomplete-icon-padding--small: calc((var(--space-s) * 2) + var(--autocomplete-background-width--small));
+ --autocomplete-icon-padding--extrasmall: calc((var(--input-padding-horizontal--extrasmall) * 2) + var(--autocomplete-background-width--extrasmall));
+}
+
.js .form-autocomplete {
- background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
+ max-width: calc(100% - (var(--autocomplete-icon-padding) - var(--input-padding-horizontal)));
+ padding-right: var(--autocomplete-icon-padding); /* LTR */
+ background-image: url(../../../../misc/icons/868686/magnifier.svg);
background-repeat: no-repeat;
- background-position: 100% 50%;
+ background-position: calc(100% - var(--input-padding-horizontal)) 50%; /* LTR */
+ background-size: var(--autocomplete-background-width) 100%;
+}
+.js .form--small .form-autocomplete,
+.js .form-autocomplete.form-element--small {
+ /*
+ * This calculation uses 15px where --input-padding-horizontal--small would
+ * be as as calc() returns an incorrect value when the variable is used.
+ */
+ max-width: calc(100% - (var(--autocomplete-icon-padding--small) - 15px));
+ padding-right: var(--autocomplete-icon-padding--small); /* LTR */
+ background-position: calc(100% - var(--space-xs) - (var(--input-border-size) * 2)) 50%; /* LTR */
+ background-size: var(--autocomplete-background-width--small) 100%;
+}
+.js .form--extrasmall .form-autocomplete,
+.js .form-autocomplete.form-element--extrasmall {
+ /*
+ * This calculation uses 15px where --input-padding-horizontal--extrasmall
+ * would be as as calc() returns an incorrect value when the variable is used.
+ */
+ max-width: calc(100% - (var(--autocomplete-icon-padding--extrasmall) - 7px));
+ padding-right: var(--autocomplete-icon-padding--extrasmall);
+ background-position: calc(100% - var(--space-xs) - (var(--input-border-size) * 2)) 50%;
+ background-size: var(--autocomplete-background-width--extrasmall) 100%;
}
.js .form-autocomplete::-ms-clear {
display: none;
}
.js[dir="rtl"] .form-autocomplete {
- background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
- background-position: 0 50%;
+ padding-right: var(--input-padding-horizontal);
+ padding-left: var(--autocomplete-icon-padding);
+ background-image: url(../../../../misc/icons/868686/magnifier-rtl.svg);
+ background-position: var(--input-padding-horizontal) 50%;
+}
+.js[dir="rtl"] .form--small .form-autocomplete,
+.js[dir="rtl"] .form-autocomplete.form-element--small {
+ padding-right: var(--input-padding-horizontal--small);
+ padding-left: var(--autocomplete-icon-padding--small);
+ background-position: calc(var(--space-xs) - (var(--input-border-size) * 2)) 50%;
+}
+.js[dir="rtl"] .form--extrasmall .form-autocomplete,
+.js[dir="rtl"] .form-autocomplete.form-element--extrasmall {
+ padding-right: var(--input-padding-horizontal--extrasmall);
+ padding-left: var(--autocomplete-icon-padding--extrasmall);
+ background-position: calc(var(--space-xs) - (var(--input-border-size) * 2)) 50%;
}
.js .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css
index 4330851497..bd93298cec 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index 204a83bc70..809a748363 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
@@ -57,6 +57,9 @@
/**
* Breadcrumb.
*/
+ /**
+ * Vertical Tabs.
+ */
}
/**
@@ -125,7 +128,8 @@
/* Common styles for small buttons */
-.no-touchevents .button--small {
+.no-touchevents .button--small,
+.no-touchevents .form--small .button {
margin: 0.75rem 0.5rem 0.75rem 0; /* LTR */
padding: calc(0.5rem - 1px) calc(1rem - 1px); /* 1 */
font-size: 0.79rem;
@@ -133,14 +137,17 @@
/* Common styles for extra small buttons */
-.no-touchevents .button--extrasmall {
+.no-touchevents .button--extrasmall,
+.no-touchevents .form--extrasmall .button {
margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */
padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */
font-size: 0.79rem;
}
[dir="rtl"].no-touchevents .button--small,
-[dir="rtl"].no-touchevents .button--extrasmall {
+[dir="rtl"].no-touchevents .form--small .button,
+[dir="rtl"].no-touchevents .button--extrasmall,
+[dir="rtl"].no-touchevents .form--extrasmall .button {
margin-right: 0;
margin-left: 0.5rem;
}
diff --git a/core/themes/claro/css/components/button.pcss.css b/core/themes/claro/css/components/button.pcss.css
index f1f95222bd..31393c01e4 100644
--- a/core/themes/claro/css/components/button.pcss.css
+++ b/core/themes/claro/css/components/button.pcss.css
@@ -68,20 +68,24 @@
}
/* Common styles for small buttons */
-.no-touchevents .button--small {
+.no-touchevents .button--small,
+.no-touchevents .form--small .button {
margin: var(--space-s) var(--space-xs) var(--space-s) 0; /* LTR */
padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
font-size: var(--font-size-xs);
}
/* Common styles for extra small buttons */
-.no-touchevents .button--extrasmall {
+.no-touchevents .button--extrasmall,
+.no-touchevents .form--extrasmall .button {
margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
font-size: var(--font-size-xs);
}
[dir="rtl"].no-touchevents .button--small,
-[dir="rtl"].no-touchevents .button--extrasmall {
+[dir="rtl"].no-touchevents .form--small .button,
+[dir="rtl"].no-touchevents .button--extrasmall,
+[dir="rtl"].no-touchevents .form--extrasmall .button {
margin-right: 0;
margin-left: var(--space-xs);
}
diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css
index 678690719b..dd5fe51183 100644
--- a/core/themes/claro/css/components/card.css
+++ b/core/themes/claro/css/components/card.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css
index eb2931e250..294cf483df 100644
--- a/core/themes/claro/css/components/content-header.css
+++ b/core/themes/claro/css/components/content-header.css
@@ -29,7 +29,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index b32c24421a..feead8c626 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index 337231bd2f..266cb55d24 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css
index b1815bef9d..055b1f4d8a 100644
--- a/core/themes/claro/css/components/divider.css
+++ b/core/themes/claro/css/components/divider.css
@@ -29,7 +29,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 32211326e8..9faaf2bf4b 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -34,7 +34,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index 69d18bba0b..ec0a1ad8b8 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index 5a16d35d29..543d6ae690 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index 4a843cf47e..010cc1fe38 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css
index d6a7005aa5..6006bcb03b 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index eb2aa6534e..0f39d24c07 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/form--field-multiple.css b/core/themes/claro/css/components/form--field-multiple.css
index 5d92173bda..857445298a 100644
--- a/core/themes/claro/css/components/form--field-multiple.css
+++ b/core/themes/claro/css/components/form--field-multiple.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css
index b75546f1cc..0a1c53a144 100644
--- a/core/themes/claro/css/components/form--managed-file.css
+++ b/core/themes/claro/css/components/form--managed-file.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index 66cd3d903f..2a166da8ac 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css
index 53d123aa61..3a94a9b416 100644
--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
@@ -55,32 +55,54 @@
/**
* Breadcrumb.
*/
+ /**
+ * Vertical Tabs.
+ */
+}
+
+:root { /* SVG background image has width:14px height:9px. 9 / 14 = .642 */
}
.form-element--type-select {
- padding-right: calc(2rem - 1px);
+ padding-right: calc(3rem - 2px); /* LTR */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23545560'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
- background-position: 100% 50%;
- background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
+ background-position: calc(100% - 1rem + 1px) calc(50% + 1px); /* LTR */
+ background-size: 1rem 0.642rem;
}
[dir="rtl"] .form-element--type-select {
padding-right: calc(1rem - 1px);
- padding-left: calc(2rem - 1px);
- background-position: 0 50%;
+ padding-left: calc(3rem - 2px);
+ background-position: calc(1rem - 1px) calc(50% + 1px);
+}
+
+.no-touchevents .form--small .form-element--type-select,
+.no-touchevents .form-element--type-select.form-element--small {
+ padding-right: calc(2.75rem - 2px); /* LTR */
+ background-size: 0.75rem 0.4815rem;
+}
+
+[dir="rtl"].no-touchevents .form-element--type-select.form-element--small,
+[dir="rtl"].no-touchevents .form--small .form-element--type-select {
+ padding-right: calc(1rem - 1px);
+ padding-left: calc(2.75rem - 2px);
}
+.no-touchevents .form--extrasmall .form-element--type-select,
.no-touchevents .form-element--type-select.form-element--extrasmall,
.no-touchevents .form-element--type-select[name$="][_weight]"] {
- padding-right: calc(1.5rem - 1px);
- background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
+ padding-right: calc(1.75rem - 2px); /* LTR */
+ background-position: calc(100% - 0.5rem + 1px) 50%; /* LTR */
+ background-size: 0.75rem 0.4815rem;
}
+[dir="rtl"].no-touchevents .form--extrasmall .form-element--type-select,
[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
padding-right: calc(0.5rem - 1px);
- padding-left: calc(1.5rem - 1px);
+ padding-left: calc(1.75rem - 2px);
+ background-position: calc(0.5rem - 1px) 50%;
}
.form-element--type-select::-ms-expand {
diff --git a/core/themes/claro/css/components/form--select.pcss.css b/core/themes/claro/css/components/form--select.pcss.css
index 094664eb56..81970a929e 100644
--- a/core/themes/claro/css/components/form--select.pcss.css
+++ b/core/themes/claro/css/components/form--select.pcss.css
@@ -5,28 +5,53 @@
@import "../base/variables.pcss.css";
+:root {
+ --select--background-image-height-width-ratio: 0.642; /* SVG background image has width:14px height:9px. 9 / 14 = .642 */
+ --select--background-image-width: var(--space-m);
+ --select--background-image-height: calc(var(--select--background-image-width) * var(--select--background-image-height-width-ratio));
+ --select--background-image-width--small: var(--space-s);
+ --select--background-image-height--small: calc(var(--select--background-image-width--small) * var(--select--background-image-height-width-ratio));
+ --select--background-image-width--extrasmall: var(--space-s);
+ --select--background-image-height--extrasmall: calc(var(--select--background-image-width--small) * var(--select--background-image-height-width-ratio));
+}
+
.form-element--type-select {
- padding-right: calc(2rem - var(--input-border-size));
+ padding-right: calc(var(--select--background-image-width) + (var(--input-padding-horizontal) * 2)); /* LTR */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23545560'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
- background-position: 100% 50%;
- background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
+ background-position: calc(100% - var(--input-padding-horizontal)) calc(50% + var(--input-border-size)); /* LTR */
+ background-size: var(--select--background-image-width) var(--select--background-image-height);
}
[dir="rtl"] .form-element--type-select {
- padding-right: calc(1rem - var(--input-border-size));
- padding-left: calc(2rem - var(--input-border-size));
- background-position: 0 50%;
+ padding-right: var(--input-padding-horizontal);
+ padding-left: calc(var(--select--background-image-width) + (var(--input-padding-horizontal) * 2));
+ background-position: var(--input-padding-horizontal) calc(50% + var(--input-border-size));
+}
+
+.no-touchevents .form--small .form-element--type-select,
+.no-touchevents .form-element--type-select.form-element--small {
+ padding-right: calc(var(--select--background-image-width--small) + (var(--input-padding-horizontal) * 2)); /* LTR */
+ background-size: var(--select--background-image-width--small) var(--select--background-image-height--small);
+}
+[dir="rtl"].no-touchevents .form-element--type-select.form-element--small,
+[dir="rtl"].no-touchevents .form--small .form-element--type-select {
+ padding-right: var(--input-padding-horizontal);
+ padding-left: calc(var(--select--background-image-width--small) + (var(--input-padding-horizontal) * 2));
}
+.no-touchevents .form--extrasmall .form-element--type-select,
.no-touchevents .form-element--type-select.form-element--extrasmall,
.no-touchevents .form-element--type-select[name$="][_weight]"] {
- padding-right: calc(1.5rem - var(--input-border-size));
- background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
+ padding-right: calc(var(--select--background-image-width--extrasmall) + (var(--input-padding-horizontal--extrasmall) * 2)); /* LTR */
+ background-position: calc(100% - var(--input-padding-horizontal--extrasmall)) 50%; /* LTR */
+ background-size: var(--select--background-image-width--extrasmall) var(--select--background-image-height--extrasmall);
}
+[dir="rtl"].no-touchevents .form--extrasmall .form-element--type-select,
[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
- padding-right: calc(0.5rem - var(--input-border-size));
- padding-left: calc(1.5rem - var(--input-border-size));
+ padding-right: var(--input-padding-horizontal--extrasmall);
+ padding-left: calc(var(--select--background-image-width--extrasmall) + (var(--input-padding-horizontal--extrasmall) * 2));
+ background-position: var(--input-padding-horizontal--extrasmall) 50%;
}
.form-element--type-select::-ms-expand {
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index 221658991b..e9efe93384 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
@@ -55,13 +55,16 @@
/**
* Breadcrumb.
*/
+ /**
+ * Vertical Tabs.
+ */
}
.form-element {
box-sizing: border-box;
max-width: 100%;
- min-height: 3rem; /* iOS. */
- padding: calc(0.75rem - 1px) calc(1rem - 1px);
+ min-height: 3rem;
+ padding: calc((1.5rem - 2px)/2) calc(1rem - 1px);
color: #222330;
border: 1px solid #8e929c;
border-radius: 0.125rem;
@@ -73,12 +76,21 @@
appearance: none; /* Being able to control inner box shadow on iOS. */
}
+.no-touchevents .form--small .form-element,
+.no-touchevents .form-element--small {
+ min-height: 2rem;
+ padding: calc((0.6665rem - 2px)/2) calc(1rem - 1px);
+ font-size: 0.889rem;
+ line-height: 1.3335rem;
+}
+
+.no-touchevents .form--extrasmall .form-element,
.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
min-height: 1.5rem; /* iOS. */
- padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
- font-size: 0.889rem;
- line-height: 1.2rem;
+ padding: calc((0.315rem - 2px)/2) calc(0.5rem - 1px);
+ font-size: 0.79rem;
+ line-height: 1.185rem;
}
/**
diff --git a/core/themes/claro/css/components/form--text.pcss.css b/core/themes/claro/css/components/form--text.pcss.css
index d6d09b6f88..0ea3cb4d4e 100644
--- a/core/themes/claro/css/components/form--text.pcss.css
+++ b/core/themes/claro/css/components/form--text.pcss.css
@@ -8,7 +8,7 @@
.form-element {
box-sizing: border-box;
max-width: 100%;
- min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
+ min-height: var(--input-min-height);
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
color: var(--input-fg-color);
border: var(--input-border-size) solid var(--input-border-color);
@@ -19,12 +19,21 @@
appearance: none; /* Being able to control inner box shadow on iOS. */
}
+.no-touchevents .form--small .form-element,
+.no-touchevents .form-element--small {
+ min-height: var(--input-min-height--small);
+ padding: var(--input-padding-vertical--small) var(--input-padding-horizontal--small);
+ font-size: var(--input-font-size--small);
+ line-height: var(--input-line-height--small);
+}
+
+.no-touchevents .form--extrasmall .form-element,
.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
- min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
- padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
- font-size: var(--input--extrasmall-font-size);
- line-height: var(--input--extrasmall-line-height);
+ min-height: var(--input-min-height--extrasmall); /* iOS. */
+ padding: var(--input-padding-vertical--extrasmall) var(--input-padding-horizontal--extrasmall);
+ font-size: var(--input-font-size--extrasmall);
+ line-height: var(--input-line-height--extrasmall);
}
/**
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index 444440b809..bc2fd8629f 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css
index 8f852e6c4e..be800d972f 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index 35fed8bc0a..4270105b7b 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -31,7 +31,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/media-library.ui.css b/core/themes/claro/css/components/media-library.ui.css
index 0c58d28c39..67e282f781 100644
--- a/core/themes/claro/css/components/media-library.ui.css
+++ b/core/themes/claro/css/components/media-library.ui.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 22ddf4577f..4f353834d5 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css
index 7d17a79f79..a0ea311c96 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/page-title.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css
index 35ec53bdfa..aff091da14 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index e164c5e15a..9c1283e342 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index 8e81a94152..5b4568d2de 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css
index 156c5ef941..592154b292 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index 0ee091ff8b..f114629c0c 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css
index fce235c52d..b5f3cf38c6 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index de0db72278..d2624aff32 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -34,7 +34,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index 63b6a7418f..9e593c0a2f 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/tableselect.css b/core/themes/claro/css/components/tableselect.css
index 8c347f60a6..2c3590aa75 100644
--- a/core/themes/claro/css/components/tableselect.css
+++ b/core/themes/claro/css/components/tableselect.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index b6323ce5e1..b1e3fe5cad 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -29,7 +29,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 358c430d3a..51959fb4d9 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
@@ -57,6 +57,9 @@
/**
* Breadcrumb.
*/
+ /**
+ * Vertical Tabs.
+ */
}
/**
@@ -109,7 +112,10 @@
.vertical-tabs__menu-item {
overflow: hidden;
- margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
+ margin: -1rem
+-1px
+-0.5rem
+-0.5rem; /* LTR */
padding: 0.5rem 0 0.5rem 0.5rem; /* LTR */
}
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index 12ed6a8647..9dea26c3d5 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,7 +53,7 @@
*/
.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--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 {
diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css
index fd31b52e1c..b73579e10a 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
@@ -55,6 +55,9 @@
/**
* Breadcrumb.
*/
+ /**
+ * Vertical Tabs.
+ */
}
/**
@@ -105,8 +108,15 @@ rgba(0, 0, 0, 0.1);
margin-left: 1rem;
}
-.views-exposed-form__item--actions.views-exposed-form__item--actions .button {
- margin-bottom: 0;
+.views-exposed-form__item--actions.views-exposed-form__item--actions {
+ margin: 0;
+ padding: 0;
+}
+
+.views-exposed-form__item--actions.views-exposed-form__item--actions .button,
+.form--small .views-exposed-form__item--actions.views-exposed-form__item--actions .button,
+.form--extrasmall .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
+ margin-bottom: 1px;
}
.views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {
diff --git a/core/themes/claro/css/components/views-exposed-form.pcss.css b/core/themes/claro/css/components/views-exposed-form.pcss.css
index 994163730d..b4113317bc 100644
--- a/core/themes/claro/css/components/views-exposed-form.pcss.css
+++ b/core/themes/claro/css/components/views-exposed-form.pcss.css
@@ -48,8 +48,14 @@
margin-left: var(--space-m);
}
-.views-exposed-form__item--actions.views-exposed-form__item--actions .button {
- margin-bottom: 0;
+.views-exposed-form__item--actions.views-exposed-form__item--actions {
+ margin: 0;
+ padding: 0;
+}
+.views-exposed-form__item--actions.views-exposed-form__item--actions .button,
+.form--small .views-exposed-form__item--actions.views-exposed-form__item--actions .button,
+.form--extrasmall .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
+ margin-bottom: var(--input-border-size);
}
.views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {
diff --git a/core/themes/claro/css/layout/breadcrumb.css b/core/themes/claro/css/layout/breadcrumb.css
index 90a797669e..aac9621da0 100644
--- a/core/themes/claro/css/layout/breadcrumb.css
+++ b/core/themes/claro/css/layout/breadcrumb.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/layout/card-list.css b/core/themes/claro/css/layout/card-list.css
index 2b5a433a19..a2e6dc5140 100644
--- a/core/themes/claro/css/layout/card-list.css
+++ b/core/themes/claro/css/layout/card-list.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/layout/local-actions.css b/core/themes/claro/css/layout/local-actions.css
index b19efba8be..8f43f53c10 100644
--- a/core/themes/claro/css/layout/local-actions.css
+++ b/core/themes/claro/css/layout/local-actions.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index 9195f34e98..71cbc41fd7 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -29,7 +29,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css
index 7b35c920ea..2cc0b8d3e6 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index 439e7d488c..9be9af941a 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -28,7 +28,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css
index f00499df9e..5f107841e7 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css
index 6ce2e87939..364b588a5c 100644
--- a/core/themes/claro/css/theme/field-ui.admin.css
+++ b/core/themes/claro/css/theme/field-ui.admin.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index f8fdf0487b..45078d8a89 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -30,7 +30,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css
index 9291606610..5df086474a 100644
--- a/core/themes/claro/css/theme/media-library.css
+++ b/core/themes/claro/css/theme/media-library.css
@@ -11,9 +11,59 @@
* Styling for Media Library.
*/
+:root {
+ /*
+ * Color Palette.
+ */
+ /* Secondary. */
+ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+ /*
+ * Base.
+ */
+ /*
+ * Typography.
+ */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+ /**
+ * Spaces.
+ */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+ /*
+ * Common.
+ */
+ /*
+ * Inputs.
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ /*
+ * Details.
+ */
+ /**
+ * Buttons.
+ */
+ /**
+ * jQuery.UI dropdown.
+ */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+ /**
+ * jQuery.UI dialog.
+ */
+ /**
+ * Progress bar.
+ */
+ /**
+ * Tabledrag icon size.
+ */ /* 17px */
+ /**
+ * Ajax progress.
+ */
+ /**
+ * Breadcrumb.
+ */
+ /**
+ * Vertical Tabs.
+ */
+}
+
.media-library-wrapper {
display: flex;
- margin: -1em;
+ margin: -1em -1.5em -1em -1em;
}
/**
@@ -22,17 +72,18 @@
*/
.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;
+ float: left; /* LTR */
+ width: 20em;
+ margin: 0;
+ padding-top: 0.5rem;
+ list-style: none;
+ color: #222330;
}
[dir="rtl"] .media-library-menu {
+ float: right;
margin: 0;
}
@@ -41,68 +92,169 @@
* https://www.drupal.org/project/drupal/issues/3029227
*/
-.media-library-menu li {
+.media-library-menu__item {
+ overflow: hidden;
+ margin: -1rem
+-1px
+-0.5rem
+-0.5rem; /* LTR */
+ padding: 0.5rem 0; /* LTR */
+}
+
+[dir="rtl"] .media-library-menu__item {
+ margin-right: -0.5rem;
+ margin-left: -1px;
+ padding-right: 0.5rem;
+ padding-left: 0;
+}
+
+.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 grey 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 +270,31 @@
outline: none;
}
+/* This Media Library form is an exception to the extrasmall button pattern. */
+
+.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+ margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */
+ padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */
+ font-size: 0.79rem;
+}
+
+[dir="rtl"].media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+ margin-right: 0;
+ margin-left: 0.5rem;
+}
+
.media-library-add-form__input-wrapper {
- padding: 16px;
- border: 1px solid #bfbfbf;
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+ 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);
+ /* background: #fcfcfa; */
}
/* Style the media add upload form. */
@@ -131,6 +303,15 @@
margin-bottom: 0;
}
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file_meta {
+ margin-top: 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;
+}
+
.media-library-add-form .file-upload-help {
margin: 8px 0 0;
}
@@ -139,6 +320,7 @@
.media-library-add-form--oembed .media-library-add-form__input-wrapper {
display: flex;
+ align-items: center;
}
@media screen and (max-width: 37.5em) {
@@ -302,6 +484,40 @@
position: relative;
}
+/**
+ * Ajax throbbers inside a media library item.
+ */
+
+.media-library-item .ajax-progress.ajax-progress.ajax-progress {
+ position: absolute;
+ z-index: 0;
+ 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;
+}
+
/**
* 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
@@ -431,12 +647,20 @@
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: #003cc5;
}
.media-library-item__click-to-select-checkbox {
@@ -516,16 +740,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,
@@ -565,15 +786,16 @@
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. */
@@ -605,15 +827,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;
}
@@ -637,8 +857,16 @@
}
.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 #d4d4d8 !important;
+ background-image: url("../../../../misc/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,
@@ -648,18 +876,20 @@
.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 #d4d4d8 !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: #003cc5 !important;
+ background-image: url("../../../../misc/icons/ffffff/ex.svg");
}
/**
@@ -708,7 +938,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 {
diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css
index 3ae30c1799..1b675eb43a 100644
--- a/core/themes/claro/css/theme/media-library.pcss.css
+++ b/core/themes/claro/css/theme/media-library.pcss.css
@@ -4,9 +4,11 @@
* Styling for Media Library.
*/
+@import "../base/variables.pcss.css";
+
.media-library-wrapper {
display: flex;
- margin: -1em;
+ margin: -1em -1.5em -1em -1em;
}
/**
@@ -14,16 +16,17 @@
* 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;
+ float: left; /* LTR */
+ 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 {
+ float: right;
margin: 0;
}
@@ -31,65 +34,149 @@
* @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--margin); /* LTR */
+ padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0; /* LTR */
+}
+
+[dir="rtl"] .media-library-menu__item {
+ margin-right: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+ margin-left: calc(var(--vertical-tabs-border-size) * -1);
+ padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
+ padding-left: 0;
+}
+
+.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 */
}
-.media-library-menu__link:active,
-.media-library-menu__link:hover,
+[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 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 grey 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,17 +191,40 @@
outline: none;
}
+/* This Media Library form is an exception to the extrasmall button pattern. */
+.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+ margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
+ padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
+ font-size: var(--font-size-xs);
+}
+
+[dir="rtl"].media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+ margin-right: 0;
+ margin-left: var(--space-xs);
+}
+
.media-library-add-form__input-wrapper {
- padding: 16px;
- border: 1px solid #bfbfbf;
- border-radius: 2px;
- background: #fcfcfa;
+ margin-top: var(--space-l);
+ margin-bottom: var(--space-l);
+ 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);
+ /* background: #fcfcfa; */
}
/* 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_meta {
+ margin-top: 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;
+}
.media-library-add-form .file-upload-help {
margin: 8px 0 0;
@@ -123,6 +233,7 @@
/* 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) {
@@ -273,6 +384,37 @@
position: relative;
}
+/**
+ * Ajax throbbers inside a media library item.
+ */
+.media-library-item .ajax-progress.ajax-progress.ajax-progress {
+ position: absolute;
+ z-index: var(--vertical-tabs-menu--z-index);
+ 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;
+}
+
/**
* 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
@@ -396,12 +538,19 @@
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(--color-absolutezero);
}
.media-library-item__click-to-select-checkbox {
@@ -477,16 +626,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,
@@ -523,14 +669,15 @@
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 +707,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 +735,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("../../../../misc/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,17 +752,20 @@
.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");
}
/**
@@ -655,7 +810,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;
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css
index af5ace8e2e..9234b4c132 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -32,7 +32,7 @@
*/
/*
* Inputs.
- */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+ */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
/*
* Details.
*/
diff --git a/core/themes/claro/images/src/magnifier-rtl.svg b/core/themes/claro/images/src/magnifier-rtl.svg
deleted file mode 100644
index 081344f9ed..0000000000
--- a/core/themes/claro/images/src/magnifier-rtl.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/core/themes/claro/images/src/magnifier.svg b/core/themes/claro/images/src/magnifier.svg
deleted file mode 100644
index 7d15c3ef78..0000000000
--- a/core/themes/claro/images/src/magnifier.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/core/themes/claro/src/ClaroPreRender.php b/core/themes/claro/src/ClaroPreRender.php
index d702543451..c8ec7db137 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'],