UNPKG

@syncfusion/ej2-buttons

Version:

A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.

1,848 lines (1,804 loc) 184 kB
/*! button layout */ .e-btn, .e-css.e-btn { /* stylelint-disable property-no-vendor-prefix */ -webkit-font-smoothing: antialiased; border: 1px solid; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont"; font-size: 14px; font-weight: 400; -ms-flex-pack: center; justify-content: center; line-height: 1.6; outline: none; padding: 4px 8px; text-align: center; text-decoration: none; text-transform: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; } .e-btn:disabled, .e-css.e-btn:disabled { cursor: default; } .e-btn:hover, .e-btn:focus, .e-css.e-btn:hover, .e-css.e-btn:focus { text-decoration: none; } .e-btn::-moz-focus-inner, .e-css.e-btn::-moz-focus-inner { border: 0; padding: 0; } .e-btn .e-btn-icon, .e-css.e-btn .e-btn-icon { display: inline-block; font-size: 14px; margin-top: -2px; vertical-align: middle; width: 1em; } .e-btn .e-btn-icon.e-icon-left, .e-css.e-btn .e-btn-icon.e-icon-left { margin-left: -0.5em; width: 2em; padding: 0 8px; } .e-btn .e-btn-icon.e-icon-right, .e-css.e-btn .e-btn-icon.e-icon-right { margin-right: -0.5em; width: 2em; padding: 0 8px; } .e-btn .e-btn-icon.e-icon-top, .e-css.e-btn .e-btn-icon.e-icon-top { display: block; margin-top: 0; padding-bottom: 6px; width: auto; } .e-btn .e-btn-icon.e-icon-bottom, .e-css.e-btn .e-btn-icon.e-icon-bottom { display: block; margin-top: 0; padding-top: 6px; width: auto; } .e-btn.e-icon-btn, .e-css.e-btn.e-icon-btn { padding: 4px 8px; } .e-btn.e-top-icon-btn, .e-btn.e-bottom-icon-btn, .e-css.e-btn.e-top-icon-btn, .e-css.e-btn.e-bottom-icon-btn { line-height: 1; padding: 12px 12px; } .e-btn.e-round, .e-css.e-btn.e-round { border-radius: 50%; height: 32px; line-height: 1; padding: 0; width: 32px; } .e-btn.e-round .e-btn-icon, .e-css.e-btn.e-round .e-btn-icon { font-size: 14px; line-height: 1.6; margin-top: 0; width: auto; } .e-btn.e-rtl .e-icon-right, .e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.5em; margin-right: 0; } .e-btn.e-rtl .e-icon-left, .e-css.e-btn.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.5em; } .e-btn.e-flat, .e-css.e-btn.e-flat { border: 1px solid; } .e-btn.e-small, .e-css.e-btn.e-small { font-size: 12px; line-height: 1.6; padding: 2px 8px 2px; } .e-btn.e-small .e-btn-icon, .e-css.e-btn.e-small .e-btn-icon { font-size: 12px; width: 1em; } .e-btn.e-small .e-btn-icon.e-icon-left, .e-css.e-btn.e-small .e-btn-icon.e-icon-left { margin-left: -0.57143em; width: 2em; padding: 0 8px; } .e-btn.e-small .e-btn-icon.e-icon-right, .e-css.e-btn.e-small .e-btn-icon.e-icon-right { margin-right: -0.57143em; width: 2em; padding: 0 8px; } .e-btn.e-small .e-btn-icon.e-icon-top, .e-css.e-btn.e-small .e-btn-icon.e-icon-top { padding-bottom: 6px; width: auto; } .e-btn.e-small .e-btn-icon.e-icon-bottom, .e-css.e-btn.e-small .e-btn-icon.e-icon-bottom { padding-top: 6px; width: auto; } .e-btn.e-small.e-icon-btn, .e-css.e-btn.e-small.e-icon-btn { padding: 2px 5px; } .e-btn.e-small.e-top-icon-btn, .e-btn.e-small.e-bottom-icon-btn, .e-css.e-btn.e-small.e-top-icon-btn, .e-css.e-btn.e-small.e-bottom-icon-btn { line-height: 1; padding: 12px 12px; } .e-btn.e-small.e-round, .e-css.e-btn.e-small.e-round { height: 24px; line-height: 1; padding: 0; width: 24px; } .e-btn.e-small.e-round .e-btn-icon, .e-css.e-btn.e-small.e-round .e-btn-icon { font-size: 12px; line-height: 1.5; width: auto; } .e-btn.e-small.e-rtl .e-icon-right, .e-css.e-btn.e-small.e-rtl .e-icon-right { margin-left: -0.57143em; margin-right: 0; } .e-btn.e-small.e-rtl .e-icon-left, .e-css.e-btn.e-small.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.57143em; } .e-btn.e-block, .e-css.e-btn.e-block { display: block; width: 100%; } .e-small .e-btn, .e-small.e-btn, .e-small .e-css.e-btn, .e-small.e-css.e-btn { font-size: 12px; line-height: 1.6; padding: 2px 8px 2px; } .e-small .e-btn .e-btn-icon, .e-small.e-btn .e-btn-icon, .e-small .e-css.e-btn .e-btn-icon, .e-small.e-css.e-btn .e-btn-icon { font-size: 12px; width: 1em; } .e-small .e-btn .e-btn-icon.e-icon-left, .e-small.e-btn .e-btn-icon.e-icon-left, .e-small .e-css.e-btn .e-btn-icon.e-icon-left, .e-small.e-css.e-btn .e-btn-icon.e-icon-left { margin-left: -0.57143em; width: 2em; padding: 0 8px; } .e-small .e-btn .e-btn-icon.e-icon-right, .e-small.e-btn .e-btn-icon.e-icon-right, .e-small .e-css.e-btn .e-btn-icon.e-icon-right, .e-small.e-css.e-btn .e-btn-icon.e-icon-right { margin-right: -0.57143em; width: 2em; padding: 0 8px; } .e-small .e-btn .e-btn-icon.e-icon-top, .e-small.e-btn .e-btn-icon.e-icon-top, .e-small .e-css.e-btn .e-btn-icon.e-icon-top, .e-small.e-css.e-btn .e-btn-icon.e-icon-top { padding-bottom: 6px; width: auto; } .e-small .e-btn .e-btn-icon.e-icon-bottom, .e-small.e-btn .e-btn-icon.e-icon-bottom, .e-small .e-css.e-btn .e-btn-icon.e-icon-bottom, .e-small.e-css.e-btn .e-btn-icon.e-icon-bottom { padding-top: 6px; width: auto; } .e-small .e-btn.e-icon-btn, .e-small.e-btn.e-icon-btn, .e-small .e-css.e-btn.e-icon-btn, .e-small.e-css.e-btn.e-icon-btn { padding: 2px 5px; } .e-small .e-btn.e-top-icon-btn, .e-small .e-btn.e-bottom-icon-btn, .e-small.e-btn.e-top-icon-btn, .e-small.e-btn.e-bottom-icon-btn, .e-small .e-css.e-btn.e-top-icon-btn, .e-small .e-css.e-btn.e-bottom-icon-btn, .e-small.e-css.e-btn.e-top-icon-btn, .e-small.e-css.e-btn.e-bottom-icon-btn { line-height: 1; padding: 12px 12px; } .e-small .e-btn.e-round, .e-small.e-btn.e-round, .e-small .e-css.e-btn.e-round, .e-small.e-css.e-btn.e-round { height: 24px; line-height: 1; padding: 0; width: 24px; border-radius: 50%; } .e-small .e-btn.e-round .e-btn-icon, .e-small.e-btn.e-round .e-btn-icon, .e-small .e-css.e-btn.e-round .e-btn-icon, .e-small.e-css.e-btn.e-round .e-btn-icon { font-size: 12px; line-height: 1.5; width: auto; } .e-small .e-btn.e-rtl .e-icon-right, .e-small.e-btn.e-rtl .e-icon-right, .e-small .e-css.e-btn.e-rtl .e-icon-right, .e-small.e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.57143em; margin-right: 0; } .e-small .e-btn.e-rtl .e-icon-left, .e-small.e-btn.e-rtl .e-icon-left, .e-small .e-css.e-btn.e-rtl .e-icon-left, .e-small.e-css.e-btn.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.57143em; } .e-bigger.e-small .e-btn, .e-bigger.e-small .e-btn, .e-bigger.e-small .e-css.e-btn, .e-bigger.e-small.e-css.e-btn { font-size: 14px; line-height: 1.6; padding: 4px 8px; } .e-bigger.e-small .e-btn .e-btn-icon, .e-bigger.e-small .e-btn .e-btn-icon, .e-bigger.e-small .e-css.e-btn .e-btn-icon, .e-bigger.e-small.e-css.e-btn .e-btn-icon { font-size: 14px; width: 1em; } .e-bigger.e-small .e-btn .e-btn-icon.e-icon-left, .e-bigger.e-small .e-btn .e-btn-icon.e-icon-left, .e-bigger.e-small .e-css.e-btn .e-btn-icon.e-icon-left, .e-bigger.e-small.e-css.e-btn .e-btn-icon.e-icon-left { margin-left: -0.5em; width: 2em; padding: 0 8px; } .e-bigger.e-small .e-btn .e-btn-icon.e-icon-right, .e-bigger.e-small .e-btn .e-btn-icon.e-icon-right, .e-bigger.e-small .e-css.e-btn .e-btn-icon.e-icon-right, .e-bigger.e-small.e-css.e-btn .e-btn-icon.e-icon-right { margin-right: -0.5em; width: 2em; padding: 0 8px; } .e-bigger.e-small .e-btn .e-btn-icon.e-icon-top, .e-bigger.e-small .e-btn .e-btn-icon.e-icon-top, .e-bigger.e-small .e-css.e-btn .e-btn-icon.e-icon-top, .e-bigger.e-small.e-css.e-btn .e-btn-icon.e-icon-top { padding-bottom: 6px; width: auto; } .e-bigger.e-small .e-btn .e-btn-icon.e-icon-bottom, .e-bigger.e-small .e-btn .e-btn-icon.e-icon-bottom, .e-bigger.e-small .e-css.e-btn .e-btn-icon.e-icon-bottom, .e-bigger.e-small.e-css.e-btn .e-btn-icon.e-icon-bottom { padding-top: 6px; width: auto; } .e-bigger.e-small .e-btn.e-icon-btn, .e-bigger.e-small .e-btn.e-icon-btn, .e-bigger.e-small .e-css.e-btn.e-icon-btn, .e-bigger.e-small.e-css.e-btn.e-icon-btn { padding: 4px 8px; } .e-bigger.e-small .e-btn.e-top-icon-btn, .e-bigger.e-small .e-btn.e-bottom-icon-btn, .e-bigger.e-small .e-btn.e-top-icon-btn, .e-bigger.e-small .e-btn.e-bottom-icon-btn, .e-bigger.e-small .e-css.e-btn.e-top-icon-btn, .e-bigger.e-small .e-css.e-btn.e-bottom-icon-btn, .e-bigger.e-small.e-css.e-btn.e-top-icon-btn, .e-bigger.e-small.e-css.e-btn.e-bottom-icon-btn { line-height: 1; padding: 16px 16px; } .e-bigger.e-small .e-btn.e-round, .e-bigger.e-small .e-btn.e-round, .e-bigger.e-small .e-css.e-btn.e-round, .e-bigger.e-small.e-css.e-btn.e-round { height: 32px; line-height: 1; padding: 0; width: 32px; } .e-bigger.e-small .e-btn.e-round .e-btn-icon, .e-bigger.e-small .e-btn.e-round .e-btn-icon, .e-bigger.e-small .e-css.e-btn.e-round .e-btn-icon, .e-bigger.e-small.e-css.e-btn.e-round .e-btn-icon { font-size: 14px; line-height: 1.6; width: auto; } .e-bigger.e-small .e-btn.e-rtl .e-icon-right, .e-bigger.e-small .e-btn.e-rtl .e-icon-right, .e-bigger.e-small .e-css.e-btn.e-rtl .e-icon-right, .e-bigger.e-small.e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.5em; margin-right: 0; } .e-bigger.e-small .e-btn.e-rtl .e-icon-left, .e-bigger.e-small .e-btn.e-rtl .e-icon-left, .e-bigger.e-small .e-css.e-btn.e-rtl .e-icon-left, .e-bigger.e-small.e-css.e-btn.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.5em; } .e-bigger .e-btn, .e-bigger .e-btn, .e-bigger .e-css.e-btn, .e-bigger.e-css.e-btn { font-size: 16px; line-height: 1.6; padding: 6px 12px 5px 12px; } .e-bigger .e-btn .e-btn-icon, .e-bigger .e-btn .e-btn-icon, .e-bigger .e-css.e-btn .e-btn-icon, .e-bigger.e-css.e-btn .e-btn-icon { font-size: 16px; width: 1em; } .e-bigger .e-btn .e-btn-icon.e-icon-left, .e-bigger .e-btn .e-btn-icon.e-icon-left, .e-bigger .e-css.e-btn .e-btn-icon.e-icon-left, .e-bigger.e-css.e-btn .e-btn-icon.e-icon-left { margin-left: -0.6111em; width: 2em; padding: 0 8px; } .e-bigger .e-btn .e-btn-icon.e-icon-right, .e-bigger .e-btn .e-btn-icon.e-icon-right, .e-bigger .e-css.e-btn .e-btn-icon.e-icon-right, .e-bigger.e-css.e-btn .e-btn-icon.e-icon-right { margin-right: -0.6111em; width: 2em; padding: 0 8px; } .e-bigger .e-btn .e-btn-icon.e-icon-top, .e-bigger .e-btn .e-btn-icon.e-icon-top, .e-bigger .e-css.e-btn .e-btn-icon.e-icon-top, .e-bigger.e-css.e-btn .e-btn-icon.e-icon-top { padding-bottom: 8px; width: auto; } .e-bigger .e-btn .e-btn-icon.e-icon-bottom, .e-bigger .e-btn .e-btn-icon.e-icon-bottom, .e-bigger .e-css.e-btn .e-btn-icon.e-icon-bottom, .e-bigger.e-css.e-btn .e-btn-icon.e-icon-bottom { padding-top: 8px; width: auto; } .e-bigger .e-btn.e-icon-btn, .e-bigger .e-btn.e-icon-btn, .e-bigger .e-css.e-btn.e-icon-btn, .e-bigger.e-css.e-btn.e-icon-btn { padding: 4px 9px 5px 9px; } .e-bigger .e-btn.e-top-icon-btn, .e-bigger .e-btn.e-bottom-icon-btn, .e-bigger .e-btn.e-top-icon-btn, .e-bigger .e-btn.e-bottom-icon-btn, .e-bigger .e-css.e-btn.e-top-icon-btn, .e-bigger .e-css.e-btn.e-bottom-icon-btn, .e-bigger.e-css.e-btn.e-top-icon-btn, .e-bigger.e-css.e-btn.e-bottom-icon-btn { line-height: 1; padding: 16px 16px; } .e-bigger .e-btn.e-round, .e-bigger .e-btn.e-round, .e-bigger .e-css.e-btn.e-round, .e-bigger.e-css.e-btn.e-round { height: 38px; line-height: 1; padding: 0; width: 38px; } .e-bigger .e-btn.e-round .e-btn-icon, .e-bigger .e-btn.e-round .e-btn-icon, .e-bigger .e-css.e-btn.e-round .e-btn-icon, .e-bigger.e-css.e-btn.e-round .e-btn-icon { font-size: 16px; line-height: 1.5; width: auto; } .e-bigger .e-btn.e-rtl .e-icon-right, .e-bigger .e-btn.e-rtl .e-icon-right, .e-bigger .e-css.e-btn.e-rtl .e-icon-right, .e-bigger.e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.6111em; margin-right: 0; } .e-bigger .e-btn.e-rtl .e-icon-left, .e-bigger .e-btn.e-rtl .e-icon-left, .e-bigger .e-css.e-btn.e-rtl .e-icon-left, .e-bigger.e-css.e-btn.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.6111em; } .e-bigger .e-btn.e-small, .e-bigger .e-btn.e-small, .e-bigger .e-css.e-btn.e-small, .e-bigger.e-css.e-btn.e-small { font-size: 14px; line-height: 1.6; padding: 4px 8px; } .e-bigger .e-btn.e-small .e-btn-icon, .e-bigger .e-btn.e-small .e-btn-icon, .e-bigger .e-css.e-btn.e-small .e-btn-icon, .e-bigger.e-css.e-btn.e-small .e-btn-icon { font-size: 14px; width: 1em; } .e-bigger .e-btn.e-small .e-btn-icon.e-icon-left, .e-bigger .e-btn.e-small .e-btn-icon.e-icon-left, .e-bigger .e-css.e-btn.e-small .e-btn-icon.e-icon-left, .e-bigger.e-css.e-btn.e-small .e-btn-icon.e-icon-left { margin-left: -0.5em; width: 2em; padding: 0 8px; } .e-bigger .e-btn.e-small .e-btn-icon.e-icon-right, .e-bigger .e-btn.e-small .e-btn-icon.e-icon-right, .e-bigger .e-css.e-btn.e-small .e-btn-icon.e-icon-right, .e-bigger.e-css.e-btn.e-small .e-btn-icon.e-icon-right { margin-right: -0.5em; width: 2em; padding: 0 8px; } .e-bigger .e-btn.e-small .e-btn-icon.e-icon-top, .e-bigger .e-btn.e-small .e-btn-icon.e-icon-top, .e-bigger .e-css.e-btn.e-small .e-btn-icon.e-icon-top, .e-bigger.e-css.e-btn.e-small .e-btn-icon.e-icon-top { padding-bottom: 6px; width: auto; } .e-bigger .e-btn.e-small .e-btn-icon.e-icon-bottom, .e-bigger .e-btn.e-small .e-btn-icon.e-icon-bottom, .e-bigger .e-css.e-btn.e-small .e-btn-icon.e-icon-bottom, .e-bigger.e-css.e-btn.e-small .e-btn-icon.e-icon-bottom { padding-top: 6px; width: auto; } .e-bigger .e-btn.e-small.e-icon-btn, .e-bigger .e-btn.e-small.e-icon-btn, .e-bigger .e-css.e-btn.e-small.e-icon-btn, .e-bigger.e-css.e-btn.e-small.e-icon-btn { padding: 4px 8px; } .e-bigger .e-btn.e-small.e-top-icon-btn, .e-bigger .e-btn.e-small.e-bottom-icon-btn, .e-bigger .e-btn.e-small.e-top-icon-btn, .e-bigger .e-btn.e-small.e-bottom-icon-btn, .e-bigger .e-css.e-btn.e-small.e-top-icon-btn, .e-bigger .e-css.e-btn.e-small.e-bottom-icon-btn, .e-bigger.e-css.e-btn.e-small.e-top-icon-btn, .e-bigger.e-css.e-btn.e-small.e-bottom-icon-btn { line-height: 1; padding: 16px 16px; } .e-bigger .e-btn.e-small.e-round, .e-bigger .e-btn.e-small.e-round, .e-bigger .e-css.e-btn.e-small.e-round, .e-bigger.e-css.e-btn.e-small.e-round { height: 32px; line-height: 1; padding: 0; width: 32px; } .e-bigger .e-btn.e-small.e-round .e-btn-icon, .e-bigger .e-btn.e-small.e-round .e-btn-icon, .e-bigger .e-css.e-btn.e-small.e-round .e-btn-icon, .e-bigger.e-css.e-btn.e-small.e-round .e-btn-icon { font-size: 14px; line-height: 1.6; width: auto; } .e-bigger .e-btn.e-small.e-rtl .e-icon-right, .e-bigger .e-btn.e-small.e-rtl .e-icon-right, .e-bigger .e-css.e-btn.e-small.e-rtl .e-icon-right, .e-bigger.e-css.e-btn.e-small.e-rtl .e-icon-right { margin-left: -0.5em; margin-right: 0; } .e-bigger .e-btn.e-small.e-rtl .e-icon-left, .e-bigger .e-btn.e-small.e-rtl .e-icon-left, .e-bigger .e-css.e-btn.e-small.e-rtl .e-icon-left, .e-bigger.e-css.e-btn.e-small.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.5em; } /*! button theme */ /* stylelint-disable property-no-vendor-prefix */ .e-btn, .e-css.e-btn { -webkit-tap-highlight-color: transparent; background: #6c757d; border-color: #6c757d; box-shadow: none; color: #fff; transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } .e-btn:hover, .e-css.e-btn:hover { background: #5a6268; border-color: #545b62; box-shadow: none; color: #fff; } .e-btn:focus, .e-css.e-btn:focus { background: #6c757d; border-color: #6c757d; color: #fff; outline: #6c757d 0 solid; outline-offset: 0; box-shadow: 0 0 0 0.25em rgba(128, 136, 143, 0.5); } .e-btn:active, .e-css.e-btn:active { background: #545b62; border-color: #4e555b; color: #fff; outline: #6c757d 0 solid; outline-offset: 0; box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5); } .e-btn.e-active, .e-css.e-btn.e-active { background: #545b62; border-color: #4e555b; box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5); color: #fff; } .e-btn:disabled, .e-btn.e-disabled, .e-css.e-btn:disabled, .e-css.e-btn.e-disabled { background: rgba(108, 117, 125, 0.65); border-color: transparent; box-shadow: none; color: #fff; } .e-btn .e-ripple-element, .e-css.e-btn .e-ripple-element { background: transparent; } .e-btn.e-round, .e-btn.e-round-edge, .e-css.e-btn.e-round, .e-css.e-btn.e-round-edge { background: #6c757d; border-color: #6c757d; color: #fff; } .e-btn.e-round:hover, .e-btn.e-round-edge:hover, .e-css.e-btn.e-round:hover, .e-css.e-btn.e-round-edge:hover { background: #5a6268; border-color: #545b62; color: #fff; } .e-btn.e-round:focus, .e-btn.e-round-edge:focus, .e-css.e-btn.e-round:focus, .e-css.e-btn.e-round-edge:focus { background: #6c757d; border-color: #6c757d; box-shadow: none; color: #fff; outline: #6c757d 0 solid; outline-offset: 0; } .e-btn.e-round:active, .e-btn.e-round-edge:active, .e-css.e-btn.e-round:active, .e-css.e-btn.e-round-edge:active { background: #545b62; border-color: #4e555b; box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5); color: #fff; outline: #6c757d 0 solid; outline-offset: 0; } .e-btn.e-round:disabled, .e-btn.e-round.e-disabled, .e-btn.e-round-edge:disabled, .e-btn.e-round-edge.e-disabled, .e-css.e-btn.e-round:disabled, .e-css.e-btn.e-round.e-disabled, .e-css.e-btn.e-round-edge:disabled, .e-css.e-btn.e-round-edge.e-disabled { background: rgba(108, 117, 125, 0.65); border-color: transparent; box-shadow: none; color: #fff; } .e-btn.e-round.e-primary:hover, .e-btn.e-round-edge.e-primary:hover, .e-css.e-btn.e-round.e-primary:hover, .e-css.e-btn.e-round-edge.e-primary:hover { border-color: #007bff; } .e-btn.e-round.e-primary:focus, .e-btn.e-round-edge.e-primary:focus, .e-css.e-btn.e-round.e-primary:focus, .e-css.e-btn.e-round-edge.e-primary:focus { outline: #6c757d 0 solid; } .e-btn.e-round.e-success:hover, .e-btn.e-round-edge.e-success:hover, .e-css.e-btn.e-round.e-success:hover, .e-css.e-btn.e-round-edge.e-success:hover { border-color: #28a745; } .e-btn.e-round.e-success:focus, .e-btn.e-round-edge.e-success:focus, .e-css.e-btn.e-round.e-success:focus, .e-css.e-btn.e-round-edge.e-success:focus { outline: #6c757d 0 solid; } .e-btn.e-round.e-info:hover, .e-btn.e-round-edge.e-info:hover, .e-css.e-btn.e-round.e-info:hover, .e-css.e-btn.e-round-edge.e-info:hover { border-color: #17a2b8; } .e-btn.e-round.e-info:focus, .e-btn.e-round-edge.e-info:focus, .e-css.e-btn.e-round.e-info:focus, .e-css.e-btn.e-round-edge.e-info:focus { outline: #6c757d 0 solid; } .e-btn.e-round.e-warning:hover, .e-btn.e-round-edge.e-warning:hover, .e-css.e-btn.e-round.e-warning:hover, .e-css.e-btn.e-round-edge.e-warning:hover { border-color: #ffc107; } .e-btn.e-round.e-warning:focus, .e-btn.e-round-edge.e-warning:focus, .e-css.e-btn.e-round.e-warning:focus, .e-css.e-btn.e-round-edge.e-warning:focus { outline: #6c757d 0 solid; } .e-btn.e-round.e-danger:hover, .e-btn.e-round-edge.e-danger:hover, .e-css.e-btn.e-round.e-danger:hover, .e-css.e-btn.e-round-edge.e-danger:hover { border-color: #dc3545; } .e-btn.e-round.e-danger:focus, .e-btn.e-round-edge.e-danger:focus, .e-css.e-btn.e-round.e-danger:focus, .e-css.e-btn.e-round-edge.e-danger:focus { outline: #6c757d 0 solid; } .e-btn.e-primary, .e-css.e-btn.e-primary { background: #007bff; border-color: #007bff; color: #fff; } .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background: #0069d9; border-color: #0062cc; box-shadow: none; color: #fff; } .e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus { background: #007bff; border-color: #007bff; color: #fff; outline: #6c757d 0 solid; box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5); } .e-btn.e-primary:active, .e-css.e-btn.e-primary:active { background: #0062cc; border-color: #005cbf; color: #fff; outline: #6c757d 0 solid; box-shadow: 0 0 0 0.25em rgba(31, 113, 201, 0.5); } .e-btn.e-primary.e-active, .e-css.e-btn.e-primary.e-active { background: #0062cc; border-color: #005cbf; box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5); color: #fff; } .e-btn.e-primary:disabled, .e-btn.e-primary.e-disabled, .e-css.e-btn.e-primary:disabled, .e-css.e-btn.e-primary.e-disabled { background: rgba(0, 123, 255, 0.65); border-color: transparent; box-shadow: none; color: #fff; } .e-btn.e-primary .e-ripple-element, .e-css.e-btn.e-primary .e-ripple-element { background: transparent; } .e-btn.e-success, .e-css.e-btn.e-success { background: #28a745; border-color: #28a745; color: #fff; } .e-btn.e-success:hover, .e-css.e-btn.e-success:hover { background: #218838; border-color: #1e7e34; box-shadow: none; color: #fff; } .e-btn.e-success:focus, .e-css.e-btn.e-success:focus { background: #28a745; border-color: #28a745; color: #fff; box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5); } .e-btn.e-success:active, .e-btn.e-success.e-active, .e-css.e-btn.e-success:active, .e-css.e-btn.e-success.e-active { background: #1e7e34; border-color: #1c7430; color: #fff; box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5); } .e-btn.e-success:disabled, .e-btn.e-success.e-disabled, .e-css.e-btn.e-success:disabled, .e-css.e-btn.e-success.e-disabled { background: rgba(40, 167, 69, 0.65); border-color: transparent; box-shadow: none; color: #fff; } .e-btn.e-success .e-ripple-element, .e-css.e-btn.e-success .e-ripple-element { background: transparent; } .e-btn.e-info, .e-css.e-btn.e-info { background: #17a2b8; border-color: #17a2b8; color: #fff; } .e-btn.e-info:hover, .e-css.e-btn.e-info:hover { background: #138496; border-color: #117a8b; box-shadow: none; color: #fff; } .e-btn.e-info:focus, .e-css.e-btn.e-info:focus { background: #17a2b8; border-color: #17a2b8; color: #fff; box-shadow: 0 0 0 0.25em rgba(51, 174, 194, 0.5); } .e-btn.e-info:active, .e-btn.e-info.e-active, .e-css.e-btn.e-info:active, .e-css.e-btn.e-info.e-active { background: #117a8b; color: #fff; border-color: #10707f; box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5); } .e-btn.e-info:disabled, .e-btn.e-info.e-disabled, .e-css.e-btn.e-info:disabled, .e-css.e-btn.e-info.e-disabled { background: rgba(23, 162, 184, 0.65); border-color: transparent; box-shadow: none; color: #fff; } .e-btn.e-info .e-ripple-element, .e-css.e-btn.e-info .e-ripple-element { background: transparent; } .e-btn.e-warning, .e-css.e-btn.e-warning { background: #ffc107; border-color: #ffc107; color: #212529; } .e-btn.e-warning:hover, .e-css.e-btn.e-warning:hover { background: #e0a800; border-color: #d39e00; box-shadow: none; color: #212529; } .e-btn.e-warning:focus, .e-css.e-btn.e-warning:focus { background: #ffc107; border-color: #ffc107; color: #212529; box-shadow: 0 0 0 0.25em rgba(255, 202, 44, 0.5); } .e-btn.e-warning:active, .e-btn.e-warning.e-active, .e-css.e-btn.e-warning:active, .e-css.e-btn.e-warning.e-active { background: #d39e00; border-color: #c69500; color: #212529; box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5); } .e-btn.e-warning:disabled, .e-btn.e-warning.e-disabled, .e-css.e-btn.e-warning:disabled, .e-css.e-btn.e-warning.e-disabled { background: rgba(255, 193, 7, 0.65); border-color: transparent; box-shadow: none; color: #212529; } .e-btn.e-warning .e-ripple-element, .e-css.e-btn.e-warning .e-ripple-element { background: transparent; } .e-btn.e-danger, .e-css.e-btn.e-danger { background: #dc3545; border-color: #dc3545; color: #fff; } .e-btn.e-danger:hover, .e-css.e-btn.e-danger:hover { background: #c82333; border-color: #bd2130; box-shadow: none; color: #fff; } .e-btn.e-danger:focus, .e-css.e-btn.e-danger:focus { background: #dc3545; border-color: #dc3545; color: #fff; box-shadow: 0 0 0 0.25em rgba(225, 83, 97, 0.5); } .e-btn.e-danger:active, .e-css.e-btn.e-danger:active { background: #bd2130; border-color: #b21f2d; color: #fff; box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5); } .e-btn.e-danger.e-active, .e-css.e-btn.e-danger.e-active { background: #bd2130; border-color: #b21f2d; box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5); color: #fff; } .e-btn.e-danger:disabled, .e-btn.e-danger.e-disabled, .e-css.e-btn.e-danger:disabled, .e-css.e-btn.e-danger.e-disabled { background: rgba(220, 53, 69, 0.65); border-color: transparent; box-shadow: none; color: #fff; } .e-btn.e-danger .e-ripple-element, .e-css.e-btn.e-danger .e-ripple-element { background: transparent; } .e-btn.e-flat, .e-css.e-btn.e-flat { background: #6c757d; border-color: #6c757d; box-shadow: none; color: #fff; } .e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover { background: #5a6268; border-color: #545b62; box-shadow: none; color: #fff; } .e-btn.e-flat:focus, .e-css.e-btn.e-flat:focus { background: #5a6268; border-color: #6c757d; color: #fff; box-shadow: 0 0 0 0.25em rgba(125, 133, 140, 0.5); } .e-btn.e-flat:active, .e-btn.e-flat.e-active, .e-css.e-btn.e-flat:active, .e-css.e-btn.e-flat.e-active { background: #545b62; border-color: #4e555b; color: #fff; box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5); } .e-btn.e-flat:disabled, .e-btn.e-flat.e-disabled, .e-css.e-btn.e-flat:disabled, .e-css.e-btn.e-flat.e-disabled { background: rgba(108, 117, 125, 0.65); border-color: transparent; box-shadow: none; color: #fff; } .e-btn.e-flat .e-ripple-element, .e-css.e-btn.e-flat .e-ripple-element { background: transparent; } .e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary { background: #007bff; border-color: #007bff; color: #fff; } .e-btn.e-flat.e-primary:hover, .e-css.e-btn.e-flat.e-primary:hover { background: #0069d9; border-color: #0062cc; color: #fff; } .e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus { background: #0069d9; border-color: #007bff; color: #fff; box-shadow: 0 0 0 0.25em rgba(33, 140, 255, 0.5); } .e-btn.e-flat.e-primary:active, .e-btn.e-flat.e-primary.e-active, .e-css.e-btn.e-flat.e-primary:active, .e-css.e-btn.e-flat.e-primary.e-active { background: #0062cc; border-color: #005cbf; color: #fff; box-shadow: 0 0 0 0.25em rgba(31, 113, 201, 0.5); } .e-btn.e-flat.e-primary:disabled, .e-btn.e-flat.e-primary.e-disabled, .e-css.e-btn.e-flat.e-primary:disabled, .e-css.e-btn.e-flat.e-primary.e-disabled { background: rgba(0, 123, 255, 0.65); border-color: transparent; box-shadow: none; color: rgba(255, 255, 255, 0.65); } .e-btn.e-flat.e-primary .e-ripple-element, .e-css.e-btn.e-flat.e-primary .e-ripple-element { background: transparent; } .e-btn.e-flat.e-success, .e-css.e-btn.e-flat.e-success { background: #28a745; border-color: #28a745; color: #fff; } .e-btn.e-flat.e-success:hover, .e-css.e-btn.e-flat.e-success:hover { background: #218838; border-color: #1e7e34; box-shadow: none; color: #fff; } .e-btn.e-flat.e-success:focus, .e-css.e-btn.e-flat.e-success:focus { background: #218838; border-color: #28a745; color: #fff; box-shadow: 0 0 0 0.25em rgba(62, 178, 88, 0.5); } .e-btn.e-flat.e-success:active, .e-btn.e-flat.e-success.e-active, .e-css.e-btn.e-flat.e-success:active, .e-css.e-btn.e-flat.e-success.e-active { background: #1e7e34; border-color: #1c7430; color: #fff; box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5); } .e-btn.e-flat.e-success:disabled, .e-btn.e-flat.e-success.e-disabled, .e-css.e-btn.e-flat.e-success:disabled, .e-css.e-btn.e-flat.e-success.e-disabled { background: rgba(40, 167, 69, 0.65); border-color: transparent; color: rgba(255, 255, 255, 0.65); } .e-btn.e-flat.e-success .e-ripple-element, .e-css.e-btn.e-flat.e-success .e-ripple-element { background: transparent; } .e-btn.e-flat.e-info, .e-css.e-btn.e-flat.e-info { background: #17a2b8; border-color: #17a2b8; color: #fff; } .e-btn.e-flat.e-info:hover, .e-css.e-btn.e-flat.e-info:hover { background: #138496; border-color: #117a8b; box-shadow: none; color: #fff; } .e-btn.e-flat.e-info:focus, .e-css.e-btn.e-flat.e-info:focus { background: #138496; border-color: #17a2b8; color: #fff; box-shadow: 0 0 0 0.25em rgba(46, 173, 193, 0.5); } .e-btn.e-flat.e-info:active, .e-btn.e-flat.e-info.e-active, .e-css.e-btn.e-flat.e-info:active, .e-css.e-btn.e-flat.e-info.e-active { background: #117a8b; border-color: #10707f; color: #fff; box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5); } .e-btn.e-flat.e-info:disabled, .e-btn.e-flat.e-info.e-disabled, .e-css.e-btn.e-flat.e-info:disabled, .e-css.e-btn.e-flat.e-info.e-disabled { background: rgba(23, 162, 184, 0.65); border-color: transparent; color: rgba(255, 255, 255, 0.65); } .e-btn.e-flat.e-info .e-ripple-element, .e-css.e-btn.e-flat.e-info .e-ripple-element { background: transparent; } .e-btn.e-flat.e-warning, .e-css.e-btn.e-flat.e-warning { background: #ffc107; border-color: #ffc107; color: #212529; } .e-btn.e-flat.e-warning:hover, .e-css.e-btn.e-flat.e-warning:hover { background: #e0a800; border-color: #d39e00; box-shadow: none; color: #212529; } .e-btn.e-flat.e-warning:focus, .e-css.e-btn.e-flat.e-warning:focus { background: #e0a800; border-color: #ffc107; color: #212529; box-shadow: 0 0 0 0.25em rgba(255, 201, 40, 0.5); } .e-btn.e-flat.e-warning:active, .e-btn.e-flat.e-warning.e-active, .e-css.e-btn.e-flat.e-warning:active, .e-css.e-btn.e-flat.e-warning.e-active { background: #d39e00; border-color: #c69500; color: #212529; box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5); } .e-btn.e-flat.e-warning:disabled, .e-btn.e-flat.e-warning.e-disabled, .e-css.e-btn.e-flat.e-warning:disabled, .e-css.e-btn.e-flat.e-warning.e-disabled { background: rgba(255, 193, 7, 0.65); border-color: transparent; color: rgba(33, 37, 41, 0.65); } .e-btn.e-flat.e-warning .e-ripple-element, .e-css.e-btn.e-flat.e-warning .e-ripple-element { background: transparent; } .e-btn.e-flat.e-danger, .e-css.e-btn.e-flat.e-danger { background: #dc3545; border-color: #dc3545; color: #fff; } .e-btn.e-flat.e-danger:hover, .e-css.e-btn.e-flat.e-danger:hover { background: #c82333; border-color: #bd2130; box-shadow: none; color: #fff; } .e-btn.e-flat.e-danger:focus, .e-css.e-btn.e-flat.e-danger:focus { background: #c82333; border-color: #dc3545; color: #fff; box-shadow: 0 0 0 0.25em rgba(225, 81, 95, 0.5); } .e-btn.e-flat.e-danger:active, .e-btn.e-flat.e-danger.e-active, .e-css.e-btn.e-flat.e-danger:active, .e-css.e-btn.e-flat.e-danger.e-active { background: #bd2130; border-color: #b21f2d; color: #fff; box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5); } .e-btn.e-flat.e-danger:disabled, .e-btn.e-flat.e-danger.e-disabled, .e-css.e-btn.e-flat.e-danger:disabled, .e-css.e-btn.e-flat.e-danger.e-disabled { background: rgba(220, 53, 69, 0.65); border-color: transparent; color: rgba(255, 255, 255, 0.65); } .e-btn.e-flat.e-danger .e-ripple-element, .e-css.e-btn.e-flat.e-danger .e-ripple-element { background: transparent; } .e-btn.e-outline, .e-css.e-btn.e-outline { background: transparent; border-color: #6c757d; box-shadow: none; color: #6c757d; } .e-btn.e-outline:hover, .e-css.e-btn.e-outline:hover { background: #6c757d; border-color: #545b62; box-shadow: none; color: #fff; } .e-btn.e-outline:focus, .e-css.e-btn.e-outline:focus { box-shadow: 0 0 0 0.25em rgba(128, 136, 143, 0.5); } .e-btn.e-outline:active, .e-btn.e-outline.e-active, .e-css.e-btn.e-outline:active, .e-css.e-btn.e-outline.e-active { background: #6c757d; border-color: transparent; box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5); color: #fff; } .e-btn.e-outline:disabled, .e-css.e-btn.e-outline:disabled { background: transparent; border-color: rgba(108, 117, 125, 0.65); color: rgba(108, 117, 125, 0.65); } .e-btn.e-outline.e-primary, .e-css.e-btn.e-outline.e-primary { background: transparent; border-color: #007bff; color: #007bff; } .e-btn.e-outline.e-primary:hover, .e-css.e-btn.e-outline.e-primary:hover { background: #007bff; background: #0069d9; border-color: #007bff; color: #fff; } .e-btn.e-outline.e-primary:focus, .e-css.e-btn.e-outline.e-primary:focus { box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5); } .e-btn.e-outline.e-primary:active, .e-btn.e-outline.e-primary.e-active, .e-css.e-btn.e-outline.e-primary:active, .e-css.e-btn.e-outline.e-primary.e-active { background: #007bff; border-color: transparent; box-shadow: 0 0 0 0.25em rgba(31, 139, 255, 0.5); color: #fff; } .e-btn.e-outline.e-primary:disabled, .e-btn.e-outline.e-primary.e-disabled, .e-css.e-btn.e-outline.e-primary:disabled, .e-css.e-btn.e-outline.e-primary.e-disabled { background: transparent; border-color: rgba(0, 123, 255, 0.65); box-shadow: none; color: rgba(0, 123, 255, 0.65); } .e-btn.e-outline.e-success, .e-css.e-btn.e-outline.e-success { background: transparent; border-color: #28a745; color: #28a745; } .e-btn.e-outline.e-success:hover, .e-css.e-btn.e-outline.e-success:hover { background: #28a745; background: #218838; border-color: #1e7e34; color: #fff; } .e-btn.e-outline.e-success:focus, .e-css.e-btn.e-outline.e-success:focus { box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5); } .e-btn.e-outline.e-success:active, .e-btn.e-outline.e-success.e-active, .e-css.e-btn.e-outline.e-success:active, .e-css.e-btn.e-outline.e-success.e-active { background: #28a745; border-color: transparent; box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5); color: #fff; } .e-btn.e-outline.e-success:disabled, .e-btn.e-outline.e-success.e-disabled, .e-css.e-btn.e-outline.e-success:disabled, .e-css.e-btn.e-outline.e-success.e-disabled { background: transparent; border-color: rgba(40, 167, 69, 0.65); box-shadow: none; color: rgba(40, 167, 69, 0.65); } .e-btn.e-outline.e-info, .e-css.e-btn.e-outline.e-info { background: transparent; border-color: #17a2b8; color: #17a2b8; } .e-btn.e-outline.e-info:hover, .e-css.e-btn.e-outline.e-info:hover { background: #17a2b8; background: #138496; border-color: #117a8b; color: #fff; } .e-btn.e-outline.e-info:focus, .e-css.e-btn.e-outline.e-info:focus { box-shadow: 0 0 0 0.25em rgba(46, 173, 193, 0.5); } .e-btn.e-outline.e-info:active, .e-btn.e-outline.e-info.e-active, .e-css.e-btn.e-outline.e-info:active, .e-css.e-btn.e-outline.e-info.e-active { background: #17a2b8; border-color: transparent; box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5); color: #fff; } .e-btn.e-outline.e-info:disabled, .e-btn.e-outline.e-info.e-disabled, .e-css.e-btn.e-outline.e-info:disabled, .e-css.e-btn.e-outline.e-info.e-disabled { background: transparent; border-color: rgba(23, 162, 184, 0.65); box-shadow: none; color: rgba(23, 162, 184, 0.65); } .e-btn.e-outline.e-warning, .e-css.e-btn.e-outline.e-warning { background: transparent; border-color: #ffc107; color: #ffc107; } .e-btn.e-outline.e-warning:hover, .e-css.e-btn.e-outline.e-warning:hover { background: #ffc107; background: #e0a800; border-color: #d39e00; color: #212529; } .e-btn.e-outline.e-warning:focus, .e-css.e-btn.e-outline.e-warning:focus { box-shadow: 0 0 0 0.25em rgba(255, 201, 40, 0.5); } .e-btn.e-outline.e-warning:active, .e-btn.e-outline.e-warning.e-active, .e-css.e-btn.e-outline.e-warning:active, .e-css.e-btn.e-outline.e-warning.e-active { background: #ffc107; border-color: transparent; box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5); color: #212529; } .e-btn.e-outline.e-warning:disabled, .e-btn.e-outline.e-warning.e-disabled, .e-css.e-btn.e-outline.e-warning:disabled, .e-css.e-btn.e-outline.e-warning.e-disabled { background: transparent; border-color: rgba(255, 193, 7, 0.65); box-shadow: none; color: rgba(255, 193, 7, 0.65); } .e-btn.e-outline.e-danger, .e-css.e-btn.e-outline.e-danger { background: transparent; border-color: #dc3545; color: #dc3545; } .e-btn.e-outline.e-danger:hover, .e-css.e-btn.e-outline.e-danger:hover { background: #dc3545; background: #c82333; border-color: #bd2130; color: #fff; } .e-btn.e-outline.e-danger:focus, .e-css.e-btn.e-outline.e-danger:focus { box-shadow: 0 0 0 0.25em rgba(225, 81, 95, 0.5); } .e-btn.e-outline.e-danger:active, .e-btn.e-outline.e-danger.e-active, .e-css.e-btn.e-outline.e-danger:active, .e-css.e-btn.e-outline.e-danger.e-active { background: #dc3545; border-color: transparent; box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5); color: #fff; } .e-btn.e-outline.e-danger:disabled, .e-btn.e-outline.e-danger.e-disabled, .e-css.e-btn.e-outline.e-danger:disabled, .e-css.e-btn.e-outline.e-danger.e-disabled { background: transparent; border-color: rgba(220, 53, 69, 0.65); box-shadow: none; color: rgba(220, 53, 69, 0.65); } .e-btn.e-link, .e-css.e-btn.e-link { background: transparent; border-color: transparent; border-radius: 0; box-shadow: none; color: #007bff; } .e-btn.e-link:hover, .e-css.e-btn.e-link:hover { border-radius: 0; color: #0056b3; text-decoration: underline; background: transparent; border-color: transparent; } .e-btn.e-link:focus, .e-css.e-btn.e-link:focus { border-radius: 0; text-decoration: underline; background: transparent; border-color: transparent; box-shadow: none; color: #0056b3; } .e-btn.e-link:focus:not(:focus-visible), .e-css.e-btn.e-link:focus:not(:focus-visible) { outline: none !important; /* stylelint-disable-line declaration-no-important */ } .e-btn.e-link:disabled, .e-css.e-btn.e-link:disabled { color: #6c757d; background: transparent; box-shadow: none; text-decoration: none; } .e-btn.e-inherit, .e-css.e-btn.e-inherit { color: inherit; background: inherit; border-color: transparent; box-shadow: none; } .e-btn.e-inherit:hover, .e-btn.e-inherit:focus, .e-btn.e-inherit:active, .e-btn.e-inherit.e-active, .e-css.e-btn.e-inherit:hover, .e-css.e-btn.e-inherit:focus, .e-css.e-btn.e-inherit:active, .e-css.e-btn.e-inherit.e-active { background: rgba(0, 0, 0, 0.056); border-color: transparent; box-shadow: none; color: inherit; outline: none; } .e-btn.e-inherit:disabled, .e-css.e-btn.e-inherit:disabled { background: inherit; color: inherit; border-color: transparent; box-shadow: none; opacity: 0.5; } .e-checkbox-wrapper .e-check::before, .e-css.e-checkbox-wrapper .e-check::before { content: "\e7fa"; } .e-checkbox-wrapper .e-stop::before, .e-css.e-checkbox-wrapper .e-stop::before { content: "\e7fb"; } /*! checkbox layout */ .e-checkbox-wrapper, .e-css.e-checkbox-wrapper { cursor: pointer; display: inline-block; line-height: 1; outline: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .e-checkbox-wrapper label, .e-css.e-checkbox-wrapper label { cursor: pointer; display: inline-block; line-height: 0; margin: 0; position: relative; white-space: nowrap; } .e-checkbox-wrapper:focus .e-frame, .e-checkbox-wrapper.e-focus .e-frame, .e-css.e-checkbox-wrapper:focus .e-frame, .e-css.e-checkbox-wrapper.e-focus .e-frame { box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); } .e-checkbox-wrapper .e-ripple-container, .e-css.e-checkbox-wrapper .e-ripple-container { border-radius: 50%; bottom: -9px; height: 36px; left: -9px; pointer-events: none; position: absolute; right: -9px; top: -9px; width: 36px; z-index: 1; } .e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label { cursor: pointer; display: inline-block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont"; font-size: 14px; font-weight: normal; line-height: 14px; -webkit-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: normal; } .e-checkbox-wrapper .e-checkbox, .e-css.e-checkbox-wrapper .e-checkbox { height: 1px; opacity: 0; position: absolute; width: 1px; } .e-checkbox-wrapper .e-checkbox + .e-label, .e-css.e-checkbox-wrapper .e-checkbox + .e-label { margin-right: 8px; } .e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { border: 1px solid; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: "e-icons"; height: 14px; line-height: 1.5; padding: 0; text-align: center; vertical-align: middle; width: 14px; } .e-checkbox-wrapper .e-frame + .e-label, .e-css.e-checkbox-wrapper .e-frame + .e-label { margin-left: 8px; } .e-checkbox-wrapper .e-frame + .e-ripple-container, .e-css.e-checkbox-wrapper .e-frame + .e-ripple-container { left: auto; } .e-checkbox-wrapper .e-check, .e-css.e-checkbox-wrapper .e-check { font-size: 8px; } .e-checkbox-wrapper .e-stop, .e-css.e-checkbox-wrapper .e-stop { font-size: 8px; line-height: 1.5; } .e-checkbox-wrapper.e-checkbox-disabled, .e-css.e-checkbox-wrapper.e-checkbox-disabled { cursor: default; pointer-events: none; } .e-checkbox-wrapper.e-checkbox-disabled .e-frame, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame { cursor: default; } .e-checkbox-wrapper.e-checkbox-disabled .e-label, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-label { cursor: default; } .e-checkbox-wrapper.e-rtl .e-ripple-container, .e-css.e-checkbox-wrapper.e-rtl .e-ripple-container { right: -9px; } .e-checkbox-wrapper.e-rtl .e-frame, .e-css.e-checkbox-wrapper.e-rtl .e-frame { margin: 0; } .e-checkbox-wrapper.e-rtl .e-frame:hover, .e-css.e-checkbox-wrapper.e-rtl .e-frame:hover { background-color: #fff; border-color: #adb5bd; } .e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container, .e-css.e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container { left: -9px; right: auto; } .e-checkbox-wrapper.e-rtl .e-label, .e-css.e-checkbox-wrapper.e-rtl .e-label { margin-left: 0; margin-right: 8px; } .e-checkbox-wrapper.e-rtl .e-label + .e-frame, .e-css.e-checkbox-wrapper.e-rtl .e-label + .e-frame { margin: 0; } .e-checkbox-wrapper.e-rtl .e-checkbox + .e-label, .e-css.e-checkbox-wrapper.e-rtl .e-checkbox + .e-label { margin-left: 8px; margin-right: 0; } .e-checkbox-wrapper.e-small .e-frame, .e-css.e-checkbox-wrapper.e-small .e-frame { height: 12px; line-height: 11px; width: 12px; } .e-checkbox-wrapper.e-small .e-check, .e-css.e-checkbox-wrapper.e-small .e-check { font-size: 6px; } .e-checkbox-wrapper.e-small .e-stop, .e-css.e-checkbox-wrapper.e-small .e-stop { font-size: 8px; line-height: 11px; } .e-checkbox-wrapper.e-small .e-label, .e-css.e-checkbox-wrapper.e-small .e-label { font-size: 12px; line-height: 12px; } .e-checkbox-wrapper.e-small .e-ripple-container, .e-css.e-checkbox-wrapper.e-small .e-ripple-container { bottom: -13px; height: 30px; left: -13px; right: -13px; top: -13px; width: 30px; } .e-checkbox-wrapper[readonly] { pointer-events: none; } .e-small .e-checkbox-wrapper .e-frame, .e-small.e-checkbox-wrapper .e-frame, .e-small .e-css.e-checkbox-wrapper .e-frame, .e-small.e-css.e-checkbox-wrapper .e-frame { height: 12px; line-height: 11px; width: 12px; } .e-small .e-checkbox-wrapper .e-frame:hover, .e-small.e-checkbox-wrapper .e-frame:hover, .e-small .e-css.e-checkbox-wrapper .e-frame:hover, .e-small.e-css.e-checkbox-wrapper .e-frame:hover { background-color: #fff; border-color: #adb5bd; } .e-small .e-checkbox-wrapper .e-check, .e-small.e-checkbox-wrapper .e-check, .e-small .e-css.e-checkbox-wrapper .e-check, .e-small.e-css.e-checkbox-wrapper .e-check { font-size: 6px; } .e-small .e-checkbox-wrapper .e-stop, .e-small.e-checkbox-wrapper .e-stop, .e-small .e-css.e-checkbox-wrapper .e-stop, .e-small.e-css.e-checkbox-wrapper .e-stop { font-size: 8px; line-height: 11px; } .e-small .e-checkbox-wrapper .e-label, .e-small.e-checkbox-wrapper .e-label, .e-small .e-css.e-checkbox-wrapper .e-label, .e-small.e-css.e-checkbox-wrapper .e-label { font-size: 12px; line-height: 12px; } .e-small .e-checkbox-wrapper .e-ripple-container, .e-small.e-checkbox-wrapper .e-ripple-container, .e-small .e-css.e-checkbox-wrapper .e-ripple-container, .e-small.e-css.e-checkbox-wrapper .e-ripple-container { bottom: -13px; height: 30px; left: -13px; right: -13px; top: -13px; width: 30px; } .e-bigger.e-small .e-checkbox-wrapper .e-frame, .e-bigger.e-small.e-checkbox-wrapper .e-frame, .e-bigger.e-small .e-css.e-checkbox-wrapper .e-frame, .e-bigger.e-small.e-css.e-checkbox-wrapper .e-frame { height: 15px; line-height: 14px; width: 15px; } .e-bigger.e-small .e-checkbox-wrapper .e-frame:hover.e-check, .e-bigger.e-small.e-checkbox-wrapper .e-frame:hover.e-check, .e-bigger.e-small .e-css.e-checkbox-wrapper .e-frame:hover.e-check, .e-bigger.e-small.e-css.e-checkbox-wrapper .e-frame:hover.e-check { background-color: #007bff; border-color: #007bff; } .e-bigger.e-small .e-checkbox-wrapper .e-check, .e-bigger.e-small.e-checkbox-wrapper .e-check, .e-bigger.e-small .e-css.e-checkbox-wrapper .e-check, .e-bigger.e-small.e-css.e-checkbox-wrapper .e-check { font-size: 8px; } .e-bigger.e-small .e-checkbox-wrapper .e-stop, .e-bigger.e-small.e-checkbox-wrapper .e-stop, .e-bigger.e-small .e-css.e-checkbox-wrapper .e-stop, .e-bigger.e-small.e-css.e-checkbox-wrapper .e-stop { font-size: 8px; line-height: 14px; } .e-bigger.e-small .e-checkbox-wrapper .e-label, .e-bigger.e-small.e-checkbox-wrapper .e-label, .e-bigger.e-small .e-css.e-checkbox-wrapper .e-label, .e-bigger.e-small.e-css.e-checkbox-wrapper .e-label { font-size: 15px; line-height: 15px; } .e-bigger.e-small .e-checkbox-wrapper .e-ripple-container, .e-bigger.e-small.e-checkbox-wrapper .e-ripple-container, .e-bigger.e-small .e-css.e-checkbox-wrapper .e-ripple-container, .e-bigger.e-small.e-css.e-checkbox-wrapper .e-ripple-container { bottom: -16px; height: 38px; left: -16px; right: -16px; top: -16px; width: 38px; } .e-bigger .e-checkbox-wrapper .e-frame, .e-bigger.e-checkbox-wrapper .e-frame, .e-bigger .e-css.e-checkbox-wrapper .e-frame, .e-bigger.e-css.e-checkbox-wrapper .e-frame { height: 16px; line-height: 15px; width: 16px; } .e-bigger .e-checkbox-wrapper .e-frame:hover, .e-bigger.e-checkbox-wrapper .e-frame:hover, .e-bigger .e-css.e-checkbox-wrapper .e-frame:hover, .e-bigger.e-css.e-checkbox-wrapper .e-frame:hover { background-color: #fff; border-color: #adb5bd; } .e-bigger .e-checkbox-wrapper .e-frame + .e-label, .e-bigger.e-checkbox-wrapper .e-frame + .e-label, .e-bigger .e-css.e-checkbox-wrapper .e-frame + .e-label, .e-bigger.e-css.e-checkbox-wrapper .e-frame + .e-label { font-size: 16px; line-height: 16px; margin-left: 10px; } .e-bigger .e-checkbox-wrapper .e-frame + .e-ripple-container, .e-bigger.e-checkbox-wrapper .e-frame + .e-ripple-container, .e-bigger .e-css.e-checkbox-wrapper .e-frame + .e-ripple-container, .e-bigger.e-css.e-checkbox-wrapper .e-frame + .e-ripple-container { left: auto; } .e-bigger .e-checkbox-wrapper .e-check, .e-bigger.e-checkbox-wrapper .e-check, .e-bigger .e-css.e-checkbox-wrapper .e-check, .e-bigger.e-css.e-checkbox-wrapper .e-check { font-size: 8px; } .e-bigger .e-checkbox-wrapper .e-stop, .e-bigger.e-checkbox-wrapper .e-stop, .e-bigger .e-css.e-checkbox-wrapper .e-stop, .e-bigger.e-css.e-checkbox-wrapper .e-stop { font-size: 8px; line-height: 15px; } .e-bigger .e-checkbox-wrapper .e-label, .e-bigger.e-checkbox-wrapper .e-label, .e-bigger .e-css.e-checkbox-wrapper .e-label, .e-bigger.e-css.e-checkbox-wrapper .e-label { font-size: 16px; } .e-bigger .e-checkbox-wrapper .e-ripple-container, .e-bigger.e-checkbox-wrapper .e-ripple-container, .e-bigger .e-css.e-checkbox-wrapper .e-ripple-container, .e-bigger.e-css.e-checkbox-wrapper .e-ripple-container { bottom: -15px; height: 38px; left: -15px; right: -15px; top: -15px; width: 38px; } .e-bigger .e-checkbox-wrapper.e-rtl .e-frame, .e-bigger.e-checkbox-wrapper.e-rtl .e-frame, .e-bigger .e-css.e-checkbox-wrapper.e-rtl .e-frame, .e-bigger.e-css.e-checkbox-wrapper.e-rtl .e-frame { margin: 0; } .e-bigger .e-checkbox-wrapper.e-rtl .e-frame:hover.e-check, .e-bigger.e-checkbox-wrapper.e-rtl .e-frame:hover.e-check, .e-bigger .e-css.e-checkbox-wrapper.e-rtl .e-frame:hover.e-check, .e-bigger.e-css.e-checkbox-wrapper.e-rtl .e-frame:hover.e-check { background-color: #007bff; border-color: #007bff; } .e-bigger .e-checkbox-wrapper.e-rtl .e-frame + .e-label, .e-bigger.e-checkbox-wrapper.e-rtl .e-frame + .e-label, .e-bigger .e-css.e-checkbox-wrapper.e-rtl .e-frame + .e-label, .e-bigger.e-css.e-checkbox-wrapper.e-rtl .e-frame + .e-label { margin-left: 0; margin-right: 10px; } .e-bigger .e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container, .e-bigger.e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container, .e-bigger .e-css.e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container, .e-bigger.e-css.e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container { left: auto; } .e-bigger .e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container, .e-bigger.e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container, .e-bigger .e-css.e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container, .e-bigger.e-css.e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container { right: auto; } .e-bigger .e-checkbox-wrapper.e-small .e-frame, .e-bigger.e-checkbox-wrapper.e-small .e-frame, .e-bigger .e-css.e-checkbox-wrapper.e-small .e-frame, .e-bigger.e-css.e-checkbox-wrapper.e-small .e-frame { height: 15px; line-height: 14px; width: 15px; } .e-bigger .e-checkbox-wrapper.e-small .e-check, .e-bigger.e-checkbox-wrapper.e-small .e-check, .e-bigger .e-css.e-checkbox-wrapper.e-small .e-check, .e-bigger.e-css.e-checkbox-wrapper.e-small .e-check { font-size: 8px; } .e-bigger .e-checkbox-wrapper.e-small .e-stop, .e-bigger.e-checkbox-wrapper.e-small .e-stop, .e-bigger .e-css.e-checkbox-wrapper.e-small .e-stop, .e-bigger.e-css.e-checkbox-wrapper.e-small .e-stop { font-size: 8px; line-height: 14px; } .e-bigger .e-checkbox-wrapper.e-small .e-label, .e-bigger.e-checkbox-wrapper.e-small .e-label, .e-bigger .e-css.e-checkbox-wrapper.e-small .e-label, .e-bigger.e-css.e-checkbox-wrapper.e-small .e-label { font-size: 15px; line-height: 15px; } .e-bigger .e-checkbox-wrapper.e-small .e-ripple-