additional css for form range and css/yml for the mailman form

js/component_scripts.min.js

-/**
- * @file
- * Ckeditor Modal.
- */
-
-(function ($, Drupal) {
-  if ($.ui && $.ui.dialog) {
-    orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
-    $.ui.dialog.prototype._allowInteraction = function (event) {
-      if ($(event.target).closest('.cke_dialog').length) {
-        return true;
-      }
-      return orig_allowInteraction.apply(this, arguments);
-    };
-  }
-})(jQuery, Drupal);
-
 /**
  * @file
  */
@@ -64,6 +47,76 @@
  * @file
  */
 
+/**
+ * @file
+ */
+
+(function ($, Drupal) {
+  Drupal.behaviors.expandcollapse = {
+    attach: function (context, settings) {
+      $(document).ready(function () {
+
+        $('.uw-expand-collapse').each(function () {
+
+          // Get the id of the expand collapse.
+          var id = '#uw-expand-collapse-' + $(this).data('id');
+
+          // When the expand all button is clicked, expand all the items.
+          $(id + ' [data-type="expand-all"]').click(function () {
+
+            // Find each of the buttons, which are the titles and change
+            // aria-expanded and add class to show expanded.
+            $(id + ' .uw-expand-collapse__items button').each(function () {
+              $(this).attr('aria-expanded', true);
+              $(this).addClass('uw-expanded');
+            });
+
+            // Find each of the text and add css to display them.
+            $(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function () {
+              $(this).css('display', 'block');
+            });
+          });
+
+          // When the collapse all button is clicked, collapse all the items.
+          $(id + ' [data-type="collapse-all"]').click(function () {
+
+            // Find each of the buttons, which are the titles and change
+            // aria-expanded and remove class to show collapsed.
+            $(id + ' .uw-expand-collapse__items button').each(function () {
+              $(this).attr('aria-expanded', true);
+              $(this).removeClass('uw-expanded');
+            });
+
+            // Find each of the text and add css to display them.
+            $(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function () {
+              $(this).css('display', 'none');
+            });
+          });
+
+          // Step through each of the titles and add a click function.
+          $(id + ' .uw-expand-collapse__items button').click(function () {
+
+            // If this has an expanded class, remove it and change aria expanded to false.
+            // Otherwise add the expanded class and set aria-expanded to true.
+            if ($(this).hasClass('uw-expanded')) {
+              $(this).attr('aria-expanded', false);
+              $(this).removeClass('uw-expanded');
+            }
+            else {
+              $(this).attr('aria-expanded', true);
+              $(this).addClass('uw-expanded');
+            }
+
+            // Toggle the text to show/hide.
+            $(this).parent().parent().find('.uw-expand-collapse__text').toggle();
+          })
+        });
+
+      });
+    }
+  };
+})(jQuery, Drupal);
+
 /**
  * @file
  */
@@ -179,76 +232,6 @@
   };
 })(jQuery, Drupal);
 
-/**
- * @file
- */
-
-(function ($, Drupal) {
-  Drupal.behaviors.expandcollapse = {
-    attach: function (context, settings) {
-      $(document).ready(function () {
-
-        $('.uw-expand-collapse').each(function () {
-
-          // Get the id of the expand collapse.
-          var id = '#uw-expand-collapse-' + $(this).data('id');
-
-          // When the expand all button is clicked, expand all the items.
-          $(id + ' [data-type="expand-all"]').click(function () {
-
-            // Find each of the buttons, which are the titles and change
-            // aria-expanded and add class to show expanded.
-            $(id + ' .uw-expand-collapse__items button').each(function () {
-              $(this).attr('aria-expanded', true);
-              $(this).addClass('uw-expanded');
-            });
-
-            // Find each of the text and add css to display them.
-            $(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function () {
-              $(this).css('display', 'block');
-            });
-          });
-
-          // When the collapse all button is clicked, collapse all the items.
-          $(id + ' [data-type="collapse-all"]').click(function () {
-
-            // Find each of the buttons, which are the titles and change
-            // aria-expanded and remove class to show collapsed.
-            $(id + ' .uw-expand-collapse__items button').each(function () {
-              $(this).attr('aria-expanded', true);
-              $(this).removeClass('uw-expanded');
-            });
-
-            // Find each of the text and add css to display them.
-            $(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function () {
-              $(this).css('display', 'none');
-            });
-          });
-
-          // Step through each of the titles and add a click function.
-          $(id + ' .uw-expand-collapse__items button').click(function () {
-
-            // If this has an expanded class, remove it and change aria expanded to false.
-            // Otherwise add the expanded class and set aria-expanded to true.
-            if ($(this).hasClass('uw-expanded')) {
-              $(this).attr('aria-expanded', false);
-              $(this).removeClass('uw-expanded');
-            }
-            else {
-              $(this).attr('aria-expanded', true);
-              $(this).addClass('uw-expanded');
-            }
-
-            // Toggle the text to show/hide.
-            $(this).parent().parent().find('.uw-expand-collapse__text').toggle();
-          })
-        });
-
-      });
-    }
-  };
-})(jQuery, Drupal);
-
 /**
  * @file
  */

source/_patterns/00-config/01-mixins/_mixins.button.scss

@@ -3,21 +3,9 @@
 
 $button-border-radius: 0 !default;
 $button-background-color: gesso-color(button, default, background) !default;
-$button-background-color-active: gesso-color(
-  button,
-  default,
-  background-active
-) !default;
-$button-background-color-disabled: gesso-color(
-  button,
-  disabled,
-  background
-) !default;
-$button-background-color-hover: gesso-color(
-  button,
-  default,
-  background-hover
-) !default;
+$button-background-color-active: gesso-color(  button,  default,  background-active) !default;
+$button-background-color-disabled: gesso-color(  button,  disabled,  background) !default;
+$button-background-color-hover: gesso-color(  button,  default,  background-hover) !default;
 $button-background-image: none !default;
 $button-text-color: gesso-color(button, default, text) !default;
 $button-text-color-active: gesso-color(button, default, text-active) !default;
@@ -48,7 +36,7 @@ $button-font-size: gesso-font-size(1) !default;
   display: inline-block;
   font-family: gesso-font-family(condensedbook);
   font-size: gesso-font-size(1);
-  font-weight: gesso-font-weight(bold);
+  font-weight: gesso-font-weight(regular);
   letter-spacing: 0.055rem;
   line-height: gesso-line-height(base);
   max-width:18.125rem;

source/_patterns/00-config/01-mixins/_mixins.uw.scss

@@ -67,6 +67,18 @@ $test-color-12: #f00;
   right:  0;
   width: 100%;
 }
+@mixin uw-contained-width-reset() {
+  margin-left:inherit;
+  margin-right: inherit;
+  max-width:inherit;
+  padding: inherit;
+
+  @include xl{
+    padding-left:inherit;
+    padding-right:inherit;
+
+  }
+}
 // Flexbox display
 @mixin flexbox {
 

source/_patterns/00-config/_design-tokens.artifact.scss

@@ -503,4 +503,4 @@ $gesso: (
     xxl: 96px,
   ),
   gutter-width: 40px,
-);
\ No newline at end of file
+);

source/_patterns/02-base/02-html-elements/25-forms/_forms.scss

@@ -5,7 +5,7 @@ $form-label-font-family: gesso-font-family(condensedbook) !default;
 $form-legend-font-family: gesso-font-family(book) !default;
 $form-input-font-family: gesso-font-family(system) !default;
 $form-description-color: gesso-grayscale(gray-5) !default;
-
+$form-gap: gesso-spacing(xs);
 form{
   font-family:$form-font-family;
   font-size: gesso-font-size(-1);
@@ -202,7 +202,7 @@ textarea {
         .button{
           margin-bottom:1rem ;
         }
-        gap:1rem;
+        gap:$form-gap;
         height:4rem;
       }
 

source/_patterns/02-base/02-html-elements/27-input/_input.scss

@@ -47,7 +47,7 @@ $uw-input-padding: 0.46667rem;
   }
   &--submit {
     @include button();
-
+    font-weight:200 !important;
   }
   // make the input after prefix be inline
 
@@ -78,7 +78,7 @@ $uw-input-padding: 0.46667rem;
     width:auto;
   }
 }
-//input[size="60"] {
-//  max-width: 100%;
-//  width: 100%;
-//}
+input[size="60"] {
+  max-width: 100%;
+  width: 100%;
+}

source/_patterns/02-base/02-html-elements/27-input/input--submit.twig

 {% include '@base/02-html-elements/27-input/input.twig' with {
     'type': type,
     'value': value,
-    'classes': 'uw-input--submit'
-} %}
\ No newline at end of file
+    'classes': classes,
+} %}

source/_patterns/04-components/form-item/_form-item.scss

@@ -11,7 +11,9 @@ $form-text-size: gesso-base-font-size() !default;
 
 .form-item {
   margin: 0 0 rem(gesso-spacing(sm));
-
+  .form--inline .form-checkboxes &{
+    margin:inherit;
+  }
 }
 .form-item__label {
   display: block;

source/_patterns/04-components/form-item/form-item--range/_form-item--range.scss

@@ -35,7 +35,21 @@ $form-range-track-height: 10px !default;
   width: 100%;
 }
 
-.form-item--range {
+.form-item--range,
+.form-type-range {
+  > label{
+    margin-bottom:gesso-spacing(md);
+  }
+  margin-bottom:gesso-spacing(xl);
+  output{
+    &[data-display="above"]{
+
+    }
+    &[data-display="below"]{
+
+    }
+  }
+  .form-range,
   .form-item__range {
     appearance: none;
     background: transparent;
@@ -108,7 +122,8 @@ $form-range-track-height: 10px !default;
     }
   }
 
-  &.is-full-width > .form-item__range {
+  &.is-full-width > .form-item__range,
+  &.is-full-width > .form-range{
     width: 100%;
   }
 }

source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss

 .uw-mailman {
-  padding: rem(gesso-spacing(sm)) 0;
-  width: 100%;
-
+  form{
+    @include uw-contained-width-reset();
+    width: 100%;
+  }
   &__label {
     display: block;
     margin-bottom: rem(gesso-spacing(xs));
-
-    &--email {
-      font-family: gesso-font-family(condensedbook);
-      font-size:rem(gesso-font-size(3));
-      font-weight: gesso-font-weight(regular);
+  }
+  &__email {
+    display:grid;
+    gap:$form-gap;
+    grid-template-columns: auto 6rem;
+    @include medium{
+      grid-template-columns: auto 9rem;
     }
   }
-
   &__servername {
     text-align: center;
   }
 }
-.uw-mailmain__email{
-  .uw-input--submit{
-    font-size:rem(gesso-font-size(0));
-    font-weight: gesso-font-weight(regular);
-    max-width:8.5rem;
-  }
-}

source/_patterns/04-components/mailman-subscription/mailman-subscription.twig

@@ -11,7 +11,8 @@
       } %}
       {% include '@base/02-html-elements/27-input/input--submit.twig' with {
         'type': 'submit',
-        'value': 'Subscribe'
+        'value': 'Subscribe',
+        'classes': 'uw-input--submit button--medium'
       } %}
     </div>
   </form>

source/_patterns/04-components/mailman-subscription/mailman-subscription.yml

@@ -2,3 +2,4 @@ mailman:
   server: 'lists.uwaterloo.ca (a.k.a. mailman.uwaterloo.ca)'
   servername: 'uwweb'
   uniqueid: '1111111'
+  classes: 'uw-input--submit button--medium'

source/_patterns/04-components/view/view-filter/_view-filter.scss

@@ -21,6 +21,7 @@
     margin-right:0.25rem;
   }
   form {
+    width: 100%;
     ul,li{
       list-style: none;
       margin:0;
@@ -31,11 +32,12 @@
       font-size:gesso-font-size(-1);
       font-weight:200;
       letter-spacing:inherit;
-      padding-left:0.25rem;
+      padding-left:gesso-spacing(sm);
     }
-    width: 100%;
+    .uw-input,
+    .form-text,
     select{
-      width:inherit;
+      width:100%;
     }
     .button,
     .image-button {