ISTWCMS-5709: css for teasers, and adjustments to buttons in multi-list and...

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

@@ -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;

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);

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

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{

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'

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%;
   }

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:
         -