UNPKG

@syncfusion/ej2-buttons

Version:

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

1,855 lines (1,807 loc) 183 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: 2.286em; outline: none; padding: 0 12px; 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: 12px; 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: 1.688em; } .e-btn .e-btn-icon.e-icon-right, .e-css.e-btn .e-btn-icon.e-icon-right { margin-right: -0.5em; width: 1.688em; } .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: 0 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: 6px 12px; } .e-btn.e-round, .e-css.e-btn.e-round { border-radius: 50%; height: 2.429em; line-height: 1; padding: 0; width: 2.429em; } .e-btn.e-round .e-btn-icon, .e-css.e-btn.e-round .e-btn-icon { font-size: 16px; line-height: 2em; 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: 2.167em; padding: 0 10px; } .e-btn.e-small .e-btn-icon, .e-css.e-btn.e-small .e-btn-icon { font-size: 10px; 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: 1.7143em; } .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: 1.7143em; } .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: 0 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: 6px 12px; } .e-btn.e-small.e-round, .e-css.e-btn.e-small.e-round { height: 2.334em; line-height: 1; padding: 0; width: 2.334em; } .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: 1.8572em; 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: 2.167em; padding: 0 10px; } .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: 10px; 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: 1.7143em; } .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: 1.7143em; } .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: 0 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: 6px 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.334em; line-height: 1; padding: 0; width: 2.334em; 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: 14px; line-height: 1.8572em; 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: 15px; line-height: 2.2667em; padding: 0 14px; } .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: 12px; 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; } .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; } .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: 0 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: 8px 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.4em; line-height: 1; padding: 0; width: 2.4em; } .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: 16px; line-height: 2.125em; 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: 2.375em; padding: 0 16px; } .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: 14px; 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; } .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; } .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: 0 10px; } .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: 8px 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.5em; line-height: 1; padding: 0; width: 2.5em; } .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: 18px; line-height: 2.1111em; 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: 15px; line-height: 2.2667em; padding: 0 14px; } .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: 12px; 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; } .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; } .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: 0 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: 8px 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.4em; line-height: 1; padding: 0; width: 2.4em; } .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: 16px; line-height: 2.125em; 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: #fff; border-color: #ccc; box-shadow: none; color: #333; transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } .e-btn:hover, .e-css.e-btn:hover { background: #e6e6e6; border-color: #adadad; box-shadow: none; color: #333; } .e-btn:focus, .e-css.e-btn:focus { background: #e6e6e6; border-color: #8c8c8c; color: #333; outline: #fff 0 solid; outline-offset: 0; box-shadow: none; } .e-btn:active, .e-css.e-btn:active { background: #e6e6e6; border-color: #adadad; color: #333; outline: #fff 0 solid; outline-offset: 0; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .e-btn.e-active, .e-css.e-btn.e-active { background: #e6e6e6; border-color: #adadad; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); color: #333; } .e-btn:disabled, .e-btn.e-disabled, .e-css.e-btn:disabled, .e-css.e-btn.e-disabled { background: rgba(255, 255, 255, 0.65); border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(51, 51, 51, 0.65); } .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: transparent; border-color: #ccc; color: #333; } .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: #e6e6e6; border-color: #adadad; color: #333; } .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: #e6e6e6; border-color: #8c8c8c; box-shadow: none; color: #333; outline: #fff 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: #e6e6e6; border-color: #adadad; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); color: #333; outline: #fff 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(255, 255, 255, 0.65); border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(51, 51, 51, 0.65); } .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: #317ab9; } .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: #fff 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: #218739; } .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: #fff 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: #1b809e; } .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: #fff 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: #aa6708; } .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: #fff 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: #dc3243; } .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: #fff 0 solid; } .e-btn.e-primary, .e-css.e-btn.e-primary { background: #317ab9; border-color: #265f91; color: #fff; } .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background: #21527d; border-color: #163854; box-shadow: none; color: #fff; } .e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus { background: #21527d; border-color: #0c1d2c; color: #fff; outline: #fff 0 solid; box-shadow: none; } .e-btn.e-primary:active, .e-css.e-btn.e-primary:active { background: #21527d; border-color: #163854; color: #fff; outline: #fff 0 solid; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .e-btn.e-primary.e-active, .e-css.e-btn.e-primary.e-active { background: #21527d; border-color: #163854; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 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(49, 122, 185, 0.65); border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(255, 255, 255, 0.65); } .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: #218739; border-color: #175e28; color: #fff; } .e-btn.e-success:hover, .e-css.e-btn.e-success:hover { background: #124a1f; border-color: #08210e; box-shadow: none; color: #fff; } .e-btn.e-success:focus, .e-css.e-btn.e-success:focus { background: #124a1f; border-color: black; 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: #124a1f; border-color: #08210e; color: #fff; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .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(92, 184, 92, 0.65); border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(255, 255, 255, 0.65); } .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: #1b809e; border-color: #145d72; color: #fff; } .e-btn.e-info:hover, .e-css.e-btn.e-info:hover { background: #104b5d; border-color: #082831; box-shadow: none; color: #fff; } .e-btn.e-info:focus, .e-css.e-btn.e-info:focus { background: #104b5d; border-color: #010406; 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: #104b5d; color: #fff; border-color: #082831; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .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(91, 192, 222, 0.65); border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(255, 255, 255, 0.65); } .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: #aa6708; border-color: #794906; color: #fff; } .e-btn.e-warning:hover, .e-css.e-btn.e-warning:hover { background: #613b05; border-color: #301d02; box-shadow: none; color: #fff; } .e-btn.e-warning:focus, .e-css.e-btn.e-warning:focus { background: #613b05; border-color: black; 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: #613b05; border-color: #301d02; color: #fff; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .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(240, 173, 78, 0.65); border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(255, 255, 255, 0.65); } .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: #dc3243; border-color: #bb202f; color: #fff; } .e-btn.e-danger:hover, .e-css.e-btn.e-danger:hover { background: #a51c2a; border-color: #7a151f; box-shadow: none; color: #fff; } .e-btn.e-danger:focus, .e-css.e-btn.e-danger:focus { background: #a51c2a; border-color: #4e0d14; color: #fff; box-shadow: none; } .e-btn.e-danger:active, .e-css.e-btn.e-danger:active { background: #a51c2a; border-color: #7a151f; color: #fff; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .e-btn.e-danger.e-active, .e-css.e-btn.e-danger.e-active { background: #a51c2a; border-color: #7a151f; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 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(217, 83, 79, 0.65); border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(255, 255, 255, 0.65); } .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: #fff; border-color: #ccc; box-shadow: none; color: #333; } .e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover { background: #e6e6e6; border-color: #adadad; box-shadow: none; color: #333; } .e-btn.e-flat:focus, .e-css.e-btn.e-flat:focus { background: #e6e6e6; border-color: #8c8c8c; color: #333; 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: #e6e6e6; border-color: #adadad; color: #333; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .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: #fff; border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(51, 51, 51, 0.65); } .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: #317ab9; border-color: #265f91; color: #fff; } .e-btn.e-flat.e-primary:hover, .e-css.e-btn.e-flat.e-primary:hover { background: #21527d; border-color: #163854; color: #fff; } .e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus { background: #21527d; border-color: #0c1d2c; 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: #21527d; border-color: #163854; color: #fff; } .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(49, 122, 185, 0.65); border-color: rgba(204, 204, 204, 0.65); 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: #218739; border-color: #175e28; color: #fff; } .e-btn.e-flat.e-success:hover, .e-css.e-btn.e-flat.e-success:hover { background: #124a1f; border-color: #08210e; box-shadow: none; color: #fff; } .e-btn.e-flat.e-success:focus, .e-css.e-btn.e-flat.e-success:focus { background: #124a1f; border-color: black; 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: #124a1f; border-color: #08210e; color: #fff; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .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(92, 184, 92, 0.65); border-color: rgba(204, 204, 204, 0.65); 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: #1b809e; border-color: #145d72; color: #fff; } .e-btn.e-flat.e-info:hover, .e-css.e-btn.e-flat.e-info:hover { background: #104b5d; border-color: #082831; box-shadow: none; color: #fff; } .e-btn.e-flat.e-info:focus, .e-css.e-btn.e-flat.e-info:focus { background: #104b5d; border-color: #010406; 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: #104b5d; border-color: #082831; color: #fff; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .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(91, 192, 222, 0.65); border-color: rgba(204, 204, 204, 0.65); 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: #aa6708; border-color: #794906; color: #fff; } .e-btn.e-flat.e-warning:hover, .e-css.e-btn.e-flat.e-warning:hover { background: #613b05; border-color: #301d02; box-shadow: none; color: #fff; } .e-btn.e-flat.e-warning:focus, .e-css.e-btn.e-flat.e-warning:focus { background: #613b05; border-color: black; 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: #613b05; border-color: #301d02; color: #fff; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .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(240, 173, 78, 0.65); border-color: rgba(204, 204, 204, 0.65); color: rgba(255, 255, 255, 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: #dc3243; border-color: #bb202f; color: #fff; } .e-btn.e-flat.e-danger:hover, .e-css.e-btn.e-flat.e-danger:hover { background: #a51c2a; border-color: #7a151f; box-shadow: none; color: #fff; } .e-btn.e-flat.e-danger:focus, .e-css.e-btn.e-flat.e-danger:focus { background: #a51c2a; border-color: #4e0d14; 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: #a51c2a; border-color: #7a151f; color: #fff; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .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(217, 83, 79, 0.65); border-color: rgba(204, 204, 204, 0.65); 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: #ccc; box-shadow: none; color: #333; } .e-btn.e-outline:hover, .e-css.e-btn.e-outline:hover { background: #e6e6e6; border-color: #adadad; box-shadow: none; color: #333; } .e-btn.e-outline:focus, .e-css.e-btn.e-outline:focus { 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: #e6e6e6; border-color: #adadad; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); color: #333; } .e-btn.e-outline:disabled, .e-css.e-btn.e-outline:disabled { background: transparent; border-color: rgba(204, 204, 204, 0.65); box-shadow: none; color: rgba(51, 51, 51, 0.65); } .e-btn.e-outline.e-primary, .e-css.e-btn.e-outline.e-primary { background: transparent; border-color: #317ab9; color: #317ab9; } .e-btn.e-outline.e-primary:hover, .e-css.e-btn.e-outline.e-primary:hover { background: #21527d; border-color: #265f91; 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: #21527d; border-color: #265f91; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 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(204, 204, 204, 0.65); box-shadow: none; color: rgba(51, 51, 51, 0.65); } .e-btn.e-outline.e-success, .e-css.e-btn.e-outline.e-success { background: transparent; border-color: #218739; color: #218739; } .e-btn.e-outline.e-success:hover, .e-css.e-btn.e-outline.e-success:hover { background: #124a1f; border-color: #08210e; 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: #124a1f; border-color: #08210e; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 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(33, 135, 57, 0.65); box-shadow: none; color: rgba(33, 135, 57, 0.65); } .e-btn.e-outline.e-info, .e-css.e-btn.e-outline.e-info { background: transparent; border-color: #1b809e; color: #1b809e; } .e-btn.e-outline.e-info:hover, .e-css.e-btn.e-outline.e-info:hover { background: #104b5d; border-color: #082831; 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: #104b5d; border-color: #082831; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 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(27, 128, 158, 0.65); box-shadow: none; color: rgba(27, 128, 158, 0.65); } .e-btn.e-outline.e-warning, .e-css.e-btn.e-outline.e-warning { background: transparent; border-color: #aa6708; color: #aa6708; } .e-btn.e-outline.e-warning:hover, .e-css.e-btn.e-outline.e-warning:hover { background: #613b05; border-color: #301d02; 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: #613b05; border-color: #301d02; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); color: #fff; } .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(170, 103, 8, 0.65); box-shadow: none; color: rgba(170, 103, 8, 0.65); } .e-btn.e-outline.e-danger, .e-css.e-btn.e-outline.e-danger { background: transparent; border-color: #dc3243; color: #dc3243; } .e-btn.e-outline.e-danger:hover, .e-css.e-btn.e-outline.e-danger:hover { background: #a51c2a; border-color: #7a151f; 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: #a51c2a; border-color: #7a151f; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 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, 50, 67, 0.65); box-shadow: none; color: rgba(220, 50, 67, 0.65); } .e-btn.e-link, .e-css.e-btn.e-link { background: transparent; border-color: transparent; border-radius: 0; box-shadow: none; color: #0d47a1; } .e-btn.e-link:hover, .e-css.e-btn.e-link:hover { border-radius: 0; color: #0a3576; text-decoration: underline; } .e-btn.e-link:focus, .e-css.e-btn.e-link:focus { border-radius: 0; text-decoration: underline; color: #0a3576; } .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: rgba(51, 51, 51, 0.65); 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: "\e21d"; } .e-checkbox-wrapper .e-stop::before, .e-css.e-checkbox-wrapper .e-stop::before { content: "\e99f"; } /*! 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 4px 0 #317ab9; } .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: 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: 1px solid; border-radius: 3px; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: "e-icons"; height: 20px; line-height: 18px; 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: 12px; line-height: 18px; } .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: #ccc; } .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: 12px; 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: 6px; line-height: 12px; } .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-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: 14px; line-height: 12px; width: 14px; } .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: #ccc; } .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: 6px; line-height: 12px; } .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: 16px; width: 18px; } .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: #fff; border-color: #ccc; } .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: 12px; line-height: 16px; } .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: 20px; width: 22px; } .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: #ccc; } .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: 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: 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: 20px; } .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: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: #fff; border-color: #ccc; } .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: 18px; line-height: 16px; 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: 12px; line-height: 16px; } .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 { /* stylelint-disable property-no-vendor-prefix */ -webkit-tap-highlight-color: transparent; } .e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { background-color: #fff; border-color: #ccc; } .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: #fff; border-color: #ccc; color: #555; } .e-checkbox-wrapper .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-frame.e-stop { background-color: #fff; border-color: #ccc; color: #555; } .e-checkbox-wrapper .e-ripple-element, .e-css.e-checkbox-wrapper .e-ripple-element { background: transparent; } .e-checkbox-wrapper .e-ripple-check .e-ripple-element, .e-css.e-checkbox-wrapper .e-ripple-check .e-ripple-element { background: transparent; } .e-checkbox-wrapper:active .e-ripple-element, .e-css.e-checkbox-wrapper:active .e-ripple-element { background: transparent; } .e-checkbox-wrapper:active .e-ripple-check