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.71 kB
Source Map (JSON)
{"version":3,"sources":["../../../src/govuk/objects/_button-group.scss"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;EACE,2EAA2E;EAC3E,CAAC;EACD,wBAAwB;EACxB,CAAC;EACD,0EAA0E;EAC1E,4BAA4B;EAC5B,6EAA6E;EAC7E,wCAAwC;EACxC;IACE,iCAAiC;IACjC,+BAA+B;;IAE/B,kEAAkE;IAClE,iCAAiC;IACjC,qDAAqD;;IAErD,+BAA+B;;IAE/B,8EAA8E;;IAE9E,yEAAyE;IACzE,wEAAwE;IACxE,uEAAuE;IACvE,CAAC;IACD,0EAA0E;IAC1E,wEAAwE;IACxE,6BAA6B;IAC7B,mDAAmD;IACnD,aAAa;IACb,sBAAsB;IACtB,mBAAmB;;IAEnB,uEAAuE;IACvE,aAAa;IACb,CAAC;IACD,0EAA0E;IAC1E,8CAA8C;IAC9C;MACE,kDAAkD;MAClD,qBAAqB;MACrB,qEAAqE;MACrE,0BAA0B;MAC1B,eAAe;MACf,yBAAyB;MACzB,4CAA4C;MAC5C,kBAAkB;IACpB;;IAEA,yEAAyE;IACzE,sEAAsE;IACtE;MACE,kDAAkD;IACpD;;IAEA,mEAAmE;IACnE,oDAAoD;IACpD;MACE,yDAAyD;MACzD,oCAAoC;;MAEpC,mBAAmB;MACnB,eAAe;MACf,qBAAqB;;MAErB;;QAEE,6BAA6B;MAC/B;;MAEA;QACE,gBAAgB;MAClB;IACF;EACF;AACF","file":"_button-group.scss","sourcesContent":["@import \"../base\";\n\n@include govuk-exports(\"govuk/objects/button-group\") {\n // Button groups can be used to group buttons and links together as a group.\n //\n // Within a button group:\n //\n // - links are styled to line up visually with the buttons, including being\n // centre-aligned on mobile\n // - spacing between the buttons and links is handled automatically, including\n // when they wrap across multiple lines\n .govuk-button-group {\n $horizontal-gap: govuk-spacing(3);\n $vertical-gap: govuk-spacing(3);\n\n // These need to be kept in sync with the button component's styles\n $button-padding: govuk-spacing(2);\n $button-shadow-size: $govuk-border-width-form-element;\n\n $link-spacing: govuk-spacing(1);\n\n @include govuk-responsive-margin(6, \"bottom\", $adjustment: $vertical-gap * -1);\n\n // Flexbox is used to center-align links on mobile, align everything along\n // the baseline on tablet and above, and to removes extra whitespace that\n // we'd get between the buttons and links because they're inline-blocks.\n //\n // Ideally we'd use `gap` with flexbox rather than having to do it all with\n // margins, but unfortunately the support isn't there (yet) and @supports\n // doesn't play nicely with it\n // (https://github.com/w3c/csswg-drafts/issues/3559)\n display: flex;\n flex-direction: column;\n align-items: center;\n\n // Give links within the button group the same font-size and line-height\n // as buttons.\n //\n // Because we want the focus state to be tight around the link text, we use\n // margins where the buttons would use padding.\n .govuk-link {\n @include govuk-font($size: 19, $line-height: 19px);\n display: inline-block;\n // Prevent links overflowing their container in IE10/11 because of bug\n // with align-items: center\n max-width: 100%;\n margin-top: $link-spacing;\n margin-bottom: $link-spacing + $vertical-gap;\n text-align: center;\n }\n\n // Reduce the bottom margin to the size of the vertical gap (accommodating\n // the button shadow) – the 'lost' margin is moved to the button-group.\n .govuk-button {\n margin-bottom: $vertical-gap + $button-shadow-size;\n }\n\n // On tablet and above, we also introduce a 'column gap' between the\n // buttons and links in each row and left align links\n @media #{govuk-from-breakpoint(tablet)} {\n // Cancel out the column gap for the last item in each row\n margin-right: ($horizontal-gap * -1);\n\n flex-direction: row;\n flex-wrap: wrap;\n align-items: baseline;\n\n .govuk-button,\n .govuk-link {\n margin-right: $horizontal-gap;\n }\n\n .govuk-link {\n text-align: left;\n }\n }\n }\n}\n"]}