kingdot/src/styles/lib/theme/ButtonGroup.css

A UI Components Library For Vue

.kd-btn-group{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start}.kd-btn-group .kd-btn-default:focus:not(.kd-btn-active) span,.kd-btn-group .kd-btn-default:hover:not(.kd-btn-active) span,.kd-btn-group-checkbox .kd-btn-active span,.kd-btn-group-radio .kd-btn-active span{display:inline-block;padding:1px}.kd-btn-group .kd-btn{margin-right:0}.kd-btn-group .kd-btn-default{margin-left:-1px;border-radius:0}.kd-btn-group .kd-btn-default:focus:not(.kd-btn-active),.kd-btn-group .kd-btn-default:hover:not(.kd-btn-active){z-index:2;background:linear-gradient(180deg,#e8465d 0,#603d5f 100%);border:none}.kd-btn-group .kd-btn-default:active:not(.kd-btn-active){background:linear-gradient(180deg,#b8283c 0,#3e203d 100%)}.kd-btn-group .kd-btn-danger+.kd-btn-danger:before,.kd-btn-group .kd-btn-primary+.kd-btn-primary:before,.kd-btn-group .kd-btn-success+.kd-btn-success:before,.kd-btn-group .kd-btn-warning+.kd-btn-warning:before{content:"";position:absolute;height:calc(100% - 10px);background:linear-gradient(180deg,#e8465d 0,#603d5f 100%);width:1px;left:-1px;top:5px}.kd-btn-group .kd-btn-default:first-child{margin-left:0;border-radius:4px 0 0 4px}.kd-btn-group .kd-btn-default:last-child{border-radius:0 4px 4px 0}.kd-btn-group .kd-btn-primary{border:1px;border-radius:0}.kd-btn-group .kd-btn-primary:first-child{border-radius:4px 0 0 4px}.kd-btn-group .kd-btn-primary:last-child{border-radius:0 4px 4px 0}.kd-btn-group .kd-btn-primary+.kd-btn-primary:before{border-radius:2px}.kd-btn-group .kd-btn-success{border:1px;border-radius:0}.kd-btn-group .kd-btn-success:first-child{border-radius:4px 0 0 4px}.kd-btn-group .kd-btn-success:last-child{border-radius:0 4px 4px 0}.kd-btn-group .kd-btn-success+.kd-btn-success:before{border-radius:2px}.kd-btn-group .kd-btn-warning{border:1px;border-radius:0}.kd-btn-group .kd-btn-warning:first-child{border-radius:4px 0 0 4px}.kd-btn-group .kd-btn-warning:last-child{border-radius:0 4px 4px 0}.kd-btn-group .kd-btn-warning+.kd-btn-warning:before{border-radius:2px}.kd-btn-group .kd-btn-danger{border:1px;border-radius:0}.kd-btn-group .kd-btn-danger:first-child{border-radius:4px 0 0 4px}.kd-btn-group .kd-btn-danger:last-child{border-radius:0 4px 4px 0}.kd-btn-group .kd-btn-danger+.kd-btn-danger:before{border-radius:2px}.kd-btn-group-checkbox,.kd-btn-group-radio{position:relative}.kd-btn-group-checkbox .kd-btn-default:hover,.kd-btn-group-radio .kd-btn-default:hover{color:linear-gradient(180deg,#f8334c 0,#4e284d 91%)}.kd-btn-group-checkbox .kd-btn-active,.kd-btn-group-radio .kd-btn-active{background:linear-gradient(180deg,#f8334c 0,#4e284d 91%);color:#fff;border:none}.kd-btn-group-checkbox .kd-btn-active:hover,.kd-btn-group-radio .kd-btn-active:hover{color:#fff}.kd-btn-group-checkbox .kd-btn-active:before,.kd-btn-group-radio .kd-btn-active:before{content:'';width:1px;position:absolute;left:-1px;top:5px;bottom:5px;background:linear-gradient(180deg,#b8283c 0,#3e203d 100%)}.kd-btn-group-checkbox .kd-btn-active:first-child:before,.kd-btn-group-radio .kd-btn-active:first-child:before{display:none}.kd-btn-group-checkbox .kd-btn-disabled,.kd-btn-group-radio .kd-btn-disabled{background:#222a41;border-color:#525c77;color:#525c77}.kd-btn-group-checkbox .kd-btn-disabled:active,.kd-btn-group-checkbox .kd-btn-disabled:focus,.kd-btn-group-checkbox .kd-btn-disabled:hover,.kd-btn-group-radio .kd-btn-disabled:active,.kd-btn-group-radio .kd-btn-disabled:focus,.kd-btn-group-radio .kd-btn-disabled:hover{background:#222a41!important;color:#4f576e!important;border-color:#525c77!important;cursor:not-allowed}.kd-btn-group-checkbox .kd-btn-disabled.kd-btn-active,.kd-btn-group-radio .kd-btn-disabled.kd-btn-active{background:linear-gradient(180deg,#f8334c 0,#4e284d 91%);color:#fff;border-color:linear-gradient(180deg,#f8334c 0,#4e284d 91%);opacity:.5}.kd-btn-group-checkbox .kd-btn-disabled.kd-btn-active:active,.kd-btn-group-checkbox .kd-btn-disabled.kd-btn-active:focus,.kd-btn-group-checkbox .kd-btn-disabled.kd-btn-active:hover,.kd-btn-group-radio .kd-btn-disabled.kd-btn-active:active,.kd-btn-group-radio .kd-btn-disabled.kd-btn-active:focus,.kd-btn-group-radio .kd-btn-disabled.kd-btn-active:hover{background:linear-gradient(180deg,#f8334c 0,#4e284d 91%)!important;color:#fff!important;border-color:linear-gradient(180deg,#f8334c 0,#4e284d 91%)!important}