Commit 5d53e52c authored by m26lebla's avatar m26lebla

Addidtional css to allow for semantic flow of content when no javascript is in browser

parent b0feb8b9
......@@ -4410,9 +4410,18 @@ fieldset,
.uw-tabs {
margin: 16px auto;
width: 100%; }
.uw-tabs .hide-js {
display: none; }
html:not(.js) .uw-tabs .hide-js {
border-bottom: 2px solid #eee;
display: block;
margin-bottom: 8px;
padding-bottom: 8px; }
.uw-tab {
display: flex; }
html:not(.js) .uw-tab {
display: none; }
.uw-tablinks {
border-bottom: 0.4rem solid #fff;
......@@ -4430,11 +4439,13 @@ fieldset,
.uw-tabcontent[role="tabpanel"] {
display: flex;
flex-flow: row wrap;
padding-top: 1rem; }
padding-top: 24px; }
.uw-tabcontent[role="tabpanel"][hidden] {
background: #cd5c5c;
display: none; }
html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
display: flex; }
.uw-tabcontent[role="tabpanel"] .card {
width: 100%; }
@media (min-width: 40.06rem) {
......
.uw-tabs{
margin:gesso-spacing(sm) auto;
width: 100%;
.hide-js{
display:none;
html:not(.js) &{
border-bottom:2px solid $button-background-color-hover;
display:block;
margin-bottom: gesso-spacing(xs);
padding-bottom: gesso-spacing(xs);
}
}
}
//buttons wrapper
.uw-tab {
display:flex;
html:not(.js) &{
display:none;
}
}
//button
.uw-tablinks {
......@@ -28,16 +40,20 @@
.uw-tabcontent[role="tabpanel"] {
display:flex;
flex-flow: row wrap;
padding-top:1rem;
padding-top: gesso-spacing(md);
&[hidden] {
background: #cd5c5c;
display:none;
}
}
html:not(.js) .uw-tabcontent[role="tabpanel"][hidden]{
display: flex;
}
.uw-tabcontent[role="tabpanel"] .card{
width:100%;
width:100%;
@include small{
flex-grow: 1;
width: 45%;
......@@ -49,4 +65,4 @@
// lineup the top of the date with the title in blog teaser
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title{
margin-top:0;
}
\ No newline at end of file
}
......@@ -9,12 +9,12 @@
{% endfor %}
</div>
{% for type, list in lists %}
<h2 class="hide-js"> {{ type }}</h2>
<div id="{{ type }}" class="uw-tabcontent" role="tabpanel" tabindex="0" aria-labelledby="tab-{{ loop.index }}" {% if loop.index > 1 %} hidden {% endif %} >
{% for content in list %}
{% if type == 'Blog' %}
{% include '@components/teaser/teaser--blog/teaser--blog.twig' with {
'title': content.title,
'url': content.url,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment