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