UNPKG

@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
/* 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; }