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.63 kB
Source Map (JSON)
{"version":3,"sources":["../../../src/govuk/objects/_width-container.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;AACH,kBAAkB;;AAElB,iBAAiB;;AAEjB,wBAAwB;AACxB,EAAE;AACF,gEAAgE;AAChE,EAAE;AACF,+DAA+D;AAC/D,EAAE;AACF,yDAAyD;AACzD,gCAAgC;AAChC,6CAA6C;AAC7C,KAAK;AACL,EAAE;AACF,iBAAiB;;AAEjB;EACE,gEAAgE;EAChE,iBAAiB;;EAEjB,mCAAmC;EACnC,gCAAgC;EAChC,+BAA+B;;EAE/B,yEAAyE;EACzE;IACE,iFAAiF;IACjF,+EAA+E;;IAE/E,6DAA6D;IAC7D,gDAAgD;IAChD,sFAAsF;IACtF,oFAAoF;EACtF;;EAEA,mCAAmC;EACnC;IACE,2BAA2B;IAC3B,0BAA0B;;IAE1B,yEAAyE;IACzE;MACE,iFAAiF;MACjF,+EAA+E;;MAE/E,6DAA6D;MAC7D,gDAAgD;MAChD,iFAAiF;MACjF,+EAA+E;IACjF;EACF;;EAEA,wEAAwE;EACxE,6DAA6D;EAC7D;IACE,kBAAkB;IAClB,iBAAiB;;IAEjB,uDAAuD;IACvD,yDAAyD;IACzD;MACE,kBAAkB;MAClB,iBAAiB;IACnB;EACF;AACF;;AAEA;EACE;IACE,8BAA8B;EAChC;AACF","file":"_width-container.scss","sourcesContent":["////\n/// @group objects/layout\n////\n@use \"sass:string\";\n\n@import \"../base\";\n\n/// Width container mixin\n///\n/// Used to create page width and custom width container classes.\n///\n/// @param {String} $width [$govuk-page-width] - Width in pixels\n///\n/// @example scss - Creating a 1200px wide container class\n/// .app-width-container--wide {\n/// @include govuk-width-container(1200px);\n/// }\n///\n/// @access public\n\n@mixin govuk-width-container($width: $govuk-page-width) {\n // By default, limit the width of the container to the page width\n max-width: $width;\n\n // On mobile, add half width gutters\n margin-right: $govuk-gutter-half;\n margin-left: $govuk-gutter-half;\n\n // Respect 'display cutout' safe area (avoids notches and rounded corners)\n @supports (margin: string.unquote(\"max(calc(0px))\")) {\n $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));\n $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));\n\n // Use max() to pick largest margin, default or with safe area\n // Escaped due to Sass max() vs. CSS native max()\n margin-right: string.unquote(\"max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})\");\n margin-left: string.unquote(\"max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})\");\n }\n\n // On tablet, add full width gutters\n @media #{govuk-from-breakpoint(tablet)} {\n margin-right: $govuk-gutter;\n margin-left: $govuk-gutter;\n\n // Respect 'display cutout' safe area (avoids notches and rounded corners)\n @supports (margin: string.unquote(\"max(calc(0px))\")) {\n $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));\n $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));\n\n // Use max() to pick largest margin, default or with safe area\n // Escaped due to Sass max() vs. CSS native max()\n margin-right: string.unquote(\"max(#{$govuk-gutter}, #{$gutter-safe-area-right})\");\n margin-left: string.unquote(\"max(#{$govuk-gutter}, #{$gutter-safe-area-left})\");\n }\n }\n\n // As soon as the viewport is greater than the width of the page plus the\n // gutters, just centre the content instead of adding gutters.\n @media (min-width: #{($width + $govuk-gutter * 2)}) {\n margin-right: auto;\n margin-left: auto;\n\n // Since a safe area may have previously been set above,\n // we need to duplicate this margin that centers the page.\n @supports (margin: string.unquote(\"max(calc(0px))\")) {\n margin-right: auto;\n margin-left: auto;\n }\n }\n}\n\n@include govuk-exports(\"govuk/objects/width-container\") {\n .govuk-width-container {\n @include govuk-width-container;\n }\n}\n"]}