155 lines
3.8 KiB
SCSS
155 lines
3.8 KiB
SCSS
//
|
|
// Selectize.scss
|
|
//
|
|
|
|
.selectize-input {
|
|
height: $input-height;
|
|
padding: $input-padding-y $input-padding-x;
|
|
@include font-size($input-font-size);
|
|
font-weight: $input-font-weight;
|
|
line-height: $input-line-height;
|
|
color: $input-color;
|
|
background-color: $input-bg !important;
|
|
border: $input-border-width solid $input-border-color;
|
|
box-shadow: $components-shadow-sm;
|
|
|
|
> input {
|
|
color: $input-color;
|
|
|
|
&::placeholder {
|
|
color: $input-placeholder-color;
|
|
}
|
|
}
|
|
|
|
&.focus {
|
|
color: $input-focus-color;
|
|
background-color: $input-focus-bg;
|
|
border-color: $input-focus-border-color;
|
|
outline: 0;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.selectize-control {
|
|
&.multi {
|
|
.selectize-input > div {
|
|
padding: 1px 8px;
|
|
background: lighten($gray-300,5%);
|
|
color: $gray-800;
|
|
|
|
> a {
|
|
color: $gray-800;
|
|
}
|
|
|
|
&.active {
|
|
background: $primary;
|
|
> a {
|
|
color: color-yiq($primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.single {
|
|
.selectize-input {
|
|
&:after {
|
|
border-style: solid;
|
|
border-width: 0 2px 2px 0;
|
|
border-color: transparent $gray-500 $gray-500 transparent;
|
|
content: '';
|
|
display: block;
|
|
height: 7px;
|
|
margin-top: -5px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 50%;
|
|
transform-origin: 66% 66%;
|
|
transform: rotate(45deg);
|
|
transition: all .15s ease-in-out;
|
|
width: 7px;
|
|
}
|
|
|
|
&.dropdown-active:after {
|
|
border-width: 0 2px 2px 0;
|
|
margin-top: -5px;
|
|
border-color: transparent $gray-500 $gray-500 transparent;
|
|
transform: rotate(-135deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.selectize-dropdown {
|
|
padding: .3rem;
|
|
color: $dropdown-color;
|
|
box-shadow: $box-shadow;
|
|
background-color: $dropdown-bg;
|
|
background-clip: padding-box;
|
|
border: $dropdown-border-width solid $dropdown-border-color;
|
|
@include border-radius($dropdown-border-radius);
|
|
animation-name: DropDownSlide;
|
|
animation-duration: .3s;
|
|
animation-fill-mode: both;
|
|
margin: 0;
|
|
font-size: .875rem;
|
|
position: absolute;
|
|
z-index: 1000;
|
|
|
|
&.show {
|
|
top: 100%!important;
|
|
}
|
|
|
|
&.active {
|
|
color: $dropdown-link-hover-color;
|
|
@include gradient-bg($dropdown-link-hover-bg);
|
|
}
|
|
|
|
.scientific {
|
|
color: $gray-600;
|
|
}
|
|
|
|
.option,
|
|
.optgroup-header {
|
|
display: block;
|
|
width: 100%;
|
|
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
|
clear: both;
|
|
cursor: pointer;
|
|
font-weight: $font-weight-normal;
|
|
color: $dropdown-link-color;
|
|
text-align: inherit;
|
|
white-space: nowrap;
|
|
background-color: transparent;
|
|
|
|
@include hover-focus() {
|
|
color: $dropdown-link-hover-color;
|
|
text-decoration: none;
|
|
background-color: $dropdown-link-hover-bg !important;
|
|
}
|
|
}
|
|
|
|
&.plugin-optgroup_columns {
|
|
.optgroup {
|
|
border-right-color: $border-color;
|
|
}
|
|
}
|
|
|
|
.optgroup:before {
|
|
background-color: $border-color;
|
|
}
|
|
}
|
|
|
|
.selectize-dropdown-header {
|
|
border-bottom: 1px solid transparent;
|
|
color: $dropdown-link-active-color;
|
|
background-color: $dropdown-link-active-bg;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.selectize-dropdown-content {
|
|
> div {
|
|
background-color: transparent !important;
|
|
color: $input-color !important;
|
|
}
|
|
} |