Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
487 righe
14 KiB
487 righe
14 KiB
@import "../../node_modules/compass-mixins/lib/compass/css3/box-sizing"; |
|
@import "../../node_modules/compass-mixins/lib/compass/css3/images"; |
|
@import "../../node_modules/compass-mixins/lib/compass/css3/user-interface"; |
|
|
|
@import "../../node_modules/sass-svg-uri/_svg-uri.scss"; |
|
|
|
@import "../../node_modules/bootstrap/scss/functions"; |
|
@import "../../node_modules/bootstrap/scss/variables"; |
|
@import "../../node_modules/bootstrap/scss/mixins"; |
|
|
|
|
|
$chosen-gray-darkest: $gray-900; |
|
$chosen-gray-darker: $gray-700; |
|
$chosen-gray-dark: $gray-600; |
|
$chosen-gray: $gray-500; |
|
$chosen-gray-light: $gray-400; |
|
$chosen-gray-lighter: $gray-300; |
|
$chosen-gray-lightest: $gray-100; |
|
$chosen-success: $success; |
|
$chosen-danger: $danger; |
|
|
|
$chosen-background: $input-bg; |
|
$chosen-border: 1px solid $input-border-color; |
|
$chosen-border-color: $input-focus-border-color; |
|
$chosen-border-radius: $input-border-radius; |
|
$chosen-multi-border-radius: $chosen-border-radius; |
|
$chosen-box-shadow: none; |
|
$chosen-drop-border: $input-focus-border-color; |
|
$chosen-drop-box-shadow: 0 4px 5px 0 rgba(0,0,0,.075), 0 2px 5px 0 $input-focus-box-shadow; |
|
$chosen-drop-zindex: 1060; |
|
$chosen-focus-border: 1px solid $input-focus-border-color; |
|
$chosen-focus-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px $chosen-border-color; |
|
$chosen-focus-transition: border linear 0ms, box-shadow linear 0ms; |
|
$chosen-placeholder-color: $input-placeholder-color; |
|
$chosen-height: $input-height; |
|
$chosen-multi-height: $input-height; |
|
$chosen-svg-color: $chosen-gray; |
|
$chosen-svg-color-selected: $chosen-gray-darker; |
|
$chosen-svg-up: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"; |
|
$chosen-svg-down: "M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"; |
|
$chosen-svg-search: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"; |
|
$chosen-svg-selected: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"; |
|
$chosen-svg-deselect: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"; |
|
|
|
$chosen-svg-close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"; |
|
$chosen-svg-close-color: $chosen-danger; |
|
$chosen-svg-close-color-hover: darken($chosen-danger, 20%); |
|
|
|
.chosen-select, |
|
.chosen-select-deselect { |
|
width: 100%; |
|
} |
|
.chosen-container { |
|
display: inline-block; |
|
position: relative; |
|
width: 100% !important; |
|
font-size: $font-size-base; |
|
text-align: left; |
|
vertical-align: middle; |
|
.chosen-drop { |
|
background: $chosen-background; |
|
border: 1px solid $chosen-drop-border; |
|
@include border-bottom-radius($chosen-border-radius); |
|
@include box-shadow($chosen-drop-box-shadow); |
|
margin-top: -1px; |
|
position: absolute; |
|
top: 100%; |
|
left: -9000px; |
|
z-index: $chosen-drop-zindex; |
|
} |
|
&.chosen-with-drop .chosen-drop { |
|
left: 0; |
|
right: 0; |
|
} |
|
.chosen-results { |
|
margin: 0; |
|
position: relative; |
|
max-height: 15rem; |
|
padding: .5rem 0 0 0; |
|
color: $chosen-gray-dark; |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
-webkit-overflow-scrolling: touch; |
|
li { |
|
display: none; |
|
line-height: $line-height-base; |
|
list-style: none; |
|
margin: 0; |
|
padding: .25rem .25rem .25rem 1.5rem; |
|
em { |
|
font-style: normal; |
|
color: $chosen-gray-dark; |
|
} |
|
&.group-result { |
|
display: list-item; |
|
cursor: default; |
|
padding-left: .75rem; |
|
color: $chosen-gray; |
|
font-weight: normal; |
|
text-transform: uppercase; |
|
} |
|
&.group-option { |
|
padding-left: 1.5rem; |
|
} |
|
&.active-result { |
|
cursor: pointer; |
|
display: list-item; |
|
} |
|
&.result-selected { |
|
color: $chosen-gray-darker; |
|
&:before { |
|
display: inline-block; |
|
position: relative; |
|
top: .3rem; |
|
width: 1.25rem; |
|
height: 1.25rem; |
|
margin-left: -1.25rem; |
|
content: ""; |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-color-selected}' d='#{$chosen-svg-selected}'/></svg>"); |
|
background-size: 1.25rem 1.25rem; |
|
background-position: center center; |
|
background-repeat: no-repeat; |
|
} |
|
} |
|
&.highlighted { |
|
background-color: $link-color; |
|
background-image: none; |
|
color: white; |
|
&:before { |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='#{$chosen-svg-selected}'/></svg>"); |
|
} |
|
em { |
|
background: transparent; |
|
color: rgba(255,255,255,.8); |
|
} |
|
} |
|
&.disabled-result { |
|
display: list-item; |
|
color: $chosen-gray-light; |
|
} |
|
} |
|
.no-results { |
|
display: list-item; |
|
padding: .25rem 0 1rem 1.065rem; |
|
color: $chosen-danger; |
|
} |
|
} |
|
.chosen-results-scroll { |
|
background: white; |
|
margin: 0 .25rem; |
|
position: absolute; |
|
text-align: center; |
|
width: 20rem; |
|
z-index: 1; |
|
span { |
|
display: inline-block; |
|
height: $line-height-base; // 17px; |
|
text-indent: -5000px; |
|
width: .5rem; |
|
} |
|
} |
|
} |
|
.chosen-container-single { |
|
.chosen-single { |
|
background-color: $chosen-background; |
|
background-clip: padding-box; |
|
border: $chosen-border; |
|
@include border-top-radius($chosen-border-radius); |
|
@include border-bottom-radius($chosen-border-radius); |
|
@include box-shadow($chosen-box-shadow); |
|
color: $chosen-gray-dark; |
|
display: block; |
|
height: $chosen-height; |
|
overflow: hidden; |
|
line-height: $chosen-height; |
|
padding: 0 0 0 .75rem; |
|
position: relative; |
|
text-decoration: none; |
|
white-space: nowrap; |
|
abbr { |
|
display: inline-block; |
|
position: absolute; |
|
top: .45rem; |
|
right: 2.5rem; |
|
width: 1.5rem; |
|
height: 1.5rem; |
|
cursor: pointer; |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-close-color}' d='#{$chosen-svg-deselect}'/></svg>"); |
|
background-size: 1.5rem 1.5rem; |
|
background-position: center center; |
|
background-repeat: no-repeat; |
|
&:hover { |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-close-color-hover}' d='#{$chosen-svg-deselect}'/></svg>"); |
|
} |
|
} |
|
span { |
|
display: block; |
|
margin-right: 1.5rem; |
|
text-overflow: ellipsis; |
|
} |
|
&.chosen-disabled .chosen-single abbr:hover { |
|
background-position: right 2px; |
|
} |
|
div { |
|
display: block; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
width: 2rem; |
|
height: 100%; |
|
padding-left: .5rem; |
|
background-color: $chosen-background; |
|
&:after { |
|
display: inline-block; |
|
position: relative; |
|
top: .25rem; |
|
left: -1rem; |
|
width: 2rem; |
|
height: 2rem; |
|
content: ""; |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-color}' d='#{$chosen-svg-down}'/></svg>"); |
|
background-size: 2rem 2rem; |
|
background-position: center center; |
|
background-repeat: no-repeat; |
|
} |
|
} |
|
} |
|
.chosen-default { |
|
color: $chosen-gray; |
|
} |
|
a:not([href]):not([tabindex]) { |
|
color: $chosen-placeholder-color !important; |
|
} |
|
a:not([href]):not([tabindex]).chosen-single:not(.chosen-default) { |
|
color: $chosen-gray-dark !important; |
|
} |
|
.chosen-search-input { |
|
display: none; |
|
border: none; |
|
} |
|
.chosen-search { |
|
margin: 0; |
|
padding: .5rem .5rem 0 .5rem; |
|
position: relative; |
|
white-space: nowrap; |
|
z-index: $zindex-dropdown; |
|
&:after { |
|
display: inline-block; |
|
position: relative; |
|
top: .365rem; |
|
left: -1.75rem; |
|
width: 1.25rem; |
|
height: 1.25rem; |
|
content: ""; |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-color}' d='#{$chosen-svg-search}'/></svg>"); |
|
background-size: 1.25rem 1.25rem; |
|
background-position: center center; |
|
background-repeat: no-repeat; |
|
} |
|
input[type="text"] { |
|
background-color: $chosen-gray-lightest; |
|
border: $chosen-border; |
|
outline: none; |
|
@include border-top-radius($chosen-border-radius); |
|
@include border-bottom-radius($chosen-border-radius); |
|
@include box-shadow($chosen-box-shadow); |
|
padding: .25rem 1rem .25rem .5rem; |
|
width: 100%; |
|
} |
|
} |
|
.chosen-drop { |
|
margin-top: -1px; |
|
@include border-bottom-radius($chosen-border-radius); |
|
background-clip: padding-box; |
|
} |
|
} |
|
.chosen-container-single-nosearch { |
|
.chosen-search { |
|
display: none; |
|
} |
|
} |
|
.chosen-container-multi { |
|
.chosen-choices { |
|
background-color: $chosen-background; |
|
border: $chosen-border; |
|
@include border-top-radius($chosen-multi-border-radius); |
|
@include border-bottom-radius($chosen-multi-border-radius); |
|
@include box-shadow($chosen-box-shadow); |
|
cursor: text; |
|
height: auto !important; |
|
margin: 0; |
|
overflow: hidden; |
|
padding: 0; |
|
position: relative; |
|
li { |
|
float: left; |
|
list-style: none; |
|
} |
|
.search-field { |
|
margin: 0; |
|
padding: 0; |
|
white-space: nowrap; |
|
input[type="text"] { |
|
background: transparent !important; |
|
border: 0 !important; |
|
@include box-shadow(none); |
|
color: $chosen-placeholder-color; |
|
height: $chosen-multi-height; |
|
margin: 0; |
|
padding: 0 0 0 .75rem; |
|
outline: 0; |
|
width: 100% !important; |
|
} |
|
.default { |
|
color: $chosen-gray-light; |
|
} |
|
} |
|
.search-choice { |
|
background-clip: padding-box; |
|
position: relative; |
|
margin: .35rem 0 0 .5rem; |
|
padding: .25rem 1.5rem .25rem .25rem; |
|
border: $chosen-border; |
|
background-color: $chosen-gray-lightest; |
|
@include border-top-radius($chosen-border-radius); |
|
@include border-bottom-radius($chosen-border-radius); |
|
cursor: default; |
|
font-size: $font-size-sm; |
|
line-height: 1; |
|
color: $chosen-gray-dark; |
|
.search-choice-close { |
|
display: inline-block; |
|
position: absolute; |
|
top: .2rem; |
|
right: .125rem; |
|
width: 1rem; |
|
height: 1rem; |
|
cursor: pointer; |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-close-color}' d='#{$chosen-svg-close}'/></svg>"); |
|
background-size: 1rem 1rem; |
|
background-position: center center; |
|
background-repeat: no-repeat; |
|
&:hover { |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-close-color-hover}' d='#{$chosen-svg-close}'/></svg>"); |
|
} |
|
} |
|
} |
|
.search-choice-focus { |
|
background: $chosen-gray-lighter; |
|
.search-choice-close { |
|
background-position: right -11px; |
|
} |
|
} |
|
} |
|
.chosen-drop { |
|
.result-selected { |
|
display: none; |
|
} |
|
} |
|
} |
|
.chosen-container-active { |
|
.chosen-single { |
|
border: $chosen-focus-border; |
|
@include box-shadow($chosen-focus-box-shadow); |
|
@include transition($chosen-focus-transition); |
|
} |
|
&.chosen-with-drop .chosen-single { |
|
background-color: $input-bg; |
|
border: $chosen-focus-border; |
|
@include border-bottom-radius(0); |
|
@include box-shadow($chosen-focus-box-shadow); |
|
@include transition($chosen-focus-transition); |
|
div { |
|
&:after { |
|
display: inline-block; |
|
position: relative; |
|
top: .25rem; |
|
left: -1rem; |
|
width: 2rem; |
|
height: 2rem; |
|
content: ""; |
|
background-image: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$chosen-svg-color}' d='#{$chosen-svg-up}'/></svg>"); |
|
background-size: 2rem 2rem; |
|
background-position: center center; |
|
background-repeat: no-repeat; |
|
} |
|
} |
|
} |
|
.chosen-choices { |
|
border: $chosen-focus-border; |
|
@include border-bottom-radius(0); |
|
@include box-shadow($chosen-focus-box-shadow); |
|
@include transition($chosen-focus-transition); |
|
.search-field input[type="text"] { |
|
color: $chosen-gray-dark !important; |
|
} |
|
} |
|
&.chosen-with-drop .chosen-choices { |
|
@include border-bottom-radius(0); |
|
} |
|
&.chosen-with-drop { |
|
.chosen-search-input { |
|
display: inline-block; |
|
} |
|
} |
|
} |
|
.chosen-disabled { |
|
cursor: default; |
|
opacity: .5 !important; |
|
.chosen-single { |
|
cursor: default; |
|
} |
|
.chosen-choices .search-choice .search-choice-close { |
|
cursor: default; |
|
} |
|
} |
|
.chosen-container-optgroup-clickable { |
|
li { |
|
&.group-result { |
|
text-transform: none !important; |
|
&:hover { |
|
background-color: $link-color; |
|
color: white; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
} |
|
.chosen-container { |
|
&.is-valid, |
|
&:valid { |
|
.chosen-single, |
|
.chosen-choices, |
|
.chosen-drop { |
|
border-color: $chosen-success; |
|
} |
|
} |
|
&.is-invalid, |
|
&:invalid { |
|
.chosen-single, |
|
.chosen-choices, |
|
.chosen-drop { |
|
border-color: $chosen-danger; |
|
} |
|
} |
|
} |
|
input[type="text"].chosen-focus-input { |
|
position: absolute; |
|
top: -9000px; |
|
width: 0; |
|
height: 0; |
|
margin: 0; |
|
padding: 0; |
|
background: transparent !important; |
|
border: 0 !important; |
|
@include box-shadow(none); |
|
outline: 0; |
|
} |
|
.input-group { |
|
&:nth-of-type(1) { |
|
.chosen-container { |
|
.chosen-choices { |
|
border-top-left-radius: 0; |
|
border-bottom-left-radius: 0; |
|
} |
|
} |
|
} |
|
&:not(:nth-of-type(1)) { |
|
.chosen-container { |
|
.chosen-choices { |
|
border-top-right-radius: 0; |
|
border-bottom-right-radius: 0; |
|
} |
|
} |
|
.input-group-prepend { |
|
.input-group-text { |
|
border-top-right-radius: $input-border-radius; |
|
border-bottom-right-radius: $input-border-radius; |
|
} |
|
} |
|
} |
|
.chosen-container { |
|
position: relative; |
|
flex: 1 1 auto; |
|
width: 1% !important; |
|
} |
|
}
|
|
|