@bee-design/ui
Version:
Bee Design React UI Library.
1 lines • 16.3 kB
CSS
.bee-picker{position:relative;display:inline-flex;align-items:center;padding:4px 11px 4px 4px;line-height:1.5715;border-radius:var(--bee-border-radius-small);background-color:var(--bee-color-fill-2);border:1px solid transparent;box-sizing:border-box;transition:all .1s cubic-bezier(0,0,1,1)}.bee-picker-input{display:inline-flex;flex:1}.bee-picker input{text-align:left;padding:0;padding-left:8px;border:none;width:100%;color:var(--bee-color-text-1);background-color:transparent;line-height:1.5715;transition:all .1s cubic-bezier(0,0,1,1)}.bee-picker input::-webkit-input-placeholder{color:var(--bee-color-text-3)}.bee-picker input::-moz-placeholder{color:var(--bee-color-text-3)}.bee-picker input::-ms-input-placeholder{color:var(--bee-color-text-3)}.bee-picker input::placeholder{color:var(--bee-color-text-3)}.bee-picker-input-placeholder input{color:var(--bee-color-text-3)}.bee-picker-has-prefix{padding-left:12px}.bee-picker-prefix{color:var(--bee-color-text-2);padding-right:4px;font-size:14px}.bee-picker-suffix{width:14px;margin-left:4px;text-align:center}.bee-picker-suffix-icon{color:var(--bee-color-text-2)}.bee-picker .bee-picker-clear-icon{display:none;font-size:12px;color:var(--bee-color-text-2)}.bee-picker:hover{background-color:var(--bee-color-fill-3);border-color:transparent}.bee-picker:not(.bee-picker-disabled):hover .bee-picker-clear-icon{display:inline-block}.bee-picker:not(.bee-picker-disabled):hover .bee-picker-suffix .bee-picker-clear-icon+span{display:none}.bee-picker-error{background-color:var(--bee-color-danger-light-1);border-color:transparent}.bee-picker-error:hover{background-color:var(--bee-color-danger-light-2);border-color:transparent}.bee-picker-focused{box-shadow:0 0 0 0 var(--bee-color-primary-light-2)}.bee-picker-focused,.bee-picker-focused:hover{background-color:var(--bee-color-bg-2);border-color:rgb(var(--bee-primary-6))}.bee-picker-focused.bee-picker-error{border-color:rgb(var(--bee-danger-6));box-shadow:0 0 0 0 var(--bee-color-danger-light-2)}.bee-picker-focused .bee-picker-input-active input,.bee-picker-focused:hover .bee-picker-input-active input{background:var(--bee-color-primary-light-1)}.bee-picker input[disabled]{cursor:not-allowed;color:var(--bee-color-text-4);-webkit-text-fill-color:var(--bee-color-text-4)}.bee-picker input[disabled]::-webkit-input-placeholder{color:var(--bee-color-text-4)}.bee-picker input[disabled]::-moz-placeholder{color:var(--bee-color-text-4)}.bee-picker input[disabled]::-ms-input-placeholder{color:var(--bee-color-text-4)}.bee-picker input[disabled]::placeholder{color:var(--bee-color-text-4)}.bee-picker-disabled,.bee-picker-disabled:hover{color:var(--bee-color-text-4);border-color:transparent;background-color:var(--bee-color-fill-2);cursor:not-allowed}.bee-picker-disabled input[disabled],.bee-picker-disabled:hover input[disabled]{cursor:not-allowed;color:var(--bee-color-text-4);-webkit-text-fill-color:var(--bee-color-text-4)}.bee-picker-disabled input[disabled]::-webkit-input-placeholder,.bee-picker-disabled:hover input[disabled]::-webkit-input-placeholder{color:var(--bee-color-text-4)}.bee-picker-disabled input[disabled]::-moz-placeholder,.bee-picker-disabled:hover input[disabled]::-moz-placeholder{color:var(--bee-color-text-4)}.bee-picker-disabled input[disabled]::-ms-input-placeholder,.bee-picker-disabled:hover input[disabled]::-ms-input-placeholder{color:var(--bee-color-text-4)}.bee-picker-disabled input[disabled]::placeholder,.bee-picker-disabled:hover input[disabled]::placeholder{color:var(--bee-color-text-4)}.bee-picker-separator{min-width:10px;padding:0 8px;color:var(--bee-color-text-3)}.bee-picker-disabled .bee-picker-separator{color:var(--bee-color-text-4)}.bee-picker-disabled .bee-picker-suffix-icon{color:var(--bee-color-text-4)}.bee-picker-size-mini{height:24px}.bee-picker-size-mini input{font-size:12px}.bee-picker-size-small{height:28px}.bee-picker-size-small input{font-size:14px}.bee-picker-size-default{height:32px}.bee-picker-size-default input{font-size:14px}.bee-picker-size-large{height:36px}.bee-picker-size-large input{font-size:14px}.bee-picker-rtl{direction:rtl;padding:4px 4px 4px 11px}.bee-picker-rtl input{text-align:right;padding-left:0;padding-right:8px}.bee-picker-rtl .bee-picker-suffix{margin-left:0;margin-right:4px}.bee-picker-container,.bee-picker-range-container{border:1px solid var(--bee-color-neutral-3);box-shadow:0 2px 5px rgba(0,0,0,.1);border-radius:var(--bee-border-radius-medium);background-color:var(--bee-color-bg-popup);box-sizing:border-box;min-height:60px;overflow:hidden}.bee-picker-container-shortcuts-placement-left,.bee-picker-range-container-shortcuts-placement-left{display:flex;align-items:flex-start}.bee-picker-container-shortcuts-placement-left .bee-picker-shortcuts,.bee-picker-range-container-shortcuts-placement-left .bee-picker-shortcuts{display:flex;flex-direction:column;padding:5px 8px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.bee-picker-container-shortcuts-placement-left .bee-picker-shortcuts>*,.bee-picker-range-container-shortcuts-placement-left .bee-picker-shortcuts>*{margin:5px 0}.bee-picker-container-shortcuts-placement-left .bee-picker-panel-wrapper,.bee-picker-container-shortcuts-placement-left .bee-picker-range-panel-wrapper,.bee-picker-range-container-shortcuts-placement-left .bee-picker-panel-wrapper,.bee-picker-range-container-shortcuts-placement-left .bee-picker-range-panel-wrapper{border-left:1px solid var(--bee-color-neutral-3)}.bee-picker-panel-only,.bee-picker-range-panel-only{box-shadow:none}.bee-picker-panel-only .bee-panel-date-inner,.bee-picker-range-panel-only .bee-panel-date-inner{width:100%}.bee-picker-range-panel-only .bee-panel-date,.bee-picker-range-panel-only .bee-panel-month,.bee-picker-range-panel-only .bee-panel-year{width:100%}.bee-picker-header{display:flex;padding:8px 16px;border-bottom:1px solid var(--bee-color-neutral-3)}.bee-picker-header-value{font-size:12px;line-height:24px;flex:1;text-align:center;color:var(--bee-color-text-1);font-weight:500;box-sizing:border-box}.bee-picker-header-icon{border-radius:50%;text-align:center;font-size:12px;transition:all .1s cubic-bezier(0,0,1,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bee-color-text-2);background-color:var(--bee-color-bg-popup);width:24px;height:24px;line-height:24px;margin-left:2px;margin-right:2px;box-sizing:border-box}.bee-picker-header-icon:not(.bee-picker-header-icon-hidden){cursor:pointer}.bee-picker-header-icon:not(.bee-picker-header-icon-hidden):hover{background-color:var(--bee-color-fill-3)}.bee-picker-header-label{cursor:pointer;padding:2px;border-radius:2px;transition:all .1s}.bee-picker-header-label:hover{background-color:var(--bee-color-fill-3)}.bee-picker-body{padding:14px 16px}.bee-picker-week-list{display:flex;width:100%;box-sizing:border-box;padding:14px 16px 0}.bee-picker-week-list-item{color:var(--bee-color-text-2);flex:1;padding:0;text-align:center;font-weight:500;height:32px;line-height:32px}.bee-picker-row{display:flex}.bee-picker-cell{position:relative;flex:1;cursor:pointer;padding:2px 0}.bee-picker-cell .bee-picker-date{display:flex;height:100%;width:100%;box-sizing:border-box;cursor:pointer;padding:4px 0;justify-content:center}.bee-picker-date-value{color:var(--bee-color-text-4);font-size:14px;min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:24px;font-weight:500}.bee-picker-cell-in-view .bee-picker-date-value{color:var(--bee-color-text-1);font-weight:500}.bee-picker-cell:hover .bee-picker-date-value{background-color:var(--bee-color-fill-3);color:var(--bee-color-text-1)}.bee-picker-cell-today{position:relative}.bee-picker-cell-today::after{content:'';display:block;position:absolute;bottom:-2px;left:50%;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:rgb(var(--bee-primary-6))}.bee-picker-cell-in-range .bee-picker-date{background-color:var(--bee-color-primary-light-1)}.bee-picker-cell-hover-range-start .bee-picker-date,.bee-picker-cell-range-start .bee-picker-date{border-top-left-radius:24px;border-bottom-left-radius:24px}.bee-picker-cell-hover-range-end .bee-picker-date,.bee-picker-cell-range-end .bee-picker-date{border-top-right-radius:24px;border-bottom-right-radius:24px}.bee-picker-cell-range-end:hover .bee-picker-date-value,.bee-picker-cell-range-start:hover .bee-picker-date-value{background-color:unset}.bee-picker-cell-disabled .bee-picker-date{background-color:var(--bee-color-fill-1);cursor:not-allowed}.bee-picker-cell-disabled .bee-picker-date-value,.bee-picker-cell-disabled:hover .bee-picker-date-value{color:var(--bee-color-text-4);background-color:transparent}.bee-picker-cell-selected .bee-picker-date-value,.bee-picker-cell-selected:hover .bee-picker-date-value{color:var(--bee-color-white);background-color:rgb(var(--bee-primary-6));transition:background-color .1s cubic-bezier(0,0,1,1)}.bee-picker-cell-hover-in-range .bee-picker-date,.bee-picker-cell-hover-range-end:not(.bee-picker-cell-range-start):not(.bee-picker-cell-range-end) .bee-picker-date-value,.bee-picker-cell-hover-range-start:not(.bee-picker-cell-range-start):not(.bee-picker-cell-range-end) .bee-picker-date-value{background-color:var(--bee-color-primary-light-2)}.bee-picker-cell-range-edge-in-hover-range .bee-picker-date{border-radius:0}.bee-picker-cell-hover-range-edge-in-range .bee-picker-date{border-radius:0}.bee-picker-cell-hidden .bee-picker-date{display:none}.bee-picker-footer{width:-webkit-min-content;width:-moz-min-content;width:min-content;min-width:100%}.bee-picker-footer-btn-wrapper{border-top:1px solid var(--bee-color-neutral-3);padding:3px 8px;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.bee-picker-footer-extra-wrapper{padding:8px 24px;color:var(--bee-color-text-1);border-top:1px solid var(--bee-color-neutral-3);box-sizing:border-box;font-size:12px}.bee-picker-footer-now-wrapper{border-top:1px solid var(--bee-color-neutral-3);box-sizing:border-box;height:36px;line-height:36px;text-align:center}.bee-picker-btn-select-date,.bee-picker-btn-select-time{margin-right:8px}.bee-picker-btn-confirm{margin:5px 0}.bee-picker-shortcuts{flex:1}.bee-picker-shortcuts>*{margin:5px 10px 5px 0}.bee-panel-date{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box}.bee-panel-date-inner{width:265px}.bee-panel-date-inner .bee-picker-body{padding-top:0}.bee-panel-date-timepicker{display:flex;flex-direction:column}.bee-panel-date-timepicker-title{width:100%;text-align:center;font-weight:400;font-size:14px;height:40px;line-height:40px;border-bottom:1px solid var(--bee-color-neutral-3);color:var(--bee-color-text-1)}.bee-panel-date-timepicker .bee-timepicker{width:265px;height:276px;padding:0 6px;overflow:hidden}.bee-panel-date-timepicker .bee-timepicker-list{width:100%;height:100%;padding:0 4px;box-sizing:border-box}.bee-panel-date-timepicker .bee-timepicker-list:not(:last-child){border-right:0}.bee-panel-date-timepicker .bee-timepicker ul::after{height:244px}.bee-panel-date-timepicker .bee-timepicker-cell{width:100%}.bee-panel-date-holder{display:flex;width:100%;border-top:1px solid var(--bee-color-neutral-3)}.bee-panel-date-holder-btn{display:flex;align-items:center;justify-content:center;flex:1;height:50px;box-sizing:border-box;cursor:pointer;color:var(--bee-color-text-3);font-size:16px;transition:color .2s}.bee-panel-date-holder-btn:first-child{border-right:1px solid var(--bee-color-neutral-3)}.bee-panel-date-holder-btn-active,.bee-panel-date-holder-btn:active,.bee-panel-date-holder-btn:hover{color:var(--bee-color-text-1)}.bee-panel-date-holder-btn-value{margin-left:8px}.bee-panel-date:first-child .bee-panel-date-holder{border-right:1px solid var(--bee-color-neutral-3)}.bee-panel-month,.bee-panel-quarter,.bee-panel-year{box-sizing:border-box;width:265px}.bee-panel-month .bee-picker-date,.bee-panel-quarter .bee-picker-date,.bee-panel-year .bee-picker-date{padding:4px}.bee-panel-month .bee-picker-date-value,.bee-panel-quarter .bee-picker-date-value,.bee-panel-year .bee-picker-date-value{border-radius:24px;width:100%}.bee-panel-month .bee-picker-cell:not(.bee-picker-cell-selected):not(.bee-picker-cell-range-start):not(.bee-picker-cell-range-end):not(.bee-picker-cell-disabled):not(.bee-picker-cell-week) .bee-picker-date-value:hover,.bee-panel-quarter .bee-picker-cell:not(.bee-picker-cell-selected):not(.bee-picker-cell-range-start):not(.bee-picker-cell-range-end):not(.bee-picker-cell-disabled):not(.bee-picker-cell-week) .bee-picker-date-value:hover,.bee-panel-year .bee-picker-cell:not(.bee-picker-cell-selected):not(.bee-picker-cell-range-start):not(.bee-picker-cell-range-end):not(.bee-picker-cell-disabled):not(.bee-picker-cell-week) .bee-picker-date-value:hover{border-radius:24px}.bee-panel-year{box-sizing:border-box;width:265px}.bee-panel-week{box-sizing:border-box}.bee-panel-week-wrapper{display:flex}.bee-panel-week-inner{width:298px}.bee-panel-week-inner .bee-picker-body{padding-top:0}.bee-panel-week .bee-picker-row-week{cursor:pointer}.bee-panel-week .bee-picker-row-week .bee-picker-date-value{width:100%;border-radius:0}.bee-panel-week .bee-picker-cell .bee-picker-date{border-radius:0}.bee-panel-week .bee-picker-cell:nth-child(2) .bee-picker-date{padding-left:4px;border-top-left-radius:24px;border-bottom-left-radius:24px}.bee-panel-week .bee-picker-cell:nth-child(2) .bee-picker-date .bee-picker-date-value{border-top-left-radius:24px;border-bottom-left-radius:24px}.bee-panel-week .bee-picker-cell:nth-child(8) .bee-picker-date{padding-right:4px;border-top-right-radius:24px;border-bottom-right-radius:24px}.bee-panel-week .bee-picker-cell:nth-child(8) .bee-picker-date .bee-picker-date-value{border-top-right-radius:24px;border-bottom-right-radius:24px}.bee-panel-week .bee-picker-row-week:hover .bee-picker-cell:not(.bee-picker-cell-week):not(.bee-picker-cell-selected):not(.bee-picker-cell-range-start):not(.bee-picker-cell-range-end):not(.bee-picker-cell-in-range):not(.bee-picker-cell-hover-in-range) .bee-picker-date-value{background-color:var(--bee-color-fill-3)}.bee-panel-quarter{box-sizing:border-box;width:265px}.bee-picker-range-wrapper{display:flex}.bee-datepicker-shortcuts-wrapper{width:106px;height:100%;max-height:300px;overflow-y:auto;box-sizing:border-box;list-style:none;padding:0;margin:10px 0 0}.bee-datepicker-shortcuts-wrapper>li{width:100%;padding:6px 16px;cursor:pointer;box-sizing:border-box}.bee-datepicker-shortcuts-wrapper>li:hover{color:rgb(var(--bee-primary-6))}.bee-picker-container-rtl,.bee-picker-range-container-rtl{direction:rtl}.bee-picker-container-rtl .bee-picker-cell-hover-range-start .bee-picker-date,.bee-picker-container-rtl .bee-picker-cell-range-start .bee-picker-date,.bee-picker-range-container-rtl .bee-picker-cell-hover-range-start .bee-picker-date,.bee-picker-range-container-rtl .bee-picker-cell-range-start .bee-picker-date{border-radius:0 24px 24px 0}.bee-picker-container-rtl .bee-picker-cell-hover-range-end .bee-picker-date,.bee-picker-container-rtl .bee-picker-cell-range-end .bee-picker-date,.bee-picker-range-container-rtl .bee-picker-cell-hover-range-end .bee-picker-date,.bee-picker-range-container-rtl .bee-picker-cell-range-end .bee-picker-date{border-radius:24px 0 0 24px}.bee-picker-container-rtl .bee-panel-week .bee-picker-cell:nth-child(2) .bee-picker-date,.bee-picker-range-container-rtl .bee-panel-week .bee-picker-cell:nth-child(2) .bee-picker-date{padding-right:4px;padding-left:0;border-radius:0 24px 24px 0}.bee-picker-container-rtl .bee-panel-week .bee-picker-cell:nth-child(2) .bee-picker-date .bee-picker-date-value,.bee-picker-range-container-rtl .bee-panel-week .bee-picker-cell:nth-child(2) .bee-picker-date .bee-picker-date-value{border-radius:0 24px 24px 0}.bee-picker-container-rtl .bee-panel-week .bee-picker-cell:nth-child(8) .bee-picker-date,.bee-picker-range-container-rtl .bee-panel-week .bee-picker-cell:nth-child(8) .bee-picker-date{padding-left:4px;padding-right:0;border-radius:24px 0 0 24px}.bee-picker-container-rtl .bee-panel-week .bee-picker-cell:nth-child(8) .bee-picker-date .bee-picker-date-value,.bee-picker-range-container-rtl .bee-panel-week .bee-picker-cell:nth-child(8) .bee-picker-date .bee-picker-date-value{border-radius:24px 0 0 24px}