diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 6f49c95084b97750bdfd3ad2a75e3ebd1c3b1380..ba5f1c5381844192f4b5d451ced89d67d60c1a9c 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -65,5 +65,6 @@
@forward 'view/view-filter/view-filter';
@forward 'view/view-header/view-header';
@forward 'view/view-interact/view-interact';
+@forward "view/view-lists/view-lists";
@forward 'view/views-view/views-view';
@forward 'view/views-view-unformatted/views-view-unformatted';
diff --git a/src/patterns/04-components/content-grid-list/_content-grid-list.scss b/src/patterns/04-components/content-grid-list/_content-grid-list.scss
index c2721271b98d20c5affadf7a2c5e2e387ec5bf07..90e39548534fa4749f92b4239ad78a6277860df4 100644
--- a/src/patterns/04-components/content-grid-list/_content-grid-list.scss
+++ b/src/patterns/04-components/content-grid-list/_content-grid-list.scss
@@ -23,6 +23,9 @@
width: 100% !important;
}
}
+ .contact &{
+ display: block;
+ }
}
&__style_controls {
@include uw-flex-term-item();
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 1411e967b7242f296d72292aa474966e696edb32..15df1b13fb7145f38a67d3b35b03f0e729a413f6 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 {
diff --git a/src/patterns/04-components/view/view-lists/_view-lists.scss b/src/patterns/04-components/view/view-lists/_view-lists.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6339f69163b07d1a0caab6910746073ce4822868
--- /dev/null
+++ b/src/patterns/04-components/view/view-lists/_view-lists.scss
@@ -0,0 +1,14 @@
+.uw-profiles {
+ display: block;
+
+ .card__image {
+ display: inline-block;
+ padding-right: var(--size-2);
+ vertical-align: top;
+ }
+
+ .card__title a {
+ color: var(--school-4);
+ font-weight: 400;
+ }
+}
diff --git a/src/patterns/04-components/view/view-lists/view-lists.twig b/src/patterns/04-components/view/view-lists/view-lists.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0915fd7f01bd673b51ced99b67df2b7c3b8a6028
--- /dev/null
+++ b/src/patterns/04-components/view/view-lists/view-lists.twig
@@ -0,0 +1,24 @@
+<div class="{{ type }}{% if type == 'contact' %} uw-exp-col{% endif %}"{% if type == 'contact' %} id="{{ random() }}"{% endif %}>
+ {% if type == 'contact' and items|length > 1 %}
+ <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 %}
+ {% embed '@components/content-grid-list/content-grid-list.twig' %}
+ {% block content %}
+ {% for item in items %}
+ {% if type == 'contact' %}
+ {% include '@components/contact/contact.twig' with {
+ 'contact': item,
+ } %}
+ {% else %}
+ {% include '@components/card/card--teaser/_card--teaser.twig' with {
+ 'teaser': item,
+ 'type': 'teaser',
+ } %}
+ {% endif %}
+ {% endfor %}
+ {% endblock %}
+ {% endembed %}
+</div>