@vtmn/css-popover/src/index.css

Decathlon Design System - Vitamin specific CSS styles for popover component

@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/animations';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/z-indexes';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-popover {
  position: relative;
  cursor: pointer;
  font-family: var(--vtmn-typo_font-family);
  outline: 0;
}

.vtmn-popover > [role='dialog'] > .vtmn-popover_title {
  margin-block: rem(4px);
  margin-inline: 0;
  font-family: var(--vtmn-typo_font-family);
  font-weight: var(--vtmn-typo_font-weight--bold);
  font-size: var(--vtmn-typo_text-2-font-size);
  line-height: var(--vtmn-typo_text-2-line-height);
  align-self: flex-start;
}

.vtmn-popover > [role='dialog'] > .vtmn-popover_text {
  margin-block: rem(8px);
  margin-inline: 0;
  font-family: var(--vtmn-typo_font-family);
  font-weight: var(--vtmn-typo_font-weight--normal);
  font-size: var(--vtmn-typo_text-3-font-size);
  line-height: rem(20px);
  align-self: flex-start;
  text-align: left;
}

.vtmn-popover > [role='dialog'] > button {
  margin: 0;
  align-self: flex-end;
}

/* ALL POPOVER */
.vtmn-popover > [role='dialog'] {
  box-sizing: border-box;
  min-inline-size: rem(250px);
  inline-size: auto;
  box-shadow: var(--vtmn-shadow_200);
  border-radius: var(--vtmn-radius_200);
  background-color: var(--vtmn-semantic-color_background-primary-reversed);
  color: var(--vtmn-semantic-color_content-primary-reversed);
  display: none;
  position: absolute;
  padding: rem(16px);
  animation: var(--vtmn-animation_fade-in);
  z-index: var(--vtmn-z-index_popover);
  cursor: default;
}

.vtmn-popover > [role='dialog']::after {
  border-radius: 0;
  content: ' ';
  block-size: 0;
  inline-size: 0;
  position: absolute;
  box-shadow: none;
}

.vtmn-popover:focus-within > [role='dialog'] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: auto;
}

.vtmn-popover:focus-visible {
  outline: none;
  box-shadow: var(--vtmn-shadow_focus-visible);
}

/* POSITION: TOP */
.vtmn-popover[data-position^='top'] > [role='dialog'] {
  bottom: calc(100% + 1.5em);
  left: 50%;
  transform: translateX(-50%);
}

.vtmn-popover[data-position^='top'] > [role='dialog']::after {
  border-left: solid transparent 0.6em;
  border-right: solid transparent 0.6em;
  border-top: solid var(--vtmn-semantic-color_background-primary-reversed)
    0.65em;
  bottom: -0.6em;
  left: 50%;
  transform: translateX(-50%);
}

/* POSITION: TOP-LEFT */
.vtmn-popover[data-position='top-left'] > [role='dialog']::after {
  left: 90%;
}

.vtmn-popover[data-position='top-left'] > [role='dialog'] {
  transform: translateX(-90%);
}

/* POSITION: TOP-RIGHT */
.vtmn-popover[data-position='top-right'] > [role='dialog']::after {
  left: 10%;
}

.vtmn-popover[data-position='top-right'] > [role='dialog'] {
  transform: translateX(-10%);
}

/* POSITION: BOTTOM */
.vtmn-popover[data-position^='bottom'] > [role='dialog'] {
  top: calc(100% + 1.5em);
  left: 50%;
  transform: translateX(-50%);
}

.vtmn-popover[data-position^='bottom'] > [role='dialog']::after {
  border-left: solid transparent 0.6em;
  border-right: solid transparent 0.6em;
  border-bottom: solid var(--vtmn-semantic-color_background-primary-reversed)
    0.65em;
  top: -0.6em;
  left: 50%;
  transform: translateX(-50%);
}

/* POSITION: BOTTOM-LEFT */
.vtmn-popover[data-position='bottom-left'] > [role='dialog']::after {
  left: 90%;
}

.vtmn-popover[data-position='bottom-left'] > [role='dialog'] {
  transform: translateX(-90%);
}

/* POSITION: BOTTOM-RIGHT */
.vtmn-popover[data-position='bottom-right'] > [role='dialog']::after {
  left: 10%;
}

.vtmn-popover[data-position='bottom-right'] > [role='dialog'] {
  transform: translateX(-10%);
}

/* POSITION: LEFT */
.vtmn-popover[data-position='left'] > [role='dialog'] {
  top: 50%;
  left: -1.5em;
  transform: translate(-100%, -50%);
}

.vtmn-popover[data-position='left'] > [role='dialog']::after {
  border-top: solid transparent 0.6em;
  border-bottom: solid transparent 0.6em;
  border-left: solid var(--vtmn-semantic-color_background-primary-reversed)
    0.65em;
  right: -0.6em;
  top: 50%;
  transform: translateY(-50%);
}

/* POSITION: RIGHT */
.vtmn-popover[data-position='right'] > [role='dialog'] {
  top: 50%;
  right: -1.5em;
  transform: translate(100%, -50%);
}

.vtmn-popover[data-position='right'] > [role='dialog']::after {
  border-top: solid transparent 0.6em;
  border-bottom: solid transparent 0.6em;
  border-right: solid var(--vtmn-semantic-color_background-primary-reversed)
    0.65em;
  left: -0.6em;
  top: 50%;
  transform: translateY(-50%);
}