UNPKG

@syncfusion/ej2-buttons

Version:

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

2,225 lines (1,928 loc) 157 kB
/*! button layout */ .e-btn, .e-css.e-btn { -webkit-font-smoothing: antialiased; border: 1px solid; border-radius: 0; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont"; font-size: 14px; font-weight: 600; -ms-flex-pack: center; justify-content: center; line-height: 1.8572em; outline: none; padding: 2px 20px; 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: -3px; 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.5714em; width: 1.929em; } .e-btn .e-btn-icon.e-icon-right, .e-css.e-btn .e-btn-icon.e-icon-right { margin-right: -0.5714em; width: 1.929em; } .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: 2px 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: 2.57143em; line-height: 1; padding: 0; width: 2.57143em; } .e-btn.e-round .e-btn-icon, .e-css.e-btn.e-round .e-btn-icon { font-size: 16px; line-height: 2.125em; margin-top: 0; width: auto; } .e-btn.e-rtl .e-icon-right, .e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.5714em; 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.5714em; } .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.5em; padding: 3px 16px; } .e-btn.e-small .e-btn-icon, .e-css.e-btn.e-small .e-btn-icon { font-size: 11px; width: 0.91em; } .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.7273em; width: 2.182em; } .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.7273em; width: 2.182em; } .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: 3px 6px; } .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: 2.5em; line-height: 1; padding: 0; width: 2.5em; } .e-btn.e-small.e-round .e-btn-icon, .e-css.e-btn.e-small.e-round .e-btn-icon { font-size: 14px; line-height: 2em; 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.7273em; 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.7273em; } .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.5em; padding: 3px 16px; } .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: 11px; width: 0.91em; } .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.7273em; width: 2.182em; } .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.7273em; width: 2.182em; } .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: 3px 6px; } .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: 2.5em; line-height: 1; padding: 0; width: 2.5em; } .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: 14px; line-height: 2em; 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.7273em; 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.7273em; } .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: 16px; line-height: 2em; padding: 1px 22px; } .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: 15px; width: 1.0667em; } .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.5334em; width: 2.1334em; } .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.5334em; width: 2.1334em; } .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: 1px 9px; } .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: 2.5em; line-height: 1; padding: 0; width: 2.5em; } .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: 18px; line-height: 2.1112em; 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.5334em; 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.5334em; } .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: 2em; padding: 3px 24px; } .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.688em; width: 2.25em; } .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.688em; width: 2.25em; } .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: 3px 11px; } .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: 2.875em; line-height: 1; padding: 0; width: 2.875em; } .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: 20px; line-height: 2.2em; 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.688em; 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.688em; } .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: 16px; line-height: 2em; padding: 1px 22px; } .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: 15px; width: 1.0667em; } .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.5334em; width: 2.1334em; } .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.5334em; width: 2.1334em; } .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: 1px 9px; } .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: 2.5em; line-height: 1; padding: 0; width: 2.5em; } .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: 18px; line-height: 2.1112em; 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.5334em; 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.5334em; } /*! button theme */ .e-btn, .e-css.e-btn { -webkit-tap-highlight-color: transparent; background-color: #414040; border-color: #414040; 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-color: #514f4f; border-color: #514f4f; box-shadow: none; color: #fff; } .e-btn:focus, .e-css.e-btn:focus { background-color: #414040; border-color: #201f1f; color: #fff; outline: #c8c8c8 1px solid; outline-offset: 0; box-shadow: none; } .e-btn:active, .e-css.e-btn:active { background-color: #6f6c6c; border-color: #6f6c6c; color: #fff; outline: #414040 0 solid; outline-offset: 0; box-shadow: none; } .e-btn.e-active, .e-css.e-btn.e-active { background-color: #6f6c6c; border-color: #6f6c6c; box-shadow: none; color: #fff; } .e-btn:disabled, .e-css.e-btn:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn .e-ripple-element, .e-css.e-btn .e-ripple-element { background-color: transparent; } .e-btn.e-round, .e-css.e-btn.e-round { background-color: #414040; border-color: #414040; color: #fff; } .e-btn.e-round:hover, .e-css.e-btn.e-round:hover { background-color: #514f4f; border-color: #514f4f; color: #fff; } .e-btn.e-round:focus, .e-css.e-btn.e-round:focus { background-color: #414040; border-color: #201f1f; box-shadow: none; color: #fff; outline: #414040 0 solid; outline-offset: 0; } .e-btn.e-round:active, .e-css.e-btn.e-round:active { background-color: #6f6c6c; border-color: #6f6c6c; box-shadow: none; color: #fff; outline: #414040 0 solid; outline-offset: 0; } .e-btn.e-round:disabled, .e-css.e-btn.e-round:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-round.e-primary:focus, .e-css.e-btn.e-round.e-primary:focus { outline: #414040 0 solid; } .e-btn.e-round.e-success:focus, .e-css.e-btn.e-round.e-success:focus { outline: #414040 0 solid; } .e-btn.e-round.e-info:focus, .e-css.e-btn.e-round.e-info:focus { outline: #414040 0 solid; } .e-btn.e-round.e-warning:focus, .e-css.e-btn.e-round.e-warning:focus { outline: #414040 0 solid; } .e-btn.e-round.e-danger:focus, .e-css.e-btn.e-round.e-danger:focus { outline: #414040 0 solid; } .e-btn.e-primary, .e-css.e-btn.e-primary { background-color: #0074cc; border-color: #0074cc; color: #fff; } .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background-color: #0063ad; border-color: #0063ad; box-shadow: none; color: #fff; } .e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus { background-color: #0074cc; border-color: #201f1f; color: #fff; outline: #c8c8c8 1px solid; box-shadow: none; } .e-btn.e-primary:active, .e-css.e-btn.e-primary:active { background-color: #005799; border-color: #005799; color: #fff; outline: #414040 0 solid; box-shadow: none; } .e-btn.e-primary.e-active, .e-css.e-btn.e-primary.e-active { background-color: #005799; border-color: #005799; box-shadow: none; color: #fff; } .e-btn.e-primary:disabled, .e-css.e-btn.e-primary:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-primary .e-ripple-element, .e-css.e-btn.e-primary .e-ripple-element { background-color: transparent; } .e-btn.e-success, .e-css.e-btn.e-success { background-color: #37844d; border-color: #37844d; color: #fff; } .e-btn.e-success:hover, .e-css.e-btn.e-success:hover { background-color: #2e6e40; border-color: #2e6e40; box-shadow: none; color: #fff; } .e-btn.e-success:focus, .e-css.e-btn.e-success:focus { background-color: #37844d; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #255934; border-color: #255934; color: #fff; box-shadow: none; } .e-btn.e-success:disabled, .e-css.e-btn.e-success:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-success .e-ripple-element, .e-css.e-btn.e-success .e-ripple-element { background-color: transparent; } .e-btn.e-info, .e-css.e-btn.e-info { background-color: #1e79cb; border-color: #1e79cb; color: #fff; } .e-btn.e-info:hover, .e-css.e-btn.e-info:hover { background-color: #1a69b0; border-color: #1a69b0; box-shadow: none; color: #fff; } .e-btn.e-info:focus, .e-css.e-btn.e-info:focus { background-color: #1e79cb; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #165996; border-color: #165996; color: #fff; box-shadow: none; } .e-btn.e-info:disabled, .e-css.e-btn.e-info:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-info .e-ripple-element, .e-css.e-btn.e-info .e-ripple-element { background-color: transparent; } .e-btn.e-warning, .e-css.e-btn.e-warning { background-color: #bf7500; border-color: #bf7500; color: #fff; } .e-btn.e-warning:hover, .e-css.e-btn.e-warning:hover { background-color: #a06200; border-color: #a06200; box-shadow: none; color: #fff; } .e-btn.e-warning:focus, .e-css.e-btn.e-warning:focus { background-color: #bf7500; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #825000; border-color: #825000; color: #fff; box-shadow: none; } .e-btn.e-warning:disabled, .e-css.e-btn.e-warning:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-warning .e-ripple-element, .e-css.e-btn.e-warning .e-ripple-element { background-color: transparent; } .e-btn.e-danger, .e-css.e-btn.e-danger { background-color: #cd2a19; border-color: #cd2a19; color: #fff; } .e-btn.e-danger:hover, .e-css.e-btn.e-danger:hover { background-color: #b22416; border-color: #b22416; box-shadow: none; color: #fff; } .e-btn.e-danger:focus, .e-css.e-btn.e-danger:focus { background-color: #cd2a19; border-color: #201f1f; color: #fff; box-shadow: none; } .e-btn.e-danger:active, .e-css.e-btn.e-danger:active { background-color: #961f12; border-color: #961f12; color: #fff; box-shadow: none; } .e-btn.e-danger.e-active, .e-css.e-btn.e-danger.e-active { background-color: #961f12; border-color: #961f12; box-shadow: none; color: #fff; } .e-btn.e-danger:disabled, .e-css.e-btn.e-danger:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-danger .e-ripple-element, .e-css.e-btn.e-danger .e-ripple-element { background-color: transparent; } .e-btn.e-flat, .e-css.e-btn.e-flat { background-color: #414040; border-color: #414040; box-shadow: none; color: #fff; } .e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover { background-color: #514f4f; border-color: #514f4f; box-shadow: none; color: #fff; } .e-btn.e-flat:focus, .e-css.e-btn.e-flat:focus { background-color: #514f4f; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #6f6c6c; border-color: #6f6c6c; color: #fff; box-shadow: none; } .e-btn.e-flat:disabled, .e-css.e-btn.e-flat:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-flat .e-ripple-element, .e-css.e-btn.e-flat .e-ripple-element { background-color: transparent; } .e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary { background-color: #0074cc; border-color: #0074cc; color: #fff; } .e-btn.e-flat.e-primary:hover, .e-css.e-btn.e-flat.e-primary:hover { background-color: #0063ad; border-color: #0063ad; color: #fff; } .e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus { background-color: #0063ad; border-color: #201f1f; color: #fff; } .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-color: #005799; border-color: #005799; color: #fff; } .e-btn.e-flat.e-primary:disabled, .e-css.e-btn.e-flat.e-primary:disabled { background-color: #414040; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-flat.e-primary .e-ripple-element, .e-css.e-btn.e-flat.e-primary .e-ripple-element { background-color: transparent; } .e-btn.e-flat.e-success, .e-css.e-btn.e-flat.e-success { background-color: #37844d; border-color: #37844d; color: #fff; } .e-btn.e-flat.e-success:hover, .e-css.e-btn.e-flat.e-success:hover { background-color: #2e6e40; border-color: #2e6e40; box-shadow: none; color: #fff; } .e-btn.e-flat.e-success:focus, .e-css.e-btn.e-flat.e-success:focus { background-color: #2e6e40; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #255934; border-color: #255934; color: #fff; box-shadow: none; } .e-btn.e-flat.e-success:disabled, .e-css.e-btn.e-flat.e-success:disabled { background-color: #414040; border-color: #414040; color: #6f6c6c; } .e-btn.e-flat.e-success .e-ripple-element, .e-css.e-btn.e-flat.e-success .e-ripple-element { background-color: transparent; } .e-btn.e-flat.e-info, .e-css.e-btn.e-flat.e-info { background-color: #1e79cb; border-color: #1e79cb; color: #fff; } .e-btn.e-flat.e-info:hover, .e-css.e-btn.e-flat.e-info:hover { background-color: #1a69b0; border-color: #1a69b0; box-shadow: none; color: #fff; } .e-btn.e-flat.e-info:focus, .e-css.e-btn.e-flat.e-info:focus { background-color: #1a69b0; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #165996; border-color: #165996; color: #fff; box-shadow: none; } .e-btn.e-flat.e-info:disabled, .e-css.e-btn.e-flat.e-info:disabled { background-color: #414040; border-color: #414040; color: #6f6c6c; } .e-btn.e-flat.e-info .e-ripple-element, .e-css.e-btn.e-flat.e-info .e-ripple-element { background-color: transparent; } .e-btn.e-flat.e-warning, .e-css.e-btn.e-flat.e-warning { background-color: #bf7500; border-color: #bf7500; color: #fff; } .e-btn.e-flat.e-warning:hover, .e-css.e-btn.e-flat.e-warning:hover { background-color: #a06200; border-color: #a06200; box-shadow: none; color: #fff; } .e-btn.e-flat.e-warning:focus, .e-css.e-btn.e-flat.e-warning:focus { background-color: #a06200; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #825000; border-color: #825000; color: #fff; box-shadow: none; } .e-btn.e-flat.e-warning:disabled, .e-css.e-btn.e-flat.e-warning:disabled { background-color: #414040; border-color: #414040; color: #6f6c6c; } .e-btn.e-flat.e-warning .e-ripple-element, .e-css.e-btn.e-flat.e-warning .e-ripple-element { background-color: transparent; } .e-btn.e-flat.e-danger, .e-css.e-btn.e-flat.e-danger { background-color: #cd2a19; border-color: #cd2a19; color: #fff; } .e-btn.e-flat.e-danger:hover, .e-css.e-btn.e-flat.e-danger:hover { background-color: #b22416; border-color: #b22416; box-shadow: none; color: #fff; } .e-btn.e-flat.e-danger:focus, .e-css.e-btn.e-flat.e-danger:focus { background-color: #b22416; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #961f12; border-color: #961f12; color: #fff; box-shadow: none; } .e-btn.e-flat.e-danger:disabled, .e-css.e-btn.e-flat.e-danger:disabled { background-color: #414040; border-color: #414040; color: #6f6c6c; } .e-btn.e-flat.e-danger .e-ripple-element, .e-css.e-btn.e-flat.e-danger .e-ripple-element { background-color: transparent; } .e-btn.e-outline, .e-css.e-btn.e-outline { background-color: transparent; border-color: #414040; box-shadow: none; color: #fff; } .e-btn.e-outline:hover, .e-css.e-btn.e-outline:hover { background-color: #514f4f; border-color: #514f4f; box-shadow: none; color: #fff; } .e-btn.e-outline:focus, .e-css.e-btn.e-outline:focus { background-color: #414040; border-color: #201f1f; color: #fff; box-shadow: none; } .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-color: #6f6c6c; border-color: #6f6c6c; box-shadow: none; color: #fff; } .e-btn.e-outline:disabled, .e-css.e-btn.e-outline:disabled { background-color: transparent; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-outline.e-primary, .e-css.e-btn.e-outline.e-primary { background-color: transparent; border-color: #38a9ff; color: #38a9ff; } .e-btn.e-outline.e-primary:hover, .e-css.e-btn.e-outline.e-primary:hover { background-color: #0063ad; border-color: #0063ad; color: #fff; } .e-btn.e-outline.e-primary:focus, .e-css.e-btn.e-outline.e-primary:focus { background-color: #0074cc; border-color: #201f1f; color: #fff; } .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-color: #005799; border-color: #005799; box-shadow: none; color: #fff; } .e-btn.e-outline.e-primary:disabled, .e-css.e-btn.e-outline.e-primary:disabled { background-color: transparent; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-outline.e-success, .e-css.e-btn.e-outline.e-success { background-color: transparent; border-color: #37844d; color: #37844d; } .e-btn.e-outline.e-success:hover, .e-css.e-btn.e-outline.e-success:hover { background-color: #2e6e40; border-color: #2e6e40; color: #fff; } .e-btn.e-outline.e-success:focus, .e-css.e-btn.e-outline.e-success:focus { background-color: #37844d; border-color: #201f1f; color: #fff; } .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-color: #255934; border-color: #255934; box-shadow: none; color: #fff; } .e-btn.e-outline.e-success:disabled, .e-css.e-btn.e-outline.e-success:disabled { background-color: transparent; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-outline.e-info, .e-css.e-btn.e-outline.e-info { background-color: transparent; border-color: #1e79cb; color: #1e79cb; } .e-btn.e-outline.e-info:hover, .e-css.e-btn.e-outline.e-info:hover { background-color: #1a69b0; border-color: #1a69b0; color: #fff; } .e-btn.e-outline.e-info:focus, .e-css.e-btn.e-outline.e-info:focus { background-color: #1a69b0; border-color: #201f1f; color: #fff; } .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-color: #165996; border-color: #165996; box-shadow: none; color: #fff; } .e-btn.e-outline.e-info:disabled, .e-css.e-btn.e-outline.e-info:disabled { background-color: transparent; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-outline.e-warning, .e-css.e-btn.e-outline.e-warning { background-color: transparent; border-color: #bf7500; color: #bf7500; } .e-btn.e-outline.e-warning:hover, .e-css.e-btn.e-outline.e-warning:hover { background-color: #a06200; border-color: #a06200; color: #fff; } .e-btn.e-outline.e-warning:focus, .e-css.e-btn.e-outline.e-warning:focus { background-color: #a06200; border-color: #201f1f; color: #fff; } .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-color: #825000; border-color: #825000; box-shadow: none; color: #fff; } .e-btn.e-outline.e-warning:disabled, .e-css.e-btn.e-outline.e-warning:disabled { background-color: transparent; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-outline.e-danger, .e-css.e-btn.e-outline.e-danger { background-color: transparent; border-color: #cd2a19; color: #cd2a19; } .e-btn.e-outline.e-danger:hover, .e-css.e-btn.e-outline.e-danger:hover { background-color: #b22416; border-color: #b22416; color: #fff; } .e-btn.e-outline.e-danger:focus, .e-css.e-btn.e-outline.e-danger:focus { background-color: #b22416; border-color: #201f1f; color: #fff; } .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-color: #961f12; border-color: #961f12; box-shadow: none; color: #fff; } .e-btn.e-outline.e-danger:disabled, .e-css.e-btn.e-outline.e-danger:disabled { background-color: transparent; border-color: #414040; box-shadow: none; color: #6f6c6c; } .e-btn.e-link, .e-css.e-btn.e-link { background-color: transparent; border-color: transparent; border-radius: 0; box-shadow: none; color: #5091f1; } .e-btn.e-link:hover, .e-css.e-btn.e-link:hover { border-radius: 0; color: #639df3; text-decoration: underline; } .e-btn.e-link:focus, .e-css.e-btn.e-link:focus { border-radius: 0; text-decoration: underline; color: #639df3; } .e-btn.e-link:disabled, .e-css.e-btn.e-link:disabled { color: #6f6c6c; background-color: transparent; box-shadow: none; text-decoration: none; } .e-checkbox-wrapper .e-check::before, .e-css.e-checkbox-wrapper .e-check::before { content: '\e935'; } .e-checkbox-wrapper .e-stop::before, .e-css.e-checkbox-wrapper .e-stop::before { content: '\e934'; } /*! 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-css.e-checkbox-wrapper:focus .e-frame { box-shadow: none; } .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: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont"; font-size: 14px; font-weight: normal; line-height: 20px; -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: 2px solid; border-radius: 0; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: 'e-icons'; height: 20px; line-height: 16px; padding: 0; text-align: center; vertical-align: middle; width: 20px; } .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: 12px; } .e-checkbox-wrapper .e-stop, .e-css.e-checkbox-wrapper .e-stop { font-size: 10px; line-height: 16px; } .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 + .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: 14px; line-height: 10px; width: 14px; } .e-checkbox-wrapper.e-small .e-check, .e-css.e-checkbox-wrapper.e-small .e-check { font-size: 8px; } .e-checkbox-wrapper.e-small .e-stop, .e-css.e-checkbox-wrapper.e-small .e-stop { font-size: 8px; line-height: 10px; } .e-checkbox-wrapper.e-small .e-label, .e-css.e-checkbox-wrapper.e-small .e-label { font-size: 14px; line-height: 14px; } .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-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: 14px; line-height: 10px; width: 14px; } .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: 8px; } .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: 10px; } .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: 14px; line-height: 14px; } .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: 18px; line-height: 15px; width: 18px; } .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: 10px; } .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: 10px; 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: 18px; } .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: 22px; line-height: 18px; width: 22px; } .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: 15px; line-height: 22px; margin-left: 8px; } .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: 14px; } .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: 14px; line-height: 18px; } .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: 15px; } .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 + .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: 8px; } .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: 18px; line-height: 15px; width: 18px; } .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: 10px; } .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: 10px; 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: 18px; } .e-bigger .e-checkbox-wrapper.e-small .e-ripple-container, .e-bigger.e-checkbox-wrapper.e-small .e-ripple-container, .e-bigger .e-css.e-checkbox-wrapper.e-small .e-ripple-container, .e-bigger.e-css.e-checkbox-wrapper.e-small .e-ripple-container { bottom: -16px; height: 38px; left: -16px; right: -16px; top: -16px; width: 38px; } /*! checkbox theme */ .e-checkbox-wrapper, .e-css.e-checkbox-wrapper { -webkit-tap-highlight-color: transparent; } .e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { background-color: #201f1f; border-color: #dadada; } .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: #0074cc; border-color: #0074cc; color: #fff; } .e-checkbox-wrapper .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-frame.e-stop { background-color: #201f1f; border-color: #c8c8c8; color: #c8c8c8; } .e-checkbox-wrapper .e-ripple-element, .e-css.e-checkbox-wrapper .e-ripple-element { background: rgba(0, 0, 0, 0.3); } .e-checkbox-wrapper .e-ripple-check .e-ripple-element, .e-css.e-checkbox-wrapper .e-ripple-check .e-ripple-element { background: rgba(0, 0, 0, 0.3); } .e-checkbox-wrapper:active .e-ripple-element, .e-css.e-checkbox-wrapper:active .e-ripple-element { background: rgba(0, 0, 0, 0.3); } .e-checkbox-wrapper:active .e-ripple-check .e-ripple-element, .e-css.e-checkbox-wrapper:active .e-ripple-check .e-ripple-element { background: rgba(0, 0, 0, 0.3); } .e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label { color: #dadada; } .e-checkbox-wrapper .e-checkbox:focus + .e-frame, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame { background-color: #201f1f; border-color: #fff; box-shadow: none; } .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check { background-color: #0063ad; border-color: #0063ad; box-shadow: none; color: #fff; } .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop { box-shadow: none; color: #fff; } .e-checkbox-wrapper:hover .e-frame, .e-css.e-checkbox-wrapper:hover .e-frame { background-color: #201f1f; border-color: #fff; } .e-checkbox-wrapper:hover .e-frame.e-check, .e-css.e-checkbox-wrapper:hover .e-frame.e-check { background-color: #0063ad; border-color: #0063ad; color: #fff; } .e-checkbox-wrapper:hover .e-frame.e-stop, .e-css.e-checkbox-wrapper:hover .e-frame.e-stop { color: #fff; } .e-checkbox-wrapper:hover .e-label, .e-css.e-checkbox-wrapper:hover .e-label { color: #fff; } .e-checkbox-wrapper.e-checkbox-disabled .e-frame, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame { background-color: #201f1f; border-color: #6f6c6c; color: #6f6c6c; } .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check { background-color: #6f6c6c; border-color: #6f6c6c; color: #201f1f; } .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-stop, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-stop { background-color: #201f1f; border-color: #6f6c6c; color: #6f6c6c; } .e-checkbox-wrapper.e-checkbox-disabled .e-label, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-label { color: #6f6c6c; } .e-checkbox-wrapper.e-focus .e-ripple-container, .e-css.e-checkbox-wrapper.e-focus .e-ripple-container { background-color: transparent; } .e-checkbox-wrapper.e-focus .e-ripple-container.e-ripple-check, .e-css.e-checkbox-wrapper.e-focus .e-ripple-container.e-ripple-check { background-color: rgba(0, 0, 0, 0.3); } .e-checkbox-wrapper.e-focus .e-frame, .e-css.e-checkbox-wrapper.e-focus .e-frame { outline: #c8c8c8 1px solid; outline-offset: 2px; } .e-checkbox-wrapper.e-focus .e-frame.e-check, .e-css.e-checkbox-wrapper.e-focus .e-frame.e-check { outline: #c8c8c8 1px solid; outline-offset: 2px; } /*! radiobutton layout */ .e-radio-wrapper { display: inline-block; line-height: 1; position: relative; } .e-radio { -webkit-appearance: none; height: 1px; opacity: 0; position: absolute; width: 1px; } .e-radio + label { -webkit-tap-highlight-color: transparent; cursor: pointer; display: inline-block; margin: 0; position: relative; -webkit-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; } .e-radio + label .e-label { display: inline-block; font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont"; font-size: 14px; font-weight: normal; line-height: 20px; padding-left: 28px; vertical-align: text-top; white-space: normal; } .e-radio + label::before { border: 2px solid; border-radius: 50%; box-sizing: border-box; content: ''; height: 20px; left: 0; position: absolute; top: 0; width: 20px; } .e-radio + label:focus::before { box-shadow: none; } .e-radio + label::after { border: 1px solid; border-radius: 50%; box-sizing: border-box; content: ''; height: 8px; left: 6px; position: absolute; top: 6px; transform: scale(0); width: 8px; } .e-radio + label .e-ripple-container { border-radius: 50%; height: 34px; left: -8px; position: absolute; top: -8px; width: 34px; z-index: 1; } .e-radio + label.e-right .e-label, .e-radio + label.e-rtl .e-label { padding-left: 0; padding-right: 28px; } .e-radio + label.e-right::before, .e-radio + label.e-rtl::before { left: auto; right: 0; } .e-radio + label.e-right::after, .e-radio + label.e-rtl::after { left: auto; right: 6px; } .e-radio + label.e-right .e-ripple-container, .e-radio + label.e-rtl .e-ripple-container { left: auto; right: -8px; } .e-radio + label.e-right.e-rtl .e-label { padding-left: 28px; padding-right: 0; } .e-radio + label.e-right.e-rtl::before { left: 0; right: auto; } .e-radio + label.e-right.e-rtl::after { left: 6px; right: auto; } .e-radio + label.e-right.e-rtl .e-ripple-container { left: -8px; right: auto; } .e-radio + label.e-small .e-label { line-height: 14px; padding-left: 22px; } .e-radio + label.e-small::before { height: 14px; width: 14px; } .e-radio + label.e-small::after { height: 6px; left: 4px; top: 4px; width: 6px; } .e-radio + label.e-small .e-ripple-container { left: -10px; top: -10px; } .e-radio + label.e-small.e-right .e-label, .e-radio + label.e-small.e-rtl .e-label { padding-left: 0; padding-right: 22px; } .e-radio + label.e-small.e-right::after, .e-radio + label.e-small.e-rtl::after { left: auto; right: 4px; } .e-radio + label.e-small.e-right .e-ripple-container, .e-radio + label.e-small.e-rtl .e-ripple-container { left: auto; right: -10px; } .e-radio + label.e-small.e-right.e-rtl .e-label { padding-left: 22px; padding-right: 0; } .e-radio + label.e-small.e-right.e-rtl::after { left: 4px; right: auto; } .e-radio + label.e-sma