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) • 3.01 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/back-link/_index.scss"],"names":[],"mappings":"AAAA,kBAAkB;;AAElB,oBAAoB;;AAEpB;EACE,6DAA6D;EAC7D,cAAc;;EAEd,oCAAoC;EACpC,wCAAwC;;EAExC,wBAAwB;EACxB,8BAA8B;EAC9B,sEAAsE;;EAEtE,mBAAmB;EACnB,+DAA+D;;EAE/D;IACE,2CAA2C;IAC3C,0BAA0B;IAC1B,8BAA8B;;IAE9B,qBAAqB;IACrB,kBAAkB;;IAElB,4BAA4B;IAC5B,+BAA+B;;IAE/B,2BAA2B;IAC3B,wCAAwC;EAC1C;;EAEA,+BAA+B;EAC/B;IACE,WAAW;IACX,cAAc;;IAEd,0CAA0C;IAC1C,kBAAkB;IAClB,MAAM;IACN,SAAS;IACT,+BAA+B;;IAE/B,oBAAoB;IACpB,qBAAqB;;IAErB,cAAc;;IAEd,yBAAyB;;IAEzB,aAAa;IACb,qEAAqE;IACrE,oCAAoC;;IAEpC;MACE,iFAAiF;;MAEjF,sDAAsD;MACtD,uFAAuF;MACvF,0DAA0D;IAC5D;EACF;;EAEA;IACE,iDAAiD;EACnD;;EAEA;IACE,WAAW;IACX,kBAAkB;IAClB,UAAU;IACV,QAAQ;IACR,aAAa;IACb,OAAO;EACT;;EAEA;IACE,iCAAiC;;IAEjC;MACE,0BAA0B;IAC5B;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"sass:string\";\n\n@import \"../../base\";\n\n@include govuk-exports(\"govuk/component/back-link\") {\n // Component font-size on the Frontend (used for calculations)\n $font-size: 16;\n\n // Size of chevron (excluding border)\n $chevron-size: govuk-em(7px, $font-size);\n\n // Size of chevron border\n $chevron-border-min-width: 1px;\n $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);\n\n // Colour of chevron\n $chevron-border-colour: govuk-functional-colour(secondary-text);\n\n .govuk-back-link {\n @include govuk-font-size($size: $font-size);\n @include govuk-link-common;\n @include govuk-link-style-text;\n\n display: inline-block;\n position: relative;\n\n margin-top: govuk-spacing(3);\n margin-bottom: govuk-spacing(3);\n\n // Allow space for the arrow\n padding-left: govuk-em(14px, $font-size);\n }\n\n // Prepend left pointing chevron\n .govuk-back-link::before {\n content: \"\";\n display: block;\n\n // Vertically align with the parent element\n position: absolute;\n top: 0;\n bottom: 0;\n left: govuk-em(3px, $font-size);\n\n width: $chevron-size;\n height: $chevron-size;\n\n margin: auto 0;\n\n transform: rotate(225deg);\n\n border: solid;\n border-width: $chevron-border-min-width $chevron-border-min-width 0 0;\n border-color: $chevron-border-colour;\n\n @supports (border-width: string.unquote(\"max(0px)\")) {\n $border-width-eval: \"max(#{$chevron-border-min-width}, #{$chevron-border-width})\";\n\n // Ensure that the chevron never gets smaller than 16px\n border-width: string.unquote($border-width-eval) string.unquote($border-width-eval) 0 0;\n font-size: string.unquote(\"max(#{$font-size * 1px}, 1em)\");\n }\n }\n\n .govuk-back-link:focus::before {\n border-color: govuk-functional-colour(focus-text);\n }\n\n .govuk-back-link::after {\n content: \"\";\n position: absolute;\n top: -14px;\n right: 0;\n bottom: -14px;\n left: 0;\n }\n\n .govuk-back-link--inverse {\n @include govuk-link-style-inverse;\n\n &::before {\n border-color: currentcolor;\n }\n }\n}\n"]}