").append(m.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},m.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){m.fn[b]=function(a){return this.on(b,a)}}),m.expr.filters.animated=function(a){return m.grep(m.timers,function(b){return a===b.elem}).length};var cc=a.document.documentElement;function dc(a){return m.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}m.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=m.css(a,"position"),l=m(a),n={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=m.css(a,"top"),i=m.css(a,"left"),j=("absolute"===k||"fixed"===k)&&m.inArray("auto",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),m.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(n.top=b.top-h.top+g),null!=b.left&&(n.left=b.left-h.left+e),"using"in b?b.using.call(a,n):l.css(n)}},m.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){m.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,m.contains(b,e)?(typeof e.getBoundingClientRect!==K&&(d=e.getBoundingClientRect()),c=dc(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return"fixed"===m.css(d,"position")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),m.nodeName(a[0],"html")||(c=a.offset()),c.top+=m.css(a[0],"borderTopWidth",!0),c.left+=m.css(a[0],"borderLeftWidth",!0)),{top:b.top-c.top-m.css(d,"marginTop",!0),left:b.left-c.left-m.css(d,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||cc;while(a&&!m.nodeName(a,"html")&&"static"===m.css(a,"position"))a=a.offsetParent;return a||cc})}}),m.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c=/Y/.test(b);m.fn[a]=function(d){return V(this,function(a,d,e){var f=dc(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?m(f).scrollLeft():e,c?e:m(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),m.each(["top","left"],function(a,b){m.cssHooks[b]=La(k.pixelPosition,function(a,c){return c?(c=Ja(a,b),Ha.test(c)?m(a).position()[b]+"px":c):void 0})}),m.each({Height:"height",Width:"width"},function(a,b){m.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){m.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return V(this,function(b,c,d){var e;return m.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?m.css(b,c,g):m.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),m.fn.size=function(){return this.length},m.fn.andSelf=m.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return m});var ec=a.jQuery,fc=a.$;return m.noConflict=function(b){return a.$===m&&(a.$=fc),b&&a.jQuery===m&&(a.jQuery=ec),m},typeof b===K&&(a.jQuery=a.$=m),m});
6 |
--------------------------------------------------------------------------------
/js/jquery.nice-select.js:
--------------------------------------------------------------------------------
1 | /* jQuery Nice Select - v1.1.0
2 | https://github.com/hernansartorio/jquery-nice-select
3 | Made by Hernán Sartorio */
4 |
5 | (function($) {
6 |
7 | $.fn.niceSelect = function(method) {
8 |
9 | // Methods
10 | if (typeof method == 'string') {
11 | if (method == 'update') {
12 | this.each(function() {
13 | var $select = $(this);
14 | var $dropdown = $(this).next('.nice-select');
15 | var open = $dropdown.hasClass('open');
16 |
17 | if ($dropdown.length) {
18 | $dropdown.remove();
19 | create_nice_select($select);
20 |
21 | if (open) {
22 | $select.next().trigger('click');
23 | }
24 | }
25 | });
26 | } else if (method == 'destroy') {
27 | this.each(function() {
28 | var $select = $(this);
29 | var $dropdown = $(this).next('.nice-select');
30 |
31 | if ($dropdown.length) {
32 | $dropdown.remove();
33 | $select.css('display', '');
34 | }
35 | });
36 | if ($('.nice-select').length == 0) {
37 | $(document).off('.nice_select');
38 | }
39 | } else {
40 | console.log('Method "' + method + '" does not exist.')
41 | }
42 | return this;
43 | }
44 |
45 | // Hide native select
46 | this.hide();
47 |
48 | // Create custom markup
49 | this.each(function() {
50 | var $select = $(this);
51 |
52 | if (!$select.next().hasClass('nice-select')) {
53 | create_nice_select($select);
54 | }
55 | });
56 |
57 | function create_nice_select($select) {
58 | $select.after($('
')
59 | .addClass('nice-select')
60 | .addClass($select.attr('class') || '')
61 | .addClass($select.attr('disabled') ? 'disabled' : '')
62 | .attr('tabindex', $select.attr('disabled') ? null : '0')
63 | .html('
')
64 | );
65 |
66 | var $dropdown = $select.next();
67 | var $options = $select.find('option');
68 | var $selected = $select.find('option:selected');
69 |
70 | $dropdown.find('.current').html($selected.data('display') || $selected.text());
71 |
72 | $options.each(function(i) {
73 | var $option = $(this);
74 | var display = $option.data('display');
75 |
76 | $dropdown.find('ul').append($('
')
77 | .attr('data-value', $option.val())
78 | .attr('data-display', (display || null))
79 | .addClass('option' +
80 | ($option.is(':selected') ? ' selected' : '') +
81 | ($option.is(':disabled') ? ' disabled' : ''))
82 | .html($option.text())
83 | );
84 | });
85 | }
86 |
87 | /* Event listeners */
88 |
89 | // Unbind existing events in case that the plugin has been initialized before
90 | $(document).off('.nice_select');
91 |
92 | // Open/close
93 | $(document).on('click.nice_select', '.nice-select', function(event) {
94 | var $dropdown = $(this);
95 |
96 | $('.nice-select').not($dropdown).removeClass('open');
97 | $dropdown.toggleClass('open');
98 |
99 | if ($dropdown.hasClass('open')) {
100 | $dropdown.find('.option');
101 | $dropdown.find('.focus').removeClass('focus');
102 | $dropdown.find('.selected').addClass('focus');
103 | } else {
104 | $dropdown.focus();
105 | }
106 | });
107 |
108 | // Close when clicking outside
109 | $(document).on('click.nice_select', function(event) {
110 | if ($(event.target).closest('.nice-select').length === 0) {
111 | $('.nice-select').removeClass('open').find('.option');
112 | }
113 | });
114 |
115 | // Option click
116 | $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
117 | var $option = $(this);
118 | var $dropdown = $option.closest('.nice-select');
119 |
120 | $dropdown.find('.selected').removeClass('selected');
121 | $option.addClass('selected');
122 |
123 | var text = $option.data('display') || $option.text();
124 | $dropdown.find('.current').text(text);
125 |
126 | $dropdown.prev('select').val($option.data('value')).trigger('change');
127 | });
128 |
129 | // Keyboard events
130 | $(document).on('keydown.nice_select', '.nice-select', function(event) {
131 | var $dropdown = $(this);
132 | var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
133 |
134 | // Space or Enter
135 | if (event.keyCode == 32 || event.keyCode == 13) {
136 | if ($dropdown.hasClass('open')) {
137 | $focused_option.trigger('click');
138 | } else {
139 | $dropdown.trigger('click');
140 | }
141 | return false;
142 | // Down
143 | } else if (event.keyCode == 40) {
144 | if (!$dropdown.hasClass('open')) {
145 | $dropdown.trigger('click');
146 | } else {
147 | var $next = $focused_option.nextAll('.option:not(.disabled)').first();
148 | if ($next.length > 0) {
149 | $dropdown.find('.focus').removeClass('focus');
150 | $next.addClass('focus');
151 | }
152 | }
153 | return false;
154 | // Up
155 | } else if (event.keyCode == 38) {
156 | if (!$dropdown.hasClass('open')) {
157 | $dropdown.trigger('click');
158 | } else {
159 | var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
160 | if ($prev.length > 0) {
161 | $dropdown.find('.focus').removeClass('focus');
162 | $prev.addClass('focus');
163 | }
164 | }
165 | return false;
166 | // Esc
167 | } else if (event.keyCode == 27) {
168 | if ($dropdown.hasClass('open')) {
169 | $dropdown.trigger('click');
170 | }
171 | // Tab
172 | } else if (event.keyCode == 9) {
173 | if ($dropdown.hasClass('open')) {
174 | return false;
175 | }
176 | }
177 | });
178 |
179 | // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
180 | var style = document.createElement('a').style;
181 | style.cssText = 'pointer-events:auto';
182 | if (style.pointerEvents !== 'auto') {
183 | $('html').addClass('no-csspointerevents');
184 | }
185 |
186 | return this;
187 |
188 | };
189 |
190 | }(jQuery));
--------------------------------------------------------------------------------
/js/jquery.nice-select.min.js:
--------------------------------------------------------------------------------
1 | /* jQuery Nice Select - v1.0
2 | https://github.com/hernansartorio/jquery-nice-select
3 | Made by Hernán Sartorio */
4 | !function(e){e.fn.niceSelect=function(t){function s(t){t.after(e("
").addClass("nice-select").addClass(t.attr("class")||"").addClass(t.attr("disabled")?"disabled":"").attr("tabindex",t.attr("disabled")?null:"0").html('
'));var s=t.next(),n=t.find("option"),i=t.find("option:selected");s.find(".current").html(i.data("display")||i.text()),n.each(function(t){var n=e(this),i=n.data("display");s.find("ul").append(e("
").attr("data-value",n.val()).attr("data-display",i||null).addClass("option"+(n.is(":selected")?" selected":"")+(n.is(":disabled")?" disabled":"")).html(n.text()))})}if("string"==typeof t)return"update"==t?this.each(function(){var t=e(this),n=e(this).next(".nice-select"),i=n.hasClass("open");n.length&&(n.remove(),s(t),i&&t.next().trigger("click"))}):"destroy"==t?(this.each(function(){var t=e(this),s=e(this).next(".nice-select");s.length&&(s.remove(),t.css("display",""))}),0==e(".nice-select").length&&e(document).off(".nice_select")):console.log('Method "'+t+'" does not exist.'),this;this.hide(),this.each(function(){var t=e(this);t.next().hasClass("nice-select")||s(t)}),e(document).off(".nice_select"),e(document).on("click.nice_select",".nice-select",function(t){var s=e(this);e(".nice-select").not(s).removeClass("open"),s.toggleClass("open"),s.hasClass("open")?(s.find(".option"),s.find(".focus").removeClass("focus"),s.find(".selected").addClass("focus")):s.focus()}),e(document).on("click.nice_select",function(t){0===e(t.target).closest(".nice-select").length&&e(".nice-select").removeClass("open").find(".option")}),e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){var s=e(this),n=s.closest(".nice-select");n.find(".selected").removeClass("selected"),s.addClass("selected");var i=s.data("display")||s.text();n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change")}),e(document).on("keydown.nice_select",".nice-select",function(t){var s=e(this),n=e(s.find(".focus")||s.find(".list .option.selected"));if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1;if(40==t.keyCode){if(s.hasClass("open")){var i=n.nextAll(".option:not(.disabled)").first();i.length>0&&(s.find(".focus").removeClass("focus"),i.addClass("focus"))}else s.trigger("click");return!1}if(38==t.keyCode){if(s.hasClass("open")){var l=n.prevAll(".option:not(.disabled)").first();l.length>0&&(s.find(".focus").removeClass("focus"),l.addClass("focus"))}else s.trigger("click");return!1}if(27==t.keyCode)s.hasClass("open")&&s.trigger("click");else if(9==t.keyCode&&s.hasClass("open"))return!1});var n=document.createElement("a").style;return n.cssText="pointer-events:auto","auto"!==n.pointerEvents&&e("html").addClass("no-csspointerevents"),this}}(jQuery);
--------------------------------------------------------------------------------
/js/prism.js:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss */
2 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=(o?" ":"")+s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code,i=n.immediateClose;_self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),i&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
3 | Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[^\s>\/=.]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/
[\w\W]*?<\/style>/i,inside:{tag:{pattern:/|<\/style>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/i,inside:{tag:{pattern:/|<\/script>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
7 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\w\W]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;\{\}\(\)]?([^@;\{\}\(\)]|&|#\{\$[-_\w]+\})+(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/m,inside:{placeholder:/%[-_\w]+/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","property",{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-_\w]+/,alias:"selector"},statement:/\B!(?:default|optional)\b/i,"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.util.clone(Prism.languages.scss);
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery-nice-select",
3 | "version": "1.1.0",
4 | "description": "A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.",
5 | "main": "./js/jquery.nice-select.min.js",
6 | "dependencies": {
7 | "jquery": "^2.2.3"
8 | },
9 | "devDependencies": {
10 | "gulp": "^3.9.0",
11 | "gulp-autoprefixer": "^3.1.0",
12 | "gulp-jshint": "^2.0.0",
13 | "gulp-rename": "^1.2.2",
14 | "gulp-sass": "^2.1.1",
15 | "gulp-uglify": "^1.5.1",
16 | "jshint": "^2.8.0"
17 | },
18 | "scripts": {
19 | "test": "echo \"Error: no test specified\" && exit 1"
20 | },
21 | "repository": {
22 | "type": "git",
23 | "url": "git+https://github.com/hernansartorio/jquery-nice-select.git"
24 | },
25 | "author": "Hernán Sartorio",
26 | "license": "ISC",
27 | "bugs": {
28 | "url": "https://github.com/hernansartorio/jquery-nice-select/issues"
29 | },
30 | "homepage": "https://github.com/hernansartorio/jquery-nice-select#readme"
31 | }
32 |
--------------------------------------------------------------------------------
/scss/_nice-select-prefixed.scss:
--------------------------------------------------------------------------------
1 | // Default variables
2 | $font_size: 14px !default;
3 | $font_size_small: 12px !default;
4 |
5 | $input_border_radius: 5px !default;
6 | $input_height: 42px !default;
7 | $input_height_small: 36px !default;
8 | $dropdown_padding: 18px !default;
9 |
10 | $gray_dark: #444 !default;
11 | $gray: #999 !default;
12 | $gray_light: #e8e8e8 !default;
13 | $gray_lighter: #f6f6f6 !default;
14 | $primary_light: $gray !default;
15 | $arrow_color: $gray !default;
16 |
17 | // Style the dropdown
18 | .nice-select {
19 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
20 | background-color: #fff;
21 | border-radius: $input_border_radius;
22 | border: solid 1px $gray_light;
23 | box-sizing: border-box;
24 | clear: both;
25 | cursor: pointer;
26 | display: block;
27 | float: left;
28 | font-family: inherit;
29 | font-size: $font_size;
30 | font-weight: normal;
31 | height: $input_height;
32 | line-height: $input_height - 2;
33 | outline: none;
34 | padding-left: $dropdown_padding;
35 | padding-right: $dropdown_padding + 12;
36 | position: relative;
37 | text-align: left !important;
38 | -webkit-transition
39 | : all 0.2s ease-in-out;
40 | transition: all 0.2s ease-in-out;
41 | -webkit-user-select: none;
42 | -moz-user-select: none;
43 | -ms-user-select: none;
44 | user-select: none;
45 | white-space: nowrap;
46 | width: auto;
47 | &:hover {
48 | border-color: darken($gray_light, 5%);
49 | }
50 | &:active, &:focus {
51 | border-color: $primary_light;
52 | }
53 | // Arrow
54 | &:after {
55 | border-bottom: 2px solid $arrow_color;
56 | border-right: 2px solid $arrow_color;
57 | content: '';
58 | display: block;
59 | height: 5px;
60 | margin-top: -4px;
61 | pointer-events: none;
62 | position: absolute;
63 | right: 12px;
64 | top: 50%;
65 | -webkit-transform-origin: 66% 66%;
66 | -ms-transform-origin: 66% 66%;
67 | transform-origin: 66% 66%;
68 | -webkit-transform: rotate(45deg);
69 | -ms-transform: rotate(45deg);
70 | transform: rotate(45deg);
71 | -webkit-transition
72 | : all 0.15s ease-in-out;
73 | transition: all 0.15s ease-in-out;
74 | width: 5px;
75 | }
76 |
77 | &.open {
78 | @extend :active;
79 | &:after {
80 | -webkit-transform: rotate(-135deg);
81 | -ms-transform: rotate(-135deg);
82 | transform: rotate(-135deg);
83 | }
84 | .list {
85 | opacity: 1;
86 | pointer-events: auto;
87 | -webkit-transform: scale(1) translateY(0);
88 | -ms-transform: scale(1) translateY(0);
89 | transform: scale(1) translateY(0);
90 | }
91 | }
92 | &.disabled {
93 | border-color: lighten($gray_light, 2%);
94 | color: $gray;
95 | pointer-events: none;
96 | &:after {
97 | border-color: lighten($arrow_color, 20%);
98 | }
99 | }
100 |
101 | // Modifiers
102 | &.wide {
103 | width: 100%;
104 | .list {
105 | left: 0 !important;
106 | right: 0 !important;
107 | }
108 | }
109 | &.right {
110 | float: right;
111 | .list {
112 | left: auto;
113 | right: 0;
114 | }
115 | }
116 | &.small {
117 | font-size: $font_size_small;
118 | height: $input_height_small;
119 | line-height: $input_height_small - 2;
120 | &:after {
121 | height: 4px;
122 | width: 4px;
123 | }
124 | .option {
125 | line-height: $input_height_small - 2;
126 | min-height: $input_height_small - 2;
127 | }
128 | }
129 |
130 | // List and options
131 | .list {
132 | background-color: #fff;
133 | border-radius: $input_border_radius;
134 | box-shadow: 0 0 0 1px rgba($gray_dark, .11);
135 | box-sizing: border-box;
136 | margin-top: 4px;
137 | opacity: 0;
138 | overflow: hidden;
139 | padding: 0;
140 | pointer-events: none;
141 | position: absolute;
142 | top: 100%; left: 0;
143 | -webkit-transform-origin: 50% 0;
144 | -ms-transform-origin: 50% 0;
145 | transform-origin: 50% 0;
146 | -webkit-transform: scale(.75) translateY(- $input_height / 2);
147 | -ms-transform: scale(.75) translateY(- $input_height / 2);
148 | transform: scale(.75) translateY(- $input_height / 2);
149 | -webkit-transition
150 | : all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out;
151 | transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out;
152 | z-index: 9;
153 | &:hover .option:not(:hover) {
154 | background-color: transparent !important;
155 | }
156 | }
157 | .option {
158 | cursor: pointer;
159 | font-weight: 400;
160 | line-height: $input_height - 2;
161 | list-style: none;
162 | min-height: $input_height - 2;
163 | outline: none;
164 | padding-left: $dropdown_padding;
165 | padding-right: $dropdown_padding + 11;
166 | text-align: left;
167 | -webkit-transition
168 | : all 0.2s;
169 | transition: all 0.2s;
170 | &:hover, &.focus, &.selected.focus {
171 | background-color: $gray_lighter;
172 | }
173 | &.selected {
174 | font-weight: bold;
175 | }
176 | &.disabled {
177 | background-color: transparent;
178 | color: $gray;
179 | cursor: default;
180 | }
181 | }
182 | }
183 |
184 | // Use display instead of opacity for IE <= 10
185 | .no-csspointerevents .nice-select {
186 | .list {
187 | display: none;
188 | }
189 | &.open {
190 | .list {
191 | display: block;
192 | }
193 | }
194 | }
--------------------------------------------------------------------------------
/scss/_prism.scss:
--------------------------------------------------------------------------------
1 | code[class*="language-"],
2 | pre[class*="language-"] {
3 | border-radius: 2px;
4 | color: $gray_dark;
5 | hyphens: none;
6 | line-height: 1.5;
7 | tab-size: 4;
8 | text-align: left;
9 | white-space: pre;
10 | word-break: normal;
11 | word-spacing: normal;
12 | word-wrap: normal;
13 | direction: ltr;
14 | font-family: Inconsolata, monospace;
15 | font-size: 13px;
16 | letter-spacing: 0;
17 | }
18 |
19 | /* Code blocks */
20 | pre[class*="language-"] {
21 | padding: 18px 24px;
22 | margin: 0 0 24px;
23 | overflow: auto;
24 | }
25 |
26 | :not(pre) > code[class*="language-"],
27 | pre[class*="language-"] {
28 | background: $gray_lighter;
29 | }
30 |
31 | /* Inline code */
32 | :not(pre) > code[class*="language-"] {
33 | padding: 0 2px 1px;
34 | }
35 |
36 | .token.comment,
37 | .token.prolog,
38 | .token.doctype,
39 | .token.cdata {
40 | color: $gray;
41 | }
42 |
43 | .token.punctuation {
44 | color: #999;
45 | }
46 |
47 | .namespace {
48 | opacity: .7;
49 | }
50 |
51 | .token.property,
52 | .token.tag,
53 | .token.boolean,
54 | .token.number,
55 | .token.constant,
56 | .token.symbol,
57 | .token.deleted {
58 | color: #EC4444;
59 | }
60 |
61 | .token.selector,
62 | .token.attr-name,
63 | .token.string,
64 | .token.char,
65 | .token.builtin,
66 | .token.inserted {
67 | color: #4ABF60;
68 | }
69 |
70 | .token.operator,
71 | .token.entity,
72 | .token.url,
73 | .language-css .token.string,
74 | .style .token.string {
75 | color: #a67f59;
76 | background: hsla(0, 0%, 100%, .5);
77 | }
78 |
79 | .token.atrule,
80 | .token.attr-value,
81 | .token.keyword {
82 | color: $blue;
83 | }
84 |
85 | .token.function {
86 | color: #DD4A68;
87 | }
88 |
89 | .token.regex,
90 | .token.important,
91 | .token.variable {
92 | color: #e90;
93 | }
94 |
95 | .token.important,
96 | .token.bold {
97 | font-weight: bold;
98 | }
99 | .token.italic {
100 | font-style: italic;
101 | }
102 |
103 | .token.entity {
104 | cursor: help;
105 | }
106 |
--------------------------------------------------------------------------------
/scss/nice-select.scss:
--------------------------------------------------------------------------------
1 | // Default variables
2 | $font_size: 14px !default;
3 | $font_size_small: 12px !default;
4 |
5 | $input_border_radius: 5px !default;
6 | $input_height: 42px !default;
7 | $input_height_small: 36px !default;
8 | $dropdown_padding: 18px !default;
9 |
10 | $gray_dark: #444 !default;
11 | $gray: #999 !default;
12 | $gray_light: #e8e8e8 !default;
13 | $gray_lighter: #f6f6f6 !default;
14 | $primary_light: $gray !default;
15 | $arrow_color: $gray !default;
16 |
17 | // Style the dropdown
18 | .nice-select {
19 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
20 | background-color: #fff;
21 | border-radius: $input_border_radius;
22 | border: solid 1px $gray_light;
23 | box-sizing: border-box;
24 | clear: both;
25 | cursor: pointer;
26 | display: block;
27 | float: left;
28 | font-family: inherit;
29 | font-size: $font_size;
30 | font-weight: normal;
31 | height: $input_height;
32 | line-height: $input_height - 2;
33 | outline: none;
34 | padding-left: $dropdown_padding;
35 | padding-right: $dropdown_padding + 12;
36 | position: relative;
37 | text-align: left !important;
38 | transition: all 0.2s ease-in-out;
39 | user-select: none;
40 | white-space: nowrap;
41 | width: auto;
42 | &:hover {
43 | border-color: darken($gray_light, 5%);
44 | }
45 | &:active, &:focus {
46 | border-color: $primary_light;
47 | }
48 | // Arrow
49 | &:after {
50 | border-bottom: 2px solid $arrow_color;
51 | border-right: 2px solid $arrow_color;
52 | content: '';
53 | display: block;
54 | height: 5px;
55 | margin-top: -4px;
56 | pointer-events: none;
57 | position: absolute;
58 | right: 12px;
59 | top: 50%;
60 | transform-origin: 66% 66%;
61 | transform: rotate(45deg);
62 | transition: all 0.15s ease-in-out;
63 | width: 5px;
64 | }
65 |
66 | &.open {
67 | @extend :active;
68 | &:after {
69 | transform: rotate(-135deg);
70 | }
71 | .list {
72 | opacity: 1;
73 | pointer-events: auto;
74 | transform: scale(1) translateY(0);
75 | }
76 | }
77 | &.disabled {
78 | border-color: lighten($gray_light, 2%);
79 | color: $gray;
80 | pointer-events: none;
81 | &:after {
82 | border-color: lighten($arrow_color, 20%);
83 | }
84 | }
85 |
86 | // Modifiers
87 | &.wide {
88 | width: 100%;
89 | .list {
90 | left: 0 !important;
91 | right: 0 !important;
92 | }
93 | }
94 | &.right {
95 | float: right;
96 | .list {
97 | left: auto;
98 | right: 0;
99 | }
100 | }
101 | &.small {
102 | font-size: $font_size_small;
103 | height: $input_height_small;
104 | line-height: $input_height_small - 2;
105 | &:after {
106 | height: 4px;
107 | width: 4px;
108 | }
109 | .option {
110 | line-height: $input_height_small - 2;
111 | min-height: $input_height_small - 2;
112 | }
113 | }
114 |
115 | // List and options
116 | .list {
117 | background-color: #fff;
118 | border-radius: $input_border_radius;
119 | box-shadow: 0 0 0 1px rgba($gray_dark, .11);
120 | box-sizing: border-box;
121 | margin-top: 4px;
122 | opacity: 0;
123 | overflow: hidden;
124 | padding: 0;
125 | pointer-events: none;
126 | position: absolute;
127 | top: 100%; left: 0;
128 | transform-origin: 50% 0;
129 | transform: scale(.75) translateY(- $input_height / 2);
130 | transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out;
131 | z-index: 9;
132 | &:hover .option:not(:hover) {
133 | background-color: transparent !important;
134 | }
135 | }
136 | .option {
137 | cursor: pointer;
138 | font-weight: 400;
139 | line-height: $input_height - 2;
140 | list-style: none;
141 | min-height: $input_height - 2;
142 | outline: none;
143 | padding-left: $dropdown_padding;
144 | padding-right: $dropdown_padding + 11;
145 | text-align: left;
146 | transition: all 0.2s;
147 | &:hover, &.focus, &.selected.focus {
148 | background-color: $gray_lighter;
149 | }
150 | &.selected {
151 | font-weight: bold;
152 | }
153 | &.disabled {
154 | background-color: transparent;
155 | color: $gray;
156 | cursor: default;
157 | }
158 | }
159 | }
160 |
161 | // Use display instead of opacity for IE <= 10
162 | .no-csspointerevents .nice-select {
163 | .list {
164 | display: none;
165 | }
166 | &.open {
167 | .list {
168 | display: block;
169 | }
170 | }
171 | }
--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
1 | $gray_dark: #445870;
2 | $gray: #90a1b5;
3 | $gray_light: #e0e7ee;
4 | $gray_lighter: #f6f7f9;
5 | $blue: #55a1fb;
6 | $blue_light: #88bfff;
7 | $primary: $blue;
8 | $primary_light: $blue_light;
9 |
10 | @import 'nice-select';
11 | @import 'prism';
12 |
13 | @mixin clearfix() {
14 | &:before, &:after {
15 | content: "";
16 | display: table;
17 | }
18 | &:after {
19 | clear: both;
20 | }
21 | }
22 |
23 | body {
24 | -webkit-font-smoothing: antialiased;
25 | -moz-osx-font-smoothing: grayscale;
26 | color: $gray_dark;
27 | font-family: 'Work Sans', sans-serif;
28 | font-size: 14px;
29 | font-weight: normal;
30 | letter-spacing: -0.25px;
31 | margin: 0;
32 | padding: 0 18px;
33 | }
34 |
35 | p {
36 | line-height: 1.6;
37 | margin: 0 0 1.6em;
38 | }
39 |
40 | h1 {
41 | font-size: 36px;
42 | font-weight: 300;
43 | letter-spacing: -2px;
44 | margin: 0 0 24px;
45 | }
46 |
47 | h2 {
48 | font-size: 22px;
49 | font-weight: 400;
50 | margin: 0 0 12px;
51 | padding-top: 48px;
52 | }
53 |
54 | h3 {
55 | font-size: 18px;
56 | font-weight: 400;
57 | margin: 0 0 12px;
58 | padding-top: 12px;
59 | }
60 |
61 | ul {
62 | margin: 0;
63 | padding-left: 16px;
64 | }
65 |
66 | a:not(.button) {
67 | color: $primary;
68 | outline: none;
69 | text-decoration: none;
70 | -webkit-transition: all 0.2s ease-in-out;
71 | transition: all 0.2s ease-in-out;
72 | border-bottom: 1px solid transparent;
73 | &:hover, &:focus {
74 | border-bottom: 1px solid $primary_light;
75 | }
76 | }
77 |
78 | ::selection {
79 | background: darken($gray_lighter, 1%);
80 | }
81 |
82 | .container {
83 | margin: 96px auto 60px;
84 | max-width: 40em;
85 | }
86 |
87 | .box {
88 | @include clearfix;
89 | background-color: $gray_lighter;
90 | border-radius: 2px;
91 | margin-bottom: 30px;
92 | padding: 24px 30px;
93 | }
94 |
95 | label {
96 | color: $gray;
97 | font-size: 11px;
98 | margin: 0 2px 4px;
99 | text-transform: uppercase;
100 | float: left;
101 | &.right {
102 | float: right;
103 | }
104 | }
105 |
106 | .button {
107 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
108 | background-color: $primary;
109 | border-radius: $input_border_radius;
110 | border: none;
111 | box-sizing: border-box;
112 | color: #fff;
113 | cursor: pointer;
114 | display: inline-block;
115 | font-weight: 600;
116 | height: $input_height;
117 | line-height: $input_height;
118 | outline: none;
119 | padding: 0 24px;
120 | text-align: center;
121 | text-decoration: none;
122 | -webkit-transition: all 0.2s ease-in-out;
123 | transition: all 0.2s ease-in-out;
124 | white-space: nowrap;
125 | width: auto;
126 | &:hover, &:focus {
127 | background-color: darken($primary, 4%);
128 | }
129 | &:active {
130 | background-color: darken($primary, 8%);
131 | }
132 | &.light {
133 | background-color: #fff;
134 | border: 1px solid $gray_light;
135 | color: $primary;
136 | line-height: $input_height - 2;
137 | margin-left: 24px;
138 | &:hover {
139 | border-color: darken($gray_light, 5%);
140 | }
141 | &:active, &:focus {
142 | border-color: $primary_light;
143 | }
144 | }
145 | @media screen and (max-width: 360px) {
146 | width: 100%;
147 | &.light {
148 | margin: 18px 0 0;
149 | }
150 | }
151 | }
152 |
153 |
154 | .header {
155 | text-align: center;
156 | margin-bottom: 60px;
157 | @media screen and (min-width: 600px) {
158 | padding: 0 18px;
159 | }
160 | p {
161 | color: $gray;
162 | font-size: 18px;
163 | margin-bottom: 36px;
164 | }
165 | }
166 |
167 | .footer {
168 | text-align: center;
169 | p {
170 | margin-bottom: 90px;
171 | }
172 | }
173 |
174 | .credit {
175 | color: $gray;
176 | clear: both;
177 | font-size: $font_size_small;
178 | margin-top: 90px;
179 | }
--------------------------------------------------------------------------------