govuk-frontend/dist/govuk/components/button/_index.scss.map

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

{"version":3,"sources":["../../../../src/govuk/components/button/_index.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,2BAA2B;AAC3B,GAAG;;AAEH,oBAAoB;;AAEpB,qCAAqC;AACrC,EAAE;AACF,eAAe;AACf,iBAAiB;;AAEjB,+DAA+D;;AAE/D,+BAA+B;AAC/B,EAAE;AACF,eAAe;AACf,iBAAiB;;AAEjB,yDAAyD;;AAEzD,8CAA8C;AAC9C,EAAE;AACF,eAAe;AACf,iBAAiB;;AAEjB,uEAAuE;;AAEvE,wCAAwC;AACxC,EAAE;AACF,eAAe;AACf,iBAAiB;;AAEjB,0EAA0E;;AAE1E;EACE,qDAAqD;EACrD,oDAAoD;EACpD,uEAAuE;EACvE,wEAAwE;;EAExE,4BAA4B;EAC5B,0EAA0E;EAC1E,0DAA0D;EAC1D,gFAAgF;EAChF,iFAAiF;;EAEjF,0BAA0B;EAC1B,iDAAiD;EACjD,wDAAwD;EACxD,6EAA6E;EAC7E,8EAA8E;;EAE9E,0BAA0B;EAC1B,qEAAqE;EACrE,oEAAoE;EACpE,6EAA6E;EAC7E,+EAA+E;;EAE/E,6EAA6E;EAC7E,0EAA0E;EAC1E,gDAAgD;EAChD,qDAAqD;;EAErD;IACE,kDAAkD;;IAElD,sBAAsB;IACtB,qBAAqB;IACrB,kBAAkB;IAClB,WAAW;IACX,aAAa;IACb,eAAe;IACf,cAAc;IACd,+EAA+E,EAAE,IAAI;IACrF;yFACqF,EAAE,IAAI;IAC3F,0DAA0D;IAC1D,gBAAgB;IAChB,gCAAgC;IAChC,sCAAsC;IACtC,+DAA+D,EAAE,IAAI;IACrE,kBAAkB;IAClB,mBAAmB;IACnB,eAAe;IACf,wBAAwB;;IAExB;MACE,WAAW;IACb;;IAEA,mDAAmD;IACnD;;;;MAIE,gCAAgC;MAChC,qBAAqB;IACvB;;IAEA,wCAAwC;IACxC;MACE,UAAU;MACV,SAAS;IACX;;IAEA;MACE,4CAA4C;IAC9C;;IAEA;MACE,4DAA4D;MAC5D,wBAAwB;IAC1B;;IAEA;MACE,4CAA4C;MAC5C,6CAA6C;MAC7C,0DAA0D;IAC5D;;IAEA;MACE,4CAA4C;MAC5C,0CAA0C;MAC1C,gDAAgD;MAChD,uDAAuD;IACzD;;IAEA,qEAAqE;IACrE,yDAAyD;IACzD;MACE,WAAW;MACX,cAAc;;MAEd,kBAAkB;;MAElB,sCAAsC;MACtC,wCAAwC;MACxC,iEAAiE;MACjE,uCAAuC;;MAEvC,uBAAuB;IACzB;;IAEA,wEAAwE;IACxE,yEAAyE;IACzE,yEAAyE;IACzE,4DAA4D;IAC5D,CAAC;IACD,yEAAyE;IACzE,2EAA2E;IAC3E,iCAAiC;IACjC,CAAC;IACD,IAAI;IACJ;MACE,8DAA8D;IAChE;EACF;;EAEA;IACE,cAAc;;IAEd;MACE,sCAAsC;MACtC,mBAAmB;IACrB;;IAEA;MACE,MAAM;MACN,+DAA+D,EAAE,IAAI;IACvE;EACF;;EAEA;IACE,gDAAgD;IAChD,yEAAyE;;IAEzE;;;;;MAKE,0CAA0C;IAC5C;;IAEA;MACE,sDAAsD;;MAEtD;QACE,gDAAgD;MAClD;IACF;EACF;;EAEA;IACE,8CAA8C;IAC9C,uEAAuE;;IAEvE;;;;;MAKE,wCAAwC;IAC1C;;IAEA;MACE,oDAAoD;;MAEpD;QACE,8CAA8C;MAChD;IACF;EACF;;EAEA;IACE,8CAA8C;IAC9C,uEAAuE;;IAEvE;;;;;MAKE,wCAAwC;IAC1C;;IAEA;MACE,oDAAoD;;MAEpD;QACE,8CAA8C;MAChD;IACF;EACF;;EAEA;IACE,qCAAqC;IACrC,oDAAoD;;IAEpD,oBAAoB;IACpB,gBAAgB;;IAEhB,uBAAuB;EACzB;;EAEA;IACE,6BAA6B;;IAE7B;MACE,6BAA6B;IAC/B;IACA,sBAAsB;IACtB,cAAc;IACd,kBAAkB;IAClB,wEAAwE;IACxE,mDAAmD;IACnD,yBAAyB;EAC3B;AACF","file":"_index.scss","sourcesContent":["////\n/// @group components/button\n////\n\n@import \"../../base\";\n\n/// Button component background colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-button-background-colour: govuk-colour(\"green\") !default;\n\n/// Button component text colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-button-text-colour: govuk-colour(\"white\") !default;\n\n/// Inverted button component background colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-inverse-button-background-colour: govuk-colour(\"white\") !default;\n\n/// Inverted button component text colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-inverse-button-text-colour: govuk-functional-colour(brand) !default;\n\n@include govuk-exports(\"govuk/component/button\") {\n  $govuk-button-colour: $govuk-button-background-colour;\n  $govuk-button-text-colour: $govuk-button-text-colour;\n  $govuk-button-hover-colour: govuk-colour(\"green\", $variant: \"shade-25\");\n  $govuk-button-shadow-colour: govuk-colour(\"green\", $variant: \"shade-50\");\n\n  // Secondary button variables\n  $govuk-secondary-button-colour: govuk-colour(\"black\", $variant: \"tint-95\");\n  $govuk-secondary-button-text-colour: govuk-colour(\"black\");\n  $govuk-secondary-button-hover-colour: govuk-colour(\"black\", $variant: \"tint-80\");\n  $govuk-secondary-button-shadow-colour: govuk-colour(\"black\", $variant: \"tint-50\");\n\n  // Warning button variables\n  $govuk-warning-button-colour: govuk-colour(\"red\");\n  $govuk-warning-button-text-colour: govuk-colour(\"white\");\n  $govuk-warning-button-hover-colour: govuk-colour(\"red\", $variant: \"shade-25\");\n  $govuk-warning-button-shadow-colour: govuk-colour(\"red\", $variant: \"shade-50\");\n\n  // Inverse button variables\n  $govuk-inverse-button-colour: $govuk-inverse-button-background-colour;\n  $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour;\n  $govuk-inverse-button-hover-colour: govuk-colour(\"blue\", $variant: \"tint-95\");\n  $govuk-inverse-button-shadow-colour: govuk-colour(\"blue\", $variant: \"shade-50\");\n\n  // Because the shadow (s0) is visually 'part of' the button, we need to reduce\n  // the height of the button to compensate by adjusting its padding (s1) and\n  // increase the bottom margin to include it (s2).\n  $button-shadow-size: $govuk-border-width-form-element;\n\n  .govuk-button {\n    @include govuk-font($size: 19, $line-height: 19px);\n\n    box-sizing: border-box;\n    display: inline-block;\n    position: relative;\n    width: 100%;\n    margin-top: 0;\n    margin-right: 0;\n    margin-left: 0;\n    @include govuk-responsive-margin(6, \"bottom\", $adjustment: $button-shadow-size); // s2\n    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2)\n      (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size * 0.5)); // s1\n    border: $govuk-border-width-form-element solid transparent;\n    border-radius: 0;\n    color: $govuk-button-text-colour;\n    background-color: $govuk-button-colour;\n    box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0\n    text-align: center;\n    vertical-align: top;\n    cursor: pointer;\n    -webkit-appearance: none;\n\n    @media #{govuk-from-breakpoint(tablet)} {\n      width: auto;\n    }\n\n    // Ensure that any global link styles are overridden\n    &:link,\n    &:visited,\n    &:active,\n    &:hover {\n      color: $govuk-button-text-colour;\n      text-decoration: none;\n    }\n\n    // Fix unwanted button padding in Firefox\n    &::-moz-focus-inner {\n      padding: 0;\n      border: 0;\n    }\n\n    &:hover {\n      background-color: $govuk-button-hover-colour;\n    }\n\n    &:active {\n      // Bump the button down so it looks like its being pressed in\n      top: $button-shadow-size;\n    }\n\n    &:focus {\n      border-color: govuk-functional-colour(focus);\n      outline: $govuk-focus-width solid transparent;\n      box-shadow: inset 0 0 0 1px govuk-functional-colour(focus);\n    }\n\n    &:focus:not(:active):not(:hover) {\n      border-color: govuk-functional-colour(focus);\n      color: govuk-functional-colour(focus-text);\n      background-color: govuk-functional-colour(focus);\n      box-shadow: 0 2px 0 govuk-functional-colour(focus-text);\n    }\n\n    // Use a pseudo element to expand the click target area to include the\n    // button's shadow as well, in case users try to click it.\n    &::before {\n      content: \"\";\n      display: block;\n\n      position: absolute;\n\n      top: -$govuk-border-width-form-element;\n      right: -$govuk-border-width-form-element;\n      bottom: -($govuk-border-width-form-element + $button-shadow-size);\n      left: -$govuk-border-width-form-element;\n\n      background: transparent;\n    }\n\n    // When the button is active it is shifted down by $button-shadow-size to\n    // denote a 'pressed' state. If the user happened to click at the very top\n    // of the button, their mouse is no longer over the button (because it has\n    // 'moved beneath them') and so the click event is not fired.\n    //\n    // This corrects that by shifting the top of the pseudo element so that it\n    // continues to cover the area that the user originally clicked, which means\n    // the click event is still fired.\n    //\n    // 🎉\n    &:active::before {\n      top: -($govuk-border-width-form-element + $button-shadow-size);\n    }\n  }\n\n  .govuk-button[disabled] {\n    opacity: (0.5);\n\n    &:hover {\n      background-color: $govuk-button-colour;\n      cursor: not-allowed;\n    }\n\n    &:active {\n      top: 0;\n      box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0\n    }\n  }\n\n  .govuk-button--secondary {\n    background-color: $govuk-secondary-button-colour;\n    box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;\n\n    &,\n    &:link,\n    &:visited,\n    &:active,\n    &:hover {\n      color: $govuk-secondary-button-text-colour;\n    }\n\n    &:hover {\n      background-color: $govuk-secondary-button-hover-colour;\n\n      &[disabled] {\n        background-color: $govuk-secondary-button-colour;\n      }\n    }\n  }\n\n  .govuk-button--warning {\n    background-color: $govuk-warning-button-colour;\n    box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;\n\n    &,\n    &:link,\n    &:visited,\n    &:active,\n    &:hover {\n      color: $govuk-warning-button-text-colour;\n    }\n\n    &:hover {\n      background-color: $govuk-warning-button-hover-colour;\n\n      &[disabled] {\n        background-color: $govuk-warning-button-colour;\n      }\n    }\n  }\n\n  .govuk-button--inverse {\n    background-color: $govuk-inverse-button-colour;\n    box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour;\n\n    &,\n    &:link,\n    &:visited,\n    &:active,\n    &:hover {\n      color: $govuk-inverse-button-text-colour;\n    }\n\n    &:hover {\n      background-color: $govuk-inverse-button-hover-colour;\n\n      &[disabled] {\n        background-color: $govuk-inverse-button-colour;\n      }\n    }\n  }\n\n  .govuk-button--start {\n    @include govuk-typography-weight-bold;\n    @include govuk-font-size($size: 24, $line-height: 1);\n\n    display: inline-flex;\n    min-height: auto;\n\n    justify-content: center;\n  }\n\n  .govuk-button__start-icon {\n    margin-left: govuk-spacing(1);\n\n    @media #{govuk-from-breakpoint(desktop)} {\n      margin-left: govuk-spacing(2);\n    }\n    vertical-align: middle;\n    flex-shrink: 0;\n    align-self: center;\n    // Work around SVGs not inheriting color from parent in forced color mode\n    // (https://github.com/w3c/csswg-drafts/issues/6310)\n    forced-color-adjust: auto;\n  }\n}\n"]}