nice-select2
Version:
A lightweight Vanilla JavaScript plugin that replaces native select elements with customizable dropdowns.
1 lines • 7.32 kB
Source Map (JSON)
{"version":3,"file":"css/style.css","mappings":";;;AAAA;;EAEC;EACA,cCHW;EDIX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACC;EACA;EACA;EACA;ACCF;;ADEA;AACA;EACC;EACA;EACA;ACCD;;ADEA;;EAEC,mBCxBc;AAyBf;;ADEA;AACA;EACC;ACCD;;ADEA;;;;EAIC,cCtCM;AAuCP;;ADEA;EACC;ACCD;;ADEA;EACC;ACCD;;ADEA;;;;;;;EAOC;ACCD;;ADEA;;;;;;EAMC;ACCD;;ADEA;;;;;EAKC;EACA;ACCD;;ADEA;;;EAGC,cC7EM;AA8EP;;ADEA;EACC;ACCD;;ADEA;;;EAGC;ACCD;;ADEA;;EAEC;ACCD;;ADCA;EACC;ACED;;ADCA;EACC;ACED;;AApEA;EACE;EACA;EACA,cAxCU;EAyCV;EACA;EACA;EACA;EACA;EACA;AAuEF;;AApEA;EACE;EACA;AAuEF;;AApEA;EACE;EACA;EACA;EACA;AAuEF;;AApEA;EACE;EACA;EACA;EACA;AAuEF;;AApEA;EACE;EACA;EACA;EACA;AAuEF;;AApEA;EACE;EACA;AAuEF;;AApEA;EACE,cA7EK;EA8EL;EACA;EACA;EACA;EACA;AAuEF;AAtEE;EACE;AAwEJ;;AApEA;EACE;AAuEF;;AApEA;EACE;EACA;AAuEF;;AApEA;EAEE,yBApGa;EAqGb;EACA;EACA;AAsEF;AApJE;EACE;EACA;AAsJJ;AApJE;EACE;AAsJJ;;AA1EA;EACE,cA7GK;EA8GL;EACA;EACA;EACA;AA6EF;AA5EE;EACE;AA8EJ;;AA1EA;EACE;EACA,yBAtHK;EAuHL,kBA9GoB;EA+GpB;EACA;EACA;EACA;EACA;EACA;EACA,YApHa;EAqHb,iBArHa;EAsHb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA6EF;AA5EE;EACE;AA8EJ;AA5EE;EACE;AA8EJ;AA5EE;EACE;EACA;EACA,cAjJG;EAkJH;EACA;AA8EJ;AA7EI;EACE;AA+EN;AA7EI;EACE,qBAvJO;AAsOb;AA5EE;EAvCF;IAwCI;EA+EF;EA9EE;IACE;EAgFJ;AACF;;AA3EA;EACE;EACA;AA8EF;AA7EE;EAHF;IAII;EAgFF;AACF;AA/EE;EACE,cA9KG;EA+KH;EACA;AAiFJ;;AA7EA;EACE;AAgFF;AA/EE;EACE;AAiFJ;;AA7EA;EACE,cA5LK;EA6LL;EACA,eApLgB;EAqLhB;AAgFF,C","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":""}