@opentiny/vue-theme/checkbox-button/index.css

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

.tiny-checkbox-button{--tv-CheckboxButton-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-CheckboxButton-font-size:var(--tv-font-size-default, 14px);--tv-CheckboxButton-hover-text-color:var(--tv-color-text-active, #1476ff);--tv-CheckboxButton-checked-border-color:var(--tv-color-border-active-control, #1476ff);--tv-CheckboxButton-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-CheckboxButton-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-CheckboxButton-text-color:var(--tv-color-text, #191919);--tv-CheckboxButton-checked-text-color:var(--tv-color-text-active, #1476ff);--tv-CheckboxButton-border-color:var(--tv-color-border, #c2c2c2);--tv-CheckboxButton-border-color-hover:var(--tv-color-border-active-control, #1476ff);--tv-CheckboxButton-border-radius:var(--tv-border-radius-md, 6px);--tv-CheckboxButton-disabled-border-color:var(--tv-color-border-disabled, #dbdbdb);--tv-CheckboxButton-size-mini-font-size:var(--tv-font-size-sm, 12px);--tv-CheckboxButton-size-mini-border-radius:var(--tv-border-radius-sm, 4px);--tv-CheckboxButton-size-small-height:var(--tv-size-height-sm, 28px);--tv-CheckboxButton-size-mini-height:var(--tv-size-height-xs, 24px);--tv-CheckboxButton-size-medium-height:var(--tv-size-height-lg, 40px);--tv-CheckboxButton-small-font-size:var(--tv-font-size-sm, 12px);--tv-CheckboxButton-margin-top:var(--tv-space-md, 8px);position:relative;display:inline-block;margin-top:var(--tv-CheckboxButton-margin-top)}.tiny-checkbox-button.is-checked:after{content:'';position:absolute;width:0;height:0;right:4px;top:0;border-bottom:20px solid transparent;border-right:20px solid var(--tv-CheckboxButton-checked-border-color);border-top-right-radius:6px;display:block}.tiny-checkbox-button.is-checked:before{display:block;right:7px;top:1px;-webkit-box-sizing:content-box;box-sizing:content-box;content:'';border:.5px solid #fff;border-width:0 1px 1px 0;border-left:0;border-top:0;height:8px;width:4px;position:absolute;margin-left:4.5px;margin-top:1px;transition:transform .15s ease-in 50ms,-webkit-transform .15s ease-in 50ms;-webkit-transform-origin:center;transform-origin:center;z-index:3;-webkit-transform:rotate(45deg) scale(.7);transform:rotate(45deg) scale(.7)}.tiny-checkbox-button.is-checked .tiny-checkbox-button__inner{color:var(--tv-CheckboxButton-checked-text-color);border-color:var(--tv-CheckboxButton-checked-border-color)}.tiny-checkbox-button.is-disabled .tiny-checkbox-button__inner{color:var(--tv-CheckboxButton-disabled-text-color);cursor:not-allowed;background-image:none;background-color:var(--tv-CheckboxButton-disabled-bg-color);border-color:var(--tv-CheckboxButton-disabled-border-color);-webkit-box-shadow:none;box-shadow:none}.tiny-checkbox-button.is-disabled.is-checked:after{border-right:20px solid var(--tv-CheckboxButton-disabled-border-color)}.tiny-checkbox-button.is-disabled.is-checked .tiny-checkbox-button__inner{color:var(--tv-CheckboxButton-disabled-text-color);border-color:var(--tv-CheckboxButton-disabled-border-color);background-color:var(--tv-CheckboxButton-disabled-bg-color)}.tiny-checkbox-button__inner{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;padding:5px 24px;border-radius:var(--tv-CheckboxButton-border-radius);white-space:nowrap;vertical-align:middle;outline:0;line-height:1;font-weight:500;cursor:pointer;background:var(--tv-CheckboxButton-bg-color);border-left:0;border:1px solid var(--tv-CheckboxButton-border-color);color:var(--tv-CheckboxButton-text-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 4px;-webkit-transition:border-color .3s cubic-bezier(.645,.045,.355,1),background-color .3s cubic-bezier(.645,.045,.355,1);transition:border-color .3s cubic-bezier(.645,.045,.355,1),background-color .3s cubic-bezier(.645,.045,.355,1);font-size:var(--tv-CheckboxButton-font-size);-ms-user-select:none;-webkit-user-select:none;-o-user-select:none;-moz-user-select:none;user-select:none}.tiny-checkbox-button__inner.is-round{padding:12px 20px}.tiny-checkbox-button__inner:hover{color:var(--tv-CheckboxButton-hover-text-color);border:1px solid var(--tv-CheckboxButton-border-color-hover)}.tiny-checkbox-button__original{opacity:0;outline:0;position:absolute;margin:0;z-index:-1}.tiny-checkbox-button--medium .tiny-checkbox-button__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--tv-CheckboxButton-size-medium-height);padding:9px 32px;border-radius:var(--tv-CheckboxButton-border-radius)}.tiny-checkbox-button--medium .tiny-checkbox-button__inner.is-round{padding:14px 20px}.tiny-checkbox-button--small .tiny-checkbox-button__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--tv-CheckboxButton-size-small-height);padding:3px 24px;font-size:var(--tv-CheckboxButton-size-mini-font-size);border-radius:var(--tv-CheckboxButton-border-radius)}.tiny-checkbox-button--small .tiny-checkbox-button__inner.is-round{padding:8px 15px}.tiny-checkbox-button--mini .tiny-checkbox-button__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 16px;height:var(--tv-CheckboxButton-size-mini-height);font-size:var(--tv-CheckboxButton-size-mini-font-size);border-radius:var(--tv-CheckboxButton-size-mini-border-radius)}.tiny-checkbox-button--mini .tiny-checkbox-button__inner.is-round{padding:5px 15px}.tiny-checkbox-button--mini.is-checked:after{border-bottom:16px solid transparent;border-right:16px solid var(--tv-CheckboxButton-checked-border-color);border-top-right-radius:4px;right:5px}.tiny-checkbox-button--mini.is-checked:before{height:8px;width:4px;right:6px;top:0}.tiny-checkbox-button input:focus-visible+.tiny-checkbox-button__inner{outline:2px solid var(--tv-CheckboxButton-bg-color);outline-offset:1px}