UNPKG

@react-beauty/ui-select

Version:

ui-select

2 lines (1 loc) 4.01 kB
.react-beauty-el-select-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;gap:var(--components-select-gap);width:100%}.react-beauty-el-select-label{font-size:var(--components-select-font-size-label);line-height:var(--components-select-line-height-label);font-weight:var(--components-select-font-weight-label);color:var(--components-select-colors-label)}.react-beauty-el-select-wrapper{position:relative;width:100%;background-color:var(--components-select-colors-background-rest);padding:var(--space-1) var(--space-2);outline:solid;outline-width:1px;outline-color:var(--components-select-colors-background-outline);border-radius:var(--components-select-border-radius)}.react-beauty-el-select-wrapper[data-error=true]{outline-color:var(--components-select-colors-border-error)}.react-beauty-el-select-wrapper[data-is-focused=true]{outline-color:var(--components-select-colors-border-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--components-select-colors-border-focus),transparent)}.react-beauty-el-select-wrapper:hover:not([data-disabled=true]){outline-color:var( --components-select-colors-border-hover, var(--components-select-colors-border-focus) )}.react-beauty-el-select-wrapper[data-disabled=true]{opacity:.32}.react-beauty-el-select{width:100%;font-size:var(--components-select-font-size-input);line-height:var(--components-select-line-height-input);font-weight:var(--components-select-font-weight-input);color:var(--components-select-colors-input-text);border:none;background:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;cursor:pointer}.react-beauty-el-select:focus-within{outline:none}.react-beauty-el-select:disabled{cursor:not-allowed}.react-beauty-el-select[data-has-lead-element=true]{padding-left:25px}.react-beauty-el-select::-webkit-input-placeholder{color:var(--components-select-colors-placeholder)}.react-beauty-el-select::-moz-placeholder{color:var(--components-select-colors-placeholder)}.react-beauty-el-select:-ms-input-placeholder{color:var(--components-select-colors-placeholder)}.react-beauty-el-select::placeholder{color:var(--components-select-colors-placeholder)}.react-beauty-el-select-option{font-size:var(--components-select-font-size-option);line-height:var(--components-select-line-height-option);font-weight:var(--components-select-font-weight-option);padding:var(--space-2)}.react-beauty-el-select-helper-text{font-size:var(--components-select-font-size-helper);line-height:var(--components-select-line-height-helper);color:var(--components-select-colors-helper-text-normal);padding:var(--space-none) var(--space-3)}.react-beauty-el-select-helper-text[data-error=true]{color:var(--components-select-colors-helper-text-error)}.react-beauty-el-select-lead-element{position:absolute;left:5px;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:inherit;pointer-events:none}.react-beauty-el-select-trail-element{position:absolute;right:5px;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:inherit;pointer-events:none}.react-beauty-el-select-trail-element:empty:before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid currentColor}