<li class="Question list " style="" role="group">
<div class="row _left ma-auto">
<div class="col _span-2">
<div class="Question-number-wrapper">
<div class="Question-number ">
01
</div>
</div>
</div>
<div class="col _span-8">
<div class="Question-content">
</div>
</div>
</div>
</li>
<li class="Question list {{modifier}}" style="{{style}}" role="group">
<div class="row _left ma-auto">
<div class="col _span-2">
<div class="Question-number-wrapper">
<div class="Question-number {{#if isActive}}is-active{{/if}}">
{{number}}
</div>
</div>
</div>
<div class="col _span-8">
<div class="Question-content">
{{> @children }}
</div>
</div>
</div>
</li>
{
"number": "01"
}
@import "../../Axioms";
.Question-number-wrapper {
height: 100%;
overflow: hidden;
&::after {
display: block;
width: 0;
height: 100%;
margin: 20px auto;
border-right: 2px solid get-color(neutral, 200);
content: "";
}
.Question._no-line &::after {
content: none;
}
}
.Question-number {
@include font-size-lead;
@include font-weight-semibold;
display: flex;
width: 3.5rem;
height: 3.5rem;
padding: .5rem;
margin: auto;
justify-content: center;
align-items: center;
line-height: 0;
color: get-color(neutral, 200);
border: 3px solid get-color(neutral, 200);
.Question:hover &,
&._dark,
&.is-active {
color: theme-color(text);
border-color: theme-color(text);
}
}
.Question-content {
padding-bottom: Space(800);
}
There are no notes for this item.