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,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,+DAA+D;;AAE/D;EACE,qDAAqD;EACrD,oDAAoD;EACpD,kEAAkE;EAClE,mEAAmE;;EAEnE,4BAA4B;EAC5B,0DAA0D;EAC1D,0DAA0D;EAC1D,sFAAsF;EACtF,uFAAuF;;EAEvF,0BAA0B;EAC1B,iDAAiD;EACjD,wDAAwD;EACxD,kFAAkF;EAClF,mFAAmF;;EAEnF,0BAA0B;EAC1B,qEAAqE;EACrE,oEAAoE;EACpE,sFAAsF;EACtF,wFAAwF;;EAExF,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;uFACmF,EAAE,IAAI;IACzF,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,iCAAiC;MACjC,6CAA6C;MAC7C,+CAA+C;IACjD;;IAEA;MACE,iCAAiC;MACjC,+BAA+B;MAC/B,qCAAqC;MACrC,4CAA4C;IAC9C;;IAEA,oEAAoE;IACpE,wEAAwE;;IAExE,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/// 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-brand-colour !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-shade($govuk-button-colour, 20%);\n  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);\n\n  // Secondary button variables\n  $govuk-secondary-button-colour: govuk-colour(\"light-grey\");\n  $govuk-secondary-button-text-colour: govuk-colour(\"black\");\n  $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);\n  $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);\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-shade($govuk-warning-button-colour, 20%);\n  $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);\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-tint($govuk-inverse-button-text-colour, 90%);\n  $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);\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 / 2)); // 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    @include govuk-media-query($from: 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-focus-colour;\n      outline: $govuk-focus-width solid transparent;\n      box-shadow: inset 0 0 0 1px $govuk-focus-colour;\n    }\n\n    &:focus:not(:active):not(:hover) {\n      border-color: $govuk-focus-colour;\n      color: $govuk-focus-text-colour;\n      background-color: $govuk-focus-colour;\n      box-shadow: 0 2px 0 $govuk-focus-text-colour;\n    }\n\n    // The following adjustments do not work for <input type=\"button\"> as\n    // non-container elements cannot include pseudo elements (i.e. ::before).\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    @include govuk-media-query($from: 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"]}