@syncfusion/ej2-angular-layouts 24.1.41 → 24.2.3-ngcc

package/styles/card/_layout.scss

@@ -1,528 +0,0 @@
-@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;
-    }
-  }
-}