@syncfusion/react-splitbuttons
Version:
Syncfusion React SplitButton package is a feature-rich collection of UI components, including SplitButton and DropDownButton, designed for advanced button interactions in React applications.
98 lines • 3.63 kB
CSS
.sf-split-btn-wrapper {
display: inline-flex;
white-space: nowrap;
width: min-content;
border-radius: var(--sf-radius-20);
box-shadow: none;
gap: var(--sf-spacing-2);
}
.sf-split-btn-wrapper .sf-btn-vertical + .sf-dropdown-btn {
height: auto;
}
.sf-split-btn-wrapper .sf-split-btn,
.sf-split-btn-wrapper .sf-dropdown-btn {
box-shadow: none;
}
.sf-split-btn-wrapper .sf-split-btn:focus,
.sf-split-btn-wrapper .sf-dropdown-btn:focus {
outline-offset: 0;
box-shadow: none;
}
.sf-split-btn-wrapper .sf-split-btn:disabled:focus, .sf-split-btn-wrapper .sf-split-btn:disabled:hover, .sf-split-btn-wrapper .sf-split-btn:disabled:active,
.sf-split-btn-wrapper .sf-dropdown-btn:disabled:focus,
.sf-split-btn-wrapper .sf-dropdown-btn:disabled:hover,
.sf-split-btn-wrapper .sf-dropdown-btn:disabled:active {
z-index: 0;
}
.sf-split-btn-wrapper .sf-split-btn {
text-transform: none;
z-index: 1;
}
.sf-split-btn-wrapper .sf-split-btn:focus, .sf-split-btn-wrapper .sf-split-btn:active {
box-shadow: none;
z-index: 2;
}
.sf-split-btn-wrapper .sf-dropdown-btn {
transition: border-radius 0.25s ease-in;
}
.sf-split-btn-wrapper.sf-standard {
box-shadow: none;
}
.sf-split-btn-wrapper.sf-split-btn-sm .sf-split-btn {
padding-inline: var(--sf-spacing-12) var(--sf-spacing-10);
font-size: var(--sf-font-size-xs);
border-start-start-radius: var(--sf-radius-16);
border-start-end-radius: var(--sf-radius-4);
border-end-start-radius: var(--sf-radius-16);
border-end-end-radius: var(--sf-radius-4);
}
.sf-split-btn-wrapper.sf-split-btn-sm .sf-dropdown-btn {
padding: var(--sf-spacing-10) var(--sf-spacing-12);
border-start-start-radius: var(--sf-radius-4);
border-start-end-radius: var(--sf-radius-16);
border-end-start-radius: var(--sf-radius-4);
border-end-end-radius: var(--sf-radius-16);
}
.sf-split-btn-wrapper.sf-split-btn-sm .sf-dropdown-btn.sf-active {
border-radius: var(--sf-radius-16);
}
.sf-split-btn-wrapper.sf-split-btn-me .sf-split-btn {
padding-inline: var(--sf-spacing-16) var(--sf-spacing-12);
padding-block: var(--sf-spacing-10);
font-size: var(--sf-font-size-sm);
border-start-start-radius: var(--sf-radius-20);
border-start-end-radius: var(--sf-radius-4);
border-end-start-radius: var(--sf-radius-20);
border-end-end-radius: var(--sf-radius-4);
}
.sf-split-btn-wrapper.sf-split-btn-me .sf-dropdown-btn {
padding: var(--sf-spacing-12) var(--sf-spacing-14);
border-start-start-radius: var(--sf-radius-4);
border-start-end-radius: var(--sf-radius-20);
border-end-start-radius: var(--sf-radius-4);
border-end-end-radius: var(--sf-radius-20);
}
.sf-split-btn-wrapper.sf-split-btn-me .sf-dropdown-btn.sf-active {
border-start-start-radius: var(--sf-radius-16);
border-start-end-radius: var(--sf-radius-20);
border-end-start-radius: var(--sf-radius-16);
border-end-end-radius: var(--sf-radius-20);
}
.sf-split-btn-wrapper.sf-split-btn-la .sf-split-btn {
padding-inline: var(--sf-spacing-20) var(--sf-spacing-16);
font-size: var(--sf-font-size-base);
border-start-start-radius: var(--sf-radius-24);
border-start-end-radius: var(--sf-radius-4);
border-end-start-radius: var(--sf-radius-24);
border-end-end-radius: var(--sf-radius-4);
}
.sf-split-btn-wrapper.sf-split-btn-la .sf-dropdown-btn {
padding: var(--sf-spacing-12) var(--sf-spacing-14);
border-start-start-radius: var(--sf-radius-4);
border-start-end-radius: var(--sf-radius-24);
border-end-start-radius: var(--sf-radius-4);
border-end-end-radius: var(--sf-radius-24);
}
.sf-split-btn-wrapper.sf-split-btn-la .sf-dropdown-btn.sf-active {
border-radius: var(--sf-radius-24);
}