From 6fd4c66e6c7cfb0dc07097f1fa584687984a411b Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 29 Jun 2022 12:18:06 -0400
Subject: [PATCH] ISTWCMS-5633: css lint for 04-components/* , adjustments to
header masthead padding to match current
---
src/patterns/03-layouts/footer/_footer.scss | 8 +---
src/patterns/03-layouts/header/_header.scss | 10 ++---
.../03-layouts/layout/_layout-base.scss | 2 +-
src/patterns/03-layouts/layout/_layout.scss | 10 ++---
.../site-container/_site-container.scss | 2 +-
.../03-layouts/site-footer/_site-footer.scss | 2 +-
.../call-to-action/_call-to-action.scss | 29 +++++++-------
src/patterns/04-components/card/_card.scss | 6 +--
.../card/card--node/_card--node.scss | 2 +-
.../card/card--teaser/_card--teaser.scss | 25 ++++++------
src/patterns/04-components/date/_date.scss | 40 +++++++------------
.../menu--horizontal/_menu--horizontal.scss | 11 ++---
.../responsive-image/_responsive-image.scss | 1 -
13 files changed, 62 insertions(+), 86 deletions(-)
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
index 1377c404..03fd07a2 100644
--- a/src/patterns/03-layouts/footer/_footer.scss
+++ b/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;
diff --git a/src/patterns/03-layouts/header/_header.scss b/src/patterns/03-layouts/header/_header.scss
index 23a98d40..d5068c87 100644
--- a/src/patterns/03-layouts/header/_header.scss
+++ b/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;
}
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index e729d003..f15a9928 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -24,5 +24,5 @@
}
.pl-layout-h2 {
- @include layout-constrain;
+ @include uw-contained-width;
}
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index 8916c64e..d8aa3e61 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -1,7 +1,7 @@
@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);
diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss
index 6cca3390..b56621ab 100644
--- a/src/patterns/03-layouts/site-container/_site-container.scss
+++ b/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;
diff --git a/src/patterns/03-layouts/site-footer/_site-footer.scss b/src/patterns/03-layouts/site-footer/_site-footer.scss
index 8042ec93..6f28e947 100644
--- a/src/patterns/03-layouts/site-footer/_site-footer.scss
+++ b/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;
diff --git a/src/patterns/04-components/call-to-action/_call-to-action.scss b/src/patterns/04-components/call-to-action/_call-to-action.scss
index aaece3ed..039540e3 100644
--- a/src/patterns/04-components/call-to-action/_call-to-action.scss
+++ b/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;
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index de3793e7..b14b0d66 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/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;
diff --git a/src/patterns/04-components/card/card--node/_card--node.scss b/src/patterns/04-components/card/card--node/_card--node.scss
index 43570cde..0cfc142a 100644
--- a/src/patterns/04-components/card/card--node/_card--node.scss
+++ b/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);
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 40388933..6e0ca71f 100644
--- a/src/patterns/04-components/card/card--teaser/_card--teaser.scss
+++ b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
@@ -1,13 +1,14 @@
+@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;
}
}
}
diff --git a/src/patterns/04-components/date/_date.scss b/src/patterns/04-components/date/_date.scss
index 7ceb560d..ed273295 100644
--- a/src/patterns/04-components/date/_date.scss
+++ b/src/patterns/04-components/date/_date.scss
@@ -1,10 +1,17 @@
@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);
diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index 2f5579ed..2479aaa2 100644
--- a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/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;
diff --git a/src/patterns/04-components/responsive-image/_responsive-image.scss b/src/patterns/04-components/responsive-image/_responsive-image.scss
index d6c9de41..07ec0a8d 100644
--- a/src/patterns/04-components/responsive-image/_responsive-image.scss
+++ b/src/patterns/04-components/responsive-image/_responsive-image.scss
@@ -2,6 +2,5 @@ picture {
img {
width: 100%;
}
-
width: 100%;
}
--
GitLab