Refine choices styling

libraries/Choices/assets/styles/css/choices.css

@@ -3,7 +3,7 @@
 ===============================*/
 .choices {
   position: relative;
-  margin-bottom: 24px;
+  margin-bottom: 1rem;
   font-size: 1.25rem; }
   .choices:focus {
     outline: none; }
@@ -24,7 +24,7 @@
     display: block;
     width: 100%;
     padding: 10px;
-    border-bottom: 1px solid #DDDDDD;
+    border-bottom: 1px solid #999;
     background-color: #FFFFFF;
     margin: 0; }
   .choices[data-type*="select-one"] .choices__button {
@@ -83,13 +83,13 @@
   vertical-align: top;
   width: 100%;
   padding: 7.5px 7.5px 3.75px;
-  border: 1px solid #DDDDDD;
+  border: 1px solid #999;
   border-radius: 0;
   font-size: 1rem;
   min-height: 44px;
   overflow: hidden; }
   .is-focused .choices__inner, .is-open .choices__inner {
-    border-color: #b7b7b7; }
+    border-color: #737373; }
   .is-open .choices__inner {
     border-radius: 0 0 0 0; }
   .is-flipped.is-open .choices__inner {
@@ -102,7 +102,6 @@
 
 .choices__list--single {
   display: inline-block;
-  padding: 4px 16px 4px 4px;
   width: 100%; }
   .choices__list--single .choices__item {
     width: 100%; }
@@ -137,7 +136,7 @@
   position: absolute;
   width: 100%;
   background-color: #f8f8f8;
-  border: 1px solid #DDDDDD;
+  border: 1px solid #999;
   top: 100%;
   margin-top: -1px;
   border-bottom-left-radius: 0;
@@ -147,7 +146,7 @@
   .choices__list--dropdown.is-active {
     display: block; }
   .is-open .choices__list--dropdown {
-    border-color: #b7b7b7; }
+    border-color: #737373; }
   .is-flipped .choices__list--dropdown {
     top: auto;
     bottom: 100%;
@@ -195,7 +194,7 @@
   font-weight: 600;
   font-size: 0.8rem;
   padding: 10px;
-  border-bottom: 1px solid #f7f7f7;
+  border-bottom: 1px solid #b3b3b3;
   color: gray; }
 
 .choices__button {

libraries/Choices/assets/styles/css/choices.min.css

-.choices{position:relative;margin-bottom:24px;font-size:1.25rem}.choices:focus{outline:none}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{margin-left:.25rem;height:20px;width:20px;opacity:.5}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #007c82}.choices[data-type*=select-one] .choices__button:before{content:'x ';font-size:.8rem;font-family:'EBI-Functional';padding:.5rem .25rem;display:inline-block}.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:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;color:#f8f8f8;margin-top:0;margin-bottom:0;width:20px;line-height:1}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices[data-type*=select-multiple] .choices__button:before,.choices[data-type*=text] .choices__button:before{content:'x ';font-size:.8rem;font-family:'EBI-Functional';padding:.5rem .25rem;display:inline-block}.choices__inner{display:inline-block;vertical-align:top;width:100%;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:0;font-size:1rem;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-flipped.is-open .choices__inner,.is-open .choices__inner{border-radius:0 0 0 0}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:0;padding:4px 10px;font-size:.8rem;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#007c82;border:1px solid #006469;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.choices__list--multiple .choices__item.is-highlighted{background-color:#006469;border:1px solid #004b4f}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#f8f8f8;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;word-break:break-all}.choices__list--dropdown.is-active{display:block}.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__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px;font-size:1rem}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after{content:attr(data-select-text);font-size:.8rem;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:.8rem;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{-webkit-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer;overflow:hidden;height:1.25rem}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;font-size:.8rem;margin-bottom:5px;border:0;max-width:100%;box-shadow:none}.choices__input:focus{outline:0}.choices__placeholder{opacity:.5}
\ No newline at end of file
+.choices{position:relative;margin-bottom:1rem;font-size:1.25rem}.choices:focus{outline:none}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #999;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{margin-left:.25rem;height:20px;width:20px;opacity:.5}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #007c82}.choices[data-type*=select-one] .choices__button:before{content:'x ';font-size:.8rem;font-family:'EBI-Functional';padding:.5rem .25rem;display:inline-block}.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:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;color:#f8f8f8;margin-top:0;margin-bottom:0;width:20px;line-height:1}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices[data-type*=select-multiple] .choices__button:before,.choices[data-type*=text] .choices__button:before{content:'x ';font-size:.8rem;font-family:'EBI-Functional';padding:.5rem .25rem;display:inline-block}.choices__inner{display:inline-block;vertical-align:top;width:100%;padding:7.5px 7.5px 3.75px;border:1px solid #999;border-radius:0;font-size:1rem;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#737373}.is-flipped.is-open .choices__inner,.is-open .choices__inner{border-radius:0 0 0 0}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;width:100%}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:0;padding:4px 10px;font-size:.8rem;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#007c82;border:1px solid #006469;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.choices__list--multiple .choices__item.is-highlighted{background-color:#006469;border:1px solid #004b4f}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#f8f8f8;border:1px solid #999;top:100%;margin-top:-1px;border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;word-break:break-all}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#737373}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px;font-size:1rem}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after{content:attr(data-select-text);font-size:.8rem;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:.8rem;padding:10px;border-bottom:1px solid #b3b3b3;color:gray}.choices__button{-webkit-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer;overflow:hidden;height:1.25rem}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;font-size:.8rem;margin-bottom:5px;border:0;max-width:100%;box-shadow:none}.choices__input:focus{outline:0}.choices__placeholder{opacity:.5}
\ No newline at end of file

libraries/Choices/assets/styles/scss/choices.scss

@@ -8,14 +8,14 @@ $choices-selector: 'choices' !default;
 $choices-font-size-lg: 1.25rem !default;
 $choices-font-size-md: 1rem !default;
 $choices-font-size-sm: .8rem !default;
-$choices-guttering: 24px !default;
+$choices-guttering: 1rem !default;
 $choices-border-radius: 0 !default;
 $choices-border-radius-item: 0 !default;
 $choices-bg-color: #f9f9f9 !default;
 $choices-bg-color-disabled: $ebi-colour-light-grey;
 $choices-bg-color-dropdown: $ebi-colour-light;
 $choices-text-color: #333333 !default;
-$choices-keyline-color: #DDDDDD !default;
+$choices-keyline-color: $ebi-colour-medium-grey;
 $choices-primary-color: $primary-color;
 $choices-disabled-color: #eaeaea !default;
 $choices-highlight-color: $choices-primary-color !default;
@@ -136,7 +136,6 @@ $choices-button-offset: 8px !default;
 
 .#{$choices-selector}__list--single {
   display: inline-block;
-  padding: 4px 16px 4px 4px;
   width: 100%;
   .#{$choices-selector}__item { width: 100%; }
 }