@enact/sandstone/Popup/Popup.module.css

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

.popup {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  border-radius: 0.5rem;
}
.popup .body {
  font-family: "Sandstone";
  font-weight: normal;
  font-size: 1.25rem;
  line-height: 1.375rem;
  padding: 1rem 1.5rem;
  box-sizing: border-box;
  pointer-events: auto;
}
:global(.enact-locale-non-latin) .popup .body {
  font-family: "Sandstone";
  font-weight: normal;
}
:global(.enact-locale-km) .popup .body {
  line-height: 1.7em;
}
:global(.enact-locale-si) .popup .body {
  line-height: 1.7em;
}
:global(.enact-locale-th) .popup .body {
  line-height: 1.7em;
}
:global(.enact-locale-vi) .popup .body {
  line-height: 1.7em;
}
:global(.enact-locale-right-to-left) .popup .body {
  padding: 1rem 1.5rem 1rem 1.5rem;
}
:global(.enact-locale-ja) .popup .body {
  line-break: strict;
}
.popup.bottom .body,
.popup.top .body {
  max-width: 100%;
}
.popup.left .body,
.popup.right .body {
  height: 100%;
}
.popup.top {
  margin: 3.125rem 2.5rem 1.625rem 2.5rem;
}
.popup.right {
  margin: 2.5rem 1.25rem 2.5rem 0.75rem;
  max-height: calc(100% - 5rem );
}
.popup.bottom {
  margin: 0 2.5rem 3.125rem 2.5rem;
}
.popup.left {
  margin: 2.5rem 0.75rem 2.5rem 1.25rem;
  max-height: calc(100% - 5rem );
}
.popup.center {
  position: absolute;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup.fullscreen {
  border-radius: 0;
}
.popup.fullscreen .body {
  height: 100%;
  width: 100%;
}
.popup:global(.neutral) {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102), 90%);
}
.popup: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) .popup:global(.neutral):global(.highContrast) {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 0, 0, 0));
}
:global(.enact-a11y-high-contrast) .popup: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;
}
.popup:global(.light) {
  background-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 187, 187, 187), 90%);
}
.popup: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;
}
.popup:global(.game) {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102), 90%);
}
.popup: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) .popup:global(.game) {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102), 90%);
}
:global(.green) .popup: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) .popup:global(.game) {
  background-color: rgb(var(--sand-overlay-bg-color-rgb, 87, 94, 102), 90%);
}
:global(.orange) .popup: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;
}
.popupTransitionContainer {
  position: absolute;
  pointer-events: none;
}
.popupTransitionContainer.bottom,
.popupTransitionContainer.top {
  width: 100%;
}
.popupTransitionContainer.left,
.popupTransitionContainer.right {
  height: 100%;
}
.popupTransitionContainer.left .inner,
.popupTransitionContainer.right .inner {
  height: 100%;
}
.popupTransitionContainer.bottom {
  bottom: 0;
}
.popupTransitionContainer.left {
  left: 0;
}
.popupTransitionContainer.right {
  right: 0;
}
.popupTransitionContainer.top {
  top: 0;
}
.popupTransitionContainer.center,
.popupTransitionContainer.fullscreen {
  height: 100%;
  width: 100%;
}
.popupTransitionContainer.center .inner,
.popupTransitionContainer.fullscreen .inner {
  height: 100%;
  width: 100%;
}