@syncfusion/ej2-layouts 31.2.12 → 32.1.19

package/styles/card/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'material-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'material-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/card/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'material-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material' as *;
+@use 'material-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/card/material3-dark.css

@@ -1,7 +1,87 @@
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-card {
-  border-radius: 12px;
+  border-radius: calc(var(--e-radius) * 0.75);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -11,7 +91,7 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 15px;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
@@ -190,12 +270,12 @@
 }
 .e-card .e-card-header .e-card-header-caption .e-card-header-title {
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.5;
 }
 .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
   font-size: 12px;
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.5;
   padding: 4px 0 0;
 }
@@ -317,11 +397,11 @@
 }
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
 }
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 12px;
   line-height: 30px;
   margin: 0 0 0 8px;
@@ -376,7 +456,7 @@
   border-color: rgba(var(--color-sf-primary));
 }
 .e-card .e-card-separator {
-  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
+  border-bottom: calc(var(--e-border) * 0.0625) solid rgba(var(--color-sf-outline-variant));
 }
 .e-card .e-card-header-caption .e-card-header-title {
   color: rgba(var(--color-sf-on-surface));
@@ -395,28 +475,28 @@
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
   background: rgba(var(--color-sf-primary));
-  border: 1px solid rgba(var(--color-sf-primary));
+  border: calc(var(--e-border) * 0.0625) solid rgba(var(--color-sf-primary));
   color: rgba(var(--color-sf-on-primary));
   outline: 0;
 }
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
   background: rgba(var(--color-sf-primary));
-  border: 1px solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08));
+  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08));
   color: rgba(var(--color-sf-on-primary));
 }
 .e-card .e-card-actions .e-card-btn:focus,
 .e-card .e-card-actions a:focus {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
-  border: 1px solid;
+  border: calc(var(--e-border) * 0.0625) solid;
   color: var(--color-sf-on-surface);
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
-  border: 1px solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
+  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
   color: rgba(var(--color-sf-on-surface));
 }
 .e-card .e-card-content {

package/styles/card/material3-dark.scss

@@ -1,5 +1,4 @@
-
-
-@import 'material3-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'material3-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/card/material3.css

@@ -2,8 +2,88 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-card {
-  border-radius: 12px;
+  border-radius: calc(var(--e-radius) * 0.75);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -13,7 +93,7 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 15px;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
@@ -192,12 +272,12 @@
 }
 .e-card .e-card-header .e-card-header-caption .e-card-header-title {
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.5;
 }
 .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
   font-size: 12px;
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.5;
   padding: 4px 0 0;
 }
@@ -319,11 +399,11 @@
 }
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
 }
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 12px;
   line-height: 30px;
   margin: 0 0 0 8px;
@@ -378,7 +458,7 @@
   border-color: rgba(var(--color-sf-primary));
 }
 .e-card .e-card-separator {
-  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
+  border-bottom: calc(var(--e-border) * 0.0625) solid rgba(var(--color-sf-outline-variant));
 }
 .e-card .e-card-header-caption .e-card-header-title {
   color: rgba(var(--color-sf-on-surface));
@@ -397,28 +477,28 @@
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
   background: rgba(var(--color-sf-primary));
-  border: 1px solid rgba(var(--color-sf-primary));
+  border: calc(var(--e-border) * 0.0625) solid rgba(var(--color-sf-primary));
   color: rgba(var(--color-sf-on-primary));
   outline: 0;
 }
 .e-card .e-card-actions .e-card-btn:hover,
 .e-card .e-card-actions a:hover {
   background: rgba(var(--color-sf-primary));
-  border: 1px solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08));
+  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08));
   color: rgba(var(--color-sf-on-primary));
 }
 .e-card .e-card-actions .e-card-btn:focus,
 .e-card .e-card-actions a:focus {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
-  border: 1px solid;
+  border: calc(var(--e-border) * 0.0625) solid;
   color: var(--color-sf-on-surface);
 }
 .e-card .e-card-actions .e-card-btn:active,
 .e-card .e-card-actions a:active {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
-  border: 1px solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
+  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
   color: rgba(var(--color-sf-on-surface));
 }
 .e-card .e-card-content {

package/styles/card/material3.scss

@@ -1,5 +1,4 @@
-
-
-@import 'material3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'material3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/card/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'tailwind-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/card/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'tailwind-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'tailwind-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/card/tailwind3.css

@@ -2,8 +2,78 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-card {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -13,7 +83,7 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 15px;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
@@ -322,11 +392,11 @@
 }
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
 }
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   line-height: 30px;
   margin: 0 0 0 8px;

package/styles/card/tailwind3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'tailwind3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'tailwind3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/dashboard-layout/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/dashboard-layout/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 /*! component's theme wise override tailwind-definitions and variables */
 
 // Generic
@@ -107,3 +110,4 @@ $panel-drop-border: 1px $border-dark dashed !default;
 //gridlines
 $gridline-background: $content-bg-color-alt1 !default;
 $gridline-border: $border !default;
+$gridline-border-width: 1px !default;

package/styles/dashboard-layout/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin bigger-header-style {
   font-size: $panel-bigger-header-font-size;
   font-weight: $panel-bigger-header-font-weight;

package/styles/dashboard-layout/_bootstrap-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 /*! component's theme wise override bootstrap-definitions and variables */
 
 // Generic
@@ -100,3 +103,4 @@ $element-width-complete: 100% !important !default;
 //gridlines
 $gridline-background: #141414 !default;
 $gridline-border: #2C2C2C !default;
+$gridline-border-width: 1px !default;

package/styles/dashboard-layout/_bootstrap-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
+
 /*! component's theme wise override bootstrap-definitions and variables */
 
 // Generic
@@ -100,3 +103,4 @@ $element-width-complete: 100% !important !default;
 //gridlines
 $gridline-background: $grey-lighter !default;
 $gridline-border: $grey-ad !default;
+$gridline-border-width: 1px !default;

package/styles/dashboard-layout/_bootstrap4-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
+
 /*! component's theme wise override bootstrap-definitions and variables */
 
 // Generic
@@ -100,3 +103,4 @@ $element-width-complete: 100% !important !default;
 //gridlines
 $gridline-background: $gray-100 !default;
 $gridline-border: $gray-400 !default;
+$gridline-border-width: 1px !default;