From e6a4293f846c386978c49e5d19f0192eb3dea1d4 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 9 Jun 2022 08:57:47 -0400
Subject: [PATCH] ISTWCMS-5598:continue rebasing initial card into 1.0.x-
including link and tags
---
src/patterns/01-core/elements/_details.scss | 21 ++-
src/patterns/01-core/elements/_html.scss | 5 +-
src/patterns/01-core/elements/_label.scss | 7 +-
src/patterns/01-core/elements/_paragraph.scss | 4 +-
src/patterns/01-core/mixins/_index.scss | 1 +
src/patterns/01-core/mixins/_link.scss | 50 ++++++
.../01-core/mixins/_svg-background.scss | 13 ++
src/patterns/02-base/macros/uw.macro.twig | 18 ++
src/patterns/03-layouts/_index.scss | 23 +--
.../03-layouts/layout/_layout-base.scss | 10 +-
src/patterns/03-layouts/node/_node.scss | 20 ++-
src/patterns/03-layouts/region/_region.scss | 4 +-
src/patterns/04-components/_index.scss | 2 +-
src/patterns/04-components/card/_card.scss | 28 ++--
src/patterns/04-components/card/card.yml | 12 +-
.../04-components/details/_details.scss | 139 ----------------
src/patterns/04-components/label/label.twig | 2 +-
.../04-components/tag-list/_tag-list.scss | 11 +-
.../04-components/tag-list/tag-list.twig | 3 +-
.../04-components/tag-list/tag-list.yml | 1 +
src/patterns/04-components/tag/_tag.scss | 157 ++++++++++++++++++
src/patterns/04-components/tag/tag.md | 23 +++
src/patterns/04-components/tag/tag.twig | 27 +++
src/patterns/04-components/tag/tag.yml | 7 +
24 files changed, 372 insertions(+), 216 deletions(-)
create mode 100644 src/patterns/01-core/mixins/_link.scss
create mode 100644 src/patterns/02-base/macros/uw.macro.twig
delete mode 100644 src/patterns/04-components/details/_details.scss
create mode 100644 src/patterns/04-components/tag/_tag.scss
create mode 100644 src/patterns/04-components/tag/tag.md
create mode 100644 src/patterns/04-components/tag/tag.twig
create mode 100644 src/patterns/04-components/tag/tag.yml
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index d3c061a2..ad997fbd 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -1,16 +1,21 @@
// @file
// Details element styles.
+
@use '../../01-core' as *;
+//$summary-font-family: gesso-font-family(book);
+//$details-font-family: gesso-font-family(primary);
+
:where(details) {
@include uw-no-breakout();
- //@include svg-background(mobile-arrow-down);
+ @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);
border-radius: var(--radius-1);
box-shadow: var(--shadow-1);
color: var(--uw-black-primary);
+ font-family: var(--font-serif);
margin: var(--size-3) 0;
transition: box-shadow 300ms ease;
width:100%;
@@ -19,11 +24,10 @@
}
[open] > & {
@include svg-background(mobile-arrow-up);
+ width:100%;
}
&[open] > summary {
- border-end-end-radius: 0;
- border-end-start-radius: 0;
color: var(--uw-black-primary);
}
&:hover {
@@ -56,8 +60,8 @@
color: var(--uw-black-primary);
cursor: pointer;
display:block;
- //font-family: $summary-font-family;
- //font-size: rem(gesso-font-size(-1));
+ font-family: var(--font-sans);
+ font-size: var(--font-size-0);
font-weight: var(--font-weight-700);
margin: 0;
line-height: 1.25;
@@ -66,7 +70,8 @@
transition: box-shadow 300ms ease;
touch-action: manipulation;
[open] > & {
- //@include svg-background(mobile-arrow-up);
+ @include svg-background(mobile-arrow-up);
+ width:100%;
}
&:hover,
&:focus{
@@ -80,12 +85,12 @@
}
}
+//
.details__fallback-link {
display: block;
outline: 0;
text-decoration: none;
}
-
.details__content {
@include uw-no-breakout();
background: var(--uw-white-primary);
@@ -104,7 +109,7 @@
.details__description,
.seven-details__description{
color: var(--uw-black-primary);
- //font-size: rem(gesso-font-size(-1));
+ font-size: var(--font-size-00);
margin-bottom: var(--size-2);
> :last-child {
diff --git a/src/patterns/01-core/elements/_html.scss b/src/patterns/01-core/elements/_html.scss
index 280a7b82..ade02eca 100644
--- a/src/patterns/01-core/elements/_html.scss
+++ b/src/patterns/01-core/elements/_html.scss
@@ -12,8 +12,9 @@
block-size: 100%;
caret-color: var(--caret-color);
color: var(--text-0);
- font-family: var(--font-sans);
- line-height: var(--font-lineheight-4);
+ font-family: var(--font-serif);
+ font-size: var(--font-size-1);
+ line-height: var(--font-lineheight-2);
min-height: 100%;
scrollbar-color: var(--scrollbar-color) transparent;
text-size-adjust: none;
diff --git a/src/patterns/01-core/elements/_label.scss b/src/patterns/01-core/elements/_label.scss
index ccc88049..e13d3b9e 100644
--- a/src/patterns/01-core/elements/_label.scss
+++ b/src/patterns/01-core/elements/_label.scss
@@ -1,4 +1,9 @@
// @file
// Label element styles.
-// :where(label) {}
+ :where(label) {
+ font-family: var(--font-sans);
+ }
+.uw-label{
+ font-family: var(--font-sans);
+}
diff --git a/src/patterns/01-core/elements/_paragraph.scss b/src/patterns/01-core/elements/_paragraph.scss
index 4f64cc09..1e2b23bc 100644
--- a/src/patterns/01-core/elements/_paragraph.scss
+++ b/src/patterns/01-core/elements/_paragraph.scss
@@ -2,8 +2,8 @@
// Paragraph styles.
:where(p) {
- font-size: var(--font-size-2);
- margin-bottom: var(--size-2);;
+ font-size: var(--font-size-1);
+ margin-bottom: var(--size-2);
margin-top: 0;
max-inline-size: var(--size-content-3);
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index dcac9a9f..37364151 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -3,6 +3,7 @@
@forward 'headings';
@forward 'image-replace';
@forward 'layout';
+@forward 'link';
@forward 'list';
@forward 'svg-background';
@forward 'svg-icon';
diff --git a/src/patterns/01-core/mixins/_link.scss b/src/patterns/01-core/mixins/_link.scss
new file mode 100644
index 00000000..6a83ac57
--- /dev/null
+++ b/src/patterns/01-core/mixins/_link.scss
@@ -0,0 +1,50 @@
+// @file
+// Link mixins
+
+@mixin link($link, $hover: $link, $active: $hover, $visit: $link) {
+ color: $link;
+ text-decoration:underline;
+ &:visited {
+ color: $visit;
+ }
+ &:hover,
+ &:focus {
+ color: $hover;
+ text-decoration:none;
+
+ }
+ &:active {
+ color: $active;
+ }
+}
+@mixin link-no-underline($link, $hover: $link, $active: $hover, $visit: $link) {
+ color: $link;
+ text-decoration:none;
+ &:visited {
+ color: $visit;
+ }
+ &:hover,
+ &:focus {
+ color: $hover;
+ text-decoration:none;
+ }
+ &:active {
+ color: $active;
+ }
+}
+
+@mixin link-reverse($link, $hover: $link, $active: $hover, $visit: $link) {
+ color: $link;
+ text-decoration:none;
+ &:visited {
+ color: $visit;
+ }
+ &:hover,
+ &:focus {
+ color: $hover;
+ text-decoration:underline;
+ }
+ &:active {
+ color: $active;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_svg-background.scss b/src/patterns/01-core/mixins/_svg-background.scss
index b01a40d0..51016d0a 100644
--- a/src/patterns/01-core/mixins/_svg-background.scss
+++ b/src/patterns/01-core/mixins/_svg-background.scss
@@ -7,3 +7,16 @@
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;
+//}
diff --git a/src/patterns/02-base/macros/uw.macro.twig b/src/patterns/02-base/macros/uw.macro.twig
new file mode 100644
index 00000000..32ce1edd
--- /dev/null
+++ b/src/patterns/02-base/macros/uw.macro.twig
@@ -0,0 +1,18 @@
+{% macro readmore(url, title, label = "Read more", description_prefix = "about" ) %}
+ {% include '@components/readmore-link/readmore-link.twig' with {
+ 'url': url,
+ 'label': label,
+ 'description_prefix': description_prefix,
+ 'title': title
+ } %}
+{% endmacro %}
+
+{% macro tag(url, title, type = "full", size = "normal" ) %}
+ {% include '@components/tag/tag.twig' with {
+ 'url': url,
+ 'title': title,
+ 'type': type,
+ 'size': size,
+ 'faculty':faculty
+ } %}
+{% endmacro %}
diff --git a/src/patterns/03-layouts/_index.scss b/src/patterns/03-layouts/_index.scss
index 4897734f..84166d05 100644
--- a/src/patterns/03-layouts/_index.scss
+++ b/src/patterns/03-layouts/_index.scss
@@ -1,19 +1,4 @@
-// @file
-// Styles layouts
-
-@use 'content/content' as *;
-@use 'footer/footer' as *;
-@use 'grid/grid' as *;
-@use 'header/header' as *;
-@use 'region/region' as *;
-@use 'layout/layout' as *;
-@use 'layout/layout-base' as *;
-@use 'layout/layout--1-col/layout--1-col' as *;
-@use 'layout/layout--2-col/layout--2-col' as *;
-@use 'layout/layout--3-col/layout--3-col' as *;
-@use 'layout/layout--4-col/layout--4-col' as *;
-@use 'layout/layout--5-col/layout--5-col' as *;
-@use 'layout/layout--inverted-l-left/layout--inverted-l-left' as *;
-@use 'layout/layout--inverted-l-right/layout--inverted-l-right' as *;
-@use 'site-container/site-container' as *;
-@use 'site-footer/site-footer' as *;
+@forward 'grid/grid';
+@forward 'layout/layout';
+@forward 'layout/layout-base';
+@forward 'node/node';
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index fb1c1d31..32d337b7 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -3,16 +3,12 @@
.layout__region {
.layout-builder &{
-
- //outline: 2px dashed #2f91da;
- outline: 2px dashed var(--blue-6);
+ outline: var(--size-sm) dashed var(--blue-6);
}
.pl & {
-
- //outline: 2px dashed #2f91da;
- outline: 2px dashed var(--blue-6);
- padding: 1.5rem;
+ outline: var(--size-sm) dashed var(--blue-6);
+ padding: var(--size-3);
text-align: center;
.pl-labels{
text-align: center;
diff --git a/src/patterns/03-layouts/node/_node.scss b/src/patterns/03-layouts/node/_node.scss
index cf9086d2..bb4134bb 100644
--- a/src/patterns/03-layouts/node/_node.scss
+++ b/src/patterns/03-layouts/node/_node.scss
@@ -1,5 +1,9 @@
+// @file
+// Styles for node..
+
+@use '../../01-core' as *;
+
$sidebar-width: 18.75rem;
-$sidebar-gap: $grid-gap;
.uw-node {
@@ -17,7 +21,7 @@ $sidebar-gap: $grid-gap;
.uw-node__grid {
display: flex;
flex-direction: column;
- gap: $sidebar-gap;
+ gap: var(--grid-gap);
justify-content: center;
.layout {
@@ -33,9 +37,9 @@ $sidebar-gap: $grid-gap;
width: 100vw;
}
- @include medium {
+ @media(min-width: $screen-md) {
flex-direction: row;
- gap: $sidebar-gap;
+ gap: var(--grid-gap);
.layout {
padding-right: 0;
@@ -65,14 +69,14 @@ $sidebar-gap: $grid-gap;
// Turn on sidebar with display.
display: block;
- padding: 0 1rem;
+ padding: 0 var(--size-2);
width: 100%;
.layout {
padding: 0;
}
- @include medium {
+ @media(min-width: $screen-md) {
padding: 0;
width: $sidebar-width;
.layout {
@@ -92,7 +96,7 @@ $sidebar-gap: $grid-gap;
.uw-node__node {
width: 100%;
- @include medium {
+ @media(min-width: $screen-md) {
padding-right: 0;
width: calc(100vw - 347px);
}
@@ -106,7 +110,7 @@ $sidebar-gap: $grid-gap;
}
.uw-node__sidebar {
- @include medium {
+ @media(min-width: $screen-md) {
padding: 0;
}
}
diff --git a/src/patterns/03-layouts/region/_region.scss b/src/patterns/03-layouts/region/_region.scss
index ee15e652..2696024c 100644
--- a/src/patterns/03-layouts/region/_region.scss
+++ b/src/patterns/03-layouts/region/_region.scss
@@ -3,8 +3,8 @@
.l-region {
.pl &{
- outline: 1px dashed var(--gray-4);
- padding: 1.5rem;
+ outline: var(--size-xs) dashed var(--gray-4);
+ padding: var(--size-3);
text-align: center;
}
}
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index f456bb3e..e1e5ee76 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -1,3 +1,3 @@
@forward 'card/card';
-@forward 'details/details';
@forward 'tag-list/tag-list';
+@forward 'tag/tag';
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index cd5ccc51..61d722b7 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -30,7 +30,7 @@ $card-padding: var(--size-2) !default;
.card--show-hover{
border-bottom: 3px solid $card-accent-border-color;
box-shadow: var(--shadow-1);
- transition: box-shadow;
+ transition: box-shadow 300ms ease;
&:hover,
&:focus-within {
@@ -115,9 +115,7 @@ $card-padding: var(--size-2) !default;
}
.card__date {
-
- //font-size: rem(gesso-font-size(0));
-
+ font-size: var(--font-size-1);
margin-bottom: var(--size-2);
position: relative;
}
@@ -129,26 +127,24 @@ $card-padding: var(--size-2) !default;
a {
- //@include link-reverse(
- // $card-link-color,
- // $card-link-color-hover
- //);
+ @include link-reverse(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
}
}
.card__author {
-
@include uw-no-breakout();
- //font-family: gesso-font-family(systemmedium);
- //font-size: gesso-font-size(-1);
+ font-family: var(--font-mono);
+ font-size: var(--font-size-1);
margin-top: 0;
padding: 0 0 var(--size-1) 0;
a {
-
- //@include link(
- // $card-link-color,
- // $card-link-color-hover
- //);
+ @include link(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
}
}
diff --git a/src/patterns/04-components/card/card.yml b/src/patterns/04-components/card/card.yml
index 44fe7d48..e90e176e 100644
--- a/src/patterns/04-components/card/card.yml
+++ b/src/patterns/04-components/card/card.yml
@@ -12,11 +12,17 @@ header:
title: 'Card Title'
tags:
- url: '#'
- title: 'Tag 1'
+ title: 'Tag1'
type: 'simple'
+ size: 'normal'
+ faculty: 'org-default'
- url: '#'
- title: 'Tag 2'
+ title: 'Tag2'
type: 'simple'
+ size: 'normal'
+ faculty: 'org-default'
- url: '#'
- title: 'Tag 3'
+ title: 'Tag3'
type: 'simple'
+ size: 'normal'
+ faculty: 'org-default'
diff --git a/src/patterns/04-components/details/_details.scss b/src/patterns/04-components/details/_details.scss
deleted file mode 100644
index 5de93724..00000000
--- a/src/patterns/04-components/details/_details.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-//// @file
-//// Styles for collapsible details.
-//
-//$details-background-color: gesso-color(ui, generic, background-light) !default;
-//$details-background-color-hover: gesso-color(ui, generic, background) !default;
-//$details-content-background-color: gesso-color(background, site) !default;
-//$details-padding: var(--size-2) !default;
-//$details-text-color: var(--uw-black) !default;
-////$summary-font-family: gesso-font-family(book);
-////$details-font-family: gesso-font-family(primary);
-//
-//// 'details' can appear as a modernizr class on the html tag, so this
-//// class is limited to only the details element
-///* stylelint-disable-next-line selector-no-qualifying-type */
-//.uw-details,
-//.seven-details {
-// background-color: var(--gray-2);
-// border: 1px solid #bfbfbf;
-// border-bottom: 1px solid var(--uw-black);
-// border-radius: inherit;
-// box-shadow: var(--shadow-0);
-// margin: var(--size-3) 0;
-// transition: box-shadow;
-// width:100%;
-//
-// &[open] > .seven-details__summary {
-//
-// color: var(--uw-black);
-// }
-//
-// &:hover {
-// box-shadow: var(--shadow-1);
-// }
-//
-// &:focus-within {
-// box-shadow: var(--shadow-1);
-// }
-//
-// &:first-child{
-// margin-top: 0;
-// }
-//
-// // Fallback for browsers that don’t support details.
-// /* stylelint-disable-next-line selector-no-qualifying-type */
-// .js &:not([open]) > .details__content {
-// display: none;
-// }
-//}
-//
-//.seven-details__summary,
-//.details__summary {
-// //@include uw-no-breakout();
-// ////@include svg-background(mobile-arrow-down);
-// //background-color: $details-background-color;
-// //background-position: right 1rem center; // LTR
-// //background-repeat: no-repeat;
-// //background-size: rem(13px);
-// //color: var(--uw-black);
-// //cursor: pointer;
-// //display: block;
-// //font-family: $summary-font-family;
-// ////font-size: rem(gesso-font-size(-1));
-// //line-height: 1.25;
-// //outline: 0;
-// //padding: $details-padding;
-// //text-shadow: 0 1px 0 #fff;
-// //transition: box-shadow;
-//
-// //@if $support-for-rtl {
-// // [dir='rtl'] & {
-// // background-position: left $details-padding center;
-// // padding-left: var(--size-7);
-// // padding-right: $details-padding;
-// // }
-// //}
-//
-// //[open] > & {
-// // //@include svg-background(mobile-arrow-up);
-// //}
-// //
-// //&:hover,
-// //&:focus{
-// // color:var(--uw-black);
-// //}
-// //&:first-child{
-// // margin-top: 0;
-// //}
-// //&::-webkit-details-marker {
-// // display: none;
-// //}
-//}
-//
-//.details__fallback-link {
-// display: block;
-// outline: 0;
-// text-decoration: none;
-//}
-//
-//.details__content {
-// @include uw-no-breakout();
-// background: $details-content-background-color;
-// border: 1px solid $details-background-color;
-// border-top: 0;
-// padding: $details-padding;
-//
-// > :last-child {
-// margin-bottom: 0;
-// }
-// .uw-label{
-// margin-bottom:0;
-// margin-top:var(--size-2);
-// }
-//}
-//
-//.details__description,
-//.seven-details__description{
-// color: $details-text-color;
-// //font-size: rem(gesso-font-size(-1));
-// margin-bottom: var(--size-2);
-//
-// > :last-child {
-// margin-bottom: 0;
-// }
-//}
-//.node--type{
-// &-uw-ct-contact{
-// .details {
-// max-width:600px;
-// }
-// }
-//}
-//
-//.seven-details__wrapper {
-// padding: 1rem;
-// .uw-input,
-// .form-text{
-// width:100%;
-// }
-//}
diff --git a/src/patterns/04-components/label/label.twig b/src/patterns/04-components/label/label.twig
index 787662a9..4d11ae3f 100644
--- a/src/patterns/04-components/label/label.twig
+++ b/src/patterns/04-components/label/label.twig
@@ -1 +1 @@
-<span class="uw-label">{{ label }}:</span>
+<span class="uw-label">{{ label }}</span>
diff --git a/src/patterns/04-components/tag-list/_tag-list.scss b/src/patterns/04-components/tag-list/_tag-list.scss
index fc4d490b..61d13c7a 100644
--- a/src/patterns/04-components/tag-list/_tag-list.scss
+++ b/src/patterns/04-components/tag-list/_tag-list.scss
@@ -1,12 +1,11 @@
+@use '../../01-core' as *;
+
.tag-list {
- // TODO: change of ohana functions/mixins.
- //@include list-clean();
+ @include list-unstyled();
}
.tag-list__item {
display: inline-block;
- // TODO: change of ohana functions/mixins.
- //margin-bottom: rem(gesso-spacing(xxs));
- // TODO: change of ohana functions/mixins.
- //margin-right: rem(gesso-spacing(xs));
+ margin-bottom: var(--size-05);
+ margin-right: var(--size-1);
}
diff --git a/src/patterns/04-components/tag-list/tag-list.twig b/src/patterns/04-components/tag-list/tag-list.twig
index 0d5e3342..9c10d0e0 100644
--- a/src/patterns/04-components/tag-list/tag-list.twig
+++ b/src/patterns/04-components/tag-list/tag-list.twig
@@ -1,7 +1,8 @@
+{% import '@base/macros/uw.macro.twig' as macros %}
<ul class="tag-list {{ modifier_classes }}">
{% for item in items %}
<li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">
- {{ macros.tag(item.url, item.title, tag_type) }}
+ {{ macros.tag(item.url, item.title, item.type) }}
</li>
{% endfor %}
</ul>
diff --git a/src/patterns/04-components/tag-list/tag-list.yml b/src/patterns/04-components/tag-list/tag-list.yml
index 3d1ec976..d370f476 100644
--- a/src/patterns/04-components/tag-list/tag-list.yml
+++ b/src/patterns/04-components/tag-list/tag-list.yml
@@ -6,6 +6,7 @@ items:
size: 'normal'
- url: '#'
title: 'UW Default'
+ faculty: 'org-default'
type: 'full'
size: 'normal'
- url: '#'
diff --git a/src/patterns/04-components/tag/_tag.scss b/src/patterns/04-components/tag/_tag.scss
new file mode 100644
index 00000000..2f1badee
--- /dev/null
+++ b/src/patterns/04-components/tag/_tag.scss
@@ -0,0 +1,157 @@
+// @file
+// Styles for Tags.
+
+@use '../../01-core' as *;
+
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
+$tag-font-family-small: var(--font-mono) !default;
+$tag-font-family-normal: var(--font-mono) !default;
+$tag-font-size-normal: var(--font-size-0) !default;
+$tag-font-size-small: var(--font-size-000) !default;
+
+
+.tag {
+ @include link-no-underline(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ background: none;
+ display: inline-block;
+ font-size: $tag-font-size-normal;
+ margin: 0 0 var(--size-1) 0;
+ padding: 0;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition:background 300ms ease-in;
+ &.token{
+ text-transform: inherit;
+ }
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+ &--normal{
+ font-family: $tag-font-family-normal;
+ font-size: $tag-font-size-normal;
+ }
+ &--small{
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+
+ }
+ &--full{
+ background: var(--uw-gold-3);
+ color: var(--uw-black-primary);
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+ padding: var(--size-1);
+ &:hover,
+ &:focus {
+ background: var(--uw-black-primary);
+ color: var(--uw-gold-3);
+ }
+ }
+ &--simple{
+ @include link-reverse(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ font-family: $tag-font-family-normal;
+ }
+
+
+
+
+
+ a{
+ @include link-no-underline(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ background:none;
+ display: inline-block;
+ font-size: $tag-font-size-normal;
+ margin: 0 0 var(--size-1) 0;
+ padding:0;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition:background 300ms ease;
+
+ &:hover,
+ &:focus {
+
+ }
+ }
+ &--normal{
+ a{
+ font-family: $tag-font-family-normal;
+ font-size: $tag-font-size-normal;
+ }
+ }
+ &--small{
+ a {
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+ }
+ }
+ &--full{
+ a {
+ background: var(--uw-gold-3);
+ color: var(--uw-black-primary);
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+ padding: var(--size-1);
+
+ &:hover,
+ &:focus {
+ background: var(--uw-black-primary);
+ color: var(--uw-gold-3);
+ }
+ }
+ }
+ &--simple {
+ a {
+ @include link-reverse(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ font-family: $tag-font-family-normal;
+ }
+ }
+}
+
+@each $faculty in $faculties {
+ .#{$faculty} {
+ a.tag--full{
+ @if $faculty == org-default {
+ background-color: var(--uw-black-primary);
+ color: var(--uw-gold-3);
+ &:hover,
+ &:focus {
+ background-color: var(--uw-gold-3);
+ color: var(--uw-black-primary);
+ }
+
+ }
+ //@else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc{
+ // background-color:gesso-brand($faculty,'primary');
+ // color: gesso-brand(org-default,uw-white,'primary');
+ // &:hover,
+ // &:focus {
+ // background-color: gesso-brand($faculty, 'light');
+ // color:gesso-brand($faculty,'primary');
+ // }
+ //}
+ //@else {
+ // background-color:gesso-brand($faculty,'primary');
+ // color: gesso-brand(org-default,uw-white,'primary');
+ // &:hover,
+ // &:focus {
+ // background-color: gesso-brand($faculty, 'lvl1');
+ // color:gesso-brand($faculty,'primary');
+ // }
+ //}
+ }
+ }
+}
diff --git a/src/patterns/04-components/tag/tag.md b/src/patterns/04-components/tag/tag.md
new file mode 100644
index 00000000..e4ad446f
--- /dev/null
+++ b/src/patterns/04-components/tag/tag.md
@@ -0,0 +1,23 @@
+---
+el: .tag
+title: Tag
+---
+
+__Variables:__
+* type: [string] Type of the tag
+ * full
+ * simple
+* size: [string] Size of the tag.
+ * small
+ * normal
+* url: [string] URL of the tag.
+* title: [string] Title of the tag.
+* faculty: [string] One of the faculty variables wrapping the tag will make
+ background color change
+ * org-ahs
+ * org-art
+ * org-eng
+ * org-env
+ * org-mat
+ * org-sci
+ * org-school
diff --git a/src/patterns/04-components/tag/tag.twig b/src/patterns/04-components/tag/tag.twig
new file mode 100644
index 00000000..530b041e
--- /dev/null
+++ b/src/patterns/04-components/tag/tag.twig
@@ -0,0 +1,27 @@
+{% set classes = [
+ 'tag',
+ type ? 'tag--' ~ type,
+ size ? 'tag--' ~ size
+] %}
+{% if is_demo %}
+<h4>This is a simple tag </h4>
+{% endif %}
+
+{% if faculty %}
+<span class="{{ faculty }}">
+{% endif %}
+ <a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">
+ {{ title }}
+ </a>
+{% if faculty %}
+</span>
+{% endif %}
+
+
+{% if is_demo %}
+<br>
+<h4>This is a full tag </h4>
+<a href="{{ url }}" class="tag tag--full tag--normal" rel="tag">
+ {{ title }}
+</a>
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/04-components/tag/tag.yml b/src/patterns/04-components/tag/tag.yml
new file mode 100644
index 00000000..063342a2
--- /dev/null
+++ b/src/patterns/04-components/tag/tag.yml
@@ -0,0 +1,7 @@
+---
+is_demo: true
+url: '#'
+title: 'Community'
+type: 'simple'
+size: 'normal'
+faculty: 'org-default'
--
GitLab