diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index a79a68a68fd54857a1c8621d14c9dd2c7b6662a8..77d02b049b34c64587eda7acd52e86cad9b8dba8 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -4,6 +4,7 @@
@use '../../01-core' as *;
:where(details) {
+ font-family: var(--font-primary);
&.uw-details,
&.seven-details{
@include uw-no-breakout();
@@ -62,7 +63,7 @@
display:block;
font-family: var(--font-book);
font-size: var(--font-size-00);
- font-weight: var(--font-weight-3300);
+ font-weight: var(--font-weight-300);
margin: 0;
line-height: 1.25;
outline: 0;
@@ -97,6 +98,7 @@
background: var(--uw-white);
border: var(--size-xs) solid var(--gray-2);
border-top: 0;
+ font-family:inherit;
padding: var(--size-2);
> :last-child {
diff --git a/src/patterns/02-base/typography/typography.twig b/src/patterns/02-base/typography/typography.twig
index b04c6778476b871c38c6d8189f88246b66648ac3..e4450c4bfb801d4b5d3e3efa223b22b93e151e92 100644
--- a/src/patterns/02-base/typography/typography.twig
+++ b/src/patterns/02-base/typography/typography.twig
@@ -476,3 +476,4 @@
</article>
</div>
+</section>
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index fecd07b624d160225a86c13b211bdbdc0095be4a..cd3ddf6b4e3ad813ff76c07e45d99788a8b7bdd6 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -14,6 +14,7 @@
@forward 'content-grid-list/content-grid-list';
@forward 'copy-text/copy-text';
@forward 'date/date';
+@forward 'exp_col_block/exp_col_block';
@forward 'filters/filters';
@forward 'icon/icon';
@forward 'icon/icon--button/icon--button';
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index b14b0d6630019037829690e27f91ef57bf2ed593..c3b3eed16c55c827f59cd8a30cc7712c9bcca278 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -154,7 +154,9 @@ $card-padding: var(--size-2) !default;
.card__content {
margin-bottom: var(--size-3);
width: 100%;
-
+ .card__node--expand-collapse-group &{
+ margin-bottom: 0;
+ }
&:empty {
margin-bottom: 0;
}
diff --git a/src/patterns/04-components/exp_col_block/_exp_col_block.scss b/src/patterns/04-components/exp_col_block/_exp_col_block.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1411e967b7242f296d72292aa474966e696edb32
--- /dev/null
+++ b/src/patterns/04-components/exp_col_block/_exp_col_block.scss
@@ -0,0 +1,375 @@
+@use '../../01-core' as *;
+
+@each $faculty, $colour in $faculties_colours {
+
+ // Wrapping the element with this class, <body>.
+ .#{$faculty} {
+
+ // If the UW branding group
+ @if $faculty == org-default {
+ .uw-exp-col{
+ &__button{
+ &[data-type="expand-all"] {
+ background: var(--gray-2);
+ border-right: var(--size-xs) solid var(--gray-4);
+ color: var(--gray-6);
+ }
+
+ &[data-type="collapse-all"] {
+ background: var(--gray-2);
+ color: var(--gray-6);
+ }
+ &:hover,
+ &:focus {
+ outline: none;
+
+ &[data-type="expand-all"] {
+ background: var(--gray-6);
+ color: var(--gray-2);
+ }
+
+ &[data-type="collapse-all"] {
+ background: var(--gray-6);
+ color: var(--gray-2);
+ }
+ }
+ }
+ .uw-details{
+ .details__summary {
+ @include svg-background(mobile-arrow-down);
+ background-color: var(--gray-2);
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--gray-6);
+ }
+ &:hover,
+ &:focus {
+ @include svg-background(mobile-arrow-down-w);
+ background-color: var(--gray-6);
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--uw-white);
+ }
+ }
+ }
+
+ &[open] {
+ > .details__summary {
+ @include svg-background(mobile-arrow-up);
+ background-color: var(--gray-2);
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--gray-6);
+ }
+ &:focus {
+ @include svg-background(mobile-arrow-up-w);
+ background-color: var(--gray-6);
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--uw-white);
+ }
+ }
+
+ &:hover {
+ @include svg-background(mobile-arrow-up-w);
+ background-color: var(--gray-6);
+ h2,
+ h3,
+ h4,
+ h5,
+ h6{
+ color: var(--uw-white);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ // Else run the loop on the faculties.
+ @else {
+ .uw-exp-col{
+ &__button{
+ &[data-type="expand-all"] {
+ background: var(--#{$colour}-primary);
+ border-right: var(--size-xs) solid var(--uw-white);
+ color: var(--uw-white);
+ }
+
+ &[data-type="collapse-all"] {
+ background: var(--#{$colour}-primary);
+ color: var(--uw-white);
+ }
+
+ &:hover,
+ &:focus {
+ outline: none;
+ &[data-type="expand-all"] {
+ background-color: var(--uw-white);
+ color: var(--#{$colour}-primary);
+ }
+ &[data-type="collapse-all"] {
+ background-color: var(--uw-white);
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+ .uw-details{
+ .details__summary {
+ background-color: var(--#{$colour}-primary);
+ background-image: inherit;
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--uw-white);
+ }
+
+ &::after {
+ @include svg-background-color(var(--uw-white), mobile-arrow-down);
+ }
+
+ &:hover,
+ &:focus {
+ background-color: var(--uw-white);
+ &::after{
+ @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
+ }
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+ }
+
+ .uw-details[open] {
+ .details__summary {
+ background-image: inherit;
+ }
+ > .details__summary {
+ background-color: var(--#{$colour}-primary);
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--uw-white);
+ }
+
+ &::after {
+ @include svg-background-color(var(--uw-white), mobile-arrow-up);
+ }
+ }
+
+ &:focus {
+ .details__summary {
+ background-color: var(--uw-white);
+ background-image: inherit;
+ &::after {
+ @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
+ }
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+
+ &:focus-within {
+ .details__summary {
+ background-color: var(--uw-white);
+ background-image: inherit;
+ &::after {
+ @include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
+ }
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+ &:hover {
+ .details__summary {
+ background-color: var(--uw-white);
+ &::after {
+ @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
+ }
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+.uw-exp-col {
+ -webkit-font-smoothing: antialiased;
+ &__operations {
+ list-style-type: none;
+ margin: 0;
+ padding: var(--size-2) 0 0;
+ li {
+ display: inline-block;
+ }
+ }
+ &___group-info,
+ &__heading-selector,
+ &__heading-text {
+ display: inline-block;
+ }
+ &__heading-selector {
+ .form-select {
+ display: inline-block;
+ width: 82%;
+ }
+ }
+ &__group-info,
+ &__heading-text {
+ .ui-dialog & {
+ input[size="60"] {
+ display: inline-block;
+ }
+ }
+ }
+
+ &__table {
+ td {
+ vertical-align: top;
+ }
+ }
+
+ &__controls {
+ border: var(--size-xs) solid var(--gray-2);
+ display: grid;
+ grid-template-columns: 50% 50%;
+ margin-bottom: var(--size-2);
+ .no-js & {
+ display: none;
+ }
+
+ .no-js.js &,
+ .js & {
+ display: grid;
+ }
+ }
+
+ &__button {
+ font-size: var(--font-size-1);
+ font-weight: 400;
+ margin: 0;
+ max-width: inherit;
+ &--controls {
+ text-align: center;
+ }
+ }
+
+ .uw-details {
+ border: inherit;
+ font-family: inherit !important;
+ margin-bottom: var(--size-2);
+ margin-top: inherit;
+ .details__summary {
+ background-image: inherit;
+ border: var(--size-xs) solid var(--gray-2);
+ padding: 0;
+ position: relative;
+ text-shadow: inherit;
+ transition: background-color 0.2s ease-in-out;
+ &::after {
+ content: '';
+ display: block;
+ height: var(--size-2);
+ position: absolute;
+ right: var(--size-2);
+ top: calc(50% - 0.5rem);
+ width: var(--size-2);
+ }
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-family: var(--font-condensedbook);
+ // All headers currently set to same size
+ font-size: var(--font-size-1);
+ font-weight: var(--font-weight-400);
+ letter-spacing: var(--font-letterspacing-2);
+ line-height: var(--font-lineheight-4);
+ margin: 0;
+ padding: var(--size-2) 2.75rem var(--size-2) var(--size-2);
+ text-transform: uppercase;
+ }
+ }
+ }
+ .details__content {
+ background-color: var(--gray-1);
+ padding: var(--size-2);
+ .layout {
+ padding: 0;
+ }
+ .block {
+ margin-bottom: var(--size-2);
+ }
+ }
+}
+.uw-exp-col__group-info {
+ .form-type-entity-autocomplete {
+ display: inline-block;
+ width: 90%;
+ }
+}
+
+/* stylelint-disable selector-max-id, declaration-no-important */
+#drupal-modal {
+ .uw-content-moderation {
+ display: none;
+ }
+}
+/* stylelint-enable selector-max-id, declaration-no-important */
+.layout-builder{
+ &__section [data-expand-collapse-group],
+ &__section [data-expand-collapse-header] {
+ margin-top: var(--size-5) !important;
+ position: relative;
+ &:first-of-type {
+ &::before {
+ background: #195c8f;
+ padding: var(--size-05) var(--size-2);
+ top: -0.5rem;
+ }
+ }
+ }
+
+ &.layout__region{
+ outline: var(--size-sm) dashed #195c8f;
+ }
+}
diff --git a/src/patterns/04-components/exp_col_block/exp-col-block.js b/src/patterns/04-components/exp_col_block/exp-col-block.js
new file mode 100644
index 0000000000000000000000000000000000000000..de4466dc71043fecaa75568c53ac270212868226
--- /dev/null
+++ b/src/patterns/04-components/exp_col_block/exp-col-block.js
@@ -0,0 +1,33 @@
+/**
+ * @file
+ */
+
+(function ($, Drupal) {
+ 'use strict';
+ Drupal.behaviors.expcol = {
+ attach: function () {
+ $(document).ready(function () {
+
+ $('.uw-exp-col').each(function () {
+
+ // The id selector for the exp/col.
+ var idSelector = '#' + $(this).attr('id');
+
+ // Open all the details for the clicked E/C.
+ $(idSelector + ' button[data-type="expand-all"]').click(function () {
+ $(idSelector + ' details').each(function () {
+ $(this).attr('open', 'TRUE');
+ });
+ });
+
+ // Close all the details for the clicked E/C.
+ $(idSelector + ' button[data-type="collapse-all"]').click(function () {
+ $(idSelector + ' details').each(function () {
+ $(this).removeAttr('open');
+ });
+ });
+ });
+ });
+ }
+ };
+})(jQuery, Drupal);
diff --git a/src/patterns/04-components/exp_col_block/exp_col_block.twig b/src/patterns/04-components/exp_col_block/exp_col_block.twig
new file mode 100644
index 0000000000000000000000000000000000000000..98a7a4f69b24e6a562ac08fd0e5075d8f1923088
--- /dev/null
+++ b/src/patterns/04-components/exp_col_block/exp_col_block.twig
@@ -0,0 +1,27 @@
+{% if pattern_lab %}
+ <div class="org-default">
+{% endif %}
+{% if exp_col.items|length > 0 %}
+ <div id="{{ exp_col.uuid }}" class="uw-exp-col">
+ {% if exp_col.show_exp_col_all %}
+ <div class="uw-exp-col__controls">
+ <button class="uw-exp-col__button uw-exp-col__button--controls" data-type="expand-all">Expand All</button>
+ <button class="uw-exp-col__button uw-exp-col__button--controls" data-type="collapse-all">Collapse All</button>
+ </div>
+ {% endif %}
+
+ {% for ec in exp_col.items %}
+ <details class="uw-details">
+ <summary class="details__summary">
+ <{{ exp_col.heading_selector }}>{{ ec.heading_text }}</{{ exp_col.heading_selector }}>
+ </summary>
+ <div class="details__content">
+ {{ ec.content }}
+ </div>
+ </details>
+ {% endfor %}
+ </div>
+{% endif %}
+{% if pattern_lab %}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/exp_col_block/exp_col_block.yml b/src/patterns/04-components/exp_col_block/exp_col_block.yml
new file mode 100644
index 0000000000000000000000000000000000000000..65ee81d6482bb88cf482595e2fb63880731344e7
--- /dev/null
+++ b/src/patterns/04-components/exp_col_block/exp_col_block.yml
@@ -0,0 +1,20 @@
+exp_col:
+ heading_selector: 'h2'
+ uuid: '092q5780923480932846928'
+ show_exp_col_all: true
+ items:
+ -
+ heading_text: 'Exp/Col 1'
+ content: '<p>Exp/Col 1 Content'
+ -
+ heading_text: 'Exp/Col 2'
+ content: '<p>Exp/Col 2 Content'
+ -
+ heading_text: 'Exp/Col 3'
+ content: '<p>Exp/Col 3 Content'
+ -
+ heading_text: 'Exp/Col 4'
+ content: '<p>Exp/Col 4 Content'
+ -
+ heading_text: 'Exp/Col 5'
+ content: '<p>Exp/Col 5 Content'
diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index 6952b5dc44f1683b13e28a831ad41ad611cf6f5f..51d95e937a53a38a496588bebc070c5bde52bc42 100644
--- a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -594,6 +594,7 @@ $menu-horizontal-drop-bg: #f7f7f7;
}
}
}
+/* stylelint-disable-next-line function-url-quotes */
@-moz-document url-prefix() {
.uw-horizontal-nav--menu .menu .submenu-active .menu__subnav .menu__item.sub-1{
display: inline-grid !important;