From ef7c5a608a7728ad760229cc1f7781c804040d5a Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 26 Jul 2022 09:18:16 -0400
Subject: [PATCH] ISTWCMS-5655:continue rebasing 1.0.x into the views branch
---
src/patterns/01-core/elements/_details.scss | 151 +++++++-------
src/patterns/01-core/elements/_form.scss | 195 +++++++++---------
src/patterns/01-core/elements/_input.scss | 10 +-
src/patterns/01-core/elements/_option.scss | 10 +
.../04-components/form-item/form-item.scss | 32 +--
5 files changed, 211 insertions(+), 187 deletions(-)
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index 665fde06..a79a68a6 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -4,80 +4,85 @@
@use '../../01-core' as *;
:where(details) {
- @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-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%;
- &[open] > .seven-details__summary {
+ &.uw-details,
+ &.seven-details{
+ @include uw-no-breakout();
+ background: var(--gray-1);
+ 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);
- }
- [open] > & {
- @include svg-background(mobile-arrow-up);
- width: 100%;
- }
-
- &[open] > summary {
- color: var(--uw-black-primary);
- }
- &:hover {
- box-shadow: var(--shadow-3);
- }
- &:focus-within {
- box-shadow: var(--shadow-3);
- }
- &:first-child{
- margin-top: 0;
- }
- p:last-child {
- margin-bottom: 0;
- }
- // Fallback for browsers that don’t support details.
- /* stylelint-disable-next-line selector-no-qualifying-type */
- .js &:not([open]) > .details__content {
- display: none;
+ font-family: var(--font-book);
+ margin: var(--size-3) 0;
+ transition: box-shadow 300ms ease;
+ width:100%;
+ &[open] > .seven-details__summary {
+ color: var(--uw-black-primary);
+ }
+ [open] > & {
+ @include svg-background(mobile-arrow-up);
+ width:100%;
+ }
+ &[open] > summary {
+ color: var(--uw-black-primary);
+ }
+ &:hover {
+ box-shadow: var(--shadow-3);
+ }
+ &:focus-within {
+ box-shadow: var(--shadow-3);
+ }
+ &:first-child{
+ margin-top: 0;
+ }
+ p:last-child {
+ margin-bottom: 0;
+ }
+ // Fallback for browsers that don’t support details.
+ /* stylelint-disable-next-line selector-no-qualifying-type */
+ .js &:not([open]) > .details__content {
+ display: none;
+ }
}
}
:where(summary) {
- @include uw-no-breakout();
- @include svg-background(mobile-arrow-down);
- background-color: var(--gray-2);
- background-position: right var(--size-2) center; // LTR
- background-repeat: no-repeat;
- background-size: 13px;
- border-radius: var(--radius-1);
- color: var(--uw-black-primary);
- cursor: pointer;
- display: block;
- font-family: var(--font-book);
- font-size: var(--font-size-00);
- font-weight: var(--font-weight-3300);
- margin: 0;
- line-height: 1.25;
- outline: 0;
- padding: var(--size-2);
- transition: box-shadow 300ms ease;
- touch-action: manipulation;
- [open] > & {
- @include svg-background(mobile-arrow-up);
- width: 100%;
- }
- &:hover,
- &:focus{
+ &.seven-details__summary,
+ &.details__summary {
+ @include uw-no-breakout();
+ @include svg-background(mobile-arrow-down);
+ background-color: var(--gray-2);
+ background-position: right var(--size-2) center; // LTR
+ background-repeat: no-repeat;
+ background-size: 13px;
+ border-radius: var(--radius-1);
color: var(--uw-black-primary);
- }
- &:first-child{
- margin-top: 0;
- }
- &::-webkit-details-marker {
- display: none;
+ cursor: pointer;
+ display:block;
+ font-family: var(--font-book);
+ font-size: var(--font-size-00);
+ font-weight: var(--font-weight-3300);
+ margin: 0;
+ line-height: 1.25;
+ outline: 0;
+ padding: var(--size-2);
+ transition: box-shadow 300ms ease;
+ touch-action: manipulation;
+ [open] > & {
+ @include svg-background(mobile-arrow-up);
+ width:100%;
+ }
+ &:hover,
+ &:focus{
+ color:var(--uw-black-primary);
+ }
+ &:first-child{
+ margin-top: 0;
+ }
+ &::-webkit-details-marker {
+ display: none;
+ }
}
}
@@ -89,7 +94,7 @@
}
.details__content {
@include uw-no-breakout();
- background: var(--uw-white-primary);
+ background: var(--uw-white);
border: var(--size-xs) solid var(--gray-2);
border-top: 0;
padding: var(--size-2);
@@ -97,14 +102,16 @@
> :last-child {
margin-bottom: 0;
}
- .uw-label{
- margin-bottom: 0;
+ .uw-label,
+ label{
+ margin-bottom:0;
margin-top: var(--size-2);
}
}
.details__description,
.seven-details__description{
- color: var(--uw-black-primary);
+ color: var(--uw-black);
+ font-family: var(--font-book);
font-size: var(--font-size-00);
margin-bottom: var(--size-2);
> :last-child {
diff --git a/src/patterns/01-core/elements/_form.scss b/src/patterns/01-core/elements/_form.scss
index 115a27f9..8855d479 100644
--- a/src/patterns/01-core/elements/_form.scss
+++ b/src/patterns/01-core/elements/_form.scss
@@ -59,101 +59,100 @@ button {
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;
-// }
-// }
-//}
+//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: var(--gray-1);
+ border-top: var(--size-xs) solid var(--gray-4);
+ bottom: 0;
+ display: flex;
+ height: auto;
+ left: 0;
+ margin: 0;
+ padding: var(--size-1);
+ position: fixed;
+ width: 100%;
+ z-index: var(--layer-overlay);
+ [data-drupal-selector="edit-preview-toggle"]{
+ order: 10;
+ }
+ .button{
+ margin: var(--size-05) 0;
+ max-width: 7rem;
+ }
+ @media(min-width: $screen-md) {
+ .button{
+ margin-bottom: var(--size-2);
+ }
+ gap: var(--size-2);
+ height: var(--size-8);
+ }
+
+ .form-item-toggle-content-preview {
+ margin-top: var(--size-2);
+ }
+ input [type='submit']{
+ margin-top: 0;
+ }
+
+ .form-wrapper input[type="submit"] {
+ margin-top: 0;
+ }
+ }
+ }
+
+ .webform-submission-form{
+ .form-actions{
+ display: flex;
+ gap: var(--size-2);
+ margin: var(--size-05) 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;
+ }
+ @media(min-width: $screen-md) {
+ grid-template-columns: 8rem 8rem 8rem 8rem;
+ grid-template-rows:auto;
+ row-gap: var(--size-2);
+ }
+ }
+ // 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;
+ }
+ @media(min-width: $screen-md) {
+ grid-template-columns: 8rem 8rem;
+ grid-template-rows:auto;
+ row-gap: var(--size-2);
+ }
+ }
+ // custom form actions
+ .entity-view-display-layout-builder-form .form-actions{
+ .button[data-drupal-selector="edit-cancel"]{
+ margin-left:0 !important;
+ }
+ @media(min-width: $screen-md) {
+ grid-template-columns: 8rem 8rem 15rem;
+ grid-template-rows: auto;
+ row-gap: var(--size-2);
+ }
+ }
+}
diff --git a/src/patterns/01-core/elements/_input.scss b/src/patterns/01-core/elements/_input.scss
index d302683b..78f2b254 100644
--- a/src/patterns/01-core/elements/_input.scss
+++ b/src/patterns/01-core/elements/_input.scss
@@ -27,9 +27,13 @@ $uw-input-padding: 0.46667rem;
}
// Checkbox, Options input
-:where(input[type="checkbox"], input[type="radio"]) {
- block-size: var(--size-3);
- inline-size: var(--size-3);
+:where(input[type="checkbox"],
+input[type="radio"]) {
+ //block-size: var(--size-3);
+ //inline-size: var(--size-3);
+ &:checked{
+ background-color: red;
+ }
}
// file input
diff --git a/src/patterns/01-core/elements/_option.scss b/src/patterns/01-core/elements/_option.scss
index 773abdbc..1e08504b 100644
--- a/src/patterns/01-core/elements/_option.scss
+++ b/src/patterns/01-core/elements/_option.scss
@@ -18,3 +18,13 @@
line-height: var(--line-xs);
margin: 0;
}
+
+.option {
+ display: inline;
+ font-family: var(--font-book);
+ font-size: var(--font-size-0);
+ font-weight: normal;
+ letter-spacing:inherit;
+ margin-left: 0.2rem;
+ padding-left: 0.25rem;
+}
diff --git a/src/patterns/04-components/form-item/form-item.scss b/src/patterns/04-components/form-item/form-item.scss
index 35910576..1fdad59a 100644
--- a/src/patterns/04-components/form-item/form-item.scss
+++ b/src/patterns/04-components/form-item/form-item.scss
@@ -4,11 +4,14 @@
@use '../../01-core' as *;
.form-item {
- margin: 0 0 var(--size-3);
+ margin: 0 0 var(--size-2);
+ .form--inline .form-checkboxes &{
+ margin:inherit;
+ }
}
.form-item__label {
- display: inline-block;
+ display: block;
//font-family: var(--font-system);
//font-size: var(--font-size-2);
//margin-bottom: var(--size-1);
@@ -27,8 +30,8 @@
.form-item__description {
color: var(--gray-6);
font-family: var(--font-system);
- font-size: var(--font-size-0);
- margin-top: var(--size-1);
+ font-size: var(--font-size-00);
+ //margin-top: var(--size-1);
> :last-child {
margin-bottom: 0;
@@ -40,6 +43,7 @@
content: '*';
}
+.form-item__box,
.form-item__color,
.form-item__date,
.form-item__email,
@@ -54,16 +58,16 @@
.form-item__time,
.form-item__url,
.form-item__week {
- appearance: none;
- border-color: var(--gray-3);
- border-style: solid;
- border-width: var(--border-size-1);
- display: block;
- font-family: var(--font-system);
- font-size: var(--font-size-1);
- max-width: 100%;
- padding: var(--size-1) var(--size-2);
- transition: background-color 200ms ease-in-out, border 200ms ease-in-out;
+ //appearance: none;
+ //border-color: var(--gray-3);
+ //border-style: solid;
+ //border-width: var(--border-size-1);
+ //display: block;
+ //font-family: var(--font-system);
+ //font-size: var(--font-size-1);
+ //max-width: 100%;
+ //padding: var(--size-1) var(--size-2);
+ //transition: background-color 200ms ease-in-out, border 200ms ease-in-out;
&:hover {
background-color: white;
--
GitLab