UNPKG

@syncfusion/ej2-buttons

Version:

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

1,845 lines (1,800 loc) 184 kB
/*! button layout */ .e-btn, .e-css.e-btn { /* stylelint-disable property-no-vendor-prefix */ -webkit-font-smoothing: antialiased; border: 1px solid; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14px; font-weight: 400; -ms-flex-pack: center; justify-content: center; line-height: 1.6em; outline: none; padding: 4px 8px; text-align: center; text-decoration: none; text-transform: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; } .e-btn:disabled, .e-css.e-btn:disabled { cursor: default; } .e-btn:hover, .e-btn:focus, .e-css.e-btn:hover, .e-css.e-btn:focus { text-decoration: none; } .e-btn::-moz-focus-inner, .e-css.e-btn::-moz-focus-inner { border: 0; padding: 0; } .e-btn .e-btn-icon, .e-css.e-btn .e-btn-icon { display: inline-block; font-size: 16px; margin-top: -2px; vertical-align: middle; width: 1em; } .e-btn .e-btn-icon.e-icon-left, .e-css.e-btn .e-btn-icon.e-icon-left { margin-left: -0.5em; width: 2em; } .e-btn .e-btn-icon.e-icon-right, .e-css.e-btn .e-btn-icon.e-icon-right { margin-right: -0.5em; width: 2em; } .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: 8px; 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: 8px; width: auto; } .e-btn.e-icon-btn, .e-css.e-btn.e-icon-btn { padding: 4px 11px; } .e-btn.e-top-icon-btn, .e-btn.e-bottom-icon-btn, .e-css.e-btn.e-top-icon-btn, .e-css.e-btn.e-bottom-icon-btn { line-height: 1; padding: 12px 12px; } .e-btn.e-round, .e-css.e-btn.e-round { border-radius: 50%; height: 32px; line-height: 1; padding: 0; width: 32px; } .e-btn.e-round .e-btn-icon, .e-css.e-btn.e-round .e-btn-icon { font-size: 16px; line-height: 1.5em; margin-top: 0; width: auto; } .e-btn.e-rtl .e-icon-right, .e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.5em; margin-right: 0; } .e-btn.e-rtl .e-icon-left, .e-css.e-btn.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.5em; } .e-btn.e-flat, .e-css.e-btn.e-flat { border: 1px solid; } .e-btn.e-small, .e-css.e-btn.e-small { font-size: 12px; line-height: 1.34em; padding: 4px 6px; border-radius: 2px; } .e-btn.e-small .e-btn-icon, .e-css.e-btn.e-small .e-btn-icon { font-size: 12px; width: 1em; } .e-btn.e-small .e-btn-icon.e-icon-left, .e-css.e-btn.e-small .e-btn-icon.e-icon-left { margin-left: -0.57143em; width: 2em; } .e-btn.e-small .e-btn-icon.e-icon-right, .e-css.e-btn.e-small .e-btn-icon.e-icon-right { margin-right: -0.57143em; width: 2em; } .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 7px; } .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: 26px; line-height: 1; padding: 0; width: 26px; border-radius: 50%; } .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; width: auto; } .e-btn.e-small.e-rtl .e-icon-right, .e-css.e-btn.e-small.e-rtl .e-icon-right { margin-left: -0.57143em; margin-right: 0; } .e-btn.e-small.e-rtl .e-icon-left, .e-css.e-btn.e-small.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.57143em; } .e-btn.e-block, .e-css.e-btn.e-block { display: block; width: 100%; } .e-small .e-btn, .e-small.e-btn, .e-small .e-css.e-btn, .e-small.e-css.e-btn { font-size: 12px; line-height: 1.34em; padding: 4px 6px; border-radius: 2px; } .e-small .e-btn .e-btn-icon, .e-small.e-btn .e-btn-icon, .e-small .e-css.e-btn .e-btn-icon, .e-small.e-css.e-btn .e-btn-icon { font-size: 12px; width: 1em; } .e-small .e-btn .e-btn-icon.e-icon-left, .e-small.e-btn .e-btn-icon.e-icon-left, .e-small .e-css.e-btn .e-btn-icon.e-icon-left, .e-small.e-css.e-btn .e-btn-icon.e-icon-left { margin-left: -0.57143em; width: 2em; } .e-small .e-btn .e-btn-icon.e-icon-right, .e-small.e-btn .e-btn-icon.e-icon-right, .e-small .e-css.e-btn .e-btn-icon.e-icon-right, .e-small.e-css.e-btn .e-btn-icon.e-icon-right { margin-right: -0.57143em; width: 2em; } .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 7px; } .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: 26px; line-height: 1; padding: 0; width: 26px; 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; width: auto; } .e-small .e-btn.e-rtl .e-icon-right, .e-small.e-btn.e-rtl .e-icon-right, .e-small .e-css.e-btn.e-rtl .e-icon-right, .e-small.e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.57143em; margin-right: 0; } .e-small .e-btn.e-rtl .e-icon-left, .e-small.e-btn.e-rtl .e-icon-left, .e-small .e-css.e-btn.e-rtl .e-icon-left, .e-small.e-css.e-btn.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.57143em; } .e-bigger.e-small .e-btn, .e-bigger.e-small .e-btn, .e-bigger.e-small .e-css.e-btn, .e-bigger.e-small.e-css.e-btn { font-size: 14px; line-height: 1.572em; padding: 5px 8px; } .e-bigger.e-small .e-btn .e-btn-icon, .e-bigger.e-small .e-btn .e-btn-icon, .e-bigger.e-small .e-css.e-btn .e-btn-icon, .e-bigger.e-small.e-css.e-btn .e-btn-icon { font-size: 20px; 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: 6px 13px; } .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: 34px; line-height: 1; padding: 0; width: 34px; } .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: 0; width: auto; } .e-bigger.e-small .e-btn.e-rtl .e-icon-right, .e-bigger.e-small .e-btn.e-rtl .e-icon-right, .e-bigger.e-small .e-css.e-btn.e-rtl .e-icon-right, .e-bigger.e-small.e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.5em; margin-right: 0; } .e-bigger.e-small .e-btn.e-rtl .e-icon-left, .e-bigger.e-small .e-btn.e-rtl .e-icon-left, .e-bigger.e-small .e-css.e-btn.e-rtl .e-icon-left, .e-bigger.e-small.e-css.e-btn.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.5em; } .e-bigger .e-btn, .e-bigger .e-btn, .e-bigger .e-css.e-btn, .e-bigger.e-css.e-btn { font-size: 16px; line-height: 1.5em; padding: 6px 12px; } .e-bigger .e-btn .e-btn-icon, .e-bigger .e-btn .e-btn-icon, .e-bigger .e-css.e-btn .e-btn-icon, .e-bigger.e-css.e-btn .e-btn-icon { font-size: 22px; 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: 6px 15px; } .e-bigger .e-btn.e-top-icon-btn, .e-bigger .e-btn.e-bottom-icon-btn, .e-bigger .e-btn.e-top-icon-btn, .e-bigger .e-btn.e-bottom-icon-btn, .e-bigger .e-css.e-btn.e-top-icon-btn, .e-bigger .e-css.e-btn.e-bottom-icon-btn, .e-bigger.e-css.e-btn.e-top-icon-btn, .e-bigger.e-css.e-btn.e-bottom-icon-btn { line-height: 1; padding: 16px 16px; } .e-bigger .e-btn.e-round, .e-bigger .e-btn.e-round, .e-bigger .e-css.e-btn.e-round, .e-bigger.e-css.e-btn.e-round { height: 38px; line-height: 1; padding: 0; width: 38px; } .e-bigger .e-btn.e-round .e-btn-icon, .e-bigger .e-btn.e-round .e-btn-icon, .e-bigger .e-css.e-btn.e-round .e-btn-icon, .e-bigger.e-css.e-btn.e-round .e-btn-icon { font-size: 22px; line-height: 0; width: auto; } .e-bigger .e-btn.e-rtl .e-icon-right, .e-bigger .e-btn.e-rtl .e-icon-right, .e-bigger .e-css.e-btn.e-rtl .e-icon-right, .e-bigger.e-css.e-btn.e-rtl .e-icon-right { margin-left: -0.6111em; margin-right: 0; } .e-bigger .e-btn.e-rtl .e-icon-left, .e-bigger .e-btn.e-rtl .e-icon-left, .e-bigger .e-css.e-btn.e-rtl .e-icon-left, .e-bigger.e-css.e-btn.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.6111em; } .e-bigger .e-btn.e-small, .e-bigger .e-btn.e-small, .e-bigger .e-css.e-btn.e-small, .e-bigger.e-css.e-btn.e-small { font-size: 14px; line-height: 1.572em; padding: 5px 8px; border-radius: 2px; } .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: 20px; 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: 6px 13px; } .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: 34px; line-height: 1; padding: 0; width: 34px; border-radius: 50%; } .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: 0; width: auto; } .e-bigger .e-btn.e-small.e-rtl .e-icon-right, .e-bigger .e-btn.e-small.e-rtl .e-icon-right, .e-bigger .e-css.e-btn.e-small.e-rtl .e-icon-right, .e-bigger.e-css.e-btn.e-small.e-rtl .e-icon-right { margin-left: -0.5em; margin-right: 0; } .e-bigger .e-btn.e-small.e-rtl .e-icon-left, .e-bigger .e-btn.e-small.e-rtl .e-icon-left, .e-bigger .e-css.e-btn.e-small.e-rtl .e-icon-left, .e-bigger.e-css.e-btn.e-small.e-rtl .e-icon-left { margin-left: 0; margin-right: -0.5em; } /*! button theme */ /* stylelint-disable property-no-vendor-prefix */ .e-btn, .e-css.e-btn { -webkit-tap-highlight-color: transparent; background: #6c757d; border-color: #6c757d; color: #fff; transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } .e-btn:hover, .e-css.e-btn:hover { background: #5c636a; border-color: #565e64; box-shadow: none; color: #fff; } .e-btn:focus, .e-css.e-btn:focus { background: #5c636a; border-color: #6c757d; color: #fff; outline: #6c757d 0 solid; outline-offset: 0; box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5); } .e-btn:active, .e-css.e-btn:active { background: #565e64; border-color: #51585e; color: #fff; outline: #6c757d 0 solid; outline-offset: 0; } .e-btn.e-active, .e-css.e-btn.e-active { background: #565e64; border-color: #51585e; color: #fff; } .e-btn:disabled, .e-btn.e-disabled, .e-css.e-btn:disabled, .e-css.e-btn.e-disabled { background: rgba(108, 117, 125, 0.65); border-color: rgba(108, 117, 125, 0.65); box-shadow: none; color: rgba(255, 255, 255, 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: #6c757d; border-color: #6c757d; color: #fff; } .e-btn.e-round:hover, .e-btn.e-round-edge:hover, .e-css.e-btn.e-round:hover, .e-css.e-btn.e-round-edge:hover { background: #5c636a; border-color: #565e64; color: #fff; } .e-btn.e-round:focus, .e-btn.e-round-edge:focus, .e-css.e-btn.e-round:focus, .e-css.e-btn.e-round-edge:focus { background: #5c636a; border-color: #6c757d; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075); color: #fff; 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: #565e64; border-color: #51585e; box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5); color: #fff; outline: #6c757d 0 solid; outline-offset: 0; } .e-btn.e-round:disabled, .e-btn.e-round.e-disabled, .e-btn.e-round-edge:disabled, .e-btn.e-round-edge.e-disabled, .e-css.e-btn.e-round:disabled, .e-css.e-btn.e-round.e-disabled, .e-css.e-btn.e-round-edge:disabled, .e-css.e-btn.e-round-edge.e-disabled { background: rgba(108, 117, 125, 0.65); border-color: rgba(108, 117, 125, 0.65); box-shadow: none; color: rgba(255, 255, 255, 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: #0d6efd; } .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: #198754; } .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: #0dcaf0; } .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: #ffc107; } .e-btn.e-round.e-warning:focus, .e-btn.e-round-edge.e-warning:focus, .e-css.e-btn.e-round.e-warning:focus, .e-css.e-btn.e-round-edge.e-warning:focus { outline: #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: #dc3545; } .e-btn.e-round.e-danger:focus, .e-btn.e-round-edge.e-danger:focus, .e-css.e-btn.e-round.e-danger:focus, .e-css.e-btn.e-round-edge.e-danger:focus { outline: #fff 0 solid; } .e-btn.e-primary, .e-css.e-btn.e-primary { background: #0d6efd; border-color: #0d6efd; color: #fff; } .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background: #0b5ed7; border-color: #0a58ca; box-shadow: none; color: #fff; } .e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus { background: #0b5ed7; border-color: #0d6efd; color: #fff; outline: #6c757d 0 solid; box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5); } .e-btn.e-primary:active, .e-css.e-btn.e-primary:active { background: #0a58ca; border-color: #0a53be; color: #fff; outline: #6c757d 0 solid; } .e-btn.e-primary.e-active, .e-css.e-btn.e-primary.e-active { background: #0a58ca; border-color: #0a53be; 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(13, 110, 253, 0.65); border-color: rgba(13, 110, 253, 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: #198754; border-color: #198754; color: #fff; } .e-btn.e-success:hover, .e-css.e-btn.e-success:hover { background: #157347; border-color: #146c43; box-shadow: none; color: #fff; } .e-btn.e-success:focus, .e-css.e-btn.e-success:focus { background: #157347; border-color: #198754; color: #fff; box-shadow: 0 0 0 4px rgba(60, 153, 110, 0.5); } .e-btn.e-success:active, .e-btn.e-success.e-active, .e-css.e-btn.e-success:active, .e-css.e-btn.e-success.e-active { background: #146c43; border-color: #13653f; color: #fff; } .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(25, 135, 84, 0.65); border-color: rgba(25, 135, 84, 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: #0dcaf0; border-color: #0dcaf0; color: #000; } .e-btn.e-info:hover, .e-css.e-btn.e-info:hover { background: #31d2f2; border-color: #25cff2; box-shadow: none; color: #000; } .e-btn.e-info:focus, .e-css.e-btn.e-info:focus { background: #31d2f2; border-color: #0dcaf0; color: #000; box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5); } .e-btn.e-info:active, .e-btn.e-info.e-active, .e-css.e-btn.e-info:active, .e-css.e-btn.e-info.e-active { background: #3dd5f3; color: #000; border-color: #25cff2; } .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(13, 202, 240, 0.65); border-color: rgba(13, 202, 240, 0.65); box-shadow: none; color: rgba(0, 0, 0, 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: #ffc107; border-color: #ffc107; color: #000; } .e-btn.e-warning:hover, .e-css.e-btn.e-warning:hover { background: #ffca2c; border-color: #ffc720; box-shadow: none; color: #000; } .e-btn.e-warning:focus, .e-css.e-btn.e-warning:focus { background: #ffca2c; border-color: #ffc107; color: #000; box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5); } .e-btn.e-warning:active, .e-btn.e-warning.e-active, .e-css.e-btn.e-warning:active, .e-css.e-btn.e-warning.e-active { background: #ffcd39; border-color: #ffc720; color: #000; } .e-btn.e-warning:disabled, .e-btn.e-warning.e-disabled, .e-css.e-btn.e-warning:disabled, .e-css.e-btn.e-warning.e-disabled { background: rgba(255, 193, 7, 0.65); border-color: rgba(255, 193, 7, 0.65); box-shadow: none; color: rgba(0, 0, 0, 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: #dc3545; border-color: #dc3545; color: #fff; } .e-btn.e-danger:hover, .e-css.e-btn.e-danger:hover { background: #bb2d3b; border-color: #b02a37; box-shadow: none; color: #fff; } .e-btn.e-danger:focus, .e-css.e-btn.e-danger:focus { background: #bb2d3b; border-color: #dc3545; color: #fff; box-shadow: 0 0 0 4px rgba(225, 83, 97, 0.5); } .e-btn.e-danger:active, .e-css.e-btn.e-danger:active { background: #b02a37; border-color: #a52834; color: #fff; } .e-btn.e-danger.e-active, .e-css.e-btn.e-danger.e-active { background: #b02a37; border-color: #a52834; color: #fff; } .e-btn.e-danger:disabled, .e-btn.e-danger.e-disabled, .e-css.e-btn.e-danger:disabled, .e-css.e-btn.e-danger.e-disabled { background: rgba(220, 53, 69, 0.65); border-color: rgba(220, 53, 69, 0.65); box-shadow: none; color: rgba(0, 0, 0, 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: transparent; border-color: transparent; box-shadow: none; color: #6c757d; } .e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover { background: #5c636a; border-color: #565e64; box-shadow: none; color: #fff; } .e-btn.e-flat:focus, .e-css.e-btn.e-flat:focus { background: #5c636a; border-color: #565e64; color: #fff; box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5); } .e-btn.e-flat:active, .e-btn.e-flat.e-active, .e-css.e-btn.e-flat:active, .e-css.e-btn.e-flat.e-active { background: #565e64; border-color: #51585e; color: #fff; } .e-btn.e-flat:disabled, .e-btn.e-flat.e-disabled, .e-css.e-btn.e-flat:disabled, .e-css.e-btn.e-flat.e-disabled { background: rgba(108, 117, 125, 0.65); border-color: rgba(108, 117, 125, 0.65); box-shadow: none; color: rgba(255, 255, 255, 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: transparent; border-color: transparent; color: #0d6efd; } .e-btn.e-flat.e-primary:hover, .e-css.e-btn.e-flat.e-primary:hover { background: #0b5ed7; border-color: #0a58ca; color: #fff; } .e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus { background: #0b5ed7; border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5); } .e-btn.e-flat.e-primary:active, .e-btn.e-flat.e-primary.e-active, .e-css.e-btn.e-flat.e-primary:active, .e-css.e-btn.e-flat.e-primary.e-active { background: #0a58ca; border-color: #0a53be; 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(13, 110, 253, 0.65); border-color: transparent; box-shadow: none; color: rgba(255, 255, 255, 0.65); } .e-btn.e-flat.e-primary .e-ripple-element, .e-css.e-btn.e-flat.e-primary .e-ripple-element { background: transparent; } .e-btn.e-flat.e-success, .e-css.e-btn.e-flat.e-success { background: transparent; border-color: transparent; color: #198754; } .e-btn.e-flat.e-success:hover, .e-css.e-btn.e-flat.e-success:hover { background: #157347; border-color: #146c43; box-shadow: none; color: #fff; } .e-btn.e-flat.e-success:focus, .e-css.e-btn.e-flat.e-success:focus { background: #157347; border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(60, 153, 110, 0.5); } .e-btn.e-flat.e-success:active, .e-btn.e-flat.e-success.e-active, .e-css.e-btn.e-flat.e-success:active, .e-css.e-btn.e-flat.e-success.e-active { background: #146c43; border-color: #13653f; color: #fff; } .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(25, 135, 84, 0.65); border-color: rgba(25, 135, 84, 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: transparent; border-color: transparent; color: #0dcaf0; } .e-btn.e-flat.e-info:hover, .e-css.e-btn.e-flat.e-info:hover { background: #31d2f2; border-color: #25cff2; box-shadow: none; color: #000; } .e-btn.e-flat.e-info:focus, .e-css.e-btn.e-flat.e-info:focus { background: #31d2f2; border-color: transparent; color: #000; box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5); } .e-btn.e-flat.e-info:active, .e-btn.e-flat.e-info.e-active, .e-css.e-btn.e-flat.e-info:active, .e-css.e-btn.e-flat.e-info.e-active { background: #3dd5f3; border-color: #25cff2; color: #000; } .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(13, 202, 240, 0.65); border-color: rgba(13, 202, 240, 0.65); color: rgba(0, 0, 0, 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: transparent; border-color: transparent; color: #ffc107; } .e-btn.e-flat.e-warning:hover, .e-css.e-btn.e-flat.e-warning:hover { background: #ffca2c; border-color: #ffc720; box-shadow: none; color: #000; } .e-btn.e-flat.e-warning:focus, .e-css.e-btn.e-flat.e-warning:focus { background: #ffca2c; border-color: transparent; color: #000; box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5); } .e-btn.e-flat.e-warning:active, .e-btn.e-flat.e-warning.e-active, .e-css.e-btn.e-flat.e-warning:active, .e-css.e-btn.e-flat.e-warning.e-active { background: #ffcd39; border-color: #ffc720; color: #000; } .e-btn.e-flat.e-warning:disabled, .e-btn.e-flat.e-warning.e-disabled, .e-css.e-btn.e-flat.e-warning:disabled, .e-css.e-btn.e-flat.e-warning.e-disabled { background: rgba(255, 193, 7, 0.65); border-color: rgba(255, 193, 7, 0.65); color: rgba(0, 0, 0, 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: transparent; border-color: transparent; color: #dc3545; } .e-btn.e-flat.e-danger:hover, .e-css.e-btn.e-flat.e-danger:hover { background: #bb2d3b; border-color: #b02a37; box-shadow: none; color: #fff; } .e-btn.e-flat.e-danger:focus, .e-css.e-btn.e-flat.e-danger:focus { background: #bb2d3b; border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(225, 83, 97, 0.5); } .e-btn.e-flat.e-danger:active, .e-btn.e-flat.e-danger.e-active, .e-css.e-btn.e-flat.e-danger:active, .e-css.e-btn.e-flat.e-danger.e-active { background: #b02a37; border-color: #a52834; color: #fff; } .e-btn.e-flat.e-danger:disabled, .e-btn.e-flat.e-danger.e-disabled, .e-css.e-btn.e-flat.e-danger:disabled, .e-css.e-btn.e-flat.e-danger.e-disabled { background: rgba(220, 53, 69, 0.65); border-color: rgba(220, 53, 69, 0.65); color: rgba(0, 0, 0, 0.65); } .e-btn.e-flat.e-danger .e-ripple-element, .e-css.e-btn.e-flat.e-danger .e-ripple-element { background: transparent; } .e-btn.e-outline, .e-css.e-btn.e-outline { background: transparent; border-color: #6c757d; box-shadow: none; color: #6c757d; } .e-btn.e-outline:hover, .e-css.e-btn.e-outline:hover { background: #5c636a; border-color: #565e64; box-shadow: none; color: #fff; } .e-btn.e-outline:focus, .e-css.e-btn.e-outline:focus { box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5); } .e-btn.e-outline:active, .e-btn.e-outline.e-active, .e-css.e-btn.e-outline:active, .e-css.e-btn.e-outline.e-active { background: #565e64; border-color: #51585e; color: #fff; } .e-btn.e-outline:disabled, .e-css.e-btn.e-outline:disabled { background: transparent; border-color: rgba(108, 117, 125, 0.65); color: #565e64; } .e-btn.e-outline.e-primary, .e-css.e-btn.e-outline.e-primary { background: transparent; border-color: #0d6efd; color: #0d6efd; } .e-btn.e-outline.e-primary:hover, .e-css.e-btn.e-outline.e-primary:hover { background: #0b5ed7; border-color: #0d6efd; color: #fff; } .e-btn.e-outline.e-primary:focus, .e-css.e-btn.e-outline.e-primary:focus { box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5); } .e-btn.e-outline.e-primary:active, .e-btn.e-outline.e-primary.e-active, .e-css.e-btn.e-outline.e-primary:active, .e-css.e-btn.e-outline.e-primary.e-active { background: #0d6efd; 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: rgba(13, 110, 253, 0.65); border-color: rgba(13, 110, 253, 0.65); box-shadow: none; color: rgba(255, 255, 255, 0.65); } .e-btn.e-outline.e-success, .e-css.e-btn.e-outline.e-success { background: transparent; border-color: #198754; color: #198754; border-color: #198754; color: #198754; } .e-btn.e-outline.e-success:hover, .e-css.e-btn.e-outline.e-success:hover { background: #157347; border-color: #146c43; color: #fff; } .e-btn.e-outline.e-success:focus, .e-css.e-btn.e-outline.e-success:focus { box-shadow: 0 0 0 4px rgba(60, 153, 110, 0.5); } .e-btn.e-outline.e-success:active, .e-btn.e-outline.e-success.e-active, .e-css.e-btn.e-outline.e-success:active, .e-css.e-btn.e-outline.e-success.e-active { background: #146c43; border-color: #13653f; 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: rgba(25, 135, 84, 0.65); border-color: rgba(25, 135, 84, 0.65); box-shadow: none; color: rgba(255, 255, 255, 0.65); } .e-btn.e-outline.e-info, .e-css.e-btn.e-outline.e-info { background: transparent; border-color: #0dcaf0; color: #0dcaf0; border-color: #0dcaf0; color: #0dcaf0; } .e-btn.e-outline.e-info:hover, .e-css.e-btn.e-outline.e-info:hover { background: #31d2f2; border-color: #25cff2; color: #000; } .e-btn.e-outline.e-info:focus, .e-css.e-btn.e-outline.e-info:focus { box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5); } .e-btn.e-outline.e-info:active, .e-btn.e-outline.e-info.e-active, .e-css.e-btn.e-outline.e-info:active, .e-css.e-btn.e-outline.e-info.e-active { background: #0dcaf0; color: #000; } .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: rgba(13, 202, 240, 0.65); border-color: rgba(13, 202, 240, 0.65); box-shadow: none; color: rgba(0, 0, 0, 0.65); } .e-btn.e-outline.e-warning, .e-css.e-btn.e-outline.e-warning { background: transparent; border-color: #ffc107; color: #ffc107; border-color: #ffc107; color: #ffc107; } .e-btn.e-outline.e-warning:hover, .e-css.e-btn.e-outline.e-warning:hover { background: #ffca2c; border-color: #ffc720; color: #000; } .e-btn.e-outline.e-warning:focus, .e-css.e-btn.e-outline.e-warning:focus { box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5); } .e-btn.e-outline.e-warning:active, .e-btn.e-outline.e-warning.e-active, .e-css.e-btn.e-outline.e-warning:active, .e-css.e-btn.e-outline.e-warning.e-active { background: #ffcd39; border-color: #ffc720; color: #000; } .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: rgba(255, 193, 7, 0.65); border-color: rgba(255, 193, 7, 0.65); box-shadow: none; color: rgba(0, 0, 0, 0.65); } .e-btn.e-outline.e-danger, .e-css.e-btn.e-outline.e-danger { background: transparent; border-color: #dc3545; color: #dc3545; border-color: #dc3545; color: #dc3545; } .e-btn.e-outline.e-danger:hover, .e-css.e-btn.e-outline.e-danger:hover { background: #bb2d3b; border-color: #b02a37; color: #fff; } .e-btn.e-outline.e-danger:focus, .e-css.e-btn.e-outline.e-danger:focus { box-shadow: 0 0 0 4px rgba(225, 83, 97, 0.5); } .e-btn.e-outline.e-danger:active, .e-btn.e-outline.e-danger.e-active, .e-css.e-btn.e-outline.e-danger:active, .e-css.e-btn.e-outline.e-danger.e-active { background: #b02a37; border-color: #a52834; 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: rgba(220, 53, 69, 0.65); border-color: rgba(220, 53, 69, 0.65); box-shadow: none; color: rgba(255, 255, 255, 0.65); } .e-btn.e-link, .e-css.e-btn.e-link { background: transparent; border-color: transparent; border-radius: 0; box-shadow: none; color: #0d6efd; } .e-btn.e-link:hover, .e-css.e-btn.e-link:hover { border-radius: 0; color: #0a58ca; text-decoration: underline; } .e-btn.e-link:focus, .e-css.e-btn.e-link:focus { border-radius: 0; text-decoration: underline; color: #0a58ca; } .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(108, 117, 125, 0.65); text-decoration: underline; 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: "\e727"; } .e-checkbox-wrapper .e-stop::before, .e-css.e-checkbox-wrapper .e-stop::before { content: "\e87f"; } /*! checkbox layout */ .e-checkbox-wrapper, .e-css.e-checkbox-wrapper { cursor: pointer; display: inline-block; line-height: 1; outline: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .e-checkbox-wrapper label, .e-css.e-checkbox-wrapper label { cursor: pointer; display: inline-block; line-height: 0; margin: 0; position: relative; white-space: nowrap; } .e-checkbox-wrapper:focus .e-frame, .e-checkbox-wrapper.e-focus .e-frame, .e-css.e-checkbox-wrapper:focus .e-frame, .e-css.e-checkbox-wrapper.e-focus .e-frame { box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); } .e-checkbox-wrapper .e-ripple-container, .e-css.e-checkbox-wrapper .e-ripple-container { border-radius: 50%; bottom: -9px; height: 36px; left: -9px; pointer-events: none; position: absolute; right: -9px; top: -9px; width: 36px; z-index: 1; } .e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label { cursor: pointer; display: inline-block; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14px; font-weight: normal; line-height: 14px; -webkit-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: normal; } .e-checkbox-wrapper .e-checkbox, .e-css.e-checkbox-wrapper .e-checkbox { height: 1px; opacity: 0; position: absolute; width: 1px; } .e-checkbox-wrapper .e-checkbox + .e-label, .e-css.e-checkbox-wrapper .e-checkbox + .e-label { margin-right: 8px; } .e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { border: 1px solid; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: "e-icons"; height: 14px; line-height: 12px; padding: 0; text-align: center; vertical-align: middle; width: 14px; } .e-checkbox-wrapper .e-frame + .e-label, .e-css.e-checkbox-wrapper .e-frame + .e-label { margin-left: 8px; } .e-checkbox-wrapper .e-frame + .e-ripple-container, .e-css.e-checkbox-wrapper .e-frame + .e-ripple-container { left: auto; } .e-checkbox-wrapper .e-check, .e-css.e-checkbox-wrapper .e-check { font-size: 8px; } .e-checkbox-wrapper .e-stop, .e-css.e-checkbox-wrapper .e-stop { font-size: 8px; line-height: 13px; } .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: #ced4da; } .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: 13px; 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: 13px; } .e-checkbox-wrapper.e-small .e-label, .e-css.e-checkbox-wrapper.e-small .e-label { font-size: 12px; 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: 13px; 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: #ced4da; } .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: 13px; } .e-small .e-checkbox-wrapper .e-label, .e-small.e-checkbox-wrapper .e-label, .e-small .e-css.e-checkbox-wrapper .e-label, .e-small.e-css.e-checkbox-wrapper .e-label { font-size: 12px; line-height: 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: 16px; line-height: 15px; width: 16px; } .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: #0d6efd; border-color: #0d6efd; } .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: 15px; } .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: 16px; } .e-bigger.e-small .e-checkbox-wrapper .e-ripple-container, .e-bigger.e-small.e-checkbox-wrapper .e-ripple-container, .e-bigger.e-small .e-css.e-checkbox-wrapper .e-ripple-container, .e-bigger.e-small.e-css.e-checkbox-wrapper .e-ripple-container { bottom: -16px; height: 38px; left: -16px; right: -16px; top: -16px; width: 38px; } .e-bigger .e-checkbox-wrapper .e-frame, .e-bigger.e-checkbox-wrapper .e-frame, .e-bigger .e-css.e-checkbox-wrapper .e-frame, .e-bigger.e-css.e-checkbox-wrapper .e-frame { height: 16px; line-height: 14px; width: 16px; } .e-bigger .e-checkbox-wrapper .e-frame:hover, .e-bigger.e-checkbox-wrapper .e-frame:hover, .e-bigger .e-css.e-checkbox-wrapper .e-frame:hover, .e-bigger.e-css.e-checkbox-wrapper .e-frame:hover { background-color: #fff; border-color: #ced4da; } .e-bigger .e-checkbox-wrapper .e-frame + .e-label, .e-bigger.e-checkbox-wrapper .e-frame + .e-label, .e-bigger .e-css.e-checkbox-wrapper .e-frame + .e-label, .e-bigger.e-css.e-checkbox-wrapper .e-frame + .e-label { font-size: 16px; line-height: 16px; margin-left: 12px; } .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: 10px; } .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: 10px; line-height: 14px; } .e-bigger .e-checkbox-wrapper .e-label, .e-bigger.e-checkbox-wrapper .e-label, .e-bigger .e-css.e-checkbox-wrapper .e-label, .e-bigger.e-css.e-checkbox-wrapper .e-label { font-size: 16px; } .e-bigger .e-checkbox-wrapper .e-ripple-container, .e-bigger.e-checkbox-wrapper .e-ripple-container, .e-bigger .e-css.e-checkbox-wrapper .e-ripple-container, .e-bigger.e-css.e-checkbox-wrapper .e-ripple-container { bottom: -15px; height: 38px; left: -15px; right: -15px; top: -15px; width: 38px; } .e-bigger .e-checkbox-wrapper.e-rtl .e-frame, .e-bigger.e-checkbox-wrapper.e-rtl .e-frame, .e-bigger .e-css.e-checkbox-wrapper.e-rtl .e-frame, .e-bigger.e-css.e-checkbox-wrapper.e-rtl .e-frame { margin: 0; } .e-bigger .e-checkbox-wrapper.e-rtl .e-frame:hover.e-check, .e-bigger.e-checkbox-wrapper.e-rtl .e-frame:hover.e-check, .e-bigger .e-css.e-checkbox-wrapper.e-rtl .e-frame:hover.e-check, .e-bigger.e-css.e-checkbox-wrapper.e-rtl .e-frame:hover.e-check { background-color: #0d6efd; border-color: #0d6efd; } .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: 12px; } .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: 16px; line-height: 15px; width: 16px; } .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: 15px; } .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: 16px; } .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: #ced4da; } .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: #0d6efd; border-color: #0d6efd; color: #fff; } .e-checkbox-wrapper .e-frame.e-st