From ca4646ddbfa02eee235dc0046d1cfae88ffb96fb Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 7 Sep 2022 16:05:51 -0400
Subject: [PATCH] ISTWCMS-5709: css to display UR design document
---
src/patterns/01-core/mixins/_button.scss | 4 +--
src/patterns/04-components/_index.scss | 1 +
src/patterns/04-components/card/_card.scss | 19 +++++++-----
.../card/card--teaser/_card--teaser.scss | 5 ++--
src/patterns/04-components/card/card.twig | 14 +++++++--
.../_eu-cookie-compliance.scss | 2 +-
.../form-view-search/_form-view-search.scss | 2 +-
.../multi-type-list/multi-type-list.twig | 6 ++--
.../multi-type-list/multi-type-list.yml | 18 -----------
src/patterns/04-components/tabs/_tabs.scss | 8 ++---
.../04-components/tag-list/_tag-list.scss | 2 +-
.../04-components/tag-list/tag-list.twig | 4 +--
src/patterns/04-components/tag/_tag.scss | 30 +++++++++----------
src/patterns/04-components/tag/tag.twig | 9 ++----
14 files changed, 57 insertions(+), 67 deletions(-)
diff --git a/src/patterns/01-core/mixins/_button.scss b/src/patterns/01-core/mixins/_button.scss
index 6eb87683..7f8ad81d 100644
--- a/src/patterns/01-core/mixins/_button.scss
+++ b/src/patterns/01-core/mixins/_button.scss
@@ -39,16 +39,14 @@ $button-font-size: var(--font-size-1) !default;
font-weight: var(--font-weight-300);
letter-spacing: var(--font-letterspacing-2);
line-height: var(--font-lineheight-4);
- max-width: 18.125rem;
padding: var(--size-2) var(--size-4);
text-align: center;
text-decoration: none;
text-shadow: $button-text-shadow;
- text-transform: uppercase;
transition: background 200ms ease-in;
vertical-align: top;
white-space: normal;
- width: 100%;
+ width: auto;
&:visited {
color: $color-text;
}
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 6f6b8f61..e90af360 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -9,6 +9,7 @@
@forward 'card/card';
@forward 'card/card--banner/card--banner';
@forward 'card/card--node/card--node';
+@forward 'card/card--teaser/card--teaser';
@forward 'color-bar/color-bar';
@forward 'contact-info/contact-info';
@forward 'content-grid-list/content-grid-list';
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index c3b3eed1..243a0f7d 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -2,7 +2,7 @@
// Styles for Cards..
@use '../../01-core' as *;
-
+$card-border-color: var(--gray-2);
$card-accent-border-color: var(--uw-black-primary) !default;
$card-link-color: var(--uw-black-primary) !default;
$card-link-color-hover: var(--gray-5) !default;
@@ -28,12 +28,13 @@ $card-padding: var(--size-2) !default;
// if card--show-hover class is present then show "
.card--show-hover {
- border-bottom: 3px solid $card-accent-border-color;
+ border: 1px solid $card-border-color;
box-shadow: var(--shadow-1);
transition: box-shadow 300ms ease;
-
+ padding: $card-padding;
&:hover,
&:focus-within {
+ border-bottom: 1px solid $card-accent-border-color;
box-shadow: var(--shadow-3);
}
}
@@ -51,14 +52,14 @@ $card-padding: var(--size-2) !default;
img {
filter: opacity(100%);
- transition: filter;
+ transition: filter 300ms ease;
}
&:hover,
&:focus {
img {
filter: opacity(62%);
- transition: filter;
+ transition: filter 300ms ease;
}
}
}
@@ -119,6 +120,8 @@ $card-padding: var(--size-2) !default;
}
.card__title {
+ font-family: var(--font-condensedbook);
+ line-height: var(--font-lineheight-2);
margin: 0 0 var(--size-1) 0;
padding: 0;
width: 100%;
@@ -133,8 +136,8 @@ $card-padding: var(--size-2) !default;
.card__author {
@include uw-no-breakout();
- font-family: var(--font-mono);
- font-size: var(--font-size-1);
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-00);
margin-top: 0;
padding: 0 0 var(--size-1) 0;
@@ -152,7 +155,7 @@ $card-padding: var(--size-2) !default;
}
.card__content {
- margin-bottom: var(--size-3);
+ margin-bottom: var(--size-4);
width: 100%;
.card__node--expand-collapse-group &{
margin-bottom: 0;
diff --git a/src/patterns/04-components/card/card--teaser/_card--teaser.scss b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
index 6e0ca71f..175c6538 100644
--- a/src/patterns/04-components/card/card--teaser/_card--teaser.scss
+++ b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
@@ -12,9 +12,10 @@
}
.card__tags {
- margin: inherit;
- margin-top: auto;
+ line-height: var(--line-height-2);
+ margin: 0 auto 0 var(--size-2);
padding: 0;
+ max-width: 90%;
}
.uw-node__without-image & {
diff --git a/src/patterns/04-components/card/card.twig b/src/patterns/04-components/card/card.twig
index afeaabad..262a605f 100644
--- a/src/patterns/04-components/card/card.twig
+++ b/src/patterns/04-components/card/card.twig
@@ -77,9 +77,17 @@
{% endif %}
{% if tags %}
- {% include '@components/card/card-elements/_tags.twig' with {
- 'tags': tags
- } %}
+ {% if tags_inline %}
+ {% include '@components/card/card-elements/_tags.twig' with {
+ 'tags': tags,
+ 'tags_inline': true
+ } %}
+ {% else %}
+
+ {% include '@components/card/card-elements/_tags.twig' with {
+ 'tags': tags
+ } %}
+ {% endif %}
{% endif %}
</article>
diff --git a/src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss b/src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss
index 6da99649..17a70715 100644
--- a/src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss
+++ b/src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss
@@ -101,7 +101,7 @@
}
.sliding-popup-bottom {
- bottom:0;
+ bottom: 0;
position: fixed;
}
diff --git a/src/patterns/04-components/form-view-search/_form-view-search.scss b/src/patterns/04-components/form-view-search/_form-view-search.scss
index 44f19852..a9e25eb3 100644
--- a/src/patterns/04-components/form-view-search/_form-view-search.scss
+++ b/src/patterns/04-components/form-view-search/_form-view-search.scss
@@ -1,7 +1,7 @@
@use '../../01-core' as *;
.uw-search-form {
- margin:0 0 var(--size-2) 0;
+ margin: 0 0 var(--size-2) 0;
.catalog-search-form,
.service-search-form,
diff --git a/src/patterns/04-components/multi-type-list/multi-type-list.twig b/src/patterns/04-components/multi-type-list/multi-type-list.twig
index b37a42ea..f4818ca7 100644
--- a/src/patterns/04-components/multi-type-list/multi-type-list.twig
+++ b/src/patterns/04-components/multi-type-list/multi-type-list.twig
@@ -12,7 +12,9 @@
'content_list': content_list,
'button_modifier_classes': button_modifier_classes,
} %}
-
+{% if is_demo %}
+ {% set view_all = 'true' %}
+ {% endif %}
{% for type, list in lists %}
{% for info in list %}
@@ -69,4 +71,4 @@
{% endfor %}
-{% endembed %}
\ No newline at end of file
+{% endembed %}
diff --git a/src/patterns/04-components/multi-type-list/multi-type-list.yml b/src/patterns/04-components/multi-type-list/multi-type-list.yml
index 75115ab2..32b0ebf5 100644
--- a/src/patterns/04-components/multi-type-list/multi-type-list.yml
+++ b/src/patterns/04-components/multi-type-list/multi-type-list.yml
@@ -7,9 +7,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 1'
- author:
- name: 'Blog Author'
- link: '#'
footer:
tags:
-
@@ -68,9 +65,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 2'
- author:
- name: 'Blog Author'
- link: '#'
footer:
tags:
- url: '#'
@@ -122,9 +116,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 3'
- author:
- name: 'Blog Author'
- link: '#'
footer:
tags:
- url: '#'
@@ -177,9 +168,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser 1'
- author:
- name: 'News Author'
- link: '#'
footer:
tags:
-
@@ -238,9 +226,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser 2'
- author:
- name: 'News Author'
- link: '#'
footer:
tags:
- url: '#'
@@ -292,9 +277,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser 3'
- author:
- name: 'News Author'
- link: '#'
footer:
tags:
- url: '#'
diff --git a/src/patterns/04-components/tabs/_tabs.scss b/src/patterns/04-components/tabs/_tabs.scss
index e3dc46e4..a041b05c 100644
--- a/src/patterns/04-components/tabs/_tabs.scss
+++ b/src/patterns/04-components/tabs/_tabs.scss
@@ -55,7 +55,7 @@
margin: 0 0 0 0.15rem;
max-width: inherit;
padding: 1rem 2rem;
-
+ width: 100%;
@media(min-width: $screen-md) {
border-bottom: 0.4rem solid var(--uw-white);
font-weight: inherit;
@@ -63,14 +63,14 @@
max-width: inherit;
padding: 1rem 2rem;
&.active {
- border-bottom: 0.4rem solid #4e4e4e;
+ border-bottom: 0.4rem solid var(--uw-black);
}
}
&[aria-selected="true"] {
background: var(--gray-2);
- border-bottom: 0.4rem solid var(--gray-6);
- color: var(--gray-6);
+ border-bottom: 0.4rem solid var(--uw-black);
+ color: var(--uw-black);
&:hover{
border-bottom: 0.4rem solid #ddd;
diff --git a/src/patterns/04-components/tag-list/_tag-list.scss b/src/patterns/04-components/tag-list/_tag-list.scss
index 61d13c7a..cb68629e 100644
--- a/src/patterns/04-components/tag-list/_tag-list.scss
+++ b/src/patterns/04-components/tag-list/_tag-list.scss
@@ -2,10 +2,10 @@
.tag-list {
@include list-unstyled();
+ color: var(--gray-5);
}
.tag-list__item {
display: inline-block;
margin-bottom: var(--size-05);
- margin-right: var(--size-1);
}
diff --git a/src/patterns/04-components/tag-list/tag-list.twig b/src/patterns/04-components/tag-list/tag-list.twig
index 9f42d7bb..8e6700fd 100644
--- a/src/patterns/04-components/tag-list/tag-list.twig
+++ b/src/patterns/04-components/tag-list/tag-list.twig
@@ -2,7 +2,7 @@
<ul class="tag-list {{ modifier_classes }}">
{% for item in items %}
<li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">
- {{ macros.tag(item.url, item.title, item.type) }}
- </li>
+ {{ macros.tag(item.url, item.title, item.type) }}
+ </li>{% if not loop.last and item.type is not same as "full" %}, {% endif %}
{% endfor %}
</ul>
diff --git a/src/patterns/04-components/tag/_tag.scss b/src/patterns/04-components/tag/_tag.scss
index dcdb8275..ef72bce3 100644
--- a/src/patterns/04-components/tag/_tag.scss
+++ b/src/patterns/04-components/tag/_tag.scss
@@ -3,16 +3,16 @@
@use '../../01-core' as *;
-$tag-font-family-small: var(--font-systemmedium) !default;
-$tag-font-family-normal: var(--font-systembold) !default;
-$tag-font-size-normal: var(--font-size-00) !default;
-$tag-font-size-small: var(--font-size-0000) !default;
+$tag-font-family-small: var(--font-system) !default;
+$tag-font-family-normal: var(--font-systemmedium) !default;
+$tag-font-size-normal: var(--font-size-000) !default;
+$tag-font-size-small: var(--font-size-00000) !default;
.tag {
@include link-no-underline(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--gray-5),
+ var(--gray-5)
);
background: none;
display: inline-block;
@@ -20,7 +20,6 @@ $tag-font-size-small: var(--font-size-0000) !default;
margin: 0 0 var(--size-1) 0;
padding: 0;
text-decoration: none;
- text-transform: uppercase;
transition: background 300ms ease-in;
&.token{
text-transform: inherit;
@@ -51,6 +50,7 @@ $tag-font-size-small: var(--font-size-0000) !default;
font-family: $tag-font-family-small;
font-size: $tag-font-size-small;
padding: var(--size-1);
+
&:hover,
&:focus {
background: var(--uw-black-primary);
@@ -63,7 +63,7 @@ $tag-font-size-small: var(--font-size-0000) !default;
font-family: $tag-font-family-small;
font-size: $tag-font-size-small;
padding: var(--size-1);
-
+ text-transform: uppercase;
&:hover,
&:focus {
background: var(--uw-black-primary);
@@ -74,14 +74,14 @@ $tag-font-size-small: var(--font-size-0000) !default;
}
&--simple{
@include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--gray-5),
+ var(--gray-5)
);
font-family: $tag-font-family-normal;
a {
@include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--gray-5),
+ var(--gray-5)
);
font-family: $tag-font-family-normal;
}
@@ -89,8 +89,8 @@ $tag-font-size-small: var(--font-size-0000) !default;
a{
@include link-no-underline(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--gray-5),
+ var(--gray-5)
);
background: none;
display: inline-block;
@@ -99,8 +99,6 @@ $tag-font-size-small: var(--font-size-0000) !default;
padding: 0;
text-align: center;
text-decoration: none;
- text-transform: uppercase;
- transition: background 300ms ease;
}
}
@each $faculty, $colour in $faculties_colours {
diff --git a/src/patterns/04-components/tag/tag.twig b/src/patterns/04-components/tag/tag.twig
index 530b041e..4d948a3a 100644
--- a/src/patterns/04-components/tag/tag.twig
+++ b/src/patterns/04-components/tag/tag.twig
@@ -10,18 +10,15 @@
{% if faculty %}
<span class="{{ faculty }}">
{% endif %}
- <a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">
- {{ title }}
- </a>
-{% if faculty %}
+ <a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">{{ title }}</a>
+ {% if faculty %}
</span>
{% endif %}
-
{% if is_demo %}
<br>
<h4>This is a full tag </h4>
<a href="{{ url }}" class="tag tag--full tag--normal" rel="tag">
{{ title }}
</a>
-{% endif %}
\ No newline at end of file
+{% endif %}
--
GitLab