Created
February 13, 2013 21:14
-
-
Save Nerian/4948345 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @group Base */ | |
.chzn-container { | |
position: relative; | |
display: inline-block; | |
} | |
.chzn-container .chzn-drop { | |
background: #fff; | |
border: 1px solid #aaa; | |
border-top: 0; | |
position: absolute; | |
top: 29px; | |
left: 0; | |
@include box-shadow(0 4px 5px rgba(0,0,0,.15)); | |
z-index: 1010; | |
} | |
/* @end */ | |
/* @group Single Chosen */ | |
.chzn-container-single .chzn-single { | |
@include gradient-vertical-three-colors(#ffffff, #eeeeee, 50%, #f4f4f4); | |
border-radius: 5px; | |
@include background-clip(padding-box); | |
border: 1px solid #aaaaaa; | |
@include box-shadow(0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1)); | |
$transition: border linear .2s, box-shadow linear .2s; | |
@include transition($transition); | |
display: block; | |
overflow: hidden; | |
white-space: nowrap; | |
position: relative; | |
height: 23px; | |
line-height: 24px; | |
padding: 0 0 0 8px; | |
color: #444444; | |
text-decoration: none; | |
} | |
.chzn-container-single .chzn-default { | |
color: #999; | |
} | |
.chzn-container-single .chzn-single span { | |
margin-right: 26px; | |
display: block; | |
@include text-overflow() | |
} | |
.chzn-container-single .chzn-single abbr { | |
position: absolute; | |
top: 0; | |
right: 30px; | |
color: #444; | |
&:before { | |
content: '\00D7'; | |
font-weight: bold; | |
font-size: 20px; | |
line-height: $baseLineHeight; | |
} | |
} | |
.chzn-container-single .chzn-single abbr:hover, | |
.chzn-container-single.chzn-disabled .chzn-single abbr:hover { | |
color: #000; | |
} | |
.chzn-container-single .chzn-single div { | |
position: absolute; | |
right: 3px; | |
top: 0; | |
display: block; | |
height: 100%; | |
width: 18px; | |
} | |
.chzn-container-single .chzn-single div b { | |
&:after { | |
content: '\f078'; | |
font-family: FontAwesome; | |
} | |
display: block; | |
width: 100%; | |
height: 100%; | |
} | |
.chzn-container-single .chzn-search { | |
padding: 3px 4px; | |
position: relative; | |
margin: 0; | |
white-space: nowrap; | |
z-index: 1010; | |
color: #555; | |
&:after { | |
content: '\f002'; | |
font-family: FontAwesome; | |
position: relative; | |
right: 20px; | |
} | |
} | |
.chzn-container-single .chzn-search input { | |
@include gradient-vertical(#eee, #fff); | |
margin: 1px 0; | |
} | |
.chzn-container-single .chzn-drop { | |
border-radius: 0 0 4px 4px; | |
@include background-clip(padding-box); | |
} | |
/* @end */ | |
.chzn-container-single-nosearch .chzn-search input { | |
position: absolute; | |
left: -9000px; | |
} | |
/* @group Multi Chosen */ | |
.chzn-container-multi .chzn-choices { | |
background-color: $inputBackground; | |
border: 1px solid $inputBorder; | |
border-radius: $inputBorderRadius; | |
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); | |
$transition: border linear .2s, box-shadow linear .2s; | |
@include transition($transition); | |
margin: 0; | |
padding: 0; | |
cursor: text; | |
overflow: hidden; | |
height: auto !important; | |
position: relative; | |
} | |
.chzn-container-multi .chzn-choices li { | |
float: left; | |
list-style: none; | |
} | |
.chzn-container-multi .chzn-choices .search-field { | |
white-space: nowrap; | |
margin: 0; | |
padding: 0; | |
} | |
.chzn-container-multi .chzn-choices .search-field input { | |
color: #666; | |
background: transparent !important; | |
border: 0 !important; | |
font-size: 100%; | |
height: 15px; | |
padding: 5px; | |
margin: 1px 0; | |
outline: 0; | |
@include box-shadow(none); | |
} | |
.chzn-container-multi .chzn-choices .search-field .default { | |
color: #999; | |
} | |
.chzn-container-multi .chzn-choices .search-choice { | |
@include border-radius(3px); | |
@include background-clip(padding-box); | |
@include gradient-vertical-three-colors(#f4f4f4, #f0f0f0, 50%, #eeeeee); | |
@include box-shadow(0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05)); | |
color: #333; | |
border: 1px solid #aaaaaa; | |
line-height: 13px; | |
padding: 3px 20px 3px 5px; | |
margin: 3px 0 3px 5px; | |
position: relative; | |
cursor: default; | |
} | |
.chzn-container-multi .chzn-choices .search-choice.search-choice-disabled { | |
color: #999; | |
border: 1px solid #cccccc; | |
padding-right: 5px; | |
} | |
.chzn-container-multi .chzn-choices .search-choice-focus { | |
background: #d4d4d4; | |
} | |
.chzn-container-multi .chzn-choices .search-choice .search-choice-close { | |
position: absolute; | |
right: 3px; | |
top: 0; | |
color: #999; | |
&:before { | |
content: '\00D7'; | |
font-size: 20px; | |
font-weight: bold; | |
line-height: 14px; | |
text-shadow: 0 1px 0 #fff; | |
} | |
} | |
.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover, | |
.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close { | |
text-decoration: none; | |
cursor: pointer; | |
color: #333; | |
} | |
/* @end */ | |
/* @group Results */ | |
.chzn-container .chzn-results { | |
margin: 0 4px 4px 0; | |
max-height: 240px; | |
padding: 0 0 0 4px; | |
position: relative; | |
overflow-x: hidden; | |
overflow-y: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
.chzn-container-multi .chzn-results { | |
margin: -1px 0 0; | |
padding: 0; | |
} | |
.chzn-container .chzn-results li { | |
display: none; | |
line-height: 15px; | |
padding: 5px 6px; | |
margin: 0; | |
list-style: none; | |
} | |
.chzn-container .chzn-results .active-result { | |
cursor: pointer; | |
display: list-item; | |
} | |
.chzn-container .chzn-results .highlighted { | |
@include gradient-vertical( lighten($linkColor, 5%), darken($linkColor, 5%) ); | |
color: #fff; | |
} | |
.chzn-container .chzn-results li em { | |
background: #feffde; | |
font-style: normal; | |
} | |
.chzn-container .chzn-results .highlighted em { | |
background: transparent; | |
} | |
.chzn-container .chzn-results .no-results { | |
background: #f4f4f4; | |
display: list-item; | |
} | |
.chzn-container .chzn-results .group-result { | |
cursor: default; | |
color: #999; | |
font-weight: bold; | |
} | |
.chzn-container .chzn-results .group-option { | |
padding-left: 15px; | |
} | |
.chzn-container-multi .chzn-drop .result-selected { | |
display: none; | |
} | |
/* @end */ | |
/* @group Active */ | |
.chzn-container-active .chzn-single { | |
border-color: rgba(82,168,236,.8); | |
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)); | |
} | |
.chzn-container-active .chzn-single-with-drop { | |
border: 1px solid #aaa; | |
@include box-shadow(0 1px 0 #fff inset); | |
@include gradient-vertical(#eee, #fff); | |
@include border-bottom-radius(0); | |
} | |
.chzn-container-active .chzn-single-with-drop div { | |
background: transparent; | |
border-left: none; | |
} | |
.chzn-container-active .chzn-single-with-drop div b:after { | |
content: '\f077'; | |
} | |
.chzn-container-active .chzn-choices { | |
@include border-bottom-radius(0); | |
border-color: rgba(82,168,236,.8); | |
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)); | |
} | |
.chzn-container-active .chzn-choices .search-field input { | |
color: #111 !important; | |
} | |
/* @end */ | |
/* @group Disabled Support */ | |
.chzn-disabled { | |
cursor: default; | |
opacity:0.5 !important; | |
} | |
.chzn-disabled .chzn-single { | |
cursor: default; | |
} | |
.chzn-disabled .chzn-choices .search-choice .search-choice-close { | |
cursor: default; | |
} | |
/* @end */ | |
/* @group error & success */ | |
@mixin chosenFieldState($color) { | |
.chzn-container .chzn-single, | |
.chzn-container .chzn-drop, | |
.chzn-container .chzn-choices { | |
border-color: $color; | |
} | |
.chzn-container-active { | |
.chzn-single, | |
.chzn-drop, | |
.chzn-choices { | |
border-color: darken($color, 10%); | |
} | |
.chzn-single, | |
.chzn-choices { | |
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($color, 20%); | |
@include box-shadow($shadow); | |
} | |
} | |
.chzn-container { | |
.chzn-single, | |
.chzn-choices .search-choice, | |
.chzn-choices .search-field input { | |
color: $color; | |
} | |
} | |
} | |
.control-group.success { | |
@include chosenFieldState($successText); | |
} | |
.control-group.error { | |
@include chosenFieldState($errorText); | |
} | |
.control-group.info { | |
@include chosenFieldState($infoText); | |
} | |
.control-group.warning { | |
@include chosenFieldState($warningText); | |
} | |
/* @end */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment