vertical-tabs.css
Same filename in this branch
Same filename in other branches
- 7.x misc/vertical-tabs.css
- 7.x themes/seven/vertical-tabs.css
- 9 core/misc/vertical-tabs.css
- 9 core/themes/olivero/css/components/vertical-tabs.css
- 9 core/themes/stable9/css/core/vertical-tabs.css
- 9 core/themes/seven/css/components/vertical-tabs.css
- 9 core/themes/claro/css/components/vertical-tabs.css
- 9 core/themes/stable/css/core/vertical-tabs.css
- 8.9.x core/misc/vertical-tabs.css
- 8.9.x core/themes/seven/css/components/vertical-tabs.css
- 8.9.x core/themes/claro/css/components/vertical-tabs.css
- 8.9.x core/themes/stable/css/core/vertical-tabs.css
- 10 core/misc/vertical-tabs.css
- 10 core/themes/olivero/css/components/vertical-tabs.css
- 10 core/themes/stable9/css/core/vertical-tabs.css
- 10 core/themes/claro/css/components/vertical-tabs.css
Vertical Tabs.
File
-
core/
themes/ olivero/ css/ components/ vertical-tabs.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
- /**
- * @file
- * Vertical Tabs.
- */
-
- :root {
- --vertical-tabs-menu-width: 15rem;
- --vertical-tabs-menu-border-width: 1px;
- }
-
- @media (min-width: 62.5rem) {
- .vertical-tabs {
- display: flex;
- }
- }
-
- .vertical-tabs__menu {
- position: relative;
- align-self: flex-start;
- margin: 0;
- margin-inline-start: 0;
- margin-inline-end: 0;
- list-style: none;
- border-width: var(--vertical-tabs-menu-border-width);
- border-style: solid;
- border-color: var(--color--gray-95);
- }
-
- @media (min-width: 62.5rem) {
- .vertical-tabs__menu {
- width: var(--vertical-tabs-menu-width);
- border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width);
- }
- }
-
- .vertical-tabs__panes {
- margin-block-start: calc(var(--vertical-tabs-menu-border-width) * -1);
- }
-
- @media (min-width: 62.5rem) {
- .vertical-tabs__panes {
- width: calc(100% - var(--vertical-tabs-menu-width));
- margin-block-start: 0;
- }
- }
-
- @media (min-width: 62.5rem) {
- .vertical-tabs__pane {
- min-height: 100%;
- }
- }
-
- .vertical-tabs__pane.olivero-details {
- margin: 0;
- border-radius: 0;
- box-shadow: none;
- }
-
- .vertical-tabs__pane > summary {
- display: none;
- }
-
- .vertical-tabs__menu-item:nth-child(n + 2) {
- border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
- }
-
- .vertical-tabs__menu-item a {
- display: block;
- padding-block: var(--sp0-5);
- padding-inline-start: var(--sp0-75);
- padding-inline-end: var(--sp0-75);
- -webkit-text-decoration: none;
- text-decoration: none;
- color: var(--color-text-primary-loud);
- background-color: var(--color--gray-95);
- }
-
- .vertical-tabs__menu-item a:focus,
- .vertical-tabs__menu-item a:hover,
- .vertical-tabs__menu-item a:active {
- background-color: var(--color--gray-100);
- }
-
- .vertical-tabs__menu-item.is-selected {
- background-color: var(--color--white);
- }
-
- @media (min-width: 62.5rem) {
- .vertical-tabs__menu-item.is-selected {
- margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1);
- padding-inline-end: var(--vertical-tabs-menu-border-width);
- }
- }
-
- .vertical-tabs__menu-item.is-selected a {
- background-color: transparent;
- }
-
- .vertical-tabs__menu-item-summary {
- display: block;
- font-size: var(--font-size-s);
- line-height: var(--line-height-s);
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.