super sigma

src/components/forms/ScaleQuestion.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="rating">
     <div class="rating-labels">
-      <span>{{ minLabel }}</span>
+      <div class="rating-labels-info">
-      <span>{{ maxLabel }}</span>
+        <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 {
+    &-info {
       display: flex;
-    justify-content: space-between;
+      align-items: center;
-    width: 100%;
+      gap: 0 11px;
-    margin-bottom: 10px;
+      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 {
+    //&--btn {
-      width: 20px;
+    //  width: 20px;
-      height: 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;
     }
   }
 

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>

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;
 }