600 West

Question 

<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"
}
  • Content: 
    @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);
}
  • URL: /components/raw/question/Question.scss
  • Filesystem Path: components/templates/Question/Question.scss
  • Size: 873 Bytes

There are no notes for this item.