@syncfusion/ej2-buttons
Version:
A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.
154 lines (146 loc) • 3.86 kB
CSS
.e-fab.e-btn {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 12px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
min-height: 40px;
min-width: 40px;
padding: 0 16px;
position: absolute;
z-index: 100000;
}
.e-fab.e-btn .e-btn-icon {
margin-top: 0;
font-size: 14px;
}
.e-fab.e-btn.e-icon-btn {
padding: 0;
}
.e-fab.e-btn.e-fab-fixed {
position: fixed;
}
.e-fab.e-btn.e-fab-top {
top: 16px;
}
.e-fab.e-btn.e-fab-top.e-fab-middle {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.e-fab.e-btn.e-fab-top.e-fab-middle.e-fab-left.e-fab-center {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.e-fab.e-btn.e-fab-bottom {
bottom: 16px;
}
.e-fab.e-btn.e-fab-left {
left: 16px;
}
.e-fab.e-btn.e-fab-left.e-fab-center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.e-fab.e-btn.e-fab-right {
right: 16px;
}
.e-rtl.e-fab.e-btn.e-fab-top {
top: 16px;
}
.e-rtl.e-fab.e-btn.e-fab-top.e-fab-middle {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.e-rtl.e-fab.e-btn.e-fab-top.e-fab-middle.e-fab-right.e-fab-center {
right: 50%;
top: 50%;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.e-rtl.e-fab.e-btn.e-fab-bottom {
bottom: 16px;
}
.e-rtl.e-fab.e-btn.e-fab-right {
right: 16px;
}
.e-rtl.e-fab.e-btn.e-fab-right.e-fab-center {
right: 50%;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.e-rtl.e-fab.e-btn.e-fab-left {
left: 16px;
}
.e-fab-hidden {
visibility: hidden;
}
.e-small.e-fab.e-btn,
.e-small .e-fab.e-btn {
border-radius: 8px;
min-height: 32px;
min-width: 32px;
padding: 0 12px;
}
.e-small.e-fab.e-btn.e-icon-btn,
.e-small .e-fab.e-btn.e-icon-btn {
padding: 0;
}
.e-small.e-fab.e-btn .e-btn-icon,
.e-small .e-fab.e-btn .e-btn-icon {
font-size: 12px;
}
.e-fab.e-btn {
-webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12);
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12);
}
.e-fab.e-btn:hover:not(:focus), .e-fab.e-btn:active, .e-fab.e-btn.e-active, .e-fab.e-btn:disabled {
-webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12);
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12);
}
.e-fab.e-btn:focus {
-webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12);
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12);
}
.e-bigger.e-fab.e-btn,
.e-bigger .e-fab.e-btn {
border-radius: 16px;
min-height: 56px;
min-width: 56px;
padding: 0 19px;
}
.e-bigger.e-fab.e-btn.e-icon-btn,
.e-bigger .e-fab.e-btn.e-icon-btn {
padding: 0;
}
.e-bigger.e-fab.e-btn .e-btn-icon,
.e-bigger .e-fab.e-btn .e-btn-icon {
font-size: 14px;
}
.e-bigger.e-small.e-fab.e-btn,
.e-bigger.e-small .e-fab.e-btn,
.e-bigger .e-small.e-fab.e-btn,
.e-small .e-bigger.e-fab.e-btn {
border-radius: 16px;
min-height: 48px;
min-width: 48px;
padding: 0 19px;
}
.e-bigger.e-small.e-fab.e-btn.e-icon-btn,
.e-bigger.e-small .e-fab.e-btn.e-icon-btn,
.e-bigger .e-small.e-fab.e-btn.e-icon-btn,
.e-small .e-bigger.e-fab.e-btn.e-icon-btn {
padding: 0;
}
.e-bigger.e-small.e-fab.e-btn .e-btn-icon,
.e-bigger.e-small .e-fab.e-btn .e-btn-icon,
.e-bigger .e-small.e-fab.e-btn .e-btn-icon,
.e-small .e-bigger.e-fab.e-btn .e-btn-icon {
font-size: 14px;
}