@patreon/studio/module/components/CardLayout/CardLayout.module.css

Patreon Studio Design System

/**
 * We are defining custom properties in this file which will be consumed
 * by the Card component so we are disabling the namespace-custom-properties
 * stylelint rule for this file.
 **/ 
/* stylelint-disable studio/namespace-custom-properties */

.root {
  /**
   * These flags are uses to enable/disable certain styles within the Card component.
   * This is done so that the styles can be defined by the Card, but then disabled
   * by the CardLayout in certain circumstances. A "0" value means the style is disabled,
   * and a "1" value means the style is enabled. These flags are used in the Card component
   * by multiplying the flag by a styles pixel value. This will result in the style being
   * either enabled or disabled depending on the value of the flag.
   **/
  --Card-radius-enabled: 0;
  --Card-divider-enabled: 0;

  display: flex;
  flex-direction: column;
}

.spacingSeparated {
  --Card-radius-enabled: 1;
  
  row-gap: var(--global-space-x16);
}

.spacingEdgelessMobile {
  --Card-edgeless-color: none;
  --Card-divider-enabled: 1;

  border-top: 1px solid var(--global-border-muted-default);
}

.spacingEdgelessMobile .spacingEdgelessMobile {
    border-top: none;
  }

@media (min-width: 588px) {

.root {
    --Card-radius-enabled: 1;

    row-gap: var(--global-space-x24);
}

.spacingEdgelessMobile {
    --Card-edgeless-color: unset;
    --Card-divider-enabled: 0;
    --Card-radius-enabled: 1;

    border-top: none;
}
}