@syncfusion/ej2-material3-dark-theme 34.1.32 → 34.2.2

package/styles/document-editor/document-editor.css

@@ -2409,6 +2409,28 @@ label[for*=_wholeWord_e-de-rtl] {
   padding: 0;
   width: 18px;
 }
+.e-de-image-property-input {
+  width: 100%;
+}
+.e-de-cell-margin-input {
+  width: 48px;
+}
+.e-de-border-style-svg {
+  width: 98%;
+}
+.e-de-cell-margin-textbox {
+  width: 100%;
+}
+.e-de-gallery-normal {
+  font-family: Calibri;
+  font-size: 11pt;
+}
+.e-de-gallery-heading1 {
+  font-family: "Calibri Light";
+  font-size: 16pt;
+  color: rgb(47, 84, 150);
+  font-weight: bold;
+}
 .e-de-cp-option.e-btn.e-icon-btn span {
   margin-top: 0;
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));

package/styles/document-editor-container/_material3-dark-definition.scss

@@ -87,7 +87,7 @@ $de-pagenumber-text-border-radius: 2px;
 $de-pagenumber-text-margin-top: -3px;
 $e-de-pagenumber-input-margin-left: -2px;
 $e-de-ctnr-pg-no-spellout-padd-top: 7px;
-$e-de-ctnr-pg-no-spellout-padd-top-big: 10px;
+$e-de-ctnr-pg-no-spellout-padd-top-big: 7px;
 $e-de-status-bar-padding-top: 1px;
 $e-de-status-bar-big-padding-top: 1px;
 $e-de-review-pane-width: 380px;

package/styles/document-editor-container/document-editor-container.css

@@ -1286,7 +1286,7 @@
   display: inline-flex;
   font-size: 16px;
   height: 100%;
-  padding-top: 10px;
+  padding-top: 7px;
   width: calc(100% - 180px);
 }
 .e-bigger .e-de-statusbar-zoom-spell {

package/styles/excel-filter/_bigger.scss

@@ -28,6 +28,10 @@
           padding: 0 36px 0 0;
         }
       }
+      
+      .e-contextmenu-container ul:not(.e-ul) {
+        max-width: 100%;
+      }
     }
   }
 
@@ -202,7 +206,7 @@
     &.e-dialog .e-dlg-content {
       padding-left: $grid-bigger-checkbox-content-padding-left;
       @if $grid-xlfl-skin == 'fluent2' {
-        padding-right: 24px;
+        padding-right: 7px;
       }
     }
   

package/styles/excel-filter/excel-filter.css

@@ -269,6 +269,9 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-color: rgba(var(--color-sf-primary));
 }
 /*! Excel-Filter bigger */
+.sf-grid .e-excelfilter.e-bigger .e-contextmenu-container ul:not(.e-ul) {
+  max-width: 100%;
+}
 .e-bigger .sf-grid .e-contextmenu-container ul .e-menu-item.e-menu-item .e-caret {
   line-height: 40px;
 }

package/styles/form-renderer/_all.scss

@@ -0,0 +1,2 @@
+@forward 'layout';
+@forward 'theme';

package/styles/form-renderer/_layout.scss

@@ -0,0 +1,480 @@
+@use 'variables' as *;
+@use 'mixin' as *;
+
+@include export-module('form-renderer-theme') {
+  .form-renderer-container {
+    padding: 2rem;
+  }
+
+  .form-renderer-container hr {
+    border: none;
+    height: .5px;
+    margin: 0;
+  }
+
+  .form-renderer {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    /* stylelint-disable-next-line property-no-unknown */
+    container-type: inline-size;
+  }
+
+  .form-renderer.twolayout {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+
+  .form-renderer.threelayout {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+
+  .form-renderer.fourlayout {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.5rem;
+  }
+
+  .form-renderer.twolayout > .form-group:has(.e-btn),
+  .form-renderer.threelayout > .form-group:has(.e-btn),
+  .form-renderer.fourlayout > .form-group:has(.e-btn) {
+    align-self: flex-end;
+  }
+
+  .form-renderer.twolayout > .form-group:has(.e-message),
+  .form-renderer.threelayout > .form-group:has(.e-message),
+  .form-renderer.fourlayout > .form-group:has(.e-message) {
+    align-self: flex-end;
+  }
+
+  .form-renderer.twolayout > .form-group:has(.e-checkbox),
+  .form-renderer.threelayout > .form-group:has(.e-checkbox),
+  .form-renderer.fourlayout > .form-group:has(.e-checkbox) {
+    align-self: flex-end;
+  }
+
+  .form-renderer.twolayout > .form-group:has(.e-switch),
+  .form-renderer.threelayout > .form-group:has(.e-switch),
+  .form-renderer.fourlayout > .form-group:has(.e-switch) {
+    align-self: flex-end;
+  }
+
+  .form-renderer.twolayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
+  .form-renderer.threelayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
+  .form-renderer.fourlayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)) {
+    grid-column: 1 / -1;
+  }
+
+  .form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type),
+  .form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
+  .form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type),
+  .form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
+  .form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type),
+  .form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type) {
+    grid-column: auto;
+  }
+
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (max-width: 768px) {
+    .form-renderer.fourlayout {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .form-renderer.threelayout {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (max-width: 480px) {
+    .form-renderer.twolayout,
+    .form-renderer.threelayout,
+    .form-renderer.fourlayout {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .e-form-renderer .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  .e-form-renderer .field-wrapper {
+    display: flex;
+    width: 100%;
+  }
+
+  .e-form-renderer .field-wrapper.label-top {
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  .e-form-renderer .field-wrapper.label-bottom {
+    flex-direction: column-reverse;
+    gap: .5rem;
+  }
+
+  .e-form-renderer .field-wrapper.label-left {
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .e-form-renderer .field-wrapper.label-right {
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: 1rem;
+    justify-content: flex-end;
+  }
+
+  .e-form-renderer .field-wrapper.label-left .field-input,
+  .e-form-renderer .field-wrapper.label-right .field-input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .e-form-renderer .field-wrapper:has(.e-small) .field-label {
+    font-size: .75rem;
+  }
+
+  .e-form-renderer .form-group .field-description {
+    font-size: .75rem;
+  }
+
+  .e-form-renderer .form-group:has(.e-small) .field-description {
+    font-size: .625rem;
+  }
+
+  .e-form-renderer .field-wrapper:has(.e-bigger) .field-label {
+    font-size: 1rem;
+  }
+
+  .e-form-renderer .form-group:has(.e-bigger) .field-description {
+    font-size: .875rem;
+  }
+
+  .e-form-renderer .field-label {
+    font-size: .875rem;
+    font-weight: 500;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .e-form-renderer .field-label .required-asterisk {
+    margin-left: 2px;
+  }
+
+  .e-form-renderer .field-label .tooltip-icon {
+    cursor: help;
+    font-size: .875rem;
+  }
+
+  .e-form-renderer .field-input {
+    width: 100%;
+  }
+
+  .e-form-renderer .field-input .e-image-editor {
+    min-height: 250px;
+  }
+
+  .e-form-renderer .field-input .e-switch-wrapper,
+  .e-form-renderer .field-input .e-checkbox-wrapper {
+    margin: 5px 0;
+  }
+
+  .e-form-renderer .field-error {
+    font-size: .75rem;
+    margin-top: .25rem;
+    display: block;
+  }
+
+  .form-renderer-container .e-radio-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-renderer-container .e-radio-group .e-radio + label {
+    margin-left: .5rem;
+  }
+
+  .e-form-renderer .form-panel-renderer {
+    border: none;
+    border-radius: 8px;
+    padding: 0;
+  }
+
+  .e-form-renderer .form-panel-renderer:has(.panel-legend) {
+    padding: 1.5rem;
+  }
+
+  .e-form-renderer .form-panel-renderer legend {
+    font-size: 1.5rem;
+    font-weight: 600;
+    padding-bottom: 1.5rem;
+  }
+
+  .e-form-renderer .form-panel-renderer .panel-legend {
+    font-size: 1.5rem;
+    font-weight: 600;
+    padding: 0 .5rem;
+    margin-bottom: 0;
+    border-bottom: none;
+    width: unset;
+  }
+
+  .e-form-renderer .panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+  }
+
+  .e-form-renderer .card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .e-form-renderer .form-table-renderer {
+    width: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .e-form-renderer .form-table-renderer {
+    display: table;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .e-form-renderer .form-table-renderer .e-form-table-row {
+    display: table-row;
+    background: transparent;
+  }
+
+  .e-form-renderer .form-table-renderer .e-form-table-cell {
+    display: table-cell;
+    padding: 12px;
+    vertical-align: top;
+  }
+
+  .e-form-renderer .e-form-table-cell:last-child {
+    border-right: none;
+  }
+
+  .e-form-renderer .form-table-renderer .e-form-table-row:last-child .e-form-table-cell {
+    border-bottom: none;
+  }
+
+  .e-form-renderer .e-form-table-cell > .form-table-renderer,
+  .e-form-renderer .e-form-table-cell > .form-tabs-renderer,
+  .e-form-renderer .e-form-table-cell > .form-card-renderer,
+  .e-form-renderer .e-form-table-cell > .form-panel-renderer,
+  .e-form-renderer .e-form-table-cell > .form-group {
+    margin-bottom: 1.5rem;
+  }
+
+  .e-form-renderer .e-form-table-cell > .form-table-renderer:last-child,
+  .e-form-renderer .e-form-table-cell > .form-tabs-renderer:last-child,
+  .e-form-renderer .e-form-table-cell > .form-card-renderer:last-child,
+  .e-form-renderer .e-form-table-cell > .form-panel-renderer:last-child,
+  .e-form-renderer .e-form-table-cell > .form-group:last-child {
+    margin-bottom: 0;
+  }
+
+  .e-form-renderer .form-table-renderer .col,
+  .e-form-renderer .form-table-renderer [class ^= 'col-'] {
+    min-height: 100%;
+    vertical-align: top;
+  }
+
+  .e-form-renderer .form-table-renderer .col {
+    width: auto;
+  }
+
+  .e-form-renderer .form-table-renderer .col-1 {
+    width: 8.33333333%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-2 {
+    width: 16.66666667%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-3 {
+    width: 25%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-4 {
+    width: 33.33333333%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-5 {
+    width: 41.66666667%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-6 {
+    width: 50%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-7 {
+    width: 58.33333333%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-8 {
+    width: 66.66666667%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-9 {
+    width: 75%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-10 {
+    width: 83.33333333%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-11 {
+    width: 91.66666667%;
+  }
+
+  .e-form-renderer .form-table-renderer .col-12 {
+    width: auto;
+  }
+
+  /* Tabs Layout */
+  .e-form-renderer .form-tabs-renderer {
+    width: 100%;
+  }
+
+  .e-form-renderer .tab-content-renderer {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .e-form-renderer .form-submit-button {
+    margin-top: 1.5rem;
+    align-self: flex-start;
+  }
+
+  .e-form-renderer .field-input .e-input-group,
+  .e-form-renderer .field-input .e-control-wrapper {
+    width: 100%;
+  }
+
+  .e-form-renderer .field-input .e-float-input {
+    width: 100%;
+  }
+
+  .e-form-renderer .unsupported-component {
+    padding: 1rem;
+    border-radius: 4px;
+    font-size: .875rem;
+  }
+
+  .form-renderer-container .e-tooltip.e-msg-icon::before {
+    font-family: 'e-icons';
+    font-size: 16px;
+    height: 16px;
+    margin: 3px 4px;
+    display: flex;
+    line-height: 16px;
+  }
+
+  .e-form-renderer .form-title h1 {
+    margin-top: 0;
+  }
+
+  .e-form-renderer .form-title {
+    text-align: center;
+  }
+
+  .form-renderer-container .e-card .e-card-content {
+    padding: 12px 18px;
+  }
+
+  /* Responsive */
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (max-width: 480px) {
+    .e-form-renderer .form-table-renderer .table-grid {
+      display: flex;
+      flex-direction: column;
+      border-spacing: 0;
+      gap: .75rem;
+    }
+
+    .e-form-renderer .form-table-renderer .row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: .75rem;
+      width: 100%;
+    }
+
+    .e-form-renderer .form-table-renderer .e-form-table-cell {
+      display: block;
+      flex: 1 1 auto;
+      padding: 12px;
+    }
+
+    /* Override column width classes on mobile - let content flow naturally */
+    .e-form-renderer .form-table-renderer .col,
+    .e-form-renderer .form-table-renderer [class ^= 'col-'] {
+      /* stylelint-disable-next-line declaration-no-important */
+      width: auto !important;
+      min-width: 250px;
+      flex: 1 1 auto;
+    }
+
+    .e-form-renderer .table-border .e-form-table-cell {
+      border-right: none;
+      border-radius: 4px;
+    }
+
+    .e-form-renderer .form-table-renderer .row:last-child .e-form-table-cell {
+      border-bottom: none;
+    }
+  }
+
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (max-width: 480px) {
+    .e-form-renderer .form-table-renderer .e-form-table-row {
+      /* stylelint-disable-next-line declaration-no-important */
+      flex-direction: column !important;
+      /* stylelint-disable-next-line declaration-no-important */
+      gap: 1rem !important;
+    }
+
+    .e-form-renderer .form-table-renderer .e-form-table-cell {
+      /* stylelint-disable-next-line declaration-no-important */
+      width: 100% !important;
+    }
+
+    .form-renderer-container {
+      padding: 1rem;
+    }
+  }
+
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (max-width: 400px) {
+    .e-form-renderer .field-wrapper.label-left,
+    .e-form-renderer .field-wrapper.label-right {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .e-form-renderer .field-wrapper.label-left .field-input,
+    .e-form-renderer .field-wrapper.label-right .field-input {
+      width: 100%;
+    }
+  }
+}

package/styles/form-renderer/_material3-dark-definition.scss

@@ -0,0 +1,8 @@
+@use 'sass:color';
+@use '../base/common/base-variables' as *;
+
+$sf-font-family: $font-family;
+$sf-text-color: $content-text-color;
+$sf-tooltip-text-color: $icon-color;
+$sf-layout-border-color: rgba($border-light) !default;
+$e-validation-text-color: rgba($danger) !default;

package/styles/form-renderer/_mixin.scss

@@ -0,0 +1,26 @@
+@use 'sass:color';
+@use 'variables' as *;
+
+@mixin when-dark-skin {
+  @if $skin-name =='bootstrap5-dark' or $skin-name == 'bootstrap-dark' or $skin-name == 'fabric-dark' or $skin-name == 'fluent2-dark' or $skin-name == 'fluent-dark' or $skin-name == 'highcontrast' or $skin-name == 'material3-dark' or $skin-name == 'material-dark' or $skin-name == 'tailwind3-dark' or $skin-name == 'tailwind-dark' {
+    @content;
+  }
+}
+
+@mixin border-color-when-dark($color) {
+  @include when-dark-skin {
+    border-color: $color;
+  }
+}
+
+@mixin grid-columns($count, $gap: 1.5rem) {
+  display: grid;
+  grid-template-columns: repeat($count, 1fr);
+  gap: $gap;
+}
+
+@mixin form-group-self-end($descendant) {
+  & > .form-group:has(#{$descendant}) {
+    align-self: flex-end;
+  }
+}

package/styles/form-renderer/_theme.scss

@@ -0,0 +1,69 @@
+@use 'sass:color';
+@use 'variables' as *;
+@use 'mixin' as *;
+
+@include export-module('form-renderer-layout') {
+  .form-renderer-container hr {
+    background-color: $sf-layout-border-color;
+  }
+
+  .e-form-renderer .field-label {
+    color: $sf-text-color;
+    font-family: $sf-font-family;
+  }
+
+  .e-form-renderer .form-panel-renderer .panel-legend {
+    color: $sf-text-color;
+    font-family: $sf-font-family;
+  }
+
+  .e-form-renderer .field-label .required-asterisk {
+    color: $e-validation-text-color;
+  }
+
+  .e-form-renderer .field-label .tooltip-icon {
+    color: $sf-tooltip-text-color;
+  }
+
+  .e-form-renderer .field-error {
+    color: $e-validation-text-color;
+  }
+
+  .e-form-renderer .form-panel-renderer:has(.panel-legend) {
+    border: 1px solid $sf-layout-border-color;
+    font-family: $sf-font-family;
+  }
+
+  .e-form-renderer .form-table-renderer.table-border {
+    border: 1px solid $sf-layout-border-color;
+  }
+
+  .e-form-renderer .table-border .e-form-table-cell {
+    border-bottom: 1px solid $sf-layout-border-color;
+    border-right: 1px solid $sf-layout-border-color;
+  }
+
+  .e-form-renderer .form-panel-renderer,
+  .e-form-renderer .form-table-renderer {
+    @include border-color-when-dark($sf-layout-border-color);
+  }
+
+  .e-form-renderer .e-form-table-row {
+    @include border-color-when-dark($sf-layout-border-color);
+  }
+
+  .e-form-renderer .e-form-table-cell {
+    @include border-color-when-dark($sf-layout-border-color);
+  }
+
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @container (max-width: 480px) {
+    .e-form-renderer .table-border .e-form-table-cell {
+      border-bottom: 1px solid $sf-layout-border-color;
+    }
+
+    .e-form-renderer .form-table-renderer .e-form-table-cell:last-child {
+      border-bottom: 1px solid $sf-layout-border-color;
+    }
+  }
+}

package/styles/form-renderer/_variables.scss

@@ -0,0 +1,2 @@
+@forward '../base/common/_base-variables.scss';
+@forward './_material3-dark-definition';