Produto
PRODUTO
Q&A
Q&A é uma derivação do componente de lista, especificamente para o contexto de testes e questionários dentro da plataforma da Stoodi.
Estados de interação
Instituição
Descrição da questão. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Normal
Hover
Pressed
Correct
Wrong
Código
HTML 
Exibir código
Copiar código
Exibir código
<ul class="list q-a">
<li>
<label class="radio-button">
<input type="radio" />
<span class="radiomark"></span>
<span class="text">
Option 1
</span>
</label>
</li>
<li class="correct">
<label class="radio-button">
<input type="radio" checked />
<span class="radiomark"></span>
<span class="text">
Option 1
</span>
</label>
</li>
<li class="wrong">
<label class="radio-button">
<input type="radio" checked />
<span class="radiomark"></span>
<span class="text">
Option 1
</span>
</label>
</li>
</ul>
SASS Exibir código
Copiar código
Exibir código
.q-a{
counter-reset: listStyle;
padding: 0;
margin: 0;
li{
counter-increment: listStyle;
box-sizing: border-box;
padding: 12px;
&.correct{
background-color: #dbeee5;
border-radius: 4px;
.radiomark{
border-color: #1bb743!important;
&:before{
color: #323232!important;
}
&:after{
background-color: #1bb743!important;
}
}
.text{
color: #323232!important;
}
}
&.wrong{
background-color: rgba(235, 52, 9, 0.2);
border-radius: 4px;
.radiomark{
border-color: #f7744a!important;
&:before{
color: #323232!important;
}
&:after{
background-color: #f7744a!important;
}
}
.text{
color: #323232!important;
}
}
.radio-button {
display: block;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 35px;
padding-right: 10px;
cursor: pointer;
min-height: 25px;
margin: 0;
box-sizing: border-box;
width: auto;
max-width: 100%;
&.disabled{
pointer-events: none;
opacity: 0.5;
}
.text{
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 26px;
letter-spacing: normal;
color: #323232;
white-space: nowrap;
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
top: -1px;
padding-left: 43px;
margin-left: 0;
transition: .4s;
}
input{
position: absolute;
opacity: 0;
transition: .4s;
&:checked + .text {
color: #3153f5;
}
&:checked ~ .radiomark {
background-color: transparent;
border-color: #3153f5;
}
&:checked ~ .radiomark:after {
display: block;
}
&.hovered ~ .radiomark,
&:hover ~ .radiomark{
border-color:#1b68ff;
&:before{
color: #1b68ff;
}
}
&.hovered ~ .text,
&:hover ~ .text{
color: #1b68ff;
}
&.checked ~ .radiomark,
&:checked ~ .radiomark{
border-color:#3153f5;
&:before{
color: #3153f5;
}
}
&.checked ~ .text,
&:checked ~ .text{
color: #3153f5;
}
}
.radiomark {
position: absolute;
top: 0;
left: 0;
height: 24px;
width: 24px;
background-color: transparent;
border: 1px solid #858585;
border-radius: 50%;
box-sizing: border-box;
&::before {
content: counter(listStyle, lower-alpha) ". ";
float: left;
position: relative;
left: 35px;
top: -2px;
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 26px;
letter-spacing: normal;
color: #323232;
white-space: nowrap;
transition: .4s;
}
&:after {
content: "";
position: absolute;
display: none;
top: 4px;
left: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #3153f5;
transition: .4s;
}
}
&:hover,
&.hovered{
.radiomark{
border-color: #1b68ff;
}
.text{
color: #1b68ff;
}
}
}
}
}