Skip to content
Snippets Groups Projects
Commit 2c50dcc5 authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-5593: code cleanup

parent ff424860
No related branches found
No related tags found
1 merge request!2ISTWCMS-5593 m26lebla uw layout grid
Hide whitespace changes
Inline Side-by-side
Showing
with 158 additions and 14 deletions
src/patterns/01-core/mixins/_uw-mixins.scss
+ 28
− 8
View file @ 2c50dcc5
......@@ -28,19 +28,21 @@ $test-color-12: var(--green-5);
@include xl{
padding-left: 0;
padding-right: 0;
}
}
@mixin uw-full-width {
max-width: 100%;
padding: 0;
width: 100%;
}
@mixin uw-full-width-padding {
max-width: 100%;
padding: 0 var(--size-1);
width: 100%;
}
@mixin uw-full-width-margin {
left: 50%;
margin-left: -50vw;
......@@ -51,6 +53,7 @@ $test-color-12: var(--green-5);
right: 50%;
width: 100vw;
}
@mixin uw-full-width-reset {
left: inherit;
margin-left: -1rem;
......@@ -61,16 +64,19 @@ $test-color-12: var(--green-5);
right: inherit;
width: inherit;
}
@mixin uw-contained-width-reset() {
margin-left:inherit;
margin-right: inherit;
max-width: inherit;
padding: inherit;
@media(min-width: $screen-xl) {
padding-left:inherit;
padding-right:inherit;
}
}
// Flexbox display
@mixin flexbox {
display: flex;
......@@ -85,8 +91,10 @@ $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' {
......@@ -104,6 +112,7 @@ $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;
......@@ -134,6 +143,7 @@ $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 {
......@@ -148,6 +158,7 @@ $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;
......@@ -162,7 +173,6 @@ $test-color-12: var(--green-5);
-moz-box-ordinal-group: $int + 1;
-ms-flex-order: $int;
-webkit-order: $int;
order: $int;
}
......@@ -174,7 +184,6 @@ $test-color-12: var(--green-5);
-moz-box-flex: $int;
-ms-flex: $int;
-webkit-flex-grow: $int;
flex-grow: $int;
}
......@@ -182,7 +191,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;
......@@ -202,6 +210,7 @@ $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;
......@@ -221,6 +230,7 @@ $test-color-12: var(--green-5);
-moz-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
justify-content: $value;
}
......@@ -229,8 +239,10 @@ $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 {
......@@ -245,6 +257,7 @@ $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;
......@@ -258,6 +271,7 @@ $test-color-12: var(--green-5);
-moz-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
align-items: $value;
}
......@@ -266,8 +280,10 @@ $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 {
......@@ -278,10 +294,9 @@ $test-color-12: var(--green-5);
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);
......@@ -302,15 +317,18 @@ $test-color-12: var(--green-5);
gap: var(--grid-gap);
}
}
// Display of grid item.
@mixin uw-flex-grid-item(){
@include flex();
@include align-items(flex-start);
width: 100%;
@media(min-width: $screen-md) {
@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 &,
......@@ -320,8 +338,10 @@ $test-color-12: var(--green-5);
width: 100% !important;
}
}
@media(min-width: $screen-lg) {
width: 30%;
.uw-contained-width--wide &{
width: 45% !important;
}
......@@ -332,15 +352,16 @@ $test-color-12: var(--green-5);
@mixin uw-flex-term-item(){
align-self: flex-start;
width: 100%;
@media(min-width: $screen-md) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
}
@media(min-width: $screen-lg) {
//width: 30%;
}
}
// Display of elements in list style.
......@@ -357,5 +378,4 @@ $test-color-12: var(--green-5);
// Display of gallery item.
@mixin uw-flex-gallery-item(){
}
src/patterns/03-layouts/layout/_layout-base.scss
+ 5
− 0
View file @ 2c50dcc5
......@@ -6,12 +6,17 @@
@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: 2px dashed #2f91da;
outline: 2px dashed var(--blue-6);
}
.pl & {
//outline: 2px dashed #2f91da;
outline: 2px dashed var(--blue-6);
padding: 1.5rem;
......
src/patterns/03-layouts/layout/_layout.scss
+ 21
− 0
View file @ 2c50dcc5
......@@ -9,9 +9,11 @@
padding: var(--size-1) 0;
}
}
&.uw-contained-width {
@include layout-constrain;
padding: var(--size-1);
@media(min-width: $screen-xxl) {
padding: var(--size-1) 0;
}
......@@ -30,25 +32,31 @@
&.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-2);
}
&.layout--uw-1-col{
.block-inline-blockuw-cbl-banner-images,
.block-inline-blockuw-cbl-image,
......@@ -56,31 +64,39 @@
.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 layout-constrain;
@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);
}
......@@ -90,20 +106,25 @@
// When wrapped with class to identify sidebar
.uw-node__with-sidebar & {
margin: inherit;
@media(min-width: $screen-md) {
@include layout-constrain;
}
&.uw-contained-width {
@include layout-constrain;
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;
......
src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
+ 8
− 0
View file @ 2c50dcc5
......@@ -4,30 +4,38 @@
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
&.larger-left {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 2fr) 1fr;
}
}
&.larger-right {
@media(min-width: $screen-md){
grid-template-columns: 1fr minmax(0, 2fr);
}
}
&.even-split {
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: repeat(2, 1fr);
}
}
.layout__region{
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
&--second {
grid-column: 1 / 2;
grid-row: 2/ 3;
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
......
src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
+ 18
− 0
View file @ 2c50dcc5
......@@ -3,58 +3,76 @@
.layout--uw-3-col {
display: grid;
gap: var(--grid-gap);
&.even-split {
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-middle {
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}
}
&.legacy-38-38-24 {
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24%;
}
}
&.legacy-24-38-38 {
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr);
}
}
.layout__region{
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
&--second {
grid-column: 1 / 2;
grid-row: 2 / 3;
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
&--third {
grid-column: 1 / 2;
grid-row: 3 / 4;
@media(min-width: $screen-md) {
grid-column: 3 / 4;
grid-row: 1 / 2;
......
src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
+ 28
− 0
View file @ 2c50dcc5
@use '../../../01-core' as *;
.layout--uw-4-col {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
&.even-split {
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-second {
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-third {
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
}
}
&.larger-right {
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
......@@ -44,43 +59,56 @@
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
}
}
&.legacy-23-27-27-23 {
@media(min-width: $screen-sm) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
}
}
.layout__region{
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
&--second {
grid-column: 1 / 2;
@media(min-width: $screen-sm) {
grid-column: 2 / 3;
}
@media(min-width: $screen-lg) {
grid-column: 2 / 3;
}
}
&--third {
@media(min-width: $screen-sm) {
grid-column: 1 / 2;
}
@media(min-width: $screen-lg) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
}
&--fourth {
@media(min-width: $screen-sm) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
@media(min-width: $screen-lg) {
grid-column: 4 / 5;
grid-row: 1 / 2;
......
src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
+ 19
− 1
View file @ 2c50dcc5
@use '../../../01-core' as *;
.layout--uw-5-col {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 100%;
&.even-split {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-second {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-third {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-fourth {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
}
}
&.larger-right {
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
}
}
&.legacy-23-19-19-19-20 {
@media(min-width: $screen-md) {
grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%;
}
}
.layout__region{
.layout__region {
&--first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
&--second {
grid-column: 1 / 2;
grid-row: 2 / 3;
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
&--third {
grid-column: 1 / 2;
grid-row: 3 / 4;
@media(min-width: $screen-md) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
}
&--fourth {
grid-column: 1 / 2;
grid-row: 4 / 5;
@media(min-width: $screen-md) {
grid-column: 4 / 5;
grid-row: 1 / 2;
}
}
&--fifth {
grid-column: 1 / 2;
grid-row: 5 / 6;
@media(min-width: $screen-md) {
grid-column: 5 / 6;
grid-row: 1 / 2;
......
src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
+ 15
− 4
View file @ 2c50dcc5
@use '../../../01-core' as *;
.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);
}
}
&.larger-left {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
.uw-inverted-l--left-side {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.uw-inverted-l--right-side {
display: grid;
gap: var(--grid-gap);
grid-column: 1 / 2;
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media(min-width: $screen-lg) {
grid-column: 2 / 3;
}
}
.layout__region{
&--first{
//
}
.layout__region {
&--second {
@media(min-width: $screen-md) {
grid-column: 1 / 2;
}
}
&--third {
grid-column: 1 / 2;
@media(min-width: $screen-md) {
grid-column: 2 / 3;
}
}
&--fourth {
grid-column: 1 / 2;
@media(min-width: $screen-md) {
grid-column: 1 / 3;
}
......
src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
+ 16
− 1
View file @ 2c50dcc5
@use '../../../01-core' as *;
.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);
}
}
&.larger-left {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
@media(min-width: $screen-lg) {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
.uw-inverted-l--left-side {
display: grid;
gap: var(--grid-gap);
grid-column: 1 / 2;
grid-row: 1 / 2;
grid-template-columns: 100%;
@media(min-width: $screen-md) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.uw-inverted-l--right-side {
grid-column: 1 / 2;
grid-row: 2 / 3;
@media(min-width: $screen-lg) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
.layout__region{
.layout__region {
&--first {
grid-column: 1 / 2;
@media(min-width: $screen-md) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
}
&--second {
grid-column: 1 / 2;
@media(min-width: $screen-md) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
&--third {
grid-column: 1 / 2;
@media(min-width: $screen-md) {
grid-column: 1 / 3;
grid-row: 2 / 3;
......
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