feat(SW-350): Implemented tooltip and booking widget tablet design

2024-10-04 10:00:52 +02:00
parent 04406d3865
commit aee9e94f7a
17 changed files with 530 additions and 137 deletions
--- a/components/TempDesignSystem/Tooltip/tooltip.module.css
+++ b/components/TempDesignSystem/Tooltip/tooltip.module.css
@@ -0,0 +1,137 @@
+.tooltipContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  padding: var(--Spacing-x1);
+  background-color: var(--UI-Text-Active);
+  border: 0.5px solid var(--UI-Border-Active);
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Base-Text-Inverted);
+  position: absolute;
+  visibility: hidden;
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.3s;
+  max-width: 200px;
+}
+
+.tooltipContainer:hover .tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.left {
+  right: 100%;
+}
+
+.right {
+  left: 100%;
+}
+
+.top {
+  bottom: 100%;
+}
+
+.bottom {
+  top: 100%;
+}
+
+.tooltip::before {
+  content: "";
+  position: absolute;
+  border-style: solid;
+}
+
+.bottom.arrowLeft::before {
+  top: -8px;
+  left: 16px;
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.bottom.arrowCenter::before {
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.bottom.arrowRight::before {
+  top: -8px;
+  right: 16px;
+  border-width: 0 7px 8px 7px;
+  border-color: transparent transparent var(--UI-Text-Active) transparent;
+}
+
+.top.arrowLeft::before {
+  bottom: -8px;
+  left: 16px;
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.top.arrowCenter::before {
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.top.arrowRight::before {
+  bottom: -8px;
+  right: 16px;
+  border-width: 8px 7px 0 7px;
+  border-color: var(--UI-Text-Active) transparent transparent transparent;
+}
+
+.left.arrowTop::before {
+  top: 16px;
+  right: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.left.arrowCenter::before {
+  top: 50%;
+  right: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.left.arrowBottom::before {
+  bottom: 16px;
+  right: -8px;
+  transform: translateY(50%);
+  border-width: 7px 0 7px 8px;
+  border-color: transparent transparent transparent var(--UI-Text-Active);
+}
+
+.right.arrowTop::before {
+  top: 16px;
+  left: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}
+
+.right.arrowCenter::before {
+  top: 50%;
+  left: -8px;
+  transform: translateY(-50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}
+
+.right.arrowBottom::before {
+  bottom: 16px;
+  left: -8px;
+  transform: translateY(50%);
+  border-width: 7px 8px 7px 0;
+  border-color: transparent var(--UI-Text-Active) transparent transparent;
+}