From 449b735461b70454c869b16d6f0152ce91a9315b Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Thu, 17 Mar 2016 23:10:16 +0000 Subject: [PATCH] Initial styling + ability to highlight all and remove highlighted items --- assets/scripts/dist/bundle.js | 2 +- assets/scripts/src/choices.js | 133 ++++++++++++++++++++---------- assets/scripts/src/lib/utils.js | 4 + assets/styles/css/choices.css | 63 ++++++++++++++ assets/styles/css/choices.min.css | 1 + assets/styles/scss/choices.scss | 72 ++++++++++++++++ index.html | 1 + package.json | 4 +- 8 files changed, 235 insertions(+), 45 deletions(-) create mode 100644 assets/styles/css/choices.css create mode 100644 assets/styles/css/choices.min.css create mode 100644 assets/styles/scss/choices.scss diff --git a/assets/scripts/dist/bundle.js b/assets/scripts/dist/bundle.js index d6c5620..5d805a2 100644 --- a/assets/scripts/dist/bundle.js +++ b/assets/scripts/dist/bundle.js @@ -1 +1 @@ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/assets/scripts/dist/",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;ni;i++){var o=arguments[i];(0,a.isType)("Object",o)?n(o):console.error("Custom options must be an object")}return e}},{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){}},{key:"clearInput",value:function(){this.input.value&&(this.input.value="")}},{key:"onKeyDown",value:function(e){var t=this;if(13===e.keyCode&&e.target.value&&!function(){var e=t.input.value,n=function(){t.addItem(e),t.updateInputValue(e),t.clearInput(t.element)};t.options.maxItems?t.options.maxItems>t.list.children.length&&n():n()}(),8===e.keyCode&&!e.target.value){var n=function(){var e=t.list.children[t.list.children.length-1];e.parentNode.removeChild(e)};n(),e.preventDefault()}}},{key:"onFocus",value:function(e){}},{key:"onClick",value:function(e){}},{key:"onChange",value:function(e){}},{key:"addEventListeners",value:function(e){e.addEventListener("click",this.onClick),e.addEventListener("keydown",this.onKeyDown),e.addEventListener("change",this.onChange),e.addEventListener("focus",this.onFocus),e.addEventListener("blur",this.onBlur)}},{key:"removeEventListeners",value:function(e){e.removeEventListener("click",this.onClick),e.removeEventListener("keydown",this.onKeyDown),e.removeEventListener("change",this.onChange),e.removeEventListener("focus",this.onFocus),e.removeEventListener("blur",this.onBlur)}},{key:"setPlaceholder",value:function(){}},{key:"setValue",value:function(){}},{key:"getValue",value:function(){}},{key:"getPlaceholder",value:function(){}},{key:"search",value:function(){}},{key:"updateInputValue",value:function(e){this.options.debug&&console.debug("Update input value"),this.valueArray.push(e),this.element.value=JSON.stringify(this.valueArray)}},{key:"addItem",value:function(e){this.options.debug&&console.debug("Add item");var t=document.createElement("li");t.classList.add("choice__item"),t.textContent=e,this.list.appendChild(t)}},{key:"removeItem",value:function(){}},{key:"removeAllItems",value:function(){}},{key:"createItemList",value:function(){}},{key:"init",value:function(){this.supports||console.error("Your browser doesn'nt support shit"),this.initialised=!0,this.render(this.element)}},{key:"render",value:function(){var e=this;this.options.debug&&console.debug("Render");var t=document.createElement("div"),n=document.createElement("input"),i=document.createElement("ul");if(t.className="choice choice--active",this.element.classList.add("choice__input","choice__input--hidden"),this.element.tabIndex="-1",this.element.setAttribute("style","display:none;"),this.element.setAttribute("aria-hidden","true"),(0,a.wrap)(this.element,t),i.className="choice__list",n.type="text",n.placeholder=this.element.placeholder,n.className="choice__input choice__input--cloned",t.appendChild(i),t.appendChild(n),this.container=t,this.input=n,this.list=i,""!==this.element.value){var o=JSON.parse(this.element.value);o.forEach(function(t){e.addItem(t)})}this.addEventListeners(this.input)}},{key:"destroy",value:function(){this.options=null,this.element=null,this.removeEventListeners(this.input)}}]),e}();window.addEventListener("load",function(){for(var e=document.querySelectorAll("[data-choice]"),t=e.length-1;t>=0;t--){var n=e[t],i=new s({element:n});i.init()}})},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=(t.capitalise=function(e){return e.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})},t.isType=function(e,t){var n=Object.prototype.toString.call(t).slice(8,-1);return void 0!==t&&null!==t&&n===e},t.whichTransitionEvent=function(){var e,t=document.createElement("fakeelement"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]},t.whichAnimationEvent=function(){var e,t=document.createElement("fakeelement"),n={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(e in n)if(void 0!==t.style[e])return n[e]});t.getParentsUntil=function(e,t,n){for(var i=[];e&&e!==document;e=e.parentNode){if(t){var o=t.charAt(0);if("."===o&&e.classList.contains(t.substr(1)))break;if("#"===o&&e.id===t.substr(1))break;if("["===o&&e.hasAttribute(t.substr(1,t.length-1)))break;if(e.tagName.toLowerCase()===t)break}if(n){var a=n.charAt(0);"."===a&&e.classList.contains(n.substr(1))&&i.push(e),"#"===a&&e.id===n.substr(1)&&i.push(e),"["===a&&e.hasAttribute(n.substr(1,n.length-1))&&i.push(e),e.tagName.toLowerCase()===n&&i.push(e)}else i.push(e)}return 0===i.length?null:i},t.wrap=function(e,t){return t=t||document.createElement("div"),e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e)},t.getSiblings=function(e){for(var t=[],n=e.parentNode.firstChild;n;n=n.nextSibling)1===n.nodeType&&n!==e&&t.push(n);return t},t.findAncestor=function(e,t){for(;(e=e.parentElement)&&!e.classList.contains(t););return e},t.debounce=function(e,t,n){var i;return function(){var o=this,a=arguments,s=function(){i=null,n||e.apply(o,a)},r=n&&!i;clearTimeout(i),i=setTimeout(s,t),r&&e.apply(o,a)}},t.getElemDistance=function(e){var t=0;if(e.offsetParent)do t+=e.offsetTop,e=e.offsetParent;while(e);return t>=0?t:0},t.getElementOffset=function(e,t){var n=t;return n>1&&(n=1),n>0&&(n=0),Math.max(e.offsetHeight*n)},t.getScrollPosition=function(e){return"bottom"===e?Math.max((window.scrollY||window.pageYOffset)+(window.innerHeight||document.documentElement.clientHeight)):window.scrollY||window.pageYOffset},t.isInView=function(e,t,n){return this.getScrollPosition(t)>this.getElemDistance(e)+this.getElementOffset(e,n)},t.stripHTML=function(e){var t=document.createElement("DIV");return t.innerHTML=e,t.textContent||t.innerText||""},t.addAnimation=function(e,t){var i=n(),o=function a(){e.classList.remove(t),e.removeEventListener(i,a,!1)};e.classList.add(t),e.addEventListener(i,o,!1)},t.getRandomNumber=function(e,t){return Math.floor(Math.random()*(t-e)+e)}}]); \ No newline at end of file +!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/assets/scripts/dist/",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;ni;i++){var o=arguments[i];(0,s.isType)("Object",o)?n(o):console.error("Custom options must be an object")}return e}},{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){}},{key:"clearInput",value:function(){this.input.value&&(this.input.value="")}},{key:"onKeyUp",value:function(e){}},{key:"onKeyDown",value:function(e){var t=this,n=e.ctrlKey||e.metaKey;if(n&&65===e.keyCode)for(var i=0;i-1&&(n=!1)}n&&(t.addItem(e),t.updateInputValue(e),t.clearInput(t.element))};n()}(),(8===e.keyCode||46===e.keyCode)&&!e.target.value){var s=function(){var e=t.list.querySelectorAll(".choices__item"),n=e[e.length-1];n.classList.add("is-selected");for(var i=0;i=0;t--){var n=e[t],i=new a({element:n});i.init()}})},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=(t.hasClass=function(e,t){return new RegExp(" "+t+" ").test(" "+e.className+" ")},t.capitalise=function(e){return e.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()})},t.isType=function(e,t){var n=Object.prototype.toString.call(t).slice(8,-1);return void 0!==t&&null!==t&&n===e},t.whichTransitionEvent=function(){var e,t=document.createElement("fakeelement"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e]},t.whichAnimationEvent=function(){var e,t=document.createElement("fakeelement"),n={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(e in n)if(void 0!==t.style[e])return n[e]});t.getParentsUntil=function(e,t,n){for(var i=[];e&&e!==document;e=e.parentNode){if(t){var o=t.charAt(0);if("."===o&&e.classList.contains(t.substr(1)))break;if("#"===o&&e.id===t.substr(1))break;if("["===o&&e.hasAttribute(t.substr(1,t.length-1)))break;if(e.tagName.toLowerCase()===t)break}if(n){var s=n.charAt(0);"."===s&&e.classList.contains(n.substr(1))&&i.push(e),"#"===s&&e.id===n.substr(1)&&i.push(e),"["===s&&e.hasAttribute(n.substr(1,n.length-1))&&i.push(e),e.tagName.toLowerCase()===n&&i.push(e)}else i.push(e)}return 0===i.length?null:i},t.wrap=function(e,t){return t=t||document.createElement("div"),e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e)},t.getSiblings=function(e){for(var t=[],n=e.parentNode.firstChild;n;n=n.nextSibling)1===n.nodeType&&n!==e&&t.push(n);return t},t.findAncestor=function(e,t){for(;(e=e.parentElement)&&!e.classList.contains(t););return e},t.debounce=function(e,t,n){var i;return function(){var o=this,s=arguments,a=function(){i=null,n||e.apply(o,s)},r=n&&!i;clearTimeout(i),i=setTimeout(a,t),r&&e.apply(o,s)}},t.getElemDistance=function(e){var t=0;if(e.offsetParent)do t+=e.offsetTop,e=e.offsetParent;while(e);return t>=0?t:0},t.getElementOffset=function(e,t){var n=t;return n>1&&(n=1),n>0&&(n=0),Math.max(e.offsetHeight*n)},t.getScrollPosition=function(e){return"bottom"===e?Math.max((window.scrollY||window.pageYOffset)+(window.innerHeight||document.documentElement.clientHeight)):window.scrollY||window.pageYOffset},t.isInView=function(e,t,n){return this.getScrollPosition(t)>this.getElemDistance(e)+this.getElementOffset(e,n)},t.stripHTML=function(e){var t=document.createElement("DIV");return t.innerHTML=e,t.textContent||t.innerText||""},t.addAnimation=function(e,t){var i=n(),o=function s(){e.classList.remove(t),e.removeEventListener(i,s,!1)};e.classList.add(t),e.addEventListener(i,o,!1)},t.getRandomNumber=function(e,t){return Math.floor(Math.random()*(t-e)+e)}}]); \ No newline at end of file diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index f35879f..2a3f248 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -1,6 +1,6 @@ 'use strict'; -import { wrap, getSiblings, isType } from './lib/utils.js'; +import { hasClass, wrap, getSiblings, isType } from './lib/utils.js'; class Choices { constructor(options) { @@ -9,8 +9,10 @@ class Choices { const DEFAULT_OPTIONS = { element: document.querySelector('[data-choice]'), disabled: false, - maxItems: 5, - debug: true, + create: true, + maxItems: 10, + allowDuplicates: false, + debug: false, placeholder: false, callbackOnInit: function(){}, callbackOnRender: function(){}, @@ -20,8 +22,6 @@ class Choices { callbackOnRemove: function(){} }; - - // Merge options with user options this.options = this.extend(DEFAULT_OPTIONS, USER_OPTIONS || {}); this.initialised = false; @@ -95,31 +95,72 @@ class Choices { /* Event handling */ + onKeyUp(e) { + // console.log('Keyup'); + } + onKeyDown(e) { + let ctrlDown = e.ctrlKey || e.metaKey; + + // Handle select all + if(ctrlDown && e.keyCode === 65) { + for (let i = 0; i < this.list.children.length; i++) { + let listItem = this.list.children[i]; + + listItem.classList.add('is-selected'); + } + } + // Handle enter key if(e.keyCode === 13 && e.target.value) { let value = this.input.value; let handleEnterKey = () => { - this.addItem(value); - this.updateInputValue(value); - this.clearInput(this.element); + let canUpdate = true; + + // If there is a max entry limit and we have reached that limit + // don't update + if(this.options.maxItems && this.options.maxItems <= this.list.children.length) { + canUpdate = false; + } + + // If no duplicates are allowed, and the value already exists + // in the array, don't update + if(this.options.allowDuplicates === false && this.element.value) { + let currentValues = JSON.parse(this.element.value); + + if(currentValues.indexOf(value) > -1) { + canUpdate = false; + } + } + + // All is good, update + if(canUpdate) { + this.addItem(value); + this.updateInputValue(value); + this.clearInput(this.element); + } }; - if(this.options.maxItems) { - if(this.options.maxItems > this.list.children.length) { - handleEnterKey(); - } - } else { - handleEnterKey(); - } + handleEnterKey(); } - if(e.keyCode === 8 && !e.target.value) { + if((e.keyCode === 8 || e.keyCode === 46) && !e.target.value) { let handleBackspaceKey = () => { - let lastItem = this.list.children[this.list.children.length - 1]; - lastItem.parentNode.removeChild(lastItem); + let currentListItems = this.list.querySelectorAll('.choices__item'); + let lastItem = currentListItems[currentListItems.length - 1]; + + lastItem.classList.add('is-selected'); + + for (let i = 0; i < currentListItems.length; i++) { + let listItem = currentListItems[i]; + + if(listItem.classList.contains('is-selected')) { + this.removeItem(listItem); + this.removeInputValue(listItem.textContent); + } + }; }; handleBackspaceKey(); @@ -144,6 +185,7 @@ class Choices { addEventListeners(el) { el.addEventListener('click', this.onClick); + el.addEventListener('keyup', this.onKeyUp); el.addEventListener('keydown', this.onKeyDown); el.addEventListener('change', this.onChange); el.addEventListener('focus', this.onFocus); @@ -152,6 +194,7 @@ class Choices { removeEventListeners(el) { el.removeEventListener('click', this.onClick); + el.removeEventListener('keyup', this.onKeyUp); el.removeEventListener('keydown', this.onKeyDown); el.removeEventListener('change', this.onChange); el.removeEventListener('focus', this.onFocus); @@ -189,34 +232,34 @@ class Choices { this.element.value = JSON.stringify(this.valueArray); } + removeInputValue(value) { + if(this.options.debug) console.debug('Remove input value'); + + let index = this.valueArray.indexOf(value); + this.valueArray.splice(index, 1); + + this.element.value = JSON.stringify(this.valueArray); + } + addItem(value) { if(this.options.debug) console.debug('Add item'); // Create new list element let item = document.createElement('li'); - item.classList.add('choice__item'); + item.classList.add('choices__item'); item.textContent = value; // Append it to list this.list.appendChild(item); } - removeItem() { - + removeItem(item) { + if(item) item.parentNode.removeChild(item); } - - removeAllItems() { - - } - - createItemList() { - - } - + init() { if(!this.supports) console.error('Your browser doesn\'nt support shit'); this.initialised = true; - this.render(this.element); } @@ -224,31 +267,37 @@ class Choices { if(this.options.debug) console.debug('Render'); // Create DOM elements - let container = document.createElement('div'); + let containerOuter = document.createElement('div'); + let containerInner = document.createElement('div'); let input = document.createElement('input'); let list = document.createElement('ul'); - container.className = 'choice choice--active'; + containerOuter.className = 'choices choices--active'; + containerInner.className = 'choices__inner'; // Hide passed input - this.element.classList.add('choice__input', 'choice__input--hidden'); + this.element.classList.add('choices__input', 'choices__input--hidden'); this.element.tabIndex = '-1'; this.element.setAttribute('style', 'display:none;'); this.element.setAttribute('aria-hidden', 'true'); - // Wrap input in container - wrap(this.element, container); + // Wrap input in container preserving DOM ordering + wrap(this.element, containerInner); - list.className = 'choice__list'; + wrap(containerInner, containerOuter); + + list.className = 'choices__list'; input.type = 'text'; input.placeholder = this.element.placeholder; - input.className = 'choice__input choice__input--cloned'; + input.className = 'choices__input choices__input--cloned'; - container.appendChild(list); - container.appendChild(input); + containerInner.appendChild(list); + containerInner.appendChild(input); + containerOuter.appendChild(containerInner); - this.container = container; + this.containerOuter = containerOuter; + this.containerInner = containerInner; this.input = input; this.list = list; @@ -265,7 +314,7 @@ class Choices { destroy() { this.options = null; this.element = null; - + this.initialised = null; this.removeEventListeners(this.input); } }; diff --git a/assets/scripts/src/lib/utils.js b/assets/scripts/src/lib/utils.js index f1868b4..a0543c1 100644 --- a/assets/scripts/src/lib/utils.js +++ b/assets/scripts/src/lib/utils.js @@ -1,3 +1,7 @@ +export let hasClass = (elem, className) => { + return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); +} + /** * Capitalises the first letter of each word in a string * @param {String} str String to capitalise diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css new file mode 100644 index 0000000..9aaefee --- /dev/null +++ b/assets/styles/css/choices.css @@ -0,0 +1,63 @@ +*, *:before, *:after { + box-sizing: border-box; } + +html { + font-size: 62.5%; } + +html, body { + margin: 0; + height: 100%; + widows: 100%; } + +body { + background-color: #FAFAFA; + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + font-size: 1.6rem; + color: #222222; + padding: 2.4rem; } + +.choices { + margin-bottom: 2.4rem; + position: relative; } + +.choices__inner { + background-color: #FFFFFF; + padding: .75rem .75rem .375rem; + border: 1px solid #DDDDDD; + border-radius: .25rem; + font-size: 1.4rem; } + .choices__inner:focus { + outline: 1px solid #00BCD4; + outline-offset: -1px; } + +.choices__list { + margin: 0; + padding-left: 0; + list-style-type: none; + display: inline; } + +.choices__input { + font-size: 1.4rem; + padding: 0; + margin-bottom: .5rem; + display: inline-block; + vertical-align: baseline; + border: 0; + border-radius: 0; + max-width: 100%; } + .choices__input:focus { + outline: 0; } + +.choices__item { + display: inline-block; + border-radius: .4rem; + padding: .4rem .8rem; + font-size: 1.4rem; + margin-right: .375rem; + margin-bottom: .375rem; + background-color: #00BCD4; + text-shadow: 0px 1px 0px #008fa1; + border: 1px solid #00a5bb; + color: #FFFFFF; } + .choices__item.is-selected { + background-color: #00a5bb; } diff --git a/assets/styles/css/choices.min.css b/assets/styles/css/choices.min.css new file mode 100644 index 0000000..ed4a476 --- /dev/null +++ b/assets/styles/css/choices.min.css @@ -0,0 +1 @@ +*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#fafafa;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;font-size:1.6rem;color:#222;padding:2.4rem}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#fff;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.choices__list{margin:0;padding-left:0;list-style-type:none;display:inline}.choices__input{font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%}.choices__input:focus{outline:0}.choices__item{display:inline-block;border-radius:.4rem;padding:.4rem .8rem;font-size:1.4rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;text-shadow:0 1px 0 #008fa1;border:1px solid #00a5bb;color:#fff}.choices__item.is-selected{background-color:#00a5bb} \ No newline at end of file diff --git a/assets/styles/scss/choices.scss b/assets/styles/scss/choices.scss new file mode 100644 index 0000000..757fffd --- /dev/null +++ b/assets/styles/scss/choices.scss @@ -0,0 +1,72 @@ +*, *:before, *:after { + box-sizing: border-box +} + +html { + font-size: 62.5%; +} + +html, body { + margin: 0; + height: 100%; + widows: 100%; +} + +body { + background-color: #FAFAFA; + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + font-size: 1.6rem; + color: #222222; + padding: 2.4rem; +} + + +.choices { + margin-bottom: 2.4rem; + position: relative; +} + +.choices__inner { + background-color: #FFFFFF; + padding: .75rem .75rem .375rem; + border: 1px solid #DDDDDD; + border-radius: .25rem; + font-size: 1.4rem; + &:focus { + outline: 1px solid #00BCD4; + outline-offset: -1px; + } +} + +.choices__list { + margin: 0; + padding-left: 0; + list-style-type: none; + display: inline; +} + +.choices__input { + font-size: 1.4rem; + padding: 0; + margin-bottom: .5rem; + display: inline-block; + vertical-align: baseline; + border: 0; + border-radius: 0; + max-width: 100%; + &:focus { outline: 0; } +} + +.choices__item { + display: inline-block; + border-radius: .4rem; + padding: .4rem .8rem; + font-size: 1.4rem; + margin-right: .375rem; + margin-bottom: .375rem; + background-color: #00BCD4; + text-shadow: 0px 1px 0px darken(#00BCD4, 10%); + border: 1px solid darken(#00BCD4, 5%); + color: #FFFFFF; + &.is-selected { background-color: darken(#00BCD4, 5%); } +} \ No newline at end of file diff --git a/index.html b/index.html index 6955574..93ce193 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Choices + diff --git a/package.json b/package.json index 18f1c7b..a911f0f 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,9 @@ "lint": "eslint ./assets/scripts/src", "css:watch": "nodemon -e scss -x \"npm run css:build\"", "css:build": "npm run css:sass -s && npm run css:prefix -s && npm run css:min -s", - "css:sass": "node-sass --include-path scss assets/styles/scss/main.scss assets/styles/css/main.css", + "css:sass": "node-sass --include-path scss assets/styles/scss/*.scss assets/styles/css/choices.css", "css:prefix": "postcss --use autoprefixer -b 'last 2 versions' assets/styles/css/*.css -d assets/styles/css/", - "css:min": "csso assets/styles/css/main.css assets/styles/css/main.min.css", + "css:min": "csso assets/styles/css/choices.css assets/styles/css/choices.min.css", "js:build": "webpack --config webpack.config.prod.js", "js:test": "./node_modules/karma/bin/karma start --single-run --no-auto-watch tests/karma.config.js", "js:test_watch": "./node_modules/karma/bin/karma start --auto-watch --no-single-run tests/karma.config.js"