UNPKG

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) 2.44 kB
{"version":3,"sources":["../../../../src/govuk/components/panel/_index.scss"],"names":[],"mappings":"AAAA,oBAAoB;;AAEpB;EACE;IACE,8BAA8B;;IAE9B,sBAAsB;;IAEtB,+BAA+B;IAC/B,+CAA+C;;IAE/C,6CAA6C;;IAE7C,kBAAkB;;IAElB;MACE,+CAA+C;;MAE/C,8DAA8D;MAC9D,uEAAuE;MACvE,wEAAwE;MACxE,uEAAuE;MACvE,WAAW;MACX,CAAC;MACD,wEAAwE;MACxE,kEAAkE;MAClE,sEAAsE;MACtE,yEAAyE;MACzE,sCAAsC;MACtC,yBAAyB;;MAEzB,iEAAiE;MACjE,qBAAqB;IACvB;EACF;;EAEA;IACE,4BAA4B;IAC5B,iCAAiC;;IAEjC;MACE,0BAA0B;MAC1B,oCAAoC;MACpC,gBAAgB;IAClB;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;IACrC,aAAa;IACb,+BAA+B;EACjC;;EAEA;IACE,gBAAgB;EAClB;AACF","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@include govuk-exports(\"govuk/component/panel\") {\n .govuk-panel {\n @include govuk-font($size: 36);\n\n box-sizing: border-box;\n\n margin-bottom: govuk-spacing(3);\n padding: govuk-spacing(7) - $govuk-border-width;\n\n border: $govuk-border-width solid transparent;\n\n text-align: center;\n\n @media #{govuk-until-breakpoint(tablet)} {\n padding: govuk-spacing(4) - $govuk-border-width;\n\n // This is an if-all-else-fails attempt to stop long words from\n // overflowing the container on very narrow viewports by forcing them to\n // break and wrap instead. This overflowing is more likely to happen when\n // user increases text size on a mobile eg. using iOS Safari text resize\n // controls.\n //\n // The overflowing is a particular problem with the panel component since\n // it uses white text: when the text overflows the container, it is\n // invisible on the white (page) background. When the text in our other\n // components overflow, the user might have to scroll horizontally to view\n // it but the the text remains legible.\n overflow-wrap: break-word;\n\n // Support IE (autoprefixer doesn't add this as it's not a prefix)\n word-wrap: break-word;\n }\n }\n\n .govuk-panel--confirmation {\n color: govuk-colour(\"white\");\n background: govuk-colour(\"green\");\n\n @media print {\n border-color: currentcolor;\n color: govuk-functional-colour(text);\n background: none;\n }\n }\n\n .govuk-panel__title {\n @include govuk-font-size($size: 48);\n @include govuk-typography-weight-bold;\n margin-top: 0;\n margin-bottom: govuk-spacing(6);\n }\n\n .govuk-panel__title:last-child {\n margin-bottom: 0;\n }\n}\n"]}