@opentiny/vue-theme/ip-address/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-ip-address{--tv-IpAddress-normal-height:var(--tv-size-height-md, 32px);--tv-IpAddress-normal-width:182px;--tv-IpAddress-padding-x:var(--tv-space-lg, 12px);--tv-IpAddress-ipv6-delimiter-margin-right:var(--tv-space-sm, 4px);--tv-IpAddress-normal-text-color:var(--tv-color-text, #191919);--tv-IpAddress-icon-color:var(--tv-color-icon, #808080);--tv-IpAddress-icon-size:10px;--tv-IpAddress-normal-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-IpAddress-normal-border-color:var(--tv-color-border, #c2c2c2);--tv-IpAddress-normal-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-IpAddress-border-radius:var(--tv-border-radius-md, 6px);--tv-IpAddress-font-size:var(--tv-font-size-default, 14px);--tv-IpAddress-normal-font-family:var(--tv-font-family-1, 'Arial', 'San Francisco', 'Helvetica');--tv-IpAddress-border-color-focus:var(--tv-color-border-active, #191919);--tv-IpAddress-border-color-hover:var(--tv-color-border-hover, #191919);--tv-IpAddress-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-IpAddress-disabled-border-color:var(--tv-color-border-disabled, #dbdbdb);--tv-IpAddress-input-width:32px;--tv-IpAddress-medium-height:calc(var(--tv-size-height-lg, 40px) - 2px);--tv-IpAddress-default-height:calc(var(--tv-size-height-md, 32px) - 2px);--tv-IpAddress-small-height:calc(var(--tv-size-height-sm, 28px) - 2px);--tv-IpAddress-mini-height:calc(var(--tv-size-height-xs, 24px) - 2px);width:var(--tv-IpAddress-normal-width);max-width:100%;outline:0;display:inline-table;text-align:left;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-ip-address:has(>ul.disabled){cursor:not-allowed}.tiny-ip-address__input{position:relative;width:100%;border:1px solid var(--tv-IpAddress-normal-border-color);color:var(--tv-IpAddress-normal-text-color);border-radius:var(--tv-IpAddress-border-radius);background:var(--tv-IpAddress-normal-bg-color);font-size:var(--tv-IpAddress-font-size);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;white-space:nowrap;background-image:none;-ms-user-select:auto;-webkit-user-select:auto;-o-user-select:auto;-moz-user-select:auto;user-select:auto;-webkit-transition:border .3s;transition:border .3s;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-ip-address__input.readonly,.tiny-ip-address__input[readonly]{cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}.tiny-ip-address__input.readonly.active,.tiny-ip-address__input.readonly:active,.tiny-ip-address__input.readonly:focus,.tiny-ip-address__input.readonly:hover,.tiny-ip-address__input.readonly[active],.tiny-ip-address__input[readonly].active,.tiny-ip-address__input[readonly]:active,.tiny-ip-address__input[readonly]:focus,.tiny-ip-address__input[readonly]:hover,.tiny-ip-address__input[readonly][active]{border-color:var(--tv-IpAddress-border-color-hover)}.tiny-ip-address__input::-moz-placeholder{color:var(--tv-IpAddress-normal-disabled-text-color);opacity:1}.tiny-ip-address__input:-ms-input-placeholder{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input::-webkit-input-placeholder{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input::-ms-input-placeholder{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input::placeholder{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input:hover{border:1px solid var(--tv-IpAddress-border-color-hover);color:var(--tv-IpAddress-normal-text-color)}.tiny-ip-address__input:hover::-moz-placeholder{color:var(--tv-IpAddress-normal-disabled-text-color);opacity:1}.tiny-ip-address__input:hover:-ms-input-placeholder{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input:hover::-webkit-input-placeholder{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input:hover::-ms-input-placeholder{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input:hover::placeholder{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input.active,.tiny-ip-address__input:active,.tiny-ip-address__input:focus,.tiny-ip-address__input[active]{border:1px solid var(--tv-IpAddress-border-color-focus);color:var(--tv-IpAddress-normal-text-color)}.tiny-ip-address__input:focus::-moz-placeholder{color:#d9d9d9;opacity:1}.tiny-ip-address__input:focus:-ms-input-placeholder{color:#d9d9d9}.tiny-ip-address__input:focus::-webkit-input-placeholder{color:#d9d9d9}.tiny-ip-address__input:focus::-ms-input-placeholder{color:#d9d9d9}.tiny-ip-address__input:focus::placeholder{color:#d9d9d9}.tiny-ip-address__input.disabled,.tiny-ip-address__input[disabled]{cursor:not-allowed;pointer-events:none;border:1px solid var(--tv-IpAddress-disabled-border-color);color:var(--tv-IpAddress-normal-disabled-text-color);background:var(--tv-IpAddress-disabled-bg-color);-webkit-box-shadow:none;box-shadow:none}.tiny-ip-address__input.disabled .tiny-svg,.tiny-ip-address__input[disabled] .tiny-svg{fill:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input li{float:left;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-ip-address__input li>input{font-size:var(--tv-IpAddress-font-size);border:none;text-align:center;outline:0;background:0 0;color:var(--tv-IpAddress-normal-text-color);font-family:var(--tv-IpAddress-normal-font-family);width:var(--tv-IpAddress-input-width);float:left;padding:0}.tiny-ip-address__input li>input.active,.tiny-ip-address__input li>input:active,.tiny-ip-address__input li>input:focus,.tiny-ip-address__input li>input[active]{color:var(--tv-IpAddress-normal-text-color)}.tiny-ip-address__input li>input:hover{color:var(--tv-IpAddress-normal-text-color)}.tiny-ip-address__input li>input.disabled,.tiny-ip-address__input li>input[disabled]{color:var(--tv-IpAddress-normal-disabled-text-color)}.tiny-ip-address__input li svg{vertical-align:middle;fill:var(--tv-IpAddress-icon-color);width:var(--tv-IpAddress-icon-size);height:var(--tv-IpAddress-icon-size)}.tiny-ip-address__input li:last-child{margin-right:var(--tv-IpAddress-padding-x)}.tiny-ip-address__input li:last-child>svg{display:none}.tiny-ip-address__input li:first-child{margin-left:var(--tv-IpAddress-padding-x)}.tiny-ip-address__input__ipv6-delimiter{width:var(--tv-IpAddress-icon-width);text-align:center;margin:0 var(--tv-IpAddress-ipv6-delimiter-margin-right)}.tiny-ip-address__input.medium li input{height:var(--tv-IpAddress-medium-height)}.tiny-ip-address__input.default li input{height:var(--tv-IpAddress-default-height)}.tiny-ip-address__input.small li input{height:var(--tv-IpAddress-small-height)}.tiny-ip-address__input.mini li input{height:var(--tv-IpAddress-mini-height)}