govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
2 lines (1 loc) • 4.88 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/details/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,6CAA6C;;IAE7C,cAAc;EAChB;;EAEA;IACE,cAAc;EAChB;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE;MACE,aAAa;IACf;;IAEA;;MAEE,gBAAgB;IAClB;EACF;;EAEA;IACE,6BAA6B;IAC7B,gCAAgC;IAChC,8BAA8B;EAChC;;EAEA;IACE,aAAa;IACb,+BAA+B;EACjC;;EAEA;IACE,gBAAgB;EAClB;;EAEA,oDAAoD;EACpD,2EAA2E;EAC3E,iBAAiB;EACjB;IACE;MACE,gEAAgE;IAClE;;IAEA;MACE,4BAA4B;IAC9B;;IAEA;MACE,qCAAqC;MACrC,6CAA6C;MAC7C,8BAA8B;IAChC;EACF;;EAEA,2EAA2E;EAC3E,0DAA0D;EAC1D,CAAC;EACD,+DAA+D;EAC/D,CAAC;EACD,2DAA2D;EAC3D,sEAAsE;EACtE,oEAAoE;EACpE;IACE;MACE,qDAAqD;MACrD,kBAAkB;;MAElB,oEAAoE;MACpE,0BAAkB;MAAlB,kBAAkB;;MAElB,sEAAsE;MACtE,oDAAoD;;MAEpD,0CAA0C;MAC1C,yBAAyB;MACzB,eAAe;;MAEf;QACE,+BAA+B;MACjC;;MAEA;QACE,2BAA2B;MAC7B;IACF;IACA,+CAA+C;IAC/C;MACE,8BAA8B;IAChC;;IAEA;MACE,oCAAoC;IACtC;;IAEA,+DAA+D;IAC/D;MACE,qBAAqB;IACvB;;IAEA,4EAA4E;IAC5E,mEAAmE;IACnE;MACE,aAAa;IACf;;IAEA,4DAA4D;IAC5D;MACE,WAAW;MACX,kBAAkB;;MAElB,SAAS;MACT,SAAS;MACT,OAAO;;MAEP,YAAY;;MAEZ,0DAA0D;;MAE1D;QACE,yDAAyD;MAC3D;IACF;;IAEA;MACE,2DAA2D;IAC7D;EACF;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/details\") {\n .govuk-details {\n @include govuk-font($size: 19);\n @include govuk-text-colour;\n @include govuk-responsive-margin(6, \"bottom\");\n\n display: block;\n }\n\n .govuk-details__summary {\n display: block;\n }\n\n .govuk-details[open] .govuk-details__summary {\n margin-bottom: govuk-spacing(1);\n }\n\n .govuk-details__summary-text {\n > :first-child {\n margin-top: 0;\n }\n\n > :only-child,\n > :last-child {\n margin-bottom: 0;\n }\n }\n\n .govuk-details__text {\n padding-top: govuk-spacing(3);\n padding-bottom: govuk-spacing(3);\n padding-left: govuk-spacing(4);\n }\n\n .govuk-details__text p {\n margin-top: 0;\n margin-bottom: govuk-spacing(4);\n }\n\n .govuk-details__text > :last-child {\n margin-bottom: 0;\n }\n\n // Hack to target IE8 - IE11 (and REALLY old Firefox)\n // These browsers don't support the details element, so fall back to looking\n // like inset text\n @media screen\\0 {\n .govuk-details {\n border-left: $govuk-border-width-wide solid $govuk-border-colour;\n }\n\n .govuk-details__summary {\n margin-top: govuk-spacing(3);\n }\n\n .govuk-details__summary-text {\n @include govuk-typography-weight-bold;\n @include govuk-responsive-margin(4, \"bottom\");\n padding-left: govuk-spacing(4);\n }\n }\n\n // We wrap styles for newer browsers in a feature query, which is ignored by\n // older browsers, which always expand the details element.\n //\n // Additionally, -ms-ime-align is only supported by Edge 12 - 18\n //\n // This ensures we don't use these styles in browsers which:\n // - support ES6 modules but not the <details> element (Edge 16 - 18)\n // - do not support ES6 modules or the <details> element (eg, IE8+)\n @supports not (-ms-ime-align: auto) {\n .govuk-details__summary {\n // Absolutely position the marker against this element\n position: relative;\n\n // Make the focus outline shrink-wrap the text content of the summary\n width: fit-content;\n\n // Allow for absolutely positioned marker and align with disclosed text\n padding-left: govuk-spacing(4) + $govuk-border-width;\n\n // Style the summary to look like a link...\n color: $govuk-link-colour;\n cursor: pointer;\n\n &:hover {\n color: $govuk-link-hover-colour;\n }\n\n &:focus {\n @include govuk-focused-text;\n }\n }\n // ...but only underline the text, not the arrow\n .govuk-details__summary-text {\n @include govuk-link-decoration;\n }\n\n .govuk-details__summary:hover .govuk-details__summary-text {\n @include govuk-link-hover-decoration;\n }\n\n // Remove the underline when focussed to avoid duplicate borders\n .govuk-details__summary:focus .govuk-details__summary-text {\n text-decoration: none;\n }\n\n // Remove the default details marker so we can style our own consistently and\n // ensure it displays in Firefox (see implementation.md for details)\n .govuk-details__summary::-webkit-details-marker {\n display: none;\n }\n\n // Append our own open / closed marker using a pseudo-element\n .govuk-details__summary::before {\n content: \"\";\n position: absolute;\n\n top: -1px;\n bottom: 0;\n left: 0;\n\n margin: auto;\n\n @include govuk-shape-arrow($direction: right, $base: 14px);\n\n .govuk-details[open] > & {\n @include govuk-shape-arrow($direction: down, $base: 14px);\n }\n }\n\n .govuk-details__text {\n border-left: $govuk-border-width solid $govuk-border-colour;\n }\n }\n}\n"]}