Шаблон:CheckboxCreator: различия между версиями

Материал из Space Station 14 Вики
Нет описания правки
Нет описания правки
 
(не показано 12 промежуточных версий этого же участника)
Строка 1: Строка 1:
<div class="outer-wrapper">
<div class="outer-wrapper">
<div class="checkbox-wrapper">
<div class="checkbox-wrapper"  
<div class="{{#switch: {{{1}}}}} checkbox-container">
    style="
<!-- Здесь создаться чекбокс, с помощью JS -->
    padding: {{{padding|12px}}};
</div></div></div>
background: {{{background-color|#27272e}}};
 
border: {{{border-size|2px}}} solid {{{border-color|#9F2828}}};
 
    ">
<div class="customCSS" style="display:none">.outer-wrapper{display:flex;justify-content:center;align-items:center;height:100vh;font-family:Arial,sans-serif}
<div class="{{{1|}}} checkbox-container">
.checkbox-wrapper{padding:20px;border:2px solid #007BFF;border-radius:10px;background-color:#fff;box-shadow:0 4px 8px rgba(0,0,0,0.1)}
<!-- Здесь создаться чекбокс, с помощью JS -->
.checkbox-container{display:flex;align-items:center;cursor:pointer}
</div></div>
.checkbox-container label{margin-right:10px}
</div>
.checkbox-container input[type="checkbox"]{appearance:none;width:20px;height:20px;border:2px solid #007BFF;border-radius:4px;position:relative;display:flex;justify-content:center;align-items:center}
<!-- -->
.checkbox-container input[type="checkbox"]::after{content:'';width:10px;height:10px;background-color:#007BFF;border-radius:2px;opacity:0;transition:opacity 0.2s ease}
<div class="customCSS" style="display:none">
.checkbox-container input[type="checkbox"]:checked::after{opacity:1}</div>
.outer-wrapper {
display: flex;
justify-content: left;
align-items: left;
font-family: Arial,sans-serif;
color: #EFE8D8;
font-weight: bold
}
.checkbox-wrapper {
border-radius: 0.35em;
box-shadow: 0 4px 8px rgba(0,0,0,0.1)
}
.checkbox-container {
display: flex;
align-items: center;
cursor: pointer
}
.checkbox-container label {
margin-right: 5px
}
</div>

Текущая версия от 19:48, 24 июля 2024