From e0650dbb5dfdf534267d2880d18e238f084e8b20 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 16 Nov 2022 13:39:41 -0500
Subject: [PATCH] ISTWCMS-5900: css for :not(.contact) on the expand and
collapse with contacts
---
.../exp_col_block/_exp_col_block.scss | 484 +++++++++---------
1 file changed, 253 insertions(+), 231 deletions(-)
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
index 1411e967..15df1b13 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
@@ -8,60 +8,36 @@
// 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;
-
+ &:not(.contact){
+ .uw-exp-col__button{
&[data-type="expand-all"] {
- background: var(--gray-6);
- color: var(--gray-2);
+ background: var(--gray-2);
+ border-right: var(--size-xs) solid var(--gray-4);
+ color: var(--gray-6);
}
&[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 {
+ background: var(--gray-2);
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);
+ 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);
}
}
}
-
- &[open] {
- > .details__summary {
- @include svg-background(mobile-arrow-up);
+ .uw-details{
+ .details__summary {
+ @include svg-background(mobile-arrow-down);
background-color: var(--gray-2);
h2,
h3,
@@ -70,8 +46,9 @@
h6 {
color: var(--gray-6);
}
+ &:hover,
&:focus {
- @include svg-background(mobile-arrow-up-w);
+ @include svg-background(mobile-arrow-down-w);
background-color: var(--gray-6);
h2,
h3,
@@ -81,16 +58,40 @@
color: var(--uw-white);
}
}
-
- &:hover {
- @include svg-background(mobile-arrow-up-w);
- background-color: var(--gray-6);
+ }
+ &[open] {
+ > .details__summary {
+ @include svg-background(mobile-arrow-up);
+ background-color: var(--gray-2);
h2,
h3,
h4,
h5,
- h6{
- color: var(--uw-white);
+ 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);
+ }
}
}
}
@@ -101,128 +102,129 @@
// 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;
+ &:not(.contact){
+ .uw-exp-col__button{
&[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 {
+ background: var(--#{$colour}-primary);
+ border-right: var(--size-xs) solid var(--uw-white);
color: var(--uw-white);
}
- &::after {
- @include svg-background-color(var(--uw-white), mobile-arrow-down);
+ &[data-type="collapse-all"] {
+ background: var(--#{$colour}-primary);
+ color: var(--uw-white);
}
&:hover,
&:focus {
- background-color: var(--uw-white);
- &::after{
- @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
+ outline: none;
+ &[data-type="expand-all"] {
+ background-color: var(--uw-white);
+ color: var(--#{$colour}-primary);
}
- h2,
- h3,
- h4,
- h5,
- h6 {
+ &[data-type="collapse-all"] {
+ background-color: var(--uw-white);
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 {
+ .uw-details{
.details__summary {
- background-color: var(--uw-white);
+ background-color: var(--#{$colour}-primary);
background-image: inherit;
- &::after {
- @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
- }
h2,
h3,
h4,
h5,
h6 {
- color: var(--#{$colour}-primary);
+ color: var(--uw-white);
}
- }
- }
- &:focus-within {
- .details__summary {
- background-color: var(--uw-white);
- background-image: inherit;
&::after {
- @include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
+ @include svg-background-color(var(--uw-white), mobile-arrow-down);
}
- h2,
- h3,
- h4,
- h5,
- h6 {
- color: var(--#{$colour}-primary);
+
+ &: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);
+ }
}
}
}
- &:hover {
+ .uw-details[open] {
.details__summary {
- background-color: var(--uw-white);
- &::after {
- @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
- }
+ background-image: inherit;
+ }
+ > .details__summary {
+ background-color: var(--#{$colour}-primary);
h2,
h3,
h4,
h5,
h6 {
- color: var(--#{$colour}-primary);
+ 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);
+ }
}
}
}
@@ -232,121 +234,141 @@
}
}
.uw-exp-col {
- -webkit-font-smoothing: antialiased;
- &__operations {
- list-style-type: none;
- margin: 0;
- padding: var(--size-2) 0 0;
- li {
- display: inline-block;
+ &:not(.contact){
+ -webkit-font-smoothing: antialiased;
+ .uw-exp-col__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 {
+ .uw-exp-col__group-info,
+ .uw-exp-col__heading-selector,
+ .uw-exp-col__heading-text {
display: inline-block;
- width: 82%;
}
- }
- &__group-info,
- &__heading-text {
- .ui-dialog & {
- input[size="60"] {
+ .uw-exp-col__heading-selector {
+ .form-select {
display: inline-block;
+ width: 82%;
}
}
- }
-
- &__table {
- td {
- vertical-align: top;
+ .uw-exp-col__group-info,
+ .uw-exp-col__heading-text {
+ .ui-dialog & {
+ input[size="60"] {
+ display: inline-block;
+ }
+ }
}
- }
- &__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;
+ .uw-exp-col__table {
+ td {
+ vertical-align: top;
+ }
}
- .no-js.js &,
- .js & {
+ .uw-exp-col__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-exp-col__button {
+ font-size: var(--font-size-1);
+ font-weight: 400;
+ margin: 0;
+ max-width: inherit;
+ .uw-exp-col--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);
+ .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;
+ }
}
- 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);
}
}
- }
- .details__content {
- background-color: var(--gray-1);
- padding: var(--size-2);
- .layout {
- padding: 0;
+ .uw-exp-col__group-info {
+ .form-type-entity-autocomplete {
+ display: inline-block;
+ width: 90%;
+ }
}
- .block {
+ }
+ &.contact{
+ .uw-exp-col__controls{
+ border: var(--size-xs) solid var(--gray-2);
+ display: grid;
+ grid-template-columns: 50% 50%;
margin-bottom: var(--size-2);
+ gap: var(--size-05);
+ .no-js & {
+ display: none;
+ }
+
+ .no-js.js &,
+ .js & {
+ display: grid;
+ }
}
}
}
-.uw-exp-col__group-info {
- .form-type-entity-autocomplete {
- display: inline-block;
- width: 90%;
- }
-}
+
/* stylelint-disable selector-max-id, declaration-no-important */
#drupal-modal {
--
GitLab