From 4e7a36a8c137aed37ef4596bf7d86a333b251a78 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 9 Jun 2022 16:00:07 -0400
Subject: [PATCH] ISTWCMS-5628: css svg-background mixin test with new images
folder(details), logo demo of site footer using images folder.
---
src/patterns/01-core/elements/_details.scss | 5 ++--
.../01-core/mixins/_svg-background.scss | 28 ++++++++-----------
src/patterns/03-layouts/footer/footer.twig | 2 +-
.../03-layouts/site-footer/site-footer.yml | 2 +-
4 files changed, 15 insertions(+), 22 deletions(-)
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index ad997fbd..b4f60b31 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -8,7 +8,6 @@
:where(details) {
@include uw-no-breakout();
- @include svg-background(mobile-arrow-down);
background: var(--gray-2);
border: var(--size-xs) solid #bfbfbf;
border-bottom:var(--size-xs) solid var(--uw-black-primary);
@@ -52,10 +51,10 @@
:where(summary) {
@include uw-no-breakout();
@include svg-background(mobile-arrow-down);
- background: var(--gray-2);
+ background-color: var(--gray-2);
background-position: right var(--size-2) center; // LTR
background-repeat: no-repeat;
- background-size: rem(13px);
+ background-size: 13px;
border-radius: var(--radius-1);
color: var(--uw-black-primary);
cursor: pointer;
diff --git a/src/patterns/01-core/mixins/_svg-background.scss b/src/patterns/01-core/mixins/_svg-background.scss
index 51016d0a..ddd14d05 100644
--- a/src/patterns/01-core/mixins/_svg-background.scss
+++ b/src/patterns/01-core/mixins/_svg-background.scss
@@ -1,22 +1,16 @@
// @file
// SVG background image Mixin
-
-@mixin svg-background($path) {
- background-image: url($path), linear-gradient(transparent, transparent);
+@mixin svg-background($image-name, $image-location: '../images/') {
+ background-image: url($image-location + $image-name + '.svg'), linear-gradient(transparent, transparent);
background-repeat: no-repeat;
- background-size: 100%;
- display: inline-block;
+ //background-size: 100%;
+ //display: inline-block;
}
-
-//@mixin svg-background($image-name, $image-location: '../source/images/icons/') {
-// background-image: url($image-location + $image-name + '.svg');
-//}
-//
-//@mixin svg-background-color($image-color, $image-name, $image-location: '../source/images/icons/') {
-// background-color: $image-color;
-// -webkit-mask: url($image-location + $image-name + '.svg') no-repeat;
-// mask: url($image-location + $image-name + '.svg') no-repeat;
-// -webkit-mask-size: contain;
-// mask-size: contain;
-//}
+@mixin svg-background-color($image-color, $image-name, $image-location: '../images/') {
+ background-color: $image-color;
+ -webkit-mask: url($image-location + $image-name + '.svg') no-repeat;
+ mask: url($image-location + $image-name + '.svg') no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+}
diff --git a/src/patterns/03-layouts/footer/footer.twig b/src/patterns/03-layouts/footer/footer.twig
index 141a9030..bba7daf3 100644
--- a/src/patterns/03-layouts/footer/footer.twig
+++ b/src/patterns/03-layouts/footer/footer.twig
@@ -5,7 +5,7 @@
body: "The standard Lorem Ipsum passage, used since the 1500s<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
site_name: "Faculty of Environment",
logo_link: "https://uwaterloo.ca/",
- logo_url: "/uw_wcms_gesso/source/images/logos/uwaterloo-logo.svg",
+ logo_url: "/images/uwaterloo-logo.svg",
logo_alt_text: "Faculty of Environment",
facebook: "https://www.facebook.com/University.Waterloo"
} %}
diff --git a/src/patterns/03-layouts/site-footer/site-footer.yml b/src/patterns/03-layouts/site-footer/site-footer.yml
index 96b1ebbd..54ae89b0 100644
--- a/src/patterns/03-layouts/site-footer/site-footer.yml
+++ b/src/patterns/03-layouts/site-footer/site-footer.yml
@@ -1,7 +1,7 @@
body: "The standard Lorem Ipsum passage, used since the 1500s<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
site_name: "Faculty of Environment"
logo_link: "https://uwaterloo.ca"
-logo_url: "/uw_wcms_gesso/source/images/logos/uwaterloo-logo.svg"
+logo_url: "/images/uwaterloo-logo.svg"
logo_alt_text: "Faculty of Health logo"
home_link : "#"
facebook: "https://www.facebook.com/University.Waterloo"
--
GitLab