simp-select 1.2.1 → 1.2.3

package/README.md

@@ -17,8 +17,8 @@ npm install simp-select --save
 ```
 Or you can load it via a script tag as follows:
 ```
-<script src="https://unpkg.com/simp-select@1.2.0/dist/simpleSelect.js" ></script>
-<script src="https://unpkg.com/simp-select@1.2.0/dist/polyfill.js" ></script> - for IE 11
+<script src="https://unpkg.com/simp-select@1.2.3/dist/simpleSelect.js" ></script>
+<script src="https://unpkg.com/simp-select@1.2.3/dist/polyfill.js" ></script> - for IE 11
 Or get last version
 <script src="https://unpkg.com/simp-select"></script>
 ```

package/dist/style.css

@@ -1 +1 @@
-:root{--simpS_bg:#fff;--simpS_pad_hor:15px;--simpS_height_top:40px;--simpS_color:#27272a;--simpS_color_light:#eae9e9;--simpS_color_cheked:#d9d7d7;--simpS_color_yes:green;--simpS_color_no:red;--simpS_color_placeholder:#5d5c5c;--simpS_color_dis:#8b8b8b;--simpS_status_bar:rgba(46,122,1,.67);--simpS_dropdownBg:var(--simpS_bg);--simpS_labelBg:var(--simpS_bg);--simpS_label_pad_hor:4px;--simpS_borderColor:var(--simpS_color);--simpS_DropDownBorderColor:var(--simpS_borderColor);--simpS_radius:4px;--simpS_f_size:16px;--simpS_f_shadow:0 0 3px 0 var(--simpS_color);--simpS_size_check:20px;--simpS_li_h:36px;--simpS_btn_h:34px;--simpS_btn_bg:#f9f9f9;--simpS_btn_bg_reverse:#eeecec}.SimpleSel{-webkit-box-sizing:border-box;box-sizing:border-box;color:#27272a;color:var(--simpS_color);font-size:16px;font-size:var(--simpS_f_size);position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SimpleSel--disabled{color:#8b8b8b;color:var(--simpS_color_dis);opacity:.8}.SimpleSel *,.SimpleSel :after,.SimpleSel :before{-webkit-box-sizing:border-box;box-sizing:border-box}.SimpleSel--float .SimpleSel__select_init{visibility:hidden}.SimpleSel__select_init{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;opacity:0;position:absolute;right:0;top:0;width:100%}.SimpleSel__select_init--native{z-index:5}.SimpleSel__bottom_control,.SimpleSel__control{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-ms-flex-line-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-content:center;align-items:center;-webkit-appearance:none;background-color:#f9f9f9;background-color:var(--simpS_btn_bg);border:none;border-radius:0;color:inherit;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font:inherit;height:34px;height:var(--simpS_btn_h);justify-content:center;line-height:normal;margin:0;outline:none;overflow:visible;padding:1px 10px;text-align:center;width:auto}.SimpleSel__bottom_control:hover,.SimpleSel__control:hover{background-color:#eeecec;background-color:var(--simpS_btn_bg_reverse)}.SimpleSel__list_item_icon,.SimpleSel__reset_all__icon,.SimpleSel__select_all__icon{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:1px solid;border-radius:4px;border-radius:var(--simpS_radius);display:-webkit-box;display:-ms-flexbox;display:flex;height:20px;height:var(--simpS_size_check);justify-content:center;margin-right:7px;position:relative;width:20px;width:var(--simpS_size_check)}.SimpleSel__list_item_icon:before,.SimpleSel__select_all__icon:before{border:solid;border-width:0 2px 2px 0;content:"";display:block;height:11px;height:calc(var(--simpS_size_check)/2 + 1px);left:4px;top:1px;-webkit-transform:rotate(45deg) translate(-17%,-10%);transform:rotate(45deg) translate(-17%,-10%);-webkit-transition:all .25s;transition:all .25s;width:6.66667px;width:calc(var(--simpS_size_check)/3)}.SimpleSel__top{position:relative}.SimpleSel__top_body{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;background-color:#fff;background-color:var(--simpS_bg);border:2px solid #27272a;border:2px solid var(--simpS_borderColor);border-radius:4px;border-radius:var(--simpS_radius);color:currentColor;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;height:var(--simpS_height_top);justify-content:space-between;padding:5px 0 5px 15px;padding:5px 0 5px var(--simpS_pad_hor);position:relative}.SimpleSel--disabled .SimpleSel__top_body{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SimpleSel__top_body:focus-visible{-webkit-box-shadow:0 0 3px 0 #27272a;box-shadow:0 0 3px 0 #27272a;-webkit-box-shadow:var(--simpS_f_shadow);box-shadow:var(--simpS_f_shadow)}.SimpleSel__title{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.SimpleSel__icon{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;height:var(--simpS_height_top);justify-content:center;position:relative;width:40px;width:var(--simpS_height_top)}.SimpleSel__icon:after{border-bottom:2px solid;border-right:2px solid;content:"";display:inline;height:.5em;left:50%;position:absolute;top:calc(50% - 2px);-webkit-transform:rotate(45deg) translate(-50%,-50%);transform:rotate(45deg) translate(-50%,-50%);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:transform .25s,top .25s;transition:transform .25s,top .25s;width:.5em}.SimpleSel--open .SimpleSel__icon:after{top:calc(50% + 2px);-webkit-transform:rotate(225deg) translate(-50%,-50%);transform:rotate(225deg) translate(-50%,-50%)}.SimpleSel--always_open .SimpleSel__icon{display:none}.SimpleSel--single[data-count-checked-full="0"] .SimpleSel__title,.SimpleSel__list_item--not_value,.SimpleSel__title--placeholder{color:#5d5c5c;color:var(--simpS_color_placeholder)}.SimpleSel__body{-ms-scroll-chaining:none;background-color:#fff;background-color:var(--simpS_dropdownBg);border:1px solid #27272a;border:1px solid var(--simpS_DropDownBorderColor);border-radius:4px;border-radius:var(--simpS_radius);max-height:0;opacity:0;overflow:hidden;overflow-y:auto;overscroll-behavior:contain;position:absolute;-webkit-transition:all .25s;transition:all .25s;visibility:hidden;width:100%;z-index:3}.SimpleSel--body-always_open{max-height:none;opacity:1;position:relative;top:auto;visibility:visible}.SimpleSel:not(.SimpleSel--up) .SimpleSel--multi{margin-top:2px;top:100%}.SimpleSel--up:not(.SimpleSel--float) .SimpleSel__body{bottom:100%;margin-bottom:2px}.SimpleSel--open .SimpleSel__body{max-height:230px;opacity:1;visibility:visible}.SimpleSel__search_wrap{padding:5px 10px}.SimpleSel__search{border-radius:4px;border-radius:var(--simpS_radius);padding:2px 15px;padding:2px var(--simpS_pad_hor);width:100%}.SimpleSel__search--top{display:none;height:100%;left:0;opacity:0;position:absolute;top:0}.SimpleSel--open .SimpleSel__search--top{display:block;opacity:1}.SimpleSel__search--dropdown{border:none;border-bottom:1px solid;border-radius:0;height:34px;height:var(--simpS_btn_h)}.SimpleSel__controls{border-bottom:1px solid;display:-webkit-box;display:-ms-flexbox;display:flex}.SimpleSel__control{-webkit-box-flex:1;-ms-flex:1;flex:1}.SimpleSel__control+.SimpleSel__control{border-left:1px solid}.SimpleSel__select_all__icon{border-color:green;border-color:var(--simpS_color_yes);border-radius:50%;color:#d9d7d7;color:var(--simpS_color_cheked)}.SimpleSel[data-count-checked-full="0"] .SimpleSel__select_all__icon{color:#eae9e9;color:var(--simpS_color_light)}.SimpleSel[data-check-all-multi=yes] .SimpleSel__select_all__icon{color:green;color:var(--simpS_color_yes)}.SimpleSel__reset_all__icon{border-radius:50%;color:red;color:var(--simpS_color_no);position:relative}.SimpleSel__reset_all__icon:after,.SimpleSel__reset_all__icon:before{background-color:currentColor;content:" ";height:60%;left:8px;left:calc(var(--simpS_f_size)/2);position:absolute;width:2px}.SimpleSel__reset_all__icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.SimpleSel__reset_all__icon:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.SimpleSel__bottom_controls{border-top:1px solid;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:5px;position:sticky}.SimpleSel__bottom_controls--hide{display:none}.SimpleSel--float .SimpleSel__bottom_controls--hide{display:-webkit-box;display:-ms-flexbox;display:flex}.SimpleSel__bottom_control--hide{display:none}.SimpleSel__bottom_control{-webkit-box-flex:1;-ms-flex:1;flex:1}.SimpleSel__bottom_control--ok{text-transform:uppercase}.SimpleSel__bottom_control+.SimpleSel__bottom_control{border-left:1px solid}.SimpleSel__list{list-style-type:none;margin:0;padding:0}.SimpleSel__group_items:not(:first-child){margin-top:5px}.SimpleSel__group_title{background-color:#eae9e9;background-color:var(--simpS_color_light);cursor:default;display:block;font-size:1.02em;font-weight:700;margin-bottom:2px;padding:6px 10px}.SimpleSel__group{list-style-type:none;margin:0;padding:0}.SimpleSel__list_item{cursor:pointer}.SimpleSel__list_item:not(:last-child){border-bottom:1px solid #eae9e9;border-bottom:1px solid var(--simpS_color_light)}.SimpleSel__list_item--disabled{cursor:default;opacity:.5}.SimpleSel__list_item_body{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:36px;min-height:var(--simpS_li_h);padding:5px 15px;padding:5px var(--simpS_pad_hor)}@media (hover:hover){.SimpleSel__list_item:not(.SimpleSel__list_item--disabled) .SimpleSel__list_item_body:hover{background-color:#eae9e9;background-color:var(--simpS_color_light);cursor:pointer}}.SimpleSel--single .SimpleSel__list_item--checked{background-color:#d9d7d7;background-color:var(--simpS_color_cheked)}.SimpleSel__list_item:not(.SimpleSel__list_item--checked) .SimpleSel__list_item_icon:before{height:0;opacity:0;width:0}.SimpleSel__close{display:none}.SimpleSel--body_open{overflow:hidden;position:relative}.SimpleSel--float .SimpleSel__body{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:none;-ms-flex-direction:column;flex-direction:column;left:50%;max-height:90%;max-width:90%;overflow:hidden;overflow-y:auto;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.SimpleSel--open{z-index:7}.SimpleSel--float .SimpleSel__bottom_control--hide,.SimpleSel--float.SimpleSel--open .SimpleSel__body{display:-webkit-box;display:-ms-flexbox;display:flex}.SimpleSel--float .SimpleSel__list{-webkit-box-flex:1;-ms-flex:1;flex:1}.SimpleSel__debounce_progress_bar{potransition-property:width;background-color:rgba(46,122,1,.67);background-color:var(--simpS_status_bar);bottom:0;height:5px;left:0;position:absolute;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transition-timing-function:linear;transition-timing-function:linear;width:0}.SimpleSel__debounce_progress_bar.this--animating{-webkit-transition-duration:1ms;transition-duration:1ms;-webkit-transition-duration:var(--duration,1ms);transition-duration:var(--duration,1ms);width:100%}.SimpleSel--label_mode.SimpleSel--fill_without_value .SimpleSel__title{opacity:0;pointer-events:none;visibility:hidden}.SimpleSel__label{left:15px;left:var(--simpS_pad_hor);pointer-events:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all .2s ease;transition:all .2s ease}.SimpleSel--fill_with_value .SimpleSel__label{background-color:#fff;background-color:var(--simpS_labelBg);padding:0 4px;padding:0 var(--simpS_label_pad_hor);top:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
+:root{--simpS_bg:#fff;--simpS_pad_hor:15px;--simpS_height_top:40px;--simpS_color:#27272a;--simpS_color_light:#eae9e9;--simpS_color_cheked:#d9d7d7;--simpS_color_yes:green;--simpS_color_no:red;--simpS_color_placeholder:#5d5c5c;--simpS_color_dis:#8b8b8b;--simpS_status_bar:rgba(46,122,1,.67);--simpS_dropdownBg:var(--simpS_bg);--simpS_labelBg:var(--simpS_bg);--simpS_label_left:var(--simpS_pad_hor);--simpS_label_pad_hor_active:4px;--simpS_borderColor:var(--simpS_color);--simpS_DropDownBorderColor:var(--simpS_borderColor);--simpS_radius:4px;--simpS_f_size:16px;--simpS_f_shadow:0 0 3px 0 var(--simpS_color);--simpS_size_check:20px;--simpS_li_h:36px;--simpS_btn_h:34px;--simpS_btn_bg:#f9f9f9;--simpS_btn_bg_reverse:#eeecec}.SimpleSel{-webkit-box-sizing:border-box;box-sizing:border-box;color:#27272a;color:var(--simpS_color);font-size:16px;font-size:var(--simpS_f_size);position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SimpleSel--disabled{color:#8b8b8b;color:var(--simpS_color_dis);opacity:.8}.SimpleSel *,.SimpleSel :after,.SimpleSel :before{-webkit-box-sizing:border-box;box-sizing:border-box}.SimpleSel--float .SimpleSel__select_init{visibility:hidden}.SimpleSel__select_init{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;opacity:0;position:absolute;right:0;top:0;width:100%}.SimpleSel__select_init--native{z-index:5}.SimpleSel__bottom_control,.SimpleSel__control{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-ms-flex-line-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-content:center;align-items:center;-webkit-appearance:none;background-color:#f9f9f9;background-color:var(--simpS_btn_bg);border:none;border-radius:0;color:inherit;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font:inherit;height:34px;height:var(--simpS_btn_h);justify-content:center;line-height:normal;margin:0;outline:none;overflow:visible;padding:1px 10px;text-align:center;width:auto}.SimpleSel__bottom_control:hover,.SimpleSel__control:hover{background-color:#eeecec;background-color:var(--simpS_btn_bg_reverse)}.SimpleSel__list_item_icon,.SimpleSel__reset_all__icon,.SimpleSel__select_all__icon{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:1px solid;border-radius:4px;border-radius:var(--simpS_radius);display:-webkit-box;display:-ms-flexbox;display:flex;height:20px;height:var(--simpS_size_check);justify-content:center;margin-right:7px;position:relative;width:20px;width:var(--simpS_size_check)}.SimpleSel__list_item_icon:before,.SimpleSel__select_all__icon:before{border:solid;border-width:0 2px 2px 0;content:"";display:block;height:11px;height:calc(var(--simpS_size_check)/2 + 1px);left:4px;top:1px;-webkit-transform:rotate(45deg) translate(-17%,-10%);transform:rotate(45deg) translate(-17%,-10%);-webkit-transition:all .25s;transition:all .25s;width:6.66667px;width:calc(var(--simpS_size_check)/3)}.SimpleSel__top{position:relative}.SimpleSel__top_body{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;background-color:#fff;background-color:var(--simpS_bg);border:2px solid #27272a;border:2px solid var(--simpS_borderColor);border-radius:4px;border-radius:var(--simpS_radius);color:currentColor;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;height:var(--simpS_height_top);justify-content:space-between;padding:5px 0 5px 15px;padding:5px 0 5px var(--simpS_pad_hor);position:relative}.SimpleSel--disabled .SimpleSel__top_body{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SimpleSel__top_body:focus-visible{-webkit-box-shadow:0 0 3px 0 #27272a;box-shadow:0 0 3px 0 #27272a;-webkit-box-shadow:var(--simpS_f_shadow);box-shadow:var(--simpS_f_shadow)}.SimpleSel__title{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.SimpleSel__icon{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;height:var(--simpS_height_top);justify-content:center;position:relative;width:40px;width:var(--simpS_height_top)}.SimpleSel__icon:after{border-bottom:2px solid;border-right:2px solid;content:"";display:inline;height:.5em;left:50%;position:absolute;top:calc(50% - 2px);-webkit-transform:rotate(45deg) translate(-50%,-50%);transform:rotate(45deg) translate(-50%,-50%);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:transform .25s,top .25s;transition:transform .25s,top .25s;width:.5em}.SimpleSel--open .SimpleSel__icon:after{top:calc(50% + 2px);-webkit-transform:rotate(225deg) translate(-50%,-50%);transform:rotate(225deg) translate(-50%,-50%)}.SimpleSel--always_open .SimpleSel__icon{display:none}.SimpleSel--single[data-count-checked-full="0"] .SimpleSel__title,.SimpleSel__list_item--not_value,.SimpleSel__title--placeholder{color:#5d5c5c;color:var(--simpS_color_placeholder)}.SimpleSel__body{-ms-scroll-chaining:none;background-color:#fff;background-color:var(--simpS_dropdownBg);border:1px solid #27272a;border:1px solid var(--simpS_DropDownBorderColor);border-radius:4px;border-radius:var(--simpS_radius);max-height:0;opacity:0;overflow:hidden;overflow-y:auto;overscroll-behavior:contain;position:absolute;-webkit-transition:all .25s;transition:all .25s;visibility:hidden;width:100%;z-index:3}.SimpleSel--body-always_open{max-height:none;opacity:1;position:relative;top:auto;visibility:visible}.SimpleSel:not(.SimpleSel--up) .SimpleSel--multi{margin-top:2px;top:100%}.SimpleSel--up:not(.SimpleSel--float) .SimpleSel__body{bottom:100%;margin-bottom:2px}.SimpleSel--open .SimpleSel__body{max-height:230px;opacity:1;visibility:visible}.SimpleSel__search_wrap{padding:5px 10px}.SimpleSel__search{border-radius:4px;border-radius:var(--simpS_radius);padding:2px 15px;padding:2px var(--simpS_pad_hor);width:100%}.SimpleSel__search--top{display:none;height:100%;left:0;opacity:0;position:absolute;top:0}.SimpleSel--open .SimpleSel__search--top{display:block;opacity:1}.SimpleSel__search--dropdown{border:none;border-bottom:1px solid;border-radius:0;height:34px;height:var(--simpS_btn_h)}.SimpleSel__controls{border-bottom:1px solid;display:-webkit-box;display:-ms-flexbox;display:flex}.SimpleSel__control{-webkit-box-flex:1;-ms-flex:1;flex:1}.SimpleSel__control+.SimpleSel__control{border-left:1px solid}.SimpleSel__select_all__icon{border-color:green;border-color:var(--simpS_color_yes);border-radius:50%;color:#d9d7d7;color:var(--simpS_color_cheked)}.SimpleSel[data-count-checked-full="0"] .SimpleSel__select_all__icon{color:#eae9e9;color:var(--simpS_color_light)}.SimpleSel[data-check-all-multi=yes] .SimpleSel__select_all__icon{color:green;color:var(--simpS_color_yes)}.SimpleSel__reset_all__icon{border-radius:50%;color:red;color:var(--simpS_color_no);position:relative}.SimpleSel__reset_all__icon:after,.SimpleSel__reset_all__icon:before{background-color:currentColor;content:" ";height:60%;left:8px;left:calc(var(--simpS_f_size)/2);position:absolute;width:2px}.SimpleSel__reset_all__icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.SimpleSel__reset_all__icon:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.SimpleSel__bottom_controls{border-top:1px solid;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:5px;position:sticky}.SimpleSel__bottom_controls--hide{display:none}.SimpleSel--float .SimpleSel__bottom_controls--hide{display:-webkit-box;display:-ms-flexbox;display:flex}.SimpleSel__bottom_control--hide{display:none}.SimpleSel__bottom_control{-webkit-box-flex:1;-ms-flex:1;flex:1}.SimpleSel__bottom_control--ok{text-transform:uppercase}.SimpleSel__bottom_control+.SimpleSel__bottom_control{border-left:1px solid}.SimpleSel__list{list-style-type:none;margin:0;padding:0}.SimpleSel__group_items:not(:first-child){margin-top:5px}.SimpleSel__group_title{background-color:#eae9e9;background-color:var(--simpS_color_light);cursor:default;display:block;font-size:1.02em;font-weight:700;margin-bottom:2px;padding:6px 10px}.SimpleSel__group{list-style-type:none;margin:0;padding:0}.SimpleSel__list_item{cursor:pointer}.SimpleSel__list_item:not(:last-child){border-bottom:1px solid #eae9e9;border-bottom:1px solid var(--simpS_color_light)}.SimpleSel__list_item--disabled{cursor:default;opacity:.5}.SimpleSel__list_item_body{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:36px;min-height:var(--simpS_li_h);padding:5px 15px;padding:5px var(--simpS_pad_hor)}@media (hover:hover){.SimpleSel__list_item:not(.SimpleSel__list_item--disabled) .SimpleSel__list_item_body:hover{background-color:#eae9e9;background-color:var(--simpS_color_light);cursor:pointer}}.SimpleSel--single .SimpleSel__list_item--checked{background-color:#d9d7d7;background-color:var(--simpS_color_cheked)}.SimpleSel__list_item:not(.SimpleSel__list_item--checked) .SimpleSel__list_item_icon:before{height:0;opacity:0;width:0}.SimpleSel__close{display:none}.SimpleSel--body_open{overflow:hidden;position:relative}.SimpleSel--float .SimpleSel__body{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:none;-ms-flex-direction:column;flex-direction:column;left:50%;max-height:90%;max-width:90%;overflow:hidden;overflow-y:auto;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.SimpleSel--open{z-index:7}.SimpleSel--float .SimpleSel__bottom_control--hide,.SimpleSel--float.SimpleSel--open .SimpleSel__body{display:-webkit-box;display:-ms-flexbox;display:flex}.SimpleSel--float .SimpleSel__list{-webkit-box-flex:1;-ms-flex:1;flex:1}.SimpleSel__debounce_progress_bar{potransition-property:width;background-color:rgba(46,122,1,.67);background-color:var(--simpS_status_bar);bottom:0;height:5px;left:0;position:absolute;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transition-timing-function:linear;transition-timing-function:linear;width:0}.SimpleSel__debounce_progress_bar.this--animating{-webkit-transition-duration:1ms;transition-duration:1ms;-webkit-transition-duration:var(--duration,1ms);transition-duration:var(--duration,1ms);width:100%}.SimpleSel--label_mode.SimpleSel--fill_without_value .SimpleSel__title{opacity:0;pointer-events:none;visibility:hidden}.SimpleSel__label{left:15px;left:var(--simpS_label_left);pointer-events:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all .2s ease;transition:all .2s ease}.SimpleSel--fill_with_value .SimpleSel__label{background-color:#fff;background-color:var(--simpS_labelBg);padding:0 4px;padding:0 var(--simpS_label_pad_hor_active);top:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "simp-select",
-	"version": "1.2.1",
+	"version": "1.2.3",
 	"description": "simp-select - this plugin replaces the select",
 	"main": "dist/simpleSelect.js",
 	"types": "dist/simpleSelect.d.ts",

package/src/style.css

@@ -1,496 +1,497 @@
-:root {
-	--simpS_bg: white;
-	--simpS_pad_hor: 15px;
-	--simpS_height_top: 40px;
-	--simpS_color: #27272a;
-	--simpS_color_light: #eae9e9;
-	--simpS_color_cheked: #d9d7d7;
-	--simpS_color_yes: green;
-	--simpS_color_no: red;
-	--simpS_color_placeholder: #5d5c5c;
-	--simpS_color_dis: #8b8b8b;
-	--simpS_status_bar: rgba(46, 122, 1, 0.67);
-	--simpS_dropdownBg: var(--simpS_bg);
-	--simpS_labelBg: var(--simpS_bg);
-	--simpS_label_pad_hor: 4px;
-	--simpS_borderColor: var(--simpS_color);
-	--simpS_DropDownBorderColor: var(--simpS_borderColor);
-
-	--simpS_radius: 4px;
-	--simpS_f_size: 16px;
-	--simpS_f_shadow: 0 0 3px 0 var(--simpS_color);
-
-
-	--simpS_size_check: 20px;
-
-	--simpS_li_h: 36px;
-
-	--simpS_btn_h: 34px;
-	--simpS_btn_bg: #f9f9f9;
-	--simpS_btn_bg_reverse: #eeecec;
-
-}
-.SimpleSel {
-	position: relative;
-	box-sizing: border-box;
-	color: var(--simpS_color);
-	font-size: var(--simpS_f_size);
-	user-select: none;
-}
-.SimpleSel--disabled {
-	color: var(--simpS_color_dis);
-	opacity: .8;
-
-}
-
-/* start all setting */
-
-.SimpleSel * {
-	box-sizing: border-box;
-}
-.SimpleSel :after,
-.SimpleSel :before {
-	box-sizing: border-box;
-}
-
-.SimpleSel--float .SimpleSel__select_init {
-	visibility: hidden;
-}
-
-.SimpleSel__select_init {
-	position: absolute;
-	opacity: 0;
-	top: 0;
-	right: 0;
-	width: 100%;
-	height: 100%;
-	/*z-index: 2;*/
-	box-sizing: border-box;
-}
-.SimpleSel__select_init--native {
-	z-index: 5;
-}
-
-/* end all setting */
-
-/* start Buttons */
-.SimpleSel__bottom_control,
-.SimpleSel__control {
-	margin: 0;
-	width: auto;
-	overflow: visible;
-	color: inherit;
-	font: inherit;
-	line-height: normal;
-	-webkit-font-smoothing: inherit;
-	-moz-osx-font-smoothing: inherit;
-	-webkit-appearance: none;
-	outline: none;
-	cursor: pointer;
-
-	background-color: var(--simpS_btn_bg);
-	padding: 1px 10px;
-	text-align: center;
-	border-radius: 0;
-	border: none;
-	display: flex;
-	align-content: center;
-	align-items: center;
-	justify-content: center;
-	height: var(--simpS_btn_h);
-}
-.SimpleSel__bottom_control:hover,
-.SimpleSel__control:hover {
-	background-color: var(--simpS_btn_bg_reverse);
-}
-/* end Buttons */
-
-/* start Checkbox */
-.SimpleSel__select_all__icon,
-.SimpleSel__list_item_icon,
-.SimpleSel__reset_all__icon {
-	width: var(--simpS_size_check);
-	height: var(--simpS_size_check);
-	position: relative;
-	border: 1px solid currentColor;
-	margin-right: 7px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: var(--simpS_radius);
-}
-.SimpleSel__list_item_icon:before,
-.SimpleSel__select_all__icon:before {
-	content: "";
-	display: block;
-	transition: 0.25s all;
-	transform: rotate(45deg) translate(-17%, -10%);
-	top: 1px;
-	left: 4px;
-	/*width: 7px;*/
-	width: calc(var(--simpS_size_check) / 3);
-	height: calc(var(--simpS_size_check) / 2 + 1px);
-	border: solid currentColor;
-	border-width: 0 2px 2px 0;
-}
-/* end Checkbox */
-
-
-
-.SimpleSel__top {
-	position: relative;
-}
-.SimpleSel__top_body {
-	position: relative;
-
-	height: var(--simpS_height_top);
-	padding: 5px 0 5px var(--simpS_pad_hor);
-
-	background-color: var(--simpS_bg);
-	color: currentColor;
-	border: 2px solid var(--simpS_borderColor);
-	border-radius: var(--simpS_radius);
-
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-
-	cursor: pointer;
-}
-
-.SimpleSel--disabled .SimpleSel__top_body {
-	cursor: default;
-	user-select: none;
-}
-
-.SimpleSel__top_body:focus-visible {
-	box-shadow: var(--simpS_f_shadow);
-}
-
-.SimpleSel__title {
-	flex: 1;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	text-align: left;
-}
-
-.SimpleSel__icon {
-	width: var(--simpS_height_top);
-	height: var(--simpS_height_top);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-}
-.SimpleSel__icon:after {
-	content: '';
-	transition: .25s transform, .25s top;
-	width: 0.5em;
-	height: 0.5em;
-	border-bottom: 2px currentColor solid;
-	border-right: 2px currentColor solid;
-	display: inline;
-	position: absolute;
-	transform-origin: left top;
-	top: calc(50% - 2px);
-	left: 50%;
-	transform: rotate(45deg) translate(-50%,-50%);
-}
-.SimpleSel--open .SimpleSel__icon:after {
-	top: calc(50% + 2px);
-	transform: rotate(225deg) translate(-50%,-50%);
-}
-
-.SimpleSel--always_open .SimpleSel__icon {
-	display: none;
-}
-
-.SimpleSel__list_item--not_value,
-.SimpleSel--single[data-count-checked-full="0"] .SimpleSel__title,
-.SimpleSel__title--placeholder {
-	color: var(--simpS_color_placeholder);
-}
-
-
-.SimpleSel__body {
-	max-height: 0;
-	opacity: 0;
-	visibility: hidden;
-	overflow: hidden;
-	overflow-y: auto;
-	position: absolute;
-	transition: .25s all;
-	width: 100%;
-	border: 1px solid var(--simpS_DropDownBorderColor);
-	z-index: 3;
-	border-radius: var(--simpS_radius);
-	background-color: var(--simpS_dropdownBg);
-	overscroll-behavior: contain;
-}
-.SimpleSel--body-always_open {
-	max-height: none;
-	position: relative;
-	top: auto;
-	opacity: 1;
-	visibility: visible;
-}
-
-.SimpleSel:not(.SimpleSel--up) .SimpleSel--multi {
-	top: 100%;
-	margin-top: 2px;
-}
-
-.SimpleSel--up:not(.SimpleSel--float) .SimpleSel__body {
-	bottom: 100%;
-	margin-bottom: 2px;
-}
-
-.SimpleSel--open .SimpleSel__body {
-	max-height: 230px;
-	opacity: 1;
-	visibility: visible;
-}
-
-.SimpleSel__search_wrap{
-	padding: 5px 10px;
-}
-.SimpleSel__search{
-	width: 100%;
-	border-radius: var(--simpS_radius);
-	padding: 2px var(--simpS_pad_hor);
-}
-.SimpleSel__search--top {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 100%;
-	opacity: 0;
-	display: none;
-}
-.SimpleSel--open .SimpleSel__search--top {
-	opacity: 1;
-	display: block;
-}
-.SimpleSel__search--dropdown {
-	border: none;
-	border-bottom: 1px solid currentColor;
-	border-radius: 0;
-	height: var(--simpS_btn_h);
-}
-
-/* controls */
-.SimpleSel__controls {
-	display: flex;
-	border-bottom: 1px solid currentColor;
-}
-.SimpleSel__control {
-	flex: 1;
-}
-.SimpleSel__control + .SimpleSel__control {
-	border-left: 1px solid;
-}
-.SimpleSel__select_all__icon {
-	color: var(--simpS_color_cheked);
-	border-radius: 50%;
-	border-color: var(--simpS_color_yes);
-}
-.SimpleSel[data-count-checked-full="0"] .SimpleSel__select_all__icon {
-	color: var(--simpS_color_light);
-}
-.SimpleSel[data-check-all-multi="yes"] .SimpleSel__select_all__icon {
-	color: var(--simpS_color_yes);
-}
-
-.SimpleSel__reset_all__icon {
-	position: relative;
-	border-radius: 50%;
-	color: var(--simpS_color_no);
-
-}
-.SimpleSel__reset_all__icon:before, .SimpleSel__reset_all__icon:after {
-	position: absolute;
-	left: calc(var(--simpS_f_size) / 2);
-	content: ' ';
-	height: 60%;
-	width: 2px;
-	background-color: currentColor;
-}
-.SimpleSel__reset_all__icon:before {
-	transform: rotate(45deg);
-}
-.SimpleSel__reset_all__icon:after {
-	transform: rotate(-45deg);
-}
-
-
-.SimpleSel__bottom_controls {
-	display: flex;
-	position: sticky;
-	border-top: 1px solid currentColor;
-	margin-top: 5px;
-	bottom: 0;
-}
-.SimpleSel__bottom_controls--hide {
-	display: none;
-}
-.SimpleSel--float .SimpleSel__bottom_controls--hide{
-	display: flex;
-}
-.SimpleSel__bottom_control--hide {
-	display: none;
-}
-.SimpleSel__bottom_control {
-	flex: 1;
-}
-.SimpleSel__bottom_control--ok{
-	text-transform: uppercase;
-}
-.SimpleSel__bottom_control + .SimpleSel__bottom_control {
-	border-left: 1px solid  ;
-}
-
-
-/**List*/
-.SimpleSel__list {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-}
-.SimpleSel__group_items:not(:first-child) {
-	margin-top: 5px;
-}
-.SimpleSel__group_title {
-	font-weight: bold;
-	cursor: default;
-	display: block;
-	padding: 6px 10px ;
-	margin-bottom: 2px;
-	font-size: 1.02em;
-	background-color: var(--simpS_color_light);
-}
-
-.SimpleSel__group {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-}
-
-
-
-.SimpleSel__list_item {
-	cursor: pointer;
-}
-.SimpleSel__list_item:not(:last-child) {
-	border-bottom: 1px solid var(--simpS_color_light);
-}
-
-.SimpleSel__list_item--disabled {
-	opacity: .5;
-	cursor: default;
-}
-
-.SimpleSel__list_item_body {
-	padding: 5px var(--simpS_pad_hor);
-	display: flex;
-	align-items: center;
-	min-height: var(--simpS_li_h);
-}
-@media (hover: hover) {
-	.SimpleSel__list_item:not(.SimpleSel__list_item--disabled) {
-		.SimpleSel__list_item_body:hover {
-			cursor: pointer;
-			background-color: var(--simpS_color_light);
-		}
-	}
-}
-
-
-.SimpleSel--single .SimpleSel__list_item--checked {
-	background-color: var(--simpS_color_cheked);
-}
-
-.SimpleSel__list_item:not(.SimpleSel__list_item--checked) .SimpleSel__list_item_icon:before {
-	opacity: 0;
-	width: 0;
-	height: 0;
-}
-
-.SimpleSel__close {
-	display: none;
-}
-
-/* FLOAT */
-.SimpleSel--body_open {
-	overflow: hidden;
-	position: relative;
-}
-
-
-.SimpleSel--float .SimpleSel__body {
-	position: fixed;
-	max-width: 90%;
-	max-height: 90%;
-	left: 50%;
-	top: 50%;
-	overflow: hidden;
-	overflow-y: auto;
-	transform: translate(-50%, -50%);
-	flex-direction: column;
-	display: none;
-}
-.SimpleSel--open {
-	z-index: 7;
-}
-.SimpleSel--float.SimpleSel--open .SimpleSel__body{
-	display: flex;
-}
-
-.SimpleSel--float .SimpleSel__bottom_control--hide {
-	display: flex;
-}
-.SimpleSel--float .SimpleSel__list {
-	flex: 1;
-}
-
-
-.SimpleSel__debounce_progress_bar {
-	transition-timing-function: linear;
-	potransition-property: width;
-	width: 0;
-	height: 5px;
-	background-color: var(--simpS_status_bar);
-	transition-duration: 0ms;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-
-
-}
-.SimpleSel__debounce_progress_bar.this--animating {
-	width: 100%;
-	transition-duration: var(--duration, 1ms);
-}
-
-/**  **/
-.SimpleSel--label_mode.SimpleSel--fill_without_value {
-	.SimpleSel__title {
-		opacity: 0;
-		visibility: hidden;
-		pointer-events: none;
-	}
-}
-.SimpleSel__label {
-	position: absolute;
-	top: 50%;
-	left: var(--simpS_label_pad_hor);
-	transform: translateY(-50%);
-	transition: all 0.2s ease;
-	pointer-events: none;
-}
-.SimpleSel--fill_with_value .SimpleSel__label {
-	top: 0;
-	transform: translateY(-50%);
-	background-color: var(--simpS_labelBg);
-	padding: 0 var(--simpS_label_pad_hor);
-}
+:root {
+	--simpS_bg: white;
+	--simpS_pad_hor: 15px;
+	--simpS_height_top: 40px;
+	--simpS_color: #27272a;
+	--simpS_color_light: #eae9e9;
+	--simpS_color_cheked: #d9d7d7;
+	--simpS_color_yes: green;
+	--simpS_color_no: red;
+	--simpS_color_placeholder: #5d5c5c;
+	--simpS_color_dis: #8b8b8b;
+	--simpS_status_bar: rgba(46, 122, 1, 0.67);
+	--simpS_dropdownBg: var(--simpS_bg);
+	--simpS_labelBg: var(--simpS_bg);
+	--simpS_label_left: var(--simpS_pad_hor);
+	--simpS_label_pad_hor_active: 4px;
+	--simpS_borderColor: var(--simpS_color);
+	--simpS_DropDownBorderColor: var(--simpS_borderColor);
+
+	--simpS_radius: 4px;
+	--simpS_f_size: 16px;
+	--simpS_f_shadow: 0 0 3px 0 var(--simpS_color);
+
+
+	--simpS_size_check: 20px;
+
+	--simpS_li_h: 36px;
+
+	--simpS_btn_h: 34px;
+	--simpS_btn_bg: #f9f9f9;
+	--simpS_btn_bg_reverse: #eeecec;
+
+}
+.SimpleSel {
+	position: relative;
+	box-sizing: border-box;
+	color: var(--simpS_color);
+	font-size: var(--simpS_f_size);
+	user-select: none;
+}
+.SimpleSel--disabled {
+	color: var(--simpS_color_dis);
+	opacity: .8;
+
+}
+
+/* start all setting */
+
+.SimpleSel * {
+	box-sizing: border-box;
+}
+.SimpleSel :after,
+.SimpleSel :before {
+	box-sizing: border-box;
+}
+
+.SimpleSel--float .SimpleSel__select_init {
+	visibility: hidden;
+}
+
+.SimpleSel__select_init {
+	position: absolute;
+	opacity: 0;
+	top: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	/*z-index: 2;*/
+	box-sizing: border-box;
+}
+.SimpleSel__select_init--native {
+	z-index: 5;
+}
+
+/* end all setting */
+
+/* start Buttons */
+.SimpleSel__bottom_control,
+.SimpleSel__control {
+	margin: 0;
+	width: auto;
+	overflow: visible;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	-webkit-font-smoothing: inherit;
+	-moz-osx-font-smoothing: inherit;
+	-webkit-appearance: none;
+	outline: none;
+	cursor: pointer;
+
+	background-color: var(--simpS_btn_bg);
+	padding: 1px 10px;
+	text-align: center;
+	border-radius: 0;
+	border: none;
+	display: flex;
+	align-content: center;
+	align-items: center;
+	justify-content: center;
+	height: var(--simpS_btn_h);
+}
+.SimpleSel__bottom_control:hover,
+.SimpleSel__control:hover {
+	background-color: var(--simpS_btn_bg_reverse);
+}
+/* end Buttons */
+
+/* start Checkbox */
+.SimpleSel__select_all__icon,
+.SimpleSel__list_item_icon,
+.SimpleSel__reset_all__icon {
+	width: var(--simpS_size_check);
+	height: var(--simpS_size_check);
+	position: relative;
+	border: 1px solid currentColor;
+	margin-right: 7px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--simpS_radius);
+}
+.SimpleSel__list_item_icon:before,
+.SimpleSel__select_all__icon:before {
+	content: "";
+	display: block;
+	transition: 0.25s all;
+	transform: rotate(45deg) translate(-17%, -10%);
+	top: 1px;
+	left: 4px;
+	/*width: 7px;*/
+	width: calc(var(--simpS_size_check) / 3);
+	height: calc(var(--simpS_size_check) / 2 + 1px);
+	border: solid currentColor;
+	border-width: 0 2px 2px 0;
+}
+/* end Checkbox */
+
+
+
+.SimpleSel__top {
+	position: relative;
+}
+.SimpleSel__top_body {
+	position: relative;
+
+	height: var(--simpS_height_top);
+	padding: 5px 0 5px var(--simpS_pad_hor);
+
+	background-color: var(--simpS_bg);
+	color: currentColor;
+	border: 2px solid var(--simpS_borderColor);
+	border-radius: var(--simpS_radius);
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	cursor: pointer;
+}
+
+.SimpleSel--disabled .SimpleSel__top_body {
+	cursor: default;
+	user-select: none;
+}
+
+.SimpleSel__top_body:focus-visible {
+	box-shadow: var(--simpS_f_shadow);
+}
+
+.SimpleSel__title {
+	flex: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: left;
+}
+
+.SimpleSel__icon {
+	width: var(--simpS_height_top);
+	height: var(--simpS_height_top);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+}
+.SimpleSel__icon:after {
+	content: '';
+	transition: .25s transform, .25s top;
+	width: 0.5em;
+	height: 0.5em;
+	border-bottom: 2px currentColor solid;
+	border-right: 2px currentColor solid;
+	display: inline;
+	position: absolute;
+	transform-origin: left top;
+	top: calc(50% - 2px);
+	left: 50%;
+	transform: rotate(45deg) translate(-50%,-50%);
+}
+.SimpleSel--open .SimpleSel__icon:after {
+	top: calc(50% + 2px);
+	transform: rotate(225deg) translate(-50%,-50%);
+}
+
+.SimpleSel--always_open .SimpleSel__icon {
+	display: none;
+}
+
+.SimpleSel__list_item--not_value,
+.SimpleSel--single[data-count-checked-full="0"] .SimpleSel__title,
+.SimpleSel__title--placeholder {
+	color: var(--simpS_color_placeholder);
+}
+
+
+.SimpleSel__body {
+	max-height: 0;
+	opacity: 0;
+	visibility: hidden;
+	overflow: hidden;
+	overflow-y: auto;
+	position: absolute;
+	transition: .25s all;
+	width: 100%;
+	border: 1px solid var(--simpS_DropDownBorderColor);
+	z-index: 3;
+	border-radius: var(--simpS_radius);
+	background-color: var(--simpS_dropdownBg);
+	overscroll-behavior: contain;
+}
+.SimpleSel--body-always_open {
+	max-height: none;
+	position: relative;
+	top: auto;
+	opacity: 1;
+	visibility: visible;
+}
+
+.SimpleSel:not(.SimpleSel--up) .SimpleSel--multi {
+	top: 100%;
+	margin-top: 2px;
+}
+
+.SimpleSel--up:not(.SimpleSel--float) .SimpleSel__body {
+	bottom: 100%;
+	margin-bottom: 2px;
+}
+
+.SimpleSel--open .SimpleSel__body {
+	max-height: 230px;
+	opacity: 1;
+	visibility: visible;
+}
+
+.SimpleSel__search_wrap{
+	padding: 5px 10px;
+}
+.SimpleSel__search{
+	width: 100%;
+	border-radius: var(--simpS_radius);
+	padding: 2px var(--simpS_pad_hor);
+}
+.SimpleSel__search--top {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	opacity: 0;
+	display: none;
+}
+.SimpleSel--open .SimpleSel__search--top {
+	opacity: 1;
+	display: block;
+}
+.SimpleSel__search--dropdown {
+	border: none;
+	border-bottom: 1px solid currentColor;
+	border-radius: 0;
+	height: var(--simpS_btn_h);
+}
+
+/* controls */
+.SimpleSel__controls {
+	display: flex;
+	border-bottom: 1px solid currentColor;
+}
+.SimpleSel__control {
+	flex: 1;
+}
+.SimpleSel__control + .SimpleSel__control {
+	border-left: 1px solid;
+}
+.SimpleSel__select_all__icon {
+	color: var(--simpS_color_cheked);
+	border-radius: 50%;
+	border-color: var(--simpS_color_yes);
+}
+.SimpleSel[data-count-checked-full="0"] .SimpleSel__select_all__icon {
+	color: var(--simpS_color_light);
+}
+.SimpleSel[data-check-all-multi="yes"] .SimpleSel__select_all__icon {
+	color: var(--simpS_color_yes);
+}
+
+.SimpleSel__reset_all__icon {
+	position: relative;
+	border-radius: 50%;
+	color: var(--simpS_color_no);
+
+}
+.SimpleSel__reset_all__icon:before, .SimpleSel__reset_all__icon:after {
+	position: absolute;
+	left: calc(var(--simpS_f_size) / 2);
+	content: ' ';
+	height: 60%;
+	width: 2px;
+	background-color: currentColor;
+}
+.SimpleSel__reset_all__icon:before {
+	transform: rotate(45deg);
+}
+.SimpleSel__reset_all__icon:after {
+	transform: rotate(-45deg);
+}
+
+
+.SimpleSel__bottom_controls {
+	display: flex;
+	position: sticky;
+	border-top: 1px solid currentColor;
+	margin-top: 5px;
+	bottom: 0;
+}
+.SimpleSel__bottom_controls--hide {
+	display: none;
+}
+.SimpleSel--float .SimpleSel__bottom_controls--hide{
+	display: flex;
+}
+.SimpleSel__bottom_control--hide {
+	display: none;
+}
+.SimpleSel__bottom_control {
+	flex: 1;
+}
+.SimpleSel__bottom_control--ok{
+	text-transform: uppercase;
+}
+.SimpleSel__bottom_control + .SimpleSel__bottom_control {
+	border-left: 1px solid  ;
+}
+
+
+/**List*/
+.SimpleSel__list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+.SimpleSel__group_items:not(:first-child) {
+	margin-top: 5px;
+}
+.SimpleSel__group_title {
+	font-weight: bold;
+	cursor: default;
+	display: block;
+	padding: 6px 10px ;
+	margin-bottom: 2px;
+	font-size: 1.02em;
+	background-color: var(--simpS_color_light);
+}
+
+.SimpleSel__group {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+
+
+.SimpleSel__list_item {
+	cursor: pointer;
+}
+.SimpleSel__list_item:not(:last-child) {
+	border-bottom: 1px solid var(--simpS_color_light);
+}
+
+.SimpleSel__list_item--disabled {
+	opacity: .5;
+	cursor: default;
+}
+
+.SimpleSel__list_item_body {
+	padding: 5px var(--simpS_pad_hor);
+	display: flex;
+	align-items: center;
+	min-height: var(--simpS_li_h);
+}
+@media (hover: hover) {
+	.SimpleSel__list_item:not(.SimpleSel__list_item--disabled) {
+		.SimpleSel__list_item_body:hover {
+			cursor: pointer;
+			background-color: var(--simpS_color_light);
+		}
+	}
+}
+
+
+.SimpleSel--single .SimpleSel__list_item--checked {
+	background-color: var(--simpS_color_cheked);
+}
+
+.SimpleSel__list_item:not(.SimpleSel__list_item--checked) .SimpleSel__list_item_icon:before {
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.SimpleSel__close {
+	display: none;
+}
+
+/* FLOAT */
+.SimpleSel--body_open {
+	overflow: hidden;
+	position: relative;
+}
+
+
+.SimpleSel--float .SimpleSel__body {
+	position: fixed;
+	max-width: 90%;
+	max-height: 90%;
+	left: 50%;
+	top: 50%;
+	overflow: hidden;
+	overflow-y: auto;
+	transform: translate(-50%, -50%);
+	flex-direction: column;
+	display: none;
+}
+.SimpleSel--open {
+	z-index: 7;
+}
+.SimpleSel--float.SimpleSel--open .SimpleSel__body{
+	display: flex;
+}
+
+.SimpleSel--float .SimpleSel__bottom_control--hide {
+	display: flex;
+}
+.SimpleSel--float .SimpleSel__list {
+	flex: 1;
+}
+
+
+.SimpleSel__debounce_progress_bar {
+	transition-timing-function: linear;
+	potransition-property: width;
+	width: 0;
+	height: 5px;
+	background-color: var(--simpS_status_bar);
+	transition-duration: 0ms;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+
+
+}
+.SimpleSel__debounce_progress_bar.this--animating {
+	width: 100%;
+	transition-duration: var(--duration, 1ms);
+}
+
+/**  **/
+.SimpleSel--label_mode.SimpleSel--fill_without_value {
+	.SimpleSel__title {
+		opacity: 0;
+		visibility: hidden;
+		pointer-events: none;
+	}
+}
+.SimpleSel__label {
+	position: absolute;
+	top: 50%;
+	left: var(--simpS_label_left);
+	transform: translateY(-50%);
+	transition: all 0.2s ease;
+	pointer-events: none;
+}
+.SimpleSel--fill_with_value .SimpleSel__label {
+	top: 0;
+	transform: translateY(-50%);
+	background-color: var(--simpS_labelBg);
+	padding: 0 var(--simpS_label_pad_hor_active);
+}