vuestic-ui
Version:
Vue 3 UI Framework
71 lines • 2.1 kB
CSS
:root,
:host {
--va-button-group-display: flex;
--va-button-group-justify-content: stretch;
--va-button-group-border-radius: 999px;
--va-button-group-gap: 0.25rem;
/* Button */
--va-button-group-button-margin: 0;
--va-button-group-button-width: auto;
--va-button-group-button-padding: 0.25rem;
}
.va-button-group {
display: var(--va-button-group-display);
justify-content: var(--va-button-group-justify-content);
border-radius: var(--va-button-group-border-radius);
font-family: var(--va-font-family);
width: -moz-max-content;
width: max-content;
background: var(--va-background-color);
}
.va-button-group--grow {
width: 100%;
--va-button-group-button-width: 100%;
}
.va-button-group--square {
border-radius: var(--va-button-border-radius);
}
.va-button-group--small.va-button-group--square {
border-radius: var(--va-button-sm-border-radius);
}
.va-button-group--large.va-button-group--square {
border-radius: var(--va-button-lg-border-radius);
}
.va-button-group .va-button {
margin: var(--va-button-group-button-margin);
width: var(--va-button-group-button-width);
box-shadow: none;
outline: none;
}
.va-button-group .va-button:focus-visible {
outline: none ;
}
.va-button-group .va-button:focus-visible::before {
outline: 2px solid var(--va-focus) ;
border-radius: "inherit";
outline-offset: -2px;
}
.va-button-group > .va-button:last-child {
padding-right: var(--va-button-group-button-padding);
}
.va-button-group > .va-button:first-child {
padding-left: var(--va-button-group-button-padding);
}
.va-button-group > .va-button:not(:last-child) {
padding-right: var(--va-button-group-gap);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.va-button-group > .va-button:not(:last-child) .va-button__content {
margin-right: 0;
}
.va-button-group > .va-button + .va-button {
padding-left: var(--va-button-group-gap);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
.va-button-group > .va-button + .va-button .va-button__content {
margin-left: 0;
}