@kaizen/components 1.5.0 → 1.5.2

package/dist/iife/Tooltip.module-YU7VOTNZ.scss

@@ -1,184 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/component-library/styles/layers";
-@import "./variables";
-
-.tooltip {
-  position: relative; // Make this a positioned element so z-index works. (Note: Popper overrides this to absolute.)
-  pointer-events: none;
-  z-index: $ca-z-index-tooltip;
-}
-
-.tooltipContent {
-  max-width: 400px;
-  padding: 0.4375rem 0.53125rem;
-  color: $color-purple-800;
-  text-align: center;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-heading-6-font-size;
-  font-weight: $typography-paragraph-body-font-weight;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  line-height: $typography-paragraph-small-line-height;
-  border-radius: $border-solid-border-radius;
-  transition: opacity $animation-duration-fast,
-    transform $animation-duration-fast;
-  box-shadow: $shadow-small-box-shadow;
-
-  &.default {
-    background-color: $color-white;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-gray-300;
-  }
-
-  &.informative {
-    background-color: $color-blue-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-blue-300;
-  }
-
-  &.positive {
-    background-color: $color-green-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-green-300;
-  }
-
-  &.cautionary {
-    background-color: $color-yellow-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-yellow-300;
-  }
-
-  &.highlight {
-    background-color: $color-purple-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-purple-300;
-  }
-}
-
-.arrow {
-  // Ensure the arrow always sits on top of the tooltipContent
-  z-index: 1;
-
-  // This is required by popper, otherwise positioning issues will exist.
-  // https://github.com/popperjs/react-popper/issues/354#issuecomment-616540651
-  position: absolute;
-
-  [data-popper-placement^="top"] & {
-    bottom: 0;
-  }
-
-  [data-popper-placement^="bottom"] & {
-    top: 0;
-
-    // There is a conflict with the popper arrow styling, which also
-    // adds a transform to the arrow. Hence, we need this additional
-    // wrapper, just to rotate it.
-    .arrowInner {
-      transform: rotate(180deg);
-    }
-  }
-
-  [data-popper-placement^="left"] & {
-    right: 0;
-    .arrowInner {
-      transform: rotate(270deg);
-    }
-  }
-  [data-popper-placement^="right"] & {
-    left: 0;
-    .arrowInner {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.arrowMain::before,
-.arrowMain::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  border-left: calc(#{$arrow-width} / 2) solid transparent;
-  border-right: calc(#{$arrow-width} / 2) solid transparent;
-  margin-left: calc(#{$arrow-width} / -2);
-}
-
-.arrowMain {
-  // before styles
-  &.default::before {
-    border-top: $arrow-height solid $color-gray-300;
-  }
-
-  &.informative::before {
-    border-top: $arrow-height solid $color-blue-300;
-  }
-
-  &.positive::before {
-    border-top: $arrow-height solid $color-green-300;
-  }
-
-  &.highlight::before {
-    border-top: $arrow-height solid $color-purple-300;
-  }
-
-  &.cautionary::before {
-    border-top: $arrow-height solid $color-yellow-300;
-  }
-  // after styles
-  &:after {
-    margin-top: -3px;
-  }
-
-  &.default::after {
-    border-top: $arrow-height solid white;
-  }
-
-  &.informative::after {
-    border-top: $arrow-height solid $color-blue-100;
-  }
-
-  &.positive::after {
-    border-top: $arrow-height solid $color-green-100;
-  }
-
-  &.highlight::after {
-    border-top: $arrow-height solid $color-purple-100;
-  }
-
-  &.cautionary::after {
-    border-top: $arrow-height solid $color-yellow-100;
-  }
-}
-
-.arrowShadow::before {
-  border-top: 0px solid $color-gray-300;
-}
-
-// Triangle portion is a little darker to bring out shadow
-.arrowShadow::after {
-  border-top: $arrow-height solid rgba($color-purple-800-rgb, 0.09);
-  margin-top: 1px;
-  filter: blur(4px);
-}
-
-.displayInline {
-  display: inline;
-}
-
-.displayBlock {
-  display: block;
-}
-
-.displayInlineBlock {
-  display: inline-block;
-}
-
-.displayFlex {
-  display: flex;
-}
-
-.displayInlineFlex {
-  display: inline-flex;
-}