ng2-ui-kit
Version:
Angular2 UI Kit
124 lines (123 loc) • 4.65 kB
CSS
.ui-kit-select-container {
position: relative;
margin: 0 0 10px 0; }
.ui-kit-select-container input {
width: 100%;
height: 40px;
background: #fcfcff;
border: 1px solid #cad2e1;
border-radius: 3px;
font-size: 13px;
outline: none;
padding: 5px 10px;
color: #97a1b5;
text-shadow: 0px 0px 0px transparent;
cursor: pointer; }
.ui-kit-select-container input ::-webkit-input-placeholder {
color: #aec9de; }
.ui-kit-select-container input :-moz-placeholder {
color: #aec9de; }
.ui-kit-select-container input ::-moz-placeholder {
color: #aec9de; }
.ui-kit-select-container input :-ms-input-placeholde {
color: #aec9de; }
.ui-kit-select-container input.is-active {
border-color: #44c8f9;
background: rgba(68, 200, 249, 0.15);
color: #44c8f9;
text-shadow: 0px 0px 0px #44c8f9;
-webkit-text-fill-color: transparent; }
.ui-kit-select-container .ui-kit-select-label {
color: #626d83;
font-size: 14px;
display: block;
width: 100%;
margin: 0 0 5px 0;
visibility: hidden; }
.ui-kit-select-container .ui-kit-select-label.visible {
visibility: visible; }
.ui-kit-select-container i {
display: block;
position: absolute;
width: 25px;
height: 25px;
top: 28px;
right: 5px;
z-index: 10;
font-size: 25px; }
.ui-kit-select-container i.is-active {
color: #44c8f9; }
.ui-kit-select-container .ui-kit-select-dropdown {
position: absolute;
width: 100%;
top: 62px;
left: 0;
border: 1px solid #44c8f9;
background: #fff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
visibility: hidden;
opacity: 0;
z-index: 99; }
.ui-kit-select-container .ui-kit-select-dropdown.is-active {
visibility: visible;
opacity: 1; }
.ui-kit-select-container .ui-kit-select-dropdown .ui-kit-select-item {
width: 100%;
height: 40px;
cursor: pointer; }
.ui-kit-select-container .ui-kit-select-dropdown .ui-kit-select-item span {
height: 40px;
width: 100%;
display: block;
color: #44c8f9;
padding: 11px;
font-size: 13px; }
.ui-kit-select-container .ui-kit-select-dropdown .ui-kit-select-item:hover span, .ui-kit-select-container .ui-kit-select-dropdown .ui-kit-select-item.is-active span {
color: #fff;
background: #44c8f9; }
.ui-kit-select-container.danger input.is-active {
border-color: #e2747e;
background: rgba(226, 116, 126, 0.15);
color: #e2747e;
text-shadow: 0px 0px 0px #e2747e;
-webkit-text-fill-color: transparent; }
.ui-kit-select-container.danger i.is-active {
color: #e2747e; }
.ui-kit-select-container.danger .ui-kit-select-dropdown {
border: 1px solid #e2747e; }
.ui-kit-select-container.danger .ui-kit-select-dropdown .ui-kit-select-item span {
color: #e2747e; }
.ui-kit-select-container.danger .ui-kit-select-dropdown .ui-kit-select-item:hover span, .ui-kit-select-container.danger .ui-kit-select-dropdown .ui-kit-select-item.is-active span {
color: #fff;
background: #e2747e; }
.ui-kit-select-container.success input.is-active {
border-color: #3fc59d;
background: rgba(63, 197, 157, 0.15);
color: #3fc59d;
text-shadow: 0px 0px 0px #3fc59d;
-webkit-text-fill-color: transparent; }
.ui-kit-select-container.success i.is-active {
color: #3fc59d; }
.ui-kit-select-container.success .ui-kit-select-dropdown {
border: 1px solid #3fc59d; }
.ui-kit-select-container.success .ui-kit-select-dropdown .ui-kit-select-item span {
color: #3fc59d; }
.ui-kit-select-container.success .ui-kit-select-dropdown .ui-kit-select-item:hover span, .ui-kit-select-container.success .ui-kit-select-dropdown .ui-kit-select-item.is-active span {
color: #fff;
background: #3fc59d; }
.ui-kit-select-container.warning input.is-active {
border-color: #f4bf4d;
background: rgba(244, 191, 77, 0.15);
color: #f4bf4d;
text-shadow: 0px 0px 0px #f4bf4d;
-webkit-text-fill-color: transparent; }
.ui-kit-select-container.warning i.is-active {
color: #f4bf4d; }
.ui-kit-select-container.warning .ui-kit-select-dropdown {
border: 1px solid #f4bf4d; }
.ui-kit-select-container.warning .ui-kit-select-dropdown .ui-kit-select-item span {
color: #f4bf4d; }
.ui-kit-select-container.warning .ui-kit-select-dropdown .ui-kit-select-item:hover span, .ui-kit-select-container.warning .ui-kit-select-dropdown .ui-kit-select-item.is-active span {
color: #fff;
background: #f4bf4d; }