Skip to content
Snippets Groups Projects
Commit 5fe79ff3 authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

ISTWCMS-5898: Adding the bottom lines when narrow and adjusting spacing in...

ISTWCMS-5898: Adding the bottom lines when narrow and  adjusting spacing in cards: event news blog and web page
parent 7f377d34
Branches
Tags
1 merge request!70ISTWCMS-5898: section-spacing-seperator and column-seperator css
Showing
with 719 additions and 69 deletions
......@@ -34,6 +34,9 @@
@include heading-base;
line-height: var(--font-lineheight-1);
font-size: var(--font-size-8);
&.card__title{
margin: 0;
}
}
@mixin heading-2 {
......
......@@ -22,11 +22,6 @@ $test-color-12: var(--green-5);
margin-left: auto;
margin-right: auto;
max-width: $value;
padding: 0 var(--size-2);
@media(min-width: 75rem) {
padding-left: 0;
padding-right: 0;
}
}
@mixin uw-full-width {
......
......@@ -5,6 +5,12 @@
.block {
margin-bottom: var(--grid-gap);
.in-layout-builder &{
outline: var(--size-xs) dashed var(--gray-4) !important;
}
&:last-of-type {
margin: 0;
}
.path-dashboard &,
&.block-page-title-block,
&.block-local-tasks-block {
......
......@@ -18,6 +18,9 @@
@media(min-width: $screen-md) {
grid-template-columns: 25% auto 17rem;
}
@media(min-width: $screen-xl) {
padding: var(--size-2) 0;
}
}
&__address {
font-family: var(--font-systemmedium);
......
......@@ -26,6 +26,9 @@ $site-name-bg: var(--gray-2);
min-height: inherit;
padding: var(--size-2);
}
@media(min-width: $screen-xl) {
padding: var(--size-2) 0;
}
.uw-site-logo {
align-self: flex-start;
flex: 1;
......
......@@ -6,15 +6,18 @@
@use '../../03-layouts/layout/layout--5-col/layout--5-col' as *;
@use '../../03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left' as *;
@use '../../03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right' as *;
.layout__region {
.layout-builder &{
outline: var(--size-sm) dashed var(--blue-6);
:root{
--layout-border-color: transparent;
--layout-border-style: solid;
--layout-border-width: var(--size-xs);
--layout-border-radius: 0;
--layout-border-shadow: var(--shadow-1);
--layout-show-border-color: var(--gray-3);
}
.layout__region {
.pl & {
outline: var(--size-sm) dashed var(--blue-6);
outline: var(--size-xs) dashed var(--blue-6);
padding: var(--size-3);
text-align: center;
.pl-labels{
......
@use '../../01-core' as *;
.layout {
@include uw-contained-width;
.uw-node__with-media .card__node & {
padding: var(--size-2);
@media(min-width: $screen-xl) {
padding: var(--size-2) 0;
:root {
/* establish a default for calculations */
--base-section-margin: var(--grid-gap);
/* use that default as the default spacing */
--section-margin: var(--base-section-margin);
--layout-max-width-narrow: calc(100vw - 2rem);
}
.uw-section-spacing {
&--75 {
--section-margin: calc(var(--base-section-margin) * 0.75);
&.layout{
margin-bottom: var(--section-margin);
&.card__media {
margin-bottom: 0 !important;
}
}
}
&--50 {
--section-margin: calc(var(--base-section-margin) * 0.5);
&.layout {
margin-bottom: var(--section-margin);
}
}
&--25 {
--section-margin: calc(var(--base-section-margin) * 0.25);
&.layout {
margin-bottom: var(--section-margin);
}
}
&--none {
--section-margin: 0;
&.layout {
margin-bottom: var(--section-margin);
}
}
&--default {
--section-margin: var(--base-section-margin);
&.layout{
margin-bottom: var(--section-margin);
}
}
&.layout {
&.card__media {
padding: 0 var(--size-2);
margin-bottom: 0 !important;
}
}
}
// Section seperators.
.uw-section-separator {
&--none {
//--layout-border-width: 0;
//border-color: var(--layout-border-color);
//border-style: var(--layout-border-style);
//border-bottom-width: var(--layout-border-width);
}
&--bottom {
--layout-border-width: var(--size-xs);
position: relative;
&::before {
bottom: 0;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
height: var(--layout-border-width);
left: 0;
width: 100%;
}
&.uw-column-separator--none{
&::before {
bottom: -1rem;
}
}
&:last-of-type {
&::before {
bottom: 0;
}
}
}
&--narrow {
--layout-border-width: var(--size-xs);
position: relative;
&::before {
bottom: -1rem;
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
height: var(--layout-border-width);
left: 0;
width: 100%;
@media(min-width: $screen-md) {
display: none;
}
}
&.uw-column-separator--narrow {
&::before {
bottom: 0 !important;
}
}
&:last-of-type{
&::before {
bottom: 0;
}
}
}
}
&.uw-contained-width {
@include uw-contained-width;
padding: var(--size-2);
.layout {
--layout-border-width: var(--size-xs);
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
padding: var(--size-2) 0;
@include uw-contained-width(var(--layout-max-width));
}
&.card__media {
padding: 0 var(--size-2);
......@@ -24,6 +117,15 @@
padding: 0;
}
}
&.uw-contained-width {
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
// Reset the width so we use all the width when we have room to.
@include uw-contained-width(var(--layout-max-width));
}
&.card__media {
max-width: var(--layout-max-width);
}
&--narrow {
/* Match the width of WCMS2's narrow: 496px */
max-width: 31rem;
......@@ -34,7 +136,6 @@
max-width: 47.0625rem;
}
}
&.uw-full-width {
@include uw-full-width-padding;
overflow: hidden;
......@@ -60,9 +161,8 @@
}
.layout-builder__region {
padding: var(--size-2);
padding: var(--size-1) 0 0;
}
&.layout--uw-1-col{
.block-inline-blockuw-cbl-banner-images,
.block-inline-blockuw-cbl-image,
......@@ -85,7 +185,6 @@
@include uw-full-width-reset;
}
}
.block-inline-blockuw-cbl-google-maps{
@include uw-contained-width;
......@@ -108,10 +207,18 @@
}
}
}
&.layout--uw-inverted-l-right,
&.layout--uw-inverted-l-left {
//@include uw-full-width-padding;
//overflow: hidden;
}
&.card__media{
padding: 0;
}
}
// When wrapped with class to identify sidebar
.uw-node__with-sidebar & {
margin: inherit;
......@@ -140,8 +247,429 @@
}
}
}
// Column separator css.
&--uw-2-col {
&.uw-column-separator{
&--between {
.layout__region {
position: relative;
&--first {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
}
@media(min-width: $screen-md) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: var(--layout-border-width);
height: 100%;
bottom: 0;
left: inherit;
right: -1rem;
}
}
}
}
}
&--narrow{
.layout__region {
position: relative;
&--first {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: 0;
left: 0;
}
@media(min-width: $screen-md) {
&::before {
display: none;
}
}
}
}
}
}
}
&--uw-3-col {
&.uw-column-separator{
&--between {
.layout__region {
position: relative;
&--first {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: 0;
left: 0;
}
@media(min-width: $screen-md) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: var(--layout-border-width);
height: 100%;
bottom: 0;
left: inherit;
right: -1rem;
}
}
}
&--second{
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
content: '';
height: var(--layout-border-width);
left: 0;
position: absolute;
width: 100%;
}
@media(min-width: $screen-md) {
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
content: '';
height: 100%;
left: inherit;
position: absolute;
right: -1rem;
width: var(--layout-border-width);
}
}
}
&--third{
//
}
}
}
&--narrow{
.layout__region {
position: relative;
&--first {
&::before {
background-color: var(--layout-show-border-color);
bottom: -1rem;
content: '';
height: var(--layout-border-width);
left: 0;
position: absolute;
width: 100%;
}
@media(min-width: $screen-md) {
&::before {
display: none;
}
}
}
&--second{
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
}
@media(min-width: $screen-md) {
&::before {
display: none;
}
}
}
}
}
}
}
&--uw-4-col {
&.uw-column-separator{
&--between {
.layout__region {
position: relative;
&--first {
&::after {
bottom: 0;
@media(min-width: $screen-sm){
bottom: -1rem;
}
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
left: 0;
right: inherit;
}
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
content: '';
height: 100%;
left: inherit;
position: absolute;
right: -1rem;
width: var(--size-xs);
}
@media(min-width: $screen-lg) {
&::after {
display: none;
}
}
}
&--second{
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
@media(min-width: $screen-sm){
bottom: -1rem;
}
content: '';
height: var(--layout-border-width);
left: 0;
position: absolute;
width: 100%;
}
@media(min-width: $screen-lg) {
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
content: '';
height: 100%;
left: inherit;
position: absolute;
right: -1rem;
width: var(--size-xs);
}
}
}
&--third {
&::before {
bottom: 0;
@media(min-width: $screen-sm){
bottom: -1rem;
}
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
left: 0;
}
@media(min-width: $screen-sm) {
&::before {
background-color: var(--layout-show-border-color);
bottom: 0;
content: '';
position: absolute;
height: 100%;
left: inherit;
right: -1rem;
width: var(--size-xs);
}
}
}
}
}
&--narrow{
//
}
}
}
&--uw-inverted-l-right {
&.uw-column-separator{
&--between {
.layout__region {
position: relative;
&--first {
&::after {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
right: inherit;
}
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
left: inherit;
right: -1rem;
}
@media(min-width: $screen-lg) {
&::after {
display: none;
}
}
}
&--second{
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
}
@media(min-width: $screen-lg) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
left: inherit;
right: -1rem;
}
}
}
&--third {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
}
@media(min-width: $screen-sm) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
left: inherit;
right: -1rem;
}
}
}
}
}
}
}
&--uw-inverted-l-left {
&.uw-column-separator{
&--between {
.layout__region {
position: relative;
&--first {
&::after {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
right: inherit;
}
@media(min-width: $screen-lg) {
&::after {
display: none;
}
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
left: inherit;
right: -1rem;
}
}
}
&--second{
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
}
@media(min-width: $screen-lg) {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: var(--size-xs);
height: 100%;
bottom: 0;
left: inherit;
right: -1rem;
}
}
}
&--third {
&::before {
content: '';
position: absolute;
background-color: var(--layout-show-border-color);
width: 100%;
height: var(--layout-border-width);
bottom: -1rem;
left: 0;
}
@media(min-width: $screen-lg) {
&::before {
display: none;
}
}
}
}
}
&--narrow{
//
}
}
}
}
.uw-section-has-full-width .layout.layout--uw-1-col{
overflow: hidden;
}
.uw-full-width.uw-section-spacing--none.uw-section-separator--bottom:has(img){
padding-bottom: 0;
}
.uw-full-width.uw-section-spacing--none + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--bottom + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--bottom.uw-column-separator--between + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--bottom.uw-column-separator--narrow + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--between + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrrow + .uw-column-separator--between {
.layout__region {
padding-top: var(--size-2);
}
}
.layout--uw-1-col {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
display: block;
}
.layout--uw-1-col .layout__region--first {
grid-column: 1 / 2;
}
......@@ -3,8 +3,6 @@
.layout--uw-2-col {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
&.larger-left {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 2fr) 1fr;
......
......@@ -3,7 +3,6 @@
.layout--uw-3-col {
display: grid;
gap: var(--grid-gap);
&.even-split {
grid-template-columns: 100%;
......
......@@ -3,8 +3,6 @@
.layout--uw-4-col {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
&.even-split {
@media(min-width: $screen-sm) {
......
......@@ -94,4 +94,86 @@
}
}
}
// @todo
//&.uw-column-separator {
// &--between {
// --layout-border-width: var(--size-xs);
// .layout__region {
// position: relative;
// &--first {
// &::after {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// width: 100%;
// height: var(--layout-border-width);
// bottom: -1rem;
// left: 0;
// right: inherit;
// }
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// width: var(--size-xs);
// height: 100%;
// bottom: 0;
// left: inherit;
// right: -1rem;
// }
// @media(min-width: $screen-lg) {
// &::after {
// display: none;
// }
// }
// }
// &--second{
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// width: 100%;
// height: var(--layout-border-width);
// bottom: -1rem;
// left: 0;
// }
// @media(min-width: $screen-lg) {
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// width: var(--size-xs);
// height: 100%;
// bottom: 0;
// left: inherit;
// right: -1rem;
// }
// }
// }
// &--third {
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// width: 100%;
// height: var(--layout-border-width);
// bottom: -1rem;
// left: 0;
// }
// @media(min-width: $screen-sm) {
// &::before {
// content: '';
// position: absolute;
// background-color: var(--layout-show-border-color);
// width: var(--size-xs);
// height: 100%;
// bottom: 0;
// left: inherit;
// right: -1rem;
// }
// }
// }
// }
// }
//}
}
......@@ -3,8 +3,6 @@
.layout--uw-inverted-l-left {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
&.even-split {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
......
......@@ -3,8 +3,6 @@
.layout--uw-inverted-l-right {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
&.even-split {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
......
......@@ -14,16 +14,12 @@
z-index: var(--layer-header);
}
.uw-highlighted {
@include uw-contained-width;
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative;
width: 100%;
// Puts the content at z-index 3
z-index: var(--layer-content);
@media(min-width: $screen-xl) {
padding: 0;
}
}
.block-uw-cbl-special-alert {
......
......@@ -7,8 +7,7 @@
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto auto auto;
padding-bottom: var(--size-2);
padding-top: var(--size-2);
padding: var(--size-2);
@media(min-width: $screen-md) {
grid-template-columns: auto 18rem;
}
......
......@@ -7,6 +7,19 @@
.uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
.layout-builder__message,
.field--name-moderation-state {
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
// Reset the width so we use all the width when we have room to.
@include uw-contained-width(var(--layout-max-width));
}
margin-bottom: 0;
padding: var(--size-2) 0;
.form-wrapper{
padding: var(--size-2);
}
}
.node-form,
.admin-list,
.js-media-library-view,
......@@ -16,11 +29,8 @@
.uw-content-moderation__wrapper,
form {
@include uw-contained-width;
padding: var(--size-2);
@media(min-width: $screen-xl) {
padding: var(--size-2) 0;
}
}
// Reset padding
.uw-content-moderation__wrapper{
display: none;
......@@ -28,6 +38,10 @@ form {
padding: var(--size-2);
.user-logged-in &{
display: block;
margin: var(--size-2);
@media(min-width: $screen-xl) {
margin: 0 auto var(--size-2) auto;
}
}
}
// right column on edit
......
......@@ -7,4 +7,7 @@
font-size: var(--font-size-000);
padding: var(--size-1);
}
p{
margin: 0;
}
}
......@@ -14,10 +14,7 @@
}
.uw-node__with-media &{
> .card__header {
padding: var(--size-2);
@media(min-width: $screen-xl) {
padding: var(--size-2) 0;
}
padding: 0;
}
}
.uw-node__without-media & {
......@@ -59,6 +56,15 @@
// Currently this is PL demo only
// needs to be implemented correctly when webpage has media.
.uw-node__with-media & {
.card__header {
&.uw-node__with-media{
padding: var(--size-2);
@media(min-width: $screen-xl) {
padding: var(--size-2) 0;
}
}
}
.card__featured-image{
align-items: center;
background-position: center center;
......@@ -210,20 +216,26 @@
&--event {
.uw-node__without-media & {
@include uw-contained-width();
padding: 0;
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
// Reset the width so we use all the width when we have room to.
@include uw-contained-width(var(--layout-max-width));
}
}
.uw-node__with-media & {
.card__header{
display: grid;
padding: 0;
.card__title{
margin: 0;
padding: var(--size-2) 0;
}
&.uw-node__with-media{
padding: var(--size-2);
@media(min-width: $screen-xl) {
padding: var(--size-2) 0;
}
.card__title{
margin: 0;
padding: var(--size-2) 0;
}
}
.card__footer,
......@@ -248,6 +260,12 @@
// Width is experimental to match one of the wide-width in
// layouts for small width page look.
@include uw-contained-width(49.0625rem);
&.uw-node__with-media{
padding: 0;
//@media(min-width: $screen-xl) {
// padding: var(--size-2) 0;
//}
}
align-self: end;
margin-bottom: 0;
margin-top: 0;
......@@ -279,6 +297,13 @@
}
}
}
.card__content {
.layout {
&:first-of-type {
padding: var(--size-2) 0 0;
}
}
}
}
// CSS for displaying the title within the node :
}
......
......@@ -4,6 +4,11 @@
@use '../../01-core' as *;
.block-page-title-block{
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
// Reset the width so we use all the width when we have room to.
@include uw-contained-width(var(--layout-max-width));
}
margin-bottom: 0;
}
.page-title {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment