@bee-design/ui
Version:
Bee Design React UI Library.
1 lines • 13.3 kB
CSS
.bee-select .bee-select-view{color:var(--bee-color-text-1);background-color:var(--bee-color-fill-2);border:1px solid transparent}.bee-select:hover .bee-select-view{background-color:var(--bee-color-fill-3);border-color:transparent}.bee-select.bee-select-focused .bee-select-view{color:var(--bee-color-text-1);background-color:var(--bee-color-bg-2);border-color:rgb(var(--bee-primary-6));box-shadow:0 0 0 0 var(--bee-color-primary-light-2)}.bee-select .bee-select-arrow-icon,.bee-select .bee-select-clear-icon,.bee-select .bee-select-expand-icon,.bee-select .bee-select-loading-icon,.bee-select .bee-select-search-icon,.bee-select .bee-select-suffix-icon{color:var(--bee-color-text-2)}.bee-select-no-border .bee-select-view{border:none;background:0 0}.bee-select-error .bee-select-view{background-color:var(--bee-color-danger-light-1);border:1px solid transparent}.bee-select-error:hover .bee-select-view{background-color:var(--bee-color-danger-light-2);border-color:transparent}.bee-select-error.bee-select-focused .bee-select-view{color:var(--bee-color-text-1);background-color:var(--bee-color-bg-2);border-color:rgb(var(--bee-danger-6));box-shadow:0 0 0 0 var(--bee-color-danger-light-2)}.bee-select-no-border .bee-select-view{border:none;background:0 0}.bee-select-disabled .bee-select-view{color:var(--bee-color-text-4);background-color:var(--bee-color-fill-2);border:1px solid transparent}.bee-select-disabled:hover .bee-select-view{background-color:var(--bee-color-fill-2);border-color:transparent}.bee-select-disabled .bee-select-arrow-icon,.bee-select-disabled .bee-select-clear-icon,.bee-select-disabled .bee-select-expand-icon,.bee-select-disabled .bee-select-loading-icon,.bee-select-disabled .bee-select-search-icon,.bee-select-disabled .bee-select-suffix-icon{color:var(--bee-color-text-4)}.bee-select-no-border .bee-select-view{border:none;background:0 0}.bee-select-size-mini.bee-select-multiple .bee-select-view{height:auto;font-size:12px;padding:0 3px;line-height:0}.bee-select-size-mini.bee-select-multiple .bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-select-size-mini.bee-select-multiple .bee-input-tag-has-placeholder input{box-sizing:border-box;padding-left:4px}.bee-select-size-mini.bee-select-multiple .bee-select-suffix{padding-right:4px}.bee-select-size-mini.bee-select-multiple input{font-size:12px}.bee-select-size-mini.bee-select-single .bee-select-view{height:24px;line-height:22px;font-size:12px;padding:0 7px}.bee-select-size-mini.bee-select-single input{font-size:12px}.bee-select-size-mini.bee-select-multiple .bee-select-view-with-prefix{padding-left:7px}.bee-select-size-small.bee-select-multiple .bee-select-view{height:auto;font-size:14px;padding:0 3px;line-height:0}.bee-select-size-small.bee-select-multiple .bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-select-size-small.bee-select-multiple .bee-input-tag-has-placeholder input{box-sizing:border-box;padding-left:8px}.bee-select-size-small.bee-select-multiple .bee-select-suffix{padding-right:8px}.bee-select-size-small.bee-select-multiple input{font-size:14px}.bee-select-size-small.bee-select-single .bee-select-view{height:28px;line-height:26px;font-size:14px;padding:0 11px}.bee-select-size-small.bee-select-single input{font-size:14px}.bee-select-size-small.bee-select-multiple .bee-select-view-with-prefix{padding-left:11px}.bee-select-size-default.bee-select-multiple .bee-select-view{height:auto;font-size:14px;padding:0 3px;line-height:0}.bee-select-size-default.bee-select-multiple .bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-select-size-default.bee-select-multiple .bee-input-tag-has-placeholder input{box-sizing:border-box;padding-left:8px}.bee-select-size-default.bee-select-multiple .bee-select-suffix{padding-right:8px}.bee-select-size-default.bee-select-multiple input{font-size:14px}.bee-select-size-default.bee-select-single .bee-select-view{height:32px;line-height:30px;font-size:14px;padding:0 11px}.bee-select-size-default.bee-select-single input{font-size:14px}.bee-select-size-default.bee-select-multiple .bee-select-view-with-prefix{padding-left:11px}.bee-select-size-large.bee-select-multiple .bee-select-view{height:auto;font-size:12px;padding:0 3px;line-height:0}.bee-select-size-large.bee-select-multiple .bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-select-size-large.bee-select-multiple .bee-input-tag-has-placeholder input{box-sizing:border-box;padding-left:12px}.bee-select-size-large.bee-select-multiple .bee-select-suffix{padding-right:12px}.bee-select-size-large.bee-select-multiple input{font-size:12px}.bee-select-size-large.bee-select-single .bee-select-view{height:36px;line-height:34px;font-size:12px;padding:0 15px}.bee-select-size-large.bee-select-single input{font-size:12px}.bee-select-size-large.bee-select-multiple .bee-select-view-with-prefix{padding-left:15px}.bee-select{display:inline-block;position:relative;box-sizing:border-box;width:100%;cursor:pointer}.bee-select-view{display:flex;position:relative;box-sizing:border-box;width:100%;border-radius:var(--bee-border-radius-small);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:left;transition:all .1s cubic-bezier(0,0,1,1),padding 0s linear}.bee-select-view input{color:inherit;cursor:inherit}.bee-select-view input::-webkit-input-placeholder{color:var(--bee-color-text-3)}.bee-select-view input::-moz-placeholder{color:var(--bee-color-text-3)}.bee-select-view input::-ms-input-placeholder{color:var(--bee-color-text-3)}.bee-select-view input::placeholder{color:var(--bee-color-text-3)}.bee-select-multiple,.bee-select-show-search{cursor:text}.bee-select-disabled{cursor:not-allowed}.bee-select-disabled .bee-select-view input::-webkit-input-placeholder{color:var(--bee-color-text-4)}.bee-select-disabled .bee-select-view input::-moz-placeholder{color:var(--bee-color-text-4)}.bee-select-disabled .bee-select-view input::-ms-input-placeholder{color:var(--bee-color-text-4)}.bee-select-disabled .bee-select-view input::placeholder{color:var(--bee-color-text-4)}.bee-select-single .bee-select-view-input{box-sizing:border-box;width:100%;padding:0;border:none;outline:0;background:0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bee-select-single .bee-select-view-selector{position:relative;display:inline-flex;box-sizing:border-box;width:100%;overflow:hidden}.bee-select-single .bee-select-view-selector .bee-select-view-input{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1}.bee-select-single .bee-select-view-selector .bee-select-view-value-mirror{opacity:0}.bee-select-single .bee-select-view-value{display:inline-block;box-sizing:border-box;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bee-select-single .bee-select-view-value::after{content:'.';font-size:0;line-height:0;visibility:hidden}.bee-select-single .bee-select-view .bee-select-hidden{opacity:0;position:absolute;pointer-events:none}.bee-select-multiple{vertical-align:top}.bee-select-multiple .bee-select-view{padding:0 4px;line-height:0}.bee-select-multiple .bee-select-view-with-prefix{padding-left:12px}.bee-select-multiple .bee-input-tag{flex:1;padding:0;border:none;background:0 0;box-shadow:none;overflow:hidden}.bee-select-multiple .bee-tag{max-width:100%}.bee-select-multiple:not(.bee-select-focused) .bee-input-tag input:not(:first-child)[value='']{opacity:0;position:absolute;pointer-events:none}.bee-select-prefix{display:flex;align-items:center;margin-right:12px;white-space:nowrap;color:var(--bee-color-text-2)}.bee-select-suffix{display:flex;align-items:center;margin-left:4px}.bee-select-clear-icon,.bee-select-expand-icon,.bee-select-loading-icon,.bee-select-search-icon,.bee-select-suffix-icon{font-size:12px;transition:all .1s cubic-bezier(0,0,1,1)}.bee-select-arrow-icon{font-size:12px}.bee-select-open .bee-select-arrow-icon svg{transform:rotateZ(180deg)}.bee-select .bee-select-clear-icon{display:none;cursor:pointer}.bee-select .bee-select-clear-icon>svg{position:relative;transition:all .1s cubic-bezier(0,0,1,1)}.bee-select:hover .bee-select-clear-icon{display:block}.bee-select:hover .bee-select-clear-icon~*{display:none}.bee-select-wrapper{display:inline-flex;align-items:stretch}.bee-select-wrapper .bee-select{min-width:0}.bee-select-wrapper .bee-select:not(.bee-select-focused):not(:first-child) .bee-select-view{border-top-left-radius:0;border-bottom-left-radius:0}.bee-select-wrapper .bee-select:not(.bee-select-focused):not(:last-child) .bee-select-view{border-top-right-radius:0;border-bottom-right-radius:0}.bee-select-addbefore{display:flex;align-items:center;padding:0 12px;color:var(--bee-color-text-1);background-color:var(--bee-color-fill-2);white-space:nowrap;border:1px solid transparent}.bee-select-addbefore{border-right:1px solid var(--bee-color-border-2);border-top-left-radius:var(--bee-border-radius-small);border-bottom-left-radius:var(--bee-border-radius-small)}.bee-select-popup{top:4px;box-sizing:border-box;padding:4px 0;border:1px solid var(--bee-color-fill-3);border-radius:var(--bee-border-radius-medium);background-color:var(--bee-color-bg-popup);box-shadow:0 4px 10px rgba(0,0,0,.1);overflow:hidden}.bee-select-popup-hidden{display:none}.bee-select-popup .bee-select-popup-inner{width:100%;max-height:200px;list-style:none}.bee-select-popup .bee-select-option{position:relative;box-sizing:border-box;width:100%;padding:0 12px;font-size:14px;text-align:left;cursor:pointer;line-height:36px;border-radius:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--bee-color-text-1);background-color:var(--bee-color-bg-popup)}.bee-select-popup .bee-select-option-selected{color:var(--bee-color-text-1);background-color:var(--bee-color-bg-popup)}.bee-select-popup .bee-select-option-hover{color:var(--bee-color-text-1);background-color:var(--bee-color-fill-2)}.bee-select-popup .bee-select-option-disabled{color:var(--bee-color-text-4);background-color:var(--bee-color-bg-popup)}.bee-select-popup .bee-select-option-disabled{cursor:not-allowed}.bee-select-popup .bee-select-option-selected{font-weight:500}.bee-select-popup .bee-select-option-empty{height:36px}.bee-select-popup .bee-select-option-rtl{text-align:right}.bee-select-option-wrapper{display:flex;align-items:center;padding:0 7px}.bee-select-option-wrapper .bee-select-checkbox{padding:0 5px}.bee-select-option-wrapper .bee-select-checkbox input{display:none}.bee-select-option-wrapper .bee-select-option{flex:1;margin-left:1px;padding:0 4px;border-radius:var(--bee-border-radius-small)}.bee-select-group-title{box-sizing:border-box;width:100%;padding:8px 12px 0 12px;line-height:20px;font-size:12px;color:var(--bee-color-text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bee-select-group-title:first-child{padding-top:4px}.bee-select-highlight{font-weight:500;color:var(--bee-color-text-1)}.bee-select-rtl{direction:rtl}.bee-select-rtl.bee-select-size-mini.bee-select-multiple .bee-select-view-with-prefix{padding-left:0;padding-right:7px}.bee-select-rtl.bee-select-size-mini.bee-select-multiple .bee-select-suffix{padding-right:0;padding-left:4px}.bee-select-rtl.bee-select-size-mini.bee-select-multiple .bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-select-rtl.bee-select-size-mini.bee-select-multiple .bee-input-tag-has-placeholder input{padding-left:0;padding-right:4px}.bee-select-rtl.bee-select-size-small.bee-select-multiple .bee-select-view-with-prefix{padding-left:0;padding-right:11px}.bee-select-rtl.bee-select-size-small.bee-select-multiple .bee-select-suffix{padding-right:0;padding-left:8px}.bee-select-rtl.bee-select-size-small.bee-select-multiple .bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-select-rtl.bee-select-size-small.bee-select-multiple .bee-input-tag-has-placeholder input{padding-left:0;padding-right:8px}.bee-select-rtl.bee-select-size-default.bee-select-multiple .bee-select-view-with-prefix{padding-left:0;padding-right:11px}.bee-select-rtl.bee-select-size-default.bee-select-multiple .bee-select-suffix{padding-right:0;padding-left:8px}.bee-select-rtl.bee-select-size-default.bee-select-multiple .bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-select-rtl.bee-select-size-default.bee-select-multiple .bee-input-tag-has-placeholder input{padding-left:0;padding-right:8px}.bee-select-rtl.bee-select-size-large.bee-select-multiple .bee-select-view-with-prefix{padding-left:0;padding-right:15px}.bee-select-rtl.bee-select-size-large.bee-select-multiple .bee-select-suffix{padding-right:0;padding-left:12px}.bee-select-rtl.bee-select-size-large.bee-select-multiple .bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-select-rtl.bee-select-size-large.bee-select-multiple .bee-input-tag-has-placeholder input{padding-left:0;padding-right:12px}.bee-select-wrapper-rtl .bee-select-addbefore{border-right:unset;border-left:1px solid var(--bee-color-border-2)}.bee-select-rtl .bee-select-view{text-align:right}.bee-select-rtl .bee-select-multiple .bee-select-view-with-prefix{padding-left:0;padding-right:12px}.bee-select-rtl .bee-select-prefix{margin-right:0;margin-left:12px}.bee-select-rtl .bee-select-suffix{margin-left:0;margin-right:4px}