123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- .enable_plugin_select2() when(@enable-plugin-select2 = true) {
- .select2-container .select2-choice {
- .border-radius(0);
- height: 32px;
- line-height: 28px;
- }
- .select2-container.select2-drop-above .select2-choice {
- .border-radius(0);
- }
- .select2-container[class*="input-"] {
- max-width: none;
- }
- .select2-container.input-mini {
- min-width: 100px;
- }
- .select2-container .select2-choice abbr , .select2-search-choice-close {
- background: none;
- &:before {
- font-family: FontAwesome;
- font-size: @base-font-size - 1;
- display: inline;
- content: "\f00d";
- color: #888;
- position: relative;
- top: -1px;
- }
- &:hover:before {
- color:#555;
- }
- }
- .select2-container .select2-choice abbr:before {
- top:-7px;
- }
- .select2-search-choice-close:hover {
- text-decoration:none !important;
- }
- .select2-drop {
- .border-radius(0);
- border:1px solid #4492C9;
- border-width:0 1px 3px;
- }
- .select2-drop.select2-drop-above {
- .border-radius(0);
- }
- .select2-container .select2-choice {
- background:#FAFAFA none;
- }
- .select2-container-active .select2-choice,
- .select2-container-active .select2-choices,
- .select2-dropdown-open.select2-drop-above .select2-choice,
- .select2-dropdown-open.select2-drop-above .select2-choices,
- .select2-container-multi.select2-container-active .select2-choices
- {
- border-color:#4492C9;
- }
- .select2-results .select2-highlighted {
- background: #316AC5;
- }
- .select2-container .select2-choice .select2-arrow {
- .border-radius(0);
- background:transparent none;
- border:none;
- }
- .select2-container .select2-choice .select2-arrow b {
- background: none;
- &:before {
- font-family: FontAwesome;
- font-size: @base-font-size - 1;
- display: inline;
- content: "\f0d7";
- color: #888;
- position: relative;
- left: 5px;
- }
- }
- .select2-dropdown-open .select2-choice .select2-arrow b:before {
- content:"\f0d8";
- }
- .select2-search {
- .select2-input {
- background: #fff none;
- margin-top:4px;
- }
- &:after {
- font-family: FontAwesome;
- font-size: @base-font-size + 1;
- display: inline;
- content: "\f002";
- color: #777;
- position: relative;
- top: 0;
- left: -20px;
- z-index: 0;
- }
- }
- .select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices
- {
- background-image: none;
- background-color: #F6F6F6;
- }
- .select2-container-multi .select2-choices .select2-search-field input {
- border: none !important;
- .box-shadow(none) !important;
- background: none !important;
- font-size: @font-size-text-input;
- }
- .select2-container-multi .select2-choices .select2-search-choice {
- line-height: 16px;
- padding-bottom: 4px;
- }
- .select2-container-active .select2-choice,
- .select2-container-active .select2-choices,
- .select2-container-multi.select2-container-active .select2-choices,
- .select2-dropdown-open.select2-drop-above .select2-choice,
- .select2-dropdown-open.select2-drop-above .select2-choices
- {
- .box-shadow(none);
- }
- .select2-search input.select2-active {
- background-color:#FFF;
- position: relative;
- z-index: 1;//so it will be on top of search icon
- }
- @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
- .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b {
- background-image: none !important;
- background-size: auto !important;
- }
- .select2-search input {
- background-position: auto !important;
- }
- }
- .select2-container-active.select2-dropdown-open {
- .select2-choice {
- #gradient > .vertical(#EEEEEE , #FFFFFF);
- }
- }
- .select2-container-active.select2-drop-above {
- .select2-choice {
- #gradient > .vertical(#FFFFFF , #EEEEEE);
- }
- }
- .select2-choice , .select2-choices {
- .form-group.has-error & {
- border-color:@error-state-border !important;
- }
- .form-group.has-info & {
- border-color:@info-state-border !important;
- }
- .form-group.has-warning & {
- border-color:@warning-state-border !important;
- }
- .form-group.has-success & {
- border-color:@success-state-border !important;
- }
- }
- @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
- .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
- background-image: none !important;
- background-repeat: no-repeat !important;
- background-size: auto !important;
- }
- .select2-search input {
- background-position: auto !important;
- }
- }
- //a second style (like tag inpit)
- .enable_plugin_select2_style_2() when(@enable-plugin-select2-style-2 = true) {
- .select2-container-multi.tag-input-style {
- .select2-choices .select2-search-choice {
- background-image:none;
- background-color:@tag-bg;
- color: #FFFFFF;
- display: inline-block;
- font-size: @base-font-size;
- font-weight: normal;
- margin-bottom: 3px;
- margin-right: 0;
- padding: 6px 22px 7px 9px;
- position: relative;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
- transition: all 0.2s ease 0s;
- vertical-align: baseline;
- white-space: nowrap;
-
- border:none;
- .box-shadow(none);
- .border-radius(0);
-
- .select2-search-choice-close {
- position: absolute;
- top:0;
- bottom:0;
- right:0;
- left: auto;
- width: 18px;
- height: auto;
- line-height: 25px;
- text-align: center;
-
- &:before {
- color: #FFF;
- position: static;
- font-size: @base-font-size - 2;
- }
-
- &:hover {
- background-color:rgba(0,0,0,0.2);
- &:before {
- color:#FFF;
- }
- }
- }
- }
- }
- }
- .enable_plugin_select2_style_2();
- }
- .enable_plugin_select2();
|