Merge pull request #2116 from openkfw/1583-tour-styles

frontend:Change styles to rem
openkfw · Dec 11, 2024 · faf25d4 · faf25d4
2 parents 8bdab2d + 9b27a85
commit faf25d4
Showing 1 changed file with 17 additions and 17 deletions.
diff --git a/frontend/src/pages/Main/TourWrapper.scss b/frontend/src/pages/Main/TourWrapper.scss
@@ -4,19 +4,19 @@
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  padding: 10px;
-  font-size: 14px;
+  padding: 0.8rem;
+  font-size: 1rem;
   line-height: 1.5;
   color: #333;
-  min-width: 200px;
+  min-width: 13rem;
   white-space: normal;
   text-align: left;
   cursor: default;
   transition: opacity 0.3s;
 
   .tooltip__close {
     float: right;
-    font-size: 12px;
+    font-size: 0.8rem;
     color: #999;
     cursor: pointer;
   }
@@ -26,49 +26,49 @@
 
     .tooltip__typeIcon {
       width: 120px;
-      padding-left: 14px;
+      padding-left: 0.8rem;
       float: left;
 
       p {
         text-align: left;
-        margin-left: 10px;
+        margin-left: 0.6rempx;
       }
     }
 
     .tooltip__navigationLink {
-      margin-left: 5px;
+      margin-left: 0.35rem;
     }
 
     .tooltip__text {
-      min-width: 300px;
-      min-height: 140px;
-      padding-left: 120px;
+      min-width: 19rem;
+      min-height: 9rem;
+      padding-left: 7.5rem;
 
       .tooltip__content {
-        font-size: 1.2em;
+        font-size: 1.2rem;
       }
 
       .tooltip__clickInfo {
-        font-size: 0.8em;
-        margin: 20px 12px;
+        font-size: 0.8rem;
+        margin: 1.25rem 0.8rem;
         background-color: #ddd;
         color: #666;
         font-style: italic;
-        padding: 10px;
+        padding: 0.8rem;
 
         .tooltip__clickInfo__icon {
           position: absolute;
         }
 
         span {
-          margin-left: 30px;
+          margin-left: 2rem;
         }
       }
     }
 
     .tooltip__footer {
-      margin: 10px 0;
-      min-height: 30px;
+      margin: 0.8rem 0;
+      min-height: 2rem;
 
       .tooltip__button--primary {
         float: right;