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) • 5.49 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/tag/_index.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;AACH,eAAe;;AAEf,oBAAoB;;AAEpB,sBAAsB;AACtB,0EAA0E;AAC1E,EAAE;AACF,mEAAmE;AACnE,sEAAsE;AACtE,kBAAkB;AAClB;EACE,mDAAmD;AACrD;;AAEA,4BAA4B;AAC5B,+EAA+E;AAC/E,EAAE;AACF,mEAAmE;AACnE,sEAAsE;AACtE,kBAAkB;AAClB;EACE,kDAAkD;AACpD;;AAEA,gDAAgD;AAChD,uDAAuD;AACvD,EAAE;AACF,mEAAmE;AACnE,kBAAkB;AAClB;EACE,sCAAsC;EACtC,uDAAuD;AACzD;;AAEA;EACE,4EAA4E;;EAE5E;IACE,8BAA8B;IAC9B,4BAA4B;IAC5B,mCAAmC;;IAEnC,qBAAqB;;IAErB,0EAA0E;IAC1E,uEAAuE;IACvE,0EAA0E;IAC1E,wBAAwB;IACxB,+BAA+B;;IAE/B,0EAA0E;IAC1E,2EAA2E;IAC3E,sDAAsD;IACtD,CAAC;IACD,2EAA2E;IAC3E,QAAQ;IACR,gBAAgB;IAChB,mBAAmB;;IAEnB,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;;IAEjB,kBAAkB;IAClB,qBAAqB;IACrB,yBAAyB;;IAEzB,0EAA0E;IAC1E,0EAA0E;IAC1E,yEAAyE;IACzE,eAAe;IACf,CAAC;IACD,qEAAqE;IACrE,yEAAyE;IACzE,WAAW;IACX;MACE,iBAAiB;IACnB;EACF;;EAEA,6EAA6E;EAC7E,2BAA2B;EAC3B;IACE,oCAAoC;EACtC;;EAEA;IACE,qCAAqC;EACvC;;EAEA;IACE,kCAAkC;EACpC;;EAEA;IACE,qCAAqC;EACvC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,sCAAsC;EACxC;;EAEA,sDAAsD;EACtD;IACE,mDAAmD;IACnD,6DAA6D;EAC/D;;EAEA,oDAAoD;EACpD;IACE,4BAA4B;IAC5B,4DAA4D;EAC9D;;EAEA,sEAAsE;EACtE,aAAa;EACb;IACE,mCAAmC;EACrC;;EAEA,aAAa;EACb;IACE,sCAAsC;EACxC;AACF","file":"_index.scss","sourcesContent":["////\n/// @group components/tag\n////\n@use \"sass:map\";\n\n@import \"../../base\";\n\n/// Get tag text colour\n/// Almost all tags should use the 50% shade of their colour for their text\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @return {Colour} Representation of the named colour for use in tags\n/// @access private\n@function _govuk-tag-text-colour($colour) {\n @return govuk-colour($colour, $variant: \"shade-50\");\n}\n\n/// Get tag background colour\n/// Almost all tags should use the 80% tint of their colour for their background\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @return {Colour} Representation of the named colour for use in tags\n/// @access private\n@function _govuk-tag-background-colour($colour) {\n @return govuk-colour($colour, $variant: \"tint-80\");\n}\n\n/// Generate colour CSS for tag and tag modifiers\n/// Applies standard rules from the tag colour functions\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @access private\n@mixin _govuk-tag-colours($colour) {\n color: _govuk-tag-text-colour($colour);\n background-color: _govuk-tag-background-colour($colour);\n}\n\n@include govuk-exports(\"govuk/component/tag\") {\n $govuk-tag-max-width: 0.5 * (map.get($govuk-breakpoints, \"mobile\") or 320px);\n\n .govuk-tag {\n @include govuk-font($size: 19);\n // Default tag colour is blue\n @include _govuk-tag-colours(\"blue\");\n\n display: inline-block;\n\n // set a max-width along with overflow-wrap: break-word below for instances\n // where a tag has a single long word and could overflow its boundaries.\n // The max-width is necessary as break-word requires a bounding box to base\n // where to break off of.\n max-width: $govuk-tag-max-width;\n\n // These negative margins make sure that the tag component doesn’t increase\n // the size of its container. Otherwise, for example, a table row containing\n // a tag will be taller than one containing plain text.\n //\n // The negative margin added to the top and bottom matches the extra padding\n // added.\n margin-top: -2px;\n margin-bottom: -3px;\n\n padding-top: 2px;\n padding-right: 8px;\n padding-bottom: 3px;\n padding-left: 8px;\n\n border-radius: 1px;\n text-decoration: none;\n overflow-wrap: break-word;\n\n // When forced colour mode is active, for example to provide high contrast,\n // the background colour of the tag is the same as the rest of the page. To\n // ensure that the tag is perceived as separate from any surround text, it\n // is made bold.\n //\n // Transparent outlines are no longer added, as they make the Tag look\n // indistinguishable from a button – but the tag is not interactive in the\n // same way.\n @media screen and (forced-colors: active) {\n font-weight: bold;\n }\n }\n\n // Tag colour modifiers. Use the _govuk-tag-colours mixin to define consistent\n // colour rules per modifier\n .govuk-tag--green {\n @include _govuk-tag-colours(\"green\");\n }\n\n .govuk-tag--purple {\n @include _govuk-tag-colours(\"purple\");\n }\n\n .govuk-tag--red {\n @include _govuk-tag-colours(\"red\");\n }\n\n .govuk-tag--orange {\n @include _govuk-tag-colours(\"orange\");\n }\n\n .govuk-tag--teal {\n @include _govuk-tag-colours(\"teal\");\n }\n\n .govuk-tag--magenta {\n @include _govuk-tag-colours(\"magenta\");\n }\n\n // Yellow uses different colours to ensure it's legible\n .govuk-tag--yellow {\n color: govuk-colour(\"orange\", $variant: \"shade-50\");\n background-color: govuk-colour(\"yellow\", $variant: \"tint-50\");\n }\n\n // Grey uses different colours to ensure it's legible\n .govuk-tag--grey {\n color: govuk-colour(\"black\");\n background-color: govuk-colour(\"black\", $variant: \"tint-80\");\n }\n\n // Turquoise and pink are deprecated over teal and magenta respectively\n // @deprecated\n .govuk-tag--turquoise {\n @include _govuk-tag-colours(\"teal\");\n }\n\n // @deprecated\n .govuk-tag--pink {\n @include _govuk-tag-colours(\"magenta\");\n }\n}\n"]}