From 0e17ebb99968310896cb2e49a65d1b19bccf5a25 Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Wed, 30 Aug 2023 11:06:13 +0300
Subject: [PATCH] form styling CSS

---
 .../form-field-document.component.scss        | 29 ++++---------
 .../field-document-multiple.component.html    |  7 ++-
 .../documents-section.component.scss          |  7 +--
 src/assets/css/documents-lists.scss           | 10 +++--
 src/assets/css/forms.scss                     | 43 ++++++++++++++-----
 5 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/src/app/_modules/form-fields/types/document/form-field-document.component.scss b/src/app/_modules/form-fields/types/document/form-field-document.component.scss
index e9f7cfe..2def4d8 100644
--- a/src/app/_modules/form-fields/types/document/form-field-document.component.scss
+++ b/src/app/_modules/form-fields/types/document/form-field-document.component.scss
@@ -3,7 +3,7 @@
   display: flex;
   height: 100px;
   padding: 16px;
-  border: var(--orange-2) dashed 1px;
+  border: var(--blue-1) dashed 1px;
   border-radius: 4px;
   overflow: hidden;
   &.hover {
@@ -52,31 +52,18 @@
 }
 
 .values {
+  background: transparent url('~src/assets/images/icons/document_pdf_60dp.svg') 0 0 no-repeat;
+  min-height: 60px;
+  padding-left: 72px;
+  font-size: 20px;
   .item {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 10px;
-
-    &:before {
-      width: 20px;
-      height: 20px;
-      margin-right: 8px;
-      flex-shrink: 0;
-      background: transparent url("~src/assets/images/icons/document_20dp.svg") 50% 50% no-repeat;
-      content: '';
-    }
-    .archive {
-      width: 20px;
-      height: 20px;
-      margin-left: 8px;
-      flex-shrink: 0;
-      background: transparent url("~src/assets/images/icons/close_20dp.svg") 50% 50% no-repeat;
-      opacity: 0.5;
-      content: '';
-      &:hover {
-        opacity: 1;
-      }
+    button{
+      margin-left: 10px;
     }
+  
   }
 }
diff --git a/src/app/_modules/form-fields/types/document/multiple/field-document-multiple.component.html b/src/app/_modules/form-fields/types/document/multiple/field-document-multiple.component.html
index ab951b3..26d99d5 100644
--- a/src/app/_modules/form-fields/types/document/multiple/field-document-multiple.component.html
+++ b/src/app/_modules/form-fields/types/document/multiple/field-document-multiple.component.html
@@ -1,6 +1,9 @@
 <div class="area" [class.hover]="dragOver">
   <input #fileInput type="file" [id]="field.name" (change)="onFileInput($event)" multiple="multiple" />
-  <p>Перетащите сюда или <span (click)="fileInput.click()">выберите файлы</span> в формате PDF, XLS, DOC, JPG, PPTX<!-- общим объемом не более 10 Мбайт.--></p>
+  <p>Перетащите сюда или <a (click)="fileInput.click()">выберите файлы</a> 
+    в формате PDF, XLS, DOC, JPG, PPTX
+    <!-- общим объемом не более 10 Мбайт.-->
+  </p>
   <div class="indicator" *ngIf="upload.file">
     <div class="label">Загружается файл {{upload.file?.name}}</div>
     <div class="progress"><div class="fill" [style.width]="upload.progress + '%'"></div></div>
@@ -9,6 +12,6 @@
 <div class="values">
   <div class="item" *ngFor="let asset of assets">
     <a href="{{asset.links?.open}}" target="_blank">{{asset.name}}</a>
-    <button type="button" class="btn icon archive" (click)="removeValue(asset)"></button>
+    <button type="button" class="clear trash" (click)="removeValue(asset)"></button>
   </div>
 </div>
diff --git a/src/app/_modules/pages/sections/types/basic/documents/documents-section.component.scss b/src/app/_modules/pages/sections/types/basic/documents/documents-section.component.scss
index a8526c3..8b13789 100644
--- a/src/app/_modules/pages/sections/types/basic/documents/documents-section.component.scss
+++ b/src/app/_modules/pages/sections/types/basic/documents/documents-section.component.scss
@@ -1,6 +1 @@
-.documents {
-  margin-bottom: 24px;
-  a {
-    color: var(--black);
-  }
-}
+
diff --git a/src/assets/css/documents-lists.scss b/src/assets/css/documents-lists.scss
index 55290bc..380fa8e 100644
--- a/src/assets/css/documents-lists.scss
+++ b/src/assets/css/documents-lists.scss
@@ -1,15 +1,17 @@
 .documents.list.default {
+  background: transparent url('~src/assets/images/icons/document_pdf_60dp.svg') 0 0 no-repeat;
+  min-height: 60px;
+  padding-left: 72px;
+  font-size: 20px;
   .title {
     margin: 0 0 16px;
-    font-weight: bold;
+    font-weight: bold;    
   }
   .items {
     .item {
       margin: 0 0 16px;
       a {
-        display: inline-block;
-        padding-left: 28px;
-        background: transparent url('~src/assets/images/icons/document_20dp.svg') 0 0 no-repeat;
+        display: inline-block;        
       }
       &:last-child {
         margin: 0;
diff --git a/src/assets/css/forms.scss b/src/assets/css/forms.scss
index ac9faeb..c0ecb41 100644
--- a/src/assets/css/forms.scss
+++ b/src/assets/css/forms.scss
@@ -30,29 +30,52 @@ input, select, textarea {
 
 
 .switch {
-  width: 40px;
-  height: 20px;
+  width: 44px;
+  height: 24px;
   margin: auto 0;
   padding: 2px;
-  border-radius: 10px;
-  background-color: #c0c0c0;
-  box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
+  border-radius: 12px;
+  background-color: #fff;
+  border: 1px solid #6C6C6C;
   cursor: pointer;
   transition: background-color 0.3s;
   &:before {
     display: block;
-    width: 16px;
-    height: 16px;
-    background-color: #ffffff;
-    box-shadow: rgba(0, 0, 0, 0.12) 0 0 2px 0;
-    border-radius: 20px;
+    width: 18px;
+    height: 18px;
+    background-color: #C0C0C0;
+    border-radius: 9px;
     transition: transform 0.3s;
     content: '';
   }
   &.active {
     background-color:var(--blue-1);
+    border-color:var(--blue-1);
     &:before {
       transform: translateX(20px);
+      background-color: #fff;
+    }
+  }
+  &.active{
+    &:hover {
+      background-color:var(--blue-2);
+      border-color:var(--blue-2);
+      &:before {
+        transform: translateX(20px);
+      }
+    }
+    &:focus{
+      background-color:var(--blue-3);
+      border-color:var(--blue-3);
+      &:before {
+        transform: translateX(20px);
+      }
+    }
+  }
+  &:not(.active):hover {
+    border-color:#4D4D4D;
+    &:before {
+      background-color: #6C6C6C;
     }
   }
   &.disabled {