Skip to content
Snippets Groups Projects
Commit ef7c5a60 authored by Martin Leblanc's avatar Martin Leblanc
Browse files

ISTWCMS-5655:continue rebasing 1.0.x into the views branch

parent 9ffce2e7
No related branches found
No related tags found
1 merge request!22STWCMS-5655:migrating the views
Hide whitespace changes
Inline Side-by-side
src/patterns/01-core/elements/_details.scss
+ 79
− 72
View file @ ef7c5a60
......@@ -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 {
......
src/patterns/01-core/elements/_form.scss
+ 97
− 98
View file @ ef7c5a60
......@@ -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);
}
}
}
src/patterns/01-core/elements/_input.scss
+ 7
− 3
View file @ ef7c5a60
......@@ -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
......
src/patterns/01-core/elements/_option.scss
+ 10
− 0
View file @ ef7c5a60
......@@ -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;
}
src/patterns/04-components/form-item/form-item.scss
+ 18
− 14
View file @ ef7c5a60
......@@ -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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment