diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index c4e6705..3fdef3e 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -273,19 +273,17 @@ pre { .is-horizontal .tabs:before { content: ''; display: block; - border-radius: 2px; + border-bottom: 1px solid #A6A6A6; position: absolute; bottom: 0; left: 0; z-index: 10; right: 0; } - -/* Span the full width of the viewport */ -.branding__inner .is-horizontal .tabs:before, -.branding__inner .is-collapse-enabled .tabs:before { - left: -2.5em; - right: -2.5em; +#branding .is-collapse-enabled .tabs:before, +#branding .is-horizontal .tabs:before { + left: -20px; + right: -20px; } /** @@ -298,7 +296,6 @@ pre { .tabs__tab { position: relative; display: block; - overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -319,7 +316,6 @@ pre { color: #008ee6; background-color: #fafaf7; } -/* TODO: Move the tabs__tab class to the anchor instead of having to reset the padding. */ li.tabs__tab { padding: 0; } @@ -448,8 +444,6 @@ li.tabs__tab a { } .tabs.secondary { - border-bottom: 1px solid #d9d8d4; - display: block; margin-top: 24px; margin-top: 1.5rem; } @@ -457,21 +451,42 @@ li.tabs__tab a { display: block; padding: 5px 15px 5px 16px; border-bottom: 1px solid transparent; - border-left: 1px solid transparent; margin-left: -1px; color: #0074bd; } .tabs.secondary .tabs__tab + .tabs__tab { border-top: 1px solid #d9d8d4; } + +/** + * Use generated content to render the vertical active bar so it can overlap + * adjacent borders. + */ +.tabs.secondary .tabs__tab:before { + content: ''; + display: block; + position: absolute; + top: -1px; + left: -1px; + bottom: -1px; + width: 2px; + background-color: transparent; + z-index: 60; +} .tabs.secondary .tabs__tab.active { color: #004f80; } +.tabs.secondary .tabs__tab.active:before { + background-color: #004f80; +} .tabs.secondary .tabs__tab:focus, .tabs.secondary .tabs__tab:hover { - border-left-color: #008ee6; color: #008ee6; } +.tabs.secondary .tabs__tab:focus:before, +.tabs.secondary .tabs__tab:hover:before { + background-color: #008ee6; +} .tabs.secondary a { background-color: transparent; padding: 7px 13px 5px; @@ -494,6 +509,9 @@ li.tabs__tab a { border-top: 0; padding: 0; } +.is-horizontal .tabs.secondary .tabs__tab:before { + content: none; +} .is-horizontal .tabs.secondary .tabs__tab.active { border-bottom-color: #004f80; }