add styles for kanban task-deatail, create-tag-form, dropdown, tag components

Author: Awakich

projects/social_platform/src/app/office/features/context-menu/context-menu.component.scss

@@ -3,42 +3,39 @@
 .context-menu {
   position: fixed;
   z-index: 9999;
-
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-
   padding: 8px 0;
   margin: 0;
   list-style: none;
-
-  transition: opacity 0.15s ease;
+  background-color: white;
+  border-radius: 8px;
   outline: none;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
+  transition: opacity 0.15s ease;
 
   &__item {
     padding: 10px 16px;
-    cursor: pointer;
     white-space: nowrap;
+    cursor: pointer;
     user-select: none;
     transition: background-color 0.15s ease;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgb(0 0 0 / 4%);
     }
 
     &:active {
-      background-color: rgba(0, 0, 0, 0.08);
+      background-color: rgb(0 0 0 / 8%);
     }
 
     &--red {
       color: #f44336;
 
       &:hover {
-        background-color: rgba(244, 67, 54, 0.08);
+        background-color: rgb(244 67 54 / 8%);
       }
 
       &:active {
-        background-color: rgba(244, 67, 54, 0.16);
+        background-color: rgb(244 67 54 / 16%);
       }
     }
 
@@ -47,15 +44,15 @@
     }
 
     &--disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
       pointer-events: none;
+      cursor: not-allowed;
+      opacity: 0.5;
     }
   }
 
   &__divider {
     height: 1px;
     margin: 8px 0;
-    background-color: rgba(0, 0, 0, 0.08);
+    background-color: rgb(0 0 0 / 8%);
   }
 }

projects/social_platform/src/app/office/features/news-card/news-card.component.scss

@@ -40,11 +40,11 @@
   }
 
   &__option {
+    width: 120px;
     padding: 5px 20px;
+    color: var(--grey-for-text);
     cursor: pointer;
-    width: 120px;
     transition: background-color 0.2s;
-    color: var(--grey-for-text);
 
     &:hover {
       color: var(--accent);

projects/social_platform/src/app/office/projects/detail/kanban-board/kanban-board.component.scss

@@ -1,5 +1,3 @@
-
-
 .kanban {
   &__wrapper {
     position: relative;
@@ -33,8 +31,8 @@
       border-radius: var(--rounded-xl);
 
       &--empty {
-        cursor: pointer;
         justify-content: center;
+        cursor: pointer;
       }
     }
 
@@ -46,7 +44,8 @@
       margin-top: 20px;
     }
 
-     i, p {
+    i,
+    p {
       color: var(--accent);
       cursor: pointer;
     }

projects/social_platform/src/app/office/projects/detail/kanban-board/shared/create-tag-form/create-tag-form.component.scss

@@ -1,16 +1,16 @@
 .create-tag {
   &__form {
     display: flex;
-    align-items: center;
     gap: 5px;
+    align-items: center;
   }
 
   &__pick-color {
-    border-radius: var(--rounded-sm);
-    height: 9px;
-    width: 9px;
     position: relative;
+    width: 9px;
+    height: 9px;
     cursor: pointer;
+    border-radius: var(--rounded-sm);
   }
 
   &__input {
@@ -29,17 +29,17 @@
 
   &__colors {
     position: absolute;
-    bottom: -25%;
     right: -12%;
+    bottom: -25%;
     padding: 7px;
     background-color: var(--light-white);
-    border-radius: var(--rounded-md);
     border: 0.5px solid var(--medium-grey-for-outline);
+    border-radius: var(--rounded-md);
 
     &-wrapper {
       display: grid;
-      grid-template-columns: repeat(4, 1fr);
       grid-template-rows: repeat(2, 1fr);
+      grid-template-columns: repeat(4, 1fr);
       gap: 3px;
     }
   }
@@ -48,13 +48,13 @@
 .field {
   &__option {
     display: flex;
+    gap: 5px;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
-    gap: 5px;
     transition: color 0.2s ease-in-out;
 
-     &--add-object {
+    &--add-object {
       display: flex;
       align-items: center;
       justify-content: center;

projects/social_platform/src/app/office/projects/detail/kanban-board/shared/task/detail/task-detail.component.scss

@@ -1,7 +1,7 @@
 @use "styles/typography";
 
 .kanban {
-   &__detail {
+  &__detail {
     position: absolute;
     top: 0%;
     right: 0%;
@@ -25,7 +25,9 @@
       }
     }
 
-    &-type,  &-priority-wrapper, &-delete-wrapper {
+    &-type,
+    &-priority-wrapper,
+    &-delete-wrapper {
       cursor: pointer;
     }
 
@@ -34,7 +36,6 @@
       height: 15px;
       background-color: var(--green);
       border-radius: var(--rounded-xxl);
-
     }
 
     &-general {
@@ -65,18 +66,17 @@
 
         ::ng-deep {
           app-input {
-
             .field {
               width: 44px !important;
               height: 23px !important;
             }
 
             .field__input {
-              border: 0;
+              max-width: 44px;
+              padding: 0;
               background: transparent;
+              border: 0;
               border-radius: 0;
-              padding: 0;
-              max-width: 44px;
 
               &:focus {
                 border-color: 0;
@@ -136,8 +136,8 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
         color: var(--light-white) !important;
+        transform: translate(-50%, -50%);
       }
     }
 
@@ -173,7 +173,7 @@
     }
 
     &-description {
-      margin: 12px 0px;
+      margin: 12px 0;
 
       ::ng-deep {
         app-textarea {
@@ -338,7 +338,7 @@
     color: var(--accent);
     cursor: pointer;
     background-color: var(--accent);
-    border-radius: var(--rounded-sm)
+    border-radius: var(--rounded-sm);
   }
 
   &__input {

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

@@ -1,28 +1,28 @@
 .field {
   &__options {
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    align-items: flex-start;
     width: 100%;
     max-height: 200px;
     padding: 12px;
     overflow-y: auto;
     background-color: var(--light-white);
     border: 0.5px solid var(--medium-grey-for-outline);
     border-radius: var(--rounded-lg);
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    align-items: flex-start;
   }
 
   &__option {
     display: flex;
+    gap: 5px;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
-    gap: 5px;
     transition: color 0.2s ease-in-out;
 
-     &--add-object {
+    &--add-object {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -45,8 +45,8 @@
 
     &--additional {
       display: flex;
-      align-items: center;
       gap: 5px;
+      align-items: center;
 
       i {
         color: var(--accent);

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

@@ -1,6 +1,7 @@
 /** @format */
 
 .tag {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11,10 +12,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   border-radius: var(--rounded-xxl);
-  position: relative;
 
   p {
-    margin: 0px 10px;
+    margin: 0 10px;
   }
 
   &--inline {
@@ -96,13 +96,13 @@
     top: 30%;
     right: 5%;
     display: flex;
-    align-items: center;
     flex-shrink: 0;
     gap: 3px;
+    align-items: center;
 
     i {
-      opacity: 1;
       cursor: pointer;
+      opacity: 1;
 
       &:hover {
         opacity: 0.7;