deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-08 00:42:15 +02:00
Code Issues Projects Releases Wiki Activity

Ability to override choices selector names

Browse source
This commit is contained in:
Josh Johnson 2016-08-26 09:02:32 +01:00
parent f6d1723485
commit 3cd5bf8843
3 changed files with 62 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/styles/css/choices.css
View file

@ -2,13 +2,15 @@
= Choices = = Choices =
===============================*/ ===============================*/
.choices { .choices {
font-size: 16px;
position: relative; position: relative;
margin-bottom: 24px; } margin-bottom: 24px;
font-size: 16px; }
.choices:focus {
outline: none; }
.choices:last-child { .choices:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input { .choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
background-color: #eaeaea; background-color: #EAEAEA;
cursor: not-allowed; cursor: not-allowed;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -16,8 +18,6 @@
user-select: none; } user-select: none; }
.choices.is-disabled .choices__item { .choices.is-disabled .choices__item {
cursor: not-allowed; } cursor: not-allowed; }
.choices:focus {
outline: none; }
.choices[data-type*="select-one"] { .choices[data-type*="select-one"] {
cursor: pointer; } cursor: pointer; }
@ -48,9 +48,6 @@
opacity: 1; } opacity: 1; }
.choices[data-type*="select-one"] .choices__button:focus { .choices[data-type*="select-one"] .choices__button:focus {
box-shadow: 0px 0px 0px 2px #00BCD4; } box-shadow: 0px 0px 0px 2px #00BCD4; }
.choices[data-type*="select-one"].is-open:after {
border-color: transparent transparent #333333 transparent;
margin-top: -7.5px; }
.choices[data-type*="select-one"]:after { .choices[data-type*="select-one"]:after {
content: ""; content: "";
height: 0; height: 0;
@ -63,6 +60,9 @@
top: 50%; top: 50%;
margin-top: -2.5px; margin-top: -2.5px;
pointer-events: none; } pointer-events: none; }
.choices[data-type*="select-one"].is-open:after {
border-color: transparent transparent #333333 transparent;
margin-top: -7.5px; }
.choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner { .choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner {
cursor: text; } cursor: text; }
@ -222,12 +222,11 @@
outline: none; } outline: none; }
.choices__input { .choices__input {
background-color: #f9f9f9;
font-size: 14px;
padding: 0;
margin-bottom: 5px;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
background-color: #f9f9f9;
font-size: 14px;
margin-bottom: 5px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
max-width: 100%; max-width: 100%;

2
assets/styles/css/choices.min.css vendored
View file

File diff suppressed because one or more lines are too long

95
assets/styles/scss/choices.scss
View file

@ -1,10 +1,16 @@
/*=============================== /*===============================
= Choices = = Choices =
===============================*/ ===============================*/
$choices-selector: 'choices' !default;
$choices-font-size-lg: 16px !default;
$choices-font-size-md: 14px !default;
$choices-font-size-sm: 12px !default;
$choices-guttering: 24px !default; $choices-guttering: 24px !default;
$choices-border-radius: 2.5px !default; $choices-border-radius: 2.5px !default;
$choices-border-radius-item: 20px !default; $choices-border-radius-item: 20px !default;
$choices-bg-color: #f9f9f9 !default; $choices-bg-color: #f9f9f9 !default;
$choices-bg-color-disabled: #EAEAEA !default;
$choices-bg-color-dropdown: #FFFFFF !default; $choices-bg-color-dropdown: #FFFFFF !default;
$choices-text-color: #333333 !default; $choices-text-color: #333333 !default;
$choices-keyline-color: #DDDDDD !default; $choices-keyline-color: #DDDDDD !default;
@ -16,26 +22,26 @@ $choices-button-dimension: 8px !default;
$choices-button-offset: 8px !default; $choices-button-offset: 8px !default;
$choices-press-to-select-text: 'Press to select' !default; $choices-press-to-select-text: 'Press to select' !default;
.choices { .#{$choices-selector} {
font-size: 16px;
position: relative; position: relative;
margin-bottom: $choices-guttering; margin-bottom: $choices-guttering;
font-size: $choices-font-size-lg;
&:focus { outline: none; }
&:last-child { margin-bottom: 0; } &:last-child { margin-bottom: 0; }
&.is-disabled { &.is-disabled {
.choices__inner, .choices__input { .#{$choices-selector}__inner, .#{$choices-selector}__input {
background-color: lighten(#DDDDDD, 5%); background-color: $choices-bg-color-disabled;
cursor: not-allowed; cursor: not-allowed;
user-select: none; user-select: none;
} }
.choices__item { cursor: not-allowed; } .#{$choices-selector}__item { cursor: not-allowed; }
} }
&:focus { outline: none; }
} }
.choices[data-type*="select-one"] { .#{$choices-selector}[data-type*="select-one"] {
cursor: pointer; cursor: pointer;
.choices__inner { padding-bottom: 7.5px; } .#{$choices-selector}__inner { padding-bottom: 7.5px; }
.choices__input { .#{$choices-selector}__input {
display: block; display: block;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
@ -43,7 +49,7 @@ $choices-press-to-select-text: 'Press to select' !default;
background-color: #FFFFFF; background-color: #FFFFFF;
margin: 0; margin: 0;
} }
.choices__button { .#{$choices-selector}__button {
background-image: url($choices-button-icon-path + '/cross-inverse.svg'); background-image: url($choices-button-icon-path + '/cross-inverse.svg');
padding: 0; padding: 0;
background-size: 8px; background-size: 8px;
@ -60,10 +66,6 @@ $choices-press-to-select-text: 'Press to select' !default;
&:hover, &:focus { opacity: 1; } &:hover, &:focus { opacity: 1; }
&:focus { box-shadow: 0px 0px 0px 2px $choices-highlight-color; } &:focus { box-shadow: 0px 0px 0px 2px $choices-highlight-color; }
} }
&.is-open:after {
border-color: transparent transparent $choices-text-color transparent;
margin-top: -7.5px;
}
&:after { &:after {
content: ""; content: "";
height: 0; height: 0;
@ -77,11 +79,15 @@ $choices-press-to-select-text: 'Press to select' !default;
margin-top: -2.5px; margin-top: -2.5px;
pointer-events: none; pointer-events: none;
} }
&.is-open:after {
border-color: transparent transparent $choices-text-color transparent;
margin-top: -7.5px;
}
} }
.choices[data-type*="select-multiple"], .choices[data-type*="text"] { .#{$choices-selector}[data-type*="select-multiple"], .#{$choices-selector}[data-type*="text"] {
.choices__inner { cursor: text; } .#{$choices-selector}__inner { cursor: text; }
.choices__button { .#{$choices-selector}__button {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin-top: 0; margin-top: 0;
@ -99,7 +105,7 @@ $choices-press-to-select-text: 'Press to select' !default;
} }
} }
.choices__inner { .#{$choices-selector}__inner {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
@ -107,7 +113,7 @@ $choices-press-to-select-text: 'Press to select' !default;
padding: 7.5px 7.5px 3.75px; padding: 7.5px 7.5px 3.75px;
border: 1px solid $choices-keyline-color; border: 1px solid $choices-keyline-color;
border-radius: $choices-border-radius; border-radius: $choices-border-radius;
font-size: 14px; font-size: $choices-font-size-md;
min-height: 44px; min-height: 44px;
overflow: hidden; overflow: hidden;
.is-focused &, .is-open & { border-color: darken($choices-keyline-color, 15%); } .is-focused &, .is-open & { border-color: darken($choices-keyline-color, 15%); }
@ -115,27 +121,27 @@ $choices-press-to-select-text: 'Press to select' !default;
.is-flipped.is-open & { border-radius: 0 0 $choices-border-radius $choices-border-radius; } .is-flipped.is-open & { border-radius: 0 0 $choices-border-radius $choices-border-radius; }
} }
.choices__list { .#{$choices-selector}__list {
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
.choices__list--single { .#{$choices-selector}__list--single {
display: inline-block; display: inline-block;
padding: 4px 16px 4px 4px; padding: 4px 16px 4px 4px;
width: 100%; width: 100%;
.choices__item { width: 100%; } .#{$choices-selector}__item { width: 100%; }
} }
.choices__list--multiple { .#{$choices-selector}__list--multiple {
display: inline; display: inline;
.choices__item { .#{$choices-selector}__item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border-radius: $choices-border-radius-item; border-radius: $choices-border-radius-item;
padding: 4px 10px; padding: 4px 10px;
font-size: 12px; font-size: $choices-font-size-sm;
font-weight: 500; font-weight: 500;
margin-right: 3.75px; margin-right: 3.75px;
margin-bottom: 3.75px; margin-bottom: 3.75px;
@ -155,7 +161,7 @@ $choices-press-to-select-text: 'Press to select' !default;
} }
} }
.choices__list--dropdown { .#{$choices-selector}__list--dropdown {
display: none; display: none;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
@ -168,7 +174,7 @@ $choices-press-to-select-text: 'Press to select' !default;
border-bottom-right-radius: $choices-border-radius; border-bottom-right-radius: $choices-border-radius;
overflow: hidden; overflow: hidden;
&.is-active { display: block; } &.is-active { display: block; }
.is-open & { border-color: darken(#DDDDDD, 15%); } .is-open & { border-color: darken($choices-keyline-color, 15%); }
.is-flipped & { .is-flipped & {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
@ -176,24 +182,24 @@ $choices-press-to-select-text: 'Press to select' !default;
margin-bottom: -1px; margin-bottom: -1px;
border-radius: .25rem .25rem 0 0; border-radius: .25rem .25rem 0 0;
} }
.choices__list { .#{$choices-selector}__list {
position: relative; position: relative;
max-height: 300px; max-height: 300px;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
will-change: scroll-position; will-change: scroll-position;
} }
.choices__item { .#{$choices-selector}__item {
position: relative; position: relative;
padding: 10px; padding: 10px;
font-size: 14px; font-size: $choices-font-size-md;
} }
.choices__item--selectable { .#{$choices-selector}__item--selectable {
@media (min-width: 640px) { @media (min-width: 640px) {
padding-right: 100px; padding-right: 100px;
&:after { &:after {
content: $choices-press-to-select-text; content: $choices-press-to-select-text;
font-size: 12px; font-size: $choices-font-size-sm;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 10px; right: 10px;
@ -208,25 +214,25 @@ $choices-press-to-select-text: 'Press to select' !default;
} }
} }
.choices__item { cursor: default; } .#{$choices-selector}__item { cursor: default; }
.choices__item--selectable { cursor: pointer; } .#{$choices-selector}__item--selectable { cursor: pointer; }
.choices__item--disabled { .#{$choices-selector}__item--disabled {
cursor: not-allowed; cursor: not-allowed;
user-select: none; user-select: none;
opacity: .5; opacity: .5;
} }
.choices__group { .#{$choices-selector}__group {
.choices__heading { .#{$choices-selector}__heading {
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: $choices-font-size-sm;
padding: 10px; padding: 10px;
border-bottom: 1px solid lighten($choices-keyline-color, 10%); border-bottom: 1px solid lighten($choices-keyline-color, 10%);
color: lighten(#333, 30%); color: lighten(#333, 30%);
} }
} }
.choices__button { .#{$choices-selector}__button {
text-indent: -9999px; text-indent: -9999px;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
@ -238,13 +244,12 @@ $choices-press-to-select-text: 'Press to select' !default;
&:focus { outline: none; } &:focus { outline: none; }
} }
.choices__input { .#{$choices-selector}__input {
background-color: mix(#000000, #FFFFFF, 2.5%);
font-size: 14px;
padding: 0;
margin-bottom: 5px;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
background-color: mix(#000000, #FFFFFF, 2.5%);
font-size: $choices-font-size-md;
margin-bottom: 5px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
max-width: 100%; max-width: 100%;
@ -252,6 +257,6 @@ $choices-press-to-select-text: 'Press to select' !default;
&:focus { outline: 0; } &:focus { outline: 0; }
} }
.choices__placeholder { opacity: .5; } .#{$choices-selector}__placeholder { opacity: .5; }
/*===== End of Choices ======*/ /*===== End of Choices ======*/