diff --git a/css/styles.css b/css/styles.css
index 0cb1bd7e6cb3f4f4b276e1c3c5464882b5d6e1dc..c52f618ee911e3c3bad1d14499298f1a85dc7ff2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -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; }
diff --git a/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig b/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
index ba0bfc2b08c2d329d0fef2973482a56d17b2a186..3bd943addc58266bd629a2fd07f242e594a658df 100644
--- a/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
+++ b/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
@@ -25,7 +25,7 @@
'sources': info.sources,
'img_element': info.img_element,
'alt': info.alt,
- 'content': info.contnet
+ 'content': info.content
} %}
{% endif %}
diff --git a/source/_patterns/04-components/multi-type-list/_multi-type-list.scss b/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
deleted file mode 100644
index 288a2596c0b853db4b8956911b0607489a634989..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.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;
-}
diff --git a/source/_patterns/04-components/tabs/_tabs.scss b/source/_patterns/04-components/tabs/_tabs.scss
index 1f0d63c4d06963fc99175b404072652bb90d325e..114a32ce689a820c7e98a6213303b569186881d3 100644
--- a/source/_patterns/04-components/tabs/_tabs.scss
+++ b/source/_patterns/04-components/tabs/_tabs.scss
@@ -1,105 +1,84 @@
// @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
+}
+
+
+
+
+
diff --git a/source/_patterns/04-components/tabs/tabs.twig b/source/_patterns/04-components/tabs/tabs.twig
index b53e73c554e35d5c6df414a72fdef7ab66d35293..0adb7c9dc0b6c60378e0fdedd56cff325171a2e7 100644
--- a/source/_patterns/04-components/tabs/tabs.twig
+++ b/source/_patterns/04-components/tabs/tabs.twig
@@ -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">
diff --git a/source/_patterns/04-components/tabs/tabs.yml b/source/_patterns/04-components/tabs/tabs.yml
index e10e633e6642abc000f51cecf3b7aad762671d29..3d4a42cee4f7191b2de0a08aa052395cb7ad5670 100644
--- a/source/_patterns/04-components/tabs/tabs.yml
+++ b/source/_patterns/04-components/tabs/tabs.yml
@@ -1,14 +1,10 @@
---
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