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.34 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,oBAAoB;;AAEpB,sBAAsB;;AAEtB;EACE,yEAAyE;;EAEzE;IACE,8BAA8B;IAC9B,aAAa;IACb,6CAA6C;IAC7C,UAAU;IACV,qBAAqB;EACvB;;EAEA,uEAAuE;EACvE,6EAA6E;EAC7E,4CAA4C;EAC5C,CAAC;EACD,oEAAoE;EACpE,4EAA4E;EAC5E,mBAAmB;EACnB;IACE,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,gBAAgB;IAChB,6BAA6B;IAC7B,gCAAgC;IAChC,wBAAwB;IACxB,oDAAoD;EACtD;;EAEA;IACE,qBAAqB;IACrB,iDAAiD;EACnD;;EAEA,6EAA6E;EAC7E,yEAAyE;EACzE,oDAAoD;EACpD;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;;IAEnB,oCAAoC;IACpC,mBAAmB;EACrB;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;;IAE9B,oCAAoC;IACpC,iBAAiB;IACjB,mBAAmB;EACrB;;EAEA;IACE,8CAA8C;EAChD;;EAEA,0EAA0E;EAC1E,0EAA0E;EAC1E,sDAAsD;EACtD;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;EACT;;EAEA;IACE,4BAA4B;IAC5B,8CAA8C;EAChD;AACF","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@import \"../tag/index\";\n\n@include govuk-exports(\"govuk/component/task-list\") {\n $govuk-task-list-hover-colour: govuk-colour(\"black\", $variant: \"tint-95\");\n\n .govuk-task-list {\n @include govuk-font($size: 19);\n margin-top: 0;\n @include govuk-responsive-margin(6, \"bottom\");\n padding: 0;\n list-style-type: none;\n }\n\n // This uses table layout so that the task name and status always appear\n // side-by-side, with the width of each 'column' being flexible depending upon\n // the length of the task names and statuses.\n //\n // The position is set to 'relative' so than an absolutely-positioned\n // transparent element box can be added within the link so that the whole row\n // can be clickable.\n .govuk-task-list__item {\n display: table;\n position: relative;\n width: 100%;\n margin-bottom: 0;\n padding-top: govuk-spacing(2);\n padding-bottom: govuk-spacing(2);\n border-bottom: 1px solid;\n border-bottom-color: govuk-functional-colour(border);\n }\n\n .govuk-task-list__item:first-child {\n border-top: 1px solid;\n border-top-color: govuk-functional-colour(border);\n }\n\n // This class is added to the <li> elements where the task name is a link. The\n // background hover colour is added to help indicate that the whole row is\n // clickable, rather than just the visible link text.\n .govuk-task-list__item--with-link:hover {\n background: $govuk-task-list-hover-colour;\n }\n\n .govuk-task-list__name-and-hint {\n display: table-cell;\n\n color: govuk-functional-colour(text);\n vertical-align: top;\n }\n\n .govuk-task-list__status {\n display: table-cell;\n padding-left: govuk-spacing(2);\n\n color: govuk-functional-colour(text);\n text-align: right;\n vertical-align: top;\n }\n\n .govuk-task-list__status--cannot-start-yet {\n color: govuk-functional-colour(secondary-text);\n }\n\n // This adds an empty transparent box covering the whole row, including the\n // task status and any hint text. Because this is generated within the link\n // element, this allows the whole area to be clickable.\n .govuk-task-list__link::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n\n .govuk-task-list__hint {\n margin-top: govuk-spacing(1);\n color: govuk-functional-colour(secondary-text);\n }\n}\n"]}