From 917ae6ad481085a07b57f406032450b08e24a61e Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Fri, 10 Jun 2022 14:38:19 -0400
Subject: [PATCH] ISTWCMS-5596: import of initial base element css and patterns
---
.../01-core/elements/_blockquote.scss | 15 +-
src/patterns/01-core/elements/_body.scss | 9 +
.../01-core/elements/_definition-list.scss | 2 +-
src/patterns/01-core/elements/_details.scss | 7 +-
src/patterns/01-core/elements/_fieldset.scss | 77 +++++++-
src/patterns/01-core/elements/_figure.scss | 4 +-
src/patterns/01-core/elements/_form.scss | 164 +++++++++++++++++-
src/patterns/01-core/elements/_html.scss | 4 -
src/patterns/01-core/elements/_label.scss | 17 +-
src/patterns/01-core/elements/_option.scss | 11 +-
src/patterns/01-core/elements/_paragraph.scss | 3 +-
src/patterns/01-core/elements/_textarea.scss | 2 +-
src/patterns/01-core/font-face/_index.scss | 8 -
src/patterns/01-core/props/_colors.scss | 9 +
src/patterns/01-core/props/_fonts.scss | 18 +-
src/patterns/04-components/_index.scss | 1 +
.../04-components/blockquote/_blockquote.scss | 72 ++++++++
.../04-components/blockquote/blockquote.twig | 16 ++
.../04-components/blockquote/blockquote.yml | 3 +
.../04-components/fieldset/fieldset.twig | 11 ++
.../04-components/fieldset/fieldset.yml | 6 +
src/patterns/04-components/tag/_tag.scss | 10 +-
22 files changed, 423 insertions(+), 46 deletions(-)
create mode 100644 src/patterns/04-components/blockquote/_blockquote.scss
create mode 100644 src/patterns/04-components/blockquote/blockquote.twig
create mode 100644 src/patterns/04-components/blockquote/blockquote.yml
create mode 100644 src/patterns/04-components/fieldset/fieldset.twig
create mode 100644 src/patterns/04-components/fieldset/fieldset.yml
diff --git a/src/patterns/01-core/elements/_blockquote.scss b/src/patterns/01-core/elements/_blockquote.scss
index 77910a55..017c3f5e 100644
--- a/src/patterns/01-core/elements/_blockquote.scss
+++ b/src/patterns/01-core/elements/_blockquote.scss
@@ -2,14 +2,13 @@
// Blockquote styles.
:where(blockquote) {
- border-inline-start-width: var(--border-size-3);
- display: grid;
- font-size: var(--font-size-2);
- gap: var(--size-3);
- margin: 0 0 var(--size-5);
- max-inline-size: var(--size-content-2);
- padding-block: var(--size-3);
- padding-inline: var(--size-4);
+ //border-inline-start-width: var(--border-size-3);
+ //display: grid;
+ //gap: var(--size-3);
+ //margin: 0 0 var(--size-5);
+ //max-inline-size: var(--size-content-2);
+ //padding-block: var(--size-3);
+ //padding-inline: var(--size-4);
* + & {
margin-top: var(--size-5);
diff --git a/src/patterns/01-core/elements/_body.scss b/src/patterns/01-core/elements/_body.scss
index b43409f0..ab0ccc50 100644
--- a/src/patterns/01-core/elements/_body.scss
+++ b/src/patterns/01-core/elements/_body.scss
@@ -2,9 +2,18 @@
// Body styles.
:where(body) {
+ background-color: var(--var-uw-white);
+ color: var(--uw-black);
+ font-family: var(--font-primary);
+ font-size: var(--font-size-0);
+ line-height: var(--font-lineheight-4);
margin: 0;
min-block-size: 100%;
padding: 0;
scrollbar-gutter: stable both-edges;
word-wrap: break-word;
}
+body.has-open-mobile-menu {
+ overflow: hidden;
+ -webkit-overflow-scrolling: touch;
+}
diff --git a/src/patterns/01-core/elements/_definition-list.scss b/src/patterns/01-core/elements/_definition-list.scss
index d1bb03f3..069fff76 100644
--- a/src/patterns/01-core/elements/_definition-list.scss
+++ b/src/patterns/01-core/elements/_definition-list.scss
@@ -20,5 +20,5 @@
}
:where(dl) {
- font-size: var(--font-size-2);
+ font-size: var(--font-size-0);
}
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index b4f60b31..6dffe9cc 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -3,9 +3,6 @@
@use '../../01-core' as *;
-//$summary-font-family: gesso-font-family(book);
-//$details-font-family: gesso-font-family(primary);
-
:where(details) {
@include uw-no-breakout();
background: var(--gray-2);
@@ -59,8 +56,8 @@
color: var(--uw-black-primary);
cursor: pointer;
display:block;
- font-family: var(--font-sans);
- font-size: var(--font-size-0);
+ font-family: var(--font-book);
+ font-size: var(--font-size-00);
font-weight: var(--font-weight-700);
margin: 0;
line-height: 1.25;
diff --git a/src/patterns/01-core/elements/_fieldset.scss b/src/patterns/01-core/elements/_fieldset.scss
index 1fb0cff0..8553d148 100644
--- a/src/patterns/01-core/elements/_fieldset.scss
+++ b/src/patterns/01-core/elements/_fieldset.scss
@@ -1,7 +1,78 @@
// @file
// Fieldset element styles.
-:where(fieldset) {
- border-radius: var(--radius-2);
- border: var(--border-size-1) solid var(--gray-4);
+:where(fieldset),
+.fieldset {
+ background:transparent;
+ border: var(--gray-3) solid var(--size-xs);
+ clear: both;
+ margin-bottom:var(--size-4);
+ padding: var(--size-2);
+ position: relative;
+ legend {
+ border: 0;
+ box-sizing: border-box;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-2);
+ font-weight: 300;
+ margin: var(--size-1) 0;
+ max-width: 100%;
+ padding: 0;
+ position: relative;
+ white-space: normal;
+ }
+ /* stylelint-disable-next-line selector-no-qualifying-type */
+ &.webform-type-fieldset{
+ background: var(--gray-1);
+ padding: var(--size-2);
+ > legend{
+
+ border-radius: 2px;
+ font-family: var(--font-condensedbook);
+ margin: var(--size-2) 0;
+ min-width:0;
+ padding:0;
+ position: relative;
+ top:0;
+ }
+ }
+
+ &:hover {
+ > legend {
+ background-color: transparent;
+ }
+ }
+ .fieldset-invisible{
+ clear: both;
+ &:hover {
+ > legend {
+ margin-bottom: 0.7rem;
+ padding-top: var(--size-2);
+
+ }
+ }
+
+ > legend {
+ font-weight:400;
+ margin-bottom: 0.7rem;
+ padding-top:var(--size-2);
+
+ }
+ }
+ .fieldset-wrapper {
+ .webform-container-inline {
+ .fieldset-invisible {
+ display: inline-block;
+ }
+ }
+ }
+}
+.captcha {
+ margin: rem(gesso-spacing(md)) 0;
+}
+
+.layout-builder-configure-section {
+ fieldset {
+ background-color: initial;
+ }
}
diff --git a/src/patterns/01-core/elements/_figure.scss b/src/patterns/01-core/elements/_figure.scss
index d1a8d778..ac1d94ff 100644
--- a/src/patterns/01-core/elements/_figure.scss
+++ b/src/patterns/01-core/elements/_figure.scss
@@ -1,4 +1,6 @@
// @file
// Figure element styles.
-// :where(figure) {}
+ :where(figure) {
+ margin: 0 0 var(--size-2);
+ }
diff --git a/src/patterns/01-core/elements/_form.scss b/src/patterns/01-core/elements/_form.scss
index c6989741..6acb289f 100644
--- a/src/patterns/01-core/elements/_form.scss
+++ b/src/patterns/01-core/elements/_form.scss
@@ -1,4 +1,166 @@
// @file
// Form element styles.
-// :where(form) {}
+@use '../../01-core' as *;
+
+$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;
+
+
+ :where(form) {
+ font-family: var(--font-book);
+ font-size: var(--font-size-0);
+ @media(min-width: $screen-md) {
+ font-size: var(--font-size-00);
+ }
+ font-weight:400;
+ }
+// Don’t style button elements, since they’re often styled as links for
+// accessible widgets. Use the .button class in components/button.
+button {
+ overflow: visible;
+}
+
+.desription,
+.webform-element-description{
+ color: var(--gray-5);
+ font-family: var(--font-book);
+ font-size: var(--font-size-00);
+ margin: var(--size-05) 0;
+}
+
+
+
+[data-drupal-selector="edit-moderation-state-wrapper"]{
+
+ background-color:#ffebc5;
+ padding: var(--size-2);
+ .form-item-moderation-state-0-current{
+ font-style:italic;
+ label{
+ font-size: var(--font-size-0);
+ font-style:normal;
+ margin-bottom:0;
+ }
+ }
+}
+// Login screen making width 35rem.
+.user-login-form{
+ margin:0;
+ max-width:35rem;
+
+}
+// uw custon label css
+.webform-client-form {
+ margin-top:var(--size-105);
+}
+
+.form-required::after {
+ color:#e00;
+ content: "*";
+ display:inline-block;
+ font-family: var(--font-system);
+ font-size: var(--font-size-2);
+ font-weight:300;
+ margin-left: var(--size-sm);
+}
+
+// CSS for form overrides
+//.uw-site-container {
+// // the bottom fixed admin tab with site container:
+// .node-uw-ct-web-page-delete-form,
+// .layout-region-node-footer__content,
+// .node-layout-builder-form,
+// .entity-view-display-layout-builder-form,
+// .layout-builder-discard-changes,
+// .node-confirm-form
+// {
+// .form-actions {
+// background: gesso-color(ui, generic, background-lighter);
+// border-top:1px solid gesso-color(ui, generic, background);
+// bottom: 0;
+// box-shadow: gesso-box-shadow(6);
+// display:flex;
+// height:auto;
+// left: 0;
+// margin: 0;
+// padding: 0.5rem;
+// position: fixed;
+// width: 100%;
+// z-index: gesso-z-index(overlay);
+// [data-drupal-selector="edit-preview-toggle"]{
+// order:10;
+// }
+// .button{
+// margin:0.25rem 0;
+// max-width:7rem;
+// }
+// @include medium {
+// .button{
+// margin-bottom:1rem ;
+// }
+// gap:$form-gap;
+// height:4rem;
+// }
+//
+// .form-item-toggle-content-preview {
+// margin-top:1rem;
+// }
+// input [type='submit']{
+// margin-top:0;
+// }
+//
+// .form-wrapper input[type="submit"] {
+// margin-top:0;
+// }
+// }
+// }
+//
+// .webform-submission-form{
+// .form-actions{
+// display:flex;
+// gap:1rem;
+// margin:0.25rem 0;
+// .button{
+// @include button();
+// height:inherit;
+// margin:inherit;
+// }
+// }
+// }
+// // custom form actions
+// .layout-region-node-footer__content .form-actions{
+// .button[data-drupal-selector="edit-cancel"]{
+// margin-left:0 !important;
+// }
+// @include medium {
+// grid-template-columns:8rem 8rem 8rem 8rem;
+// grid-template-rows:auto;
+// row-gap: 1rem;
+// }
+// }
+// // custom form actions
+// .layout-builder-discard-changes .form-actions,
+// .node-uw-ct-web-page-delete-form .form-actions{
+// .button[data-drupal-selector="edit-cancel"]{
+// margin-left:0 !important;
+// }
+// @include medium {
+// grid-template-columns:8rem 8rem;
+// grid-template-rows:auto;
+// row-gap: 1rem;
+// }
+// }
+// // custom form actions
+// .entity-view-display-layout-builder-form .form-actions{
+// .button[data-drupal-selector="edit-cancel"]{
+// margin-left:0 !important;
+// }
+// @include medium {
+// grid-template-columns:8rem 8rem 15rem;
+// grid-template-rows:auto;
+// row-gap: 1rem;
+// }
+// }
+//}
diff --git a/src/patterns/01-core/elements/_html.scss b/src/patterns/01-core/elements/_html.scss
index ade02eca..4134733b 100644
--- a/src/patterns/01-core/elements/_html.scss
+++ b/src/patterns/01-core/elements/_html.scss
@@ -11,10 +11,6 @@
background-color: white;
block-size: 100%;
caret-color: var(--caret-color);
- color: var(--text-0);
- 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 e13d3b9e..6627567e 100644
--- a/src/patterns/01-core/elements/_label.scss
+++ b/src/patterns/01-core/elements/_label.scss
@@ -2,8 +2,21 @@
// Label element styles.
:where(label) {
- font-family: var(--font-sans);
+ font-family: var(--font-condensedbook);
}
+label,
+.label,
.uw-label{
- font-family: var(--font-sans);
+ display:block;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-2);
+ font-weight:normal;
+ form &{
+ margin-bottom: var(--size-1);
+ }
+ abbr {
+ display: inline;
+ font-size: var(--font-size-1);
+ }
+
}
diff --git a/src/patterns/01-core/elements/_option.scss b/src/patterns/01-core/elements/_option.scss
index f145df10..f7b4c6b3 100644
--- a/src/patterns/01-core/elements/_option.scss
+++ b/src/patterns/01-core/elements/_option.scss
@@ -1,7 +1,16 @@
// @file
// Options element styles.
-// :where(option) {}
+ //:where(option) {}
+.option {
+ display: inline;
+ font-family: var(--font-book);
+ font-size: var(--font-size-0);
+ font-weight: 300;
+ letter-spacing: inherit;
+ margin-left: 0.2rem;
+ padding-left: 0.25rem;
+}
:where(optgroup) {
font-family: inherit;
diff --git a/src/patterns/01-core/elements/_paragraph.scss b/src/patterns/01-core/elements/_paragraph.scss
index 1e2b23bc..8754fde0 100644
--- a/src/patterns/01-core/elements/_paragraph.scss
+++ b/src/patterns/01-core/elements/_paragraph.scss
@@ -2,10 +2,9 @@
// Paragraph styles.
:where(p) {
- font-size: var(--font-size-1);
+ font-size: var(--font-size-0);
margin-bottom: var(--size-2);
margin-top: 0;
- max-inline-size: var(--size-content-3);
@media print {
orphans: 3;
diff --git a/src/patterns/01-core/elements/_textarea.scss b/src/patterns/01-core/elements/_textarea.scss
index ad52287d..1cdfcbb5 100644
--- a/src/patterns/01-core/elements/_textarea.scss
+++ b/src/patterns/01-core/elements/_textarea.scss
@@ -3,12 +3,12 @@
:where(textarea) {
background-color: var(--gray-2);
- border-radius: var(--radius-2);
color: inherit;
cursor: pointer;
font-size: inherit;
font: inherit;
letter-spacing: inherit;
+ overflow:auto;
padding-block: var(--size-1);
padding-inline: var(--size-2);
resize: block;
diff --git a/src/patterns/01-core/font-face/_index.scss b/src/patterns/01-core/font-face/_index.scss
index 4d5fab90..8b61e629 100644
--- a/src/patterns/01-core/font-face/_index.scss
+++ b/src/patterns/01-core/font-face/_index.scss
@@ -40,14 +40,6 @@
src: url('/fonts/Bureau_Grot-Wide_Book.eot'), url('/fonts/Bureau_Grot-Wide_Book.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Wide_Book.woff2') format('woff2'), url('/fonts/Bureau_Grot-Wide_Book.woff') format('woff'), url('/fonts/Bureau_Grot-Wide_Book.ttf') format('truetype'), url('/fonts/Bureau_Grot-Wide_Book.svg#Bureau_Grot-Wide_Book') format('svg');
}
-@font-face {
- font-family: 'iconic';
- font-style: normal;
- font-weight: normal;
- src: url("/fonts/iconic.eot");
- src: url("/fonts/iconic.eot?#iefix") format("embedded-opentype"), url("../fonts/iconic.svg#iconic") format("svg"), url("/fonts/iconic.woff") format("woff"), url("/fonts/iconic.ttf") format("truetype");
-}
-
/* Complete 1451 */
@font-face {
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index bdbaa1b0..a7ce2463 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -218,3 +218,12 @@
--orange-8: #e8590c;
--orange-9: #d9480f;
}
+
+
+
+//Swatches
+.pl-colors .color-demo > div > div{
+ background-color: rgba(0,0,0,0.6);
+ font-family: var(--font-systembold);
+ font-size: var(--font-size-00);
+}
diff --git a/src/patterns/01-core/props/_fonts.scss b/src/patterns/01-core/props/_fonts.scss
index fef85f4b..edcbdac9 100644
--- a/src/patterns/01-core/props/_fonts.scss
+++ b/src/patterns/01-core/props/_fonts.scss
@@ -1,8 +1,16 @@
:where(html) {
- --font-sans: Helvetica, sans-serif;
- --font-serif: Georgia, 'Times New Roman', Times, serif;
- --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
- --font-mono: Menlo, Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
+ --font-book: 'BureauGrot Book', 'Barlow', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ --font-condensed: 'BureauGrotCond', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ --font-condensedbook: 'BureauGrotCond Book', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ --font-sans: BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ --font-serif: georgia, 'droid serif', 'Times New Roma', Times, serif;
+ --font-system: Typ1451-Regular,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-systemlight: Typ1451-Light,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-systemmedium: Typ1451-Medium,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-systembold: Typ1451-Bold,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-mono: Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
+ --font-primary: georgia, 'droid serif', 'Times New Roma', Times, serif;
+ --font-secondary: BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
--font-weight-100: 100;
--font-weight-200: 200;
--font-weight-300: 300;
@@ -39,7 +47,7 @@
--font-lineheight-1: 1.1;
--font-lineheight-2: 1.25;
--font-lineheight-3: 1.375;
- --font-lineheight-4: 1.5;
+ --font-lineheight-4: 1.425;
--font-lineheight-5: 1.75;
--font-lineheight-6: 2;
--font-letterspacing-0: -0.05em;
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index e1e5ee76..c46ebe15 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -1,3 +1,4 @@
+@forward 'blockquote/blockquote';
@forward 'card/card';
@forward 'tag-list/tag-list';
@forward 'tag/tag';
diff --git a/src/patterns/04-components/blockquote/_blockquote.scss b/src/patterns/04-components/blockquote/_blockquote.scss
new file mode 100644
index 00000000..16aefd7d
--- /dev/null
+++ b/src/patterns/04-components/blockquote/_blockquote.scss
@@ -0,0 +1,72 @@
+.uw-blockquote {
+ background-color: var(--gray-1);
+ color: var(--uw-black);
+
+ &__wrapper {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ padding: var(--size-4) 0;
+ text-align: center;
+ }
+
+ &__text {
+ display: inline-block;
+ p{
+ font-size: var(--font-size-4);
+ }
+ max-width: 640px;
+ padding: 0 var(--size-5);
+ position: relative;
+ text-align: left;
+
+ &::before {
+ color: var(--gray-5);
+ content: "\201C";
+ font-size: var(--font-size-14);
+ left: 0;
+ line-height: 5.2rem;
+ position: absolute;
+ top: -10px;
+ }
+
+ &::after {
+ bottom: 5px;
+ color: var(--gray-5);
+ content: "\201D";
+ font-size: var(--font-size-14);
+ line-height: 0;
+ position: absolute;
+ right: 0;
+ }
+ }
+
+ &__attribution {
+ display: block;
+
+ &--wrapper {
+ display: inline-block;
+ font-size: var(--font-size-0);
+ max-width: 640px;
+ padding: 0 var(--size-2);
+ position: relative;
+ text-align: left;
+ }
+
+
+
+ cite {
+ color: var(--uw-black);
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-1);
+ font-weight: normal;
+ text-align: left;
+ text-transform:uppercase;
+ > :first-child::before{
+ content: "\2014";
+ display:inline-block;
+ padding-right:var(--size-1);
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/blockquote/blockquote.twig b/src/patterns/04-components/blockquote/blockquote.twig
new file mode 100644
index 00000000..cb705197
--- /dev/null
+++ b/src/patterns/04-components/blockquote/blockquote.twig
@@ -0,0 +1,16 @@
+<blockquote class="uw-blockquote">
+ <div class="uw-blockquote__wrapper">
+ <div class="uw-blockquote__text">
+ {{ blockquote.text }}
+ </div>
+ {% if blockquote.attribution %}
+ <footer class="uw-blockquote__attribution">
+ <div class="uw-blockquote__attribution--wrapper">
+ <cite>
+ {{ blockquote.attribution }}
+ </cite>
+ </div>
+ </footer>
+ {% endif %}
+ </div>
+</blockquote>
diff --git a/src/patterns/04-components/blockquote/blockquote.yml b/src/patterns/04-components/blockquote/blockquote.yml
new file mode 100644
index 00000000..e6bcd6f7
--- /dev/null
+++ b/src/patterns/04-components/blockquote/blockquote.yml
@@ -0,0 +1,3 @@
+blockquote:
+ text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file3</p><p>This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
+ attribution: 'This is the attribution'
diff --git a/src/patterns/04-components/fieldset/fieldset.twig b/src/patterns/04-components/fieldset/fieldset.twig
new file mode 100644
index 00000000..1d75b869
--- /dev/null
+++ b/src/patterns/04-components/fieldset/fieldset.twig
@@ -0,0 +1,11 @@
+<fieldset class="fieldset fieldset--default">
+ <legend class="fieldset__legend">
+ <span class="fieldset__legend-text">{{ legend }}</span>
+ </legend>
+ <div class="fieldset__content">
+ {{ content }}
+ <div class="fieldset__description">
+ {{ description }}
+ </div>
+ </div>
+</fieldset>
diff --git a/src/patterns/04-components/fieldset/fieldset.yml b/src/patterns/04-components/fieldset/fieldset.yml
new file mode 100644
index 00000000..4ec9e28e
--- /dev/null
+++ b/src/patterns/04-components/fieldset/fieldset.yml
@@ -0,0 +1,6 @@
+---
+legend: 'Fieldset'
+content: |-
+ <p>Fieldset content goes here…</p>
+description: |-
+ <p>The description for this fieldset.</p>
diff --git a/src/patterns/04-components/tag/_tag.scss b/src/patterns/04-components/tag/_tag.scss
index 2f1badee..457a9b82 100644
--- a/src/patterns/04-components/tag/_tag.scss
+++ b/src/patterns/04-components/tag/_tag.scss
@@ -4,10 +4,10 @@
@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-font-family-small: var(--font-systemmedium) !default;
+$tag-font-family-normal: var(--font-systembold) !default;
+$tag-font-size-normal: var(--font-size-00) !default;
+$tag-font-size-small: var(--font-size-0000) !default;
.tag {
@@ -49,6 +49,7 @@ $tag-font-size-small: var(--font-size-000) !default;
&:focus {
background: var(--uw-black-primary);
color: var(--uw-gold-3);
+ text-decoration: none;
}
}
&--simple{
@@ -107,6 +108,7 @@ $tag-font-size-small: var(--font-size-000) !default;
&:focus {
background: var(--uw-black-primary);
color: var(--uw-gold-3);
+ text-decoration: none;
}
}
}
--
GitLab