Something went wrong on our end
_layout.scss 17.75 KiB
@use '../../01-core' as *;
: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 {
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;
}
}
}
}
.layout {
--layout-border-width: var(--size-xs);
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
@include uw-contained-width(var(--layout-max-width));
}
&.card__media {
padding: 0 var(--size-2);
@media(min-width: $screen-xl) {
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;
}
&--wide {
/* Match the width of WCMS2's wide: 753px */
max-width: 47.0625rem;
}
}
&.uw-full-width {
@include uw-full-width-padding; overflow: hidden;
.uw-caption{
> p{
padding-left: var(--size-2);
}
}
.uw-section-has-full-width.uw-node__with-sidebar &{
padding: 0 var(--size-1) !important;
}
.dashboards-container &{
@include uw-full-width;
margin-bottom: var(--grid-gap);
overflow: visible; /* otherwise, dropdowns truncate at the border. */
}
.layout-builder &{
padding: var(--size-2);
}
.layout-builder__region {
padding: var(--size-1) 0 0;
}
&.layout--uw-1-col{
.block-inline-blockuw-cbl-banner-images,
.block-inline-blockuw-cbl-image,
.block-uw-cbl-image,
.block-inline-blockuw-cbl-remote-video,
.block-inline-blockuw-cbl-image-gallery{
@include uw-full-width-margin;
.layout-builder &{
@include uw-full-width-reset;
margin-left: 0;
margin-right: 0;
}
h2{
margin-left: var(--size-2);
}
.uw-section-has-full-width.uw-node__with-sidebar &{
@include uw-full-width-reset;
}
}
.block-inline-blockuw-cbl-google-maps{
@include uw-contained-width;
@media(min-width: $screen-md) {
@include uw-full-width-margin;
}
.layout-builder &{
@include uw-full-width-reset;
margin-left: 0;
margin-right: 0;
}
.uw-section-has-full-width.uw-node__with-sidebar &{
@include uw-full-width-reset;
}
h2{
margin-left: var(--size-2);
}
}
}
&.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;
@media(min-width: $screen-md) {
@include uw-contained-width;
}
&.uw-contained-width {
@include uw-contained-width;
margin: inherit;
padding: var(--size-1);
@media(min-width: $screen-xxl) {
padding: var(--size-1) 0;
}
&--narrow {
/* Match the width of WCMS2's narrow: 496px */
margin: inherit;
}
&--wide {
/* Match the width of WCMS2's wide: 753px */
margin: inherit;
}
}
}
// 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{
//
}
}
}
}
// Set default spacing to match old block margin if no classes
.layout.layout--uw-1-col {
&:not(.uw-section-spacing--default, .uw-section-spacing--none, .uw-section-spacing--75, .uw-section-spacing--50, .uw-section-spacing--25) {
margin-bottom: var(--section-margin);
&:last-of-type{
margin-bottom: 0;
}
}
}
.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);
}
}