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.13 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,sBAAsB;;AAEtB;EACE,yDAAyD;;EAEzD;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,6CAA6C;EAC/C;;EAEA;IACE,0CAA0C;EAC5C;;EAEA,6EAA6E;EAC7E,yEAAyE;EACzE,oDAAoD;EACpD;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;IACnB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;IAC9B,iBAAiB;IACjB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mCAAmC;EACrC;;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,mCAAmC;EACrC;AACF","file":"_index.scss","sourcesContent":["@import \"../tag/index\";\n\n@include govuk-exports(\"govuk/component/task-list\") {\n $govuk-task-list-hover-colour: govuk-colour(\"light-grey\");\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 $govuk-border-colour;\n }\n\n .govuk-task-list__item:first-child {\n border-top: 1px solid $govuk-border-colour;\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 vertical-align: top;\n @include govuk-text-colour;\n }\n\n .govuk-task-list__status {\n display: table-cell;\n padding-left: govuk-spacing(2);\n text-align: right;\n vertical-align: top;\n @include govuk-text-colour;\n }\n\n .govuk-task-list__status--cannot-start-yet {\n color: $govuk-secondary-text-colour;\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-secondary-text-colour;\n }\n}\n"]}