/*Стили карточек опций*/ --bgColorOption: #f7f7f7; /*Фоновый цвет*/ --paddingOption: 15px; /*Внутренние отступы у карточки*/ --gapOption: 15px; /*Отступ между текстом и фото*/ --borderRadiusOption: 12px; /*Скругление углов*/ --outlineOption: 2px solid #15470A; /*Цвет обводки выбранной карточки*/ /*Иконка галочки при выбранной опции*/ --iconChecked: url(https://static.tildacdn.com/tild6463-6630-4166-b532-316166343735/checked.svg); /*Ссылка на иконку*/ --iconWidthChecked: 20px; /*Ширина иконки*/ --topIconChecked: 10px; /*Отступ сверху от самой карточки*/ --rightIconChecked: 10px; /*Отступ справа от самой карточки*/ } /*Стили заголовка для дополнительных опций*/ .js-product-multioption .js-product-option-name{ font-size: 18px; /**/ font-weight: 500; /**/ letter-spacing: -0.5px; /**/ margin-bottom: 15px; /**/ } /*----------*/ /*Стили для родительского контейнера с чекбоксами (карточками)*/ .js-product-multioption .t-product__checkbox-wrap { margin: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /*первое значение – это минимальная ширина карточки*/ gap: 15px; /*отступ между карточками*/ } .js-product-multioption .t-checkbox__indicator { display: none; /*Скрываем стандартный чекбокс*/ } /*----------*/ /*Стили самих карточек*/ .js-product-multioption .t-checkbox__control { display: flex; flex-direction: column; gap: var(--gapOption); /*Отступ между фото и названием*/ margin: 0 !important; padding: var(--paddingOption); /*Внутренние отступы*/ background-color: var(--bgColorOption); /*Фоновый цвет*/ border-radius: var(--borderRadiusOption); /*Радиус скругления углов*/ position: relative; } /*Стили текста для названий доп. опций*/ .js-product-multioption .t-checkbox__control span{ font-size: 12px; /*Размер текста*/ line-height: 1.1; /*Межстрочка*/ font-weight: 400; /*Толщина*/ letter-spacing: -0.3px; /*Трекинг*/ } /*Иконка галочки при выборе доп. опции*/ .js-product-multioption .t-checkbox__control:after{ content:""; position: absolute; top: var(--topIconChecked); /*Отступ сверху от самой карточки*/ right: var(--rightIconChecked); /*Отступ справа от самой карточки*/ display: block; width: var(--iconWidthChecked); /*Ширина иконки*/ scale: 0; aspect-ratio: 1 / 1; background-image: var(--iconChecked); /*Иконка галочки*/ background-size: cover; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease-in; /*плавность анимации появления*/ transform-origin: center; } .js-product-multioption .t-checkbox { scale: 0 !important; /*Изначальный размер иконки галочки*/ } .js-product-multioption .t-checkbox__control:has(.t-checkbox:checked):after{ scale: 1; /*Размер галочки при выбранной опции*/ } .js-product-multioption .t-checkbox__control:has(.t-checkbox:checked) { outline: var(--outlineOption); /*Цвет обводки у выбранной опции*/ } /*----------*/ /* Общие настройки для фото опций */ .js-product-multioption .t-checkbox__control:before{ content:""; display: block; width: 92px; /*Ширина фотографии*/ aspect-ratio: 1 / 1; /*Соотношение сторон у фотографий опций*/ background-size: cover !important; background-repeat: no-repeat; background-position: center; box-sizing: border-box !important; } /*Фото для конкретных опций*/ /*Здесь вы можете добавлять и удалять лишние строчки кода. Чтобы фото подгружались, необходимо указать точное название, как в примере и вставить ссылку на изображение*/ .js-product-multioption .t-checkbox__control:has(input[name="Прямоугольная"]):before{ background-image: url(https://static.tildacdn.com/stor6566-6433-4232-b836-326537636263/43472888.png); } .js-product-multioption .t-checkbox__control:has(input[name="Вырез, скругление 2х углов"]):before{ background-image: url(https://static.tildacdn.com/stor3239-6236-4039-b566-633131316133/69939001.png); } .js-product-multioption .t-checkbox__control:has(input[name="Вырез, скругление 4х углов"]):before{ background-image: url(https://static.tildacdn.com/stor3835-6530-4538-b435-613064346435/21140225.png); } .js-product-multioption .t-checkbox__control:has(input[name="Скругление 4х углов"]):before{ background-image: url(https://static.tildacdn.com/stor6363-6139-4733-b061-306639313737/43202370.png); } .js-product-multioption .t-checkbox__control:has(input[name="Модерн"]):before{ background-image: url(https://static.tildacdn.com/stor6433-3930-4264-b935-393337333466/32302639.png); } .js-product-multioption .t-checkbox__control:has(input[name="Хайтек"]):before{ background-image: url(https://static.tildacdn.com/stor3266-6531-4664-b065-313432626536/70317545.png); } .js-product-multioption .t-checkbox__control:has(input[name="Левый угловой"]):before{ background-image: url(https://static.tildacdn.com/stor3465-6431-4666-b635-313036646637/18950505.png); } .js-product-multioption .t-checkbox__control:has(input[name="Правый угловой"]):before{ background-image: url(https://static.tildacdn.com/stor3433-3536-4534-b862-613461316333/99619409.png); } /*Подстолья*/ .js-product-multioption .t-checkbox__control:has(input[name="Upstol One"]):before{ background-image: url(https://static.tildacdn.com/stor3362-6639-4132-a430-633236656465/52743303.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="Upstol Stand Lite"]):before{ background-image: url(https://static.tildacdn.com/stor3764-6566-4330-b138-313235373939/23978542.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="Upstol Stand Pro"]):before{ background-image: url(https://static.tildacdn.com/stor6332-3832-4331-b836-333963666331/36551126.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="Upstol Stand Pro Max"]):before{ background-image: url(https://static.tildacdn.com/stor6262-3835-4432-b266-616162656431/18521152.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Motor UP"]):before{ background-image: url(https://static.tildacdn.com/stor3438-3837-4234-a336-323466303562/27775199.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Bazalt"]):before{ background-image: url(https://static.tildacdn.com/stor3232-6632-4265-b037-343535663865/88825470.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Titanium"]):before{ background-image: url(https://static.tildacdn.com/stor3239-3739-4430-a665-313130353232/13941771.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Titanium Design"]):before{ background-image: url(https://static.tildacdn.com/stor6535-6434-4534-a166-323737663132/67146941.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Titanium Pro"]):before{ background-image: url(https://static.tildacdn.com/stor3365-3533-4338-a439-313738346664/11041247.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya BigBoss"]):before{ background-image: url(https://static.tildacdn.com/stor3863-3135-4733-b933-626430333562/10485657.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Alfa"]):before{ background-image: url(https://static.tildacdn.com/stor3137-6535-4432-b566-303630353731/12049734.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Bazalt 1M"]):before{ background-image: url(https://static.tildacdn.com/stor3363-3962-4163-b362-666266613237/41428415.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="Upstol Trio"]):before{ background-image: url(https://static.tildacdn.com/stor6363-3766-4932-b131-383931366634/72340056.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Titanium III"]):before{ background-image: url(https://static.tildacdn.com/stor3036-6463-4334-a130-636531643738/74633341.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Congress"]):before{ background-image: url(https://static.tildacdn.com/stor6163-6433-4536-b761-303765393630/46988482.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya TWIN"]):before{ background-image: url(https://static.tildacdn.com/stor3739-3263-4266-a561-346665646463/17929852.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="StolStoya Tamerlan"]):before{ background-image: url(https://static.tildacdn.com/stor3162-6339-4463-a234-633439333239/44961454.jpg); } /*Стационарные рамы*/ .js-product-multioption .t-checkbox__control:has(input[name="C3"]):before{ background-image: url(https://static.tildacdn.com/stor6437-3935-4336-b333-613561633931/74577885.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C6"]):before{ background-image: url(https://static.tildacdn.com/stor3335-3239-4162-b536-316135323830/33812554.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C9"]):before{ background-image: url(https://static.tildacdn.com/stor3838-6466-4035-b637-326563343538/83524700.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C14"]):before{ background-image: url(https://static.tildacdn.com/stor3961-3565-4036-b564-666665363665/61218726.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C15"]):before{ background-image: url(https://static.tildacdn.com/stor6134-6331-4163-b738-613662626263/11980103.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C18"]):before{ background-image: url(https://static.tildacdn.com/stor6335-3862-4531-b566-646434343064/63626740.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C21"]):before{ background-image: url(https://static.tildacdn.com/stor3330-3239-4063-b834-376334396564/21852045.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C24"]):before{ background-image: url(https://static.tildacdn.com/stor6338-3531-4536-b537-356437386634/12250685.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C27"]):before{ background-image: url(https://static.tildacdn.com/stor6336-3965-4265-a532-336263633434/47868241.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C14y"]):before{ background-image: url(https://static.tildacdn.com/stor6332-3635-4933-b332-333439373361/36509885.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C9y"]):before{ background-image: url(https://static.tildacdn.com/stor6530-3661-4339-b938-653964333833/70100959.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C21y"]):before{ background-image: url(https://static.tildacdn.com/stor6639-3033-4938-a635-363432623362/99340759.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="C27y"]):before{ background-image: url(https://static.tildacdn.com/stor6531-3031-4133-b633-363066343635/75140323.jpg); } /*Цвет подстолья*/ .js-product-multioption .t-checkbox__control:has(input[name="Белый"]):before{ background-image: url(https://static.tildacdn.com/stor3835-6665-4064-a136-313662346133/96442632.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="Черный"]):before{ background-image: url(https://static.tildacdn.com/stor3266-3038-4434-b966-616364393866/77717651.jpg); } .js-product-multioption .t-checkbox__control:has(input[name="Серый"]):before{ background-image: url(https://static.tildacdn.com/stor3037-3439-4534-a337-333966373034/47843627.jpg); .js-product-multioption .t-checkbox__control:has(input[name="Под заказ (напишите в комментарии)"]):before{ background-image: url(https://static.tildacdn.com/stor3634-6261-4635-b465-383739656331/86526661.jpg); } /*----------*/ /*Отображение цены в карточках*/ .priceOption { position: absolute; /*Можно указать relative и тогда цена будет над название опции*/ top: 10px; /*Отступ сверху*/ left: 10px; /*Отступ справа*/ background-color: #a0b499; /*Фоновый цвет*/ border-radius: 100px; /*Скругление углов*/ padding: 2px 6px; /*Отступы*/ font-size: 12px; /*Размер текста*/ font-weight: 500; /*Толщина текста*/ color: #ffffff; /*Цвет текста*/ } /*----------*/ /*Стили для мобильных устройств*/ @media screen and (max-width: 480px){ /*Стили для родительского контейнера с чекбоксами (карточками)*/ .js-product-multioption .t-product__checkbox-wrap { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /*перавое значение – это минимальная ширина карточки*/ gap: 10px; /*отступ между карточками*/ } /*Стили текста для названий доп. опций*/ .js-product-multioption .t-checkbox__control span{ font-size: 10px; /*Размер текста*/ letter-spacing: -0.2px; /*Трекинг*/ overflow-wrap: anywhere; /*Если слово длинное, оно перенесется на другу строку*/ } }
,
Выбирайте стол в сборе или соберите свой индивидуальный стол
Фотогалерея столов владельцев StolStoya для вашего вдохновения