@syncfusion/ej2-layouts 26.2.10 → 27.1.50

package/styles/card/_layout.scss

@@ -1,167 +1,5 @@
 @include export-module('card-layout') {
-  .e-bigger .e-card,
-  .e-bigger.e-card {
-    line-height: $card-bigger-lheight;
-    min-height: $card-bigger-mheight;
-
-    @if $skin-name == 'bootstrap4' {
-      > .e-card-title {
-        font-size: $card-txt-bigger-title-font;
-      }
-
-      .e-card-content {
-        font-size: $card-content-bigger-font-size;
-      }
-    }
-
-    > .e-card-header-title {
-      line-height: $card-header-bigger-lheight;
-      padding: $card-header-bigger-padding;
-      @if $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
-        min-height: 45px;
-      }
-
-      + :not(.e-card-header-title) {
-        margin-top: 0;
-        padding-top: 0;
-      }
-    }
-
-    > .e-card-title {
-      line-height: $card-title-bigger-lheight;
-      padding: $card-title-bigger-margin;
-
-      + :not(.e-card-title) {
-        margin-top: 0;
-        padding-top: 0;
-      }
-    }
-
-    &.e-card-horizontal,
-    .e-card-horizontal {
-      .e-card-image,
-      img {
-        margin: $card-hor-image-bigger-margin;
-      }
-    }
-
-    .e-card-header {
-      min-height: $card-header-bigger-minheight;
-      padding: $card-header-bigger-padding;
-
-      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap4' {
-        padding-bottom: $card-header-bigger-padding-bottom;
-      }
-
-      .e-card-content {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .e-card-header-caption {
-        padding: $card-header-txt-bigger-padding;
-
-        &:first-child {
-          padding: 0;
-        }
-
-        .e-card-header-title {
-          font-size: $card-header-txt-bigger-title-font;
-          line-height: $card-header-txt-title-bigger-lheight;
-          @if $skin-name == 'fluent2' {
-            font-weight: 600;
-          }
-        }
-
-        .e-card-sub-title {
-          font-size: $card-header-txt-bigger-subtitle-font;
-          line-height: $card-header-txt-subtitle-bigger-lheight;
-          padding: $card-header-txt-title-bigger-padding;
-        }
-      }
-
-      .e-card-header-image {
-        background-size: cover;
-        height: $card-header-image-bigger-height;
-        width: $card-header-image-bigger-width;
-      }
-
-      @if $skin-name == 'FluentUI' {
-        + .e-card-header {
-          padding: $card-header-bigger-whole-padding;
-        }
-      }
-    }
-
-    .e-card-image {
-      min-height: $card-image-bigger-mheight;
-
-      .e-card-title {
-        font-size: $card-image-title-bigger-font;
-        line-height: $card-image-title-bigger-lheight;
-        min-height: $card-image-title-bigger-mheight;
-        padding: $card-img-title-bigger-padding;
-        @if $skin-name == 'fluent2' {
-          font-weight: 600;
-        }
-      }
-    }
-
-    .e-card-actions {
-      padding: $card-action-bigger-padding;
-
-      &.e-card-vertical {
-        padding: $card-action-bigger-vertical-padding;
-
-        .e-card-btn,
-        a {
-          margin: $card-action-bigger-btn-vertical-margin;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-
-      .e-card-btn span,
-      .e-card-btn span.e-icons {
-        height: $card-action-btn-bigger-icon-height;
-        width: $card-action-btn-bigger-icon-width;
-      }
-
-      .e-card-btn,
-      a {
-        line-height: $card-action-btn-bigger-height;
-        margin: $card-action-btn-bigger-margin;
-        min-height: $card-action-btn-bigger-height;
-        padding: $card-action-btn-bigger-padding;
-
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-    }
-
-    .e-card-content {
-      padding: $card-bigger-content-padding;
-      @if $skin-name == 'fluent2' {
-        font-size: 16px;
-      }
-
-      + :not(.e-card-content),
-      + .e-card-actions.e-card-vertical {
-        margin-top: 0;
-        padding-top: 0;
-      }
-
-      @if $skin-name == 'FluentUI' {
-        + .e-card-header {
-          padding: $card-header-bigger-whole-padding;
-        }
-      }
-    }
-  }
-
+ 
   .e-card {
     border-radius: $card-brdr-radious;
     box-sizing: border-box;
@@ -303,7 +141,7 @@
       padding: $card-header-nrml-padding;
       width: inherit;
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         padding-bottom: $card-header-nrml-padding-bottom;
       }
 

package/styles/card/bootstrap-dark.css

@@ -1,140 +1,5 @@
 /*! component's default definitions and variables */
 /*! component's theme wise override material-definitions and variables */
-.e-bigger .e-card,
-.e-bigger.e-card {
-  line-height: 36px;
-  min-height: 36px;
-}
-.e-bigger .e-card > .e-card-header-title,
-.e-bigger.e-card > .e-card-header-title {
-  line-height: 12px;
-  padding: 12px;
-}
-.e-bigger .e-card > .e-card-header-title + :not(.e-card-header-title),
-.e-bigger.e-card > .e-card-header-title + :not(.e-card-header-title) {
-  margin-top: 0;
-  padding-top: 0;
-}
-.e-bigger .e-card > .e-card-title,
-.e-bigger.e-card > .e-card-title {
-  line-height: 13px;
-  padding: 18px 12px 12px;
-}
-.e-bigger .e-card > .e-card-title + :not(.e-card-title),
-.e-bigger.e-card > .e-card-title + :not(.e-card-title) {
-  margin-top: 0;
-  padding-top: 0;
-}
-.e-bigger .e-card.e-card-horizontal .e-card-image,
-.e-bigger .e-card.e-card-horizontal img,
-.e-bigger .e-card .e-card-horizontal .e-card-image,
-.e-bigger .e-card .e-card-horizontal img,
-.e-bigger.e-card.e-card-horizontal .e-card-image,
-.e-bigger.e-card.e-card-horizontal img,
-.e-bigger.e-card .e-card-horizontal .e-card-image,
-.e-bigger.e-card .e-card-horizontal img {
-  margin: 2px;
-}
-.e-bigger .e-card .e-card-header,
-.e-bigger.e-card .e-card-header {
-  min-height: 22.5px;
-  padding: 12px;
-}
-.e-bigger .e-card .e-card-header .e-card-content,
-.e-bigger.e-card .e-card-header .e-card-content {
-  padding-left: 0;
-  padding-right: 0;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption,
-.e-bigger.e-card .e-card-header .e-card-header-caption {
-  padding: 0 0 0 12px;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption:first-child,
-.e-bigger.e-card .e-card-header .e-card-header-caption:first-child {
-  padding: 0;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-header-title,
-.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-header-title {
-  font-size: 15px;
-  line-height: 13.5px;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-sub-title,
-.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
-  font-size: 14px;
-  line-height: 10.5px;
-  padding: 0 0 6px;
-}
-.e-bigger .e-card .e-card-header .e-card-header-image,
-.e-bigger.e-card .e-card-header .e-card-header-image {
-  background-size: cover;
-  height: 30px;
-  width: 30px;
-}
-.e-bigger .e-card .e-card-image,
-.e-bigger.e-card .e-card-image {
-  min-height: 112.5px;
-}
-.e-bigger .e-card .e-card-image .e-card-title,
-.e-bigger.e-card .e-card-image .e-card-title {
-  font-size: 24px;
-  line-height: 18px;
-  min-height: 30px;
-  padding: 6px;
-}
-.e-bigger .e-card .e-card-actions,
-.e-bigger.e-card .e-card-actions {
-  padding: 6px;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical,
-.e-bigger.e-card .e-card-actions.e-card-vertical {
-  padding: 0 6px;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn,
-.e-bigger .e-card .e-card-actions.e-card-vertical a,
-.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn,
-.e-bigger.e-card .e-card-actions.e-card-vertical a {
-  margin: 0 0 6px 0;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
-.e-bigger .e-card .e-card-actions.e-card-vertical a:last-child,
-.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
-.e-bigger.e-card .e-card-actions.e-card-vertical a:last-child {
-  margin-bottom: 0;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn span,
-.e-bigger .e-card .e-card-actions .e-card-btn span.e-icons,
-.e-bigger.e-card .e-card-actions .e-card-btn span,
-.e-bigger.e-card .e-card-actions .e-card-btn span.e-icons {
-  height: 24px;
-  width: 24px;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn,
-.e-bigger .e-card .e-card-actions a,
-.e-bigger.e-card .e-card-actions .e-card-btn,
-.e-bigger.e-card .e-card-actions a {
-  line-height: 27px;
-  margin: 0 0 0 6px;
-  min-height: 27px;
-  padding: 0 6px;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn:first-child,
-.e-bigger .e-card .e-card-actions a:first-child,
-.e-bigger.e-card .e-card-actions .e-card-btn:first-child,
-.e-bigger.e-card .e-card-actions a:first-child {
-  margin-left: 0;
-}
-.e-bigger .e-card .e-card-content,
-.e-bigger.e-card .e-card-content {
-  padding: 12px;
-}
-.e-bigger .e-card .e-card-content + :not(.e-card-content),
-.e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,
-.e-bigger.e-card .e-card-content + :not(.e-card-content),
-.e-bigger.e-card .e-card-content + .e-card-actions.e-card-vertical {
-  margin-top: 0;
-  padding-top: 0;
-}
-
 .e-card {
   border-radius: 0;
   -webkit-box-sizing: border-box;
@@ -553,4 +418,139 @@
 }
 .e-card .e-card-content {
   color: #fff;
+}
+
+.e-bigger .e-card,
+.e-bigger.e-card {
+  line-height: 36px;
+  min-height: 36px;
+}
+.e-bigger .e-card > .e-card-header-title,
+.e-bigger.e-card > .e-card-header-title {
+  line-height: 12px;
+  padding: 12px;
+}
+.e-bigger .e-card > .e-card-header-title + :not(.e-card-header-title),
+.e-bigger.e-card > .e-card-header-title + :not(.e-card-header-title) {
+  margin-top: 0;
+  padding-top: 0;
+}
+.e-bigger .e-card > .e-card-title,
+.e-bigger.e-card > .e-card-title {
+  line-height: 13px;
+  padding: 18px 12px 12px;
+}
+.e-bigger .e-card > .e-card-title + :not(.e-card-title),
+.e-bigger.e-card > .e-card-title + :not(.e-card-title) {
+  margin-top: 0;
+  padding-top: 0;
+}
+.e-bigger .e-card.e-card-horizontal .e-card-image,
+.e-bigger .e-card.e-card-horizontal img,
+.e-bigger .e-card .e-card-horizontal .e-card-image,
+.e-bigger .e-card .e-card-horizontal img,
+.e-bigger.e-card.e-card-horizontal .e-card-image,
+.e-bigger.e-card.e-card-horizontal img,
+.e-bigger.e-card .e-card-horizontal .e-card-image,
+.e-bigger.e-card .e-card-horizontal img {
+  margin: 2px;
+}
+.e-bigger .e-card .e-card-header,
+.e-bigger.e-card .e-card-header {
+  min-height: 22.5px;
+  padding: 12px;
+}
+.e-bigger .e-card .e-card-header .e-card-content,
+.e-bigger.e-card .e-card-header .e-card-content {
+  padding-left: 0;
+  padding-right: 0;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption,
+.e-bigger.e-card .e-card-header .e-card-header-caption {
+  padding: 0 0 0 12px;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption:first-child,
+.e-bigger.e-card .e-card-header .e-card-header-caption:first-child {
+  padding: 0;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-header-title,
+.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-header-title {
+  font-size: 15px;
+  line-height: 13.5px;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-sub-title,
+.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
+  font-size: 14px;
+  line-height: 10.5px;
+  padding: 0 0 6px;
+}
+.e-bigger .e-card .e-card-header .e-card-header-image,
+.e-bigger.e-card .e-card-header .e-card-header-image {
+  background-size: cover;
+  height: 30px;
+  width: 30px;
+}
+.e-bigger .e-card .e-card-image,
+.e-bigger.e-card .e-card-image {
+  min-height: 112.5px;
+}
+.e-bigger .e-card .e-card-image .e-card-title,
+.e-bigger.e-card .e-card-image .e-card-title {
+  font-size: 24px;
+  line-height: 18px;
+  min-height: 30px;
+  padding: 6px;
+}
+.e-bigger .e-card .e-card-actions,
+.e-bigger.e-card .e-card-actions {
+  padding: 6px;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical,
+.e-bigger.e-card .e-card-actions.e-card-vertical {
+  padding: 0 6px;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn,
+.e-bigger .e-card .e-card-actions.e-card-vertical a,
+.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn,
+.e-bigger.e-card .e-card-actions.e-card-vertical a {
+  margin: 0 0 6px 0;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
+.e-bigger .e-card .e-card-actions.e-card-vertical a:last-child,
+.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
+.e-bigger.e-card .e-card-actions.e-card-vertical a:last-child {
+  margin-bottom: 0;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn span,
+.e-bigger .e-card .e-card-actions .e-card-btn span.e-icons,
+.e-bigger.e-card .e-card-actions .e-card-btn span,
+.e-bigger.e-card .e-card-actions .e-card-btn span.e-icons {
+  height: 24px;
+  width: 24px;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn,
+.e-bigger .e-card .e-card-actions a,
+.e-bigger.e-card .e-card-actions .e-card-btn,
+.e-bigger.e-card .e-card-actions a {
+  line-height: 27px;
+  margin: 0 0 0 6px;
+  min-height: 27px;
+  padding: 0 6px;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn:first-child,
+.e-bigger .e-card .e-card-actions a:first-child,
+.e-bigger.e-card .e-card-actions .e-card-btn:first-child,
+.e-bigger.e-card .e-card-actions a:first-child {
+  margin-left: 0;
+}
+.e-bigger .e-card .e-card-content,
+.e-bigger.e-card .e-card-content {
+  padding: 12px;
+}
+.e-bigger .e-card .e-card-content + :not(.e-card-content),
+.e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,
+.e-bigger.e-card .e-card-content + :not(.e-card-content),
+.e-bigger.e-card .e-card-content + .e-card-actions.e-card-vertical {
+  margin-top: 0;
+  padding-top: 0;
 }

package/styles/card/bootstrap-dark.scss

@@ -1,3 +1,4 @@
 @import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';