| | .choices { |
| | position: relative; |
| | margin-bottom: 24px; |
| | font-size: 16px |
| | } |
| |
|
| | .choices:focus { |
| | outline: 0 |
| | } |
| |
|
| | .choices:last-child { |
| | margin-bottom: 0 |
| | } |
| |
|
| | .choices.is-disabled .choices__inner, |
| | .choices.is-disabled .choices__input { |
| | background-color: #eaeaea; |
| | cursor: not-allowed; |
| | -webkit-user-select: none; |
| | -ms-user-select: none; |
| | user-select: none |
| | } |
| |
|
| | .choices.is-disabled .choices__item { |
| | cursor: not-allowed |
| | } |
| |
|
| | .choices [hidden] { |
| | display: none !important |
| | } |
| |
|
| | .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 { |
| | background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); |
| | padding: 0; |
| | background-size: 8px; |
| | position: absolute; |
| | top: 50%; |
| | right: 0; |
| | margin-top: -10px; |
| | margin-right: 25px; |
| | height: 20px; |
| | width: 20px; |
| | border-radius: 10em; |
| | 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 #fb8c00 |
| | } |
| |
|
| | .choices[data-type*=select-one] .choices__item[data-value=''] .choices__button { |
| | display: none |
| | } |
| |
|
| | .choices[data-type*=select-one]:after { |
| | content: ''; |
| | height: 0; |
| | width: 0; |
| | border-style: solid; |
| | border-color: #333 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; |
| | margin-top: -7.5px |
| | } |
| |
|
| | .choices[data-type*=select-one][dir=rtl]:after { |
| | left: 11.5px; |
| | right: auto |
| | } |
| |
|
| | .choices[data-type*=select-one][dir=rtl] .choices__button { |
| | right: auto; |
| | left: 0; |
| | margin-left: 25px; |
| | margin-right: 0 |
| | } |
| |
|
| | .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; |
| | margin: 0 -4px 0 8px; |
| | padding-left: 16px; |
| | border-left: 1px solid #fb8c00; |
| | background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); |
| | background-size: 8px; |
| | width: 8px; |
| | line-height: 1; |
| | opacity: .75; |
| | border-radius: 0 |
| | } |
| |
|
| | .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__inner { |
| | display: inline-block; |
| | vertical-align: top; |
| | width: 100%; |
| | background-color: #f9f9f9; |
| | padding: 7.5px 7.5px 3.75px; |
| | border: 1px solid #ddd; |
| | border-radius: 2.5px; |
| | font-size: 14px; |
| | min-height: 44px; |
| | overflow: hidden |
| | } |
| |
|
| | .is-focused .choices__inner, |
| | .is-open .choices__inner { |
| | border-color: #b7b7b7 |
| | } |
| |
|
| | .is-open .choices__inner { |
| | border-radius: 2.5px 2.5px 0 0 |
| | } |
| |
|
| | .is-flipped.is-open .choices__inner { |
| | border-radius: 0 0 2.5px 2.5px |
| | } |
| |
|
| | .choices__list { |
| | margin: 0; |
| | padding-left: 0; |
| | list-style: none |
| | } |
| |
|
| | .choices__list--single { |
| | display: inline-block; |
| | padding: 4px 16px 4px 4px; |
| | width: 100% |
| | } |
| |
|
| | [dir=rtl] .choices__list--single { |
| | padding-right: 4px; |
| | padding-left: 16px |
| | } |
| |
|
| | .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: 20px; |
| | padding: 4px 10px; |
| | font-size: 12px; |
| | font-weight: 500; |
| | margin-right: 3.75px; |
| | margin-bottom: 3.75px; |
| | background-color: #fb8c00; |
| | border: 1px solid #fb8c00; |
| | color: #fff; |
| | word-break: break-all; |
| | box-sizing: border-box |
| | } |
| |
|
| | .choices__list--multiple .choices__item[data-deletable] { |
| | padding-right: 5px |
| | } |
| |
|
| | [dir=rtl] .choices__list--multiple .choices__item { |
| | margin-right: 0; |
| | margin-left: 3.75px |
| | } |
| |
|
| | .choices__list--multiple .choices__item.is-highlighted { |
| | background-color: #fb8c00; |
| | border: 1px solid #fb8c00 |
| | } |
| |
|
| | .is-disabled .choices__list--multiple .choices__item { |
| | background-color: #aaa; |
| | border: 1px solid #919191 |
| | } |
| |
|
| | .choices__list--dropdown { |
| | visibility: hidden; |
| | z-index: 1; |
| | position: absolute; |
| | width: 100%; |
| | background-color: #fff; |
| | border: 1px solid #ddd; |
| | top: 100%; |
| | margin-top: -1px; |
| | border-bottom-left-radius: 2.5px; |
| | border-bottom-right-radius: 2.5px; |
| | overflow: hidden; |
| | word-break: break-all; |
| | will-change: visibility |
| | } |
| |
|
| | .choices__list--dropdown.is-active { |
| | visibility: visible |
| | } |
| |
|
| | .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: 14px |
| | } |
| |
|
| | [dir=rtl] .choices__list--dropdown .choices__item { |
| | text-align: right |
| | } |
| |
|
| | @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: 12px; |
| | opacity: 0; |
| | position: absolute; |
| | right: 10px; |
| | top: 50%; |
| | transform: translateY(-50%) |
| | } |
| |
|
| | [dir=rtl] .choices__list--dropdown .choices__item--selectable { |
| | text-align: right; |
| | padding-left: 100px; |
| | padding-right: 10px |
| | } |
| |
|
| | [dir=rtl] .choices__list--dropdown .choices__item--selectable:after { |
| | right: auto; |
| | left: 10px |
| | } |
| | } |
| |
|
| | .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; |
| | -webkit-user-select: none; |
| | -ms-user-select: none; |
| | user-select: none; |
| | opacity: .5 |
| | } |
| |
|
| | .choices__heading { |
| | font-weight: 600; |
| | font-size: 12px; |
| | padding: 10px; |
| | border-bottom: 1px solid #f7f7f7; |
| | color: gray |
| | } |
| |
|
| | .choices__button { |
| | text-indent: -9999px; |
| | -webkit-appearance: none; |
| | -moz-appearance: none; |
| | appearance: none; |
| | border: 0; |
| | background-color: transparent; |
| | background-repeat: no-repeat; |
| | background-position: center; |
| | cursor: pointer |
| | } |
| |
|
| | .choices__button:focus, |
| | .choices__input:focus { |
| | outline: 0 |
| | } |
| |
|
| | .choices__input { |
| | display: inline-block; |
| | vertical-align: baseline; |
| | background-color: #f9f9f9; |
| | font-size: 14px; |
| | margin-bottom: 5px; |
| | border: 0; |
| | border-radius: 0; |
| | max-width: 100%; |
| | padding: 4px 0 4px 2px |
| | } |
| |
|
| | [dir=rtl] .choices__input { |
| | padding-right: 2px; |
| | padding-left: 0 |
| | } |
| |
|
| | .choices__placeholder { |
| | opacity: .5 |
| | } |