soft-components/dist/collection/components/sc-card/sc-card.css

Simple soft flexible set of web components

:host {
  /**
    * @prop --sc-card-outer-padding-x      :  Default: calc(var(--sc-root-spacing) * 4);
    * @prop --sc-card-outer-padding-y      :  Default: calc(var(--sc-root-spacing) * 4);
    * @prop --sc-card-inner-padding-y      : Padding between title section and content section
    * @prop --sc-card-bg-color             : Background color of card.
    * @prop --sc-card-title-font-size      : Title text font size.
    * @prop --sc-card-title-font-weight    : Title font weight
    * @prop --sc-card-title-text-color     : Title text color
    * @prop --sc-card-subtitle-font-size   : Subtitle font size
    * @prop --sc-card-subtitle-font-weight : Subtitle font weight
    * @prop --sc-card-subtitle-text-color  : Subtitle text color
    * @prop --sc-card-bordered-width       : Card border width (only applicable for bordered cards)
    * @prop --sc-card-media-width          : width of media part of the card
    * @prop --sc-card-media-height         : height of media part of the card
    * @prop --sc-card-media-object-position: [object-position rule](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) for the media. default: center
    */
  /**
    @prop --sc-card-outer-padding-x:
      Horizontal outer padding of card.
      - default: calc(var(--sc-root-spacing) * 4)
  */
  --sc-card-outer-padding-x: calc(var(--sc-root-spacing) * 4);
  /**
    @prop --sc-card-outer-padding-y:
      Vertical outer padding of card.
      - default: calc(var(--sc-root-spacing) * 4)
  */
  --sc-card-outer-padding-y: calc(var(--sc-root-spacing) * 4);
  /**
    @prop --sc-card-inner-padding-y:
      Vertical inner padding
      - default: calc(var(--sc-root-spacing) * 2)
  */
  --sc-card-inner-padding-y: calc(var(--sc-root-spacing) * 2);
  /**
    @prop --sc-card-bg-color:
      Background colour of card
      - default: var(--sc-bg-color, #f1f1f1)
  */
  --sc-card-bg-color: var(--sc-bg-color, #f1f1f1);
  /**
    @prop --sc-card-title-font-size:
      Font size of card title text
      - default: calc(var(--sc-root-spacing) * 3)
  */
  --sc-card-title-font-size: calc(var(--sc-root-spacing) * 3);
  /**
    @prop --sc-card-title-font-weight:
      Font weight of card title text
      - default: 700
  */
  --sc-card-title-font-weight: 700;
  /**
    @prop --sc-card-title-text-color:
      Text colour of card title
      - default:  var(--sc-text-color, #333333)
  */
  --sc-card-title-text-color: var(--sc-text-color, #333333);
  /**
    @prop --sc-card-subtitle-font-size:
      Font size of subtitle
      - default: calc(var(--sc-root-spacing) * 2)
  */
  --sc-card-subtitle-font-size: calc(var(--sc-root-spacing) * 2);
  /**
    @prop --sc-card-subtitle-font-weight:
      Font weight of subtitle
      - default: 400
  */
  --sc-card-subtitle-font-weight: 400;
  /**
    @prop --sc-card-subtitle-text-color:
      Text colour of subtitle
      - default: var(--sc-text-color, #696969)
  */
  --sc-card-subtitle-text-color: var(--sc-text-color, #696969);
  /**
    @prop --sc-card-border-width:
      Border width for `bordered` card
      - default: 2px
  */
  --sc-card-border-width: 2px;
  --sc-card-border-width: 0.125rem;
  /**
    @prop --sc-card-media-width:
      Width of the media, useful when
      - default: 100%
  */
  --sc-card-media-width: 100%;
  --sc-card-media-height: calc(var(--sc-root-spacing, 8px) * 20);
  --sc-card-media-height: calc(var(--sc-root-spacing, 0.5rem) * 20);
  --sc-card-media-height: calc(var(--sc-root-spacing, 8px) * 20);
  --sc-card-media-object-position: center;
  display: block;
  box-shadow: calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  background: var(--sc-card-bg-color);
  border-radius: var(--sc-border-radius, 1em);
  overflow: hidden;
}
:host a {
  display: block;
  color: currentColor;
  text-decoration: none;
  transition: box-shadow 0.3s ease;
}
:host a:hover, :host a:focus {
  border-radius: var(--sc-border-radius, 1em);
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
}
:host .card-inner {
  border-radius: var(--sc-border-radius, 1em);
  padding: var(--sc-card-outer-padding-y) var(--sc-card-outer-padding-x);
  overflow: auto;
}
:host .card-inner .card-title-container {
  padding-bottom: var(--sc-card-inner-padding-y);
}
:host .card-inner .card-title-container .card-title {
  font-size: var(--sc-card-title-font-size);
  font-weight: var(--sc-card-title-font-weight);
  color: var(--sc-card-title-text-color);
  line-height: 1.5;
}
:host .card-inner .card-title-container .card-subtitle {
  font-size: var(--sc-card-subtitle-font-size);
  font-weight: var(--sc-card-subtitle-font-weight);
  color: var(--sc-card-subtitle-text-color);
  line-height: 1.5;
}
:host .card-media {
  overflow: hidden;
  flex-shrink: 0;
  flex-basis: 40%;
}
:host .card-media ::slotted(*) {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--sc-card-media-object-position);
     object-position: var(--sc-card-media-object-position);
}

:host([media-position]) {
  display: flex;
  justify-content: space-between;
}

:host([media-position=top]) {
  flex-direction: column;
}
:host([media-position=top]) .card-inner {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
:host([media-position=top]) .card-media {
  width: 100%;
  height: var(--sc-card-media-height);
}

:host([media-position=bottom]) {
  flex-direction: column-reverse;
}
:host([media-position=bottom]) .card-inner {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
:host([media-position=bottom]) .card-media {
  width: 100%;
  height: var(--sc-card-media-height);
}

:host([media-position=left]) {
  flex-direction: row;
  align-items: stretch;
}
:host([media-position=left]) .card-media {
  width: var(--sc-card-media-width);
}

:host([media-position=right]) {
  flex-direction: row-reverse;
  align-items: stretch;
}
:host([media-position=right]) .card-media {
  width: var(--sc-card-media-width);
}

:host(.engraved) {
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
}

:host(.hoverable):hover {
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
}

:host(.bordered) {
  background-image: linear-gradient(to bottom right, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) -10%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%), linear-gradient(to bottom right, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) 70%);
  padding: var(--sc-card-border-width);
}
:host(.bordered) .card-inner {
  background-color: var(--sc-card-bg-color);
}

:host(.ray-tracing) {
  transition: box-shadow 0.1s ease;
}