digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
2 lines (1 loc) • 8.56 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/digitalmarketplace/components/search-box/_index.scss"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D;EACE,2BAA2B;EAC3B,sBAAsB;EACtB,8EAA8E;EAC9E,8BAA8B;EAC9B,2EAA2E;EAC3E,uBAAuB;AACzB;;AAEA;EACE,iBAAiB;EACjB,uBAAuB;;EAEvB;IACE,kBAAkB;IAClB,mBAAmB;EACrB;;EAEA;IACE,yDAAyD;IACzD,cAAc;IACd,yBAAyB;IACzB,iCAAiC;;IAEjC;MACE,yDAAyD;MACzD,SAAS;IACX;;IAEA;MACE,kBAAkB;MAClB,UAAU;MACV,QAAQ;MACR,WAAW;MACX,SAAS;MACT,8BAA8B;MAC9B,mCAAmC;IACrC;;IAEA,oDAAoD;IACpD,qEAAqE;IACrE;MACE,yBAAyB;IAC3B;EACF;;EAEA;IACE,wDAAwD;IACxD,uDAAuD;IACvD,sBAAsB;IACtB,WAAW;IACX,mBAAmB;IACnB,SAAS;;IAET,YAAY;IACZ,yEAAyE;IACzE,gBAAgB,EAAE,oDAAoD;IACtE,iCAAiC;IACjC,wBAAwB;IACxB,qBAAqB;IACrB,gBAAgB;;IAEhB,2GAA2G;IAC3G;;MAEE,UAAU;IACZ;;IAEA;MACE,qDAAqD;MACrD,+CAA+C;MAC/C,iBAAiB;MACjB,8GAA8G;MAC9G,2FAA2F;MAC3F,wDAAwD;IAC1D;EACF;;EAEA;IACE,kBAAkB;IAClB,kBAAkB;IAClB,mBAAmB;IACnB,UAAU;IACV,gBAAgB;IAChB,SAAS;IACT,gBAAgB;IAChB,2ZAA2Z;IAC3Z,4BAA4B;IAC5B,2BAA2B;IAC3B,wCAAwC;IACxC,oBAAoB;IACpB,eAAe;;IAEf;MACE,UAAU;MACV,qDAAqD;MACrD,+CAA+C;MAC/C,iBAAiB;MACjB,+GAA+G;MAC/G,gDAAgD;MAChD,2FAA2F;MAC3F,kFAAkF;IACpF;;IAEA;MACE,SAAS;IACX;EACF;;EAEA;IACE,cAAc;IACd,WAAW;IACX,iCAAiC;EACnC;;EAEA,0DAA0D;EAC1D;IACE,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;EACrB;;EAEA;IACE,SAAS;EACX;;EAEA;IACE;MACE,eAAe;;MAEf,uDAAuD;MACvD,0BAA0B;MAC1B;QACE,gBAAgB;MAClB;IACF;;IAEA;MACE,4BAA4B;MAC5B,uCAAuC;;MAEvC;QACE,oDAAoD;MACtD;IACF;;IAEA;MACE;QACE,mCAAmC;MACrC;IACF;EACF;;EAEA;IACE;MACE,4BAA4B;MAC5B,sCAAsC;;MAEtC;QACE,mDAAmD;MACrD;IACF;;IAEA;MACE,qBAAqB;;MAErB,6BAA6B;MAC7B;QACE,uBAAuB;MACzB;IACF;EACF;;EAEA;IACE;MACE,SAAS;IACX;EACF;;EAEA;IACE;MACE,kBAAkB;MAClB,SAAS;MACT,UAAU;MACV,eAAe;IACjB;EACF;;EAEA;IACE,aAAa;IACb,WAAW;IACX,YAAY;IACZ,eAAe;IACf,UAAU;IACV,YAAY;IACZ,gBAAgB;IAChB,SAAS;IACT,sCAAsC;IACtC,4EAA4E;IAC5E,4BAA4B;IAC5B,0BAA0B;IAC1B,oBAAoB;;IAEpB;MACE,eAAe;MACf,qDAAqD;MACrD,iBAAiB;MACjB,sDAAsD;IACxD;;IAEA;;MAEE,mDAAmD;IACrD;;IAEA;MACE,aAAa;IACf;;IAEA;MACE,aAAa;IACf;;IAEA;MACE;QACE,cAAc;MAChB;IACF;EACF;AACF","file":"_index.scss","sourcesContent":["// Taken from the GOVUK Design System site search stylesheet\n@function encode-hex($hex) {\n // Turn colour into a string\n $output: inspect($hex);\n // Slice the '#' from the start of the string so we can add it back on encoded.\n $output: str-slice($output, 2);\n // Add the '#' back on the start, but as an encoded character for embedding.\n @return \"%23\" + $output;\n}\n\n@include digitalmarketplace-exports(\"digitalmarketplace/component/search-box\") {\n $input-size: 40px;\n $large-input-size: 50px;\n\n .dm-search-box {\n position: relative;\n margin-bottom: 30px;\n }\n\n .dm-search-box__label {\n @include govuk-font($size: 19, $line-height: $input-size);\n display: block;\n color: $govuk-text-colour;\n background: govuk-colour(\"white\");\n\n h1 {\n @include govuk-font($size: 19, $line-height: $input-size);\n margin: 0;\n }\n\n .js-enabled & {\n position: absolute;\n z-index: 1;\n top: 2px;\n bottom: 2px;\n left: 2px;\n padding-left: govuk-spacing(3);\n color: $govuk-secondary-text-colour;\n }\n\n // match label colour with the label component colour\n // when javascript is enabled and inline_label option is set to false\n .js-enabled .dm-search-box--separate-label & {\n color: $govuk-text-colour;\n }\n }\n\n .dm-search-box__input[type=\"search\"] {\n // overly specific to prevent some overrides from outside\n @include govuk-font($size: 19, $line-height: (28 / 19));\n box-sizing: border-box;\n width: 100%;\n height: $input-size;\n margin: 0;\n\n padding: 6px;\n border: $govuk-border-width-form-element solid $govuk-input-border-colour;\n border-radius: 0; // otherwise iphones apply an automatic border radius\n background: govuk-colour(\"white\");\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n\n // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in\n &:focus,\n &.focus {\n z-index: 2;\n }\n\n &:focus {\n outline: $govuk-focus-width solid $govuk-focus-colour;\n // Ensure outline appears outside of the element\n outline-offset: 0;\n // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`\n // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.\n box-shadow: inset 0 0 0 $govuk-border-width-form-element;\n }\n }\n\n .dm-search-box__submit {\n position: relative;\n width: $input-size;\n height: $input-size;\n padding: 0;\n overflow: hidden;\n border: 0;\n border-radius: 0;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='#{encode-hex(govuk-colour('white'))}'%3E%3C/path%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: $input-size $input-size;\n text-indent: -5000px;\n cursor: pointer;\n\n &:focus {\n z-index: 2;\n outline: $govuk-focus-width solid $govuk-focus-colour;\n // Ensure outline appears outside of the element\n outline-offset: 0;\n // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`.\n // This ensures consistency with the search input\n // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.\n box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour(\"black\");\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n }\n\n .dm-search-box__item-wrapper {\n display: table;\n width: 100%;\n background: govuk-colour(\"white\");\n }\n\n // general class applied to search input and button wrapper\n .dm-search-box__item {\n display: table-cell;\n position: relative;\n vertical-align: top;\n }\n\n .dm-search-box__submit-wrapper {\n width: 1%;\n }\n\n .dm-search-box--on-govuk-blue {\n .dm-search-box__input {\n border-width: 0;\n\n // no need for black outline as there is enough contrast\n // with the blue background\n &:focus {\n box-shadow: none;\n }\n }\n\n .dm-search-box__submit {\n color: govuk-colour(\"white\");\n background-color: govuk-colour(\"black\");\n\n &:hover {\n background-color: lighten(govuk-colour(\"black\"), 5%);\n }\n }\n\n .js-enabled & {\n .dm-search-box__label {\n color: $govuk-secondary-text-colour;\n }\n }\n }\n\n .dm-search-box--on-white {\n .dm-search-box__submit {\n color: govuk-colour(\"white\");\n background-color: govuk-colour(\"blue\");\n\n &:hover {\n background-color: lighten(govuk-colour(\"blue\"), 5%);\n }\n }\n\n .dm-search-box__input[type=\"search\"] {\n border-right-width: 0;\n\n // add the border once focused\n &:focus {\n border-right-width: 2px;\n }\n }\n }\n\n .dm-search-box--no-border {\n .dm-search-box__input[type=\"search\"] {\n border: 0;\n }\n }\n\n .dm-search-box--separate-label {\n .dm-search-box__label {\n position: relative;\n top: auto;\n left: auto;\n padding-left: 0;\n }\n }\n\n .search-toggle {\n display: none;\n width: 36px;\n height: 30px;\n margin: -46px 0;\n padding: 0;\n float: right;\n overflow: hidden;\n border: 0;\n background-color: govuk-colour(\"blue\");\n background-image: image-url(\"govuk_publishing_components/search-button.png\");\n background-repeat: no-repeat;\n background-position: 0 50%;\n text-indent: -5000px;\n\n &:focus {\n border-width: 0;\n outline: $govuk-focus-width solid $govuk-focus-colour;\n outline-offset: 0;\n box-shadow: inset 0 0 0 4px $govuk-input-border-colour;\n }\n\n &:focus,\n &:hover {\n background-color: lighten(govuk-colour(\"blue\"), 5%);\n }\n\n &.js-hidden {\n display: none;\n }\n\n @include govuk-media-query($from: tablet) {\n display: none;\n }\n\n @include govuk-media-query($until: tablet) {\n .js-enabled & {\n display: block;\n }\n }\n }\n}\n"]}