@testgorilla/tgo-ui 3.14.11-beta.1 → 3.14.12

package/projects/tgo-canopy-ui/theme/_tooltip.scss

@@ -1,320 +1,320 @@
-@use "./variables" as *;
-
-@mixin rebranded-tooltip {
-  background-color: $black;
-  border: 1px solid $tgo-white;
-  border-radius: 4px;
-  --mdc-plain-tooltip-container-color: none;
-  color: $tgo-white;
-  --mdc-plain-tooltip-supporting-text-color: $tgo-white !important;
-}
-
-@mixin rebranded-tooltip-right {
-  margin-left: 5px;
-  &:after {
-    content: "";
-    position: absolute;
-    left: -8px;
-    top: calc(50% - 7px);
-    height: 15px;
-    width: 15px;
-    border-top: 1px solid $tgo-white;
-    border-right: 1px solid $tgo-white;
-    background: $black;
-    z-index: 10;
-    border-top-right-radius: 4px;
-    transform: rotate(-135deg);
-  }
-}
-
-@mixin rebranded-tooltip-left {
-  margin-right: 5px;
-  &:after {
-    content: "";
-    position: absolute;
-    right: -8px;
-    top: calc(50% - 7px);
-    height: 15px;
-    width: 15px;
-    border-top: 1px solid $tgo-white;
-    border-right: 1px solid $tgo-white;
-    background: $black;
-    z-index: 10;
-    border-top-right-radius: 4px;
-    transform: rotate(45deg);
-  }
-}
-
-@mixin rebranded-tooltip-below {
-  margin-top: 5px;
-  &:after {
-    content: "";
-    position: absolute;
-    right: calc(50% - 7px);
-    top: -8px;
-    height: 15px;
-    width: 15px;
-    border-top: 1px solid $tgo-white;
-    border-right: 1px solid $tgo-white;
-    background: $black;
-    z-index: 10;
-    border-top-right-radius: 4px;
-    transform: rotate(-45deg);
-  }
-}
-
-@mixin rebranded-tooltip-above {
-  margin-bottom: 5px;
-  &:after {
-    content: "";
-    position: absolute;
-    right: calc(50% - 7px);
-    bottom: -8px;
-    height: 15px;
-    width: 15px;
-    border-top: 1px solid $tgo-white;
-    border-right: 1px solid $tgo-white;
-    background: $black;
-    z-index: 10;
-    border-top-right-radius: 4px;
-    transform: rotate(135deg);
-  }
-
-}
-
-.mat-mdc-tooltip {
-  background-color: $tgo-petrol-60w;
-  font-weight: 600;
-  font-size: 12px;
-  border-radius: 4px;
-  overflow: visible;
-  max-width: 248px;
-  padding: 6px 2px;
-  --mdc-plain-tooltip-container-color: none;
-  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
-}
-
-body {
-  &[theme="dark"], &[theme="light"] {
-    .mat-mdc-tooltip {
-      @include rebranded-tooltip()
-    }
-
-    .mat-mdc-tooltip-panel-right .mat-mdc-tooltip-show {
-      @include rebranded-tooltip-right()
-    }
-
-    .mat-mdc-tooltip-panel-left .mat-mdc-tooltip-show {
-      @include rebranded-tooltip-left()
-    }
-
-    .mat-mdc-tooltip-panel-below .mat-mdc-tooltip-show {
-      @include rebranded-tooltip-below()
-    }
-
-    .mat-mdc-tooltip-panel-above .mat-mdc-tooltip-show {
-      @include rebranded-tooltip-above()
-    }
-  }
-}
-
-.mat-mdc-tooltip {
-  &.light, &.dark {
-    @include rebranded-tooltip()
-  }
-}
-
-.mat-mdc-tooltip-panel-right .mat-mdc-tooltip-show {
-  &.light, &.dark {
-    @include rebranded-tooltip-right()
-  }
-}
-
-
-.mat-mdc-tooltip-panel-left .mat-mdc-tooltip-show {
-  &.light, &.dark {
-    @include rebranded-tooltip-left()
-  }
-}
-
-.mat-mdc-tooltip-panel-below .mat-mdc-tooltip-show {
-  &.light, &.dark {
-    @include rebranded-tooltip-below()
-  }
-}
-
-.mat-mdc-tooltip-panel-above .mat-mdc-tooltip-show {
-  &.light, &.dark {
-    @include rebranded-tooltip-above()
-  }
-}
-
-.template-tooltip {
-  padding: 8px;
-  background: $black;
-  color: $tgo-white;
-  border-radius: 6px;
-  border: 1px solid $tgo-white;
-}
-
-.top {
-  .template-tooltip {
-    @include rebranded-tooltip-above();
-
-    &:after {
-      bottom: -3px;
-    }
-  }
-}
-
-.bottom {
-  .template-tooltip {
-    @include rebranded-tooltip-below();
-
-    &:after {
-      top: -3px;
-    }
-  }
-}
-
-
-.right {
-  .template-tooltip {
-    @include rebranded-tooltip-right();
-
-    &:after {
-      transition: none!important;
-      left: -3px;
-    }
-  }
-}
-
-
-.left {
-  .template-tooltip {
-    @include rebranded-tooltip-left();
-
-    &:after {
-      right: -3px;
-    }
-  }
-}
-
-.template-tooltip {
-  padding: 8px;
-  background: $black;
-  color: $tgo-white;
-  border-radius: 6px;
-  border: 1px solid $tgo-white;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  animation: fadeIn 0.3s ease-in-out;
-}
-
-.top {
-  .template-tooltip {
-    @include rebranded-tooltip-above();
-
-    &:after {
-      bottom: -7px;
-    }
-  }
-}
-
-.bottom {
-  .template-tooltip {
-    @include rebranded-tooltip-below();
-
-    &:after {
-      top: -7px;
-    }
-  }
-}
-
-
-.right {
-  .template-tooltip {
-    @include rebranded-tooltip-right();
-
-    &:after {
-      left: -2px;
-    }
-  }
-}
-
-
-.left {
-  .template-tooltip {
-    @include rebranded-tooltip-left();
-
-    &:after {
-      right: -2px;
-    }
-  }
-}
-
-.definition-tooltip {
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  text-underline-offset: 3px;
-  border-radius: 4px;
-  outline-offset: 2px;
-  outline-width: 2px;
-  width: 100% !important;
-  max-width: fit-content !important;
-  display: inline-flex;
-
-  &:focus-visible {
-    outline-color: $tgo-black !important;
-    outline-offset: 4px;
-  }
-}
-
-.label-definition {
-  &-inner {
-    display: flex;
-    font-weight: bold!important;
-    font-size: 12px;
-    line-height: 16px;
-  }
-
-  &-outside {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    &.tooltip-size-small {
-      font-size: 12px;
-      line-height: 14.4px;
-    }
-
-    &.tooltip-size-medium {
-      font-size: 14px;
-      line-height: 16.8px;
-    }
-
-    &.tooltip-size-large {
-      font-size: 16px;
-      line-height: 19.2px;
-    }
-  }
-}
-
-.text-definition {
-  font-weight: normal!important;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.cdk-overlay-container {
-  z-index: 999999999;
-}
+@use "./variables" as *;
+
+@mixin rebranded-tooltip {
+  background-color: $black;
+  border: 1px solid $tgo-white;
+  border-radius: 4px;
+  --mdc-plain-tooltip-container-color: none;
+  color: $tgo-white;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-white !important;
+}
+
+@mixin rebranded-tooltip-right {
+  margin-left: 5px;
+  &:after {
+    content: "";
+    position: absolute;
+    left: -8px;
+    top: calc(50% - 7px);
+    height: 15px;
+    width: 15px;
+    border-top: 1px solid $tgo-white;
+    border-right: 1px solid $tgo-white;
+    background: $black;
+    z-index: 10;
+    border-top-right-radius: 4px;
+    transform: rotate(-135deg);
+  }
+}
+
+@mixin rebranded-tooltip-left {
+  margin-right: 5px;
+  &:after {
+    content: "";
+    position: absolute;
+    right: -8px;
+    top: calc(50% - 7px);
+    height: 15px;
+    width: 15px;
+    border-top: 1px solid $tgo-white;
+    border-right: 1px solid $tgo-white;
+    background: $black;
+    z-index: 10;
+    border-top-right-radius: 4px;
+    transform: rotate(45deg);
+  }
+}
+
+@mixin rebranded-tooltip-below {
+  margin-top: 5px;
+  &:after {
+    content: "";
+    position: absolute;
+    right: calc(50% - 7px);
+    top: -8px;
+    height: 15px;
+    width: 15px;
+    border-top: 1px solid $tgo-white;
+    border-right: 1px solid $tgo-white;
+    background: $black;
+    z-index: 10;
+    border-top-right-radius: 4px;
+    transform: rotate(-45deg);
+  }
+}
+
+@mixin rebranded-tooltip-above {
+  margin-bottom: 5px;
+  &:after {
+    content: "";
+    position: absolute;
+    right: calc(50% - 7px);
+    bottom: -8px;
+    height: 15px;
+    width: 15px;
+    border-top: 1px solid $tgo-white;
+    border-right: 1px solid $tgo-white;
+    background: $black;
+    z-index: 10;
+    border-top-right-radius: 4px;
+    transform: rotate(135deg);
+  }
+
+}
+
+.mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-weight: 600;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}
+
+body {
+  &[theme="dark"], &[theme="light"] {
+    .mat-mdc-tooltip {
+      @include rebranded-tooltip()
+    }
+
+    .mat-mdc-tooltip-panel-right .mat-mdc-tooltip-show {
+      @include rebranded-tooltip-right()
+    }
+
+    .mat-mdc-tooltip-panel-left .mat-mdc-tooltip-show {
+      @include rebranded-tooltip-left()
+    }
+
+    .mat-mdc-tooltip-panel-below .mat-mdc-tooltip-show {
+      @include rebranded-tooltip-below()
+    }
+
+    .mat-mdc-tooltip-panel-above .mat-mdc-tooltip-show {
+      @include rebranded-tooltip-above()
+    }
+  }
+}
+
+.mat-mdc-tooltip {
+  &.light, &.dark {
+    @include rebranded-tooltip()
+  }
+}
+
+.mat-mdc-tooltip-panel-right .mat-mdc-tooltip-show {
+  &.light, &.dark {
+    @include rebranded-tooltip-right()
+  }
+}
+
+
+.mat-mdc-tooltip-panel-left .mat-mdc-tooltip-show {
+  &.light, &.dark {
+    @include rebranded-tooltip-left()
+  }
+}
+
+.mat-mdc-tooltip-panel-below .mat-mdc-tooltip-show {
+  &.light, &.dark {
+    @include rebranded-tooltip-below()
+  }
+}
+
+.mat-mdc-tooltip-panel-above .mat-mdc-tooltip-show {
+  &.light, &.dark {
+    @include rebranded-tooltip-above()
+  }
+}
+
+.template-tooltip {
+  padding: 8px;
+  background: $black;
+  color: $tgo-white;
+  border-radius: 6px;
+  border: 1px solid $tgo-white;
+}
+
+.top {
+  .template-tooltip {
+    @include rebranded-tooltip-above();
+
+    &:after {
+      bottom: -3px;
+    }
+  }
+}
+
+.bottom {
+  .template-tooltip {
+    @include rebranded-tooltip-below();
+
+    &:after {
+      top: -3px;
+    }
+  }
+}
+
+
+.right {
+  .template-tooltip {
+    @include rebranded-tooltip-right();
+
+    &:after {
+      transition: none!important;
+      left: -3px;
+    }
+  }
+}
+
+
+.left {
+  .template-tooltip {
+    @include rebranded-tooltip-left();
+
+    &:after {
+      right: -3px;
+    }
+  }
+}
+
+.template-tooltip {
+  padding: 8px;
+  background: $black;
+  color: $tgo-white;
+  border-radius: 6px;
+  border: 1px solid $tgo-white;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.top {
+  .template-tooltip {
+    @include rebranded-tooltip-above();
+
+    &:after {
+      bottom: -7px;
+    }
+  }
+}
+
+.bottom {
+  .template-tooltip {
+    @include rebranded-tooltip-below();
+
+    &:after {
+      top: -7px;
+    }
+  }
+}
+
+
+.right {
+  .template-tooltip {
+    @include rebranded-tooltip-right();
+
+    &:after {
+      left: -2px;
+    }
+  }
+}
+
+
+.left {
+  .template-tooltip {
+    @include rebranded-tooltip-left();
+
+    &:after {
+      right: -2px;
+    }
+  }
+}
+
+.definition-tooltip {
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 3px;
+  border-radius: 4px;
+  outline-offset: 2px;
+  outline-width: 2px;
+  width: 100% !important;
+  max-width: fit-content !important;
+  display: inline-flex;
+
+  &:focus-visible {
+    outline-color: $tgo-black !important;
+    outline-offset: 4px;
+  }
+}
+
+.label-definition {
+  &-inner {
+    display: flex;
+    font-weight: bold!important;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &-outside {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &.tooltip-size-small {
+      font-size: 12px;
+      line-height: 14.4px;
+    }
+
+    &.tooltip-size-medium {
+      font-size: 14px;
+      line-height: 16.8px;
+    }
+
+    &.tooltip-size-large {
+      font-size: 16px;
+      line-height: 19.2px;
+    }
+  }
+}
+
+.text-definition {
+  font-weight: normal!important;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.cdk-overlay-container {
+  z-index: 999999999;
+}