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

Patreon Studio Design System

.root {
  /* CSS variable contracts - defaults */
  --Banner-backgroundColor: var(--global-primary-surfaceSubtle-default);
  --Banner-borderRadius: var(--global-radius-md);
  --Banner-padding: var(--global-space-x16);
  --Banner-paddingDesktop: var(--Banner-padding);
  --Banner-linkColorDefault: var(--global-content-primary-default);
  --Banner-linkColorHover: var(--global-content-primary-hover);
  --Banner-linkColorPressed: var(--global-content-primary-pressed);
  --Banner-iconBackground: transparent;
  --Banner-iconColor: var(--global-content-regular-default);
  --Banner-iconBackgroundLarge: var(--global-inverted-muted-default);
  --Banner-iconColorLarge: var(--global-content-regular-default);

  /* Apply the variables */
  background-color: var(--Banner-backgroundColor);
  border-radius: var(--Banner-borderRadius);
  overflow: hidden;
  padding: var(--Banner-padding);
  position: relative;
}

/* Variant: info (default) */

.root.variantInfo {
    --Banner-backgroundColor: var(--global-primary-surfaceSubtle-default);
    --Banner-linkColorDefault: var(--global-content-primary-default);
    --Banner-linkColorHover: var(--global-content-primary-hover);
    --Banner-linkColorPressed: var(--global-content-primary-pressed);
    --Banner-iconColorLarge: var(--global-content-regular-default);
  }

/* Variant: inverted */

.root.variantInverted {
    --Banner-backgroundColor: var(--global-content-regular-default);
    --Banner-linkColorDefault: var(--global-inverted-regular-default);
    --Banner-linkColorHover: var(--global-inverted-regular-hover);
    --Banner-linkColorPressed: var(--global-inverted-regular-pressed);
    --Banner-iconColorLarge: var(--global-inverted-regular-default);
  }

/* Variant: critical */

.root.variantCritical {
    --Banner-backgroundColor: var(--global-critical-surfaceMuted-default);
    --Banner-linkColorDefault: var(--global-critical-surface-default);
    --Banner-linkColorHover: var(--global-critical-surface-hover);
    --Banner-linkColorPressed: var(--global-critical-surface-pressed);
    --Banner-iconColorLarge: var(--global-critical-surface-default);
  }

/* Variant: success */

.root.variantSuccess {
    --Banner-backgroundColor: var(--global-success-surfaceMuted-default);
    --Banner-linkColorDefault: var(--global-success-surface-default);
    --Banner-linkColorHover: var(--global-success-surface-hover);
    --Banner-linkColorPressed: var(--global-success-surface-pressed);
    --Banner-iconColorLarge: var(--global-success-surface-default);
  }

/* Variant: warning */

.root.variantWarning {
    --Banner-backgroundColor: var(--global-warning-surfaceMuted-default);
    --Banner-linkColorDefault: var(--global-warning-surface-default);
    --Banner-linkColorHover: var(--global-warning-surface-hover);
    --Banner-linkColorPressed: var(--global-warning-surface-pressed);
    --Banner-iconColorLarge: var(--global-warning-surface-default);
  }

/* Placement: global */

.root.placementGlobal {
    --Banner-borderRadius: 0;
  }

/* Placement: inline-large */

.root.placementInlineLarge {
    --Banner-paddingDesktop: var(--global-space-x24);
  }

/* Placement: inline-small */

.root.placementInlineSmall {
    --Banner-padding: var(--global-space-x12);
    --Banner-paddingDesktop: var(--global-space-x16);
  }

.contentWrapper {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--global-space-x16);
  justify-content: space-between;
  width: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--global-space-x16);
  width: 100%;
}

.textWrapper {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--global-space-x4);
  width: 100%;
  word-wrap: break-word;

  /* Custom link styling using CSS variables from root */
}

.textWrapper a {
    /* stylelint-disable custom-property-empty-line-before, studio/namespace-custom-properties */
    --TextLink-color-default: var(--Banner-linkColorDefault);
    --TextLink-color-hover: var(--Banner-linkColorHover);
    --TextLink-color-pressed: var(--Banner-linkColorPressed);
    /* stylelint-enable custom-property-empty-line-before, studio/namespace-custom-properties */

    font-weight: var(--type-body-fontWeights-bold);
  }

.childrenContent {
  width: 100%;
}

.actionWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--global-space-x8);
}

.accessoryWrapper {
  display: flex;
}

.iconWrapper {
  /* CSS variable contracts for icon */
  --Banner-iconWrapperBackground: var(--Banner-iconBackground);
  --Banner-iconWrapperColor: var(--Banner-iconColor);
  --Banner-iconWrapperHeight: auto;
  --Banner-iconWrapperWidth: auto;
  --Banner-iconWrapperBorderRadius: 0;
  --Banner-iconWrapperPaddingLeft: 0;
  --Banner-iconWrapperPaddingTop: 0;

  align-items: center;
  background-color: var(--Banner-iconWrapperBackground);
  border-radius: var(--Banner-iconWrapperBorderRadius);
  color: var(--Banner-iconWrapperColor);
  display: flex;
  height: var(--Banner-iconWrapperHeight);
  justify-content: center;
  padding-left: var(--Banner-iconWrapperPaddingLeft);
  padding-top: var(--Banner-iconWrapperPaddingTop);
  width: var(--Banner-iconWrapperWidth);

  /* Placement: inline-large */
}

.placementInlineLarge .iconWrapper {
    --Banner-iconWrapperBackground: var(--Banner-iconBackgroundLarge);
    --Banner-iconWrapperBorderRadius: var(--global-radius-circle);
    --Banner-iconWrapperColor: var(--Banner-iconColorLarge);
    --Banner-iconWrapperHeight: 28px;
    --Banner-iconWrapperWidth: 28px;
  }

/* Placement: inline-small */

.placementInlineSmall .iconWrapper {
    --Banner-iconWrapperPaddingLeft: 1px;
    --Banner-iconWrapperPaddingTop: 1px;
  }

.floatingCloseButton {
  position: absolute;
  right: var(--global-space-x8);
  top: var(--global-space-x8);
}

.closeButtonWrapper {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-bottom: -6px;
  margin-top: -6px;
}

@media (min-width: 796px) {

.root {
    padding: var(--Banner-paddingDesktop);
}
    /* Align center for inline-large placement */
    .placementInlineLarge .contentWrapper {
      align-items: center;
    }

    /* Align center for single line with right-aligned action */
    .isSingleLine.alignActionRight .contentWrapper,.isSingleLine.alignActionBottom .contentWrapper {
      align-items: center;
    }

.content {
    align-items: flex-start;
}

    .alignActionRight .content {
      align-items: center;
      flex-direction: row;
    }

.actionWrapper {
    flex-wrap: nowrap;
}

.placementInlineLarge .iconWrapper {
      --Banner-iconWrapperHeight: 40px;
      --Banner-iconWrapperWidth: 40px;
  }
}