gin-card.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-card.pcss.css
/* cspell:ignore xsmall */
@import "media-queries.pcss.css";

.card {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--gin-border-color-layer2);
  border-radius: var(--gin-border-m);
  background: transparent;
  box-shadow: none;

  .gin--dark-mode & {
    box-shadow: none;
  }

  .heading-f {
    color: var(--gin-color-title);
  }
}

.card-list {
  margin-block-end: var(--gin-spacing-xl);
}

.card__image {
  img {
    border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;

    @media (--admin-xsmall) {
      border-radius: var(--gin-border-m) 0 0 var(--gin-border-m);
    }
  }
}

.card__content-wrapper {
  border-radius: 0 0 var(--gin-border-xs) var(--gin-border-xs);
  background-color: var(--gin-bg-layer);

  .gin--dark-mode & {
    background-color: var(--gin-bg-layer2);
  }

  @media (--admin-xsmall) {
    border-radius: 0 var(--gin-border-xs) var(--gin-border-xs) 0;
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-card.pcss.css

View source 
  1. /* cspell:ignore xsmall */

  2. @import "media-queries.pcss.css";

  3. 

  4. .card {

  5.   overflow: hidden;

  6.   padding: 0;

  7.   border: 1px solid var(--gin-border-color-layer2);

  8.   border-radius: var(--gin-border-m);

  9.   background: transparent;

  10.   box-shadow: none;

  11. 

  12.   .gin--dark-mode 
  13. 

  14.   .heading-f {

  15.     color: var(--gin-color-title);

  16.   }

  17. }

  18. 

  19. .card-list {

  20.   margin-block-end: var(--gin-spacing-xl);

  21. }

  22. 

  23. .card__image {

  24.   img {

  25.     border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;

  26. 

  27.     @media (--admin-xsmall) {

  28.       border-radius: var(--gin-border-m) 0 0 var(--gin-border-m);

  29.     }

  30.   }

  31. }

  32. 

  33. .card__content-wrapper {

  34.   border-radius: 0 0 var(--gin-border-xs) var(--gin-border-xs);

  35.   background-color: var(--gin-bg-layer);

  36. 

  37.   .gin--dark-mode 
  38. 

  39.   @media (--admin-xsmall) {

  40.     border-radius: 0 var(--gin-border-xs) var(--gin-border-xs) 0;

  41.   }

  42. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.