add styles to snackbar, skills-group, input

Author: Awakich

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

@@ -99,8 +99,8 @@
   &__links {
     display: flex;
     gap: 20px;
-    width: 100%;
     align-items: center;
+    width: 100%;
 
     &--wrapper {
       display: flex;
@@ -144,11 +144,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: 700px;
+  max-width: 100%;
   max-height: calc(100vh - 40px);
   padding: 40px 0 80px;
   overflow-y: auto;
-  max-width: 100%;
-  width: 700px;
 
   &__cross {
     position: absolute;
@@ -183,12 +183,12 @@
 
 .selected-leader {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   padding: 4px 8px;
+  cursor: pointer;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
-  cursor: pointer;
   transition: background-color 0.2s;
 
   &:hover {
@@ -199,24 +199,24 @@
 .invite {
   &__item {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
     flex-grow: 1;
-    margin-bottom: 12px;
+    align-items: center;
+    justify-content: space-between;
     width: 300px;
+    margin-bottom: 12px;
 
     &--info {
       display: flex;
-      align-items: center;
       gap: 20px;
+      align-items: center;
     }
   }
 
   &__team {
     display: flex;
     flex-direction: column;
+    gap: 10px;
     align-items: flex-start;
     justify-content: space-between;
-    gap: 10px;
   }
 }

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

@@ -112,8 +112,8 @@
     }
 
     &--wrapper {
-      flex-direction: column-reverse;
       flex-basis: 40%;
+      flex-direction: column-reverse;
     }
   }
 

projects/social_platform/src/app/office/shared/skills-group/skills-group.component.scss

@@ -15,8 +15,8 @@
     transition: opacity 0.2s ease;
 
     i {
-      transform: rotate(180deg);
       transition: transform 0.2s ease;
+      transform: rotate(180deg);
     }
 
     &--open {
@@ -26,24 +26,24 @@
     }
 
     &--disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
       pointer-events: none;
+      cursor: not-allowed;
+      opacity: 0.5;
     }
 
     &__top {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
       width: 100%;
 
       &--open {
         width: 50%;
       }
 
       &--disabled {
-        opacity: 0.5;
         cursor: not-allowed;
+        opacity: 0.5;
       }
     }
   }
@@ -61,9 +61,9 @@
       transition: opacity 0.2s ease;
 
       &--disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
         pointer-events: none;
+        cursor: not-allowed;
+        opacity: 0.5;
       }
 
       &-label {
@@ -90,8 +90,8 @@
       }
 
       &--disabled {
-        opacity: 0.5;
         cursor: not-allowed;
+        opacity: 0.5;
 
         &.checkbox__field--checked {
           background-color: var(--gray);

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

@@ -47,7 +47,6 @@
     @include responsive.apply-desktop {
       @include typography.body-12;
     }
-
   }
 
   &__input[type="date"]::-webkit-inner-spin-button,
@@ -57,45 +56,43 @@
   }
 
   &__input[type="radio"] {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-
+    position: relative;
     width: 20px;
     height: 20px;
     padding: 8px;
+    cursor: pointer;
     border: 1px solid var(--dark-grey);
     border-radius: 50%;
-    cursor: pointer;
-    position: relative;
     transition: border-color 0.2s, background-color 0.2s;
+    appearance: none;
+    appearance: none;
+    appearance: none;
 
     &:hover::after {
-      content: "";
       position: absolute;
       top: 50%;
       left: 50%;
       width: 8px;
       height: 8px;
+      content: "";
       background-color: var(--accent);
       border-radius: 50%;
       transform: translate(-50%, -50%);
     }
 
     &:checked {
-      border-color: var(--accent);
-      background-color: var(--accent);
       z-index: 1;
+      background-color: var(--accent);
+      border-color: var(--accent);
 
       &::after {
-        background-color: var(--dark-grey);
-        width: 8px;
-        height: 8px;
-
-        content: "";
         position: absolute;
         top: 50%;
         left: 50%;
+        width: 8px;
+        height: 8px;
+        content: "";
+        background-color: var(--dark-grey);
         border-radius: 50%;
         transform: translate(-50%, -50%);
       }

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

@@ -2,11 +2,11 @@
 
 .snackbar {
   position: absolute;
-  right: 0;
   top: 0;
+  right: 0;
   z-index: 20;
-  padding-right: 50px;
   padding-top: 50px;
+  padding-right: 50px;
   overflow-x: hidden;
 
   &__item {
@@ -18,9 +18,9 @@
 
 .item {
   display: flex;
+  gap: 15px;
   align-items: center;
   justify-content: space-between;
-  gap: 15px;
   padding: 20px;
   border-radius: 10px;