@syncfusion/blazor-themes 23.2.7 → 24.1.43

package/SCSS-Themes/inputs/color-picker/material.scss

@@ -1079,6 +1079,18 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.38px) !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+          &.e-color-picker {
+            width: 100% !important; /* stylelint-disable-line declaration-no-important */
+          }
+
+          &.e-colorpicker-popup {
+            width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+
       & .e-palette {
         & .e-tile {
           @if $skin-name == 'Material3' {
@@ -1089,6 +1101,14 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.38px) !default;
           }
           width: $cpicker-bigger-tile-size;
         }
+
+        @media only screen and (max-width: 600px) {
+          @if $skin-name == 'Material3' {
+            & .e-tile {
+              width: 33px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-hsv-container {
@@ -1129,6 +1149,14 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.38px) !default;
           }
         }
 
+        @media only screen and (max-width: 600px) {
+          & .e-preview-container {
+            @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+              margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
+
         & .e-colorpicker-slider {
           width: $cpicker-bigger-slider-container-width;
 
@@ -1230,6 +1258,14 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.38px) !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        & .e-input-container {
+          @if $skin-name == 'fabric' {
+            width: 89.8%;
+          }
+        }
+      }
+
       & .e-css.e-value-switch-btn,
       & .e-mode-switch-btn {
         padding: $cpicker-bigger-switch-btn-padding;

package/SCSS-Themes/inputs/color-picker/material3-dark.scss

@@ -1090,6 +1090,18 @@ $cpicker-bigger-popup-container-width: 390px !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+          &.e-color-picker {
+            width: 100% !important; /* stylelint-disable-line declaration-no-important */
+          }
+
+          &.e-colorpicker-popup {
+            width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+
       & .e-palette {
         & .e-tile {
           @if $skin-name == 'Material3' {
@@ -1100,6 +1112,14 @@ $cpicker-bigger-popup-container-width: 390px !default;
           }
           width: $cpicker-bigger-tile-size;
         }
+
+        @media only screen and (max-width: 600px) {
+          @if $skin-name == 'Material3' {
+            & .e-tile {
+              width: 33px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-hsv-container {
@@ -1140,6 +1160,14 @@ $cpicker-bigger-popup-container-width: 390px !default;
           }
         }
 
+        @media only screen and (max-width: 600px) {
+          & .e-preview-container {
+            @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+              margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
+
         & .e-colorpicker-slider {
           width: $cpicker-bigger-slider-container-width;
 
@@ -1241,6 +1269,14 @@ $cpicker-bigger-popup-container-width: 390px !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        & .e-input-container {
+          @if $skin-name == 'fabric' {
+            width: 89.8%;
+          }
+        }
+      }
+
       & .e-css.e-value-switch-btn,
       & .e-mode-switch-btn {
         padding: $cpicker-bigger-switch-btn-padding;

package/SCSS-Themes/inputs/color-picker/material3.scss

@@ -1090,6 +1090,18 @@ $cpicker-bigger-popup-container-width: 390px !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+          &.e-color-picker {
+            width: 100% !important; /* stylelint-disable-line declaration-no-important */
+          }
+
+          &.e-colorpicker-popup {
+            width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+
       & .e-palette {
         & .e-tile {
           @if $skin-name == 'Material3' {
@@ -1100,6 +1112,14 @@ $cpicker-bigger-popup-container-width: 390px !default;
           }
           width: $cpicker-bigger-tile-size;
         }
+
+        @media only screen and (max-width: 600px) {
+          @if $skin-name == 'Material3' {
+            & .e-tile {
+              width: 33px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-hsv-container {
@@ -1140,6 +1160,14 @@ $cpicker-bigger-popup-container-width: 390px !default;
           }
         }
 
+        @media only screen and (max-width: 600px) {
+          & .e-preview-container {
+            @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+              margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
+
         & .e-colorpicker-slider {
           width: $cpicker-bigger-slider-container-width;
 
@@ -1241,6 +1269,14 @@ $cpicker-bigger-popup-container-width: 390px !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        & .e-input-container {
+          @if $skin-name == 'fabric' {
+            width: 89.8%;
+          }
+        }
+      }
+
       & .e-css.e-value-switch-btn,
       & .e-mode-switch-btn {
         padding: $cpicker-bigger-switch-btn-padding;

package/SCSS-Themes/inputs/color-picker/tailwind-dark.scss

@@ -1081,6 +1081,18 @@ $cpicker-handler-tooltip-color: $white !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+          &.e-color-picker {
+            width: 100% !important; /* stylelint-disable-line declaration-no-important */
+          }
+
+          &.e-colorpicker-popup {
+            width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+
       & .e-palette {
         & .e-tile {
           @if $skin-name == 'Material3' {
@@ -1091,6 +1103,14 @@ $cpicker-handler-tooltip-color: $white !default;
           }
           width: $cpicker-bigger-tile-size;
         }
+
+        @media only screen and (max-width: 600px) {
+          @if $skin-name == 'Material3' {
+            & .e-tile {
+              width: 33px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-hsv-container {
@@ -1131,6 +1151,14 @@ $cpicker-handler-tooltip-color: $white !default;
           }
         }
 
+        @media only screen and (max-width: 600px) {
+          & .e-preview-container {
+            @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+              margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
+
         & .e-colorpicker-slider {
           width: $cpicker-bigger-slider-container-width;
 
@@ -1232,6 +1260,14 @@ $cpicker-handler-tooltip-color: $white !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        & .e-input-container {
+          @if $skin-name == 'fabric' {
+            width: 89.8%;
+          }
+        }
+      }
+
       & .e-css.e-value-switch-btn,
       & .e-mode-switch-btn {
         padding: $cpicker-bigger-switch-btn-padding;

package/SCSS-Themes/inputs/color-picker/tailwind.scss

@@ -1081,6 +1081,18 @@ $cpicker-handler-tooltip-color: $white !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+          &.e-color-picker {
+            width: 100% !important; /* stylelint-disable-line declaration-no-important */
+          }
+
+          &.e-colorpicker-popup {
+            width: calc(100% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+
       & .e-palette {
         & .e-tile {
           @if $skin-name == 'Material3' {
@@ -1091,6 +1103,14 @@ $cpicker-handler-tooltip-color: $white !default;
           }
           width: $cpicker-bigger-tile-size;
         }
+
+        @media only screen and (max-width: 600px) {
+          @if $skin-name == 'Material3' {
+            & .e-tile {
+              width: 33px !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-hsv-container {
@@ -1131,6 +1151,14 @@ $cpicker-handler-tooltip-color: $white !default;
           }
         }
 
+        @media only screen and (max-width: 600px) {
+          & .e-preview-container {
+            @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+              margin-left: 4.6% !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
+
         & .e-colorpicker-slider {
           width: $cpicker-bigger-slider-container-width;
 
@@ -1232,6 +1260,14 @@ $cpicker-handler-tooltip-color: $white !default;
         }
       }
 
+      @media only screen and (max-width: 600px) {
+        & .e-input-container {
+          @if $skin-name == 'fabric' {
+            width: 89.8%;
+          }
+        }
+      }
+
       & .e-css.e-value-switch-btn,
       & .e-mode-switch-btn {
         padding: $cpicker-bigger-switch-btn-padding;

package/SCSS-Themes/inputs/data-form/bootstrap-dark.scss

@@ -0,0 +1,307 @@
+/*! Form bootstrap theme wise override definitions and variables */
+
+// form field styles
+$field-label-color: $grey-light-font !default;
+$field-label-font-size: 12px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 400 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 5px !default;
+
+// group title styles
+$group-title-color: $grey-light-font !default;
+$group-title-border-color: $grey-base !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 4px !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: darken($brand-danger, 25%) !default;
+$form-tooltip-color:lighten($brand-danger, 30%) !default;
+$form-validation-message-font-size: 12px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;
+
+@include export-module('data-form-layout') {
+
+  /*! data-form layout */
+  #{&}.e-data-form {
+
+    #{if(&, '&', '*')} .e-form-label {
+      font-size: $field-label-font-size;
+      margin-bottom: $field-label-margin-bottom;
+      font-weight: $field-label-font-weight;
+    }
+
+    #{if(&, '&', '*')} .e-form-layout {
+      display: grid;
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-grid-col-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    #{if(&, '&', '*')} .e-colspan-1 {
+      grid-column: span 1/span 1;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-2 {
+      grid-column: span 2/span 2;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-3 {
+      grid-column: span 3/span 3;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-4 {
+      grid-column: span 4/span 4;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-5 {
+      grid-column: span 5/span 5;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-6 {
+      grid-column: span 6/span 6;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-7 {
+      grid-column: span 7/span 7;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-8 {
+      grid-column: span 8/span 8;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-9 {
+      grid-column: span 9/span 9;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-10 {
+      grid-column: span 10/span 10;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-11 {
+      grid-column: span 11/span 11;
+    }
+
+    #{if(&, '&', '*')} .e-colspan-12 {
+      grid-column: span 12/span 12;
+    }
+
+    
+
+    .e-label-left {
+
+      .e-form-item-wrapper {
+        flex: 1 1 auto;
+        max-width: calc(75% - 12px);
+      }
+
+      .e-form-label {
+        margin-right: 12px;
+        width: 25%;
+        text-align: end;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: flex-start;
+      }
+
+      .validation-message {
+        display: flex;
+      }
+    }
+
+    #{if(&, '&', '*')} .e-form-group {
+      border: $form-group-border-none;
+      padding: $form-padding-zero;
+      margin: $form-margin-zero;
+
+      #{if(&, '&', '*')} .e-group-title {
+        position: $form-group-title-position;
+        display: $form-group-title-display;
+        padding-bottom: $form-group-title-padding-bottom;
+
+        /* Gap between text and border */
+        margin-bottom: $form-group-title-margin-bottom;
+        font-size: $form-group-title-font-size;
+
+        #{if(&, '&', '*')}::after {
+          content: '';
+          position: $form-group-title-border-position;
+          bottom: $form-group-title-border-bottom;
+          left: $form-group-title-border-left;
+          width: $form-group-title-border-width;
+          height: $form-group-title-border-height;
+          border-bottom: $form-group-title-border-bottom-style;
+        }
+      }
+    }
+
+    #{if(&, '&', '*')} .e-label-top {
+      display: $form-display-flex;
+      flex-direction: $form-label-top-direction;
+      margin-top: $form-layout-margin-top;
+
+      .e-label-right {
+        display: flex;
+        align-items: center;
+  
+        .e-switch-wrapper + .e-form-label {
+          margin-top: 3px;
+          margin-left: 5px;
+        }
+    
+        .e-checkbox-wrapper + .e-form-label {
+          margin-top: $field-label-right-margin-top;
+        }
+      }
+    }
+
+    #{if(&, '&', '*')} .e-label-left {
+      display: $form-display-flex;
+      text-align: $form-label-text-align;
+      margin-top: $form-layout-margin-top;
+    }
+
+    #{if(&, '&', '*')} .e-button-left {
+      justify-content: $form-button-left-justify;
+    }
+
+    #{if(&, '&', '*')} .e-button-right {
+      justify-content: $form-button-right-justify;
+    }
+
+    #{if(&, '&', '*')} .e-button-center {
+      justify-content: $form-button-center-justify;
+    }
+
+    #{if(&, '&', '*')} .e-button-left,
+    #{if(&, '&', '*')} .e-button-right,
+    #{if(&, '&', '*')} .e-button-center,
+    #{if(&, '&', '*')} .e-button-stretch {
+      margin-top: 24px;
+      display: $form-display-flex;
+      gap: 10px;
+
+      #{if(&, '&', '*')} .e-btn {
+        border-radius: $form-button-border-radius;
+        padding: $form-button-padding;
+      }
+    }
+
+    #{if(&, '&', '*')} .e-button-stretch {
+      #{if(&, '&', '*')} .e-btn {
+        width: 100%;
+      }
+    }
+
+    > :first-child.e-form-layout {
+      margin-top: 0;
+    }
+
+    #{if(&, '&', '*')} .e-form-group-layout {
+      display: grid;
+    }
+  }
+}
+
+
+@include export-module('data-form-theme') {
+
+  /*! data-form theme */
+  #{&}.e-data-form {
+
+    #{if(&, '&', '*')} .e-form-label {
+      color: $field-label-color;
+    }
+
+    #{if(&, '&', '*')} .e-group-title {
+      color: $group-title-color;
+    }
+
+    #{if(&, '&', '*')} .validation-message {
+      color: $form-tooltip-color;
+      font-size: $form-validation-message-font-size;
+      font-style: italic;
+    }
+  }
+
+  #{&}.e-tooltip-wrap.e-popup.e-error-tooltip {
+    background-color: $form-tooltip-background-color;
+    border: $form-tooltip-background-color;
+
+    #{if(&, '&', '*')} .e-tip-content .validation-message {
+      color: $form-tooltip-color;
+    }
+
+    #{if(&, '&', '*')} .e-arrow-tip {
+
+      #{if(&, '&', '*')} .e-arrow-tip-outer.e-tip-top,
+      #{if(&, '&', '*')} .e-arrow-tip-inner.e-tip-top {
+        border-bottom-color: $form-tooltip-background-color;
+        color: $form-tooltip-background-color;
+      }
+    }
+  }
+}
+