Commit fea0a208 authored by m26lebla's avatar m26lebla

Additional changes to accomodate dynamic uw tabs used by the multi-list

parent fab76c70
......@@ -4407,58 +4407,6 @@ fieldset,
.mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
color: #000; }
.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;
margin: 0 0 0 0.15rem;
max-width: inherit; }
.uw-tablinks[aria-selected="true"] {
background: #eee;
border-bottom: 0.4rem solid #4e4e4e;
color: #4e4e4e; }
.uw-tablinks[aria-selected="true"]:hover {
border-bottom: 0.4rem solid #ddd; }
.uw-tablinks:hover {
border-bottom: 0.4rem solid #fff; }
.uw-tabcontent[role="tabpanel"] {
display: flex;
flex-flow: row wrap;
padding-top: 24px; }
.uw-tabcontent[role="tabpanel"][hidden] {
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-tabcontent[role="tabpanel"] .card {
flex-grow: 1;
width: 45%; } }
@media (min-width: 63.1875rem) {
.uw-tabcontent[role="tabpanel"] .card {
width: 32%; } }
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title {
margin-top: 0; }
.page-title {
padding-top: 1rem; }
......@@ -4705,102 +4653,57 @@ picture {
speak: none;
text-transform: none; }
.tabs::after {
clear: both;
content: "";
display: table; }
.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; }
.tabs__items {
list-style-type: none;
margin: 0;
padding: 0;
.uw-tab {
display: flex; }
html:not(.js) .uw-tab {
display: none; }
.uw-tablinks {
border-bottom: 0.4rem solid #fff;
margin: 0 0 0 0.15rem;
max-width: inherit; }
.uw-tablinks[aria-selected="true"] {
background: #eee;
border-bottom: 0.4rem solid #4e4e4e;
color: #4e4e4e; }
.uw-tablinks[aria-selected="true"]:hover {
border-bottom: 0.4rem solid #ddd; }
.uw-tablinks:hover {
border-bottom: 0.4rem solid #fff; }
.uw-tabcontent[role="tabpanel"] {
display: flex;
flex-direction: column; }
.tabs__items li {
padding-left: 0; }
.tabs__items li::before {
display: none; }
@media (min-width: 40.0625em) {
.tabs__items {
flex-direction: row; } }
@media print {
.tabs__items {
display: none; } }
flex-flow: row wrap;
padding-top: 24px; }
.uw-tabcontent[role="tabpanel"][hidden] {
display: none; }
.tabs__item:first-child .tabs__link {
border-bottom-left-radius: 0;
border-left: 0;
border-top-left-radius: 0; }
html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
display: flex; }
.tabs__item:last-child .tabs__link {
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
.uw-tabcontent[role="tabpanel"] .card {
width: 100%; }
@media (min-width: 40.06rem) {
.uw-tabcontent[role="tabpanel"] .card {
flex-grow: 1;
width: 45%; } }
@media (min-width: 63.1875rem) {
.uw-tabcontent[role="tabpanel"] .card {
width: 32%; } }
.tabs__link {
background-color: #eee;
background-image: none;
border: 0;
border-radius: 0;
box-shadow: none;
color: #000;
cursor: pointer;
display: inline-block;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 18px;
font-weight: 600;
height: auto;
letter-spacing: 0.055rem;
line-height: 1.45;
max-width: 18.125rem;
padding: 1rem 1.5rem;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: uppercase;
transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width: 100%;
border-left: 1px solid #A2A2A2;
display: block;
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-size: 1.125rem;
line-height: 0.8888888889;
margin: 0;
padding: 0.5rem 1rem; }
.tabs__link:visited {
color: #000; }
.tabs__link:hover, .tabs__link:focus {
background-color: #A2A2A2;
background-image: none;
border: 0;
box-shadow: none !important;
color: #000;
outline: none !important;
text-decoration: none; }
.tabs__link:active {
background-color: #4e4e4e;
background-image: none;
color: #fff;
outline: none !important; }
.tabs__link[disabled] {
background-color: #eee;
background-image: none;
color: #A2A2A2;
cursor: default;
pointer-events: none; }
.tabs__link:focus {
background-color: #A2A2A2; }
.tabs__link:visited, .tabs__link:hover {
color: #000; }
.tabs__link:active {
background-color: #4e4e4e;
color: #fff; }
.tabs__link.is-active {
background-color: #4e4e4e;
color: #fff; }
.tabs__link.is-active:hover {
color: #fff; }
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title {
margin-top: 0; }
.block-local-tasks-block nav nav ul li a {
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
......
......@@ -25,7 +25,7 @@
'sources': info.sources,
'img_element': info.img_element,
'alt': info.alt,
'content': info.contnet
'content': info.content
} %}
{% endif %}
......
.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 {
border-bottom: 0.4rem solid #fff;
margin:0 0 0 0.15rem;
max-width: inherit;
&[aria-selected="true"] {
background: $button-background-color-hover;
border-bottom: 0.4rem solid $button-text-color-hover;
color: $button-text-color-hover;
&:hover{
border-bottom: 0.4rem solid #ddd;
}
}
&:hover{
border-bottom: 0.4rem solid #fff;
}
}
.uw-tabcontent[role="tabpanel"] {
display:flex;
flex-flow: row wrap;
padding-top: gesso-spacing(md);
&[hidden] {
display:none;
}
}
html:not(.js) .uw-tabcontent[role="tabpanel"][hidden]{
display: flex;
}
.uw-tabcontent[role="tabpanel"] .card{
width:100%;
@include small{
flex-grow: 1;
width: 45%;
}
@include large{
width: 32%;
}
}
// lineup the top of the date with the title in blog teaser
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title{
margin-top:0;
}
// @file
// Styles for Tabs.
$tab-font-family: gesso-font-family(systemmedium) !default;
$tab-background-color: gesso-color(ui, generic, background-light) !default;
$tab-background-color-active: gesso-color(
ui,
generic,
background-dark
) !default;
$tab-background-color-disabled: gesso-color(
ui,
generic,
background-light
) !default;
$tab-background-color-hover: gesso-color(ui, generic, background) !default;
$tab-border-color: gesso-color(ui, generic, border) !default;
$tab-border-radius: 0 !default;
$tab-text-color: gesso-color(text, on-light) !default;
$tab-text-color-active: gesso-color(text, on-dark) !default;
$tab-text-color-disabled: gesso-color(ui, generic, text-light) !default;
$tab-text-color-hover: gesso-color(text, on-light) !default;
// Styles for UW Tabs.
.tabs {
@include clearfix;
}
.tabs__items {
@include list-clean;
display: flex;
flex-direction: column;
@include breakpoint(gesso-breakpoint(sm)) {
flex-direction: row;
.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
@media print {
display: none;
.uw-tab {
display:flex;
html:not(.js) &{
display:none;
}
}
.tabs__item {
&:first-child {
.tabs__link {
border-bottom-left-radius: $tab-border-radius;
border-left: 0;
border-top-left-radius: $tab-border-radius;
//button
.uw-tablinks {
border-bottom: 0.4rem solid #fff;
margin:0 0 0 0.15rem;
max-width: inherit;
&[aria-selected="true"] {
background: $button-background-color-hover;
border-bottom: 0.4rem solid $button-text-color-hover;
color: $button-text-color-hover;
&:hover{
border-bottom: 0.4rem solid #ddd;
}
}
&:last-child {
.tabs__link {
border-bottom-right-radius: $tab-border-radius;
border-top-right-radius: $tab-border-radius;
}
&:hover{
border-bottom: 0.4rem solid #fff;
}
}
.tabs__link {
@include button(
$tab-background-color,
$tab-text-color,
$tab-background-color-hover,
$tab-text-color-hover,
$tab-background-color-active,
$tab-text-color-active,
$tab-background-color-disabled,
$tab-text-color-disabled,
0
);
border-left: 1px solid $tab-border-color;
display: block;
font-family: $tab-font-family;
font-size: rem(gesso-font-size(1));
line-height: (16px / gesso-font-size(1));
margin: 0;
padding: rem(gesso-spacing(xs)) rem(gesso-spacing(sm));
&:focus {
background-color: $tab-background-color-hover;
}
.uw-tabcontent[role="tabpanel"] {
display:flex;
flex-flow: row wrap;
padding-top: gesso-spacing(md);
&:visited,
&:hover {
color: $tab-text-color;
&[hidden] {
display:none;
}
&:active {
background-color: $tab-background-color-active;
color: $tab-text-color-active;
}
}
html:not(.js) .uw-tabcontent[role="tabpanel"][hidden]{
&.is-active {
background-color: $tab-background-color-active;
color: $tab-text-color-active;
display: flex;
}
&:hover {
color: $tab-text-color-active;
}
.uw-tabcontent[role="tabpanel"] .card{
width:100%;
@include small{
flex-grow: 1;
width: 45%;
}
@include large{
width: 32%;
}
}
// lineup the top of the date with the title in blog teaser
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title{
margin-top:0;
}
.block-local-tasks-block{
nav nav ul li a {
font-family: $tab-font-family;
font-family: gesso-font-family(systemmedium);
}
}
\ No newline at end of file
}
......@@ -2,8 +2,15 @@
button button--large {{ modifier_classes }}
{%- endset %}
{% block something %}
{% endblock %}
{% if is_demo %}
{% set content_list = [] %}
{% for type, list in lists %}
{% set content_list = content_list|merge([type]) %}
{% endfor %}
{% endif %}
<div class="uw-tabs">
<div class="uw-tab" role="tablist" aria-label="Multi-tab-list">
......
---
modifier_classes: ''
heading: ''
tabs:
-
text: 'View'
url: '#'
active: true
-
text: 'Edit'
url: '#'
-
text: 'Delete'
url: '#'
is_demo: true
lists:
Tab-1:
-
Tab-2:
-
Tab-3:
-
\ No newline at end of file
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