nice-select2
Version:
A lightweight Vanilla JavaScript plugin that replaces native select elements with customizable dropdowns.
1 lines • 7.05 kB
Source Map (JSON)
{"version":3,"file":"css/style.css","mappings":"AAAA,6CAEC,kBACA,aCHW,CDIX,aACA,gBACA,WACA,gBACA,gBACA,kBACA,oBACA,iBACC,cACA,kCACA,eACA,iBAIF,sBACC,kBACA,gBACA,cAGD,uDAEC,kBCxBc,CD4Bf,iCACC,kBAGD,yDAIC,aCtCM,CDyCP,mBACC,WAGD,WACC,WAGD,qGAOC,cAGD,0FAMC,cAGD,0FAKC,cACA,gCAGD,+CAGC,aC7EM,CDgFP,gBACC,cAGD,8CAGC,WAGD,6BAEC,iBAED,cACC,kBAGD,cACC,YClED,KACE,mCACA,kCACA,aAxCU,CAyCV,mCACA,eACA,mBACA,uBACA,SACA,eAGF,EACE,gBACA,iBAGF,GACE,eACA,gBACA,oBACA,gBAGF,GACE,eACA,gBACA,gBACA,iBAGF,GACE,eACA,gBACA,gBACA,iBAGF,GACE,SACA,kBAGF,eACE,aA7EK,CA8EL,aACA,qBACA,uCACA,+BACA,sCACA,0CACE,gCAIJ,YACE,mBAGF,WACE,sBACA,eAGF,KAEE,wBApGa,CAqGb,kBACA,mBACA,kBA9EA,uBACE,WACA,cAEF,WACE,WA4EJ,MACE,aA7GK,CA8GL,eACA,iBACA,yBACA,WACA,YACE,YAIJ,QACE,0CACA,wBAtHK,CAuHL,iBA9GoB,CA+GpB,YACA,sBACA,WACA,eACA,qBACA,gBACA,WApHa,CAqHb,gBArHa,CAsHb,aACA,eACA,kBACA,qBACA,uCACA,+BACA,mBACA,WACA,4BACE,yBAEF,eACE,yBAEF,cACE,sBACA,yBACA,aAjJG,CAkJH,iBACA,iBACA,oBACE,qBAEF,yCACE,oBAvJO,CA0JX,qCAvCF,QAwCI,WACA,cACE,iBAMN,QACE,kBACA,mBACA,qCAHF,QAII,gBAEF,UACE,aA9KG,CA+KH,eACA,mBAIJ,QACE,kBACA,UACE,mBAIJ,QACE,aA5LK,CA6LL,WACA,cApLgB,CAqLhB,gB","sources":["webpack://NiceSelect/./src/scss/_prism.scss","webpack://NiceSelect/./src/scss/style.scss"],"sourcesContent":["code[class*=\"language-\"],\r\npre[class*=\"language-\"] {\r\n\tborder-radius: 2px;\r\n\tcolor: $gray_dark;\r\n\thyphens: none;\r\n\tline-height: 1.5;\r\n\ttab-size: 4;\r\n\ttext-align: left;\r\n\twhite-space: pre;\r\n\tword-break: normal;\r\n\tword-spacing: normal;\r\n\tword-wrap: normal;\r\n direction: ltr;\r\n font-family: Inconsolata, monospace;\r\n font-size: 13px;\t\r\n letter-spacing: 0;\r\n}\r\n\r\n/* Code blocks */\r\npre[class*=\"language-\"] {\r\n\tpadding: 18px 24px;\r\n\tmargin: 0 0 24px;\r\n\toverflow: auto;\r\n}\r\n\r\n:not(pre) > code[class*=\"language-\"],\r\npre[class*=\"language-\"] {\r\n\tbackground: $gray_lighter;\r\n}\r\n\r\n/* Inline code */\r\n:not(pre) > code[class*=\"language-\"] {\r\n\tpadding: 0 2px 1px;\r\n}\r\n\r\n.token.comment,\r\n.token.prolog,\r\n.token.doctype,\r\n.token.cdata {\r\n\tcolor: $gray;\r\n}\r\n\r\n.token.punctuation {\r\n\tcolor: #999;\r\n}\r\n\r\n.namespace {\r\n\topacity: .7;\r\n}\r\n\r\n.token.property,\r\n.token.tag,\r\n.token.boolean,\r\n.token.number,\r\n.token.constant,\r\n.token.symbol,\r\n.token.deleted {\r\n\tcolor: #EC4444;\r\n}\r\n\r\n.token.selector,\r\n.token.attr-name,\r\n.token.string,\r\n.token.char,\r\n.token.builtin,\r\n.token.inserted {\r\n\tcolor: #4ABF60;\r\n}\r\n\r\n.token.operator,\r\n.token.entity,\r\n.token.url,\r\n.language-css .token.string,\r\n.style .token.string {\r\n\tcolor: #a67f59;\r\n\tbackground: hsla(0, 0%, 100%, .5);\r\n}\r\n\r\n.token.atrule,\r\n.token.attr-value,\r\n.token.keyword {\r\n\tcolor: $blue;\r\n}\r\n\r\n.token.function {\r\n\tcolor: #DD4A68;\r\n}\r\n\r\n.token.regex,\r\n.token.important,\r\n.token.variable {\r\n\tcolor: #e90;\r\n}\r\n\r\n.token.important,\r\n.token.bold {\r\n\tfont-weight: bold;\r\n}\r\n.token.italic {\r\n\tfont-style: italic;\r\n}\r\n\r\n.token.entity {\r\n\tcursor: help;\r\n}\r\n","$gray_dark: #445870;\r\n$gray: #90a1b5;\r\n$gray_light: #e0e7ee;\r\n$gray_lighter: #f6f7f9;\r\n$blue: #55a1fb;\r\n$blue_light: #88bfff;\r\n$primary: $blue;\r\n$primary_light: $blue_light;\r\n\r\n// Default variables\r\n$font_size: 14px !default;\r\n$font_size_small: 12px !default;\r\n\r\n$input_border_radius: 5px !default;\r\n$input_height: 38px;\r\n$input_height_small: 36px !default;\r\n$dropdown_padding: 18px !default;\r\n\r\n$gray_dark: #444 !default;\r\n$gray: #999 !default;\r\n$gray_light: #e8e8e8 ;\r\n$gray_lighter: #f6f6f6 !default;\r\n$primary_light: $gray !default;\r\n$arrow_color: $gray !default;\r\n\r\n@import \"./prism\";\r\n\r\n@mixin clearfix() {\r\n &:before, &:after {\r\n content: \"\";\r\n display: table;\r\n }\r\n &:after {\r\n clear: both;\r\n }\r\n}\r\n\r\nbody {\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n color: $gray_dark;\r\n font-family: 'Work Sans', sans-serif;\r\n font-size: 14px;\r\n font-weight: normal;\r\n letter-spacing: -0.25px;\r\n margin: 0;\r\n padding: 0 18px;\r\n}\r\n\r\np {\r\n line-height: 1.6;\r\n margin: 0 0 1.6em;\r\n}\r\n\r\nh1 {\r\n font-size: 36px;\r\n font-weight: 300;\r\n letter-spacing: -2px;\r\n margin: 0 0 24px;\r\n}\r\n\r\nh2 {\r\n font-size: 22px;\r\n font-weight: 700;\r\n margin: 0 0 12px;\r\n padding-top: 48px;\r\n}\r\n\r\nh3 {\r\n font-size: 18px; \r\n font-weight: 400;\r\n margin: 0 0 12px;\r\n padding-top: 12px;\r\n}\r\n\r\nul {\r\n margin: 0;\r\n padding-left: 16px;\r\n}\r\n\r\na:not(.button) {\r\n color: $primary;\r\n outline: none;\r\n text-decoration: none;\r\n -webkit-transition: all 0.2s ease-in-out;\r\n transition: all 0.2s ease-in-out;\r\n border-bottom: 1px solid transparent;\r\n &:hover, &:focus {\r\n border-bottom: 1px solid $primary_light;\r\n }\r\n}\r\n\r\n::selection {\r\n background: darken($gray_lighter, 1%);\r\n}\r\n\r\n.container {\r\n margin: 96px auto 60px;\r\n max-width: 40em;\r\n}\r\n\r\n.box {\r\n @include clearfix;\r\n background-color: $gray_lighter;\r\n border-radius: 2px;\r\n margin-bottom: 30px;\r\n padding: 24px 30px;\r\n}\r\n\r\nlabel {\r\n color: $gray;\r\n font-size: 11px;\r\n margin: 0 2px 4px;\r\n text-transform: uppercase;\r\n float: left;\r\n &.right {\r\n float: right;\r\n }\r\n}\r\n\r\n.button {\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n background-color: $primary;\r\n border-radius: $input_border_radius;\r\n border: none;\r\n box-sizing: border-box;\r\n color: #fff;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-weight: 600;\r\n height: $input_height;\r\n line-height: $input_height;\r\n outline: none;\r\n padding: 0 24px;\r\n text-align: center;\r\n text-decoration: none;\r\n -webkit-transition: all 0.2s ease-in-out;\r\n transition: all 0.2s ease-in-out;\r\n white-space: nowrap;\r\n width: auto;\r\n &:hover, &:focus {\r\n background-color: darken($primary, 4%);\r\n }\r\n &:active {\r\n background-color: darken($primary, 8%);\r\n }\r\n &.light {\r\n background-color: #fff;\r\n border: 1px solid $gray_light;\r\n color: $primary;\r\n line-height: $input_height - 2;\r\n margin-left: 24px;\r\n &:hover {\r\n border-color: darken($gray_light, 5%);\r\n }\r\n &:active, &:focus {\r\n border-color: $primary_light;\r\n }\r\n }\r\n @media screen and (max-width: 360px) {\r\n width: 100%;\r\n &.light {\r\n margin: 18px 0 0;\r\n }\r\n }\r\n}\r\n\r\n\r\n.header {\r\n text-align: center;\t\r\n margin-bottom: 60px;\r\n @media screen and (min-width: 600px) {\r\n padding: 0 18px;\r\n }\r\n p {\r\n color: $gray;\r\n font-size: 18px;\r\n margin-bottom: 36px;\r\n }\r\n}\r\n\r\n.footer {\r\n text-align: center;\r\n p {\r\n margin-bottom: 90px;\r\n }\r\n}\r\n\r\n.credit {\r\n color: $gray;\r\n clear: both;\r\n font-size: $font_size_small;\r\n margin-top: 90px;\r\n}\r\n"],"names":[],"sourceRoot":""}