UNPKG

@syncfusion/ej2-splitbuttons

Version:

A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.

1,320 lines (1,290 loc) 88.1 kB
/* stylelint-disable */ .e-btn.e-primary:focus { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important; } .e-btn.e-success:focus { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important; } .e-btn.e-info:focus { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important; } .e-btn.e-warning:focus { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important; } .e-btn.e-danger:focus { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important; } .e-btn.e-outline.e-info { background: transparent !important; border-color: var(--color-sf-utility-info-border-color) !important; color: var(--color-sf-utility-info-text) !important; } .e-btn.e-outline.e-info:hover { background: var(--color-sf-utility-info-bg-color-hover) !important; border-color: var(--color-sf-utility-info-border-color) !important; color: var(--color-sf-utility-info-text-hover) !important; } .e-btn.e-outline.e-info:active { background: var(--color-sf-utility-info-bg-color-pressed) !important; border-color: var(--color-sf-utility-info-border-color) !important; color: var(--color-sf-utility-info-text-hover) !important; } .e-btn.e-flat.e-info { color: var(--color-sf-utility-info-text) !important; } .e-bigger .e-btn, .e-bigger .e-btn, .e-bigger .e-css.e-btn, .e-bigger.e-css.e-btn { font-size: 14px; line-height: 1.572em; padding: 8px 15px; border-radius: 8px !important; font-weight: 600; } /* stylelint-disable-line no-empty-source */ .e-dropdown-popup { position: absolute; border-radius: 8px; margin-top: 4px; } .e-dropdown-popup ul { border: 1px solid var(--color-sf-border-secondary); border-radius: 8px; -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05); box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; font-weight: 500; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; min-width: 120px; overflow: hidden; padding: 4px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .e-dropdown-popup ul .e-item { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; height: 32px; line-height: 32px; padding: 0 12px; margin: 0 6px; border-radius: 6px; } .e-dropdown-popup ul .e-item.e-url { padding: 0; } .e-dropdown-btn .e-caret::before, .e-dropdown-btn.e-btn .e-caret::before { content: "\e729"; } .e-dropdown-btn, .e-dropdown-btn.e-btn { -webkit-box-shadow: none; box-shadow: none; text-transform: none; white-space: normal; } .e-dropdown-btn:hover, .e-dropdown-btn.e-btn:hover { -webkit-box-shadow: none; box-shadow: none; } .e-dropdown-btn:focus, .e-dropdown-btn.e-btn:focus { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-dropdown-btn:active, .e-dropdown-btn.e-btn:active { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-dropdown-btn .e-btn-icon, .e-dropdown-btn.e-btn .e-btn-icon { font-size: 14px; } .e-dropdown-btn .e-caret, .e-dropdown-btn.e-btn .e-caret { font-size: 14px; } .e-dropdown-btn.e-vertical, .e-dropdown-btn.e-btn.e-vertical { line-height: 1; padding: 6px 12px; } .e-dropdown-btn.e-caret-hide .e-caret, .e-dropdown-btn.e-btn.e-caret-hide .e-caret { display: none; } .e-dropdown-btn.e-small .e-dropdown-popup ul, .e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul { padding: 4px 0; } .e-dropdown-btn.e-small .e-dropdown-popup ul .e-item, .e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul .e-item { padding: 0 8px; } .e-dropdown-btn.e-small.e-vertical, .e-dropdown-btn.e-btn.e-small.e-vertical { line-height: 1; padding: 6px 12px; } .e-dropdown-btn.e-small .e-btn-icon, .e-dropdown-btn.e-btn.e-small .e-btn-icon { font-size: 12px; } .e-dropdown-btn.e-small .e-btn-icon.e-caret, .e-dropdown-btn.e-btn.e-small .e-btn-icon.e-caret { font-size: 12px; } .e-dropdown-popup { position: absolute; border-radius: 8px; margin-top: 4px; } .e-dropdown-popup ul { border: 1px solid var(--color-sf-border-secondary); border-radius: 8px; -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05); box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; font-weight: 500; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; min-width: 120px; overflow: hidden; padding: 4px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .e-dropdown-popup ul .e-item { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; height: 32px; line-height: 32px; padding: 0 12px; } .e-dropdown-popup ul .e-item.e-separator { padding: 0 !important; /* stylelint-disable-line declaration-no-important */ } .e-dropdown-popup ul .e-item.e-url { padding: 0; } .e-dropdown-popup ul .e-item .e-menu-url { display: block; padding: 0 12px; text-decoration: none; width: 100%; } .e-dropdown-popup ul .e-item .e-menu-icon { float: left; font-size: 18px; line-height: 32px; margin-right: 12px; vertical-align: middle; width: 1em; } .e-dropdown-popup ul .e-item.e-disabled { cursor: auto; pointer-events: none; } .e-dropdown-popup ul .e-item.e-separator { border-bottom-style: solid; border-bottom-width: 1px; cursor: auto; height: auto; line-height: normal; margin: 3px 0; pointer-events: none; } .e-dropdown-popup.e-transparent { background: transparent; -webkit-box-shadow: none; box-shadow: none; } .e-dropdown-popup.e-transparent .e-dropdown-menu { border: 0; height: 1px; min-width: 0; padding: 0; width: 1px; } .e-dropdown-popup.e-hidden { display: none !important; /* stylelint-disable-line declaration-no-important */ } .e-rtl.e-dropdown-popup .e-item .e-menu-icon { float: right; margin-left: 12px; margin-right: 0; } .e-dropdown-popup-width ul { min-width: 0 !important; /* stylelint-disable-line declaration-no-important */ } .e-dropdown-popup-width ul li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block !important; /* stylelint-disable-line declaration-no-important */ } .e-dropdown-popup { background: var(--color-sf-bg-primary-alt); color: var(--color-sf-utility-secondary-text-color); } .e-dropdown-popup ul .e-item .e-menu-url { color: var(--color-sf-utility-secondary-text-color); } .e-dropdown-popup ul .e-item .e-menu-icon { color: var(--color-sf-utility-secondary-text-color); } .e-dropdown-popup ul .e-item.e-focused { background: var(--color-sf-bg-secondary-hover); -webkit-box-shadow: none; box-shadow: none; } .e-dropdown-popup ul .e-item:hover { background: var(--color-sf-bg-secondary-hover); color: var(--color-sf-text-primary); } .e-dropdown-popup ul .e-item:active, .e-dropdown-popup ul .e-item.e-selected { background: var(--color-sf-bg-tertiary); color: var(--color-sf-text-primary); } .e-dropdown-popup ul .e-item:active .e-menu-url, .e-dropdown-popup ul .e-item.e-selected .e-menu-url { color: var(--color-sf-text-primary); } .e-dropdown-popup ul .e-item:active .e-menu-icon, .e-dropdown-popup ul .e-item.e-selected .e-menu-icon { color: var(--color-sf-text-primary); } .e-dropdown-popup ul .e-separator { border-bottom-color: var(--color-sf-border-secondary); } .e-dropdown-btn.e-inherit, .e-dropdown-btn.e-btn.e-inherit { background: inherit; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: inherit; } .e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active, .e-dropdown-btn.e-btn.e-inherit:hover, .e-dropdown-btn.e-btn.e-inherit:focus, .e-dropdown-btn.e-btn.e-inherit:active, .e-dropdown-btn.e-btn.e-inherit.e-active { background: rgba(0, 0, 0, 0.056); border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: inherit; } .e-bigger .e-dropdown-btn .e-btn-icon, .e-bigger.e-dropdown-btn .e-btn-icon { font-size: 18px; } .e-bigger .e-dropdown-btn .e-caret, .e-bigger.e-dropdown-btn .e-caret { font-size: 18px; } .e-bigger .e-dropdown-btn.e-vertical, .e-bigger.e-dropdown-btn.e-vertical { line-height: 1; padding: 8px 16px; } .e-bigger .e-dropdown-btn.e-small.e-vertical, .e-bigger.e-dropdown-btn.e-small.e-vertical { line-height: 1; padding: 8px 16px; } .e-bigger .e-dropdown-btn.e-small .e-btn-icon, .e-bigger.e-dropdown-btn.e-small .e-btn-icon { font-size: 16px; } .e-bigger .e-dropdown-btn.e-small .e-btn-icon.e-caret, .e-bigger.e-dropdown-btn.e-small .e-btn-icon.e-caret { font-size: 16px; } *.e-bigger .e-dropdown-popup { background-color: transparent; border-radius: 8px; } *.e-bigger .e-dropdown-popup ul, *.e-bigger.e-dropdown-popup ul { -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05); box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05); font-size: 14px; min-width: 112px; padding: 4px 0; background-color: var(--color-sf-bg-primary-alt); margin-top: 4px; } *.e-bigger .e-dropdown-popup ul .e-item, *.e-bigger.e-dropdown-popup ul .e-item { height: 40px; line-height: 40px; padding: 0 16px; } *.e-bigger .e-dropdown-popup ul .e-item.e-url, *.e-bigger.e-dropdown-popup ul .e-item.e-url { padding: 0; } *.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon, *.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon { font-size: 22px; line-height: 40px; } *.e-bigger .e-dropdown-popup ul .e-item.e-separator, *.e-bigger.e-dropdown-popup ul .e-item.e-separator { height: auto; line-height: normal; } .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: 12px; padding-right: 12px; padding-left: 10px; padding-right: 10px; } .e-split-btn-wrapper .e-split-btn:focus { outline-offset: 0; } .e-split-btn-wrapper .e-split-btn:hover { -webkit-box-shadow: none; box-shadow: none; } .e-split-btn-wrapper .e-split-btn:focus { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); z-index: 2; } .e-split-btn-wrapper .e-split-btn:active { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); 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: 10px; padding-right: 10px; z-index: 1; } .e-split-btn-wrapper .e-dropdown-btn:focus, .e-split-btn-wrapper .e-dropdown-btn:hover { -webkit-box-shadow: none; box-shadow: none; } .e-split-btn-wrapper .e-dropdown-btn:active { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); 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 { -webkit-box-shadow: none; box-shadow: none; } .e-split-btn-wrapper .e-btn:hover { -webkit-box-shadow: none; box-shadow: none; } .e-split-btn-wrapper .e-btn:focus { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); z-index: 2; } .e-split-btn-wrapper .e-btn:active { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); 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: 8px; border-top-left-radius: 0; border-top-right-radius: 8px; margin-left: -1px; padding-left: 12px; padding-right: 12px; 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: 8px; border-bottom-right-radius: 0; border-top-left-radius: 8px; border-top-right-radius: 0; margin-left: 0; z-index: 1; } .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: 8px; line-height: 1; padding-bottom: 10px; padding-right: 10px; 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: 8px; 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: 8px; margin-left: 0; } .e-split-btn-wrapper.e-vertical.e-rtl .e-dropdown-btn { border-bottom-right-radius: 8px; border-top-left-radius: 0; } .e-split-btn-wrapper .e-split-btn { border-right-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper .e-split-btn:focus { border-right-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper .e-split-btn:active { border-right-color: var(--color-sf-utility-secondary-bg-color-pressed); } .e-split-btn-wrapper .e-split-btn:disabled { border-right-color: var(--color-sf-bg-disabled); } .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: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper:hover :not(e-active) .e-split-btn:disabled { border-right-color: var(--color-sf-border-disabled-subtle); } .e-split-btn-wrapper.e-rtl .e-split-btn { border-left-color: var(--color-sf-utility-secondary-border-color); border-right-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper.e-rtl .e-split-btn:focus { border-left-color: var(--color-sf-utility-secondary-border-color); border-right-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper.e-rtl .e-split-btn:active { border-left-color: var(--color-sf-utility-secondary-bg-color-pressed); border-right-color: var(--color-sf-utility-secondary-bg-color-pressed); } .e-split-btn-wrapper.e-rtl .e-split-btn:disabled { border-left-color: var(--color-sf-border-disabled-subtle); border-right-color: var(--color-sf-utility-secondary-border-color); } .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: var(--color-sf-utility-secondary-border-color); border-right-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active):disabled { border-left-color: var(--color-sf-border-disabled-subtle); } .e-split-btn-wrapper.e-vertical .e-split-btn { border-bottom-color: var(--color-sf-utility-secondary-border-color); border-right-color: var(--color-sf-utility-secondary-border-color); } .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: var(--color-sf-utility-secondary-border-color); border-right-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper.e-vertical .e-split-btn:active { border-bottom-color: var(--color-sf-utility-secondary-bg-color-pressed); border-right-color: var(--color-sf-utility-secondary-bg-color-pressed); } .e-split-btn-wrapper.e-vertical .e-split-btn:disabled { border-bottom-color: var(--color-sf-border-disabled-subtle); border-right-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper.e-vertical:hover .e-split-btn { border-bottom-color: var(--color-sf-utility-secondary-border-color); border-right-color: var(--color-sf-utility-secondary-border-color); } .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: var(--color-sf-border-disabled-subtle); } .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn { border-left-color: var(--color-sf-utility-secondary-border-color); } .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: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:active { border-left-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:disabled { border-left-color: var(--color-sf-utility-secondary-border-color); } .e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn { border-left-color: var(--color-sf-utility-secondary-border-color); } .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: 16px; padding-right: 16px; } .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: 18px; 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; z-index: 1; } .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn, .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn { padding-left: 12px; 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: 12px; 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; z-index: 1; } .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; } /* stylelint-disable */ *.e-btn-group, *.e-css.e-btn-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border-radius: 4px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; } *.e-btn-group input:focus + label.e-btn, *.e-btn-group .e-btn:focus, *.e-btn-group .e-btn:hover, *.e-css.e-btn-group input:focus + label.e-btn, *.e-css.e-btn-group .e-btn:focus, *.e-css.e-btn-group .e-btn:hover { z-index: 2; } *.e-btn-group input + label.e-btn, *.e-css.e-btn-group input + label.e-btn { margin-bottom: 0; } *.e-btn-group input, *.e-css.e-btn-group input { -moz-appearance: none; height: 1px; margin: 0 0 0 -1px; opacity: 0; position: absolute; width: 1px; } *.e-btn-group input:disabled + label.e-btn, *.e-btn-group :disabled, *.e-css.e-btn-group input:disabled + label.e-btn, *.e-css.e-btn-group :disabled { cursor: default; pointer-events: none; } *.e-btn-group .e-btn-icon, *.e-css.e-btn-group .e-btn-icon { font-size: 18px; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn, *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn { margin-left: -1px; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:not(:first-of-type):not(:last-of-type), *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:not(:first-of-type):not(:last-of-type) { border-radius: 0; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type, *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child), *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type, *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type, *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper + .e-btn, *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper + .e-btn { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:last-child, *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:last-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:first-child, *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:first-child .e-btn:last-child, *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:first-child .e-btn:last-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:last-child .e-btn:first-child, *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:last-child .e-btn:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group.e-rtl .e-btn, *.e-css.e-btn-group.e-rtl .e-btn { margin-left: -1px; } *.e-btn-group.e-rtl .e-btn:not(:first-of-type):not(:last-of-type), *.e-css.e-btn-group.e-rtl .e-btn:not(:first-of-type):not(:last-of-type) { border-radius: 0; } *.e-btn-group.e-rtl .e-btn:first-of-type, *.e-btn-group.e-rtl .e-btn:last-of-type:not(:last-child), *.e-css.e-btn-group.e-rtl .e-btn:first-of-type, *.e-css.e-btn-group.e-rtl .e-btn:last-of-type:not(:last-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group.e-rtl .e-btn:last-of-type, *.e-css.e-btn-group.e-rtl .e-btn:last-of-type { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group.e-rtl .e-split-btn-wrapper + .e-btn, *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper + .e-btn { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group.e-rtl .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:last-child, *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group.e-rtl .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:first-child, *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group.e-rtl .e-split-btn-wrapper:first-child .e-btn:last-child, *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper:first-child .e-btn:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group.e-rtl .e-split-btn-wrapper:last-child .e-btn:first-child, *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper:last-child .e-btn:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group.e-vertical, *.e-css.e-btn-group.e-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } *.e-btn-group.e-vertical input, *.e-css.e-btn-group.e-vertical input { margin: -1px 0 0; } *.e-btn-group.e-vertical .e-btn:not(.e-outline), *.e-css.e-btn-group.e-vertical .e-btn:not(.e-outline) { margin-top: -1px; } *.e-btn-group.e-vertical .e-btn:not(:first-of-type):not(:last-of-type), *.e-css.e-btn-group.e-vertical .e-btn:not(:first-of-type):not(:last-of-type) { border-radius: 0; } *.e-btn-group.e-vertical .e-btn:first-of-type, *.e-css.e-btn-group.e-vertical .e-btn:first-of-type { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 2px; border-top-right-radius: 2px; } *.e-btn-group.e-vertical .e-btn:last-of-type, *.e-css.e-btn-group.e-vertical .e-btn:last-of-type { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 0; border-top-right-radius: 0; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl), *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) { border-radius: 20px; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:first-of-type, *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:first-of-type { border-bottom-left-radius: 20px; border-top-left-radius: 20px; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:last-of-type, *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:last-of-type { border-bottom-right-radius: 20px; border-top-right-radius: 20px; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:last-of-type:not(:last-child), *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:last-of-type:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper + .e-btn, *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper + .e-btn { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:first-child .e-btn:first-child, *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:first-child .e-btn:first-child { border-bottom-left-radius: 20px; border-top-left-radius: 20px; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:first-child .e-btn:last-child, *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:first-child .e-btn:last-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:first-child, *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:last-child, *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:last-child { border-bottom-right-radius: 20px; border-top-right-radius: 20px; } *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl, *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl { border-radius: 20px; } *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type, *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type { border-bottom-right-radius: 20px; border-top-right-radius: 20px; } *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type, *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type { border-bottom-left-radius: 20px; border-top-left-radius: 20px; } *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type:not(:last-child), *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type:not(:last-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type:not(:first-child), *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type:not(:first-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } /* stylelint-disable */ .e-btn-group:not(.e-outline), .e-css.e-btn-group:not(.e-outline) { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05); } .e-btn-group .e-btn:hover, .e-css.e-btn-group .e-btn:hover { -webkit-box-shadow: none; box-shadow: none; } .e-btn-group .e-btn:focus, .e-btn-group input:focus-visible + label.e-btn, .e-btn-group input:focus + label.e-btn, .e-css.e-btn-group .e-btn:focus, .e-css.e-btn-group input:focus-visible + label.e-btn, .e-css.e-btn-group input:focus + label.e-btn { background: var(--color-sf-utility-secondary-bg-color-hover); border-color: var(--color-sf-utility-secondary-border-color); color: var(--color-sf-utility-secondary-text-color-hover); outline: var(--color-sf-utility-secondary-bg-color) 0 solid; outline-offset: 0; -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); outline-color: inherit; } .e-btn-group .e-btn:focus.e-primary, .e-btn-group input:focus-visible + label.e-btn.e-primary, .e-btn-group input:focus + label.e-btn.e-primary, .e-css.e-btn-group .e-btn:focus.e-primary, .e-css.e-btn-group input:focus-visible + label.e-btn.e-primary, .e-css.e-btn-group input:focus + label.e-btn.e-primary { background: var(--color-sf-brand-solid-primary-hover); border-color: var(--color-sf-brand-solid-primary-hover); color: var(--color-sf-on-brand-solid-primary); outline: var(--color-sf-utility-secondary-bg-color) 0 solid; -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); outline-color: inherit; } .e-btn-group .e-btn:focus.e-success, .e-btn-group input:focus-visible + label.e-btn.e-success, .e-btn-group input:focus + label.e-btn.e-success, .e-css.e-btn-group .e-btn:focus.e-success, .e-css.e-btn-group input:focus-visible + label.e-btn.e-success, .e-css.e-btn-group input:focus + label.e-btn.e-success { background: #075d39; border-color: #075d39; color: var(--color-sf-base-white); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); outline-color: inherit; } .e-btn-group .e-btn:focus.e-info, .e-btn-group input:focus-visible + label.e-btn.e-info, .e-btn-group input:focus + label.e-btn.e-info, .e-css.e-btn-group .e-btn:focus.e-info, .e-css.e-btn-group input:focus-visible + label.e-btn.e-info, .e-css.e-btn-group input:focus + label.e-btn.e-info { background: var(--color-sf-utility-info-bg-color-hover); border-color: var(--color-sf-utility-info-border-color); color: var(--color-sf-utility-info-text-hover); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); outline-color: inherit; } .e-btn-group .e-btn:focus.e-warning, .e-btn-group input:focus-visible + label.e-btn.e-warning, .e-btn-group input:focus + label.e-btn.e-warning, .e-css.e-btn-group .e-btn:focus.e-warning, .e-css.e-btn-group input:focus-visible + label.e-btn.e-warning, .e-css.e-btn-group input:focus + label.e-btn.e-warning { background: #93370c; border-color: #93370c; color: var(--color-sf-base-white); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); outline-color: inherit; } .e-btn-group .e-btn:focus.e-danger, .e-btn-group input:focus-visible + label.e-btn.e-danger, .e-btn-group input:focus + label.e-btn.e-danger, .e-css.e-btn-group .e-btn:focus.e-danger, .e-css.e-btn-group input:focus-visible + label.e-btn.e-danger, .e-css.e-btn-group input:focus + label.e-btn.e-danger { background: #b32218; border-color: #b32218; color: var(--color-sf-base-white); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); outline-color: inherit; } .e-btn-group .e-btn:focus.e-link, .e-btn-group input:focus-visible + label.e-btn.e-link, .e-btn-group input:focus + label.e-btn.e-link, .e-css.e-btn-group .e-btn:focus.e-link, .e-css.e-btn-group input:focus-visible + label.e-btn.e-link, .e-css.e-btn-group input:focus + label.e-btn.e-link { border-radius: 0; text-decoration: underline; color: var(--color-sf-brand-solid-primary-pressed); background-color: transparent; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; outline: none; } .e-btn-group .e-btn:focus.e-outline, .e-btn-group input:focus-visible + label.e-btn.e-outline, .e-btn-group input:focus + label.e-btn.e-outline, .e-css.e-btn-group .e-btn:focus.e-outline, .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline, .e-css.e-btn-group input:focus + label.e-btn.e-outline { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:focus.e-outline.e-primary, .e-btn-group input:focus-visible + label.e-btn.e-outline.e-primary, .e-btn-group input:focus + label.e-btn.e-outline.e-primary, .e-css.e-btn-group .e-btn:focus.e-outline.e-primary, .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline.e-primary, .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:focus.e-outline.e-success, .e-btn-group input:focus-visible + label.e-btn.e-outline.e-success, .e-btn-group input:focus + label.e-btn.e-outline.e-success, .e-css.e-btn-group .e-btn:focus.e-outline.e-success, .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline.e-success, .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:focus.e-outline.e-info, .e-btn-group input:focus-visible + label.e-btn.e-outline.e-info, .e-btn-group input:focus + label.e-btn.e-outline.e-info, .e-css.e-btn-group .e-btn:focus.e-outline.e-info, .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline.e-info, .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:focus.e-outline.e-warning, .e-btn-group input:focus-visible + label.e-btn.e-outline.e-warning, .e-btn-group input:focus + label.e-btn.e-outline.e-warning, .e-css.e-btn-group .e-btn:focus.e-outline.e-warning, .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline.e-warning, .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:focus.e-outline.e-danger, .e-btn-group input:focus-visible + label.e-btn.e-outline.e-danger, .e-btn-group input:focus + label.e-btn.e-outline.e-danger, .e-css.e-btn-group .e-btn:focus.e-outline.e-danger, .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline.e-danger, .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:active, .e-btn-group input:active + label.e-btn, .e-btn-group input:checked + label.e-btn, .e-css.e-btn-group .e-btn:active, .e-css.e-btn-group input:active + label.e-btn, .e-css.e-btn-group input:checked + label.e-btn { background: var(--color-sf-utility-secondary-bg-color-pressed); border-color: var(--color-sf-utility-secondary-border-color); color: var(--color-sf-utility-secondary-text-color-pressed); outline: var(--color-sf-utility-secondary-bg-color) 0 solid; outline-offset: 0; } .e-btn-group .e-btn:active.e-primary, .e-btn-group input:active + label.e-btn.e-primary, .e-btn-group input:checked + label.e-btn.e-primary, .e-css.e-btn-group .e-btn:active.e-primary, .e-css.e-btn-group input:active + label.e-btn.e-primary, .e-css.e-btn-group input:checked + label.e-btn.e-primary { background: var(--color-sf-brand-solid-primary-pressed); border-color: var(--color-sf-brand-solid-primary-pressed); color: var(--color-sf-on-brand-solid-primary); outline: var(--color-sf-utility-secondary-bg-color) 0 solid; -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:active.e-success, .e-btn-group input:active + label.e-btn.e-success, .e-btn-group input:checked + label.e-btn.e-success, .e-css.e-btn-group .e-btn:active.e-success, .e-css.e-btn-group input:active + label.e-btn.e-success, .e-css.e-btn-group input:checked + label.e-btn.e-success { background: #074c30; border-color: #074c30; color: var(--color-sf-base-white); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:active.e-info, .e-btn-group input:active + label.e-btn.e-info, .e-btn-group input:checked + label.e-btn.e-info, .e-css.e-btn-group .e-btn:active.e-info, .e-css.e-btn-group input:active + label.e-btn.e-info, .e-css.e-btn-group input:checked + label.e-btn.e-info { background: var(--color-sf-utility-info-bg-color-pressed); color: var(--color-sf-utility-info-text-hover); border-color: var(--color-sf-utility-info-border-color); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:active.e-warning, .e-btn-group input:active + label.e-btn.e-warning, .e-btn-group input:checked + label.e-btn.e-warning, .e-css.e-btn-group .e-btn:active.e-warning, .e-css.e-btn-group input:active + label.e-btn.e-warning, .e-css.e-btn-group input:checked + label.e-btn.e-warning { background: #792d0d; border-color: #792d0d; color: var(--color-sf-base-white); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:active.e-danger, .e-btn-group input:active + label.e-btn.e-danger, .e-btn-group input:checked + label.e-btn.e-danger, .e-css.e-btn-group .e-btn:active.e-danger, .e-css.e-btn-group input:active + label.e-btn.e-danger, .e-css.e-btn-group input:checked + label.e-btn.e-danger { background: #901f17; border-color: #901f17; color: var(--color-sf-base-white); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); } .e-btn-group .e-btn:active.e-outline, .e-btn-group input:active + label.e-btn.e-outline, .e-btn-group input:checked + label.e-btn.e-outline, .e-css.e-btn-group .e-btn:active.e-outline, .e-css.e-btn-group input:active + label.e-btn.e-outline, .e-css.e-btn-group input:checked + label.e-btn.e-outline { background: var(--color-sf-utility-secondary-bg-color-pressed); border-color: var(--color-sf-utility-secondary-border-color); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); color: var(--color-sf-utility-secondary-text-color-pressed); } .e-btn-group .e-btn:active.e-outline.e-primary, .e-btn-group input:active + label.e-btn.e-outline.e-primary, .e-btn-group input:checked + label.e-btn.e-outline.e-primary, .e-css.e-btn-group .e-btn:active.e-outline.e-primary, .e-css.e-btn-group input:active + label.e-btn.e-outline.e-primary, .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary { background: var(--color-sf-brand-solid-primary-pressed); border-color: var(--color-sf-brand-primary); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); color: var(--color-sf-on-brand-solid-primary); } .e-btn-group .e-btn:active.e-outline.e-success, .e-btn-group input:active + label.e-btn.e-outline.e-success, .e-btn-group input:checked + label.e-btn.e-outline.e-success, .e-css.e-btn-group .e-btn:active.e-outline.e-success, .e-css.e-btn-group input:active + label.e-btn.e-outline.e-success, .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success { background: #074c30; border-color: #074c30; -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); color: var(--color-sf-base-white); } .e-btn-group .e-btn:active.e-outline.e-info, .e-btn-group input:active + label.e-btn.e-outline.e-info, .e-btn-group input:checked + label.e-btn.e-outline.e-info, .e-css.e-btn-group .e-btn:active.e-outline.e-info, .e-css.e-btn-group input:active + label.e-btn.e-outline.e-info, .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info { background: var(--color-sf-utility-info-bg-color-pressed); border-color: var(--color-sf-utility-info-border-color); -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); color: var(--color-sf-utility-info-text-hover); } .e-btn-group .e-btn:active.e-outline.e-warning, .e-btn-group input:active + label.e-btn.e-outline.e-warning, .e-btn-group input:checked + label.e-btn.e-outline.e-warning, .e-css.e-btn-group .e-btn:active.e-outline.e-warning, .e-css.e-btn-group input:active + label.e-btn.e-outline.e-warning, .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning { background: #792d0d; border-color: #792d0d; -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); color: var(--color-sf-base-white); } .e-btn-group .e-btn:active.e-outline.e-danger, .e-btn-group input:active + label.e-btn.e-outline.e-danger, .e-btn-group input:checked + label.e-btn.e-outline.e-danger, .e-css.e-btn-group .e-btn:active.e-outline.e-danger, .e-css.e-btn-group input:active + label.e-btn.e-outline.e-danger, .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger { background: #901f17; border-color: #901f17; -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24); color: var(--color-sf-base-white); } .e-btn-group .e-btn:disabled, .e-btn-group input:disabled + label.e-btn, .e-css.e-btn-group .e-btn:disabled, .e-css.e-btn-group input:disabled + label.e-btn { background-color: var(--color-sf-bg-disabled); border-color: var(--color-sf-border-disabled-subtle); -webkit-box-shadow: none; box-shadow: none; color: var(--color-sf-fg-disabled); border-color: var(--color-sf-utility-secondary-border-color); } .e-btn-group .e-btn:disabled.e-primary, .e-btn-group input:disabled + label.e-btn.e-primary, .e-css.e-btn-group .e-btn:disabled.e-primary, .e-css.e-btn-group input:disabled + label.e-btn.e-primary { background: var(--color-sf-bg-disabled); border-color: var(--color-sf-bg-disabled); -webkit-box-shadow: none; box-shadow: none; color: var(--color-sf-fg-disabled); border-color: var(--color-sf-brand-solid-primary); } .e-btn-group .e-btn:disabled.e-success, .e-btn-group input:disabled + label.e-btn.e-success, .e-css.e-btn-group .e-btn:disabled.e-success, .e-css.e-btn-group input:disabled + label.e-btn.e-success { background: var(--color-sf-bg-disabled); border-color: var(--color-sf-bg-disabled); -webkit-box-shadow: none; box-shadow: none; color: var(--color-sf-fg-disabled); border-color: #057647; }