From bdf8603303f6d1ef3e4af3ad119e75198d58f0ff Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 28 Jul 2022 12:04:59 -0400
Subject: [PATCH] ISTWCMS-5717: additional css for expand collapse , rename of
scss file to match folder
---
src/patterns/01-core/elements/_details.scss | 4 +-
.../02-base/typography/typography.twig | 1 +
src/patterns/04-components/_index.scss | 2 +-
src/patterns/04-components/card/_card.scss | 4 +-
...exp-col-block.scss => _exp_col_block.scss} | 138 ++++++++++--------
.../menu--horizontal/_menu--horizontal.scss | 1 +
6 files changed, 83 insertions(+), 67 deletions(-)
rename src/patterns/04-components/exp_col_block/{_exp-col-block.scss => _exp_col_block.scss} (83%)
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index a79a68a6..77d02b04 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 b04c6778..e4450c4b 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 4433ed6b..cd3ddf6b 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -14,7 +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 '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 b14b0d66..c3b3eed1 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
similarity index 83%
rename from src/patterns/04-components/exp_col_block/_exp-col-block.scss
rename to src/patterns/04-components/exp_col_block/_exp_col_block.scss
index 34bea0ef..1411e967 100644
--- a/src/patterns/04-components/exp_col_block/_exp-col-block.scss
+++ b/src/patterns/04-components/exp_col_block/_exp_col_block.scss
@@ -2,7 +2,7 @@
@each $faculty, $colour in $faculties_colours {
- // Wrapping the element with this class, <body>.
+ // Wrapping the element with this class, <body>.
.#{$faculty} {
// If the UW branding group
@@ -34,20 +34,27 @@
}
}
}
-
.uw-details{
.details__summary {
@include svg-background(mobile-arrow-down);
background-color: var(--gray-2);
- h2, h3, h4, h5, h6 {
- color: var(--gray-6);
- }
+ 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);
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--uw-white);
}
}
}
@@ -56,14 +63,21 @@
> .details__summary {
@include svg-background(mobile-arrow-up);
background-color: var(--gray-2);
- h2,h3,h4,h5,h6 {
+ 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 {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
color: var(--uw-white);
}
}
@@ -71,7 +85,11 @@
&:hover {
@include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6);
- h2,h3,h4,h5,h6{
+ h2,
+ h3,
+ h4,
+ h5,
+ h6{
color: var(--uw-white);
}
}
@@ -79,15 +97,15 @@
}
}
}
-
- } // Else run the loop on the faculties.
+ }
+ // 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);
+ color: var(--uw-white);
}
&[data-type="collapse-all"] {
@@ -98,27 +116,25 @@
&: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-image: inherit;
- }
.details__summary {
background-color: var(--#{$colour}-primary);
-
- h2, h3, h4, h5, h6 {
+ background-image: inherit;
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
color: var(--uw-white);
}
@@ -132,7 +148,11 @@
&::after{
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
}
- h2, h3, h4, h5, h6 {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
color: var(--#{$colour}-primary);
}
}
@@ -140,15 +160,16 @@
}
.uw-details[open] {
-
.details__summary {
background-image: inherit;
}
-
> .details__summary {
background-color: var(--#{$colour}-primary);
-
- h2, h3, h4, h5, h6 {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
color: var(--uw-white);
}
@@ -158,49 +179,49 @@
}
&:focus {
- .details__summary {
- background-image: inherit;
- }
-
.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 {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
color: var(--#{$colour}-primary);
}
}
}
&:focus-within {
- .details__summary {
- background-image:inherit;
- }
.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 {
+ 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 {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
color: var(--#{$colour}-primary);
}
}
@@ -210,33 +231,27 @@
}
}
}
-
.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 & {
@@ -253,11 +268,10 @@
}
&__controls {
- border: 1px solid var(--gray-2);
+ border: var(--size-xs) solid var(--gray-2);
display: grid;
grid-template-columns: 50% 50%;
- margin-bottom: var(--size-sm);
-
+ margin-bottom: var(--size-2);
.no-js & {
display: none;
}
@@ -273,7 +287,6 @@
font-weight: 400;
margin: 0;
max-width: inherit;
-
&--controls {
text-align: center;
}
@@ -281,9 +294,9 @@
.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);
@@ -291,18 +304,20 @@
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);
+ top: calc(50% - 0.5rem);
width: var(--size-2);
}
-
- h2,h3,h4,h5,h6 {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
font-family: var(--font-condensedbook);
// All headers currently set to same size
font-size: var(--font-size-1);
@@ -318,18 +333,14 @@
.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;
@@ -344,7 +355,6 @@
}
}
/* stylelint-enable selector-max-id, declaration-no-important */
-
.layout-builder{
&__section [data-expand-collapse-group],
&__section [data-expand-collapse-header] {
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 6952b5dc..51d95e93 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;
--
GitLab