@syncfusion/ej2-splitbuttons
Version:
A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.
331 lines (329 loc) • 10.3 kB
CSS
/* stylelint-disable-line no-empty-source */
.e-split-btn-wrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
white-space: nowrap;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
.e-split-btn-wrapper .e-split-btn {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
text-transform: none;
z-index: 1;
padding-left: 10px;
padding-right: 10px;
}
.e-split-btn-wrapper .e-split-btn:focus {
outline-offset: 0;
}
.e-split-btn-wrapper .e-split-btn:focus {
-webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
z-index: 2;
}
.e-split-btn-wrapper .e-split-btn:active {
-webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
z-index: 2;
}
.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
padding-bottom: 10px;
padding-top: 10px;
}
.e-split-btn-wrapper .e-split-btn .e-btn-icon {
font-size: 14px;
margin-left: 0;
padding-right: 8px;
width: auto;
}
.e-split-btn-wrapper .e-split-btn .e-icon-top {
padding-bottom: 4px;
padding-right: 0;
}
.e-split-btn-wrapper .e-split-btn.e-icon-btn {
padding-left: 10px;
padding-right: 10px;
}
.e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
padding-right: 0;
}
.e-split-btn-wrapper .e-dropdown-btn {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -1px;
padding-left: 4px;
padding-right: 4px;
z-index: 1;
}
.e-split-btn-wrapper .e-dropdown-btn:active {
-webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
z-index: 2;
}
.e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
z-index: 0;
}
.e-split-btn-wrapper .e-dropdown-btn:focus {
outline-offset: 0;
}
.e-split-btn-wrapper .e-btn:focus {
-webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
z-index: 2;
}
.e-split-btn-wrapper .e-btn:active {
-webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
z-index: 2;
}
.e-split-btn-wrapper .e-btn:disabled {
-webkit-box-shadow: none;
box-shadow: none;
}
.e-split-btn-wrapper .e-btn.e-inherit:focus, .e-split-btn-wrapper .e-btn.e-inherit:active {
-webkit-box-shadow: none;
box-shadow: none;
}
.e-split-btn-wrapper.e-rtl .e-split-btn {
border-bottom-left-radius: 0;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-top-right-radius: 4px;
margin-left: -1px;
padding-left: 4px;
padding-right: 10px;
}
.e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
margin-right: 0;
padding-left: 8px;
padding-right: 0;
}
.e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
padding-left: 0;
}
.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
padding-left: 10px;
padding-right: 10px;
}
.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
padding-left: 0;
}
.e-split-btn-wrapper.e-rtl .e-dropdown-btn {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0;
border-top-left-radius: 4px;
border-top-right-radius: 0;
margin-left: 0;
}
.e-split-btn-wrapper.e-vertical {
display: inline-block;
}
.e-split-btn-wrapper.e-vertical .e-split-btn,
.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
display: block;
width: 100%;
}
.e-split-btn-wrapper.e-vertical .e-split-btn {
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
line-height: 1;
padding-bottom: 4px;
padding-right: 10px;
}
.e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
padding-bottom: 4px;
}
.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
border-bottom-left-radius: 4px;
border-top-right-radius: 0;
line-height: 0.334em;
margin-left: 0;
margin-top: -1px;
padding-bottom: 4px;
padding-top: 4px;
}
.e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
padding-top: 0;
}
.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
border-bottom-right-radius: 0;
border-top-left-radius: 4px;
margin-left: 0;
}
.e-split-btn-wrapper.e-vertical.e-rtl .e-dropdown-btn {
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
}
.e-split-btn-wrapper .e-split-btn {
border-right-color: #6c757d;
}
.e-split-btn-wrapper .e-split-btn:focus {
border-right-color: #6c757d;
}
.e-split-btn-wrapper .e-split-btn:active {
border-right-color: rgb(86.4, 93.6, 100);
}
.e-split-btn-wrapper .e-split-btn:disabled {
border-right-color: rgba(108, 117, 125, 0.65);
}
.e-split-btn-wrapper .e-split-btn.e-inherit {
border-color: transparent;
}
.e-split-btn-wrapper:hover :not(e-active) .e-split-btn {
border-right-color: #6c757d;
}
.e-split-btn-wrapper:hover :not(e-active) .e-split-btn:disabled {
border-right-color: rgba(108, 117, 125, 0.65);
}
.e-split-btn-wrapper.e-rtl .e-split-btn {
border-left-color: #6c757d;
border-right-color: #6c757d;
}
.e-split-btn-wrapper.e-rtl .e-split-btn:focus {
border-left-color: #6c757d;
border-right-color: #6c757d;
}
.e-split-btn-wrapper.e-rtl .e-split-btn:active {
border-left-color: rgb(86.4, 93.6, 100);
border-right-color: rgb(86.4, 93.6, 100);
}
.e-split-btn-wrapper.e-rtl .e-split-btn:disabled {
border-left-color: rgba(108, 117, 125, 0.65);
border-right-color: #6c757d;
}
.e-split-btn-wrapper.e-rtl .e-split-btn.e-inherit {
border-color: transparent;
}
.e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active) {
border-left-color: #6c757d;
border-right-color: #6c757d;
}
.e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active):disabled {
border-left-color: rgba(108, 117, 125, 0.65);
}
.e-split-btn-wrapper.e-vertical .e-split-btn {
border-bottom-color: #6c757d;
border-right-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical .e-split-btn.e-inherit, .e-split-btn-wrapper.e-vertical .e-split-btn.e-inherit:focus, .e-split-btn-wrapper.e-vertical .e-split-btn.e-inherit:active, .e-split-btn-wrapper.e-vertical .e-split-btn.e-inherit:disabled {
border-color: transparent;
}
.e-split-btn-wrapper.e-vertical .e-split-btn:focus {
border-bottom-color: #6c757d;
border-right-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical .e-split-btn:active {
border-bottom-color: rgb(86.4, 93.6, 100);
border-right-color: rgb(86.4, 93.6, 100);
}
.e-split-btn-wrapper.e-vertical .e-split-btn:disabled {
border-bottom-color: rgba(108, 117, 125, 0.65);
border-right-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical:hover .e-split-btn {
border-bottom-color: #6c757d;
border-right-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical:hover .e-split-btn.e-inherit, .e-split-btn-wrapper.e-vertical:hover .e-split-btn.e-inherit:disabled {
border-color: transparent;
}
.e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
border-bottom-color: rgba(108, 117, 125, 0.65);
}
.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
border-left-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn.e-inherit, .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn.e-inherit:focus, .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn.e-inherit:active, .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn.e-inherit:disabled {
border-color: transparent;
}
.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:focus {
border-left-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:active {
border-left-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:disabled {
border-left-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn {
border-left-color: #6c757d;
}
.e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn.e-inherit {
border-color: transparent;
}
.e-bigger .e-split-btn-wrapper .e-split-btn,
.e-bigger.e-split-btn-wrapper .e-split-btn {
padding-left: 12px;
padding-right: 6px;
}
.e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
.e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
padding-bottom: 12px;
padding-top: 12px;
}
.e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
.e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
font-size: 16px;
margin-left: 0;
padding-right: 10px;
width: auto;
}
.e-bigger .e-split-btn-wrapper .e-split-btn .e-icon-top,
.e-bigger.e-split-btn-wrapper .e-split-btn .e-icon-top {
padding-bottom: 6px;
padding-right: 0;
}
.e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn,
.e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn {
padding-left: 12px;
padding-right: 12px;
}
.e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon,
.e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
padding-right: 0;
}
.e-bigger .e-split-btn-wrapper .e-dropdown-btn,
.e-bigger.e-split-btn-wrapper .e-dropdown-btn {
padding-left: 4px;
padding-right: 4px;
}
.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
padding-left: 6px;
padding-right: 12px;
}
.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon,
.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
padding-left: 10px;
padding-right: 0;
}
.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top,
.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
padding-left: 0;
}
.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn,
.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
padding-left: 12px;
padding-right: 12px;
}
.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon,
.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
padding-left: 0;
}
.e-bigger .e-split-btn-wrapper.e-vertical .e-split-btn,
.e-bigger.e-split-btn-wrapper.e-vertical .e-split-btn {
padding-bottom: 6px;
padding-right: 12px;
}
.e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn,
.e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
padding-bottom: 4px;
padding-top: 4px;
}
.e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom,
.e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
padding-top: 0;
}