add styles for hint & hint option for button, textarea, input

Author: Awakich

projects/social_platform/src/app/office/projects/edit/shared/project-additional-step/project-additional-step.component.scss

@@ -130,8 +130,8 @@
 
       app-tooltip {
         position: absolute;
-        bottom: 70%;
         right: -10%;
+        bottom: 70%;
       }
     }
   }

projects/social_platform/src/app/office/projects/edit/shared/project-team-step/project-team-step.component.scss

@@ -116,8 +116,8 @@
 
     app-tooltip {
       position: absolute;
-      bottom: 70%;
       right: -2%;
+      bottom: 70%;
     }
   }
 }

projects/social_platform/src/app/ui/components/avatar-control/avatar-control.component.scss

@@ -1,8 +1,8 @@
 @use "styles/responsive";
 
 .control {
-  border-radius: 50%;
   position: relative;
+  border-radius: 50%;
 
   &__overlay {
     position: absolute;
@@ -70,10 +70,10 @@
 
   &__tooltip-wrapper {
     position: absolute;
-    right: -10px;
     top: 10%;
-    transform: translateY(-50%);
+    right: -10px;
     z-index: 10;
+    transform: translateY(-50%);
   }
 }
 

projects/social_platform/src/app/ui/components/button/button.component.scss

@@ -1,15 +1,15 @@
 /** @format */
 
 .button {
-  max-height: 52px;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  max-height: 52px;
   text-align: center;
   cursor: pointer;
-  transition: all 0.2s;
   border-radius: var(--rounded-xxl);
-  position: relative;
+  transition: all 0.2s;
 
   &.button--inline {
     font-weight: 400;

projects/social_platform/src/app/ui/components/input/input.component.scss

@@ -75,14 +75,14 @@
 
   &__tooltip-wrapper {
     position: absolute;
-    right: 20px;
     top: 50%;
-    transform: translateY(-50%);
+    right: 20px;
     z-index: 10;
+    transform: translateY(-50%);
 
     &--small {
-      right: -10px;
       top: 10%;
+      right: -10px;
     }
   }
 }

projects/social_platform/src/app/ui/components/textarea/textarea.component.scss

@@ -55,9 +55,9 @@
 
   &__tooltip-wrapper {
     position: absolute;
-    right: 20px;
     top: 20%;
-    transform: translateY(-50%);
+    right: 20px;
     z-index: 10;
+    transform: translateY(-50%);
   }
 }

projects/social_platform/src/app/ui/components/tooltip/tooltip.component.scss

@@ -30,70 +30,70 @@
     background-color: var(--white);
     border: 1px solid var(--dark-grey);
     border-radius: 15px;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
     &--visible {
       display: block;
       opacity: 1;
     }
 
     &--left {
-      right: calc(100% + 8px);
       top: 50%;
+      right: calc(100% + 8px);
+      border-radius: 15px 15px 15px 0;
       transform: translateY(-50%);
-      border-radius: 15px 15px 15px 0px;
 
       &::after {
-        content: '';
         position: absolute;
-        left: 100%;
         top: 50%;
-        transform: translateY(-50%);
+        left: 100%;
+        content: "";
         border-top: 8px solid transparent;
         border-bottom: 8px solid transparent;
         border-left: 8px solid var(--white);
+        transform: translateY(-50%);
       }
 
       &::before {
-        content: '';
         position: absolute;
-        left: calc(100% + 1px);
         top: 50%;
-        transform: translateY(-50%);
+        left: calc(100% + 1px);
+        content: "";
         border-top: 9px solid transparent;
         border-bottom: 9px solid transparent;
         border-left: 9px solid var(--dark-grey);
+        transform: translateY(-50%);
       }
     }
 
     &--right {
-      left: calc(100% + 8px);
       top: 50%;
+      left: calc(100% + 8px);
+      border-radius: 15px 15px 0;
       transform: translateY(-50%);
-      border-radius: 15px 15px 0px 15px;
 
       &::after {
-        content: '';
         position: absolute;
-        right: 100%;
         top: 50%;
-        transform: translateY(-50%);
+        right: 100%;
+        content: "";
         border-top: 8px solid transparent;
-        border-bottom: 8px solid transparent;
         border-right: 8px solid var(--white);
+        border-bottom: 8px solid transparent;
+        transform: translateY(-50%);
       }
 
       &::before {
-        content: '';
         position: absolute;
-        right: calc(100% + 1px);
         top: 50%;
-        transform: translateY(-50%);
+        right: calc(100% + 1px);
+        content: "";
         border-top: 9px solid transparent;
-        border-bottom: 9px solid transparent;
         border-right: 9px solid var(--dark-grey);
+        border-bottom: 9px solid transparent;
+        transform: translateY(-50%);
       }
     }
   }