@enact/sandstone/ContextualPopupDecorator/ContextualPopup.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.contextualPopup {
  font-weight: normal;
  font-size: 1.25rem;
  font-style: normal;
  font-family: "Sandstone";
  line-height: 1.375rem;
  position: absolute;
}
:global(.enact-locale-non-latin) .contextualPopup {
  font-family: "Sandstone";
}
:global(.enact-locale-non-latin) .contextualPopup {
  font-family: "Sandstone";
  font-weight: 300;
  font-size: 1.125rem;
  font-style: normal;
}
:global(.enact-locale-km) .contextualPopup {
  line-height: 1.7em;
}
:global(.enact-locale-si) .contextualPopup {
  line-height: 1.7em;
}
:global(.enact-locale-th) .contextualPopup {
  line-height: 1.7em;
}
:global(.enact-locale-vi) .contextualPopup {
  line-height: 1.7em;
}
.contextualPopup a:link {
  color: inherit;
  text-decoration: none;
}
.contextualPopup a:visited {
  color: inherit;
  text-decoration: none;
}
.contextualPopup a:hover {
  color: inherit;
  text-decoration: none;
}
.contextualPopup a:active {
  color: inherit;
  text-decoration: none;
}
.contextualPopup .container {
  position: absolute;
  min-height: 4rem;
  min-width: 4rem;
  padding: 0.75rem 0;
  background-clip: padding-box;
  box-sizing: border-box;
}
.contextualPopup .container.none,
.contextualPopup .container.center {
  /* Needed to prevent global class being added in the DOM */
}
.contextualPopup .container.above.overlap {
  margin-top: 0.75rem;
}
.contextualPopup .container.above.small {
  margin-top: -0.375rem;
}
.contextualPopup .container.below.overlap {
  margin-top: -0.75rem;
}
.contextualPopup .container.below.small {
  margin-top: 0.375rem;
}
.contextualPopup .container.right.top.overlap,
.contextualPopup .container.right.middle.overlap,
.contextualPopup .container.right.bottom.overlap {
  margin-left: -0.75rem;
}
.contextualPopup .container.right.top.small,
.contextualPopup .container.right.middle.small,
.contextualPopup .container.right.bottom.small {
  margin-left: 0.375rem;
}
.contextualPopup .container.left.top.overlap,
.contextualPopup .container.left.middle.overlap,
.contextualPopup .container.left.bottom.overlap {
  margin-left: 0.75rem;
}
.contextualPopup .container.left.top.small,
.contextualPopup .container.left.middle.small,
.contextualPopup .container.left.bottom.small {
  margin-left: -0.375rem;
}
.contextualPopup .container.fixedSize {
  overflow: hidden;
}
:global(.enact-locale-right-to-left) .contextualPopup .container {
  direction: rtl;
}
.contextualPopup .arrow {
  position: absolute;
  height: 1.25rem;
  width: 1.25rem;
}
.contextualPopup .arrow.above {
  transform: rotate(180deg);
}
.contextualPopup .arrow.left {
  transform: rotate(90deg);
}
.contextualPopup .arrow.right {
  transform: rotate(-90deg);
}
.contextualPopup:global(.neutral) .container {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102));
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.contextualPopup:global(.neutral) .arrow {
  stroke: var(--sand-overlay-outline-color, transparent);
  stroke-width: 0.0625rem;
}
.contextualPopup:global(.neutral) .arrow .arrowFill {
  fill: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102));
}
.contextualPopup:global(.neutral) .outline {
  outline-color: var(--sand-overlay-outline-color, transparent);
  outline-style: var(--sand-overlay-outline-style, none);
  outline-width: 0.0625rem;
  outline-offset: -0.0625rem;
}
:global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .container {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 0, 0, 0));
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .arrow {
  stroke: var(--sand-overlay-outline-color, #7c848b);
  stroke-width: 0.0625rem;
}
:global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .arrow .arrowFill {
  fill: rgb(var(--sand-overlay-bg-color-rgb, 0, 0, 0));
}
:global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .outline {
  outline-color: var(--sand-overlay-outline-color, #7c848b);
  outline-style: var(--sand-overlay-outline-style, solid);
  outline-width: 0.0625rem;
  outline-offset: -0.0625rem;
}
.contextualPopup:global(.light) .container {
  background-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 187, 187, 187));
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.contextualPopup:global(.light) .arrow {
  stroke: var(--sand-overlay-outline-color, transparent);
  stroke-width: 0.0625rem;
}
.contextualPopup:global(.light) .arrow .arrowFill {
  fill: rgb(var(--sand-alert-overlay-bg-color-rgb, 187, 187, 187));
}
.contextualPopup:global(.light) .outline {
  outline-color: var(--sand-overlay-outline-color, transparent);
  outline-style: var(--sand-overlay-outline-style, none);
  outline-width: 0.0625rem;
  outline-offset: -0.0625rem;
}
.contextualPopup:global(.game) .container {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102));
  border-radius: 0;
  box-shadow: 0 0.5rem 1.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.contextualPopup:global(.game) .arrow {
  stroke: var(--sand-overlay-outline-color, transparent);
  stroke-width: 0.0625rem;
}
.contextualPopup:global(.game) .arrow .arrowFill {
  fill: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102));
}
.contextualPopup:global(.game) .outline {
  outline-color: var(--sand-overlay-outline-color, transparent);
  outline-style: var(--sand-overlay-outline-style, none);
  outline-width: 0.0625rem;
  outline-offset: -0.0625rem;
}
:global(.green) .contextualPopup:global(.game) .container {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102));
  border-radius: 0;
  box-shadow: 0 0.5rem 1.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.green) .contextualPopup:global(.game) .arrow {
  stroke: var(--sand-overlay-outline-color, transparent);
  stroke-width: 0.0625rem;
}
:global(.green) .contextualPopup:global(.game) .arrow .arrowFill {
  fill: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102));
}
:global(.green) .contextualPopup:global(.game) .outline {
  outline-color: var(--sand-overlay-outline-color, transparent);
  outline-style: var(--sand-overlay-outline-style, none);
  outline-width: 0.0625rem;
  outline-offset: -0.0625rem;
}
:global(.orange) .contextualPopup:global(.game) .container {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102));
  border-radius: 0;
  box-shadow: 0 0.5rem 1.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.orange) .contextualPopup:global(.game) .arrow {
  stroke: var(--sand-overlay-outline-color, transparent);
  stroke-width: 0.0625rem;
}
:global(.orange) .contextualPopup:global(.game) .arrow .arrowFill {
  fill: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102));
}
:global(.orange) .contextualPopup:global(.game) .outline {
  outline-color: var(--sand-overlay-outline-color, transparent);
  outline-style: var(--sand-overlay-outline-style, none);
  outline-width: 0.0625rem;
  outline-offset: -0.0625rem;
}