@syncfusion/ej2-angular-splitbuttons 20.2.43-ngcc → 20.2.45

package/styles/progress-button/material.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/material.scss';
+@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-buttons/styles/button/material-definition.scss';
+@import 'ej2-popups/styles/spinner/material-definition.scss';
+@import 'material-definition.scss';
+@import 'all.scss';

package/styles/progress-button/tailwind-dark.css

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);

package/styles/progress-button/tailwind-dark.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/tailwind-dark.scss';
+@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/tailwind-dark-definition.scss';
+@import 'tailwind-dark-definition.scss';
+@import 'all.scss';

package/styles/progress-button/tailwind.css

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
     transform: rotate(0);

package/styles/progress-button/tailwind.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/tailwind.scss';
+@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-definition.scss';
+@import 'ej2-popups/styles/spinner/tailwind-definition.scss';
+@import 'tailwind-definition.scss';
+@import 'all.scss';

package/styles/speed-dial/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/speed-dial/_bootstrap-dark-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_bootstrap-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_bootstrap4-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/speed-dial/_bootstrap5-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_fabric-dark-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_fabric-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/speed-dial/_fluent-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_fusionnew-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_highcontrast-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_highcontrast-light-definition.scss

@@ -0,0 +1,37 @@
+$fab-border-radius: 9999px !default;
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-offset: 10px !default;
+
+$fab-min-height: 40px !default;
+$fab-min-width: 40px !default;
+$fab-small-min-height: 32px !default;
+$fab-small-min-width: 32px !default;
+
+$fab-bigger-min-height: 56px !default;
+$fab-bigger-min-width: 56px !default;
+$fab-bigger-small-min-height: 40px !default;
+$fab-bigger-small-min-width: 40px !default;
+
+$fab-box-shadow: initial;
+
+$sd-offset: 10px !default;
+$sd-ul-margin: 0 !default;
+$sd-horz-ul-padding: 5px 0 !default;
+$sd-vert-ul-padding: 0 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 10px !default;
+$sd-li-text-padding: 3px !default;
+$sd-li-icon-min-height: 30px !default;
+$sd-li-icon-min-width: 30px !default;
+
+$sd-li-shadow-radius: 5px !default;
+
+$sd-overlay-bg: rgba(0, 0, 0, .1) !default;
+$sd-li-text-bg: rgb(255, 255, 255) !default;
+$sd-li-icon-bg: rgb(255, 255, 255) !default;
+$sd-li-text-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-li-icon-shadow: 0 0 $sd-li-shadow-radius rgb(128, 128, 128) !default;
+$sd-active-li-text-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;
+$sd-active-li-icon-shadow: 0 0 5px rgb(128, 128, 128), 0 0 $sd-li-shadow-radius rgb(128, 128, 128) inset !default;

package/styles/speed-dial/_layout.scss

@@ -0,0 +1,249 @@
+@include export-module('speed-dial-layout') {
+  .e-speeddial-popup {
+    overflow: hidden;
+    position: absolute;
+    z-index: 99999;
+
+    &.e-speeddial-top {
+      top: $sd-offset;
+
+      &.e-speeddial-radial .e-speeddial-li {
+        top: 0;
+      }
+
+      &.e-speeddial-radial.e-speeddial-middle .e-speeddial-li {
+        top: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset) - $sd-li-shadow-radius);
+      }
+
+      &.e-speeddial-middle,
+      &.e-speeddial-linear {
+        top: var(--speeddialVertDist);
+      }
+    }
+
+    &.e-speeddial-bottom {
+      bottom: $sd-offset;
+
+      &.e-speeddial-radial .e-speeddial-li {
+        bottom: 0;
+      }
+
+      &.e-speeddial-radial.e-speeddial-middle .e-speeddial-li {
+        bottom: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset) - $sd-li-shadow-radius);
+      }
+
+      &.e-speeddial-middle,
+      &.e-speeddial-linear {
+        bottom: var(--speeddialVertDist);
+      }
+    }
+
+    &.e-speeddial-left {
+      left: $sd-offset;
+
+      &.e-speeddial-radial .e-speeddial-li {
+        left: 0;
+      }
+
+      &.e-speeddial-radial.e-speeddial-center .e-speeddial-li {
+        left: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset) - $sd-li-shadow-radius);
+      }
+
+      &.e-speeddial-center,
+      &.e-speeddial-linear {
+        left: var(--speeddialHorzDist);
+      }
+    }
+
+    &.e-speeddial-right {
+      right: $sd-offset;
+
+      &.e-speeddial-radial .e-speeddial-li {
+        right: 0;
+      }
+
+      &.e-speeddial-radial.e-speeddial-center .e-speeddial-li {
+        right: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset) - $sd-li-shadow-radius);
+      }
+
+      &.e-speeddial-center,
+      &.e-speeddial-linear {
+        right: var(--speeddialHorzDist);
+      }
+    }
+
+    &.e-speeddial-template {
+      outline: none;
+    }
+
+    .e-speeddial-ul {
+      display: inline-flex;
+      flex-direction: column;
+      list-style-type: none;
+      margin: $sd-ul-margin;
+      padding: $sd-vert-ul-padding;
+    }
+
+    .e-speeddial-li {
+      align-items: center;
+      cursor: pointer;
+      display: inline-flex;
+      margin: $sd-vert-li-margin;
+      position: relative;
+    }
+
+    .e-speeddial-li-text {
+      margin: $sd-li-text-margin;
+      padding: $sd-li-text-padding;
+      white-space: nowrap;
+    }
+
+    .e-speeddial-li-icon {
+      border-radius: 99999px;
+      min-height: $sd-li-icon-min-height;
+      min-width: $sd-li-icon-min-width;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.e-speeddial-fixed {
+      position: fixed;
+    }
+
+    &.e-speeddial-vert-right .e-speeddial-li {
+      flex-direction: row-reverse;
+    }
+
+    &.e-speeddial-vert-bottom .e-speeddial-ul {
+      flex-direction: column-reverse;
+    }
+
+    &.e-speeddial-horz-right .e-speeddial-ul {
+      flex-direction: row-reverse;
+
+      &.e-speeddial-horz-top {
+        flex-direction: row;
+      }
+    }
+
+    &.e-speeddial-horz-left .e-speeddial-ul {
+      flex-direction: row;
+
+      &.e-speeddial-horz-top {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &.e-speeddial-horz-right,
+    &.e-speeddial-horz-left {
+      .e-speeddial-ul {
+        padding: $sd-horz-ul-padding;
+      }
+
+      .e-speeddial-li {
+        margin: $sd-horz-li-margin;
+      }
+    }
+
+    /* OVERFLOW CSS */
+    &.e-speeddial-overflow {
+      .e-speeddial-ul {
+        overflow: auto;
+        scroll-behavior: smooth;
+
+        /* Hide scrollbar for IE and Edge */
+        -ms-overflow-style: none;
+
+        /* Hide scrollbar for Firefox */
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+
+          /* Hide scrollbar for Chrome, Safari and Opera */
+          display: none;
+        }
+      }
+
+      &.e-speeddial-vert-overflow .e-speeddial-ul {
+        max-height: var(--speeddialOverflowLimit);
+      }
+
+      &.e-speeddial-horz-overflow .e-speeddial-ul {
+        max-width: var(--speeddialOverflowLimit);
+      }
+    }
+
+    &.e-speeddial-radial {
+      min-height: calc(var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinHeight));
+      min-width: calc(var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinWidth));
+
+      &.e-speeddial-middle {
+        min-height: calc(2 * var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinHeight));
+      }
+
+      &.e-speeddial-center {
+        min-width: calc(2 * var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinWidth));
+      }
+
+      &.e-speeddial-top-left {
+        border-bottom-right-radius: 100%;
+      }
+
+      &.e-speeddial-top-right {
+        border-bottom-left-radius: 100%;
+      }
+
+      &.e-speeddial-bottom-left {
+        border-top-right-radius: 100%;
+      }
+
+      &.e-speeddial-bottom-right {
+        border-top-left-radius: 100%;
+      }
+
+      .e-speeddial-ul {
+        border-radius: inherit;
+        min-height: inherit;
+        min-width: inherit;
+        padding: 0;
+        position: relative;
+      }
+
+      .e-speeddial-li {
+        position: absolute;
+        margin: $sd-li-shadow-radius;
+        transform: rotate(var(--speeddialRadialAngle)) translate(var(--speeddialRadialOffset)) rotate(calc(-1 * var(--speeddialRadialAngle)));
+      }
+    }
+
+    &.e-speeddial-radial,
+    &.e-speeddial-horz-right,
+    &.e-speeddial-horz-left {
+
+      .e-speeddial-li-text {
+        position: absolute;
+        visibility: hidden;
+      }
+    }
+  }
+
+  .e-speeddial-overlay {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 99998;
+
+    &.e-speeddial-fixed {
+      height: 100vh;
+      position: fixed;
+      width: 100vw;
+    }
+  }
+
+  .e-speeddial-hidden {
+    visibility: hidden;
+  }
+}