160 lines
4.1 KiB
SCSS
Executable File
160 lines
4.1 KiB
SCSS
Executable File
.sidebar {
|
|
form {
|
|
.sidebar-block {
|
|
border-radius: 16px;
|
|
padding: clamp(20px, 2.083vw, 40px);
|
|
padding: clamp(20px, 1.25vw, 30px);
|
|
background: $accent-4;
|
|
.input-box {
|
|
position: relative;
|
|
margin-bottom: 22px;
|
|
padding: 13px;
|
|
border-radius: 8px;
|
|
background: $accent-3;
|
|
label {
|
|
font-size: 13px;
|
|
}
|
|
input {
|
|
font-size: 13px;
|
|
width: 100px;
|
|
border: none;
|
|
&:focus {
|
|
border: none;
|
|
}
|
|
&:focus-visible {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
h2 {
|
|
color: #0f0f0f;
|
|
text-align: center;
|
|
}
|
|
.head {
|
|
padding: clamp(35px,2.083vw,50px);
|
|
background: #ecf3f9;
|
|
h2 {
|
|
color: $black-2;
|
|
text-align: center;
|
|
}
|
|
h6 {
|
|
color: $accent-1;
|
|
}
|
|
p {
|
|
color: $accent-1;
|
|
}
|
|
.slider {
|
|
img {
|
|
stroke-width: 3px;
|
|
stroke: $accent-1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sidebar-block-2 {
|
|
border-radius: 16px;
|
|
padding: clamp(20px, 2.083vw, 40px);
|
|
.wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: $gap-16;
|
|
.price-input {
|
|
width: 120px;
|
|
display: flex;
|
|
gap: clamp(8px, 0.83vw, 24px);
|
|
.field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
input {
|
|
width: 100%;
|
|
outline: none;
|
|
border: none;
|
|
-moz-appearance: textfield;
|
|
color: $accent-1;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slider-parent {
|
|
width: -webkit-fill-available;
|
|
.slider {
|
|
height: 4px;
|
|
position: relative;
|
|
background: $lightest-gray;
|
|
border-radius: 5px;
|
|
|
|
.progress {
|
|
height: 100%;
|
|
left: 25%;
|
|
right: 25%;
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
background: $accent-1;
|
|
}
|
|
}
|
|
}
|
|
.range-input {
|
|
position: relative;
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 3px;
|
|
top: -3.5px;
|
|
background: none;
|
|
pointer-events: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
}
|
|
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
height: 14px;
|
|
width: 14px;
|
|
border-radius: 50%;
|
|
background: $accent-1;
|
|
pointer-events: auto;
|
|
-webkit-appearance: none;
|
|
cursor: pointer;
|
|
border: 2px solid $accent-1;
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
h6 {
|
|
margin-top: 22px;
|
|
color: $accent-1;
|
|
}
|
|
}
|
|
.head {
|
|
padding: clamp(35px,2.083vw,50px);
|
|
background: $accent-3 h2 {
|
|
color: $black-2;
|
|
text-align: center;
|
|
}
|
|
h6 {
|
|
color: $accent-1;
|
|
}
|
|
p {
|
|
color: $accent-1;
|
|
}
|
|
.slider {
|
|
img {
|
|
stroke-width: 3px;
|
|
stroke: $accent-1;
|
|
}
|
|
}
|
|
}
|
|
}
|