bee-select
Version:
select ui component for react
1,311 lines (1,196 loc) • 42.7 kB
CSS
@charset "UTF-8";
/* FormGroup */
/* Navlayout */
/* keyframes 定义 */
@-webkit-keyframes uSlideUpIn {
0% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
@keyframes uSlideUpIn {
0% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
@-webkit-keyframes uSlideUpOut {
0% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(1);
transform: scaleY(1); }
100% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); } }
@keyframes uSlideUpOut {
0% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(1);
transform: scaleY(1); }
100% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); } }
@-webkit-keyframes uSlideDownIn {
0% {
opacity: 0;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
@keyframes uSlideDownIn {
0% {
opacity: 0;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
@-webkit-keyframes uSlideDownOut {
0% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scaleY(1);
transform: scaleY(1); }
100% {
opacity: 0;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); } }
@keyframes uSlideDownOut {
0% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scaleY(1);
transform: scaleY(1); }
100% {
opacity: 0;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); } }
@-webkit-keyframes uSlideLeftIn {
0% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(1);
transform: scaleX(1); } }
@keyframes uSlideLeftIn {
0% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(1);
transform: scaleX(1); } }
@-webkit-keyframes uSlideLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(1);
transform: scaleX(1); }
100% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8); } }
@keyframes uSlideLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(1);
transform: scaleX(1); }
100% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8); } }
@-webkit-keyframes uSlideRightIn {
0% {
opacity: 0;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scaleX(1);
transform: scaleX(1); } }
@keyframes uSlideRightIn {
0% {
opacity: 0;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scaleX(1);
transform: scaleX(1); } }
@-webkit-keyframes uSlideRightOut {
0% {
opacity: 1;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scaleX(1);
transform: scaleX(1); }
100% {
opacity: 0;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8); } }
@keyframes uSlideRightOut {
0% {
opacity: 1;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scaleX(1);
transform: scaleX(1); }
100% {
opacity: 0;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8); } }
@-webkit-keyframes uSwingIn {
0%,
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px); }
20% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px); }
40% {
-webkit-transform: translateX(10px);
transform: translateX(10px); }
60% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px); }
80% {
-webkit-transform: translateX(5px);
transform: translateX(5px); } }
@keyframes uSwingIn {
0%,
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px); }
20% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px); }
40% {
-webkit-transform: translateX(10px);
transform: translateX(10px); }
60% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px); }
80% {
-webkit-transform: translateX(5px);
transform: translateX(5px); } }
@-webkit-keyframes uZoomIn {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes uZoomIn {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes uZoomOut {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); } }
@keyframes uZoomOut {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2); } }
@-webkit-keyframes uZoomBigIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes uZoomBigIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes uZoomBigOut {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@keyframes uZoomBigOut {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@-webkit-keyframes uZoomUpIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes uZoomUpIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes uZoomUpOut {
0% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@keyframes uZoomUpOut {
0% {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@-webkit-keyframes uZoomLeftIn {
0% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes uZoomLeftIn {
0% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes uZoomLeftOut {
0% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@keyframes uZoomLeftOut {
0% {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@-webkit-keyframes uZoomRightIn {
0% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes uZoomRightIn {
0% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes uZoomRightOut {
0% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@keyframes uZoomRightOut {
0% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@-webkit-keyframes uZoomDownIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes uZoomDownIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.8);
transform: scale(0.8); }
100% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes uZoomDownOut {
0% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@keyframes uZoomDownOut {
0% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(1);
transform: scale(1); }
100% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.8);
transform: scale(0.8); } }
@keyframes rcMenuOpenZoomIn {
0% {
opacity: 0;
transform: scale(0, 0); }
100% {
opacity: 1;
transform: scale(1, 1); } }
@keyframes rcMenuOpenZoomOut {
0% {
transform: scale(1, 1); }
100% {
opacity: 0;
transform: scale(0, 0); } }
@keyframes rcMenuOpenSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0); }
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1); } }
@keyframes rcMenuOpenSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1); }
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0); } }
ul {
margin: 0;
padding: 0;
list-style: none; }
.u-select {
box-sizing: border-box;
display: inline-block;
position: relative;
color: #212121;
width: 100%;
font-size: 12px; }
.u-select :root .u-select-arrow {
-webkit-filter: none;
filter: none; }
.u-select :root .u-select-arrow {
font-size: 12px; }
.u-select .u-select-arrow * {
display: none; }
.u-select .u-select-arrow {
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
text-rendering: auto;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 50%;
right: 8px;
line-height: 1;
margin-top: -6px;
display: inline-block;
font-size: 12px;
font-size: 9px \9;
-webkit-transform: scale(0.75) rotate(0deg);
-ms-transform: scale(0.75) rotate(0deg);
transform: scale(0.75) rotate(0deg);
/* IE6-IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1; }
.u-select .u-select-arrow:before {
display: block;
font-family: "uf";
content: "\e609";
-webkit-transition: -webkit-transform 0.2s ease;
transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
transition: transform 0.2s ease, -webkit-transform 0.2s ease; }
.u-select .u-select-selection {
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
display: block;
background-color: #fff;
border-radius: 3px;
border: 1px solid rgb(165, 173, 186);
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.u-select .u-select-selection :hover {
border-color: #40a5ed; }
.u-select > ul > li > a {
padding: 0;
background-color: #fff; }
.u-select-focused .u-select-selection,
.u-select-selection:focus,
.u-select-selection:active {
border-color: #40a5ed;
outline: 0;
box-shadow: none; }
.u-select-selection-clear {
display: inline-block;
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
text-rendering: auto;
opacity: 0;
position: absolute;
right: 8px;
z-index: 1;
background: #fff;
top: 50%;
font-size: 12px;
color: #ccc;
width: 12px;
height: 12px;
margin-top: -6px;
line-height: 12px;
cursor: pointer;
-webkit-transition: color 0.3s ease, opacity 0.15s ease;
transition: color 0.3s ease, opacity 0.15s ease; }
.u-select-selection-clear:before {
display: block;
font-family: 'uf';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e66b"; }
.u-select-selection-clear:hover {
color: #999; }
.u-select-selection:hover .u-select-selection-clear {
opacity: 1; }
.u-select-selection-selected-value {
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
padding-right: 14px;
padding-left: 5px; }
.u-select-disabled {
color: #909090; }
.u-select-disabled.u-select .u-select-selection {
background: #F7F9FB;
border-color: #DFE1E6;
cursor: not-allowed; }
.u-select-disabled .u-select-selection:hover, .u-select-disabled .u-select-selection:focus, .u-select-disabled .u-select-selection:active {
border-color: #DFE1E6;
box-shadow: none; }
.u-select-disabled .u-select-selection-clear {
display: none;
visibility: hidden;
pointer-events: none; }
.u-select-disabled .u-select-selection--multiple .u-select-selection-choice {
background: #e9e9e9;
color: #aaa;
padding-right: 10px; }
.u-select-disabled .u-select-selection--multiple .u-select-selection-choice-remove {
display: none; }
.u-select-disabled .u-select-selection-choice-remove {
color: #ccc;
cursor: default; }
.u-select-disabled .u-select-selection-choice-remove:hover {
color: #ccc; }
.u-select-selection--single {
height: 32px;
position: relative;
cursor: pointer; }
.u-select-selection-rendered {
display: block;
margin-left: 2px;
margin-right: 2px;
position: relative;
line-height: 30px; }
.u-select-selection-rendered:after {
content: '.';
visibility: hidden;
pointer-events: none;
display: inline-block;
width: 0; }
.u-select-lg .u-select-selection--single {
height: 40px; }
.u-select-lg .u-select-selection-rendered {
line-height: 40px; }
.u-select-lg .u-select-selection--multiple {
min-height: 40px; }
.u-select-lg .u-select-selection--multiple .u-select-selection-rendered li {
height: 24px;
line-height: 24px; }
.u-select-sm .u-select-selection {
border-radius: 3px; }
.u-select-sm .u-select-selection--single {
height: 26px; }
.u-select-sm .u-select-selection-rendered {
line-height: 24px; }
.u-select-sm .u-select-selection--multiple {
min-height: 24px; }
.u-select-sm .u-select-selection--multiple .u-select-selection-rendered li {
height: 14px;
line-height: 14px; }
.u-select-search-field-wrap {
display: inline-block;
position: relative; }
.u-select-selection-placeholder,
.u-select-search-field-placeholder {
position: absolute;
top: 50%;
left: 5px;
right: 9px;
color: #ccc;
line-height: 20px;
height: 20px;
max-width: 100%;
margin-top: -10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.u-select-search-field-placeholder {
left: 8px; }
.u-select-search--inline {
position: absolute;
width: 100%;
height: 100%; }
.u-select-search--inline .u-select-search-field-wrap {
width: 100%;
height: 100%; }
.u-select-search--inline .u-select-search-field {
border: 0;
font-size: 100%;
height: 100%;
width: 100%;
background: transparent;
outline: 0;
border-radius: 3px; }
.u-select-search--inline .u-select-search-field-mirror {
position: absolute;
top: 0;
left: -9999px;
white-space: pre;
pointer-events: none; }
.u-select-search--inline > i {
float: right; }
.u-select-selection--multiple {
min-height: 28px;
cursor: text;
zoom: 1; }
.u-select-selection--multiple:before, .u-select-selection--multiple:after {
content: " ";
display: table; }
.u-select-selection--multiple:after {
clear: both;
visibility: hidden;
font-size: 0;
height: 0; }
.u-select-selection--multiple .u-select-search--inline {
float: left;
position: static;
width: auto;
padding: 0; }
.u-select-selection--multiple .u-select-search--inline .u-select-search-field {
width: 0.75em; }
.u-select-selection--multiple .u-select-selection-rendered {
margin-left: 4px;
height: auto; }
.u-select-selection--multiple > ul > li, .u-select-selection--multiple .u-select-selection-rendered > ul > li {
margin-top: 3px;
margin-bottom: 3px;
height: 24px;
line-height: 24px; }
.u-select-selection--multiple .u-select-selection-choice {
background-color: #f3f3f3;
border-radius: 3px;
cursor: default;
float: left;
padding: 0 16px;
margin-right: 3px;
max-width: 99%;
position: relative;
overflow: hidden;
-webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
padding: 0 20px 0 10px; }
.u-select-selection--multiple .u-select-selection-choice-disabled {
padding: 0 10px; }
.u-select-selection--multiple .u-select-selection-choice-content {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
-webkit-transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.u-select-selection--multiple .u-select-selection-choice-remove {
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
text-rendering: auto;
line-height: 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #999;
line-height: inherit;
cursor: pointer;
font-weight: bold;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
display: inline-block;
font-size: 12px;
font-size: 8px \9;
-webkit-transform: scale(0.66667) rotate(0deg);
-ms-transform: scale(0.66667) rotate(0deg);
transform: scale(0.66667) rotate(0deg);
/* IE6-IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
position: absolute;
right: 4px;
padding: 0 0 0 8px;
top: -4px; }
.u-select-selection--multiple .u-select-selection-choice-remove:before {
display: block;
font-family: "uf"; }
.u-select-selection--multiple .u-select-selection-choice-remove {
-webkit-filter: none;
filter: none; }
.u-select-selection--multiple .u-select-selection-choice-remove {
font-size: 12px; }
.u-select-selection--multiple .u-select-selection-choice-remove:hover {
color: #404040; }
.u-select-selection--multiple .u-select-selection-choice-remove:before {
font-family: 'uf';
content: "\e602"; }
.u-select-open .u-select-arrow {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; }
.u-select-open .u-select-arrow:before {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.u-select-open .u-select-selection {
border-color: #40a5ed;
outline: 0;
border-color: #66afe9;
outline: 0; }
.u-select-combobox .u-select-arrow {
display: none; }
.u-select-combobox .u-select-search--inline {
height: 100%;
width: 100%;
float: none; }
.u-select-combobox .u-select-search-field-wrap {
width: 100%;
height: 100%; }
.u-select-combobox .u-select-search-field {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
box-shadow: none;
padding-left: 5px; }
.u-select-dropdown {
background-color: white;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-sizing: border-box;
z-index: 1800;
left: -9999px;
top: -9999px;
position: absolute;
outline: none;
overflow: hidden;
font-size: 12px;
margin-bottom: 20px;
animation: none;
-webkit-animation: none; }
.u-select-dropdown.slide-up-enter.slide-up-enter-active.u-select-dropdown-placement-bottomLeft, .u-select-dropdown.slide-up-appear.slide-up-appear-active.u-select-dropdown-placement-bottomLeft {
-webkit-animation-name: uSlideUpIn;
animation-name: uSlideUpIn; }
.u-select-dropdown.slide-up-enter.slide-up-enter-active.u-select-dropdown-placement-topLeft, .u-select-dropdown.slide-up-appear.slide-up-appear-active.u-select-dropdown-placement-topLeft {
-webkit-animation-name: uSlideDownIn;
animation-name: uSlideDownIn; }
.u-select-dropdown.slide-up-leave.slide-up-leave-active.u-select-dropdown-placement-bottomLeft {
-webkit-animation-name: uSlideUpOut;
animation-name: uSlideUpOut; }
.u-select-dropdown.slide-up-leave.slide-up-leave-active.u-select-dropdown-placement-topLeft {
-webkit-animation-name: uSlideDownOut;
animation-name: uSlideDownOut; }
.u-select-dropdown.u-select-dropdown-hidden {
display: none; }
.u-select-dropdown .u-select-dropdown-menu {
outline: none;
margin-bottom: 0;
padding-left: 0;
list-style: none;
max-height: 250px;
overflow: auto; }
.u-select-dropdown .u-select-dropdown-menu-item-group-list {
margin: 0;
padding: 0; }
.u-select-dropdown .u-select-dropdown-menu-item-group-list > .u-select-dropdown-menu-item {
padding-left: 24px; }
.u-select-dropdown .u-select-dropdown-menu-item-group-title {
color: #999;
line-height: 1.5;
padding: 8px 16px; }
.u-select-dropdown .u-select-dropdown-menu-item {
position: relative;
display: block;
padding: 7px 16px;
padding-left: 6px;
font-weight: normal;
color: #212121;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.u-select-dropdown .u-select-dropdown-menu-item:hover,
.u-select-dropdown .u-select-dropdown-menu-item-active {
background-color: rgb(235, 236, 240); }
.u-select-dropdown .u-select-dropdown-menu-item-disabled {
color: #909090;
cursor: not-allowed; }
.u-select-dropdown .u-select-dropdown-menu-item-disabled:hover {
color: #909090;
background-color: #fff;
cursor: not-allowed; }
.u-select-dropdown .u-select-dropdown-menu-item-selected,
.u-select-dropdown .u-select-dropdown-menu-item-selected:hover {
background-color: rgb(255, 247, 231);
color: rgb(245, 60, 50); }
.u-select-dropdown .u-select-dropdown-menu-item-divider {
height: 1px;
margin: 1px 0;
overflow: hidden;
background-color: #e5e5e5;
line-height: 0; }
.u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:after {
font-family: 'uf';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e658";
color: transparent;
display: inline-block;
font-size: 12px;
font-size: 10px \9;
-webkit-transform: scale(0.83333) rotate(0deg);
-ms-transform: scale(0.83333) rotate(0deg);
transform: scale(0.83333) rotate(0deg);
/* IE6-IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 16px;
font-weight: bold;
text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0; }
.u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:hover:after {
color: #ddd; }
.u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item-disabled:after {
display: none; }
.u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item-selected:after, .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item-selected:hover:after {
color: rgb(245, 60, 50);
display: inline-block; }
:root .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:after {
-webkit-filter: none;
filter: none; }
:root .u-select-dropdown.u-select-dropdown--multiple .u-select-dropdown-menu-item:after {
font-size: 12px; }
.u-select-dropdown-container-open .u-select-dropdown,
.u-select-dropdown-open .u-select-dropdown {
display: block; }
.u-input-search-wrapper {
display: inline-block;
position: relative; }
.u-input-search-wrapper .u-input-search {
-webkit-transition: all .3s ease;
transition: all .3s ease; }
.u-input-search-wrapper .u-input-search-icon {
position: absolute;
right: 8px;
cursor: pointer;
-webkit-transition: all .3s ease;
transition: all .3s ease;
font-size: 14px;
height: 20px;
line-height: 20px;
top: 50%;
margin-top: -10px; }
.u-input-search-wrapper .u-input-search-icon:hover {
color: #108ee9; }
.u-input-search-wrapper:hover .u-input-search:not[disabled] {
border: 1px solid #108ee9; }
.u-search-input-wrapper {
display: inline-block;
vertical-align: middle; }
.u-search-input.u-input-group .u-input:first-child, .u-search-input.u-input-group .u-select:first-child {
border-radius: 3px;
position: absolute;
top: -1px;
width: 100%; }
.u-search-input.u-input-group .u-input:first-child {
padding-right: 36px; }
.u-search-input .u-search-btn {
color: #666;
background-color: #f7f7f7;
border-color: #d9d9d9;
border-radius: 0 3px 3px 0;
left: -1px;
position: relative;
border-width: 0 0 0 1px;
z-index: 2;
padding-left: 8px;
padding-right: 8px; }
.u-search-input .u-search-btn > a:only-child {
color: currentColor; }
.u-search-input .u-search-btn > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.u-search-input .u-search-btn:hover > a:only-child, .u-search-input .u-search-btn:focus > a:only-child {
color: currentColor; }
.u-search-input .u-search-btn:hover > a:only-child:after, .u-search-input .u-search-btn:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.u-search-input .u-search-btn:active, .u-search-input .u-search-btn.active {
color: #0f87dd;
background-color: #f7f7f7;
border-color: #0f87dd; }
.u-search-input .u-search-btn:active > a:only-child, .u-search-input .u-search-btn.active > a:only-child {
color: currentColor; }
.u-search-input .u-search-btn:active > a:only-child:after, .u-search-input .u-search-btn.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.u-search-input .u-search-btn:hover, .u-search-input .u-search-btn:focus {
color: #40a5ed;
background-color: #f7f7f7;
border-color: #40a5ed; }
.u-search-input .u-search-btn:active, .u-search-input .u-search-btn:hover, .u-search-input .u-search-btn:focus {
background: #fff; }
.u-search-input .u-search-btn:hover {
border-color: #d9d9d9; }
.u-search-input .u-search-btn[disabled] {
color: #ccc;
background-color: #f7f7f7;
border-color: #d9d9d9; }
.u-search-input .u-search-btn[disabled]:hover, .u-search-input .u-search-btn[disabled]:focus, .u-search-input .u-search-btn[disabled]:active, .u-search-input .u-search-btn[disabled].active {
color: #ccc;
background-color: #f7f7f7;
border-color: #d9d9d9; }
.u-search-input .u-search-btn[disabled] > a:only-child, .u-search-input .u-search-btn[disabled]:hover > a:only-child, .u-search-input .u-search-btn[disabled]:focus > a:only-child, .u-search-input .u-search-btn[disabled]:active > a:only-child, .u-search-input .u-search-btn[disabled].active > a:only-child {
color: currentColor; }
.u-search-input .u-search-btn[disabled] > a:only-child:after, .u-search-input .u-search-btn[disabled]:hover > a:only-child:after, .u-search-input .u-search-btn[disabled]:focus > a:only-child:after, .u-search-input .u-search-btn[disabled]:active > a:only-child:after, .u-search-input .u-search-btn[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.u-search-input .u-search-btn.disabled {
color: #ccc;
background-color: #f7f7f7;
border-color: #d9d9d9; }
.u-search-input .u-search-btn.disabled:hover, .u-search-input .u-search-btn.disabled:focus, .u-search-input .u-search-btn.disabled:active, .u-search-input .u-search-btn.disabled.active {
color: #ccc;
background-color: #f7f7f7;
border-color: #d9d9d9; }
.u-search-input .u-search-btn.disabled > a:only-child, .u-search-input .u-search-btn.disabled:hover > a:only-child, .u-search-input .u-search-btn.disabled:focus > a:only-child, .u-search-input .u-search-btn.disabled:active > a:only-child, .u-search-input .u-search-btn.disabled.active > a:only-child {
color: currentColor; }
.u-search-input .u-search-btn.disabled > a:only-child:after, .u-search-input .u-search-btn.disabled:hover > a:only-child:after, .u-search-input .u-search-btn.disabled:focus > a:only-child:after, .u-search-input .u-search-btn.disabled:active > a:only-child:after, .u-search-input .u-search-btn.disabled.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.u-search-input.u-search-input-focus .u-search-btn-noempty, .u-search-input:hover .u-search-btn-noempty {
color: #fff;
background-color: #108ee9;
border-color: #108ee9; }
.u-search-input.u-search-input-focus .u-search-btn-noempty > a:only-child, .u-search-input:hover .u-search-btn-noempty > a:only-child {
color: currentColor; }
.u-search-input.u-search-input-focus .u-search-btn-noempty > a:only-child:after, .u-search-input:hover .u-search-btn-noempty > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.u-search-input.u-search-input-focus .u-search-btn-noempty:focus, .u-search-input.u-search-input-focus .u-search-btn-noempty:hover, .u-search-input:hover .u-search-btn-noempty:focus, .u-search-input:hover .u-search-btn-noempty:hover {
color: #fff;
background-color: #40a5ed;
border-color: #40a5ed; }
.u-search-input.u-search-input-focus .u-search-btn-noempty:hover > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty:focus > a:only-child, .u-search-input:hover .u-search-btn-noempty:hover > a:only-child, .u-search-input:hover .u-search-btn-noempty:focus > a:only-child {
color: currentColor; }
.u-search-input.u-search-input-focus .u-search-btn-noempty:hover > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty:focus > a:only-child:after, .u-search-input:hover .u-search-btn-noempty:hover > a:only-child:after, .u-search-input:hover .u-search-btn-noempty:focus > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.u-search-input.u-search-input-focus .u-search-btn-noempty:active, .u-search-input.u-search-input-focus .u-search-btn-noempty.active, .u-search-input:hover .u-search-btn-noempty:active, .u-search-input:hover .u-search-btn-noempty.active {
color: #fff;
background-color: #0f87dd;
border-color: #0f87dd; }
.u-search-input.u-search-input-focus .u-search-btn-noempty:active > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.active > a:only-child, .u-search-input:hover .u-search-btn-noempty:active > a:only-child, .u-search-input:hover .u-search-btn-noempty.active > a:only-child {
color: currentColor; }
.u-search-input.u-search-input-focus .u-search-btn-noempty:active > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty:active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
.u-search-input .u-select-combobox .u-select-selection-rendered {
margin-right: 29px; }
.u-search-input.u-search-input-focus .u-search-btn-noempty.disabled, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled], .u-search-input:hover .u-search-btn-noempty.disabled, .u-search-input:hover .u-search-btn-noempty[disabled] {
color: #ccc;
background-color: #f7f7f7;
border-color: #d9d9d9; }
.u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:hover, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:focus, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:active, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled.active, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:hover, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:focus, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:active, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled].active, .u-search-input:hover .u-search-btn-noempty.disabled:hover, .u-search-input:hover .u-search-btn-noempty.disabled:focus, .u-search-input:hover .u-search-btn-noempty.disabled:active, .u-search-input:hover .u-search-btn-noempty.disabled.active, .u-search-input:hover .u-search-btn-noempty[disabled]:hover, .u-search-input:hover .u-search-btn-noempty[disabled]:focus, .u-search-input:hover .u-search-btn-noempty[disabled]:active, .u-search-input:hover .u-search-btn-noempty[disabled].active {
color: #ccc;
background-color: #f7f7f7;
border-color: #d9d9d9; }
.u-search-input.u-search-input-focus .u-search-btn-noempty.disabled > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:hover > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:focus > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:active > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled.active > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled] > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:hover > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:focus > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:active > a:only-child, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled].active > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled:hover > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled:focus > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled:active > a:only-child, .u-search-input:hover .u-search-btn-noempty.disabled.active > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled] > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled]:hover > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled]:focus > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled]:active > a:only-child, .u-search-input:hover .u-search-btn-noempty[disabled].active > a:only-child {
color: currentColor; }
.u-search-input.u-search-input-focus .u-search-btn-noempty.disabled > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:hover > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:focus > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled:active > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty.disabled.active > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled] > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:hover > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:focus > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled]:active > a:only-child:after, .u-search-input.u-search-input-focus .u-search-btn-noempty[disabled].active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled:hover > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled:focus > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled:active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty.disabled.active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled] > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled]:hover > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled]:focus > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled]:active > a:only-child:after, .u-search-input:hover .u-search-btn-noempty[disabled].active > a:only-child:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent; }
@-webkit-keyframes uSlideUpIn {
0% {
opacity: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8); }
100% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
.u-select-nowarp {
overflow: hidden; }
.u-select-nowarp .u-select-selection-rendered {
display: flex;
white-space: nowrap; }
.u-select-nowarp .u-select-selection-rendered ul {
display: flex;
white-space: nowrap; }