@enact/limestone 1.3.0

package/TooltipDecorator/Tooltip.module.css

@@ -0,0 +1,496 @@
+.tooltip {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+}
+.tooltip .tooltipArrow {
+  position: absolute;
+  width: 0.64583rem;
+  height: 0.77083rem;
+  z-index: 1;
+}
+.tooltip .tooltipArrow::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.tooltip.topArrow .tooltipArrow,
+.tooltip.bottomArrow .tooltipArrow,
+.tooltip.middleArrow .tooltipArrow {
+  width: 0.77083rem;
+  height: 0.64583rem;
+}
+.tooltip.centerArrow .tooltipArrow {
+  left: 50%;
+}
+.tooltip.middleArrow .tooltipArrow {
+  top: 50%;
+}
+.tooltip .tooltipLabel {
+  --lime-tooltip-label-width: auto;
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-54);
+  font-style: normal;
+  font-kerning: normal;
+  font-size: 1.125rem;
+  font-weight: var(--primitive-font-weight-semibold);
+  line-height: 1.5rem;
+  white-space: nowrap;
+  width: var(--lime-tooltip-label-width);
+  max-width: 25rem;
+  padding: var(--primitive-spacing-12) var(--primitive-spacing-48);
+  border-radius: var(--semantic-radius-button);
+}
+:global(.enact-locale-non-latin) .tooltip .tooltipLabel {
+  font-family: "Limestone";
+}
+:global(.enact-locale-non-latin) .tooltip .tooltipLabel {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-48);
+  font-style: normal;
+  font-weight: var(--primitive-font-weight-bold);
+}
+:global(.enact-locale-right-to-left) .tooltip .tooltipLabel {
+  text-align: right;
+}
+.tooltip .tooltipLabel.marquee {
+  max-width: var(--lime-tooltip-label-width, 12.5rem);
+}
+.tooltip .tooltipLabel.multi {
+  white-space: normal;
+}
+:global(.enact-locale-ja) .tooltip .tooltipLabel.multi {
+  line-break: strict;
+}
+.tooltip.balloon {
+  /* Needed to prevent global class being added in the DOM */
+}
+.tooltip.transparent .tooltipLabel {
+  font-weight: var(--primitive-font-weight-regular);
+  font-size: 0.75rem;
+}
+.tooltip.transparent .tooltipArrow {
+  display: none;
+}
+.tooltip.transparent.below .tooltipLabel {
+  margin-top: 0rem;
+}
+.tooltip.transparent.above .tooltipLabel {
+  margin-bottom: 0rem;
+}
+.tooltip.transparent.left .tooltipLabel {
+  margin-right: 0rem;
+}
+.tooltip.transparent.right .tooltipLabel {
+  margin-left: 0rem;
+}
+.tooltip.below .tooltipArrow {
+  top: 0;
+}
+.tooltip.below .tooltipLabel {
+  margin-top: var(--primitive-spacing-18);
+}
+.tooltip.below.leftArrow .tooltipArrow {
+  right: 0;
+  overflow: hidden;
+}
+.tooltip.below.leftArrow .tooltipArrow::after {
+  left: 0;
+  transform-origin: top right;
+  transform: rotate(-45deg) skew(-45deg, 0);
+}
+.tooltip.below.leftArrow .tooltipLabel {
+  text-align: right;
+  border-top-right-radius: 0;
+}
+.tooltip.below.centerArrow .tooltipArrow {
+  left: 50%;
+}
+.tooltip.below.centerArrow .tooltipArrow::after {
+  top: 0;
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  transform: translateX(-50%);
+}
+.tooltip.below.rightArrow .tooltipArrow {
+  left: 0;
+  overflow: hidden;
+}
+.tooltip.below.rightArrow .tooltipArrow::after {
+  left: 0;
+  transform-origin: top left;
+  transform: rotate(45deg) skew(45deg, 0);
+}
+.tooltip.below.rightArrow .tooltipLabel {
+  border-top-left-radius: 0;
+}
+.tooltip.above .tooltipArrow {
+  bottom: 0;
+}
+.tooltip.above .tooltipLabel {
+  margin-bottom: var(--primitive-spacing-18);
+}
+.tooltip.above.leftArrow .tooltipArrow {
+  right: 0;
+  overflow: hidden;
+}
+.tooltip.above.leftArrow .tooltipArrow::after {
+  left: 0;
+  transform-origin: bottom right;
+  transform: rotate(45deg) skew(45deg, 0);
+}
+.tooltip.above.leftArrow .tooltipLabel {
+  text-align: right;
+  border-bottom-right-radius: 0;
+}
+.tooltip.above.centerArrow .tooltipArrow::after {
+  bottom: 0;
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  transform: translateX(-50%);
+}
+.tooltip.above.rightArrow .tooltipArrow {
+  left: 0;
+  overflow: hidden;
+}
+.tooltip.above.rightArrow .tooltipArrow::after {
+  left: 0;
+  transform-origin: bottom left;
+  transform: rotate(-45deg) skew(-45deg, 0);
+}
+.tooltip.above.rightArrow .tooltipLabel {
+  border-bottom-left-radius: 0;
+}
+.tooltip.left .tooltipArrow {
+  right: 0;
+}
+.tooltip.left .tooltipLabel {
+  margin-right: calc( var(--primitive-spacing-18) - 1px);
+}
+.tooltip.left.topArrow .tooltipArrow {
+  bottom: 0;
+  overflow: hidden;
+}
+.tooltip.left.topArrow .tooltipArrow::after {
+  left: 0;
+  transform-origin: bottom right;
+  transform: rotate(-45deg) skew(0, 45deg);
+}
+.tooltip.left.topArrow .tooltipLabel {
+  border-bottom-right-radius: 0;
+}
+.tooltip.left.middleArrow .tooltipArrow::after {
+  right: 0;
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  transform: translateY(-50%);
+}
+.tooltip.left.bottomArrow .tooltipArrow {
+  overflow: hidden;
+}
+.tooltip.left.bottomArrow .tooltipArrow::after {
+  left: 0;
+  transform-origin: top right;
+  transform: rotate(45deg) skew(0, -45deg);
+}
+.tooltip.left.bottomArrow .tooltipLabel {
+  border-top-right-radius: 0;
+}
+.tooltip.right .tooltipArrow {
+  left: 0;
+}
+.tooltip.right .tooltipLabel {
+  margin-left: var(--primitive-spacing-18);
+}
+.tooltip.right.topArrow .tooltipArrow {
+  bottom: 0;
+  overflow: hidden;
+}
+.tooltip.right.topArrow .tooltipArrow::after {
+  left: 0;
+  transform-origin: bottom left;
+  transform: rotate(45deg) skew(0, -45deg);
+}
+.tooltip.right.topArrow .tooltipLabel {
+  border-bottom-left-radius: 0;
+}
+.tooltip.right.middleArrow .tooltipArrow::after {
+  left: 0;
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  transform: translateY(-50%);
+}
+.tooltip.right.bottomArrow .tooltipArrow {
+  overflow: hidden;
+}
+.tooltip.right.bottomArrow .tooltipArrow::after {
+  left: 0;
+  transform-origin: top left;
+  transform: rotate(-45deg) skew(0, 45deg);
+}
+.tooltip.right.bottomArrow .tooltipLabel {
+  border-top-left-radius: 0;
+}
+.tooltip.absolute {
+  width: 0;
+  height: 0;
+  top: var(--tooltip-position-top);
+  left: var(--tooltip-position-left);
+}
+.tooltip.absolute .tooltipAnchor {
+  position: absolute;
+}
+.tooltip.absolute.below {
+  top: calc(var(--tooltip-position-top) + var(--primitive-spacing-24) );
+}
+.tooltip.absolute.below.transparent {
+  top: calc(var(--tooltip-position-top) + 0rem );
+}
+.tooltip.absolute.below.leftArrow .tooltipAnchor {
+  transform: translateX(-100%);
+}
+.tooltip.absolute.below.centerArrow .tooltipAnchor {
+  transform: translateX(-50%);
+}
+.tooltip.absolute.below.rightArrow .tooltipAnchor {
+  /* transform: translate(0, 0); */
+}
+.tooltip.absolute.above {
+  top: calc(var(--tooltip-position-top) - var(--primitive-spacing-24) );
+}
+.tooltip.absolute.above.transparent {
+  top: calc(var(--tooltip-position-top) - 0rem );
+}
+.tooltip.absolute.above.leftArrow .tooltipAnchor {
+  transform: translate(-100%, -100%);
+}
+.tooltip.absolute.above.centerArrow .tooltipAnchor {
+  transform: translate(-50%, -100%);
+}
+.tooltip.absolute.above.rightArrow .tooltipAnchor {
+  transform: translate(0, -100%);
+}
+.tooltip.absolute.left {
+  left: calc(var(--tooltip-position-left) - var(--primitive-spacing-24) );
+}
+.tooltip.absolute.left.transparent {
+  left: calc(var(--tooltip-position-left) - 0rem );
+}
+.tooltip.absolute.left.topArrow .tooltipAnchor {
+  transform: translate(-100%, -100%);
+}
+.tooltip.absolute.left.middleArrow .tooltipAnchor {
+  transform: translate(-100%, -50%);
+}
+.tooltip.absolute.left.bottomArrow .tooltipAnchor {
+  transform: translate(-100%, 0);
+}
+.tooltip.absolute.right {
+  left: calc(var(--tooltip-position-left) + var(--primitive-spacing-24) );
+}
+.tooltip.absolute.right.transparent {
+  left: calc(var(--tooltip-position-left) + 0rem );
+}
+.tooltip.absolute.right.topArrow .tooltipAnchor {
+  transform: translate(0, -100%);
+}
+.tooltip.absolute.right.middleArrow .tooltipAnchor {
+  transform: translate(0, -50%);
+}
+.tooltip.absolute.right.bottomArrow .tooltipAnchor {
+  /* transform: translate(0, 0); */
+}
+.tooltip.relative.below {
+  top: calc(100% + var(--primitive-spacing-24) );
+}
+.tooltip.relative.below.transparent {
+  top: calc(100% + 0rem );
+}
+.tooltip.relative.below.leftArrow {
+  right: 50%;
+}
+.tooltip.relative.below.centerArrow,
+.tooltip.relative.below.rightArrow {
+  left: 50%;
+}
+.tooltip.relative.below.centerArrow {
+  transform: translateX(-50%);
+}
+.tooltip.relative.above {
+  bottom: calc(100% + var(--primitive-spacing-24) );
+}
+.tooltip.relative.above.transparent {
+  bottom: calc(100% + 0rem );
+}
+.tooltip.relative.above.leftArrow {
+  right: 50%;
+}
+.tooltip.relative.above.centerArrow,
+.tooltip.relative.above.rightArrow {
+  left: 50%;
+}
+.tooltip.relative.above.centerArrow {
+  transform: translateX(-50%);
+}
+.tooltip.relative.left {
+  right: calc(100% + var(--primitive-spacing-24) );
+}
+.tooltip.relative.left.transparent {
+  right: calc(100% + 0rem );
+}
+.tooltip.relative.left.topArrow {
+  bottom: 50%;
+}
+.tooltip.relative.left.middleArrow,
+.tooltip.relative.left.bottomArrow {
+  top: 50%;
+}
+.tooltip.relative.left.middleArrow {
+  transform: translateY(-50%);
+}
+.tooltip.relative.right {
+  left: calc(100% + var(--primitive-spacing-24) );
+}
+.tooltip.relative.right.transparent {
+  left: calc(100% + 0rem );
+}
+.tooltip.relative.right.topArrow {
+  bottom: 50%;
+}
+.tooltip.relative.right.middleArrow,
+.tooltip.relative.right.bottomArrow {
+  top: 50%;
+}
+.tooltip.relative.right.middleArrow {
+  transform: translateY(-50%);
+}
+:global(.enact-locale-right-to-left) .tooltip {
+  direction: ltr;
+}
+:global(.enact-locale-right-to-left) .tooltip .tooltipAnchor {
+  direction: rtl;
+}
+.tooltip:global(.neutral) {
+  filter: drop-shadow(0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35));
+}
+:global(.noAnimation) .tooltip:global(.neutral) {
+  filter: none;
+}
+.tooltip:global(.neutral).transparent {
+  filter: none;
+}
+.tooltip:global(.neutral).transparent .tooltipLabel {
+  color: #fff;
+  background-color: transparent;
+}
+.tooltip:global(.neutral) .tooltipArrow::after {
+  background: var(--semantic-color-surface-white);
+}
+.tooltip:global(.neutral) .tooltipLabel {
+  color: var(--semantic-color-on-surface-black);
+  background-color: var(--semantic-color-surface-white);
+}
+:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast) {
+  filter: drop-shadow(0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35));
+}
+:global(.noAnimation) :global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast) {
+  filter: none;
+}
+:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast).transparent {
+  filter: none;
+}
+:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast).transparent .tooltipLabel {
+  color: #fff;
+  background-color: transparent;
+}
+:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast) .tooltipArrow::after {
+  background: var(--semantic-color-surface-white);
+}
+:global(.enact-a11y-high-contrast) .tooltip:global(.neutral):global(.highContrast) .tooltipLabel {
+  color: var(--semantic-color-on-surface-black);
+  background-color: var(--semantic-color-surface-white);
+}
+.tooltip:global(.light) {
+  filter: drop-shadow(0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35));
+}
+:global(.noAnimation) .tooltip:global(.light) {
+  filter: none;
+}
+.tooltip:global(.light).transparent {
+  filter: none;
+}
+.tooltip:global(.light).transparent .tooltipLabel {
+  color: #fff;
+  background-color: transparent;
+}
+.tooltip:global(.light) .tooltipArrow::after {
+  background: var(--semantic-color-surface-white);
+}
+.tooltip:global(.light) .tooltipLabel {
+  color: var(--semantic-color-on-surface-black);
+  background-color: var(--semantic-color-surface-white);
+}
+.tooltip:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  filter: drop-shadow(0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35));
+}
+:global(.noAnimation) .tooltip:global(.game) {
+  filter: none;
+}
+.tooltip:global(.game).transparent {
+  filter: none;
+}
+.tooltip:global(.game).transparent .tooltipLabel {
+  color: #fff;
+  background-color: transparent;
+}
+.tooltip:global(.game) .tooltipArrow::after {
+  background: var(--semantic-color-surface-white);
+}
+.tooltip:global(.game) .tooltipLabel {
+  color: var(--semantic-color-on-surface-black);
+  background-color: var(--semantic-color-surface-white);
+}
+:global(.green) .tooltip:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  filter: drop-shadow(0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35));
+}
+:global(.noAnimation) :global(.green) .tooltip:global(.game) {
+  filter: none;
+}
+:global(.green) .tooltip:global(.game).transparent {
+  filter: none;
+}
+:global(.green) .tooltip:global(.game).transparent .tooltipLabel {
+  color: #fff;
+  background-color: transparent;
+}
+:global(.green) .tooltip:global(.game) .tooltipArrow::after {
+  background: var(--semantic-color-surface-white);
+}
+:global(.green) .tooltip:global(.game) .tooltipLabel {
+  color: var(--semantic-color-on-surface-black);
+  background-color: var(--semantic-color-surface-white);
+}
+:global(.orange) .tooltip:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  filter: drop-shadow(0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35));
+}
+:global(.noAnimation) :global(.orange) .tooltip:global(.game) {
+  filter: none;
+}
+:global(.orange) .tooltip:global(.game).transparent {
+  filter: none;
+}
+:global(.orange) .tooltip:global(.game).transparent .tooltipLabel {
+  color: #fff;
+  background-color: transparent;
+}
+:global(.orange) .tooltip:global(.game) .tooltipArrow::after {
+  background: var(--semantic-color-surface-white);
+}
+:global(.orange) .tooltip:global(.game) .tooltipLabel {
+  color: var(--semantic-color-on-surface-black);
+  background-color: var(--semantic-color-surface-white);
+}