Commit ff3e1175 authored by Chris Shantz's avatar Chris Shantz
Browse files

Merge branch '1.0.x' into prod/1.0.x

parents b5129686 22b738ee
......@@ -2,10 +2,8 @@
// Options element styles.
:where(option) {
display: inline;
font-family: var(--font-book);
font-size: var(--font-size-0);
font-weight: var(--font-weight-400);
font-family: var(--font-systemmedium) !important;
font-size: var(--font-size-00);
letter-spacing: inherit;
margin-left: var(--size-05);
padding-left: var(--size-105);
......
......@@ -2,14 +2,22 @@
// Textarea element styles.
:where(textarea) {
background-color: var(--gray-2);
border: var(--size-xs) solid var(--gray-3);
box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
box-sizing: border-box;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: var(--font-systemmedium);
font-size: var(--font-size-0);
letter-spacing: inherit;
overflow: auto;
padding-block: var(--size-1);
padding-inline: var(--size-2);
resize: block;
touch-action: manipulation;
&:focus {
border: var(--size-xs) solid var(--gray-5) !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(104, 104, 104, 0.7);
outline: var(--gray-5);
}
}
......@@ -11,6 +11,7 @@
@forward 'card/card--node/card--node';
@forward 'card/card--teaser/card--teaser';
@forward 'color-bar/color-bar';
@forward 'contact/contact';
@forward 'contact-info/contact-info';
@forward 'content-grid-list/content-grid-list';
@forward 'copy-text/copy-text';
......@@ -64,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';
// @file
// Styles for contacts..
@use '../../01-core' as *;
$details-background-color: var(--gray-2) !default;
.uw-contact{
.uw-details{
background-color: inherit;
border: 0;
border-radius: inherit;
box-shadow: inherit;
margin: 0;
transition: inherit;
width: 100%;
&:hover {
box-shadow: inherit;
.details__summary{
background-color: $details-background-color;
}
}
&:focus-within {
.details__summary{
background-color: $details-background-color;
}
box-shadow: inherit;
}
&:first-child{
margin-top: 0;
}
.details__summary{
background-color: var(--uw-white);
border-bottom: var(--size-xs) solid var(--gray-3);
padding-right: var(--size-7);
text-transform: inherit;
white-space: normal;
}
.details__content{
background: var(--gray-1);
}
&[open] > .details__summary {
background-color: $details-background-color;
color: var(--uw-black);
}
}
&__h2{
margin-bottom: var(--size-05);
text-transform: inherit;
a{
font-weight: 400;
}
}
&__position{
font-family: var(--font-primary);
font-size: var(--font-size-2);
font-weight: 400;
text-decoration: none;
text-transform: inherit;
width: 100%;
}
&__content{
display: grid;
font-size: var(--font-size-0);
grid-template-columns: 100%;
margin: 0 0 var(--size-3) 0;
}
.uw-contact__info{
grid-column: 1 / 2;
grid-row: 1 / 2;
width: 100%;
}
&__with_image{
.uw-contact__image{
grid-column: 1 / 2;
grid-row: 1 / 2;
@media(min-width: $screen-md) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
width: 100%;
}
.uw-contact__content{
display: grid;
font-size: var(--font-size-0);
gap: var(--size-2);
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: var(--size-20) 1fr;
}
}
.uw-contact__info{
grid-column: 1 / 2;
grid-row: 2 / 3;
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
}
}
// CSS for NODE VIEW
.node {
// &--type-uw-ct-profile
&--type-uw-ct-contact{
@include uw-contained-width();
}
}
<div class="uw-contact {% if contact.image %} uw-contact__with_image {% endif %}">
{% embed "@components/details/details.twig" with {
is_open: is_open
} %}
{% block details_summary %}
{% if contact.header.title %}
<h2 class="uw-contact__h2">
<a href="{{ contact.url }}">
{{ contact.header.title }}
</a>
</h2>
{% endif %}
{% if contact.header.position %}
<span class="uw-contact__position">
{{ contact.header.position }}
</span>
{% endif %}
{% endblock %}
{% block details_content %}
<div class="uw-contact__content">
{% if contact.image %}
{% include "@components/responsive-image/responsive-image.twig" with {
sources: contact.image.sources,
img_element: contact.image.img_element,
alt: contact.image.alt
}%}
{% endif %}
<div class="uw-contact__info">
{% if contact.footer.contact_info.email or contact.footer.contact_info.phone %}
<div class="uw-contact__phone-email">
{% if contact.footer.contact_info.email %}
<div class="uw-contact__email">
<a href="mailto:{{ contact.footer.contact_info.email }}">{{ contact.footer.contact_info.email }}</a>
</div>
{% endif %}
{% if contact.footer.contact_info.phone %}
<div class="uw-contact__phone">
{{ contact.footer.contact_info.phone }}
</div>
{% endif %}
</div>
{% endif %}
{% if contact.footer.contact_info.location %}
<div class="uw-contact__location">
<span class="uw-label">Location:</span>
{{ contact.footer.contact_info.location }}
</div>
{% endif %}
{% if contact.footer.links.profile %}
<div class="uw-contact__profile">
<span class="uw-label">Link to profile:</span>
<a href="{{ contact.footer.links.profile.0.uri }}">
{% if contact.footer.links.profile.0.title %}
{{ contact.footer.links.profile.0.title }}
{% else %}
{{ contact.header.title }}
{% endif %}
</a>
</div>
{% endif %}
{% if contact.footer.links.webpage %}
<div class="uw-contact__website">
<span class="uw-label">Link to personal webpage:</span>
<a href="{{ contact.footer.links.webpage.0.uri }}">
{% if contact.footer.links.webpage.0.title %}
{{ contact.footer.links.webpage.0.title }}
{% else %}
{{ contact.header.title }}
{% endif %}
</a>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% endembed %}
</div>
contact:
title: 'Contact Name'
position: 'Position'
image: 'http://fpoimg.com/140x105?text=Thumbnail 4:3'
email: 'someone@uwaterloo.ca'
phone: '519-888-4567 ex. 3333'
location: 'EC2 4444'
link_profile:
uri: 'https://google.ca'
title: 'Link to my profile'
additional_info: 'This is some <b>additional info</b>'
groups:
-
title: 'Group 1'
-
title: 'Group 2'
contact_for: 'Contact for something'
personal_website:
uri: 'https://uwaterloo.ca'
title: 'My persional website'
......@@ -23,6 +23,9 @@
width: 100% !important;
}
}
.contact &{
display: block;
}
}
&__style_controls {
@include uw-flex-term-item();
......
......@@ -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,