@import "govuk_publishing_components/individual_component_support"; // stylelint-disable max-nesting-depth // Override govspeak styles with HTML publication specific ones .gem-c-govspeak-html-publication { margin-bottom: govuk-spacing(6) * 1.5; z-index: 2; // This fixes the positioning of the sticky element. The reason it's done on the parent element // is because directly messing with the positioning of the sticky element produces undesirable results. // The nested govspeak component handles its own text direction independently, but will // coincide with the direction of its parent anyway in all usecases. &.direction-rtl { direction: rtl; text-align: start; } .gem-c-govspeak { h2 { @include govuk-font($size: 36, $weight: bold); } h3 { @include govuk-font($size: 27, $weight: bold); } .stat-headline:first-child { margin-top: govuk-spacing(6); @include govuk-media-query($from: tablet) { margin-top: govuk-spacing(9) + govuk-spacing(4); } } h2, h3 { margin-top: govuk-spacing(6); @include govuk-media-query($from: tablet) { margin-top: govuk-spacing(9) + govuk-spacing(4); } } h2:first-child, h3:first-child { margin-top: govuk-spacing(4); @include govuk-media-query($from: tablet) { margin-top: 0; } } h3 .number, h4 .number, h5 .number, h6 .number { margin-right: .1em; .direction-rtl & { margin-right: 0; margin-left: .1em; } } // stylelint-disable selector-no-qualifying-type // this class will only be for tables and is to distinguish from a bare `table` // the row classes below should not be applied to anything else but `tr`s table.financial-data { .numeric { text-align: right; @include govuk-font(14, $weight: regular, $tabular: true); } // make all elements inside thead look the same // (td can sometimes be used to overcome complexity of multiple lines in thead) // and make all of thead and tfoot stand out thead, tfoot { background-color: govuk-colour("light-grey", $legacy: "grey-3"); } thead th, thead td { @include govuk-font(14, $weight: bold, $tabular: true); &.numeric { @include govuk-font(14, $weight: bold, $tabular: true); } } // don't make `th`s bold unless they are a section heading or a (sub)total row tbody th, tfoot th { font-weight: normal; } // needs padding due to occasional background colour // is intentionally small and not balanced with other padding // as tables can be quite wide tr > :first-child { padding-left: govuk-spacing(1); } // add spacing so that groupings are clearer tr.section-heading > * { font-weight: bold; padding-top: govuk-spacing(6); } // ideally this should be just a top margin on the tfoot // but as that is very tricky, this is more complex tbody:last-of-type tr:last-child > *, tfoot ~ tbody:last-of-type tr:last-child > * { padding-bottom: govuk-spacing(6); } tbody:last-child tr:last-child > * { padding-bottom: govuk-spacing(2); } // total and subtotal rows tr.subtotal > *, tr.total > * { border-top: 3px solid govuk-colour("mid-grey", $legacy: "grey-2"); } tr.total > *, tbody tr.subtotal > * { font-weight: bold; } // the total is usually in the tfoot, so already has that background colour // but when it's used inside the tbody, it should also be highlighted tr.total { background-color: govuk-colour("light-grey", $legacy: "grey-3"); } } // stylelint-enable selector-no-qualifying-type } } @include govuk-media-query($media-type: print) { .gem-c-govspeak-html-publication { .govuk-sticky-element { display: none; } } }