diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index 0c55623..7da1080 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -9,9 +9,9 @@ import Store from './store/index.js'; * Choices * * To do: - * - Remove item by clicking a target + * - Map selected items to select options * - Set input width based on the size of the contents - * - Populate options by function + * - Remove item by clicking a target */ export class Choices { constructor(element = '[data-choice]', userOptions = {}) { diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css index 21481f5..dd6111d 100644 --- a/assets/styles/css/choices.css +++ b/assets/styles/css/choices.css @@ -1,3 +1,6 @@ +/*============================================= += Generic styling = +=============================================*/ *, *:before, *:after { box-sizing: border-box; } @@ -37,6 +40,10 @@ h1, h2, h3, h4, h5, h6 { padding: 2.4rem; color: #333; } +/*===== End of Section comment block ======*/ +/*=============================== += Choices = +===============================*/ .choices { margin-bottom: 2.4rem; position: relative; } @@ -51,7 +58,7 @@ h1, h2, h3, h4, h5, h6 { cursor: not-allowed; } .choices[data-type*="select-one"].is-open:after { - border-color: transparent transparent #b7b7b7 transparent; + border-color: transparent transparent #333333 transparent; margin-top: -7.5px; } .choices[data-type*="select-one"]:after { @@ -59,7 +66,7 @@ h1, h2, h3, h4, h5, h6 { height: 0; width: 0; border-style: solid; - border-color: #b7b7b7 transparent transparent transparent; + border-color: #333333 transparent transparent transparent; border-width: 5px; position: absolute; right: 1.15rem; @@ -70,19 +77,16 @@ h1, h2, h3, h4, h5, h6 { background-color: #f9f9f9; padding: .75rem .75rem .375rem; border: 1px solid #DDDDDD; - border-radius: .25rem; + border-radius: 0.25rem; font-size: 1.4rem; cursor: text; overflow: hidden; } - .choices__inner:focus { - outline: 1px solid #00BCD4; - outline-offset: -1px; } .is-focused .choices__inner { border-color: #b7b7b7; } .is-open .choices__inner { - border-radius: .25rem .25rem 0 0; } + border-radius: 0.25rem 0.25rem 0 0; } .is-flipped.is-open .choices__inner { - border-radius: 0 0 .25rem .25rem; } + border-radius: 0 0 0.25rem 0.25rem; } .choices__list { margin: 0; @@ -90,8 +94,9 @@ h1, h2, h3, h4, h5, h6 { list-style-type: none; } .choices__list--single { - display: inline-block; - padding: .4rem; } + display: inline-block; } + .choices__list--single .choices__item { + padding: .4rem; } .choices__list--multiple { display: inline; } @@ -109,8 +114,8 @@ h1, h2, h3, h4, h5, h6 { .choices__list--multiple .choices__item.is-selected { background-color: #00a5bb; } .is-disabled .choices__list--multiple .choices__item { - background-color: #b7b7b7; - border: 1px solid #aaaaaa; } + background-color: #eaeaea; + border: 1px solid #dddddd; } .choices__list--dropdown { display: none; @@ -121,8 +126,8 @@ h1, h2, h3, h4, h5, h6 { border: 1px solid #DDDDDD; top: 100%; margin-top: -1px; - border-bottom-left-radius: .25rem; - border-bottom-right-radius: .25rem; + border-bottom-left-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; max-height: 300px; overflow: auto; will-change: scroll-position; } @@ -171,7 +176,7 @@ h1, h2, h3, h4, h5, h6 { font-weight: 600; font-size: 1.2rem; padding: 1rem; - border-bottom: 1px solid #EAEAEA; + border-bottom: 1px solid #f7f7f7; color: gray; } .choices__input { @@ -187,3 +192,5 @@ h1, h2, h3, h4, h5, h6 { padding: .4rem 0 .4rem .2rem; } .choices__input:focus { outline: 0; } + +/*===== End of Choices ======*/ diff --git a/assets/styles/css/choices.min.css b/assets/styles/css/choices.min.css index e8f2a15..f5773f1 100644 --- a/assets/styles/css/choices.min.css +++ b/assets/styles/css/choices.min.css @@ -1 +1 @@ -*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;color:#fff}label{display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:500}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:500}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.choices{margin-bottom:2.4rem;position:relative}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #b7b7b7 transparent;margin-top:-7.5px}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#b7b7b7 transparent transparent transparent;border-width:5px;position:absolute;right:1.15rem;top:50%;margin-top:-2.5px}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem;cursor:text;overflow:hidden}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.is-focused .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:.25rem .25rem 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 .25rem .25rem}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block;padding:.4rem}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;border-radius:2rem;padding:.4rem 1rem;font-size:1.2rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item.is-selected{background-color:#00a5bb}.is-disabled .choices__list--multiple .choices__item{background-color:#b7b7b7;border:1px solid #aaa}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;max-height:300px;overflow:auto;will-change:scroll-position}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item--selectable.is-highlighted:after,.choices__list--dropdown .choices__item.is-selected{opacity:.5}.choices__list--dropdown .choices__item.is-selected:hover{background-color:#fff}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;float:right}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:1.2rem;padding:1rem;border-bottom:1px solid #eaeaea;color:gray}.choices__input{background-color:#f9f9f9;font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:.4rem 0 .4rem .2rem}.choices__input:focus{outline:0} \ No newline at end of file +*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;color:#fff}label{display:block;margin-bottom:.8rem;font-size:1.4rem;font-weight:500}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:500}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.choices{margin-bottom:2.4rem;position:relative}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:1.15rem;top:50%;margin-top:-2.5px}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem;cursor:text;overflow:hidden}.is-focused .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:.25rem .25rem 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 .25rem .25rem}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block}.choices__list--single .choices__item{padding:.4rem}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;border-radius:2rem;padding:.4rem 1rem;font-size:1.2rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item.is-selected{background-color:#00a5bb}.is-disabled .choices__list--multiple .choices__item{background-color:#eaeaea;border:1px solid #ddd}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;max-height:300px;overflow:auto;will-change:scroll-position}.choices__list--dropdown.is-active{display:block}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item--selectable.is-highlighted:after,.choices__list--dropdown .choices__item.is-selected{opacity:.5}.choices__list--dropdown .choices__item.is-selected:hover{background-color:#fff}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;float:right}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:1.2rem;padding:1rem;border-bottom:1px solid #f7f7f7;color:gray}.choices__input{background-color:#f9f9f9;font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:.4rem 0 .4rem .2rem}.choices__input:focus{outline:0} \ No newline at end of file diff --git a/assets/styles/scss/choices.scss b/assets/styles/scss/choices.scss index ae9a874..40b3ee4 100644 --- a/assets/styles/scss/choices.scss +++ b/assets/styles/scss/choices.scss @@ -1,5 +1,9 @@ $global-guttering: 2.4rem; +/*============================================= += Generic styling = +=============================================*/ + *, *:before, *:after { box-sizing: border-box } @@ -47,6 +51,22 @@ h1, h2, h3, h4, h5, h6 { color: #333; } +/*===== End of Section comment block ======*/ + + +/*=============================== += Choices = +===============================*/ + +$choices-border-radius: .25rem; +$choices-border-radius-item: 2rem; +$choices-bg-color: #f9f9f9; +$choices-bg-color-dropdown: #FFFFFF; +$choices-text-color: #333333; +$choices-keyline-color: #DDDDDD; +$choices-primary-color: #00BCD4; +$choices-disabled-color: #eaeaea; + .choices { margin-bottom: $global-guttering; position: relative; @@ -62,7 +82,7 @@ h1, h2, h3, h4, h5, h6 { .choices[data-type*="select-one"] { &.is-open:after { - border-color: transparent transparent darken(#DDDDDD, 15%) transparent; + border-color: transparent transparent $choices-text-color transparent; margin-top: -7.5px; } &:after { @@ -70,7 +90,7 @@ h1, h2, h3, h4, h5, h6 { height: 0; width: 0; border-style: solid; - border-color: darken(#DDDDDD, 15%) transparent transparent transparent; + border-color: $choices-text-color transparent transparent transparent; border-width: 5px; position: absolute; right: .75rem + .4rem; @@ -80,20 +100,16 @@ h1, h2, h3, h4, h5, h6 { } .choices__inner { - background-color: mix(#000000, #FFFFFF, 2.5%); + background-color: $choices-bg-color; padding: .75rem .75rem .375rem; - border: 1px solid #DDDDDD; - border-radius: .25rem; + border: 1px solid $choices-keyline-color; + border-radius: $choices-border-radius; font-size: 1.4rem; cursor: text; overflow: hidden; - &:focus { - outline: 1px solid #00BCD4; - outline-offset: -1px; - } - .is-focused & { border-color: darken(#DDDDDD, 15%); } - .is-open & { border-radius: .25rem .25rem 0 0; } - .is-flipped.is-open & { border-radius: 0 0 .25rem .25rem; } + .is-focused & { border-color: darken($choices-keyline-color, 15%); } + .is-open & { border-radius: $choices-border-radius $choices-border-radius 0 0; } + .is-flipped.is-open & { border-radius: 0 0 $choices-border-radius $choices-border-radius; } } .choices__list { @@ -104,26 +120,26 @@ h1, h2, h3, h4, h5, h6 { .choices__list--single { display: inline-block; - padding: .4rem; + .choices__item { padding: .4rem; } } .choices__list--multiple { display: inline; .choices__item { display: inline-block; - border-radius: 2rem; + border-radius: $choices-border-radius-item; padding: .4rem 1rem; font-size: 1.2rem; margin-right: .375rem; margin-bottom: .375rem; - background-color: #00BCD4; - border: 1px solid darken(#00BCD4, 5%); + background-color: $choices-primary-color; + border: 1px solid darken($choices-primary-color, 5%); color: #FFFFFF; word-break: break-all; - &.is-selected { background-color: darken(#00BCD4, 5%); } + &.is-selected { background-color: darken($choices-primary-color, 5%); } .is-disabled & { - background-color: darken(#DDDDDD, 15%); - border: 1px solid darken(#DDDDDD, 20%); + background-color: $choices-disabled-color; + border: 1px solid darken($choices-disabled-color, 5%); } } } @@ -133,23 +149,23 @@ h1, h2, h3, h4, h5, h6 { z-index: 1; position: absolute; width: 100%; - background-color: #FFFFFF; - border: 1px solid #DDDDDD; + background-color: $choices-bg-color-dropdown; + border: 1px solid $choices-keyline-color; top: 100%; margin-top: -1px; - border-bottom-left-radius: .25rem; - border-bottom-right-radius: .25rem; + border-bottom-left-radius: $choices-border-radius; + border-bottom-right-radius: $choices-border-radius; max-height: 300px; overflow: auto; will-change: scroll-position; &.is-active { display: block; } - + .choices__item { padding: 1rem; font-size: 1.4rem; &.is-selected { opacity: .5; - &:hover { background-color: #FFFFFF; } + &:hover { background-color: $choices-bg-color-dropdown; } } } .choices__item--selectable { @@ -188,7 +204,7 @@ h1, h2, h3, h4, h5, h6 { font-weight: 600; font-size: 1.2rem; padding: 1rem; - border-bottom: 1px solid #EAEAEA; + border-bottom: 1px solid lighten($choices-keyline-color, 10%); color: lighten(#333, 30%); } } @@ -205,4 +221,7 @@ h1, h2, h3, h4, h5, h6 { max-width: 100%; padding: .4rem 0 .4rem .2rem; &:focus { outline: 0; } -} \ No newline at end of file +} + + +/*===== End of Choices ======*/ \ No newline at end of file diff --git a/index.html b/index.html index 6afdd9f..9ab8733 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@

Choices

+

Text inputs