wix-style-react/dist/src/SectionHeader/SectionHeader.st.css

wix-style-react

@property --color-bg;
@property --color-border;

@st-import [
  --wds-section-header-padding-vertical,
  --wds-list-item-padding-horizontal-large,
  --wds-list-item-padding-horizontal-medium,
  --wds-list-item-padding-horizontal-small,
  --wds-list-item-padding-horizontal-tiny,
  --wds-list-item-padding-horizontal-x-tiny,
  --wds-list-item-padding-horizontal-xx-tiny,
  --wds-color-fill-standard-secondary,
  --wds-color-fill-dark-secondary,
  --wds-color-border-standard-primary,
  --wds-color-border-dark-secondary,
  --wds-space-200,
] from '@wix/design-system-tokens/all.st.css';
@st-import [B30, B40, D60, D70] from '../Foundation/stylable/colors.st.css';

.root {
  -st-states:
    skin(enum(standard, neutral)),
    horizontalPadding(enum(large, medium, small, tiny, xTiny, xxTiny)),
    divider(enum(default, top, bottom, none));

  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 36px;
  background-color: var(--color-bg);
}

.root:skin(standard) {
  --color-bg: var(--wds-color-fill-standard-secondary, value(B40));
  --color-border: var(--wds-color-border-standard-primary, value(B30));
}

.root:skin(neutral) {
  --color-bg: var(--wds-color-fill-dark-secondary, value(D70));
  --color-border: var(--wds-color-border-dark-secondary, value(D60));
}

.root:divider(default) {
  border-top: 1px var(--color-border) solid;
  border-bottom: 1px var(--color-border) solid;
}

.root:divider(top) {
  border-top: 1px var(--color-border) solid;
}

.root:divider(bottom) {
  border-bottom: 1px var(--color-border) solid;
}

.root:horizontalPadding(large) {
  padding: var(--wds-section-header-padding-vertical, 9px) var(--wds-list-item-padding-horizontal-large, 24px);
}

.root:horizontalPadding(medium) {
  padding: var(--wds-section-header-padding-vertical, 9px) var(--wds-list-item-padding-horizontal-medium, 18px);
}

.root:horizontalPadding(small) {
  padding: var(--wds-section-header-padding-vertical, 9px) var(--wds-list-item-padding-horizontal-small, 15px);
}

.root:horizontalPadding(tiny) {
  padding: var(--wds-section-header-padding-vertical, 9px) var(--wds-list-item-padding-horizontal-tiny, 12px);
}

.root:horizontalPadding(xTiny) {
  padding: var(--wds-section-header-padding-vertical, 9px) var(--wds-list-item-padding-horizontal-x-tiny, 6px);
}

.root:horizontalPadding(xxTiny) {
  padding: var(--wds-section-header-padding-vertical, 9px) var(--wds-list-item-padding-horizontal-xx-tiny, 3px);
}

.title {
  -st-states: align(enum(start, center));
  display: flex;
  flex-grow: 1;
  align-items: center;
  overflow: hidden;
}

.title:align(start) {
  justify-content: flex-start;
}

.title:align(center) {
  justify-content: center;
}

.titleText {
  /*
   * We allow changing underlying HTMl element of title text. It can be any of
   * the HTML heading elements (h1-h6) which have implicit user agent styles.
   * <Text/> component applies its own styles on top of them, however it doesn't
   * reset margins so we do that here.
   */
  margin: 0;
}

.suffix {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin-inline-start: var(--wds-space-200, 12px);
}

/* st-namespace-reference="../../../src/SectionHeader/SectionHeader.st.css" */