@include govuk-exports("govuk/component/tabs") { .govuk-tabs { @include govuk-responsive-margin(1, "top"); @include govuk-responsive-margin(6, "bottom"); } .govuk-tabs__title { @include govuk-font($size: 19); @include govuk-text-colour; margin-bottom: govuk-spacing(2); } .govuk-tabs__list { margin: 0; padding: 0; list-style: none; @include govuk-responsive-margin(6, "bottom"); } .govuk-tabs__list-item { @include govuk-font($size: 19); margin-left: govuk-spacing(5); &:before { @include govuk-text-colour; content: "\2014 "; // "— " margin-left: - govuk-spacing(5); padding-right: govuk-spacing(1); } } .govuk-tabs__tab { @include govuk-link-style-default; display: inline-block; margin-bottom: govuk-spacing(2); // Focus state for mobile and when JavaScript is disabled // It is removed for JS-enabled desktop styles &:focus { @include govuk-focused-text; } } .govuk-tabs__panel { @include govuk-responsive-margin(8, "bottom"); } // JavaScript enabled .js-enabled { @include govuk-media-query($from: tablet) { .govuk-tabs__list { @include govuk-clearfix; margin-bottom: 0; border-bottom: 1px solid $govuk-border-colour; } .govuk-tabs__title { display: none; } .govuk-tabs__list-item { position: relative; margin-right: govuk-spacing(1); margin-bottom: 0; margin-left: 0; padding: govuk-spacing(2) govuk-spacing(4); float: left; background-color: govuk-colour("light-grey", $legacy: "grey-4"); text-align: center; &:before { content: none; } } .govuk-tabs__list-item--selected { $border-width: 1px; position: relative; margin-top: - govuk-spacing(1); // Compensation for border (otherwise we get a shift) margin-bottom: -$border-width; padding-top: govuk-spacing(3) - $border-width; padding-right: govuk-spacing(4) - $border-width; padding-bottom: govuk-spacing(3) + $border-width; padding-left: govuk-spacing(4) - $border-width; border: $border-width solid $govuk-border-colour; border-bottom: 0; background-color: $govuk-body-background-colour; .govuk-tabs__tab { text-decoration: none; } } .govuk-tabs__tab { @include govuk-link-style-text; margin-bottom: 0; &:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } } .govuk-tabs__panel { @include govuk-responsive-margin(0, "bottom"); padding: govuk-spacing(6) govuk-spacing(4); border: 1px solid $govuk-border-colour; border-top: 0; & > :last-child { margin-bottom: 0; } } .govuk-tabs__panel--hidden { display: none; } } } }