File size: 1,775 Bytes
41a71fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
@import '@/app/globalStyles/config/mixin.scss';
.RadioButtons {
display: block;
}
.listTitle {
margin-bottom: 8px;
font-size: 16px;
color: var(--t-primery-c);
}
.list {
display: flex;
}
.item {
display: flex;
flex-shrink: 0;
align-items: center;
&:not(:last-child) {
margin-right: 30px;
}
}
.window {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 12px;
background: transparent;
border: 1px solid var(--s-secondary-c-5);
border-radius: 50%;
transition: 0.3s;
}
.circle {
width: 16px;
height: 16px;
background: var(--s-accent-c);
border-radius: 50%;
opacity: 0;
transition: 0.3s;
}
.name {
display: flex;
align-items: center;
font-size: 16px;
font-weight: normal;
line-height: 24px;
color: #121212b2;
letter-spacing: 0.04em;
cursor: pointer;
}
.input:checked + .name {
.circle {
opacity: 1;
}
.window {
border-color: var(--s-accent-c);
}
}
//Themes
.param {
display: inline-block;
.list {
background-color: var(--s-secondary-c-3);
border: 1px solid var(--s-secondary-c-5);
border-radius: 8px;
overflow: hidden;
}
.item {
&:not(:last-child) {
border-right: 1px solid var(--s-secondary-c-5);
margin-right: 0;
}
}
.window {
display: none;
}
.name {
padding: 18px 24px;
font-weight: 500;
background-color: var(--s-inverted-c);
transition: 0.3s;
}
.input:checked + .name {
color: var(--s-inverted-c);
background-color: var(--s-accent-c);
}
}
|