@syncfusion/ej2-angular-layouts 22.1.37-ngcc → 22.1.37

package/styles/card/_layout.scss

@@ -0,0 +1,528 @@
+@include export-module('card-layout') {
+
+  /*! 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;
+        }
+
+        .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;
+      }
+    }
+
+    .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;
+
+      + :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;
+    display: flex;
+    flex-direction: column;
+    font-family: $font-family;
+    font-size: 15px;
+    justify-content: center;
+    line-height: $card-nrml-lheight;
+    min-height: $card-nrml-mheight;
+    overflow: hidden;
+    position: relative;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    width: 100%;
+    @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
+      padding: 1px;
+    }
+
+    &:hover {
+      @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
+        border-width: 2px;
+        padding: 1px;
+      }
+    }
+
+    &:active {
+      @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
+        border-width: 2px;
+        padding: 0;
+      }
+    }
+
+    > * {
+      justify-content: center;
+    }
+
+    > .e-card-header-title {
+      box-sizing: border-box;
+      font-size: $card-header-font;
+      line-height: $card-header-lheight;
+      padding: $card-header-padding;
+      @if $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
+        min-height: 34px;
+      }
+
+      + :not(.e-card-header-title) {
+        margin-top: 0;
+        padding-top: 0;
+      }
+    }
+
+    > .e-card-title {
+      font-size: $card-title-font;
+      line-height: $card-title-nrml-lheight;
+      padding: $card-title-nrml-padding;
+
+      + :not(.e-card-title) {
+        margin-top: 0;
+        padding-top: 0;
+      }
+    }
+
+    > .e-card-header-title,
+    > .e-card-title  {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .e-card-header-caption {
+      line-height: normal;
+
+      .e-card-header-title {
+        font-size: $card-header-title-font;
+      }
+
+      .e-card-sub-title {
+        font-size: $card-header-sub-title-font;
+      }
+    }
+
+    .e-card-stacked {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    &.e-card-horizontal,
+    .e-card-horizontal {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+
+      .e-card-image,
+      img {
+        margin: $card-hor-image-margin;
+      }
+    }
+
+    .e-card-horizontal {
+      line-height: normal;
+      padding: 2px;
+    }
+
+    &.e-card-horizontal {
+
+      > * {
+        flex: 1;
+      }
+
+      .e-card-stacked {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        overflow: hidden;
+
+        >:first-child {
+          flex-grow: 1;
+        }
+      }
+    }
+
+    .e-card-separator {
+      display: block;
+    }
+
+    .e-card-corner  {
+      border-radius: 50%;
+    }
+
+    .e-card-header {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      line-height: normal;
+      min-height: $card-header-minheight;
+      padding: $card-header-nrml-padding;
+      width: inherit;
+
+      @if $skin-name == 'bootstrap5' {
+        padding-bottom: $card-header-nrml-padding-bottom;
+      }
+
+      .e-card-content {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .e-card-actions {
+        justify-content: flex-start;
+      }
+
+      .e-card-header-image  {
+        align-self: center;
+        display: flex;
+        @if $skin-name == 'highcontrast' {
+          border: 1px solid;
+        }
+      }
+
+      .e-card-header-caption {
+        align-self: center;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        overflow: hidden;
+        padding: $card-header-txt-nrml-padding;
+
+        &:first-child {
+          padding: 0;
+        }
+
+        .e-card-header-title,
+        .e-card-sub-title {
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .e-card-header-title {
+          font-size: $card-header-txt-nrml-title-font;
+          font-weight: normal;
+          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
+            font-weight: 600;
+          }
+          line-height: $card-header-txt-title-lheight;
+        }
+
+        .e-card-sub-title {
+          font-size: $card-header-txt-nrml-subtitle-font;
+          font-weight: normal;
+          line-height: $card-header-txt-subtitle-lheight;
+          padding: $card-header-txt-title-nrml-padding;
+        }
+      }
+
+      .e-card-header-image {
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: $card-header-image-height;
+        width: $card-header-image-width;
+      }
+
+      .e-card-corner {
+        border-radius: $card-img-brdr-radious;
+      }
+
+      @if $skin-name == 'FluentUI' {
+        + .e-card-header {
+          padding: $card-header-whole-padding;
+        }
+      }
+    }
+
+    .e-card-image {
+      background-size: cover;
+      min-height: $card-image-mheight;
+      position: relative;
+      width: 100%;
+
+      .e-card-title {
+        bottom: 0;
+        box-sizing: border-box;
+        font-size: $card-image-title-font;
+        line-height: $card-image-title-lheight;
+        min-height: $card-image-title-mheight;
+        overflow: hidden;
+        padding: $card-image-title-nrml-padding;
+        position: absolute;
+        text-overflow: ellipsis;
+        width: inherit;
+
+        &.e-card-top-left,
+        &.e-card-top-right {
+          bottom: auto;
+          top: 0;
+        }
+
+        &.e-card-top-right {
+          text-align: right;
+        }
+
+        &.e-card-bottom-right {
+          text-align: right;
+        }
+      }
+    }
+
+    .e-card-actions {
+      box-sizing: border-box;
+      display: inline-block;
+      justify-content: flex-start;
+      padding: $card-action-nrml-padding;
+
+      &.e-card-vertical {
+        display: flex;
+        flex-direction: column;
+        padding: $card-action-nrml-vertical-padding;
+
+        .e-card-btn,
+        a {
+          align-self: initial;
+          box-sizing: border-box;
+          display: inline-block;
+          justify-content: center;
+          margin: $card-action-nrml-btn-vertical-margin;
+          text-align: center;
+          width: 100%;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      button,
+      a {
+        align-items: center;
+        align-self: center;
+        cursor: pointer;
+        display: inline-flex;
+        overflow: hidden;
+        vertical-align: middle;
+        white-space: nowrap;
+      }
+
+      .e-card-btn span,
+      .e-card-btn span.e-icons {
+        display: flex;
+        font-size: $card-action-btn-icon-font;
+        height: $card-action-btn-icon-height;
+        width: $card-action-btn-icon-width;
+
+        &::before {
+          align-self: center;
+          display: flex;
+          justify-content: center;
+          width: inherit;
+        }
+      }
+
+      .e-card-btn > * {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: inherit;
+      }
+
+      .e-card-btn,
+      a {
+        @if $skin-name == 'tailwind' {
+          border-radius: 4px;
+        }
+
+        @else {
+          border-radius: 2px;
+        }
+      }
+
+      .e-card-btn,
+      a {
+        font-family: $font-family;
+        font-size: $card-action-btn-font;
+        line-height: $card-action-btn-nrml-height;
+        margin: $card-action-btn-nrml-margin;
+        min-height: $card-action-btn-nrml-height;
+        padding: $card-action-btn-nrml-padding;
+        text-decoration: none;
+        text-transform: $card-action-btn-txt-transform;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .e-card-content {
+      font-size: $card-content-font-size;
+      line-height: $card-content-line-height;
+      padding: $card-nrml-content-padding;
+      word-wrap: break-word;
+
+      + :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-whole-padding;
+        }
+      }
+    }
+
+    @if $skin-name == 'tailwind' {
+      .e-card-header .e-card-actions {
+        padding: 0;
+      }
+    }
+
+    .e-card-content,
+    .e-card-content p {
+      line-height: $card-content-line-height;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}