digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
2 lines (1 loc) • 5.53 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/digitalmarketplace/components/option-select/_index.scss"],"names":[],"mappings":"AAAA;EACE,0VAA0V;;;EAG1V;IACE,kBAAkB;IAClB,+BAA+B;IAC/B,6BAA6B;IAC7B,6CAA6C;;IAE7C;MACE,iEAAiE;MACjE,4CAA4C;MAC5C;QACE,wBAAwB;QACxB,UAAU;MACZ;;MAEA;QACE,kBAAkB;;QAElB,iCAAiC;QACjC,mCAAmC;QACnC,qDAAqD;MACvD;IACF;EACF;;EAEA;IACE,uBAAuB;IACvB,SAAS;EACX;;EAEA;IACE,UAAU;IACV,UAAU;IACV,SAAS;IACT,yBAAyB;IACzB,gBAAgB;IAChB,gBAAgB;IAChB,eAAe;;IAEf;MACE,0BAA0B;IAC5B;;IAEA;MACE,SAAS;IACX;;IAEA;MACE,aAAa;;MAEb,8BAA8B;MAC9B,iCAAiC;MACjC,qCAAqC;MACrC,wEAAwE;MACxE,qBAAqB;IACvB;;IAEA;MACE,cAAc;MACd,sBAAsB;IACxB;;IAEA,yDAAyD;IACzD;MACE,WAAW;MACX,kBAAkB;MAClB,UAAU;MACV,MAAM;MACN,QAAQ;MACR,SAAS;MACT,OAAO;IACT;EACF;;EAEA;IACE,aAAa;IACb,kBAAkB;IAClB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,YAAY;IACZ,2BAA2B;EAC7B;;EAEA;IACE,kBAAkB;IAClB,iBAAiB;IACjB,kBAAkB;IAClB,gBAAgB;IAChB,uCAAuC;;IAEvC;MACE,UAAU;IACZ;;IAEA;MACE,iBAAiB;IACnB;EACF;;EAEA;IACE,8BAA8B;;IAE9B;MACE,+BAA+B;IACjC;;IAEA;MACE,8BAA8B;IAChC;EACF;;EAEA;IACE;MACE,kBAAkB;MAClB,SAAS;MACT,0BAA0B;IAC5B;;IAEA;MACE,cAAc;IAChB;;IAEA;MACE,cAAc;IAChB;;IAEA;MACE,aAAa;IACf;;IAEA;MACE,aAAa;IACf;;;IAGA;MACE,aAAa;IACf;EACF;;EAEA;IACE,8BAA8B;IAC9B,eAAe;IACf,yBAAyB;EAC3B;;EAEA;IACE;MACE,aAAa;IACf;EACF;;EAEA;IACE;MACE,cAAc;IAChB;EACF;;EAEA;IACE,8BAA8B;IAC9B,sCAAsC;IACtC,4BAA4B;IAC5B,kDAAkD;IAClD,qBAAqB;IACrB,mCAAmC;IACnC,kCAAkC;EACpC;AACF","file":"_index.scss","sourcesContent":["@include digitalmarketplace-exports(\"digitalmarketplace/component/option-select\") {\n $dm-search-icon: \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%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='%23636363' /%3E%3C/svg%3E\";\n\n\n .dm-option-select {\n position: relative;\n margin-bottom: govuk-spacing(2);\n padding: 0 0 govuk-spacing(2);\n border-bottom: 1px solid $govuk-border-colour;\n\n @include govuk-media-query($from: desktop) {\n // Redefine scrollbars on desktop where these lists are scrollable\n // so they are always visible in option lists\n ::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 7px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n\n // scss-lint:disable ColorVariable\n background-color: rgba(0, 0, 0, .5);\n -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.87);\n }\n }\n }\n\n .dm-option-select__title {\n @include govuk-font(19);\n margin: 0;\n }\n\n .dm-option-select__button {\n z-index: 1;\n padding: 0;\n border: 0;\n color: $govuk-link-colour;\n background: none;\n text-align: left;\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n\n outline: 3px solid transparent;\n color: $govuk-input-border-colour;\n background-color: $govuk-focus-colour;\n box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-input-border-colour;\n text-decoration: none;\n }\n\n &[disabled] {\n color: inherit;\n background-image: none;\n }\n\n // Extend the touch area of the button to span the heading\n &::after {\n content: \"\";\n position: absolute;\n z-index: 2;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n }\n\n .dm-option-select__icon {\n display: none;\n position: absolute;\n top: 4px;\n left: 9px;\n width: 30px;\n height: 40px;\n fill: govuk-colour(\"black\");\n }\n\n .dm-option-select__container {\n position: relative;\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: auto;\n background-color: govuk-colour(\"white\");\n\n &:focus {\n outline: 0;\n }\n\n &--filter {\n max-height: 300px;\n }\n }\n\n .dm-option-select__container-inner {\n padding: govuk-spacing(1) 13px;\n\n .govuk-form-group {\n margin-bottom: govuk-spacing(1);\n }\n\n .govuk-checkboxes__label {\n @include govuk-font($size: 19);\n }\n }\n\n .js-enabled {\n .dm-option-select__heading {\n position: relative;\n margin: 0;\n padding: 10px 8px 5px 43px;\n }\n\n [aria-expanded=\"true\"] ~ .dm-option-select__icon--up {\n display: block;\n }\n\n [aria-expanded=\"false\"] ~ .dm-option-select__icon--down {\n display: block;\n }\n\n .dm-option-select__container {\n height: 200px;\n }\n\n .dm-option-select__container.dm-option-select__container--filter {\n height: 300px;\n }\n\n\n [data-closed-on-load=\"true\"] .dm-option-select__container {\n display: none;\n }\n }\n\n .dm-option-select__selected-counter {\n @include govuk-font($size: 16);\n margin-top: 3px;\n color: $govuk-text-colour;\n }\n\n .dm-option-select.js-closed {\n .dm-option-select__container {\n display: none;\n }\n }\n\n .dm-option-select.js-opened {\n .dm-option-select__container {\n display: block;\n }\n }\n\n .dm-option-select__filter-input {\n padding-left: govuk-spacing(7);\n background-image: url($dm-search-icon);\n background-repeat: no-repeat;\n background-position: left govuk-spacing(-1) center;\n background-size: 40px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n}\n"]}