Your IP : 18.190.253.224
.SumoSelect {
p {
margin: 0;
}
width: 200px;
}
.SelectBox {
padding: 5px 8px;
}
.sumoStopScroll {
overflow: hidden;
}
/* Filtering style */
.SumoSelect {
.hidden {
display: none;
}
.search-txt {
display: none;
outline: none;
}
.no-match {
display: none;
padding: 6px;
}
&.open {
.search-txt {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 5px 15px;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 5px;
}
> .search > {
span, label {
visibility: hidden;
}
}
}
}
/*this is applied on that hidden select. DO NOT USE display:none; or visiblity:hidden; and Do not override any of these properties. */
.SelectClass, .SumoUnder {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.SelectClass {
z-index: 1;
}
.SumoSelect {
> {
.optWrapper > .options li.opt label, .CaptionCont {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
}
.select-all > label {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
display: inline-block;
position: relative;
outline: none;
width: 100%;
> {
.CaptionCont {
position: relative;
border: 1px solid #e9ebfa;
color: #424e79;
min-height: 14px;
background-color: $white;
border-radius: .25rem;
margin: 0;
width: 100%;
height: 40px;
line-height: 30px;
padding: 6px 17px;
> {
span {
display: block;
padding-right: 30px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: default;
&.placeholder {
color: #9999b5;
font-style: italic;
}
}
label {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 30px;
> i:before {
display: inline-block;
width: 0;
height: 0;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
margin-top: 18px;
color: #bcccda;
}
}
}
}
.optWrapper {
display: none;
z-index: 1;
top: 30px;
width: 100%;
position: absolute;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: $white;
border: 1px solid #eaeaec;
border-radius: 3px;
overflow: hidden;
}
}
&.open > .optWrapper {
top: 35px;
display: block;
box-shadow: 0px 16px 18px rgba(6, 10, 48, 0.1);
background: $white;
border-radius: 0 0 5px 5px;
&.up {
top: auto;
bottom: 100%;
margin-bottom: 5px;
}
}
> .optWrapper {
ul {
list-style: none;
display: block;
padding: 0;
margin: 0;
overflow: auto;
}
> .options {
border-radius: 2px;
position: relative;
/*Set the height of pop up here (only for desktop mode)*/
max-height: 250px;
/*height*/
}
&.okCancelInMulti > .options {
border-radius: 2px 2px 0 0;
}
&.selall {
> .options {
border-radius: 0 0 2px 2px;
}
&.okCancelInMulti > .options {
border-radius: 0;
}
}
> .options li {
&.group.disabled > label {
opacity: 0.5;
}
ul li.opt {
padding-left: 22px;
}
}
&.multiple > .options li ul li.opt {
padding-left: 50px;
}
&.isFloating > .options {
max-height: 100%;
}
> .options {
li.opt {
padding: 0px 16px;
position: relative;
border-bottom: 1px solid #eff0f6;
height: 40px;
line-height: 40px;
}
> li.opt:first-child {
border-radius: 2px 2px 0 0;
}
}
&.selall > .options > li.opt:first-child {
border-radius: 0;
}
> .options > li.opt:last-child {
border-radius: 0 0 2px 2px;
border-bottom: none;
}
&.okCancelInMulti > .options > li.opt:last-child {
border-radius: 0;
}
> .options li.opt {
&:hover {
background-color: #f4f5fb;
}
&.sel {
background-color: #a1c0e4;
}
}
}
.select-all {
&.sel {
background-color: #a1c0e4;
}
> span {
position: absolute;
display: block;
width: 30px;
top: 0;
bottom: 0;
margin-left: -35px;
}
> span i {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 14px;
height: 14px;
border: 1px solid #eff0f6;
border-radius: 2px;
background-color: $white;
}
&.selected > span i, &.partial > span i {
background-color: $primary-1;
box-shadow: none;
border-color: transparent;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: center center;
}
}
> .optWrapper {
> .options li {
label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
cursor: pointer;
margin-bottom: 0 !important;
}
span {
display: none;
}
&.group > label {
cursor: default;
padding: 8px 6px;
font-weight: bold;
}
}
&.isFloating {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 90%;
bottom: 0;
margin: auto;
max-height: 90%;
}
> .options li.opt.disabled {
background-color: inherit;
pointer-events: none;
* {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity = 50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
}
&.multiple > .options li.opt {
padding-left: 35px;
cursor: pointer;
span {
position: absolute;
display: block;
width: 30px;
top: 0;
bottom: 0;
margin-left: -35px;
}
}
}
> .optWrapper.multiple > .options li.opt span i {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 14px;
height: 14px;
border: 1px solid #eff0f6;
border-radius: 2px;
background-color: $white;
}
> .optWrapper {
> .MultiControls {
display: none;
border-top: 1px solid #eaeaec;
background-color: $white;
border-radius: 0 0 3px 3px;
}
&.multiple {
&.isFloating > .MultiControls {
display: block;
margin-top: 5px;
position: absolute;
bottom: 0;
width: 100%;
}
&.okCancelInMulti > .MultiControls {
display: block;
> p {
padding: 6px;
&:focus {
border-color: $primary-1;
outline: none;
background-color: $primary-1;
}
}
}
> .MultiControls > p {
display: inline-block;
cursor: pointer;
padding: 12px;
width: 50%;
box-sizing: border-box;
text-align: center;
&:hover {
background-color: #f4f5fb;
}
&.btnOk {
border-right: 1px solid #DBDBDB;
border-radius: 0 0 0 3px;
}
&.btnCancel {
border-radius: 0 0 3px 0;
}
}
}
&.isFloating > .options li.opt {
padding: 12px 6px;
}
&.multiple {
&.isFloating {
> .options li.opt {
padding-left: 35px;
}
padding-bottom: 43px;
}
> .options li.opt.selected span i {
background-color: $primary-1;
box-shadow: none;
border-color: transparent;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: center center;
}
}
}
&.disabled {
opacity: 0.7;
cursor: not-allowed;
> .CaptionCont {
border-color: #d3dfea;
box-shadow: none;
background: #f4f5f9;
}
}
.select-all {
border-radius: 3px 3px 0 0;
position: relative;
border-bottom: 1px solid #eaeaec;
background-color: $white;
padding: 8px 0 3px 35px;
height: 36px;
cursor: pointer;
> {
label, span i {
cursor: pointer;
}
}
&.partial > span i {
background-color: #eaeaec;
}
}
> .optWrapper > .options li.optGroup {
padding-left: 5px;
text-decoration: underline;
}
}
/*placeholder style*/
/*Floating styles*/
/*disabled state*/
/*styling for multiple select*/
/*styling for select on popup mode*/
/*styling for only multiple select on popup mode*/
/*disabled state*/
/**Select all button**/
/*styling for optgroups*/