mirror of
https://github.com/grey-cat-1908/formaptix-web.git
synced 2024-09-22 19:21:59 +03:00
super sigma
This commit is contained in:
parent
f78c41f956
commit
a3f8f70227
3 changed files with 61 additions and 26 deletions
|
@ -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 {
|
||||
&-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue