@bee-design/ui/es/InputTag/style/index.css

Bee Design React UI Library.

@keyframes bee-draggable-item-blink{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}.bee-draggable-item{box-sizing:border-box;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bee-draggable-item-dragging{opacity:.3}.bee-draggable-item-dragover.bee-draggable-item-gap-left{box-shadow:-1px 0 rgb(var(--bee-primary-6))}.bee-draggable-item-dragover.bee-draggable-item-gap-right{box-shadow:1px 0 rgb(var(--bee-primary-6))}.bee-draggable-item-dragover.bee-draggable-item-gap-top{box-shadow:0 -1px rgb(var(--bee-primary-6))}.bee-draggable-item-dragover.bee-draggable-item-gap-bottom{box-shadow:0 1px rgb(var(--bee-primary-6))}.bee-draggable-item-dragged{animation:bee-draggable-item-blink .8s;animation-timing-function:cubic-bezier(0,0,1,1)}.bee-input-tag{display:inline-block;box-sizing:border-box;width:100%;padding-left:4px;padding-right:4px;border-radius:var(--bee-border-radius-small);vertical-align:top;cursor:text;transition:all .1s cubic-bezier(0,0,1,1);background-color:var(--bee-color-fill-2);color:var(--bee-color-text-1);border:1px solid transparent}.bee-input-tag-view{display:flex;width:100%}.bee-input-tag-inner{display:flex;align-items:center;flex-wrap:wrap;flex-grow:1;position:relative;box-sizing:border-box;overflow:hidden}.bee-input-tag-suffix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:22px;padding-right:8px}.bee-input-tag .bee-input-tag-clear-icon{display:none;font-size:12px;color:var(--bee-color-text-2);cursor:pointer}.bee-input-tag .bee-input-tag-clear-icon>svg{transition:color .1s cubic-bezier(0,0,1,1);position:relative}.bee-input-tag:hover .bee-input-tag-clear-icon{display:block}.bee-input-tag:hover .bee-input-tag-clear-icon~*{display:none}.bee-input-tag:not(.bee-input-tag-focus) .bee-input-tag-clear-icon:hover::before{background-color:var(--bee-color-fill-4)}.bee-input-tag:not(.bee-input-tag-focus) .bee-draggable-item{cursor:move}.bee-input-tag-input{width:100%;max-width:100%;padding:0;border:none;outline:0;background:0 0;font-size:inherit;cursor:inherit;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bee-tag+.bee-input-tag-input[disabled]{width:0!important}.bee-input-tag-input-mirror{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none}.bee-input-tag-input::-webkit-input-placeholder{color:var(--bee-color-text-3)}.bee-input-tag-input::-moz-placeholder{color:var(--bee-color-text-3)}.bee-input-tag-input::-ms-input-placeholder{color:var(--bee-color-text-3)}.bee-input-tag-input::placeholder{color:var(--bee-color-text-3)}.bee-input-tag-tag{max-width:100%;margin-right:4px;font-size:12px}.bee-input-tag .bee-icon-hover{cursor:pointer}.bee-input-tag .bee-icon-hover.bee-icon-hover-disabled{cursor:not-allowed}.bee-input-tag:hover{background-color:var(--bee-color-fill-3);border:1px solid transparent}.bee-input-tag.bee-input-tag-focus{background-color:var(--bee-color-bg-2);border:1px solid rgb(var(--bee-primary-6));box-shadow:0 0 0 0 rgb(var(--bee-primary-2))}.bee-input-tag .bee-input-tag-tag{color:var(--bee-color-text-1);border-color:var(--bee-color-fill-3);background-color:var(--bee-color-bg-2)}.bee-input-tag .bee-icon-hover:hover::before{background-color:var(--bee-color-fill-2)}.bee-input-tag.bee-input-tag-focus .bee-input-tag-tag{border-color:var(--bee-color-fill-2);background-color:var(--bee-color-fill-2)}.bee-input-tag.bee-input-tag-focus .bee-icon-hover:hover::before{background-color:var(--bee-color-fill-3)}.bee-input-tag.bee-input-tag-disabled .bee-input-tag-tag{color:var(--bee-color-text-4);border-color:var(--bee-color-fill-3);background-color:var(--bee-color-fill-2)}.bee-input-tag-disabled{background-color:var(--bee-color-fill-2);color:var(--bee-color-text-4);border:1px solid transparent;cursor:not-allowed}.bee-input-tag-disabled:hover{background-color:var(--bee-color-fill-2);border:1px solid transparent}.bee-input-tag-disabled .bee-input-tag-input::-webkit-input-placeholder{color:var(--bee-color-text-4)}.bee-input-tag-disabled .bee-input-tag-input::-moz-placeholder{color:var(--bee-color-text-4)}.bee-input-tag-disabled .bee-input-tag-input::-ms-input-placeholder{color:var(--bee-color-text-4)}.bee-input-tag-disabled .bee-input-tag-input::placeholder{color:var(--bee-color-text-4)}.bee-input-tag-error{background-color:rgb(var(--bee-danger-1));color:var(--bee-color-text-1);border:1px solid transparent}.bee-input-tag-error:hover{background-color:rgb(var(--bee-danger-2));border:1px solid transparent}.bee-input-tag-error.bee-input-tag-focus{background-color:var(--bee-color-bg-2);border:1px solid rgb(var(--bee-danger-6));box-shadow:0 0 0 0 rgb(var(--bee-danger-2))}.bee-input-tag-readonly{cursor:default}.bee-input-tag-size-mini{font-size:12px}.bee-input-tag-size-mini .bee-input-tag-view{min-height:22px}.bee-input-tag-size-mini .bee-input-tag-tag,.bee-input-tag-size-mini .bee-input-tag-tag+.bee-input-tag-input{margin-top:1px;margin-bottom:1px;height:20px;line-height:18px}.bee-input-tag-size-mini.bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-input-tag-size-mini.bee-input-tag-has-placeholder input{box-sizing:border-box;padding-left:4px}.bee-input-tag-size-default{font-size:14px}.bee-input-tag-size-default .bee-input-tag-view{min-height:30px}.bee-input-tag-size-default .bee-input-tag-inner{padding-top:1px;padding-bottom:1px}.bee-input-tag-size-default .bee-input-tag-tag,.bee-input-tag-size-default .bee-input-tag-tag+.bee-input-tag-input{margin-top:1px;margin-bottom:1px;height:24px;line-height:22px}.bee-input-tag-size-default.bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-input-tag-size-default.bee-input-tag-has-placeholder input{box-sizing:border-box;padding-left:8px}.bee-input-tag-size-small{font-size:14px}.bee-input-tag-size-small .bee-input-tag-view{min-height:26px}.bee-input-tag-size-small .bee-input-tag-inner{padding-top:1px;padding-bottom:1px}.bee-input-tag-size-small .bee-input-tag-tag,.bee-input-tag-size-small .bee-input-tag-tag+.bee-input-tag-input{margin-top:1px;margin-bottom:1px;height:20px;line-height:18px}.bee-input-tag-size-small.bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-input-tag-size-small.bee-input-tag-has-placeholder input{box-sizing:border-box;padding-left:8px}.bee-input-tag-size-large{font-size:12px}.bee-input-tag-size-large .bee-input-tag-view{min-height:34px}.bee-input-tag-size-large .bee-input-tag-inner{padding-top:1px;padding-bottom:1px}.bee-input-tag-size-large .bee-input-tag-tag,.bee-input-tag-size-large .bee-input-tag-tag+.bee-input-tag-input{margin-top:1px;margin-bottom:1px;height:28px;line-height:26px}.bee-input-tag-size-large.bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-input-tag-size-large.bee-input-tag-has-placeholder input{box-sizing:border-box;padding-left:12px}.bee-input-tag-rtl{direction:rtl;padding-right:4px;padding-left:4px}.bee-input-tag-rtl .bee-input-tag-suffix{padding-right:0;padding-left:8px}.bee-input-tag-rtl .bee-input-tag-tag{margin-right:0;margin-left:4px}.bee-input-tag-rtl .bee-input-tag-input-mirror{right:0;left:initial}.bee-input-tag-rtl.bee-input-tag-size-mini.bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-input-tag-rtl.bee-input-tag-size-mini.bee-input-tag-has-placeholder input{padding-right:4px}.bee-input-tag-rtl.bee-input-tag-size-default.bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-input-tag-rtl.bee-input-tag-size-default.bee-input-tag-has-placeholder input{padding-right:8px}.bee-input-tag-rtl.bee-input-tag-size-small.bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-input-tag-rtl.bee-input-tag-size-small.bee-input-tag-has-placeholder input{padding-right:8px}.bee-input-tag-rtl.bee-input-tag-size-large.bee-input-tag-has-placeholder .bee-input-tag-input-mirror,.bee-input-tag-rtl.bee-input-tag-size-large.bee-input-tag-has-placeholder input{padding-right:12px}