diff --git a/src/patterns/01-core/elements/_blockquote.scss b/src/patterns/01-core/elements/_blockquote.scss
index 017c3f5e356c0de99280a2d5e6b58848d0b7f878..9d5e96e3e8f8bce09d15e86097963c3c083aff6e 100644
--- a/src/patterns/01-core/elements/_blockquote.scss
+++ b/src/patterns/01-core/elements/_blockquote.scss
@@ -2,15 +2,7 @@
// Blockquote styles.
:where(blockquote) {
- //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/_definition-list.scss b/src/patterns/01-core/elements/_definition-list.scss
index ea36152d86a1c0262377eb6423452d2adb1a750d..fd30de7486e80fcbe5bc428ff40ef58b789a0463 100644
--- a/src/patterns/01-core/elements/_definition-list.scss
+++ b/src/patterns/01-core/elements/_definition-list.scss
@@ -3,7 +3,6 @@
:where(dd) {
margin-bottom: var(--size-1);
-
}
:where(dt) {
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index de2c96a49cc5402f50f6d81021e25ddfd7e5ce0e..665fde06cc88e6fdc9902ca7e13ffdc45263456b 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -7,20 +7,20 @@
@include uw-no-breakout();
background: var(--gray-2);
border: var(--size-xs) solid #bfbfbf;
- border-bottom:var(--size-xs) solid var(--uw-black-primary);
+ 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%;
+ width: 100%;
&[open] > .seven-details__summary {
color: var(--uw-black-primary);
}
[open] > & {
@include svg-background(mobile-arrow-up);
- width:100%;
+ width: 100%;
}
&[open] > summary {
@@ -55,7 +55,7 @@
border-radius: var(--radius-1);
color: var(--uw-black-primary);
cursor: pointer;
- display:block;
+ display: block;
font-family: var(--font-book);
font-size: var(--font-size-00);
font-weight: var(--font-weight-3300);
@@ -67,11 +67,11 @@
touch-action: manipulation;
[open] > & {
@include svg-background(mobile-arrow-up);
- width:100%;
+ width: 100%;
}
&:hover,
&:focus{
- color:var(--uw-black-primary);
+ color: var(--uw-black-primary);
}
&:first-child{
margin-top: 0;
@@ -98,7 +98,7 @@
margin-bottom: 0;
}
.uw-label{
- margin-bottom:0;
+ margin-bottom: 0;
margin-top: var(--size-2);
}
}
@@ -107,7 +107,6 @@
color: var(--uw-black-primary);
font-size: var(--font-size-00);
margin-bottom: var(--size-2);
-
> :last-child {
margin-bottom: 0;
}
@@ -115,7 +114,7 @@
.node--type{
&-uw-ct-contact{
.details {
- max-width:600px;
+ max-width: 600px;
}
}
}
@@ -123,6 +122,6 @@
padding: var(--size-2);
.uw-input,
.form-text{
- width:100%;
+ width: 100%;
}
}
diff --git a/src/patterns/01-core/elements/_fieldset.scss b/src/patterns/01-core/elements/_fieldset.scss
index 8553d148a72dec2c50db740bab231fd21c1e791d..53f3ad3600f9b9fbfef09adc4a10ce9cc99f7d14 100644
--- a/src/patterns/01-core/elements/_fieldset.scss
+++ b/src/patterns/01-core/elements/_fieldset.scss
@@ -3,10 +3,10 @@
:where(fieldset),
.fieldset {
- background:transparent;
+ background: transparent;
border: var(--gray-3) solid var(--size-xs);
clear: both;
- margin-bottom:var(--size-4);
+ margin-bottom: var(--size-4);
padding: var(--size-2);
position: relative;
legend {
@@ -26,14 +26,13 @@
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;
+ min-width: 0;
+ padding: 0;
position: relative;
- top:0;
+ top: 0;
}
}
@@ -48,15 +47,13 @@
> legend {
margin-bottom: 0.7rem;
padding-top: var(--size-2);
-
}
}
> legend {
- font-weight:400;
+ font-weight: 400;
margin-bottom: 0.7rem;
- padding-top:var(--size-2);
-
+ padding-top: var(--size-2);
}
}
.fieldset-wrapper {
@@ -68,7 +65,7 @@
}
}
.captcha {
- margin: rem(gesso-spacing(md)) 0;
+ margin: var(--size-3) 0;
}
.layout-builder-configure-section {
diff --git a/src/patterns/01-core/elements/_figure.scss b/src/patterns/01-core/elements/_figure.scss
index ac1d94ff1eca4e419ef40aba92efa8f0819ece70..fb5d193e919bdd7d9418cda79a9f7f5cf25848d0 100644
--- a/src/patterns/01-core/elements/_figure.scss
+++ b/src/patterns/01-core/elements/_figure.scss
@@ -1,6 +1,6 @@
// @file
// Figure element styles.
- :where(figure) {
- margin: 0 0 var(--size-2);
- }
+: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 7dfeeffe75f7211d864aea49406e11b31d663b6e..115a27f93be819ae4f2257f5fc7ee63435648c99 100644
--- a/src/patterns/01-core/elements/_form.scss
+++ b/src/patterns/01-core/elements/_form.scss
@@ -3,14 +3,14 @@
@use '../../01-core' as *;
- :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;
- }
+: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 {
@@ -28,36 +28,34 @@ button {
[data-drupal-selector="edit-moderation-state-wrapper"]{
-
- background-color:#ffebc5;
+ background-color: #ffebc5;
padding: var(--size-2);
.form-item-moderation-state-0-current{
- font-style:italic;
+ font-style: italic;
label{
font-size: var(--font-size-0);
- font-style:normal;
- margin-bottom:0;
+ font-style: normal;
+ margin-bottom: 0;
}
}
}
// Login screen making width 35rem.
.user-login-form{
- margin:0;
- max-width:35rem;
-
+ margin: 0;
+ max-width: 35rem;
}
// uw custon label css
.webform-client-form {
- margin-top:var(--size-105);
+ margin-top: var(--size-105);
}
.form-required::after {
- color:#e00;
+ color: #e00;
content: "*";
- display:inline-block;
+ display: inline-block;
font-family: var(--font-system);
- font-size: var(--font-size-2);
- font-weight:300;
+ font-size: var(--font-size-2);
+ font-weight: 300;
margin-left: var(--size-sm);
}
diff --git a/src/patterns/01-core/elements/_html.scss b/src/patterns/01-core/elements/_html.scss
index 77713a98c1d6754b927a517e0b96a3d407c45a6f..d1b3f2338570f1c9954b6d61345e0a1dfd74e240 100644
--- a/src/patterns/01-core/elements/_html.scss
+++ b/src/patterns/01-core/elements/_html.scss
@@ -6,7 +6,6 @@
--caret-color: var(--blue-6);
--scrollbar-color: var(--gray-7);
--text-0: var(--gray-7);
-
accent-color: var(--accent-color);
background-color: white;
block-size: 100%;
@@ -15,7 +14,6 @@
min-height: 100%;
scrollbar-color: var(--scrollbar-color) transparent;
text-size-adjust: 100%;
-
@media screen and (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
diff --git a/src/patterns/01-core/elements/_inline-elements.scss b/src/patterns/01-core/elements/_inline-elements.scss
index ba35270766837c37a4ff7ab2fd73eddf60b08328..1d565316101d223980d07bdaacbe3f2513e1e948 100644
--- a/src/patterns/01-core/elements/_inline-elements.scss
+++ b/src/patterns/01-core/elements/_inline-elements.scss
@@ -132,7 +132,7 @@
}
:where(small) {
- font-size: max(.5em, var(--font-size-0));
+ font-size: max(0.5em, var(--font-size-0));
max-inline-size: var(--size-content-1);
}
diff --git a/src/patterns/01-core/elements/_input.scss b/src/patterns/01-core/elements/_input.scss
index 87a6a001d57b7e10735c15169c3c1843ea451b3e..d302683b5efa361af74a583c81d2c4b00a0fc7c5 100644
--- a/src/patterns/01-core/elements/_input.scss
+++ b/src/patterns/01-core/elements/_input.scss
@@ -8,16 +8,15 @@ $uw-input-padding: 0.46667rem;
box-sizing: border-box;
color: inherit;
cursor: pointer;
- font-family:var(--font-systemmedium);
+ font-family: var(--font-systemmedium);
font-size: var(--font-size-0);
- font: inherit;
letter-spacing: inherit;
padding: $uw-input-padding;
- max-width:inherit;
+ max-width: inherit;
touch-action: manipulation;
&:focus {
border: var(--size-xs) solid var(--gray-5) !important;
- box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 0 5px rgba(104,104,104,.7);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(104, 104, 104, 0.7);
outline: var(--gray-5);
}
}
@@ -52,7 +51,6 @@ $uw-input-padding: 0.46667rem;
:where(input[type="file"])::-webkit-file-upload-button {
color: inherit;
font-size: inherit;
- font: inherit;
letter-spacing: inherit;
}
@@ -72,7 +70,6 @@ $uw-input-padding: 0.46667rem;
:where(input[type="search"]) {
appearance: textfield;
outline-offset: -2px;
-
&::-webkit-search-decoration {
appearance: none;
}
diff --git a/src/patterns/01-core/elements/_label.scss b/src/patterns/01-core/elements/_label.scss
index 6627567e07087a2b6746d559cc05df35067bc0a1..a7a34c938be2298127ac84d2ce324552a0b97801 100644
--- a/src/patterns/01-core/elements/_label.scss
+++ b/src/patterns/01-core/elements/_label.scss
@@ -1,22 +1,21 @@
// @file
// Label element styles.
- :where(label) {
- font-family: var(--font-condensedbook);
- }
+:where(label) {
+ font-family: var(--font-condensedbook);
+}
label,
.label,
.uw-label{
- display:block;
+ display: block;
font-family: var(--font-condensedbook);
font-size: var(--font-size-2);
- font-weight:normal;
+ font-weight: normal;
form &{
margin-bottom: var(--size-1);
}
abbr {
display: inline;
- font-size: var(--font-size-1);
+ font-size: var(--font-size-1);
}
-
}
diff --git a/src/patterns/01-core/elements/_menu.scss b/src/patterns/01-core/elements/_menu.scss
index 343cccac24420db9ad9b8604805ce5d4ff6bd4db..2eebcefcd2573b72f56815487e9ca3d16f8727a0 100644
--- a/src/patterns/01-core/elements/_menu.scss
+++ b/src/patterns/01-core/elements/_menu.scss
@@ -1,6 +1,6 @@
// @file
// Menu element styles.
-:where(menu) {
-
-}
+//:where(menu) {
+//
+//}
diff --git a/src/patterns/01-core/elements/_option.scss b/src/patterns/01-core/elements/_option.scss
index 17f3627ca1fa3ac346c1274dad77750318b2745f..773abdbcdb20d478915adab76e0524b3f2a96d92 100644
--- a/src/patterns/01-core/elements/_option.scss
+++ b/src/patterns/01-core/elements/_option.scss
@@ -1,15 +1,15 @@
// @file
// Options element styles.
- :where(option) {
- display: inline;
- font-family:gesso-font-family(book);
- font-size: gesso-font-size(0);
- font-weight: gesso-font-weight(regular);
- letter-spacing:inherit;
- margin-left: 0.2rem;
- padding-left:0.25rem;
- }
+:where(option) {
+ display: inline;
+ font-family: var(--font-book);
+ font-size: var(--font-size-0);
+ font-weight: var(--font-weight-400);
+ letter-spacing: inherit;
+ margin-left: 0.2rem;
+ padding-left: 0.25rem;
+}
:where(optgroup) {
font-family: inherit;
diff --git a/src/patterns/01-core/elements/_ordered-list.scss b/src/patterns/01-core/elements/_ordered-list.scss
index 7c2f4c6c225cbfcb0e13872b1ca2a8f67442e9d0..b47e41f139ad07779a316885340496d8ee6b8a58 100644
--- a/src/patterns/01-core/elements/_ordered-list.scss
+++ b/src/patterns/01-core/elements/_ordered-list.scss
@@ -7,7 +7,7 @@
ol{
list-style-type: lower-alpha;
margin: (var(--size-2) / 2) 0 0;
- li ol {
+ li ol {
list-style-type: lower-roman;
}
}
@@ -15,25 +15,25 @@
.lower-alpha {
list-style-type: lower-alpha;
- li ol {
+ li ol {
list-style-type: lower-alpha;
}
}
.upper-alpha{
list-style-type: upper-alpha;
- li ol {
+ li ol {
list-style-type: upper-alpha;
}
}
.lower-roman {
list-style-type: lower-roman;
- li ol {
+ li ol {
list-style-type: lower-roman;
}
}
.upper-roman{
list-style-type: upper-roman;
- li ol {
+ li ol {
list-style-type: upper-roman;
}
}
diff --git a/src/patterns/01-core/elements/_select.scss b/src/patterns/01-core/elements/_select.scss
index c37f88a7a3f6de6c43d92a4ae8ba38e4b71812e5..bb4797c1a5f8d9150f76e05e5911da9664a3b2d5 100644
--- a/src/patterns/01-core/elements/_select.scss
+++ b/src/patterns/01-core/elements/_select.scss
@@ -17,7 +17,7 @@
letter-spacing: inherit;
//padding-block: .75ch;
//padding-inline: 1.25ch 0;
- padding-right:10px; // LTR
+ padding-right: 10px; // LTR
touch-action: manipulation;
&:-moz-focusring {
color: transparent;
diff --git a/src/patterns/01-core/elements/_table.scss b/src/patterns/01-core/elements/_table.scss
index aa714af8ff0a7fd16226c2e390a0c1da98438df9..73f1a4850918d9000fe12af62b34aa12cfffb16c 100644
--- a/src/patterns/01-core/elements/_table.scss
+++ b/src/patterns/01-core/elements/_table.scss
@@ -4,9 +4,8 @@
:where(caption) {
color: var(--gray-5);
font-size: var(--font-size-0);
- font-style:italic;
+ font-style: italic;
padding: var(--size-1);
-
}
:where(table) {
@@ -31,7 +30,7 @@ tfoot {
th {
background-color: var(--gray-2);
border: var(--size-xs) solid var(--gray-3);
- font-style:italic;
+ font-style: italic;
padding: var(--size-1);
text-align: left;
&[scope="row"] {
@@ -48,8 +47,9 @@ thead {
td {
background-color: var(--uw-white);
border: var(--size-xs) solid var(--gray-3);
- padding: var(--size-1)
+ padding: var(--size-1);
}
+
:where(thead) {
@media print {
display: table-header-group;
diff --git a/src/patterns/01-core/elements/_textarea.scss b/src/patterns/01-core/elements/_textarea.scss
index 1cdfcbb526f3c65f121b3b42580b9904c15ff498..be552fc17aae327686be672095ea9fc93fc9cf8b 100644
--- a/src/patterns/01-core/elements/_textarea.scss
+++ b/src/patterns/01-core/elements/_textarea.scss
@@ -6,9 +6,8 @@
color: inherit;
cursor: pointer;
font-size: inherit;
- font: inherit;
letter-spacing: inherit;
- overflow:auto;
+ overflow: auto;
padding-block: var(--size-1);
padding-inline: var(--size-2);
resize: block;
diff --git a/src/patterns/01-core/elements/_unordered-list.scss b/src/patterns/01-core/elements/_unordered-list.scss
index 8ecd8bb8e726080af24338acc86d39fc30065139..96e2acc1d11aceb436d87667a201663391a94c1e 100644
--- a/src/patterns/01-core/elements/_unordered-list.scss
+++ b/src/patterns/01-core/elements/_unordered-list.scss
@@ -10,7 +10,6 @@
margin: (var(--size-2) / 2) 0 0;
li > ul {
list-style-type: disc;
-
}
}
}
@@ -18,7 +17,6 @@
list-style: disc;
ul {
list-style-type: disc;
-
li > ul {
list-style-type: disc;
}
@@ -28,7 +26,6 @@
list-style: square;
ul {
list-style-type: square;
-
li > ul {
list-style-type: square;
}
@@ -38,7 +35,6 @@
list-style-type: circle;
ul {
list-style-type: circle;
-
li > ul {
list-style-type: circle;
}
diff --git a/src/patterns/01-core/mixins/_button.scss b/src/patterns/01-core/mixins/_button.scss
index 9eea1db5377a46940186bbe306ed456c20f75751..6eb876833e304ad28b9912acab2d8ba09593b709 100644
--- a/src/patterns/01-core/mixins/_button.scss
+++ b/src/patterns/01-core/mixins/_button.scss
@@ -27,10 +27,10 @@ $button-font-size: var(--font-size-1) !default;
$font-size: $button-font-size
) {
background-color: $color-background;
- background-image:$button-background-image;
+ background-image: $button-background-image;
border: 0;
border-radius: $border-radius;
- box-shadow:none;
+ box-shadow: none;
color: $color-text;
cursor: pointer;
display: inline-block;
@@ -39,16 +39,16 @@ $button-font-size: var(--font-size-1) !default;
font-weight: var(--font-weight-300);
letter-spacing: var(--font-letterspacing-2);
line-height: var(--font-lineheight-4);
- max-width:18.125rem;
+ max-width: 18.125rem;
padding: var(--size-2) var(--size-4);
text-align: center;
text-decoration: none;
- text-shadow:$button-text-shadow;
- text-transform:uppercase;
+ text-shadow: $button-text-shadow;
+ text-transform: uppercase;
transition: background 200ms ease-in;
vertical-align: top;
white-space: normal;
- width:100%;
+ width: 100%;
&:visited {
color: $color-text;
}
@@ -56,25 +56,24 @@ $button-font-size: var(--font-size-1) !default;
&:hover,
&:focus {
background-color: $color-background-hover;
- background-image:$button-background-image;
+ background-image: $button-background-image;
border: 0;
box-shadow: none !important;
color: $color-text-hover;
outline: none !important;
text-decoration: none;
-
}
&:active {
background-color: $color-background-active;
- background-image:$button-background-image;
+ background-image: $button-background-image;
color: $color-text-active;
outline: none !important;
}
&[disabled] {
background-color: $color-background-disabled;
- background-image:$button-background-image;
+ background-image: $button-background-image;
color: $color-text-disabled;
cursor: default;
pointer-events: none;
@@ -95,15 +94,15 @@ $button-font-size: var(--font-size-1) !default;
$font-size: inherit
) {
background-color: $color-background;
- background-image:$button-background-image;
+ background-image: $button-background-image;
border: 0;
border-radius: $border-radius;
- box-shadow:none;
+ box-shadow: none;
color: $color-text;
cursor: pointer;
display: inherit;
font-family: inherit;
- font-size: $font-size;
+ font-size: $font-size;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
@@ -111,8 +110,8 @@ $button-font-size: var(--font-size-1) !default;
padding: 0;
text-align: inherit;
text-decoration: inherit;
- text-shadow:inherit;
- text-transform:inherit;
+ text-shadow: inherit;
+ text-transform: inherit;
transition: inherit;
vertical-align: inherit;
white-space: inherit;
@@ -124,25 +123,24 @@ $button-font-size: var(--font-size-1) !default;
&:hover,
&:focus {
background-color: $color-background-hover;
- background-image:$button-background-image;
+ background-image: $button-background-image;
border: 0;
box-shadow: none !important;
color: $color-text-hover;
outline: none !important;
text-decoration: none;
-
}
&:active {
background-color: $color-background-active;
- background-image:$button-background-image;
+ background-image: $button-background-image;
color: $color-text-active;
outline: none !important;
}
&[disabled] {
background-color: $color-background-disabled;
- background-image:$button-background-image;
+ background-image: $button-background-image;
color: $color-text-disabled;
cursor: default;
pointer-events: none;
diff --git a/src/patterns/01-core/mixins/_headings.scss b/src/patterns/01-core/mixins/_headings.scss
index 8f3a12bbe0b324beea66cf9b6c0262bcc88a153c..3f40be2bf82ac7e236dea6da3f837fef705a0709 100644
--- a/src/patterns/01-core/mixins/_headings.scss
+++ b/src/patterns/01-core/mixins/_headings.scss
@@ -13,7 +13,6 @@
orphans: 3;
page-break-after: avoid;
widows: 3;
-
&::after {
display: inline-block;
}
@@ -33,7 +32,7 @@
@mixin heading-1 {
@include heading-base;
line-height: var(--font-lineheight-1);
- font-size: var( --font-size-8);
+ font-size: var(--font-size-8);
}
@mixin heading-2 {
diff --git a/src/patterns/01-core/mixins/_link.scss b/src/patterns/01-core/mixins/_link.scss
index 6a83ac5768971fec8e358874170e98b466952067..ec347041b32f042f61f904f24d0f8d9502de7679 100644
--- a/src/patterns/01-core/mixins/_link.scss
+++ b/src/patterns/01-core/mixins/_link.scss
@@ -3,15 +3,14 @@
@mixin link($link, $hover: $link, $active: $hover, $visit: $link) {
color: $link;
- text-decoration:underline;
+ text-decoration: underline;
&:visited {
color: $visit;
}
&:hover,
&:focus {
color: $hover;
- text-decoration:none;
-
+ text-decoration: none;
}
&:active {
color: $active;
@@ -19,14 +18,14 @@
}
@mixin link-no-underline($link, $hover: $link, $active: $hover, $visit: $link) {
color: $link;
- text-decoration:none;
+ text-decoration: none;
&:visited {
color: $visit;
}
&:hover,
&:focus {
color: $hover;
- text-decoration:none;
+ text-decoration: none;
}
&:active {
color: $active;
@@ -35,14 +34,14 @@
@mixin link-reverse($link, $hover: $link, $active: $hover, $visit: $link) {
color: $link;
- text-decoration:none;
+ text-decoration: none;
&:visited {
color: $visit;
}
&:hover,
&:focus {
color: $hover;
- text-decoration:underline;
+ 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 ddd14d05fa331531b0913272ae4770d4e0ef5b31..32c6822b83f9ecf00b6636bba67cae7bf4d1fa87 100644
--- a/src/patterns/01-core/mixins/_svg-background.scss
+++ b/src/patterns/01-core/mixins/_svg-background.scss
@@ -3,14 +3,10 @@
@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;
}
@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/01-core/mixins/_uw-mixins.scss b/src/patterns/01-core/mixins/_uw-mixins.scss
index 14f979a60607c9de6028948a6f0f71710e3aa664..920a5b1ea9abde071c8f3c36e5607efab8262cd6 100644
--- a/src/patterns/01-core/mixins/_uw-mixins.scss
+++ b/src/patterns/01-core/mixins/_uw-mixins.scss
@@ -13,7 +13,6 @@ $test-color-12: var(--green-5);
@mixin uw-no-breakout {
overflow-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
word-wrap: break-word;
@@ -24,7 +23,6 @@ $test-color-12: var(--green-5);
margin-right: auto;
max-width: $value;
padding: 0 var(--size-2);
-
@media(min-width: 75rem) {
padding-left: 0;
padding-right: 0;
@@ -61,19 +59,18 @@ $test-color-12: var(--green-5);
max-width: inherit;
padding: inherit;
position: relative;
- right: inherit;
+ right: inherit;
width: inherit;
}
@mixin uw-contained-width-reset() {
- margin-left:inherit;
+ margin-left: inherit;
margin-right: inherit;
max-width: inherit;
padding: inherit;
-
@media(min-width: 75rem) {
- padding-left:inherit;
- padding-right:inherit;
+ padding-left: inherit;
+ padding-right: inherit;
}
}
@@ -91,20 +88,6 @@ $test-color-12: var(--green-5);
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
-
- // Set a variable to be used by box-flex properties
- $fg-boxflex: $fg;
-
- // Box-Flex only supports a flex-grow value so lets grab the
- // first item in the list and just return that.
- @if type-of($fg) == 'list' {
- $fg-boxflex: nth($fg, 1);
- }
-
- -webkit-box: $fg-boxflex;
- -moz-box: $fg-boxflex;
- -webkit-flex: $fg $fs $fb;
- -ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
@@ -112,30 +95,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// row (default) | row-reverse | column | column-reverse
@mixin flex-direction($direction: row) {
-
- @if $direction == row-reverse {
- -webkit-box-direction: reverse;
- -moz-box-direction: reverse;
- -webkit-box-orient: horizontal;
- -moz-box-orient: horizontal;
- } @else if $direction == column {
- -webkit-box-direction: normal;
- -moz-box-direction: normal;
- -webkit-box-orient: vertical;
- -moz-box-orient: vertical;
- } @else if $direction == column-reverse {
- -webkit-box-direction: reverse;
- -moz-box-direction: reverse;
- -webkit-box-orient: vertical;
- -moz-box-orient: vertical;
- } @else {
- -webkit-box-direction: normal;
- -moz-box-direction: normal;
- -webkit-box-orient: horizontal;
- -moz-box-orient: horizontal;
- }
- -ms-flex-direction: $direction;
- -webkit-flex-direction: $direction;
flex-direction: $direction;
}
@@ -143,14 +102,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
@mixin flex-wrap($value: nowrap) {
-
- // No Webkit/FF Box fallback.
- -webkit-flex-wrap: $value;
- @if $value == nowrap {
- -ms-flex-wrap: inherit;
- } @else {
- -ms-flex-wrap: $value;
- }
flex-wrap: $value;
}
@@ -158,10 +109,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($values: (row nowrap)) {
-
- // No Webkit/FF Box fallback.
- -webkit-flex-flow: $values;
- -ms-flex-flow: $values;
flex-flow: $values;
}
@@ -169,10 +116,6 @@ $test-color-12: var(--green-5);
// - applies to: flex items
// <integer>
@mixin order($int: 0) {
- -webkit-box-ordinal-group: $int + 1;
- -moz-box-ordinal-group: $int + 1;
- -ms-flex-order: $int;
- -webkit-order: $int;
order: $int;
}
@@ -180,10 +123,6 @@ $test-color-12: var(--green-5);
// - applies to: flex items
// <number>
@mixin flex-grow($int: 1) {
- -webkit-box-flex: $int;
- -moz-box-flex: $int;
- -ms-flex: $int;
- -webkit-flex-grow: $int;
flex-grow: $int;
}
@@ -191,9 +130,6 @@ $test-color-12: var(--green-5);
// - applies to: flex item shrink factor
// <number>
@mixin flex-shrink($int: 0) {
- -ms-flex: $int;
- -webkit-flex-shrink: $int;
- -moz-flex-shrink: $int;
flex-shrink: $int;
}
@@ -202,7 +138,6 @@ $test-color-12: var(--green-5);
// - applies to: flex itemsnitial main size of the flex item
// <width>
@mixin flex-basis($value: auto) {
- -webkit-flex-basis: $value;
flex-basis: $value;
}
@@ -210,28 +145,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
@mixin justify-content($value: flex-start) {
-
- @if $value == flex-start {
- -webkit-box-pack: start;
- -moz-box-pack: start;
- -ms-flex-pack: start;
- } @else if $value == flex-end {
- -webkit-box-pack: end;
- -moz-box-pack: end;
- -ms-flex-pack: end;
- } @else if $value == space-between {
- -webkit-box-pack: justify;
- -moz-box-pack: justify;
- -ms-flex-pack: justify;
- } @else if $value == space-around {
- -ms-flex-pack: distribute;
- } @else {
- -webkit-box-pack: $value;
- -moz-box-pack: $value;
- -ms-flex-pack: $value;
- }
-
- -webkit-justify-content: $value;
justify-content: $value;
}
@@ -239,17 +152,6 @@ $test-color-12: var(--green-5);
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($value: stretch) {
-
- // No Webkit Box Fallback.
- -webkit-align-content: $value;
-
- @if $value == flex-start {
- -ms-flex-line-pack: start;
- } @else if $value == flex-end {
- -ms-flex-line-pack: end;
- } @else {
- -ms-flex-line-pack: $value;
- }
align-content: $value;
}
@@ -257,22 +159,6 @@ $test-color-12: var(--green-5);
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
@mixin align-items($value: stretch) {
-
- @if $value == flex-start {
- -webkit-box-align: start;
- -moz-box-align: start;
- -ms-flex-align: start;
- } @else if $value == flex-end {
- -webkit-box-align: end;
- -moz-box-align: end;
- -ms-flex-align: end;
- } @else {
- -webkit-box-align: $value;
- -moz-box-align: $value;
- -ms-flex-align: $value;
- }
-
- -webkit-align-items: $value;
align-items: $value;
}
@@ -280,38 +166,30 @@ $test-color-12: var(--green-5);
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($value: auto) {
-
- // No Webkit Box Fallback.
- -webkit-align-self: $value;
-
- @if $value == flex-start {
- -ms-flex-item-align: start;
- } @else if $value == flex-end {
- -ms-flex-item-align: end;
- } @else {
- -ms-flex-item-align: $value;
- }
align-self: $value;
}
// Display of elements in gridded style.
@mixin uw-flex-grid($value: flexbox){
-
@if $value == inline-flex {
@include inline-flex();
@include flex-flow(row wrap);
gap: var(--grid-gap);
- }@else if $value == term{
+ }
+ @else if $value == term{
@include flexbox();
@include flex-wrap(wrap);
gap: var(--grid-gap);
- }@else if $value == card{
+ }
+ @else if $value == card{
@include flexbox();
@include flex-direction(column);
- }@else if $value == masonry{
+ }
+ @else if $value == masonry{
@include flexbox();
@include flex-flow(row wrap);
- }@else{
+ }
+ @else{
@include flexbox();
@include flex-flow(row wrap);
gap: var(--grid-gap);
@@ -323,12 +201,10 @@ $test-color-12: var(--green-5);
@include flex();
@include align-items(flex-start);
width: 100%;
-
@media(min-width: 48.06rem) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
-
.uw-contained-width--narrow &,
.layout--uw-inverted-l-right &,
.layout--uw-inverted-l-left &,
@@ -341,7 +217,6 @@ $test-color-12: var(--green-5);
@media(min-width: 63.1875rem) {
width: 30%;
-
.uw-contained-width--wide &{
width: 45% !important;
}
@@ -352,30 +227,9 @@ $test-color-12: var(--green-5);
@mixin uw-flex-term-item(){
align-self: flex-start;
width: 100%;
-
@media(min-width: 48.06rem) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
}
-
- @media(min-width: 63.1875rem) {
- //width: 30%;
- }
-}
-
-// Display of elements in list style.
-@mixin uw-flex-list(){
- //
-}
-// Display of list item.
-@mixin uw-flex-list-item(){
-}
-
-// Display of mosiac item.
-@mixin uw-flex-masonry-item(){
-}
-
-// Display of gallery item.
-@mixin uw-flex-gallery-item(){
}
diff --git a/src/patterns/01-core/props/_animations.scss b/src/patterns/01-core/props/_animations.scss
index 980d121d7a27c1183da155db1d1ccb23d8d6db73..db88d156e28063c231fe584defefafff6df34a75 100644
--- a/src/patterns/01-core/props/_animations.scss
+++ b/src/patterns/01-core/props/_animations.scss
@@ -1,18 +1,18 @@
:where(html) {
- --animation-fade-in: fade-in .5s var(--ease-3);
- --animation-fade-out: fade-out .5s var(--ease-3);
- --animation-scale-up: scale-up .5s var(--ease-3);
- --animation-scale-down: scale-down .5s var(--ease-3);
- --animation-slide-out-up: slide-out-up .5s var(--ease-3);
- --animation-slide-out-down: slide-out-down .5s var(--ease-3);
- --animation-slide-out-right: slide-out-right .5s var(--ease-3);
- --animation-slide-out-left: slide-out-left .5s var(--ease-3);
- --animation-slide-in-up: slide-in-up .5s var(--ease-3);
- --animation-slide-in-down: slide-in-down .5s var(--ease-3);
- --animation-slide-in-right: slide-in-right .5s var(--ease-3);
- --animation-slide-in-left: slide-in-left .5s var(--ease-3);
- --animation-shake-x: shake-x .75s var(--ease-out-5);
- --animation-shake-y: shake-y .75s var(--ease-out-5);
+ --animation-fade-in: fade-in 0.5s var(--ease-3);
+ --animation-fade-out: fade-out 0.5s var(--ease-3);
+ --animation-scale-up: scale-up 0.5s var(--ease-3);
+ --animation-scale-down: scale-down 0.5s var(--ease-3);
+ --animation-slide-out-up: slide-out-up 0.5s var(--ease-3);
+ --animation-slide-out-down: slide-out-down 0.5s var(--ease-3);
+ --animation-slide-out-right: slide-out-right 0.5s var(--ease-3);
+ --animation-slide-out-left: slide-out-left 0.5s var(--ease-3);
+ --animation-slide-in-up: slide-in-up 0.5s var(--ease-3);
+ --animation-slide-in-down: slide-in-down 0.5s var(--ease-3);
+ --animation-slide-in-right: slide-in-right 0.5s var(--ease-3);
+ --animation-slide-in-left: slide-in-left 0.5s var(--ease-3);
+ --animation-shake-x: shake-x 0.75s var(--ease-out-5);
+ --animation-shake-y: shake-y 0.75s var(--ease-out-5);
--animation-spin: spin 2s linear infinite;
--animation-ping: ping 5s var(--ease-out-3) infinite;
--animation-blink: blink 1s var(--ease-out-3) infinite;
@@ -22,99 +22,161 @@
}
@keyframes fade-in {
- to { opacity: 1 }
+ to {
+ opacity: 1;
+ }
}
@keyframes fade-out {
- to { opacity: 0 }
+ to {
+ opacity: 0;
+ }
}
@keyframes scale-up {
- to { transform: scale(1.25) }
+ to {
+ transform: scale(1.25);
+ }
}
@keyframes scale-down {
- to { transform: scale(.75) }
+ to {
+ transform: scale(0.75);
+ }
}
@keyframes slide-out-up {
- to { transform: translateY(-100%) }
+ to {
+ transform: translateY(-100%);
+ }
}
@keyframes slide-out-down {
- to { transform: translateY(100%) }
+ to {
+ transform: translateY(100%);
+ }
}
@keyframes slide-out-right {
- to { transform: translateX(100%) }
+ to {
+ transform: translateX(100%);
+ }
}
@keyframes slide-out-left {
- to { transform: translateX(-100%) }
+ to {
+ transform: translateX(-100%);
+ }
}
@keyframes slide-in-up {
- from { transform: translateY(100%) }
+ from {
+ transform: translateY(100%);
+ }
}
@keyframes slide-in-down {
- from { transform: translateY(-100%) }
+ from {
+ transform: translateY(-100%);
+ }
}
@keyframes slide-in-right {
- from { transform: translateX(-100%) }
+ from {
+ transform: translateX(-100%);
+ }
}
@keyframes slide-in-left {
- from { transform: translateX(100%) }
+ from {
+ transform: translateX(100%);
+ }
}
@keyframes shake-x {
- 0%, 100% { transform: translateX(0%) }
- 20% { transform: translateX(-5%) }
- 40% { transform: translateX(5%) }
- 60% { transform: translateX(-5%) }
- 80% { transform: translateX(5%) }
+ 0%,
+ 100% {
+ transform: translateX(0%);
+ }
+ 20% {
+ transform: translateX(-5%);
+ }
+ 40% {
+ transform: translateX(5%);
+ }
+ 60% {
+ transform: translateX(-5%);
+ }
+ 80% {
+ transform: translateX(5%);
+ }
}
@keyframes shake-y {
- 0%, 100% { transform: translateY(0%) }
- 20% { transform: translateY(-5%) }
- 40% { transform: translateY(5%) }
- 60% { transform: translateY(-5%) }
- 80% { transform: translateY(5%) }
+ 0%,
+ 100% {
+ transform: translateY(0%);
+ }
+ 20% {
+ transform: translateY(-5%);
+ }
+ 40% {
+ transform: translateY(5%);
+ }
+ 60% {
+ transform: translateY(-5%);
+ }
+ 80% {
+ transform: translateY(5%);
+ }
}
@keyframes spin {
- to { transform: rotate(1turn) }
+ to {
+ transform: rotate(1turn);
+ }
}
@keyframes ping {
- 90%, 100% {
+ 90%,
+ 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes blink {
- 0%, 100% {
- opacity: 1
+ 0%,
+ 100% {
+ opacity: 1;
}
50% {
- opacity: .5
+ opacity: 0.5;
}
}
@keyframes float {
- 50% { transform: translateY(-25%) }
+ 50% {
+ transform: translateY(-25%);
+ }
}
@keyframes bounce {
- 25% { transform: translateY(-20%) }
- 40% { transform: translateY(-3%) }
- 0%, 60%, 100% { transform: translateY(0) }
+ 25% {
+ transform: translateY(-20%);
+ }
+ 40% {
+ transform: translateY(-3%);
+ }
+ 0%,
+ 60%,
+ 100% {
+ transform: translateY(0);
+ }
}
@keyframes pulse {
- 50% { transform: scale(.9,.9) }
+ 50% {
+ transform: scale(0.9, 0.9);
+ }
}
diff --git a/src/patterns/01-core/props/_aspects.scss b/src/patterns/01-core/props/_aspects.scss
index a7422c90d3c00774a3c2eeb6aaeb1682550a8e05..aec2010e9347a715d62b373e8f9a75f81ee67ea9 100644
--- a/src/patterns/01-core/props/_aspects.scss
+++ b/src/patterns/01-core/props/_aspects.scss
@@ -4,5 +4,5 @@
--ratio-portrait: 3/4;
--ratio-widescreen: 16/9;
--ratio-ultrawide: 18/5;
- --ratio-golden: 1.6180/1;
+ --ratio-golden: 1.618/1;
}
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index af9c8be2093d0a9e4eef614c5f06272501bfe3e0..2004d8b63bbdc30bea2f9c210e55a0e18df00f0b 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -10,13 +10,13 @@
--cgc-3: #b71233;
--cgc-4: #80001f;
--cgc-red: #c4262e;
- --cgc-light: #E8878C;
+ --cgc-light: #e8878c;
--cgc-primary: #c4262e;
--gray-0: #ffffff;
--gray-1: #fafafa;
--gray-2: #eee;
--gray-3: #ccc;
- --gray-4: #A2A2A2;
+ --gray-4: #a2a2a2;
--gray-5: #757575;
--gray-6: #4e4e4e;
--gray-7: #333;
@@ -63,24 +63,25 @@
--stj-4: #80001f;
--stj-gold: #c88a11;
--stj-green: #01573e;
- --stj-light: #92B7AC;
+ --stj-light: #92b7ac;
--stj-primary: #01573e;
--stp-1: #ffa5aa;
--stp-2: #e41740;
--stp-3: #b71233;
--stp-4: #80001f;
- --stp-brown: #c88a11;
- --stp-green: #01573e;
- --stp-light: #92B7AC;
- --stp-primary: #01573e;
+ --stp-brown: #584528;
+ --stp-green: #879637;
+ --stp-light: #c2cd79;
+ --stp-primary: #879637;
--ren-1: #ffa5aa;
--ren-2: #e41740;
--ren-3: #b71233;
--ren-4: #80001f;
- --ren-gold: #c88a11;
- --ren-green: #01573e;
- --ren-light: #92B7AC;
- --ren-primary: #01573e;
+ --ren-red: #de3831;
+ --ren-gold: #d2c295;
+ --ren-green: #00693c;
+ --ren-light: #7fb49d;
+ --ren-primary: #00693c;
--uw-black: #000;
--uw-black-1: #dfdfdf;
--uw-black-2: #a2a2a2;
@@ -236,7 +237,7 @@ $faculties_colours: (
//Swatches
.pl-colors .color-demo > div > div{
- background-color: rgba(0,0,0,0.6);
+ background-color: rgba(0, 0, 0, 0.6);
font-family: var(--font-systembold);
font-size: var(--font-size-000);
}
diff --git a/src/patterns/01-core/props/_easing.scss b/src/patterns/01-core/props/_easing.scss
index b855d8e8a2c556aa40840c83d4a9febab23e491b..9568d0afc4fec6b532786e8dcf62061aaede2e6d 100644
--- a/src/patterns/01-core/props/_easing.scss
+++ b/src/patterns/01-core/props/_easing.scss
@@ -1,34 +1,34 @@
:where(html) {
- --ease-1: cubic-bezier(.25, 0, .5, 1);
- --ease-2: cubic-bezier(.25, 0, .4, 1);
- --ease-3: cubic-bezier(.25, 0, .3, 1);
- --ease-4: cubic-bezier(.25, 0, .2, 1);
- --ease-5: cubic-bezier(.25, 0, .1, 1);
- --ease-in-1: cubic-bezier(.25, 0, 1, 1);
- --ease-in-2: cubic-bezier(.50, 0, 1, 1);
- --ease-in-3: cubic-bezier(.70, 0, 1, 1);
- --ease-in-4: cubic-bezier(.90, 0, 1, 1);
+ --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
+ --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
+ --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+ --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
+ --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
+ --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
+ --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
+ --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
+ --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
--ease-in-5: cubic-bezier(1, 0, 1, 1);
- --ease-out-1: cubic-bezier(0, 0, .75, 1);
- --ease-out-2: cubic-bezier(0, 0, .50, 1);
- --ease-out-3: cubic-bezier(0, 0, .3, 1);
- --ease-out-4: cubic-bezier(0, 0, .1, 1);
+ --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
+ --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
+ --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
+ --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
--ease-out-5: cubic-bezier(0, 0, 0, 1);
- --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
- --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
- --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
- --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
- --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
- --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);
- --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
- --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
- --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
- --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);
- --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);
- --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);
- --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);
- --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);
- --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);
+ --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
+ --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
+ --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
+ --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
+ --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
+ --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
+ --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
+ --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
+ --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+ --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
+ --ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
+ --ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
+ --ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
+ --ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
+ --ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
--ease-step-1: steps(2);
--ease-step-2: steps(3);
--ease-step-3: steps(4);
diff --git a/src/patterns/01-core/props/_fonts.scss b/src/patterns/01-core/props/_fonts.scss
index edcbdac949d5b5d3f128995854d12e300d97ab0c..2c2eb2dfe82f51782c65320e36b6080ca9906b45 100644
--- a/src/patterns/01-core/props/_fonts.scss
+++ b/src/patterns/01-core/props/_fonts.scss
@@ -1,16 +1,28 @@
:where(html) {
- --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;
+ /* stylelint-disable-next-line value-keyword-case */
+ --font-book: 'BureauGrot Book', 'Barlow', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
+ --font-condensed: 'BureauGrotCond', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
--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;
+ /* stylelint-disable-next-line value-keyword-case */
+ --font-sans: BureauGrot, Barlow, impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
+ --font-serif: georgia, 'droid serif', 'Times New Roma', Times, serif;
+ /* stylelint-disable-next-line value-keyword-case */
+ --font-system: Typ1451-Regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
+ --font-systemlight: Typ1451-Light, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
+ --font-systemmedium: Typ1451-Medium, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
+ --font-systembold: Typ1451-Bold, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
--font-mono: Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
--font-primary: georgia, 'droid serif', 'Times New Roma', Times, serif;
- --font-secondary: BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ /* stylelint-disable-next-line value-keyword-case */
+ --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;
@@ -21,7 +33,7 @@
--font-weight-800: 800;
--font-weight-900: 900;
--font-size-0000000: 7.888px;
- --font-size-000000: 8.88px;
+ --font-size-000000: 8.88px;
--font-size-00000: 9.984px;
--font-size-0000: 11.232px;
--font-size-000: 12.64px;
@@ -42,8 +54,8 @@
--font-size-13: 73.984px;
--font-size-14: 83.232px;
--font-size-15: 93.632px;
- --font-size-16: 105.328px;
- --font-lineheight-00: .95;
+ --font-size-16: 105.328px;
+ --font-lineheight-00: 0.95;
--font-lineheight-1: 1.1;
--font-lineheight-2: 1.25;
--font-lineheight-3: 1.375;
@@ -52,10 +64,10 @@
--font-lineheight-6: 2;
--font-letterspacing-0: -0.05em;
--font-letterspacing-1: 0.025em;
- --font-letterspacing-2: 0.050em;
+ --font-letterspacing-2: 0.05em;
--font-letterspacing-3: 0.75em;
- --font-letterspacing-4: 0.150em;
- --font-letterspacing-5: 0.500em;
- --font-letterspacing-6: 0.750em;
+ --font-letterspacing-4: 0.15em;
+ --font-letterspacing-5: 0.5em;
+ --font-letterspacing-6: 0.75em;
--font-letterspacing-7: 1em;
}
diff --git a/src/patterns/01-core/props/_sizes.scss b/src/patterns/01-core/props/_sizes.scss
index d9b1708739baf91c7052f4b0b59be74e1c5980ff..5c3e654a1bc4af274de692107ad06a272ce6ec8e 100644
--- a/src/patterns/01-core/props/_sizes.scss
+++ b/src/patterns/01-core/props/_sizes.scss
@@ -21,7 +21,7 @@
--size-15: 7.5rem; // 120px
--size-16: 8rem; // 128px
--size-20: 10rem; // 160px
- --size-fluid-1: clamp(.5rem, 1vw, 1rem);
+ --size-fluid-1: clamp(0.5rem, 1vw, 1rem);
--size-fluid-2: clamp(1rem, 2vw, 1.5rem);
--size-fluid-3: clamp(1.5rem, 3vw, 2rem);
--size-fluid-4: clamp(2rem, 4vw, 3rem);
diff --git a/src/patterns/01-core/utilities/_pl-override.scss b/src/patterns/01-core/utilities/_pl-override.scss
index 2ccf6bf81b956e76ba53746ba7b1c4e37d35decc..305f43e2409773e9408128cf2695ef9b7a55c246 100644
--- a/src/patterns/01-core/utilities/_pl-override.scss
+++ b/src/patterns/01-core/utilities/_pl-override.scss
@@ -2,16 +2,16 @@
.pl-c-pattern__extra-toggle,
.pl-js-pattern-extra-toggle{
- border: var(--size-xs) solid var(--gray-4) !important;
- border-size: var(--size-xs) var(--size-xs) 0 var(--size-xs);
- box-shadow: none !important;
- font-size:inherit !important;
- &:hover{
- border: var(--size-xs) solid var(--gray-6) !important;
- }
+ border: var(--size-xs) solid var(--gray-4) !important;
+ border-width: var(--size-xs) var(--size-xs) 0 var(--size-xs);
+ box-shadow: none !important;
+ font-size: inherit !important;
+ &:hover{
+ border: var(--size-xs) solid var(--gray-6) !important;
+ }
}
.pl-c-code-copy-btn,
.pl-js-code-copy-btn{
- width:inherit;
- max-width: 4rem;
+ width: inherit;
+ max-width: var(--size-8);
}