From 4ab69e37ef92526b1f336c15c54385321f3c4d2a Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 8 Sep 2022 14:04:46 -0400
Subject: [PATCH] ISTWCMS-5709: css for teasers, and adjustments to buttons in
multi-list and throughout, no longer upper-case, no more max-widths, from UR
flow3 doc.
---
src/patterns/01-core/elements/_form.scss | 7 ++++++
src/patterns/01-core/mixins/_button.scss | 2 +-
.../layout-builder/_layout-builder.scss | 24 +++++++++++++++----
.../04-components/button/_button.scss | 17 ++++++-------
.../card/card--banner/card--banner.yml | 21 +++++++---------
.../card/card--teaser/_card--teaser.scss | 2 +-
.../card/card--teaser/card--teaser.yml | 6 -----
7 files changed, 45 insertions(+), 34 deletions(-)
diff --git a/src/patterns/01-core/elements/_form.scss b/src/patterns/01-core/elements/_form.scss
index 8855d479..1d3193c8 100644
--- a/src/patterns/01-core/elements/_form.scss
+++ b/src/patterns/01-core/elements/_form.scss
@@ -75,6 +75,7 @@ button {
bottom: 0;
display: flex;
height: auto;
+ gap: var(--size-05);
left: 0;
margin: 0;
padding: var(--size-1);
@@ -98,6 +99,12 @@ button {
.form-item-toggle-content-preview {
margin-top: var(--size-2);
+ .option{
+ font-size: var(--font-size-000);
+ @media(min-width: $screen-md) {
+ font-size: var(--font-size-00);
+ }
+ }
}
input [type='submit']{
margin-top: 0;
diff --git a/src/patterns/01-core/mixins/_button.scss b/src/patterns/01-core/mixins/_button.scss
index 7f8ad81d..9fabbc2c 100644
--- a/src/patterns/01-core/mixins/_button.scss
+++ b/src/patterns/01-core/mixins/_button.scss
@@ -36,7 +36,7 @@ $button-font-size: var(--font-size-1) !default;
display: inline-block;
font-family: var(--font-condensedbook);
font-size: $button-font-size;
- font-weight: var(--font-weight-300);
+ font-weight: var(--font-weight-200);
letter-spacing: var(--font-letterspacing-2);
line-height: var(--font-lineheight-4);
padding: var(--size-2) var(--size-4);
diff --git a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index 1f104300..817a9862 100644
--- a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -170,13 +170,13 @@ form {
// Edits of buttons in the wcms forms
.button,
button {
- .layout-builder-form &,
- .form-actions & {
- font-size: var(--font-size-000);
+ [aria-label="Layout Builder tools"] & {
+ font-size: var(--font-size-00);
height: 2.5rem;
- line-height: 2.75;
+ line-height: var(--font-lineheight-2);
max-width: inherit;
padding: var(--size-05);
+ width: 100%;
&:hover,
&:focus {
padding: var(--size-05);
@@ -187,7 +187,7 @@ button {
.paragraph-type-top &,
.paragraphs-dropbutton-wrapper &,
.user-login-form &{
- font-size: var(--font-size-000);
+ font-size: var(--font-size-00);
font-weight: 200;
height: inherit;
//letter-spacing:inherit;
@@ -206,6 +206,7 @@ button {
.ui-dialog-buttonset.form-actions & {
max-width: 10rem;
+ width: 100%;
}
.user-login-form .form-actions & {
@@ -230,6 +231,19 @@ button {
width: inherit;
}
}
+
+ .views-exposed-form .form-actions & {
+ font-size: var(--font-size-00);
+ height: 2.5rem;
+ line-height: var(--font-lineheight-2);
+ padding: var(--size-05);
+ width: 100%;
+
+ &:hover,
+ &:focus {
+ padding: var(--size-05);
+ }
+ }
}
// Reset the button in media dialog
diff --git a/src/patterns/04-components/button/_button.scss b/src/patterns/04-components/button/_button.scss
index a994a91d..0b6b9c1f 100644
--- a/src/patterns/04-components/button/_button.scss
+++ b/src/patterns/04-components/button/_button.scss
@@ -28,22 +28,20 @@ button{
// This custom button class, included as an example, is not output by Drupal by default.
.button--medium {
font-size: var(--font-size-000);
- max-width: var(--size-20);
- padding: var(--size-1);
+ padding: var(--size-105);
&:hover,
&:focus {
- padding: var(--size-1);
+ padding: var(--size-105);
}
}
// This custom button class, included as an example, is not output by Drupal by default.
.button--small {
font-size: var(--font-size-0000);
- max-width: var(--size-12);
- padding: var(--size-05);
+ padding: var(--size-1);
&:hover,
&:focus {
- padding: var(--size-05);
+ padding: var(--size-1);
}
}
@@ -53,7 +51,7 @@ button{
color: var(--uw-white);
&:hover,
&:focus {
- background-color: var(--green-9);
+ background-color: #315631ff;
color: var(--uw-white);
}
}
@@ -76,10 +74,13 @@ button{
color: var(--uw-white);
&:hover,
&:focus {
- background-color: var(--orange-8);
+ background-color: var(--orange-9);
color: var(--uw-white);
}
}
+.button[data-drupal-selector="edit-cancel"]{
+ line-height: 2.125;
+}
// Css within pattern lab.
.pattern-lab-content .mobile-menu-button,
.pl-c-pattern__extra-toggle{
diff --git a/src/patterns/04-components/card/card--banner/card--banner.yml b/src/patterns/04-components/card/card--banner/card--banner.yml
index a56a9739..adbd37ea 100644
--- a/src/patterns/04-components/card/card--banner/card--banner.yml
+++ b/src/patterns/04-components/card/card--banner/card--banner.yml
@@ -3,30 +3,25 @@ banners:
autoplay: 1
slide_speed: 7000
transition_speed: 400
+ faculty: 'org-default'
images:
- -
- sources:
- -
- srcset: '../../../../source/images/president/president_xlarge.jpg'
+ - sources:
+ - srcset: '../../images/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- -
- srcset: '../../../../source/images/president/president_large.jpg'
+ - srcset: '../../images/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- -
- srcset: '../../../../source/images/president/president_medium.jpg'
+ - srcset: '../../images/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- -
- srcset: '../../../../source/images/president/president_small.jpg'
+ - srcset: '../../images/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- -
- srcset: '../../../../source/images/president/president_xsmall.jpg'
+ - srcset: '../../images/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
- img_element: '../../../../source/images/president/president_xlarge.jpg'
+ img_element: '../../images/president_xlarge.jpg'
alt: 'Alternative text'
link: 'http://google.ca'
big_text: 'President Goel leads Waterloo into bold new futures'
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 175c6538..cb31f2fd 100644
--- a/src/patterns/04-components/card/card--teaser/_card--teaser.scss
+++ b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
@@ -13,7 +13,7 @@
.card__tags {
line-height: var(--line-height-2);
- margin: 0 auto 0 var(--size-2);
+ margin: auto auto 0 var(--size-2);
padding: 0;
max-width: 90%;
}
diff --git a/src/patterns/04-components/card/card--teaser/card--teaser.yml b/src/patterns/04-components/card/card--teaser/card--teaser.yml
index ec5d1512..51e9e043 100644
--- a/src/patterns/04-components/card/card--teaser/card--teaser.yml
+++ b/src/patterns/04-components/card/card--teaser/card--teaser.yml
@@ -6,9 +6,6 @@ teasers:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser'
- author:
- name: 'Blog Author'
- link: '#'
footer:
tags:
-
@@ -67,9 +64,6 @@ teasers:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser'
- author:
- name: 'News Author'
- link: '#'
footer:
tags:
-
--
GitLab