wix-style-react/src/Tooltip/Tooltip.st.css

wix-style-react

:import {
  -st-from: 'wix-ui-core/dist/src/components/tooltip/Tooltip.st.css';
  -st-default: Tooltip;
}

:import {
  -st-from: 'wix-ui-core/src/mixins/calc';
  -st-default: calc;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D10, D80;
}

:import {
  -st-from: '../Foundation/stylable/shadows.st.css';
  -st-named: shadow30;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-3, ease-4;
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-small-normal, text-tiny-thin;
}

:import {
  -st-from: "wix-ui-core/dist/src/components/popover/Popover.st.css";
  -st-named: arrow, withArrow, popoverContent, popover;
}

:vars {
  contentArrowSize: 8px;
}

.root {
  -st-extends: Tooltip;
  -st-states: size(enum(small, medium));
  display: inline;
}


.root[data-hook*="popover-portal"] {
  /* This will cause the container's height to stay the same */
  display: block;
}

/* Popover Content */
.root > .popoverContent, 
.root > .popover > .popoverContent {
  border: none;

  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: value(shadow30);
  -webkit-font-smoothing: antialiased;
  -st-mixin: text-small-normal;

  padding: 12px 24px;


  color: value(D80);
  background: value(D10);
}

.root:size(small) > .popoverContent,
.root:size(small) > .popover > .popoverContent {
  border: none;

  border-radius: 8px;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;

  -st-mixin: text-tiny-thin;
  box-shadow: value(shadow30);
  padding: 8px 12px 7px 12px;


  color: value(D80);
  background: value(D10);
}

/* Popover Arrow  */

.root::popover > .arrow {
  box-sizing: border-box;

  width: value(contentArrowSize);
  height: value(contentArrowSize);

  background: transparent;
  border-color: transparent value(D10) value(D10) transparent;

  transform: rotateZ(45deg);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
}

.root::popover[data-placement] > .arrow  {
  border-width: 5px;
  border-color: transparent value(D10) value(D10) transparent;
  margin: 0;
}

/* Right side */
.root:size(small)::popover[data-placement*="right"] > .arrow {
  display: none;
}

.root::popover[data-placement*="right"].withArrow {
  padding-left: calc(value(contentArrowSize) - 2px);
}

.root::popover[data-placement*="right"] > .arrow {
  transform: rotateZ(135deg);
  left: calc(value(contentArrowSize) / 2 - 2px);

  margin-top: value(contentArrowSize);
  margin-bottom: value(contentArrowSize);
}

/* Left side */

.root:size(small)::popover[data-placement*="left"] > .arrow {
  display: none;
}

.root::popover[data-placement*="left"].withArrow {
  padding-right: calc(value(contentArrowSize) - 2px);
}

.root::popover[data-placement*="left"] > .arrow {
  transform: rotateZ(-45deg);
  right: calc(value(contentArrowSize) / 2 - 2px);

  margin-top: value(contentArrowSize);
  margin-bottom: value(contentArrowSize);
}

/* Top arrow */

.root:size(small)::popover[data-placement*="top"] > .arrow {
  display: none;
}

.root::popover[data-placement*="top"].withArrow {
  padding-bottom: calc(value(contentArrowSize) - 2px);
}

.root::popover[data-placement*="top"] > .arrow {
  transform: rotateZ(45deg);
  bottom: calc(value(contentArrowSize) / 2 - 2px);

  margin-left: value(contentArrowSize);
  margin-right: value(contentArrowSize);
}

/* Bottom arrow */

.root:size(small)::popover[data-placement*="bottom"] > .arrow {
  display: none;
}

.root::popover[data-placement*="bottom"].withArrow {
  padding-top: calc(value(contentArrowSize) - 2px);
}

.root::popover[data-placement*="bottom"] > .arrow {
  transform: rotateZ(-135deg);
  top: calc(value(contentArrowSize) / 2 - 2px);

  margin-left: value(contentArrowSize);
  margin-right: value(contentArrowSize);
}

/*
 * Entrance and exit animation
 */

.root::popoverAnimation-enter {
  opacity: 0;
  transform: scale(0.9);
}

.root::popoverAnimation-enter-active {
  opacity: 1;
  transform: scale(1);

  transition: opacity 150ms value(ease-3),
  transform 150ms value(ease-3);
}

.root::popoverAnimation-exit {
  opacity: 1;
  transform: scale(1);
}

.root::popoverAnimation-exit-active {
  opacity: 0;
  transform: scale(0.9);

  transition: opacity 100ms value(ease-4),
  transform 100ms value(ease-4);
}