UNPKG

multiple-select-vanilla

Version:

4 lines 6.48 kB
/*! * Multiple-Select-Vanilla styling * @author zhixin wen <wenzhixin2010@gmail.com> */.ms-offscreen{clip:rect(0 0 0 0)!important;border:0!important;height:1px!important;left:auto!important;margin:0!important;outline:0!important;overflow:hidden!important;padding:0!important;position:absolute!important;top:auto!important;width:1px!important}.ms-parent{display:inline-block;position:relative;vertical-align:middle}.ms-choice{background-color:var(--ms-choice-bgcolor,#fff);border:var(--ms-choice-border,1px solid #aaa);border-radius:var(--ms-choice-border-radius,4px);color:var(--ms-choice-color,#444);cursor:pointer;display:block;height:26px;line-height:var(--ms-choice-line-height,26px);overflow:hidden;padding:0;text-align:var(--ms-choice-text-align,left);text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.ms-choice.disabled{background-color:var(--ms-choice-disabled-bgcolor,#f4f4f4);background-image:none;border:var(--ms-choice-disabled-border,1px solid #ddd);cursor:default}.ms-choice>span{display:block;left:0;overflow:hidden;padding-left:8px;position:absolute;right:20px;text-overflow:ellipsis;top:0;white-space:nowrap}.ms-choice>span.ms-placeholder{color:var(--ms-placeholder-color,#999)}.ms-choice>div.icon-close{height:100%;position:absolute;right:16px;top:0;width:16px}.ms-choice>div.icon-close:before{color:#888;content:"×";font-weight:700;margin-top:-14px;position:absolute;top:50%}.ms-choice>div.icon-close:hover:before{color:#333}.ms-choice>div.icon-caret{border-color:#888 transparent transparent;border-style:solid;border-width:5px 4px 0;height:0;margin-top:-2px;position:absolute;right:8px;top:50%;width:0}.ms-choice>div.icon-caret.open{border-color:transparent transparent #888;border-width:0 4px 5px}.ms-drop{background:var(--ms-drop-background,#fff);border:var(--ms-drop-border,1px solid #aaa);border-radius:var(--ms-drop-border-radius,4px);color:var(--ms-drop-color,#000);display:none;margin-top:var(--ms-drop-margin-top,-1px);min-width:100%;overflow:hidden;padding:var(--ms-drop-padding,0);position:absolute;width:auto;z-index:var(--ms-drop-zindex,1050)}.ms-drop.bottom{box-shadow:var(--ms-drop-bottom-box-shadow,0 4px 5px rgba(0,0,0,.15));top:100%}.ms-drop.top{bottom:100%;box-shadow:var(--ms-drop-top-box-shadow,0 -4px 5px rgba(0,0,0,.15))}.ms-drop .ms-select-all{border-bottom:var(--ms-select-all-border-bottom,1px solid #ddd);line-height:var(--ms-select-all-line-height,18px);padding:var(--ms-select-all-padding,4px);width:100%}.ms-drop .ms-select-all:hover{background-color:var(--ms-select-all-text-hover-color,transparent)}.ms-drop .ms-select-all label{border:var(--ms-select-all-label-border,1px solid transparent);color:var(--ms-select-all-text-color,#000);display:inline-block;font-weight:400;padding:var(--ms-select-all-label-padding,4px);width:100%}.ms-drop .ms-select-all label:hover{background-color:var(--ms-select-all-label-hover-bg-color,#fafafa);border:var(--ms-select-all-label-hover-border,1px solid transparent);cursor:pointer}.ms-drop .ms-select-all label input{margin-left:0}.ms-drop .ms-select-all label span{padding:var(--ms-select-all-label-span-padding,0 0 0 20px)}.ms-drop .ms-ok-button{background-color:var(--ms-ok-button-bg-color,#fff);border-color:var(--ms-ok-button-border-color,#ccc);border-radius:var(--ms-ok-button-border-radius,0 0 4px 4px);border-width:var(--ms-ok-button-border-width,1px 0 0 0);color:var(--ms-ok-button-text-color,#000);cursor:pointer;display:block;font-weight:var(--ms-ok-button-font-weight,600);height:var(--ms-ok-button-height,26px);padding:var(--ms-ok-button-padding,0);text-align:var(--ms-ok-button-text-align,center);width:var(--ms-ok-button-width,100%)}.ms-drop .ms-ok-button:hover{background-color:var(--ms-ok-button-bg-hover-color,#f9f9f9);color:var(--ms-ok-button-text-hover-color,#000)}.ms-search{box-sizing:border-box;display:inline-block;margin:var(--ms-search-margin,0);min-height:var(--ms-search-min-height,26px);padding:var(--ms-search-padding,4px);position:relative;white-space:nowrap;width:100%;z-index:var(--ms-search-zindex,10000)}.ms-search input{border:var(--ms-search-input-border,1px solid #aaa);border-radius:var(--ms-search-input-border-radius,5px);box-shadow:none;font-family:sans-serif;height:auto!important;margin:var(--ms-search-input-margin,0);min-height:var(--ms-search-input-min-height,24px);outline:0;padding:var(--ms-search-input-padding,0 5px);width:100%}.ms-drop ul{margin:var(--ms-drop-list-margin,0);overflow:auto;padding:var(--ms-drop-list-padding,0)}.ms-drop ul>li{align-items:var(--ms-drop-list-item-align-items,center);background-image:none;display:var(--ms-drop-list-item-display,list-item);list-style:none;padding:var(--ms-drop-list-item-padding,.25rem 8px);position:static}.ms-drop ul>li .disabled{cursor:default;filter:var(--ms-drop-list-item-disabled-filter,Alpha(Opacity=35));font-weight:400!important;opacity:var(--ms-drop-list-item-disabled-opacity,.35)}.ms-drop ul>li.multiple{display:block;float:left}.ms-drop ul>li.group{clear:both}.ms-drop ul>li.multiple label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.ms-drop ul>li label{cursor:pointer;display:block;font-weight:400;margin-bottom:var(--ms-label-margin-bottom,0);min-height:var(--ms-label-min-height,1.25rem);padding:var(--ms-label-padding,0 0 0 1.25rem);position:relative;white-space:nowrap}.ms-drop ul>li label.optgroup{font-weight:var(--ms-drop-optgroup-font-weight,bold)}.ms-drop ul>li.hide-radio{padding:var(--ms-drop-hide-radio-padding,0)}.ms-drop ul>li.hide-radio:focus,.ms-drop ul>li.hide-radio:hover{background-color:var(--ms-drop-hide-radio-hover-bgcolor,#f8f9fa)}.ms-drop ul>li.hide-radio.selected{background-color:var(--ms-drop-hide-radio-selected-bgcolor,#007bff);color:var(--ms-drop-hide-radio-selected-color,#fff)}.ms-drop ul>li.hide-radio label{margin-bottom:var(--ms-drop-hide-radio-label-margin-bottom,0);padding:var(--ms-drop-hide-radio-label-padding,5px 8px)}.ms-drop ul>li.hide-radio input{display:none}.ms-drop ul>li.option-level-1 label{padding-left:var(--ms-drop-list-item-level1-padding-left,28px)}.ms-drop ul>li.option-divider{border-top:var(--ms-drop-option-divider-border-top,1px solid #e9ecef);padding:var(--ms-drop-option-divider-padding,0)}.ms-drop input[type=checkbox],.ms-drop input[type=radio]{margin-left:var(--ms-drop-input-margin-left,-1.25rem);margin-top:var(--ms-drop-input-margin-top,.3rem);position:absolute}.ms-drop .ms-no-results{display:none}