add styles for main stage, contacts & upload-file, textarea, input, select components

Awakich · Awakich · commit eedb63ae74de · 2025-09-05T22:14:26.000+03:00
diff --git a/projects/social_platform/src/app/office/projects/edit/edit.component.scss b/projects/social_platform/src/app/office/projects/edit/edit.component.scss
@@ -5,8 +5,7 @@
 
 .project {
   position: relative;
-
-  padding: 80px 0px;
+  padding: 80px 0;
   background-color: var(--white);
   border-radius: var(--rounded-md);
 
diff --git a/projects/social_platform/src/app/office/projects/edit/shared/project-main-step/project-main-step.component.scss b/projects/social_platform/src/app/office/projects/edit/shared/project-main-step/project-main-step.component.scss
@@ -10,8 +10,8 @@
 
   &__grid {
     display: grid;
-    align-items: center;
     grid-gap: 20px;
+    align-items: center;
     margin-bottom: 20px;
   }
 
@@ -28,16 +28,17 @@
 
     &--additional {
       display: flex;
-      align-items: center;
       gap: 20px;
+      align-items: center;
 
       fieldset {
         flex-basis: 50%;
       }
     }
   }
 
-  &__problem, &__description {
+  &__problem,
+  &__description {
     margin-bottom: 12px;
   }
 
diff --git a/projects/social_platform/src/app/office/projects/edit/shared/project-navigation/project-navigation.component.scss b/projects/social_platform/src/app/office/projects/edit/shared/project-navigation/project-navigation.component.scss
@@ -16,9 +16,9 @@
     gap: 10px;
     align-items: center;
     justify-content: center;
+    padding: 2px;
     background-color: var(--gray);
     border-radius: var(--rounded-xxl);
-    padding: 2px;
 
     @include responsive.apply-desktop {
       gap: 0;
@@ -33,8 +33,8 @@
     cursor: pointer;
 
     &--active {
+      padding: 0 10px;
       background-color: var(--white);
-      padding: 0px 10px;
       border-radius: var(--rounded-xxl);
     }
   }
diff --git a/projects/social_platform/src/app/office/projects/edit/shared/project-team-step/project-team-step.component.scss b/projects/social_platform/src/app/office/projects/edit/shared/project-team-step/project-team-step.component.scss
@@ -94,7 +94,7 @@
   &__team {
     grid-template-columns: repeat(1, 270px);
     grid-gap: 20px;
-    margin: 15px 0px;
+    margin: 15px 0;
 
     @include responsive.apply-desktop {
       grid-template-columns: repeat(5, 150px);
@@ -103,8 +103,8 @@
 
   &__link {
     display: flex;
-    margin-bottom: 12px;
     gap: 20px;
+    margin-bottom: 12px;
 
     app-button {
       flex-basis: 70%;
diff --git a/projects/social_platform/src/app/office/shared/invite-card/invite-card.component.scss b/projects/social_platform/src/app/office/shared/invite-card/invite-card.component.scss
@@ -5,9 +5,9 @@
 .invite {
   display: flex;
   flex-direction: column;
+  gap: 15px;
   justify-content: space-between;
   padding: 15px 10px;
-  gap: 15px;
   background-color: var(--light-gray);
   border-radius: var(--rounded-md);
 
@@ -31,8 +31,8 @@
 
   &__user {
     display: flex;
-    align-items: center;
     gap: 10px;
+    align-items: center;
   }
 
   &__top {
diff --git a/projects/social_platform/src/app/office/shared/vacancy-card/vacancy-card.component.scss b/projects/social_platform/src/app/office/shared/vacancy-card/vacancy-card.component.scss
@@ -2,8 +2,8 @@
 
 .vacancy {
   &__requirements {
-    color: var(--accent);
     padding: 5px 40px;
+    color: var(--accent);
     background: transparent;
     border: 1px solid var(--accent);
     border-radius: var(--rounded-xxl);
@@ -20,16 +20,15 @@
     flex-direction: column;
 
     &--text {
-      border-bottom: 1px solid var(--dark-grey);
       padding-bottom: 5px;
       margin-bottom: 10px;
+      border-bottom: 1px solid var(--dark-grey);
     }
   }
 
   &__skills {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     gap: 10px;
   }
 
@@ -48,8 +47,8 @@
   }
 
   i {
-    cursor: pointer;
     width: 24px;
     height: 24px;
+    cursor: pointer;
   }
 }
diff --git a/projects/social_platform/src/app/office/vacancies/detail/info/info.component.scss b/projects/social_platform/src/app/office/vacancies/detail/info/info.component.scss
@@ -148,7 +148,7 @@
     cursor: pointer;
     border: 1px solid;
     border-color: var(--gradient);
-   border-radius: var(--rounded-xl);
+    border-radius: var(--rounded-xl);
   }
 
   &__project-image {
diff --git a/projects/social_platform/src/app/ui/components/input/input.component.scss b/projects/social_platform/src/app/ui/components/input/input.component.scss
@@ -19,8 +19,8 @@
     }
 
     &--small {
-      padding: 12px;
       max-width: 70px;
+      padding: 12px;
       text-align: center;
     }
 
@@ -46,8 +46,8 @@
 
     input[type="date"]::-webkit-inner-spin-button,
     input[type="date"]::-webkit-calendar-picker-indicator {
-        display: none;
-        -webkit-appearance: none;
+      display: none;
+      appearance: none;
     }
   }
 
diff --git a/projects/social_platform/src/app/ui/components/select/select.component.scss b/projects/social_platform/src/app/ui/components/select/select.component.scss
@@ -60,8 +60,8 @@
 
   &__option {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     padding: 12px 18px;
     color: var(--dark-grey);
     cursor: pointer;
diff --git a/projects/social_platform/src/app/ui/components/textarea/textarea.component.scss b/projects/social_platform/src/app/ui/components/textarea/textarea.component.scss
@@ -7,15 +7,14 @@
   position: relative;
 
   &__input {
-
+    min-height: 162px;
+    padding: 12px 18px;
     color: var(--black);
     resize: none;
     background-color: var(--white);
     border: 1px solid var(--gray);
     border-radius: var(--rounded-xl);
     outline: none;
-    min-height: 162px;
-    padding: 12px 18px;
     transition: all 0.2s;
 
     &::placeholder {
diff --git a/projects/social_platform/src/app/ui/components/upload-file/upload-file.component.scss b/projects/social_platform/src/app/ui/components/upload-file/upload-file.component.scss
@@ -1,14 +1,14 @@
 /** @format */
 
 .control {
-  padding: 18px 30px;
-  height: 120px;
-  border-radius: var(--rounded-md);
-  border: 1px solid var(--dark-grey);
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 120px;
+  padding: 18px 30px;
   cursor: pointer;
+  border: 1px solid var(--dark-grey);
+  border-radius: var(--rounded-md);
 
   &__empty {
     display: flex;
@@ -20,10 +20,10 @@
   &__success {
     display: flex;
     flex: 1;
-    align-self: stretch;
+    gap: 10px;
     align-items: center;
+    align-self: stretch;
     justify-content: center;
-    gap: 10px;
   }
 
   &--error {
@@ -37,8 +37,8 @@
 
 .file {
   display: flex;
-  align-items: center;
   gap: 10px;
+  align-items: center;
   padding: 10px;
   background-color: var(--light-gray);
   border-radius: var(--rounded-lg);
@@ -52,10 +52,10 @@
   }
 
   &__basket {
+    align-self: flex-end;
     color: var(--red);
     cursor: pointer;
     transition: color 0.2s;
-    align-self: flex-end;
 
     &:hover {
       color: var(--red-dark);

Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,8 @@`
`10`	`10`
`11`	`11`	`&__grid {`
`12`	`12`	`display: grid;`
`13`		`- align-items: center;`
`14`	`13`	`grid-gap: 20px;`
	`14`	`+ align-items: center;`
`15`	`15`	`margin-bottom: 20px;`
`16`	`16`	`}`
`17`	`17`
`@@ -28,16 +28,17 @@`
`28`	`28`
`29`	`29`	`&--additional {`
`30`	`30`	`display: flex;`
`31`		`- align-items: center;`
`32`	`31`	`gap: 20px;`
	`32`	`+ align-items: center;`
`33`	`33`
`34`	`34`	`fieldset {`
`35`	`35`	`flex-basis: 50%;`
`36`	`36`	`}`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`
`40`		`- &__problem, &__description {`
	`40`	`+ &__problem,`
	`41`	`+ &__description {`
`41`	`42`	`margin-bottom: 12px;`
`42`	`43`	`}`
`43`	`44`
Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,8 @@`
`2`	`2`
`3`	`3`	`.vacancy {`
`4`	`4`	`&__requirements {`
`5`		`- color: var(--accent);`
`6`	`5`	`padding: 5px 40px;`
	`6`	`+ color: var(--accent);`
`7`	`7`	`background: transparent;`
`8`	`8`	`border: 1px solid var(--accent);`
`9`	`9`	`border-radius: var(--rounded-xxl);`
`@@ -20,16 +20,15 @@`
`20`	`20`	`flex-direction: column;`
`21`	`21`
`22`	`22`	`&--text {`
`23`		`- border-bottom: 1px solid var(--dark-grey);`
`24`	`23`	`padding-bottom: 5px;`
`25`	`24`	`margin-bottom: 10px;`
	`25`	`+ border-bottom: 1px solid var(--dark-grey);`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`&__skills {`
`30`	`30`	`display: flex;`
`31`		`- flex-direction: row;`
`32`		`- flex-wrap: wrap;`
	`31`	`+ flex-flow: row wrap;`
`33`	`32`	`gap: 10px;`
`34`	`33`	`}`
`35`	`34`
`@@ -48,8 +47,8 @@`
`48`	`47`	`}`
`49`	`48`
`50`	`49`	`i {`
`51`		`- cursor: pointer;`
`52`	`50`	`width: 24px;`
`53`	`51`	`height: 24px;`
	`52`	`+ cursor: pointer;`
`54`	`53`	`}`
`55`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -148,7 +148,7 @@`
`148`	`148`	`cursor: pointer;`
`149`	`149`	`border: 1px solid;`
`150`	`150`	`border-color: var(--gradient);`
`151`		`- border-radius: var(--rounded-xl);`
	`151`	`+ border-radius: var(--rounded-xl);`
`152`	`152`	`}`
`153`	`153`
`154`	`154`	`&__project-image {`
Original file line number	Diff line number	Diff line change
`@@ -19,8 +19,8 @@`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`&--small {`
`22`		`- padding: 12px;`
`23`	`22`	`max-width: 70px;`
	`23`	`+ padding: 12px;`
`24`	`24`	`text-align: center;`
`25`	`25`	`}`
`26`	`26`
`@@ -46,8 +46,8 @@`
`46`	`46`
`47`	`47`	`input[type="date"]::-webkit-inner-spin-button,`
`48`	`48`	`input[type="date"]::-webkit-calendar-picker-indicator {`
`49`		`- display: none;`
`50`		`- -webkit-appearance: none;`
	`49`	`+ display: none;`
	`50`	`+ appearance: none;`
`51`	`51`	`}`
`52`	`52`	`}`
`53`	`53`