Skip to content
Snippets Groups Projects
Verified Commit 10257183 authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3332729 by Gauravvvv, rpayanm, Santosh_Verma, smustgrave, nod_:... 

Issue #3332729 by Gauravvvv, rpayanm, Santosh_Verma, smustgrave, nod_: Refactor Claro's vertical-tabs stylesheet
parent 72e7c019
No related branches found
No related tags found
42 merge requests!54479.5.x SF update,!5014Issue #3071143: Table Render Array Example Is Incorrect,!4868Issue #1428520: Improve menu parent link selection,!3878Removed unused condition head title for views,!38582585169-10.1.x,!3818Issue #2140179: $entity->original gets stale between updates,!3742Issue #3328429: Create item list field formatter for displaying ordered and unordered lists,!3731Claro: role=button on status report items,!3668Resolve #3347842 "Deprecate the trusted",!3651Issue #3347736: Create new SDC component for Olivero (header-search),!3546refactored dialog.pcss file,!3531Issue #3336994: StringFormatter always displays links to entity even if the user in context does not have access,!3502Issue #3335308: Confusing behavior with FormState::setFormState and FormState::setMethod,!3452Issue #3332701: Refactor Claro's tablesort-indicator stylesheet,!3451Issue #2410579: Allows setting the current language programmatically.,!3355Issue #3209129: Scrolling problems when adding a block via layout builder,!3226Issue #2987537: Custom menu link entity type should not declare "bundle" entity key,!3154Fixes #2987987 - CSRF token validation broken on routes with optional parameters.,!3147Issue #3328457: Replace most substr($a, $i) where $i is negative with str_ends_with(),!3146Issue #3328456: Replace substr($a, 0, $i) with str_starts_with(),!3133core/modules/system/css/components/hidden.module.css,!31312878513-10.1.x,!2964Issue #2865710 : Dependencies from only one instance of a widget are used in display modes,!2812Issue #3312049: [Followup] Fix Drupal.Commenting.FunctionComment.MissingReturnType returns for NULL,!2614Issue #2981326: Replace non-test usages of \Drupal::logger() with IoC injection,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2334Issue #3228209: Add hasRole() method to AccountInterface,!2062Issue #3246454: Add weekly granularity to views date sort,!1591Issue #3199697: Add JSON:API Translation experimental module,!1255Issue #3238922: Refactor (if feasible) uses of the jQuery serialize function to use vanillaJS,!1105Issue #3025039: New non translatable field on translatable content throws error,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!877Issue #2708101: Default value for link text is not saved,!844Resolve #3036010 "Updaters",!673Issue #3214208: FinishResponseSubscriber could create duplicate headers,!617Issue #3043725: Provide a Entity Handler for user cancelation,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493,!485Sets the autocomplete attribute for username/password input field on login form.,!30Issue #3182188: Updates composer usage to point at ./vendor/bin/composer
Hide whitespace changes
Inline Side-by-side
core/themes/claro/css/base/variables.css
+ 0
− 22
View file @ 10257183
......@@ -249,26 +249,4 @@
* Breadcrumb.
*/
--breadcrumb-height: 1.25rem;
/**
* Vertical Tabs.
*/
--vertical-tabs-margin-vertical: var(--space-s);
--vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
--vertical-tabs-shadow: var(--details-box-shadow);
--vertical-tabs-border-color: var(--details-border-color);
--vertical-tabs-border-size: 1px;
--vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
--vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
--vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-separator-color: var(--color-gray-200);
--vertical-tabs-menu-separator-size: 1px;
--vertical-tabs-menu-width: 20em;
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
--vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
--vertical-tabs-menu-link--active-border-size: 0.25rem;
--vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
--vertical-tabs-menu--z-index: 0;
}
core/themes/claro/css/base/variables.pcss.css
+ 0
− 22
View file @ 10257183
......@@ -243,26 +243,4 @@
* Breadcrumb.
*/
--breadcrumb-height: 1.25rem;
/**
* Vertical Tabs.
*/
--vertical-tabs-margin-vertical: var(--space-s);
--vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
--vertical-tabs-shadow: var(--details-box-shadow);
--vertical-tabs-border-color: var(--details-border-color);
--vertical-tabs-border-size: 1px;
--vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
--vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
--vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-separator-color: var(--color-gray-200);
--vertical-tabs-menu-separator-size: 1px;
--vertical-tabs-menu-width: 20em;
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
--vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
--vertical-tabs-menu-link--active-border-size: 4px;
--vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
--vertical-tabs-menu--z-index: 0;
}
core/themes/claro/css/components/vertical-tabs.css
+ 69
− 77
View file @ 10257183
......@@ -12,15 +12,39 @@
* Replaces /core/misc/vertical-tabs.css.
*/
:root {
/**
* Vertical Tabs.
*/
--vertical-tabs-margin-vertical: var(--space-s);
--vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
--vertical-tabs-shadow: var(--details-box-shadow);
--vertical-tabs-border-color: var(--details-border-color);
--vertical-tabs-border-size: 1px;
--vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
--vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
--vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-separator-color: var(--color-gray-200);
--vertical-tabs-menu-separator-size: 1px;
--vertical-tabs-menu-width: 20em;
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
--vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
--vertical-tabs-menu-link--active-border-size: 0.25rem;
--vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
--vertical-tabs-menu--z-index: 0;
}
/**
* Main wrapper of vertical tabs.
* This wrapper div is added by JavaScript.
*/
.vertical-tabs {
margin-top: var(--vertical-tabs-margin-vertical);
margin-bottom: var(--vertical-tabs-margin-vertical);
border-top: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
margin-block: var(--vertical-tabs-margin-vertical);
border-block-start: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
}
/**
......@@ -33,14 +57,13 @@
float: left; /* LTR */
width: var(--vertical-tabs-menu-width);
margin: 0;
padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
padding-block-start: var(--vertical-tabs-menu-item-shadow-extraspace);
list-style: none;
color: var(--color-text);
}
[dir="rtl"] .vertical-tabs__menu {
float: right;
margin: 0;
}
/**
......@@ -49,15 +72,10 @@
.vertical-tabs__menu-item {
overflow: hidden;
margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0 var(--vertical-tabs-menu-item-shadow-extraspace) var(--vertical-tabs-menu-item-shadow-extraspace); /* LTR */
}
[dir="rtl"] .vertical-tabs__menu-item {
margin-right: var(--vertical-tabs-menu-item--left-margin);
margin-left: var(--vertical-tabs-menu-item--right-margin);
padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
padding-left: 0;
margin-block: var(--vertical-tabs-menu-item--top-margin);
margin-inline: var(--vertical-tabs-menu-item--left-margin) var(--vertical-tabs-menu-item--right-margin);
padding-block: var(--vertical-tabs-menu-item-shadow-extraspace);
padding-inline: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
}
/**
......@@ -71,8 +89,8 @@
z-index: 1; /* 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;
width: 100%;
margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
margin-block-start: calc(var(--vertical-tabs-menu-separator-size) * -1);
border-block-start: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
}
/**
......@@ -123,8 +141,8 @@
.vertical-tabs__menu-link {
position: relative;
display: block;
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 */
margin-block-start: 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));
-webkit-text-decoration: none;
text-decoration: none;
word-wrap: break-word;
......@@ -132,19 +150,14 @@
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 */
border-block-width: var(--vertical-tabs-border-size);
border-inline-width: var(--vertical-tabs-menu-link--active-border-size) 0;
border-start-start-radius: var(--vertical-tabs-border-radius);
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: var(--vertical-tabs-border-radius);
}
[dir="rtl"] .vertical-tabs__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;
}
/* Menu link states. */
.vertical-tabs__menu-link:focus {
z-index: 4; /* 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. */
-webkit-text-decoration: none;
......@@ -152,46 +165,34 @@
box-shadow: none;
}
.vertical-tabs__menu-link:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-absolutezero);
}
/* This pseudo element provides the background for the hover state. */
.vertical-tabs__menu-link::before {
.vertical-tabs__menu-link:focus::after {
position: absolute;
z-index: 0; /* 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 */
inset: 0;
margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
content: "";
pointer-events: none;
background-clip: padding-box;
border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
border-radius: var(--vertical-tabs-border-radius);
}
[dir="rtl"] .vertical-tabs__menu-link::before {
right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
left: 0;
.vertical-tabs__menu-link:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-absolutezero);
}
.vertical-tabs__menu-link:hover::before {
background: var(--color-bgblue-hover);
}
.vertical-tabs__menu-link:focus::after {
.vertical-tabs__menu-link::before {
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);
z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
inset-block: calc(var(--vertical-tabs-border-size) * -1);
inset-inline: calc(var(--vertical-tabs-menu-link--active-border-size) * -1) 0;
content: "";
pointer-events: none;
border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
border-radius: var(--vertical-tabs-border-radius);
background-clip: padding-box;
}
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
......@@ -209,14 +210,12 @@
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::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"] .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::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;
border-inline-start: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
border-start-start-radius: var(--base-border-radius);
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: var(--base-border-radius);
}
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
......@@ -245,8 +244,7 @@
.vertical-tabs__items {
box-sizing: border-box;
margin-top: var(--vertical-tabs-margin-vertical);
margin-bottom: var(--vertical-tabs-margin-vertical);
margin-block: var(--vertical-tabs-margin-vertical);
color: var(--color-text);
border: var(--vertical-tabs-border);
border-radius: var(--vertical-tabs-border-radius);
......@@ -259,29 +257,23 @@
.vertical-tabs__panes {
position: relative;
z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
top: -1px;
margin-top: 0;
margin-bottom: 0;
inset-block-start: -1px;
margin-block: 0;
}
/* This clearfix makes the pane wrapper at least as tall as the menu. */
.vertical-tabs__panes::after {
display: block;
display: block; /* This clearfix makes the pane wrapper at least as tall as the menu. */
clear: both;
content: "";
}
.vertical-tabs .vertical-tabs__panes {
margin-left: var(--vertical-tabs-menu-width); /* LTR */
border-top-left-radius: 0; /* LTR */
margin-inline-start: var(--vertical-tabs-menu-width);
border-top-left-radius: 0;
}
[dir="rtl"] .vertical-tabs .vertical-tabs__panes {
margin-right: var(--vertical-tabs-menu-width);
margin-left: 0;
[dir="rtl"] :is(.vertical-tabs .vertical-tabs__panes) {
border-top-left-radius: var(--vertical-tabs-border-radius);
border-top-right-radius: 0;
}
/**
......
core/themes/claro/css/components/vertical-tabs.pcss.css
+ 112
− 112
View file @ 10257183
......@@ -5,14 +5,38 @@
* Replaces /core/misc/vertical-tabs.css.
*/
:root {
/**
* Vertical Tabs.
*/
--vertical-tabs-margin-vertical: var(--space-s);
--vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
--vertical-tabs-shadow: var(--details-box-shadow);
--vertical-tabs-border-color: var(--details-border-color);
--vertical-tabs-border-size: 1px;
--vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
--vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
--vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-separator-color: var(--color-gray-200);
--vertical-tabs-menu-separator-size: 1px;
--vertical-tabs-menu-width: 20em;
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
--vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
--vertical-tabs-menu-link--active-border-size: 4px;
--vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
--vertical-tabs-menu--z-index: 0;
}
/**
* Main wrapper of vertical tabs.
* This wrapper div is added by JavaScript.
*/
.vertical-tabs {
margin-top: var(--vertical-tabs-margin-vertical);
margin-bottom: var(--vertical-tabs-margin-vertical);
border-top: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
margin-block: var(--vertical-tabs-margin-vertical);
border-block-start: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
}
/**
......@@ -24,13 +48,13 @@
float: left; /* LTR */
width: var(--vertical-tabs-menu-width);
margin: 0;
padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
padding-block-start: var(--vertical-tabs-menu-item-shadow-extraspace);
list-style: none;
color: var(--color-text);
}
[dir="rtl"] .vertical-tabs__menu {
float: right;
margin: 0;
@nest [dir="rtl"] & {
float: right;
}
}
/**
......@@ -38,14 +62,10 @@
*/
.vertical-tabs__menu-item {
overflow: hidden;
margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0 var(--vertical-tabs-menu-item-shadow-extraspace) var(--vertical-tabs-menu-item-shadow-extraspace); /* LTR */
}
[dir="rtl"] .vertical-tabs__menu-item {
margin-right: var(--vertical-tabs-menu-item--left-margin);
margin-left: var(--vertical-tabs-menu-item--right-margin);
padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
padding-left: 0;
margin-block: var(--vertical-tabs-menu-item--top-margin);
margin-inline: var(--vertical-tabs-menu-item--left-margin) var(--vertical-tabs-menu-item--right-margin);
padding-block: var(--vertical-tabs-menu-item-shadow-extraspace);
padding-inline: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
}
/**
......@@ -58,8 +78,8 @@
z-index: 1; /* 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;
width: 100%;
margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
margin-block-start: calc(var(--vertical-tabs-menu-separator-size) * -1);
border-block-start: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
}
/**
......@@ -105,67 +125,53 @@
.vertical-tabs__menu-link {
position: relative;
display: block;
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 */
margin-block-start: 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));
text-decoration: none;
word-wrap: break-word;
hyphens: auto;
color: var(--color-text);
border: var(--vertical-tabs-border-size) solid transparent;
border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
}
[dir="rtl"] .vertical-tabs__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;
}
border-block-width: var(--vertical-tabs-border-size);
border-inline-width: var(--vertical-tabs-menu-link--active-border-size) 0;
border-start-start-radius: var(--vertical-tabs-border-radius);
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: var(--vertical-tabs-border-radius);
/* Menu link states. */
.vertical-tabs__menu-link:focus {
z-index: 4; /* 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;
}
.vertical-tabs__menu-link:hover {
text-decoration: none;
color: var(--color-absolutezero);
}
&:focus {
z-index: 4; /* 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;
/* This pseudo element provides the background for the hover state. */
.vertical-tabs__menu-link::before {
position: absolute;
z-index: 0; /* 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"] .vertical-tabs__menu-link::before {
right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
left: 0;
}
&::after {
position: absolute;
inset: 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);
}
}
.vertical-tabs__menu-link:hover::before {
background: var(--color-bgblue-hover);
}
&:hover {
text-decoration: none;
color: var(--color-absolutezero);
&::before {
background: var(--color-bgblue-hover);
}
}
.vertical-tabs__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);
&::before {
position: absolute;
z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
inset-block: calc(var(--vertical-tabs-border-size) * -1);
inset-inline: calc(var(--vertical-tabs-menu-link--active-border-size) * -1) 0;
content: "";
pointer-events: none;
background-clip: padding-box;
}
}
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
......@@ -183,13 +189,12 @@
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::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] .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::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;
border-inline-start: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
border-start-start-radius: var(--base-border-radius);
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: var(--base-border-radius);
}
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
......@@ -216,8 +221,7 @@
*/
.vertical-tabs__items {
box-sizing: border-box;
margin-top: var(--vertical-tabs-margin-vertical);
margin-bottom: var(--vertical-tabs-margin-vertical);
margin-block: var(--vertical-tabs-margin-vertical);
color: var(--color-text);
border: var(--vertical-tabs-border);
border-radius: var(--vertical-tabs-border-radius);
......@@ -229,27 +233,23 @@
.vertical-tabs__panes {
position: relative;
z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
top: -1px;
margin-top: 0;
margin-bottom: 0;
}
/* This clearfix makes the pane wrapper at least as tall as the menu. */
.vertical-tabs__panes::after {
display: block;
clear: both;
content: "";
inset-block-start: -1px;
margin-block: 0;
&::after {
display: block; /* This clearfix makes the pane wrapper at least as tall as the menu. */
clear: both;
content: "";
}
}
.vertical-tabs .vertical-tabs__panes {
margin-left: var(--vertical-tabs-menu-width); /* LTR */
border-top-left-radius: 0; /* LTR */
}
margin-inline-start: var(--vertical-tabs-menu-width);
border-top-left-radius: 0;
[dir="rtl"] .vertical-tabs .vertical-tabs__panes {
margin-right: var(--vertical-tabs-menu-width);
margin-left: 0;
border-top-left-radius: var(--vertical-tabs-border-radius);
border-top-right-radius: 0;
@nest [dir="rtl"] & {
border-top-left-radius: var(--vertical-tabs-border-radius);
}
}
/**
......@@ -262,30 +262,30 @@
/* Render on top of the border of vertical-tabs__items. */
margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-border-size) * -1) 0;
border-radius: 0;
}
.vertical-tabs__item.first {
border-top-left-radius: var(--details-accordion-border-size-radius);
border-top-right-radius: var(--details-accordion-border-size-radius);
}
&.first {
border-top-left-radius: var(--details-accordion-border-size-radius);
border-top-right-radius: var(--details-accordion-border-size-radius);
}
.vertical-tabs__item.last {
margin-bottom: calc(var(--vertical-tabs-border-size) * -1);
border-bottom-right-radius: var(--details-accordion-border-size-radius);
border-bottom-left-radius: var(--details-accordion-border-size-radius);
&.last {
margin-bottom: calc(var(--vertical-tabs-border-size) * -1);
border-bottom-right-radius: var(--details-accordion-border-size-radius);
border-bottom-left-radius: var(--details-accordion-border-size-radius);
}
}
.js .vertical-tabs .vertical-tabs__item {
overflow: hidden;
margin: 0;
border: 0;
}
.js .vertical-tabs .vertical-tabs__item.first,
.js .vertical-tabs .vertical-tabs__item.last {
border-radius: 0;
}
&.first,
&.last {
border-radius: 0;
}
.js .vertical-tabs .vertical-tabs__item > summary {
display: none;
& > summary {
display: none;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment