@syncfusion/blazor-themes 20.3.47 → 20.3.48

package/SCSS-Themes/material.scss

@@ -23886,6 +23886,8 @@ $btn-focus-box-shadow: none !default;
   }
 }
 
+
+
 $fab-offset: 16px !default;
 
 $fab-border-radius: 9999px !default;
@@ -24038,6 +24040,529 @@ $fab-box-shadow:  0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px rgba(0, 0, 0, .14
 
 
 
+
+$sd-offset: 16px !default;
+$sd-ul-margin: 0 !default;
+$sd-li-text-padding: 0 5px !default;
+
+//Distance between vertical menu and button => Ul bottom padding + li bottom margin
+//Distance between vertical menu item =>  li bottom margin + li top margin
+//Horizontal padding for vertical menu => ((fab wdith - li icon width)/2) - 1 px (for icon border)
+$sd-horz-ul-padding: 5px 5px !default;
+$sd-vert-ul-padding: 5px 5px !default;
+$sd-horz-li-margin: 0 5px !default;
+$sd-vert-li-margin: 5px 0 !default;
+$sd-li-text-margin: 0 8px !default;
+$sd-li-text-height: 26px !default;
+$sd-li-icon-height: 28px !default;
+$sd-li-icon-width: 28px !default;
+
+$sd-small-horz-ul-padding: 3px 5px !default;
+$sd-small-vert-ul-padding: 5px 3px !default;
+$sd-small-horz-li-margin: 0 5px !default;
+$sd-small-vert-li-margin: 5px 0 !default;
+$sd-small-li-text-margin: 0 8px !default;
+$sd-small-li-text-height: 22px !default;
+$sd-small-li-icon-height: 24px !default;
+$sd-small-li-icon-width: 24px !default;
+
+$sd-bigger-horz-ul-padding: 7px 6px !default;
+$sd-bigger-vert-ul-padding: 6px 7px !default;
+$sd-bigger-horz-li-margin: 0 6px !default;
+$sd-bigger-vert-li-margin: 6px 0 !default;
+$sd-bigger-li-text-margin: 0 12px !default;
+$sd-bigger-li-text-height: 32px !default;
+$sd-bigger-li-icon-height: 36px !default;
+$sd-bigger-li-icon-width: 36px !default;
+
+$sd-bigger-small-horz-ul-padding: 5px 5px !default;
+$sd-bigger-small-vert-ul-padding: 5px 5px !default;
+$sd-bigger-small-horz-li-margin: 0 5px !default;
+$sd-bigger-small-vert-li-margin: 5px 0 !default;
+$sd-bigger-small-li-text-margin: 0 10px !default;
+$sd-bigger-small-li-text-height: 30px !default;
+$sd-bigger-small-li-icon-height: 34px !default;
+$sd-bigger-small-li-icon-width: 34px !default;
+
+$sd-overlay-bg: rgba(107, 114, 128, .5) !default;
+$sd-li-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12) !default;
+
+$sd-li-bg: $grey-white !default;
+$sd-li-border-color: $grey-white !default;
+$sd-font-color: $base-font !default;
+
+$sd-disabled-li-bg: $grey-50 !default;
+$sd-disabled-li-border-color: $grey-50 !default;
+$sd-disabled-font-color: $sd-font-color !default;
+
+$sd-focus-li-bg: $grey-300 !default;
+$sd-focus-li-border-color: $grey-300 !default;
+$sd-focus-font-color: $sd-font-color !default;
+
+$sd-hover-li-bg: $grey-300 !default;
+$sd-hover-li-border-color: $grey-300 !default;
+$sd-hover-font-color: $sd-font-color !default;
+
+$sd-active-li-bg: $grey-400 !default;
+$sd-active-li-border-color: $grey-400 !default;
+$sd-active-font-color: $base-font !default;
+
+@include export-module('speed-dial-layout') {
+  .e-speeddial-popup {
+    pointer-events: none;
+    position: absolute;
+
+    &.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));
+      }
+
+      &.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));
+      }
+
+      &.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));
+      }
+
+      &.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));
+      }
+
+      &.e-speeddial-center,
+      &.e-speeddial-linear {
+        right: var(--speeddialHorzDist);
+      }
+    }
+
+    &.e-speeddial-template {
+      outline: none;
+      pointer-events: auto;
+      z-index: 100001;
+    }
+
+    &.e-speeddial-linear .e-speeddial-li {
+      margin: $sd-vert-li-margin;
+    }
+
+    .e-speeddial-ul {
+      box-sizing: border-box;
+      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;
+      pointer-events: auto;
+      position: relative;
+      z-index: 100001;
+
+      &:not(.e-speeddial-text-li) .e-speeddial-li-text {
+        margin: $sd-li-text-margin;
+      }
+    }
+
+    .e-speeddial-li-text {
+      border-radius: 2px;
+      border: 1px solid;
+      padding: $sd-li-text-padding;
+      white-space: nowrap;
+      height: $sd-li-text-height;
+      line-height: $sd-li-text-height;
+    }
+
+    .e-speeddial-li-icon {
+      border-radius: 99999px;
+      border: 1px solid;
+      height: $sd-li-icon-height;
+      width: $sd-li-icon-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 {
+      height: calc(var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinHeight));
+      width: calc(var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinWidth));
+
+      &.e-speeddial-middle {
+        height: calc(2 * var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinHeight));
+      }
+
+      &.e-speeddial-center {
+        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;
+        height: inherit;
+        width: inherit;
+        padding: 0;
+        position: relative;
+      }
+
+      .e-speeddial-li {
+        position: absolute;
+        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-small.e-speeddial-popup,
+  .e-small .e-speeddial-popup {
+    .e-speeddial-ul {
+      padding: $sd-small-vert-ul-padding;
+    }
+
+    &.e-speeddial-linear .e-speeddial-li {
+      margin: $sd-small-vert-li-margin;
+    }
+
+    .e-speeddial-li:not(.e-speeddial-text-li) .e-speeddial-li-text {
+      margin: $sd-small-li-text-margin;
+    }
+
+    .e-speeddial-li-text {
+      height: $sd-small-li-text-height;
+      line-height: $sd-small-li-text-height;
+    }
+
+    .e-speeddial-li-icon {
+      height: $sd-small-li-icon-height;
+      width: $sd-small-li-icon-width;
+    }
+
+    &.e-speeddial-horz-right,
+    &.e-speeddial-horz-left {
+      .e-speeddial-ul {
+        padding: $sd-small-horz-ul-padding;
+      }
+
+      .e-speeddial-li {
+        margin: $sd-small-horz-li-margin;
+      }
+    }
+  }
+
+  .e-bigger.e-speeddial-popup,
+  .e-bigger .e-speeddial-popup {
+    .e-speeddial-ul {
+      padding: $sd-bigger-vert-ul-padding;
+    }
+
+    &.e-speeddial-linear .e-speeddial-li {
+      margin: $sd-bigger-vert-li-margin;
+    }
+
+    .e-speeddial-li:not(.e-speeddial-text-li) .e-speeddial-li-text {
+      margin: $sd-bigger-li-text-margin;
+    }
+
+    .e-speeddial-li-text {
+      height: $sd-bigger-li-text-height;
+      line-height: $sd-bigger-li-text-height;
+    }
+
+    .e-speeddial-li-icon {
+      height: $sd-bigger-li-icon-height;
+      width: $sd-bigger-li-icon-width;
+    }
+
+    &.e-speeddial-horz-right,
+    &.e-speeddial-horz-left {
+      .e-speeddial-ul {
+        padding: $sd-bigger-horz-ul-padding;
+      }
+
+      .e-speeddial-li {
+        margin: $sd-bigger-horz-li-margin;
+      }
+    }
+  }
+
+  .e-bigger.e-small.e-speeddial-popup,
+  .e-bigger.e-small .e-speeddial-popup,
+  .e-bigger .e-small.e-speeddial-popup,
+  .e-small .e-bigger.e-speeddial-popup {
+    .e-speeddial-ul {
+      padding: $sd-bigger-small-vert-ul-padding;
+    }
+
+    &.e-speeddial-linear .e-speeddial-li {
+      margin: $sd-bigger-small-vert-li-margin;
+    }
+
+    .e-speeddial-li:not(.e-speeddial-text-li) .e-speeddial-li-text {
+      margin: $sd-bigger-li-text-margin;
+    }
+
+    .e-speeddial-li-text {
+      height: $sd-bigger-small-li-text-height;
+      line-height: $sd-bigger-small-li-text-height;
+    }
+
+    .e-speeddial-li-icon {
+      height: $sd-bigger-small-li-icon-height;
+      width: $sd-bigger-small-li-icon-width;
+    }
+
+    &.e-speeddial-horz-right,
+    &.e-speeddial-horz-left {
+      .e-speeddial-ul {
+        padding: $sd-bigger-small-horz-ul-padding;
+      }
+
+      .e-speeddial-li {
+        margin: $sd-bigger-small-horz-li-margin;
+      }
+    }
+  }
+
+  .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;
+  }
+}
+
+
+@include export-module('speed-dial-theme') {
+  .e-speeddial-overlay {
+    background-color: $sd-overlay-bg;
+  }
+
+  .e-speeddial-popup {
+    .e-speeddial-li {
+      color: $sd-font-color;
+
+      .e-speeddial-li-text {
+        box-shadow: $sd-li-shadow;
+        background-color: $sd-li-bg;
+        border-color: $sd-li-border-color;
+      }
+
+      .e-speeddial-li-icon {
+        box-shadow: $sd-li-shadow;
+        background-color: $sd-li-bg;
+        border-color: $sd-li-border-color;
+      }
+    }
+    .e-speeddial-li.e-disabled {
+      color: $sd-disabled-font-color;
+      .e-speeddial-li-text {
+        background-color: $sd-disabled-li-bg;
+        border-color: $sd-disabled-li-border-color;
+      }
+
+      .e-speeddial-li-icon {
+        background-color: $sd-disabled-li-bg;
+        border-color: $sd-disabled-li-border-color;
+      }
+    }
+
+    .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
+    .e-speeddial-li:focus:not(.e-disabled) {
+      color: $sd-focus-font-color;
+      .e-speeddial-li-text {
+        background-color: $sd-focus-li-bg;
+        border-color: $sd-focus-li-border-color;
+        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+          box-shadow: $sd-focus-box-shadow;
+        }
+      }
+
+      .e-speeddial-li-icon {
+        background-color: $sd-active-li-bg;
+        border-color: $sd-active-li-border-color;
+      }
+    }
+
+    .e-speeddial-li:not(.e-disabled):hover {
+      color: $sd-hover-font-color;
+      .e-speeddial-li-text {
+        background-color: $sd-hover-li-bg;
+        border-color: $sd-hover-li-border-color;
+      }
+
+      .e-speeddial-li-icon {
+        background-color: $sd-hover-li-bg;
+        border-color: $sd-hover-li-border-color;
+      }
+    }
+
+    .e-speeddial-li:not(.e-disabled):active {
+      color: $sd-active-font-color;
+      .e-speeddial-li-text {
+        background-color: $sd-active-li-bg;
+        border-color: $sd-active-li-border-color;
+      }
+
+      .e-speeddial-li-icon {
+        background-color: $sd-active-li-bg;
+        border-color: $sd-active-li-border-color;
+      }
+    }
+  }
+}
+
+
+
 /*! calendar material theme variables */
 $calendar-title-hover-color: rgba($grey-light-font, .75) !default;
 $calendar-icon-hover-color: rgba($grey-light-font, .75) !default;
@@ -39233,6 +39758,8 @@ $listview-template-multiline-avatar-top: 1.0666em !default;
 
 
 
+
+
 //default
 $range-bg-color: $grey-white !default;
 $range-primary-color: $primary !default;
@@ -55961,6 +56488,9 @@ $menu-header-icon-padding: 0 16px !default;
 
 
 
+
+
+
 
 
 
@@ -62264,6 +62794,23 @@ $listbox-filter-bigger-height: calc(100% - 50px) !default;
 
 
 
+//default
+//undefined
+//enddefault
+
+@include export-module('mention-layout') {
+
+  //default
+  //undefined
+  //enddefault
+}
+
+
+
+
+
+
+
 
 
 
@@ -67279,6 +67826,10 @@ $de-row-height-bottom-margin: 8px;
 
 
 
+
+
+
+
 
 
 
@@ -83248,6 +83799,9 @@ $btn-flat-primary-path-arc: none;
 
 
 
+
+
+
 
 
 
@@ -86345,6 +86899,9 @@ $rte-drop-text-mobile-width: 250px !default;
 
 
 
+
+
+
 
 
 
@@ -88882,6 +89439,9 @@ $bigger-column-menu-size: 38px !default;
 
 
 
+
+
+
 
 
 
@@ -92174,6 +92734,10 @@ $toast-title-font-weight: bold !default;
 
 
 
+
+
+
+
 
 
 
@@ -97929,6 +98493,10 @@ $timepicker-icon-bigger-small-font-size: 18px !default;
 
 
 
+
+
+
+
 
 
 
@@ -102372,6 +102940,10 @@ $field-list-adaptive-outerdiv-height: 195px !default;
 
 
 
+
+
+
+
 
 
 
@@ -106806,6 +107378,9 @@ $qrybldr-btngrp-brdr-radius: 2px !default;
 
 
 
+
+
+
 
 
 
@@ -107400,6 +107975,10 @@ $recurrence-week-position-min-width: 81px !default;
 
 
 
+
+
+
+
 
 
 
@@ -112854,6 +113433,19 @@ $schedule-tree-content-color: $shadow;
   }
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
 $image-editor-background: $grey-200 !default;
 $image-editor-border: 1px solid $grey-400 !default;
 $image-editor-toolbar-icon-color: $grey-600;
@@ -113389,6 +113981,7 @@ $image-editor-bigger-tbar-btn-fontsize: 18px !default;
   }
 }
 
+
 /*! AppBar component material theme definitions and variables */
 
 $appbar-bg-color-primary: $primary !default;

package/SCSS-Themes/navigations/appbar/bootstrap-dark.scss

@@ -1,3 +1,4 @@
+@import '../../base/bootstrap-dark.scss';
 /*! AppBar component bootstrap-dark theme definitions and variables */
 
 $appbar-bg-color-primary: $brand-primary !default;

package/SCSS-Themes/navigations/appbar/bootstrap.scss

@@ -1,3 +1,4 @@
+@import '../../base/bootstrap.scss';
 /*! AppBar component bootstrap theme definitions and variables */
 
 $appbar-bg-color-primary: $brand-primary !default;

package/SCSS-Themes/navigations/appbar/bootstrap4.scss

@@ -1,3 +1,4 @@
+@import '../../base/bootstrap4.scss';
 /*! AppBar component bootstrap4 theme definitions and variables */
 
 $appbar-bg-color-primary: $primary !default;

package/SCSS-Themes/navigations/appbar/bootstrap5-dark.scss

@@ -1,3 +1,4 @@
+@import '../../base/bootstrap5-dark.scss';
 /*! AppBar component bootstrap5 theme definitions and variables */
 
 $appbar-bg-color-primary: $primary !default;

package/SCSS-Themes/navigations/appbar/bootstrap5.scss

@@ -1,3 +1,4 @@
+@import '../../base/bootstrap5.scss';
 /*! AppBar component bootstrap5 theme definitions and variables */
 
 $appbar-bg-color-primary: $primary !default;