t-fighting-design/theme/button-group.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-button-group{display:inline-block}.f-button-group.f-button-group__large .f-button{height:40px;padding:0 28px}.f-button-group.f-button-group__large .f-button .f-text{line-height:40px;font-size:15px}.f-button-group.f-button-group__middle .f-button{height:35px;padding:0 25px}.f-button-group.f-button-group__middle .f-button .f-text{line-height:35px;font-size:14px}.f-button-group.f-button-group__small .f-button{height:30px;padding:0 22px}.f-button-group.f-button-group__small .f-button .f-text{line-height:30px;font-size:13px}.f-button-group.f-button-group__mini .f-button{height:25px;padding:0 19px}.f-button-group.f-button-group__mini .f-button .f-text{line-height:25px;font-size:12px}.f-button-group.f-button-group__horizontal .f-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.f-button-group.f-button-group__horizontal .f-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.f-button-group.f-button-group__horizontal .f-button:not(:first-child):not(:last-child){border-radius:0}.f-button-group.f-button-group__vertical{display:inline-flex;flex-direction:column}.f-button-group.f-button-group__vertical .f-button:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.f-button-group.f-button-group__vertical .f-button:last-child{border-top-right-radius:0;border-top-left-radius:0}.f-button-group.f-button-group__vertical .f-button:not(:first-child):not(:last-child){border-radius:0}