ISTWCMS-5633: css lint for 04-components/* , adjustments to header masthead...

ISTWCMS-5633: css lint for 04-components/* , adjustments to header masthead padding to match current

src/patterns/03-layouts/footer/_footer.scss

@@ -9,13 +9,9 @@
   width: 100%;
   &__wrapper {
     @include uw-contained-width();
-    padding: var(--size-2);
-    @media(min-width: $screen-xl)  {
-      padding: var(--size-2) 0;
-    }
     display: grid;
     grid-template-columns: 100%;
-    padding-top: var(--size-1);
+    padding: var(--size-2);
     text-size-adjust: none;
     @media(min-width: $screen-xs) {
       grid-template-columns: 50% 50%;
@@ -49,7 +45,6 @@
       font-size: var(--font-size-00);
     }
   }
-
   &__menu {
     -webkit-font-smoothing: antialiased;
     grid-column: 1 / 3;
@@ -63,7 +58,6 @@
       grid-row: 1 / 2;
     }
   }
-
   &__social {
     grid-column: 1 / 3;
     grid-row: 3 / 4;

src/patterns/03-layouts/header/_header.scss

@@ -10,7 +10,7 @@ $site-name-bg: var(--gray-2);
     font-family: var(--font-condensedbook);
     margin-bottom: 0;
     min-height: var(--size-7);
-    padding: var(--size-1);
+    padding: var(--size-1) 0;
     position: relative;
     transition: margin 300ms;
     &.open{
@@ -18,7 +18,7 @@ $site-name-bg: var(--gray-2);
       transition: margin 300ms;
     }
     @media(min-width: $screen-md) {
-      @include layout-constrain;
+      @include uw-contained-width;
       min-height: inherit;
       padding: var(--size-2);
     }
@@ -37,7 +37,7 @@ $site-name-bg: var(--gray-2);
       align-self: flex-end;
     }
     .uw-header-searchbar{
-      @include layout-constrain;
+      @include uw-contained-width;
       display: block;
       left: 0;
       padding: 0;
@@ -55,8 +55,8 @@ $site-name-bg: var(--gray-2);
     background-color: $site-name-bg;
   }
   .uw-header__center{
-    @include layout-constrain;
-    border-bottom: var(--size-xs) solid  var(--gray-3);
+    @include uw-contained-width;
+    border-bottom: var(--size-xs) solid var(--gray-3);
     @media(min-width: $screen-md) {
       border-bottom: inherit;
     }

src/patterns/03-layouts/layout/_layout-base.scss

@@ -24,5 +24,5 @@
 }
 
 .pl-layout-h2 {
-  @include layout-constrain;
+  @include uw-contained-width;
 }

src/patterns/03-layouts/layout/_layout.scss

 @use '../../01-core' as *;
 
 .layout {
-  @include layout-constrain;
+  @include uw-contained-width;
 
   .uw-node__with-image .card__node & {
     padding: var(--size-1);
@@ -11,7 +11,7 @@
   }
 
   &.uw-contained-width {
-    @include layout-constrain;
+    @include uw-contained-width;
     padding: var(--size-1);
 
     @media(min-width: $screen-xxl) {
@@ -81,7 +81,7 @@
       }
 
       .block-inline-blockuw-cbl-google-maps{
-        @include layout-constrain;
+        @include uw-contained-width;
 
         @media(min-width: $screen-md) {
           @include uw-full-width-margin;
@@ -108,11 +108,11 @@
     margin: inherit;
 
     @media(min-width: $screen-md) {
-      @include layout-constrain;
+      @include uw-contained-width;
     }
 
     &.uw-contained-width {
-      @include layout-constrain;
+      @include uw-contained-width;
       margin: inherit;
       padding: var(--size-1);
 

src/patterns/03-layouts/site-container/_site-container.scss

@@ -14,7 +14,7 @@
     z-index: var(--layer-header);
   }
   .uw-highlighted {
-    @include layout-constrain;
+    @include uw-contained-width;
     grid-column: 1 / 2;
     grid-row: 2 / 3;
     position: relative;

src/patterns/03-layouts/site-footer/_site-footer.scss

@@ -3,7 +3,7 @@
 .uw-site-footer {
   background-color: var(--uw-black-3);
   &__wrapper {
-    @include layout-constrain;
+    @include uw-contained-width;
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: auto auto auto;

src/patterns/04-components/call-to-action/_call-to-action.scss

@@ -51,7 +51,7 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
             .uw-cta__text--small,
             .uw-cta__text--medium,
             a {
-              color: darken(gesso-brand($faculty, 'primary'), 5%)
+              color: darken(gesso-brand($faculty, 'primary'), 5%);
             }
           }
 
@@ -123,17 +123,17 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
 
 .uw-cta__link {
   border: 0;
-  bottom:0;
+  bottom: 0;
   display: block;
-  font-family:gesso-font-family(condensedbook);
-  height:100%;
-  left:0;
-  min-height:6.25rem;
+  font-family: gesso-font-family(condensedbook);
+  height: 100%;
+  left: 0;
+  min-height: 6.25rem;
   padding: 0;
-  position:relative;
-  right:0;
+  position: relative;
+  right: 0;
   text-decoration: none;
-  top:0;
+  top: 0;
   width: 100%;
 
   &:hover {
@@ -142,11 +142,11 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
 }
 
 .uw-cta__text {
-  font-family:gesso-font-family(condensedbook);
+  font-family: gesso-font-family(condensedbook);
   text-align: center;
 
   &--big {
-    font-size:rem(gesso-font-size(3));
+    font-size: rem(gesso-font-size(3));
     letter-spacing: 0.05rem;
     line-height: 1.2;
     padding: 0 rem(gesso-spacing(xxs)) 0.313rem rem(gesso-spacing(xxs));
@@ -154,7 +154,7 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
 
   &--medium {
     color: $uw-white;
-    font-size:rem(gesso-font-size(0));
+    font-size: rem(gesso-font-size(0));
     line-height: 1.2;
     padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
     text-transform: uppercase;
@@ -162,8 +162,8 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
 
   &--small {
     color: $uw-white;
-    font-family:gesso-font-family(systemmedium);
-    font-size:rem(gesso-font-size(-2));
+    font-family: gesso-font-family(systemmedium);
+    font-size: rem(gesso-font-size(-2));
     line-height: 1;
     padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
     text-transform: uppercase;
@@ -173,7 +173,6 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
 @each $faculty in $faculties {
 
   .call-to-action-theme-#{$faculty}{
-
     display: table-cell;
     margin: 1px;
     vertical-align: middle;

src/patterns/04-components/card/_card.scss

@@ -6,7 +6,7 @@
 $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;
-$card-meta-color:  var(--gray-5) !default;
+$card-meta-color: var(--gray-5) !default;
 $card-padding: var(--size-2) !default;
 
 .card {
@@ -78,10 +78,8 @@ $card-padding: var(--size-2) !default;
 
 .card__header{
   @include uw-no-breakout();
-
   margin-bottom: var(--size-3);
   width: 100%;
-
   .card__node--event & {
     display: grid;
     grid-template-columns: 1fr auto;
@@ -99,7 +97,7 @@ $card-padding: var(--size-2) !default;
     }
 
     .view-interact {
-      background-color:  var(--uw-white-1);
+      background-color: var(--uw-white-1);
       grid-column: 2 / 3;
       grid-row: 2 / 3;
       margin: 0;

src/patterns/04-components/card/card--node/_card--node.scss

@@ -67,7 +67,7 @@
           margin-top: 0;
 
           .card__title {
-            background: rgba(0, 0, 0, 0.50);
+            background: rgba(0, 0, 0, 0.5);
             color: #fff;
             margin-bottom: 0;
             margin-top: var(--size-4);

src/patterns/04-components/card/card--teaser/_card--teaser.scss

+@use '../../../01-core' as *;
+
 .card__teaser {
   @include uw-flex-grid(card);
-
   .views-row & {
-    height:100%;
+    height: 100%;
   }
 
   .uw-label {
     display: block;
-    margin-top: 1rem;
+    margin-top: var(--size-2);
   }
 
   .card__tags {
@@ -27,8 +28,8 @@
 
     .card {
       &__image {
-        margin:0;
-        max-width:5rem;
+        margin: 0;
+        max-width: 5rem;
       }
 
       &__header {
@@ -36,25 +37,25 @@
         grid-template-columns: auto 1fr;
         //grid-template-rows: minmax(3rem, auto);
         .uw-image__profiles {
-          grid-column: 1/2;
+          grid-column: 1 / 2;
           grid-row: 1 / 3;
-          margin-right: 1rem;
+          margin-right: var(--size-2);
         }
 
         .card__position {
-          grid-column: 2/3;
-          grid-row: 2/3;
+          grid-column: 2 / 3;
+          grid-row: 2 / 3;
         }
 
         .card__title {
-          grid-column: 2/3;
-          grid-row: 1/2;
+          grid-column: 2 / 3;
+          grid-row: 1 / 2;
           margin: 0;
         }
       }
 
       &__body {
-        grid-column: 1/3;
+        grid-column: 1 / 3;
       }
     }
   }

src/patterns/04-components/date/_date.scss

 @use '../../01-core' as *;
 
 .uw-date {
-  width:auto;
-
+  background-color: var(--uw-gold);
+  color: var(--uw-black);
+  clear: both;
+  display: inline-block;
+  font-family: var(--font-systemmedium);
+  font-size: var(--font-size-00);
+  padding: var(--size-1) var(--size-2);
+  text-transform: uppercase;
+  width: auto;
   @media(min-width: $screen-lg) {
-    margin-left:inherit;
+    margin-left: inherit;
   }
 }
 
@@ -14,27 +21,22 @@
 
   .uw-date {
     box-sizing: border-box;
-    display:block;
+    display: block;
     padding: var(--size-1) var(--size-2);
-
     &:first-child {
       padding: var(--size-1)  2.75rem var(--size-1) var(--size-2);
     }
-
     text-transform: uppercase;
   }
 
   &[open] {
     background-color: transparent !important;
-
     .card__node--event & {
       margin-bottom: var(--size-4);
     }
-
     position: absolute;
     width: calc(100%);
     z-index: var(--layer-content);
-
     @media(min-width: $screen-xs) {
       width: inherit;
     }
@@ -42,11 +44,9 @@
 }
 
 .uw-date-details__summary {
-
   .uw-date {
     background: inherit;
   }
-
   background-position: right var(--size-105) center; // LTR
   background-repeat: no-repeat;
   background-size: 13px;
@@ -54,27 +54,14 @@
   cursor: pointer;
   display: inline-block;
   padding: 0;
-
   .block-uw-cbl-multi-type-list & {
     background-position: right var(--size-1) center; // LTR
   }
-
   &::-webkit-details-marker {
     display: none;
   }
 }
 
-.uw-date {
-  background-color: var(--uw-gold);
-  color: var(--uw-black);
-  clear: both;
-  display: inline-block;
-  font-family: var(--font-systemmedium);
-  font-size: var(--font-size-00);
-  padding: var(--size-1) var(--size-2);
-  text-transform: uppercase;
-}
-
 @each $faculty, $colour in $faculties_colours {
   .#{$faculty} {
 
@@ -104,7 +91,8 @@
         background-color: var($colour);
         color: var(--uw-black);
       }
-    } @else {
+    }
+    @else {
       .uw-date {
         background-color: var(#{$colour}-primary);
         color: var(--uw-white);
@@ -122,7 +110,7 @@
 
       .uw-date-details__summary{
         .uw-date{
-          background:inherit;
+          background: inherit;
         }
 
         @include svg-background(mobile-arrow-down-w);

src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss

@@ -127,7 +127,6 @@ $menu-horizontal-drop-bg: #f7f7f7;
             .house{
               fill: var(--uw-white);
             }
-
           }
           &:focus{
             svg{
@@ -155,7 +154,7 @@ $menu-horizontal-drop-bg: #f7f7f7;
         .menu--horizontal {
           > .is-active-trail {
             background-color: var(--gray-3);
-            color:  var(--uw-black);
+            color: var(--uw-black);
             >  .menu__link.active{
               ~ .menu{
                 .menu__item{
@@ -200,10 +199,10 @@ $menu-horizontal-drop-bg: #f7f7f7;
                   border-bottom: var(--size-xs) solid var(#{$colour}-primary);
                   color: var(#{$colour}-primary);
                   &::after{
-                    display:none;
+                    display: none;
                   }
                   &:hover{
-                    background-color:inherit;
+                    background-color: inherit;
                     border-bottom: var(--size-xs) solid  var(--gray-3);
                     color: var(--uw-black);
                   }
@@ -213,7 +212,6 @@ $menu-horizontal-drop-bg: #f7f7f7;
                   border-bottom: var(--size-xs) solid var(#{$colour}-primary);
                   color: var(#{$colour}-primary);
                 }
-
               }
             }
           }
@@ -255,7 +253,7 @@ $menu-horizontal-drop-bg: #f7f7f7;
             stroke-width: 0.5;
           }
           .house{
-            stroke:none !important;
+            stroke: none !important;
           }
         }
       }
@@ -402,7 +400,6 @@ $menu-horizontal-drop-bg: #f7f7f7;
             z-index: inherit;
           }
           @media(min-width: $screen-md) {
-            //@include uw-contained-width;
             background-color: #f7f7f7;
             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.13);
             break-inside: avoid;

src/patterns/04-components/responsive-image/_responsive-image.scss

@@ -2,6 +2,5 @@ picture {
   img {
     width: 100%;
   }
-
   width: 100%;
 }