From a3f8f70227ecb70dffec0e79da413e65606b7ca8 Mon Sep 17 00:00:00 2001
From: Vyacheslav <76677694+flyare1337@users.noreply.github.com>
Date: Mon, 26 Aug 2024 17:33:07 +0300
Subject: [PATCH] super sigma

---
 src/components/forms/ScaleQuestion.vue    | 72 +++++++++++++++++++----
 src/components/forms/SelectorQuestion.vue | 13 ----
 src/styles/colors.css                     |  2 +-
 3 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/src/components/forms/ScaleQuestion.vue b/src/components/forms/ScaleQuestion.vue
index f6a5304..314d4c9 100644
--- a/src/components/forms/ScaleQuestion.vue
+++ b/src/components/forms/ScaleQuestion.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="rating">
     <div class="rating-labels">
-      <span>{{ minLabel }}</span>
-      <span>{{ maxLabel }}</span>
+      <div class="rating-labels-info">
+        <PhCaretCircleUpDown :size="23" class="rating-labels-info--sign" />
+        <div class="rating-labels-info--text">Выберите от {{ minLabel }} до {{ maxLabel }} вариантов</div>
+      </div>
     </div>
     <div class="rating-options">
       <label v-for="n in range" :key="n" class="rating-option">
@@ -29,6 +31,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import { PhCardsThree, PhCaretCircleUpDown } from '@phosphor-icons/vue'
 
 const props = defineProps({
   min: {
@@ -78,13 +81,23 @@ function cancelSelection() {
 .rating {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  //align-items: center;
 
   &-labels {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: 10px;
+    &-info {
+      display: flex;
+      align-items: center;
+      gap: 0 11px;
+      color: var(--color-description);
+      font-size: 16px;
+      font-weight: 400;
+      margin-bottom: 30px;
+
+      &--sign {
+        min-width: 23px;
+        min-height: 23px;
+      }
+    }
   }
 
   &-options {
@@ -95,7 +108,7 @@ function cancelSelection() {
 
     @media (max-width: 810px) {
       flex-direction: column;
-      gap: 15px 0;
+      gap: 20px 0;
     }
   }
 
@@ -105,15 +118,50 @@ function cancelSelection() {
     align-items: center;
     gap: 20px 0;
 
-    &--btn {
-      width: 20px;
-      height: 20px;
+    //&--btn {
+    //  width: 20px;
+    //  height: 20px;
+    //  cursor: pointer;
+    //}
+
+    &--btn:after {
+      width: 25px;
+      height: 25px;
+      border-radius: 15px;
+      top: -6px;
+      left: -6px;
+      position: relative;
+      background: var(--color-input-background);
+      border: 2px solid var(--color-main-border);
+      content: '';
+      display: inline-block;
+      visibility: visible;
       cursor: pointer;
+      transition: 0.25s ease;
+
+    }
+
+    &--btn:after:hover {
+      border: 2px solid var(--color-secondary-border);
+      background: var(--color-main-background);
+    }
+    &--btn:checked:after {
+      width: 25px;
+      height: 25px;
+      border-radius: 15px;
+      top: -6px;
+      left: -6px;
+      position: relative;
+      border: 2px solid var(--color-main);
+      background: var(--color-main-toned);
+      content: '';
+      display: inline-block;
+      visibility: visible;
     }
 
     @media (max-width: 810px) {
       flex-direction: initial;
-      gap: 0 15px;
+      gap: 0 25px;
     }
   }
 
diff --git a/src/components/forms/SelectorQuestion.vue b/src/components/forms/SelectorQuestion.vue
index 8582b9a..6f745ae 100644
--- a/src/components/forms/SelectorQuestion.vue
+++ b/src/components/forms/SelectorQuestion.vue
@@ -133,18 +133,5 @@ watch(selectedIndexes, validateSelection)
   }
 }
 
-.option.selected {
-  border-color: #42b983;
-  background-color: #e6f7ff;
-}
 
-.option img {
-  max-width: 50px;
-  margin-right: 10px;
-}
-
-.error {
-  color: red;
-  margin-top: 5px;
-}
 </style>
diff --git a/src/styles/colors.css b/src/styles/colors.css
index 6ec1ae7..722e00f 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -15,5 +15,5 @@
   --color-red: #ff3b3b;
   --color-green: rgb(0, 204, 0);
 
-  --color-main-toned: rgba(92, 139, 253, 0.3);
+  --color-main-toned: #cedcfe;
 }