UNPKG

@syncfusion/ej2-buttons

Version:

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

636 lines (599 loc) 18.9 kB
/* Font Family */ /* border */ /* 0px */ /* 1px */ /* 1.5px */ /* 2px */ /* 3px */ /* 4px */ /* 5px */ /* 6px */ /* 7px */ /* 8px */ /* Radius */ /* 1px */ /* 2px */ /* 3px */ /* 4px */ /* 5px */ /* 6px */ /* 7px */ /* 8px */ /* 9px */ /* 10px */ /* 11px */ /* 12px */ /* 13px */ /* 14px */ /* 15px */ /* 16px */ /* 17px */ /* 18px */ /* 19px */ /* 20px */ /* 21px */ /* 22px */ /* 23px */ /* 24px */ /* 25px */ /* 26px */ /* 27px */ /* 28px */ /* 29px */ /* 30px */ /* 31px */ /* 32px */ /* 33px */ /* 34px */ /* 35px */ /* 36px */ /* 37px */ /* 38px */ /* 39px */ /* 40px */ /* 41px */ /* 42px */ /* 43px */ /* 44px */ /* 45px */ /* 46px */ /* 47px */ /* 48px */ /* 49px */ /* 50px */ /* 5em */ .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"; } .e-checkbox-wrapper, .e-css.e-checkbox-wrapper { cursor: pointer; display: inline-block; line-height: 1; outline: none; -webkit-user-select: none; -moz-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 { -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); } .e-checkbox-wrapper:active .e-frame, .e-css.e-checkbox-wrapper:active .e-frame { -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); } .e-checkbox-wrapper .e-ripple-container, .e-css.e-checkbox-wrapper .e-ripple-container { border-radius: 999px; 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: var(--e-font-family); font-size: 14px; font-weight: normal; line-height: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: normal; font-weight: 500; } .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: calc(var(--e-radius) * 0.25); -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: "e-icons"; height: 16px; line-height: 15px; padding: 0; text-align: center; vertical-align: middle; width: 16px; } .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: 10px; } .e-checkbox-wrapper .e-stop, .e-css.e-checkbox-wrapper .e-stop { font-size: 10px; line-height: 15px; } .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: var(--color-sf-text-input-bg-color); border-color: var(--color-sf-border); } .e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container, .e-css.e-checkbox-wrapper.e-rtl .e-frame + .e-ripple-container { left: -9px; right: auto; } .e-checkbox-wrapper.e-rtl .e-label, .e-css.e-checkbox-wrapper.e-rtl .e-label { margin-left: 0; margin-right: 8px; } .e-checkbox-wrapper.e-rtl .e-label + .e-frame, .e-css.e-checkbox-wrapper.e-rtl .e-label + .e-frame { margin: 0; } .e-checkbox-wrapper.e-rtl .e-checkbox + .e-label, .e-css.e-checkbox-wrapper.e-rtl .e-checkbox + .e-label { margin-left: 8px; margin-right: 0; } .e-checkbox-wrapper.e-small .e-frame, .e-css.e-checkbox-wrapper.e-small .e-frame { height: 12px; line-height: 11px; width: 12px; } .e-checkbox-wrapper.e-small .e-check, .e-css.e-checkbox-wrapper.e-small .e-check { font-size: 6px; } .e-checkbox-wrapper.e-small .e-stop, .e-css.e-checkbox-wrapper.e-small .e-stop { font-size: 6px; line-height: 11px; } .e-checkbox-wrapper.e-small .e-label, .e-css.e-checkbox-wrapper.e-small .e-label { font-size: 12px; line-height: 12px; } .e-checkbox-wrapper.e-small .e-ripple-container, .e-css.e-checkbox-wrapper.e-small .e-ripple-container { bottom: -13px; height: 30px; left: -13px; right: -13px; top: -13px; width: 30px; } .e-overlay .e-checkbox-wrapper.e-pointer-event .e-ripple-container { pointer-events: none; } .e-checkbox-wrapper.e-pointer-event .e-ripple-container { pointer-events: auto; } .e-checkbox-wrapper[readonly] { pointer-events: none; } .e-small .e-checkbox-wrapper .e-frame, .e-small.e-checkbox-wrapper .e-frame, .e-small .e-css.e-checkbox-wrapper .e-frame, .e-small.e-css.e-checkbox-wrapper .e-frame { height: 12px; line-height: 11px; width: 12px; } .e-small .e-checkbox-wrapper .e-frame:hover, .e-small.e-checkbox-wrapper .e-frame:hover, .e-small .e-css.e-checkbox-wrapper .e-frame:hover, .e-small.e-css.e-checkbox-wrapper .e-frame:hover { background-color: var(--color-sf-text-input-bg-color); border-color: var(--color-sf-border); } .e-small .e-checkbox-wrapper .e-check, .e-small.e-checkbox-wrapper .e-check, .e-small .e-css.e-checkbox-wrapper .e-check, .e-small.e-css.e-checkbox-wrapper .e-check { font-size: 6px; } .e-small .e-checkbox-wrapper .e-stop, .e-small.e-checkbox-wrapper .e-stop, .e-small .e-css.e-checkbox-wrapper .e-stop, .e-small.e-css.e-checkbox-wrapper .e-stop { font-size: 6px; line-height: 11px; } .e-small .e-checkbox-wrapper .e-label, .e-small.e-checkbox-wrapper .e-label, .e-small .e-css.e-checkbox-wrapper .e-label, .e-small.e-css.e-checkbox-wrapper .e-label { font-size: 12px; line-height: 12px; } .e-small .e-checkbox-wrapper .e-ripple-container, .e-small.e-checkbox-wrapper .e-ripple-container, .e-small .e-css.e-checkbox-wrapper .e-ripple-container, .e-small.e-css.e-checkbox-wrapper .e-ripple-container { bottom: -13px; height: 30px; left: -13px; right: -13px; top: -13px; width: 30px; } .e-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: var(--color-sf-text-input-bg-color); border-color: var(--color-sf-border); } .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: var(--color-sf-primary); border-color: var(--color-sf-primary); color: var(--color-sf-primary-text-color); } .e-checkbox-wrapper .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-frame.e-stop { background-color: var(--color-sf-primary); border-color: var(--color-sf-primary); color: var(--color-sf-primary-text-color); } .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 .e-ripple-element, .e-css.e-checkbox-wrapper:active .e-ripple-check .e-ripple-element { background: transparent; } .e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label { color: var(--color-sf-content-text-color); } .e-checkbox-wrapper .e-checkbox:focus + .e-frame, .e-checkbox-wrapper .e-checkbox:active + .e-frame, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame, .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame { background-color: var(--color-sf-text-input-bg-color); border-color: var(--color-sf-primary-border-color-pressed); -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); } .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check, .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check { background-color: var(--color-sf-primary); border-color: var(--color-sf-primary-border-color-hover); -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); color: var(--color-sf-primary-text-color); } .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop, .e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop { background-color: var(--color-sf-primary); border-color: var(--color-sf-primary-border-color-hover); -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary); color: var(--color-sf-primary-text-color); } .e-checkbox-wrapper:hover .e-frame, .e-css.e-checkbox-wrapper:hover .e-frame { background-color: var(--color-sf-text-input-bg-color); border-color: var(--color-sf-border); } .e-checkbox-wrapper:hover .e-frame.e-check, .e-css.e-checkbox-wrapper:hover .e-frame.e-check { background-color: var(--color-sf-primary); border-color: var(--color-sf-primary); color: var(--color-sf-primary-text-color); } .e-checkbox-wrapper:hover .e-frame.e-stop, .e-css.e-checkbox-wrapper:hover .e-frame.e-stop { color: var(--color-sf-primary-text-color); background-color: var(--color-sf-primary); border-color: var(--color-sf-primary); } .e-checkbox-wrapper:hover .e-label, .e-css.e-checkbox-wrapper:hover .e-label { color: var(--color-sf-content-text-color); } .e-checkbox-wrapper.e-checkbox-disabled .e-frame, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame { background-color: var(--color-sf-content-bg-color-disabled); border-color: var(--color-sf-border-disabled); color: var(--color-sf-content-text-color-disabled); } .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check { background-color: var(--color-sf-primary-light); border-color: var(--color-sf-primary-light); color: var(--color-sf-primary-text-color); } .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-stop, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-stop { background-color: var(--color-sf-primary-light); border-color: var(--color-sf-primary-light); color: var(--color-sf-primary-text-color); } .e-checkbox-wrapper.e-checkbox-disabled .e-label, .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-label { color: var(--color-sf-content-text-color-disabled); } .e-checkbox-wrapper.e-focus .e-ripple-container, .e-css.e-checkbox-wrapper.e-focus .e-ripple-container { background-color: transparent; } .e-checkbox-wrapper.e-focus .e-ripple-container.e-ripple-check, .e-css.e-checkbox-wrapper.e-focus .e-ripple-container.e-ripple-check { background-color: transparent; } .e-checkbox-wrapper.e-focus .e-frame, .e-checkbox-wrapper.e-focus .e-frame.e-check, .e-css.e-checkbox-wrapper.e-focus .e-frame, .e-css.e-checkbox-wrapper.e-focus .e-frame.e-check { outline: rgba(var(--color-sf-primary), 0.25); outline-offset: 0; } .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: 20px; line-height: 19px; width: 20px; } .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: var(--color-sf-primary); border-color: var(--color-sf-primary); } .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: 14px; } .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: 14px; line-height: 19px; } .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: 16px; line-height: 20px; } .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: 24px; line-height: 23px; width: 24px; } .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: 24px; 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: 16px; } .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: 16px; line-height: 23px; } .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: var(--color-sf-primary); border-color: var(--color-sf-primary); } .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: 20px; line-height: 19px; width: 20px; } .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: 14px; } .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: 14px; line-height: 19px; } .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: 16px; line-height: 20px; } .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; }