1 files changed, 114 insertions, 46 deletions

diff --git a/feedback/css/style.css b/feedback/css/style.css
index c46eb52..6488c18 100644
--- a/feedback/css/style.css
+++ b/feedback/css/style.css
@@ -198,22 +198,22 @@ textarea.form-control {
 }
 
 /* Стили для секции, с помощью которой можно добавить к форме файлы */
-.form__attach-label {
+.form-attach__label {
   margin-bottom: 0.5rem;
 }
 
-.form-attachments__wrapper {
+.form-attach__wrapper {
   position: relative;
   border: 2px dashed #e0e0e0;
   border-radius: 0.375rem;
   min-height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
 }
 
-.form-attachments__wrapper input {
+.is-invalid .form-attach__wrapper {
+  border-color: #dc3545;
+}
+
+.form-attach__wrapper input {
   position: absolute;
   top: 0;
   left: 0;
@@ -226,30 +226,23 @@ textarea.form-control {
   display: block;
 }
 
-.form-attachments__description {
-  width: 100%;
+.form-attach__description {
   text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 15px 10px;
+  padding: 1rem 0.5rem;
   color: #757575;
 }
 
-.form-attachments__items {
+.form-attach__items {
   display: flex;
   flex-wrap: wrap;
-  flex: 0 0 100%;
 }
 
-.form-attachments__item {
+.form-attach__item {
   flex: 0 0 25%;
   overflow: hidden;
-  padding: 4px;
+  flex: 0 1 calc((100% / 4) - 0.5rem);
+  margin: 0.25rem;
   font-size: 0.75rem;
-}
-
-.form-attachments__item-wrapper {
   border: 1px solid #eee;
   padding: 1.625rem 0.25rem;
   border-radius: 0.25rem;
@@ -261,7 +254,7 @@ textarea.form-control {
   justify-content: center;
 }
 
-.form-attachments__item-image {
+.form-attach__image {
   display: block;
   max-width: 100%;
   height: auto;
@@ -271,7 +264,7 @@ textarea.form-control {
   border: 1px solid #eee;
 }
 
-.form-attachments__item-name {
+.form-attach__name {
   margin-top: auto;
   max-width: 100%;
   overflow: hidden;
@@ -280,7 +273,7 @@ textarea.form-control {
   text-align: center;
 }
 
-.form-attachments__item-size {
+.form-attach__size {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -290,7 +283,7 @@ textarea.form-control {
   text-align: right;
 }
 
-.form-attachments__item-link {
+.form-attach__link {
   position: absolute;
   top: 0;
   right: 0;
@@ -306,14 +299,12 @@ textarea.form-control {
   opacity: .5;
 }
 
-.form-attachments__item.is-valid .form-attachments__item-wrapper {
+.form-attach__item.is-valid {
   border-color: #28a745;
-  background-color: #f8fcf9;
 }
 
-.form-attachments__item.is-invalid .form-attachments__item-wrapper {
+.form-attach__item.is-invalid {
   border-color: #dc3545;
-  background-color: #fefbfb;
 }
 
 .text-sm {
@@ -368,6 +359,76 @@ textarea.form-control {
 }
 
 /* CSS для секции "Пользовтельское соглашение" */
+.form-check {
+  display: block;
+  min-height: 1.5rem;
+  padding-left: 1.5em;
+}
+
+.form-check-input.is-invalid,
+.was-validated .form-check-input:invalid {
+  border-color: #dc3545;
+}
+
+.form-check-input {
+  width: 1em;
+  height: 1em;
+  margin-top: 0.25em;
+  vertical-align: top;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  border: 1px solid rgba(0, 0, 0, .25);
+  border-radius: 0.25em;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
+}
+
+.form-check .form-check-input {
+  float: left;
+  margin-left: -1.5em;
+}
+
+.form-check-input.is-invalid~.form-check-label,
+.was-validated .form-check-input:invalid~.form-check-label {
+  color: #dc3545;
+}
+
+.form-check-input:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check-input:checked {
+  border-color: #9e9e9e;
+  background-color: #9e9e9e;
+}
+
+.form-check-label {
+  margin-bottom: 0;
+}
+
+.is-invalid~.invalid-feedback,
+.is-invalid~.invalid-tooltip,
+.was-validated :invalid~.invalid-feedback,
+.was-validated :invalid~.invalid-tooltip {
+  display: block;
+}
+
+.invalid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: .875em;
+  color: #dc3545;
+}
+
+
+
+
 .custom-control {
   position: relative;
   display: block;
@@ -499,7 +560,8 @@ textarea.form-control.is-invalid {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25);
 }
 
-.form-control.is-invalid~.invalid-feedback {
+.form-control.is-invalid~.invalid-feedback,
+.is-invalid .invalid-feedback {
   display: block;
 }
 
@@ -594,8 +656,13 @@ button[type="submit"]:disabled {
   border: 1px solid #dc3545;
 }
 
-/* Стили для сообщения об успешной отправки */
-.form-result-success {
+.form-error_hide {
+  display: none;
+}
+
+
+/* сообщение об успешной отправки формы */
+.form-success {
   position: absolute;
   top: 0;
   left: 0;
@@ -604,27 +671,28 @@ button[type="submit"]:disabled {
   z-index: 1000;
   display: flex;
   text-align: center;
-  justify-content: center;
   align-items: center;
-  color: #fff;
-  background: rgba(0, 0, 0, .6);
+  background: rgba(0, 0, 0, .7);
   font-size: 1.25rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
+}
+
+.form-success_hide {
+  display: none;
 }
 
-.form-result-success>div {
+.form-success__message {
   position: relative;
-  padding: .75rem 1.25rem;
-  margin-bottom: 1rem;
-  border: 1px solid #eff4f1;
-  z-index: 1001;
-  border-radius: 0;
-  color: #28a745;
-  background-color: #eff4f1;
+  padding: 1rem;
+  background-color: #fafafa;
 }
 
-.form-result-success a {
-  color: #28a745;
+.form-success__btn {
+  font-weight: 400;
+  color: #0d6efd;
+  text-decoration: underline;
+  border: none;
   background-color: transparent;
-  font-weight: 700;
+  display: inline;
+  padding: 0;
 }