smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
1 lines • 16 kB
CSS
smart-numeric-text-box{width:var(--smart-numeric-text-box-default-width);height:var(--smart-numeric-text-box-default-height)}smart-numeric-text-box .smart-container{display:flex;border:none;width:100%}smart-numeric-text-box.smart-element{overflow:visible;border:none;background:0 0}smart-numeric-text-box[spin-buttons][spin-buttons-position=left] .smart-spin-button.smart-element:first-child,smart-numeric-text-box[spin-buttons][spin-buttons-position=left] .smart-spin-button.smart-element:last-child{border-right:none}smart-numeric-text-box[hint] .smart-hint,smart-numeric-text-box[label] .smart-label{position:absolute;left:0;bottom:100%;font-size:12px;width:100%;display:block;padding:var(--smart-editor-label-padding);pointer-events:none;user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;text-align:initial;line-height:initial;vertical-align:initial}.smart-numeric-text-box{border-color:var(--smart-border);border-width:1px;border-style:solid}.smart-numeric-text-box:focus{border-color:var(--smart-outline)}.smart-numeric-text-box *{box-sizing:border-box}.smart-numeric-text-box.smart-container{display:flex;border:none;width:100%;height:100%;position:relative}.smart-numeric-text-box .smart-container{height:100%;position:relative}.smart-numeric-text-box input.smart-input{width:100%;height:100%;border-color:var(--smart-border);border-width:1px;border-style:solid;border-right-width:var(--smart-border-width);padding:var(--smart-editor-label-padding);background-color:var(--smart-background);color:inherit;font:inherit;text-align:var(--smart-numeric-text-box-text-align);outline:0;-webkit-appearance:none}.smart-numeric-text-box .smart-spin-button{width:100%;height:50%;background-color:var(--smart-surface);color:var(--smart-surface-color);border-color:var(--smart-border);border-width:1px;border-style:solid}.smart-numeric-text-box .smart-spin-button:first-child{border-bottom:none}.smart-numeric-text-box .smart-spin-button.smart-element{display:block;min-height:0;border-radius:0;background:var(--smart-surface);color:var(--smart-surface-color)}.smart-numeric-text-box .smart-spin-button[hover]{background-color:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-border-hover)}.smart-numeric-text-box .smart-spin-button[active]{background-color:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active)}.smart-numeric-text-box .smart-spin-button .smart-button{border:none;padding:0}.smart-numeric-text-box .smart-numeric-text-box-component{border-width:var(--smart-border-width);border-style:solid;border-color:var(--smart-border);border-left-width:var(--smart-border-width);border-right-width:0}.smart-numeric-text-box .smart-input-addon{border-color:var(--smart-border);border-width:1px;border-style:solid}.smart-numeric-text-box .smart-spin-buttons-container{width:var(--smart-editor-addon-width);border:none}.smart-numeric-text-box .smart-numeric-text-box-drop-down{width:100%}.smart-numeric-text-box .smart-numeric-text-box-radix-display.smart-numeric-text-box-pressed-component,.smart-numeric-text-box .smart-numeric-text-box-radix-display.smart-numeric-text-box-pressed-component[hover]{background-color:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active)}.smart-numeric-text-box .smart-numeric-text-box-unit-display{width:var(--smart-numeric-text-box-default-unit-display-width);border-width:var(--smart-border-width) 0;overflow:hidden;background-color:var(--smart-background)}.smart-numeric-text-box .smart-numeric-text-box-unit-display[hover],.smart-numeric-text-box[drop-down-enabled] .smart-numeric-text-box-radix-display[hover]:not([aria-expanded=true]){background-color:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover)}.smart-numeric-text-box .smart-numeric-text-box-unit-display[hover]{border-color:var(--smart-ui-state-border-hover)}.smart-numeric-text-box .smart-arrow{position:relative}.smart-numeric-text-box .smart-hint,.smart-numeric-text-box .smart-label{display:none;position:absolute}.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden){border-radius:0}.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left,.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-repeat-button-element{border-top-left-radius:var(--smart-border-top-left-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);overflow:hidden}.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-element:first-child{border-bottom-left-radius:0}.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-element:last-child{border-top-left-radius:0}.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right,.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element{border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);overflow:hidden}.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element:first-child{border-bottom-right-radius:0}.smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element:last-child{border-top-right-radius:0}.smart-numeric-text-box[drop-down-enabled] .smart-numeric-text-box-radix-display{cursor:pointer}.smart-numeric-text-box:not([animation=none])[hint] .smart-hint{transition:opacity .2s cubic-bezier(.4,0,.6,1)}.smart-numeric-text-box:not([animation=none])[hint][focus] .smart-hint{transition:opacity .2s cubic-bezier(.4,0,.2,1)}.smart-numeric-text-box:not([animation=none]) .smart-numeric-text-box-drop-down{transform-origin:top;transition:opacity .2s ease-in,visibility .2s ease-in,transform .2s ease-in}.smart-numeric-text-box[focus] .smart-input-addon,.smart-numeric-text-box[focus] .smart-spin-button,.smart-numeric-text-box[focus] input.smart-input{border-color:var(--smart-outline)}.smart-numeric-text-box[hint] .smart-hint{opacity:0;top:100%;bottom:initial}.smart-numeric-text-box[hint][focus] .smart-hint{opacity:1}.smart-numeric-text-box[radix-display-position=right]:not([spin-buttons]) .smart-numeric-text-box-radix-display,.smart-numeric-text-box[radix-display-position=right][spin-buttons][spin-buttons-position=left] .smart-numeric-text-box-radix-display{border-left-width:0;border-right-width:var(--smart-border-width)}.smart-numeric-text-box[disabled],.smart-numeric-text-box[value=-Infinity] .smart-spin-buttons-container,.smart-numeric-text-box[value=Infinity] .smart-spin-buttons-container,.smart-numeric-text-box[value=NaN] .smart-spin-buttons-container,.smart-numeric-text-box[value=null] .smart-numeric-text-box-radix-display{opacity:.55;cursor:default}.smart-numeric-text-box[spin-buttons] input.smart-input{width:calc(100% - var(--smart-editor-addon-width));border-right-width:0}.smart-numeric-text-box[radix-display] input.smart-input{width:calc(100% - var(--smart-numeric-text-box-default-radix-display-width))}.smart-numeric-text-box[show-unit] input.smart-input{width:calc(100% - var(--smart-numeric-text-box-default-unit-display-width))}.smart-numeric-text-box[spin-buttons][radix-display] input.smart-input{width:calc(100% - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-radix-display-width))}.smart-numeric-text-box[spin-buttons][show-unit] input.smart-input{width:calc(100% - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-unit-display-width))}.smart-numeric-text-box[radix-display][show-unit] input.smart-input{width:calc(100% - var(--smart-numeric-text-box-default-radix-display-width) - var(--smart-numeric-text-box-default-unit-display-width))}.smart-numeric-text-box[spin-buttons][radix-display][show-unit] input.smart-input{width:calc(100% - var(--smart-numeric-text-box-default-unit-display-width) - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-radix-display-width))}.smart-numeric-text-box[spin-buttons] .smart-spin-buttons-container{border-right-width:var(--smart-border-width)}.smart-numeric-text-box[spin-buttons][spin-buttons-position=left] .smart-spin-buttons-container{border-right-width:0}.smart-numeric-text-box[spin-buttons][spin-buttons-position=left] input.smart-input{border-right-width:var(--smart-border-width)}.smart-numeric-text-box[spin-buttons][spin-buttons-position=left][show-unit] input.smart-input{border-right-width:0}.smart-numeric-text-box[spin-buttons][spin-buttons-position=left][show-unit] .smart-numeric-text-box-unit-display{border-right-width:var(--smart-border-width)}.smart-numeric-text-box[show-unit] input.smart-input,.smart-numeric-text-box[spin-buttons][show-unit] .smart-numeric-text-box-unit-display{border-right-width:0}.smart-numeric-text-box[show-unit] .smart-numeric-text-box-unit-display{border-right-width:var(--smart-border-width)}.smart-numeric-text-box.underlined{border-width:0 0 1px;background:var(--smart-background)}.smart-numeric-text-box.underlined input{border-width:0 0 1px}.smart-numeric-text-box.underlined input:focus{border:none}.smart-numeric-text-box.underlined .smart-drop-down-button,.smart-numeric-text-box.underlined .smart-spin-button{background:var(--smart-background);border-width:0 0 1px;border-radius:0}.smart-numeric-text-box.underlined .smart-drop-down-button[active],.smart-numeric-text-box.underlined .smart-drop-down-button[hover],.smart-numeric-text-box.underlined .smart-spin-button[active],.smart-numeric-text-box.underlined .smart-spin-button[hover]{background:var(--smart-background);color:var(--smart-ui-state-active)}.smart-numeric-text-box.underlined .smart-hint{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:var(--smart-editor-label-padding);color:var(--smart-background-color);pointer-events:none;font-size:75%;opacity:0;transition:color .2s,font-size .2s,line-height .2s,margin-top .2s,opacity .1s,top .2s;margin-top:calc(0px - var(--smart-font-size))}.smart-numeric-text-box.underlined .smart-hint:after{content:"";position:absolute;left:0;bottom:-2px;display:block;width:100%;height:2px;background-color:var(--smart-primary);transform-origin:bottom center;transform:scaleX(0);transition:transform .2s}.smart-numeric-text-box.underlined:not([focus]) .smart-hint{margin-top:0}.smart-numeric-text-box.underlined[focus] .smart-drop-down-button{color:var(--smart-primary);opacity:1;border-bottom-color:transparent}.smart-numeric-text-box.underlined[focus] .smart-hint{color:var(--smart-primary);opacity:1}.smart-numeric-text-box.underlined[focus] .smart-hint:after{transform:scale(1)}.smart-numeric-text-box.underlined[focus] .smart-spin-button{border-bottom-color:transparent}.smart-numeric-text-box.outlined{height:auto;min-height:0;border-radius:var(--smart-border-radius);background:var(--smart-background)}.smart-numeric-text-box.outlined input{transition:border-color .2s;border:1px solid var(--smart-border);outline:unset;display:block;padding:13px}.smart-numeric-text-box.outlined .smart-drop-down-button,.smart-numeric-text-box.outlined .smart-spin-button{background:var(--smart-background);border-width:0}.smart-numeric-text-box.outlined .smart-drop-down-button[active],.smart-numeric-text-box.outlined .smart-drop-down-button[hover],.smart-numeric-text-box.outlined .smart-spin-button[active],.smart-numeric-text-box.outlined .smart-spin-button[hover]{background:var(--smart-background);color:var(--smart-ui-state-active)}.smart-numeric-text-box.outlined .smart-drop-down-button{padding:8px 0}.smart-numeric-text-box.outlined .smart-hint{position:absolute;top:0;left:0;display:flex;border-color:var(--smart-border);width:100%;max-height:100%;color:var(--smart-background-color);font-size:75%;line-height:15px;cursor:text;padding:0;margin-top:-6px;transition:color .2s,z-index .2s,font-size .2s,opacity .3s,font-size .2s,line-height .2s}.smart-numeric-text-box.outlined .smart-hint:after,.smart-numeric-text-box.outlined .smart-hint:before{content:"";display:block;box-sizing:border-box;margin-top:6px;border-top:solid 1px;border-top-color:var(--smart-border);min-width:10px;height:8px;pointer-events:none;box-shadow:inset 0 1px transparent;transition:border-color .2s,box-shadow .2s}.smart-numeric-text-box.outlined .smart-hint:before{margin-right:4px;border-left:solid 1px transparent;border-radius:var(--smart-border-radius) 0}.smart-numeric-text-box.outlined .smart-hint:after{flex-grow:1;margin-left:4px;border-right:solid 1px transparent;border-radius:0 var(--smart-border-radius)}.smart-numeric-text-box.outlined:not([focus]) .smart-hint{font-size:var(--smart-font-size);line-height:48px;opacity:0}.smart-numeric-text-box.outlined[focus]{--smart-border:var(--smart-primary)}.smart-numeric-text-box.outlined[focus] .smart-input{border:1px solid var(--smart-border);border-top-color:transparent}.smart-numeric-text-box.outlined[focus] .smart-drop-down-button{color:var(--smart-primary)}.smart-numeric-text-box.outlined[focus] .smart-hint{color:var(--smart-primary);opacity:1}.smart-numeric-text-box.outlined[focus] .smart-hint:after,.smart-numeric-text-box.outlined[focus] .smart-hint:before{border-top-color:var(--smart-primary)}.smart-numeric-text-box-radix-display{display:flex;align-items:center;cursor:default;background-color:var(--smart-surface);color:var(--smart-surface-color);width:var(--smart-numeric-text-box-default-radix-display-width);justify-content:center}.smart-numeric-text-box-unit-display{display:flex;align-items:center;cursor:default}.smart-numeric-text-box-drop-down{position:absolute;box-sizing:border-box;height:auto;border-width:var(--smart-border-width);border-style:solid;border-color:var(--smart-border);box-shadow:var(--smart-elevation-8);padding:2px;top:100%;z-index:9999;list-style-type:none;transform:scaleY(1);opacity:1;background:var(--smart-background);color:var(--smart-background-color);font-family:var(--smart-font-family);font-size:var(--smart-font-size)}.smart-numeric-text-box-drop-down .smart-list-item{cursor:pointer;margin:1px;border:1px solid transparent;padding:4px 8px;word-break:break-all}.smart-numeric-text-box-drop-down .smart-list-item:hover,.smart-numeric-text-box-drop-down .smart-list-item[hover]{background-color:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover)}.smart-numeric-text-box-drop-down.smart-visibility-hidden{transform:scaleY(0);opacity:0}.smart-numeric-text-box-drop-down.smart-drop-down-repositioned:not([animation=none]){transform-origin:top;transition:opacity .2s ease-in,visibility .2s ease-in,transform .2s ease-in}.smart-numeric-text-box-pressed-component{background-color:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active)}smart-numeric-text-box[right-to-left]>.smart-container{direction:initial}smart-numeric-text-box[right-to-left] .smart-hint,smart-numeric-text-box[right-to-left] .smart-label,smart-numeric-text-box[right-to-left] .smart-numeric-text-box-drop-down,smart-numeric-text-box[right-to-left] .smart-numeric-text-box-radix-display,smart-numeric-text-box[right-to-left] input.smart-input{direction:rtl}smart-numeric-text-box[right-to-left] .smart-numeric-text-box-unit-display{direction:rtl;flex-direction:row-reverse}.smart-numeric-text-box-drop-down.smart-drop-down-repositioned[right-to-left]{direction:rtl}