<div class="sidebar_question">
</div><!-- end sidebar_question -->
<div class="sidebar_question">
{% set has_heading = heading.0['#text'] %}
{% set has_content = content.0['#text'] %}
{% if has_heading or icon_class %}
<div class="top_line {{ icon_class ? '' : 'no-icon' }} {{ has_heading ? '' : 'no-heading' }}">
{% if icon_class and icon_style %}
<span class="icon {{ icon_style }} {{ icon_class }}"><span class="sr-only">question</span></span>
{% endif %}
{{ heading }}
</div>
{% endif %}
{% if has_content %}
<div class="question">
{{ content }}
</div>
{% endif %}
</div><!-- end sidebar_question -->
{
"side_question_title": "Ask a Question",
"side_question": "Do you have any questions about applying to Lehigh? Email us at <a href='mailto:email@lehigh.edu'>email@lehigh.edu</a>."
}
.sidebar_question {
display: flex;
flex-direction: column;
margin-bottom: $space_and_half;
margin-top: $space_and_half;
.top_line {
text-align: left;
background-color: $accent_color;
background-color: var(--accent_color, $accent_color);
padding: $space_one_half;
display: flex;
align-items: center;
gap: $space_one_half;
h3 {
margin-bottom: 0;
}
.icon {
border-radius: 50%;
height: 40px;
width: 40px;
padding: 9px;
background-color: $white;
background-color: var(--white, $white);
color: $black;
color: var(--black, $black);
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
.color-scheme-dark & {
color: $base_font;
color: var(--base_font, $base_font);
}
}
&.no-icon {
padding: $spacer;
}
&.no-heading {
justify-content: center;
}
}
.question {
background-color: $grey_lightest;
background-color: var(--grey_lightest, $grey_lightest);
padding: $spacer;
.color-scheme-dark & {
background-color: $dark_mode_grey;
background-color: var(--dark_mode_grey, $dark_mode_grey);
}
h2,
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
}
}
Display sidebar component to ask a question.