@roadtrip/css/styles/components/_flap.css

CSS framework for Roadtrip Design System

/*
 * Flap
 *
 * Index
 * - Flap
 * - Colors
 * - Sizes
 */

/* FLAP
 -------------------- */

.flap {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  padding: 0 0.75rem;
  font-size: var(--road-font-size-14);
  font-weight: 700;
  background: var(--road-surface);
  border: 1px solid transparent;
  border-radius: 1.5rem;
}

/* COLORS
 -------------------- */

.flap-promo {
  color: var(--road-tag-offer);
  border-color: var(--road-tag-offer);
}

.flap-exclu {
  color: var(--road-tag-exclusivity);
  border-color: var(--road-tag-exclusivity);
}

.flap-info {
  color: var(--road-tag-default);
  border-color: var(--road-tag-default);
}

.flap-ecology {
  color: var(--road-tag-ecology);
  border-color: var(--road-tag-ecology);
}

.flap-blackfriday {
  color: var(--road-tag-black-friday);
  border-color: var(--road-tag-black-friday);
}

.flap-promo-filled   {
  color: var(--road-on-primary);
  background-color: var(--road-tag-offer);
}

.flap-exclu-filled {
  color: var(--road-on-primary);
  background-color: var(--road-tag-exclusivity);
}

.flap-info-filled {
  color: var(--road-on-primary);
  background-color: var(--road-tag-default);
}

.flap-ecology-filled {
  color: var(--road-on-primary);
  background-color: var(--road-tag-ecology);
}

.flap-blackfriday-filled {
  color: var(--road-on-primary);
  background-color: var(--road-tag-black-friday);
}

/* SIZES
 -------------------- */

.flap-md {
  height: 2rem;
  padding: 0 1rem;
  font-size: var(--road-font-size-16);
}