bachir/drupal-rorschach
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rorschach

Browse Source
This commit is contained in:
ouidade
2023-06-09 17:04:04 +02:00
parent 47d640beb3
commit 9beeb37aaa
486 changed files with 38480 additions and 26956 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/rorschach/css/layout/grid.css
+84
View File
@@ -0,0 +1,84 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Grid system.
*/
.grid-full {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
-ms-grid-columns: (minmax(0, 1fr))[6];
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-column-gap: 1.125rem;
/* .grid-full classes nested 3 or more deep go full width. */
}
.grid-full .grid-full .grid-full {
display: block;
}
@media (min-width: 43.75rem) {
.grid-full {
-ms-grid-columns: (minmax(0, 1fr))[14];
grid-template-columns: repeat(14, minmax(0, 1fr));
grid-column-gap: 2.25rem;
}
}
/*
If the .grid-full is nested within the following, apply the appropriate number of columns.
- .layout--content-narrow class.
- Element that's inheriting the layout--content-narrow styles from its parent region.
*/
@media (min-width: 43.75rem) {
.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
-ms-grid-columns: (minmax(0, 1fr))[ 12 ];
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
@media (min-width: 62.5rem) {
.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
-ms-grid-columns: (minmax(0, 1fr))[ 8 ];
grid-template-columns: repeat(8, minmax(0, 1fr));
}
}
/*
If the .grid-full is nested within the following, apply the appropriate number of columns.
- .layout--content-medium class.
- Element that's inheriting the layout--content-medium styles from its parent region.
*/
@media (min-width: 43.75rem) {
.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
-ms-grid-columns: (minmax(0, 1fr))[ 12 ];
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
@media (min-width: 62.5rem) {
.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
-ms-grid-columns: (minmax(0, 1fr))[ 10 ];
grid-template-columns: repeat(10, minmax(0, 1fr));
}
}
web/themes/custom/rorschach/css/layout/grid.pcss.css
+59
View File
@@ -0,0 +1,59 @@
/**
* @file
* Grid system.
*/
@import "../base/variables.pcss.css";
.grid-full {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
grid-column-gap: var(--grid-gap);
/* .grid-full classes nested 3 or more deep go full width. */
& .grid-full .grid-full {
display: block;
}
@media (--grid-md) {
grid-template-columns: repeat(var(--grid-col-count--md), minmax(0, 1fr));
grid-column-gap: var(--grid-gap--md);
}
}
/*
If the .grid-full is nested within the following, apply the appropriate number of columns.
- .layout--content-narrow class.
- Element that's inheriting the layout--content-narrow styles from its parent region.
*/
.layout--content-narrow .grid-full,
.layout--pass--content-narrow > * .grid-full {
@media (--grid-md) {
-ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 2) ];
grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));
}
@media (--lg) {
-ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--lg) - 6) ];
grid-template-columns: repeat(calc(var(--grid-col-count--lg) - 6), minmax(0, 1fr));
}
}
/*
If the .grid-full is nested within the following, apply the appropriate number of columns.
- .layout--content-medium class.
- Element that's inheriting the layout--content-medium styles from its parent region.
*/
.layout--content-medium .grid-full,
.layout--pass--content-medium > * .grid-full {
@media (--grid-md) {
-ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 2) ];
grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));
}
@media (--lg) {
-ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 4) ];
grid-template-columns: repeat(calc(var(--grid-col-count--md) - 4), minmax(0, 1fr));
}
}
web/themes/custom/rorschach/css/layout/layout-builder-fourcol-section.css
+95
View File
@@ -0,0 +1,95 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/*
* @file
* Provides the layout styles for four-column layout section.
*/
.layout--fourcol-section {
display: flex;
flex-wrap: wrap;
}
.layout--fourcol-section > .layout__region {
flex: 1 0 100%;
margin-bottom: 1.125rem;
}
@media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region {
flex-basis: calc(50% - 1.125rem);
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 0;
}
}
/* Two column layout. */
@media (min-width: 43.75rem) {
.layout--fourcol-section > .layout__region--first,
.layout--fourcol-section > .layout__region--second {
margin-bottom: 2.25rem;
}
[dir="ltr"] .layout--fourcol-section > .layout__region--first,
[dir="ltr"] .layout--fourcol-section > .layout__region--third {
margin-right: 1.125rem;
}
[dir="rtl"] .layout--fourcol-section > .layout__region--first,
[dir="rtl"] .layout--fourcol-section > .layout__region--third {
margin-left: 1.125rem;
}
[dir="ltr"] .layout--fourcol-section > .layout__region--second,
[dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
margin-left: 1.125rem;
}
[dir="rtl"] .layout--fourcol-section > .layout__region--second,
[dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
margin-right: 1.125rem;
}
}
/* Four column layout. */
@media (min-width: 62.5rem) {
.layout--fourcol-section > .layout__region {
flex-basis: calc(25% - 1.6875rem);
}
.layout--fourcol-section > .layout__region--first,
.layout--fourcol-section > .layout__region--second {
margin-bottom: 0;
}
[dir="ltr"] .layout--fourcol-section > .layout__region--first {
margin-right: 1.125rem;
}
[dir="rtl"] .layout--fourcol-section > .layout__region--first {
margin-left: 1.125rem;
}
.layout--fourcol-section > .layout__region--second,
.layout--fourcol-section > .layout__region--third {
margin-right: 1.125rem;
margin-left: 1.125rem;
}
[dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
margin-left: 1.125rem;
}
[dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
margin-right: 1.125rem;
}
}
web/themes/custom/rorschach/css/layout/layout-builder-fourcol-section.pcss.css
+66
View File
@@ -0,0 +1,66 @@
/*
* @file
* Provides the layout styles for four-column layout section.
*/
@import "../base/variables.pcss.css";
.layout--fourcol-section {
display: flex;
flex-wrap: wrap;
& > .layout__region {
flex: 1 0 100%;
margin-block-end: var(--grid-gap);
@media (--md) {
flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
flex-grow: 0;
flex-shrink: 0;
margin-block-end: 0;
}
}
/* Two column layout. */
@media (--md) {
& > .layout__region--first,
& > .layout__region--second {
margin-block-end: var(--grid-gap--md);
}
& > .layout__region--first,
& > .layout__region--third {
margin-inline-end: calc(var(--grid-gap--md) * 0.5);
}
& > .layout__region--second,
& > .layout__region--fourth {
margin-inline-start: calc(var(--grid-gap--md) * 0.5);
}
}
/* Four column layout. */
@media (--lg) {
& > .layout__region {
flex-basis: calc(25% - (var(--grid-gap--md) * 0.75));
}
& > .layout__region--first,
& > .layout__region--second {
margin-block-end: 0;
}
& > .layout__region--first {
margin-inline-end: calc(var(--grid-gap--md) * 0.5);
}
& > .layout__region--second,
& > .layout__region--third {
margin-inline: calc(var(--grid-gap--md) * 0.5);
}
& > .layout__region--fourth {
margin-inline-start: calc(var(--grid-gap--md) * 0.5);
}
}
}
web/themes/custom/rorschach/css/layout/layout-builder-threecol-section.css
+81
View File
@@ -0,0 +1,81 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/*
* @file
* Provides the layout styles for three-column layout section.
*/
.layout--threecol-section {
display: flex;
flex-wrap: wrap;
}
.layout--threecol-section > .layout__region {
flex: 1 0 100%;
margin-bottom: 1.125rem;
}
@media (min-width: 62.5rem) {
.layout--threecol-section > .layout__region {
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 0;
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--threecol-section > .layout__region--first {
margin-right: 1.125rem;
}
[dir="rtl"] .layout--threecol-section > .layout__region--first {
margin-left: 1.125rem;
}
.layout--threecol-section > .layout__region--second {
margin-right: 1.125rem;
margin-left: 1.125rem;
}
[dir="ltr"] .layout--threecol-section > .layout__region--third {
margin-left: 1.125rem;
}
[dir="rtl"] .layout--threecol-section > .layout__region--third {
margin-right: 1.125rem;
}
.layout--threecol-section--25-50-25 > .layout__region--first,
.layout--threecol-section--25-50-25 > .layout__region--third {
flex-basis: calc(25% - 1.125rem);
}
.layout--threecol-section--25-50-25 > .layout__region--second {
flex-basis: calc(50% - 2.25rem);
}
.layout--threecol-section--25-25-50 > .layout__region--first,
.layout--threecol-section--25-25-50 > .layout__region--second {
flex-basis: calc(25% - 1.125rem);
}
.layout--threecol-section--25-25-50 > .layout__region--third {
flex-basis: calc(50% - 2.25rem);
}
.layout--threecol-section--50-25-25 > .layout__region--first {
flex-basis: calc(50% - 2.25rem);
}
.layout--threecol-section--50-25-25 > .layout__region--second,
.layout--threecol-section--50-25-25 > .layout__region--third {
flex-basis: calc(25% - 1.125rem);
}
.layout--threecol-section--33-34-33 > .layout__region--first,
.layout--threecol-section--33-34-33 > .layout__region--second,
.layout--threecol-section--33-34-33 > .layout__region--third {
flex-basis: calc(33.33% - 1.50075rem);
}
}
web/themes/custom/rorschach/css/layout/layout-builder-threecol-section.pcss.css
+79
View File
@@ -0,0 +1,79 @@
/*
* @file
* Provides the layout styles for three-column layout section.
*/
@import "../base/variables.pcss.css";
.layout--threecol-section {
display: flex;
flex-wrap: wrap;
& > .layout__region {
flex: 1 0 100%;
margin-block-end: var(--grid-gap);
@media (--lg) {
flex-grow: 0;
flex-shrink: 0;
margin-block-end: 0;
}
}
}
@media (--lg) {
.layout--threecol-section {
& > .layout__region--first {
margin-inline-end: calc(var(--grid-gap--md) * 0.5);
}
& > .layout__region--second {
margin-inline: calc(var(--grid-gap--md) * 0.5);
}
& > .layout__region--third {
margin-inline-start: calc(var(--grid-gap--md) * 0.5);
}
}
.layout--threecol-section--25-50-25 {
& > .layout__region--first,
& > .layout__region--third {
flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
}
& > .layout__region--second {
flex-basis: calc(50% - var(--grid-gap--md));
}
}
.layout--threecol-section--25-25-50 {
& > .layout__region--first,
& > .layout__region--second {
flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
}
& > .layout__region--third {
flex-basis: calc(50% - var(--grid-gap--md));
}
}
.layout--threecol-section--50-25-25 {
& > .layout__region--first {
flex-basis: calc(50% - var(--grid-gap--md));
}
& > .layout__region--second,
& > .layout__region--third {
flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
}
}
.layout--threecol-section--33-34-33 {
& > .layout__region--first,
& > .layout__region--second,
& > .layout__region--third {
flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.667));
}
}
}
web/themes/custom/rorschach/css/layout/layout-builder-twocol-section.css
+138
View File
@@ -0,0 +1,138 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/*
* @file
* Provides the layout styles for two-column layout section.
*/
.layout--twocol-section {
display: flex;
flex-wrap: wrap;
}
.layout--twocol-section > .layout__region {
flex: 1 0 100%;
margin-bottom: 1.125rem;
}
@media (min-width: 43.75rem) {
.layout--twocol-section > .layout__region {
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 0;
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
margin-right: 1.125rem;
}
[dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
margin-left: 1.125rem;
}
.layout--twocol-section--50-50 > .layout__region--first {
flex-basis: calc(50% - 1.125rem);
}
[dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
margin-left: 1.125rem;
}
[dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
margin-right: 1.125rem;
}
.layout--twocol-section--50-50 > .layout__region--second {
flex-basis: calc(50% - 1.125rem);
}
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
margin-right: 0.74993rem;
}
[dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
margin-left: 0.74993rem;
}
.layout--twocol-section--33-67 > .layout__region--first {
flex-basis: calc(33.33% - 0.74993rem);
}
[dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
margin-left: 1.49985rem;
}
[dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
margin-right: 1.49985rem;
}
.layout--twocol-section--33-67 > .layout__region--second {
flex-basis: calc(66.66% - 1.49985rem);
}
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
margin-right: 1.49985rem;
}
[dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
margin-left: 1.49985rem;
}
.layout--twocol-section--67-33 > .layout__region--first {
flex-basis: calc(66.66% - 1.49985rem);
}
[dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
margin-left: 0.74993rem;
}
[dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
margin-right: 0.74993rem;
}
.layout--twocol-section--67-33 > .layout__region--second {
flex-basis: calc(33.33% - 0.74993rem);
}
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
margin-right: 0.5625rem;
}
[dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
margin-left: 0.5625rem;
}
.layout--twocol-section--25-75 > .layout__region--first {
flex-basis: calc(25% - 0.5625rem);
}
[dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
margin-left: 1.6875rem;
}
[dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
margin-right: 1.6875rem;
}
.layout--twocol-section--25-75 > .layout__region--second {
flex-basis: calc(75% - 1.6875rem);
}
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
margin-right: 1.6875rem;
}
[dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
margin-left: 1.6875rem;
}
.layout--twocol-section--75-25 > .layout__region--first {
flex-basis: calc(75% - 1.6875rem);
}
[dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
margin-left: 0.5625rem;
}
[dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
margin-right: 0.5625rem;
}
.layout--twocol-section--75-25 > .layout__region--second {
flex-basis: calc(25% - 0.5625rem);
}
}
web/themes/custom/rorschach/css/layout/layout-builder-twocol-section.pcss.css
+84
View File
@@ -0,0 +1,84 @@
/*
* @file
* Provides the layout styles for two-column layout section.
*/
@import "../base/variables.pcss.css";
.layout--twocol-section {
display: flex;
flex-wrap: wrap;
& > .layout__region {
flex: 1 0 100%;
margin-block-end: var(--grid-gap);
@media (--md) {
flex-grow: 0;
flex-shrink: 0;
margin-block-end: 0;
}
}
}
@media (--md) {
.layout--twocol-section--50-50 {
& > .layout__region--first {
flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
margin-inline-end: calc(var(--grid-gap--md) * 0.5);
}
& > .layout__region--second {
flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
margin-inline-start: calc(var(--grid-gap--md) * 0.5);
}
}
.layout--twocol-section--33-67 {
& > .layout__region--first {
flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.3333));
margin-inline-end: calc(var(--grid-gap--md) * 0.3333);
}
& > .layout__region--second {
flex-basis: calc(66.66% - (var(--grid-gap--md) * 0.6666));
margin-inline-start: calc(var(--grid-gap--md) * 0.6666);
}
}
.layout--twocol-section--67-33 {
& > .layout__region--first {
flex-basis: calc(66.66% - (var(--grid-gap--md) * 0.6666));
margin-inline-end: calc(var(--grid-gap--md) * 0.6666);
}
& > .layout__region--second {
flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.3333));
margin-inline-start: calc(var(--grid-gap--md) * 0.3333);
}
}
.layout--twocol-section--25-75 {
& > .layout__region--first {
flex-basis: calc(25% - (var(--grid-gap--md) * 0.25));
margin-inline-end: calc(var(--grid-gap--md) * 0.25);
}
& > .layout__region--second {
flex-basis: calc(75% - (var(--grid-gap--md) * 0.75));
margin-inline-start: calc(var(--grid-gap--md) * 0.75);
}
}
.layout--twocol-section--75-25 {
& > .layout__region--first {
flex-basis: calc(75% - (var(--grid-gap--md) * 0.75));
margin-inline-end: calc(var(--grid-gap--md) * 0.75);
}
& > .layout__region--second {
flex-basis: calc(25% - (var(--grid-gap--md) * 0.25));
margin-inline-start: calc(var(--grid-gap--md) * 0.25);
}
}
}
web/themes/custom/rorschach/css/layout/layout-content-medium.css
+69
View File
@@ -0,0 +1,69 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Grid system definition for the content wide layout.
*/
.layout--content-medium,
.layout--pass--content-medium > * {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
grid-column: 1 / 7;
width: 100%;
}
@media (min-width: 43.75rem) {
.layout--content-medium,
.layout--pass--content-medium > * {
-ms-grid-column: 2;
-ms-grid-column-span: 12;
grid-column: 2 / 14;
}
}
@media (min-width: 62.5rem) {
.layout--content-medium,
.layout--pass--content-medium > * {
-ms-grid-column: 3;
-ms-grid-column-span: 10;
grid-column: 3 / 13;
}
}
/*
If .layout--content-medium is nested within itself, or an element that's inheriting the
layout--content-medium styles from its parent region, go full width within its
parent .grid-full.
*/
@media (min-width: 43.75rem) {
.layout--pass--content-medium > * .layout--content-medium,
.layout--content-medium .layout--content-medium,
.layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--content-medium .layout--pass--content-medium > * {
-ms-grid-column: 1;
-ms-grid-column-span: 12;
grid-column: 1 / 13;
}
}
@media (min-width: 62.5rem) {
.layout--pass--content-medium > * .layout--content-medium,
.layout--content-medium .layout--content-medium,
.layout--pass--content-medium > * .layout--pass--content-medium > *,
.layout--content-medium .layout--pass--content-medium > * {
-ms-grid-column: 1;
-ms-grid-column-span: 10;
grid-column: 1 / 11;
}
}
web/themes/custom/rorschach/css/layout/layout-content-medium.pcss.css
+39
View File
@@ -0,0 +1,39 @@
/**
* @file
* Grid system definition for the content wide layout.
*/
@import "../base/variables.pcss.css";
.layout--content-medium,
.layout--pass--content-medium > * {
grid-column: 1 / 7;
width: 100%;
@media (--grid-md) {
grid-column: 2 / 14;
}
@media (--lg) {
grid-column: 3 / 13;
}
}
/*
If .layout--content-medium is nested within itself, or an element that's inheriting the
layout--content-medium styles from its parent region, go full width within its
parent .grid-full.
*/
.layout--pass--content-medium > *,
.layout--content-medium {
& .layout--content-medium,
& .layout--pass--content-medium > * {
@media (--grid-md) {
grid-column: 1 / 13;
}
@media (--lg) {
grid-column: 1 / 11;
}
}
}
web/themes/custom/rorschach/css/layout/layout-content-narrow.css
+398
View File
@@ -0,0 +1,398 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Grid system definition for the content narrow layout.
*/
.layout--content-narrow,
.layout--pass--content-narrow > * {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
grid-column: 1 / 7;
width: 100%;
}
@media (min-width: 43.75rem) {
.layout--content-narrow,
.layout--pass--content-narrow > * {
-ms-grid-column: 2;
-ms-grid-column-span: 12;
grid-column: 2 / 14;
}
}
@media (min-width: 62.5rem) {
.layout--content-narrow,
.layout--pass--content-narrow > * {
-ms-grid-column: 3;
-ms-grid-column-span: 8;
grid-column: 3 / 11;
}
}
/*
If .layout--content-narrow is nested within any of the following, allocate the appropriate
amount of columns within its parent .grid-full.
- .layout--content-narrow class.
- Element that's inheriting the layout--content-narrow styles from its parent region.
- .layout--content-medium class.
- Element that's inheriting the layout--content-medium styles from its parent region.
*/
@media (min-width: 43.75rem) {
.layout--content-narrow .layout--content-narrow,
.layout--pass--content-narrow > * .layout--content-narrow,
.layout--content-medium .layout--content-narrow,
.layout--pass--content-medium > * .layout--content-narrow,
.layout--content-narrow .layout--pass--content-narrow > *,
.layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--pass--content-narrow > * {
-ms-grid-column: 1;
-ms-grid-column-span: 12;
grid-column: 1 / 13;
}
}
@media (min-width: 62.5rem) {
.layout--content-narrow .layout--content-narrow,
.layout--pass--content-narrow > * .layout--content-narrow,
.layout--content-medium .layout--content-narrow,
.layout--pass--content-medium > * .layout--content-narrow,
.layout--content-narrow .layout--pass--content-narrow > *,
.layout--pass--content-narrow > * .layout--pass--content-narrow > *,
.layout--content-medium .layout--pass--content-narrow > *,
.layout--pass--content-medium > * .layout--pass--content-narrow > * {
-ms-grid-column: 1;
-ms-grid-column-span: 8;
grid-column: 1 / 9;
}
}
/*
Special grid-breaking treatment for text-content elements that
reside in a content-narrow layout.
*/
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,
[dir="ltr"] .layout--content-narrow .text-content blockquote:before,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
left: -7.14286vw;
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,
[dir="rtl"] .layout--content-narrow .text-content blockquote:before,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
right: -7.14286vw;
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,
[dir="ltr"] .layout--content-narrow .text-content blockquote:before,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
left: calc(-7.14286vw - -0.06696rem);
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,
[dir="rtl"] .layout--content-narrow .text-content blockquote:before,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
right: calc(-7.14286vw - -0.06696rem);
}
}
@media (min-width: 75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,
[dir="ltr"] .layout--content-narrow .text-content blockquote:before,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
left: calc(-7.14286vw - -0.62946rem);
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,
[dir="rtl"] .layout--content-narrow .text-content blockquote:before,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
right: calc(-7.14286vw - -0.62946rem);
}
}
@media (min-width: 90rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:before,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:before,
[dir="ltr"] .layout--content-narrow .text-content blockquote:before,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:before {
left: -5.86607rem;
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:before,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:before,
[dir="rtl"] .layout--content-narrow .text-content blockquote:before,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:before {
right: -5.86607rem;
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="ltr"] .layout--content-narrow .text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
left: -7.14286vw;
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="rtl"] .layout--content-narrow .text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
right: -7.14286vw;
}
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="ltr"] .layout--content-narrow .text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
margin-left: 2px;
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="rtl"] .layout--content-narrow .text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
margin-right: 2px;
}
.layout--content-narrow.text-content blockquote:after,
.layout--pass--content-narrow > *.text-content blockquote:after,
.layout--content-narrow .text-content blockquote:after,
.layout--pass--content-narrow > * .text-content blockquote:after {
width: 1.125rem;
height: calc(100% - 2.8125rem);
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="ltr"] .layout--content-narrow .text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
left: calc(-7.14286vw - -0.06696rem);
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="rtl"] .layout--content-narrow .text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
right: calc(-7.14286vw - -0.06696rem);
}
}
@media (min-width: 75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="ltr"] .layout--content-narrow .text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
left: calc(-7.14286vw - -0.62946rem);
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="rtl"] .layout--content-narrow .text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
right: calc(-7.14286vw - -0.62946rem);
}
}
@media (min-width: 90rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="ltr"] .layout--content-narrow .text-content blockquote:after,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote:after {
left: -5.86607rem;
}
[dir="rtl"] .layout--content-narrow.text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote:after,
[dir="rtl"] .layout--content-narrow .text-content blockquote:after,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote:after {
right: -5.86607rem;
}
}
@media (min-width: 43.75rem) {
[dir="ltr"] .layout--content-narrow.text-content blockquote,
[dir="ltr"] .layout--pass--content-narrow > *.text-content blockquote,
[dir="ltr"] .layout--content-narrow .text-content blockquote,
[dir="ltr"] .layout--pass--content-narrow > * .text-content blockquote {
padding-left: 0;
}
[dir="rtl"] .layout--content-narrow.text-content blockquote,
[dir="rtl"] .layout--pass--content-narrow > *.text-content blockquote,
[dir="rtl"] .layout--content-narrow .text-content blockquote,
[dir="rtl"] .layout--pass--content-narrow > * .text-content blockquote {
padding-right: 0;
}
.layout--content-narrow.text-content blockquote,
.layout--pass--content-narrow > *.text-content blockquote,
.layout--content-narrow .text-content blockquote,
.layout--pass--content-narrow > * .text-content blockquote {
width: calc(71.42857vw - 2.25rem);
margin-top: 3.375rem;
margin-bottom: 3.375rem;
}
}
@media (min-width: 62.5rem) {
.layout--content-narrow.text-content blockquote,
.layout--pass--content-narrow > *.text-content blockquote,
.layout--content-narrow .text-content blockquote,
.layout--pass--content-narrow > * .text-content blockquote {
width: calc(71.42857vw - 2.91964rem);
}
}
@media (min-width: 75rem) {
.layout--content-narrow.text-content blockquote,
.layout--pass--content-narrow > *.text-content blockquote,
.layout--content-narrow .text-content blockquote,
.layout--pass--content-narrow > * .text-content blockquote {
width: calc(71.42857vw - 8.54464rem);
}
}
@media (min-width: 90rem) {
.layout--content-narrow.text-content blockquote,
.layout--pass--content-narrow > *.text-content blockquote,
.layout--content-narrow .text-content blockquote,
.layout--pass--content-narrow > * .text-content blockquote {
width: 56.41071rem;
}
}
@media (min-width: 43.75rem) {
.layout--content-narrow.text-content pre,
.layout--pass--content-narrow > *.text-content pre,
.layout--content-narrow .text-content pre,
.layout--pass--content-narrow > * .text-content pre {
margin-top: 3.375rem;
margin-bottom: 3.375rem;
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .layout--content-narrow.text-content pre,
[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,
[dir="ltr"] .layout--content-narrow .text-content pre,
[dir="ltr"] .layout--pass--content-narrow > * .text-content pre {
margin-left: calc(-7.14286vw - -0.06696rem);
}
[dir="rtl"] .layout--content-narrow.text-content pre,
[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,
[dir="rtl"] .layout--content-narrow .text-content pre,
[dir="rtl"] .layout--pass--content-narrow > * .text-content pre {
margin-right: calc(-7.14286vw - -0.06696rem);
}
.layout--content-narrow.text-content pre,
.layout--pass--content-narrow > *.text-content pre,
.layout--content-narrow .text-content pre,
.layout--pass--content-narrow > * .text-content pre {
width: calc(85.71429vw - 3.05357rem);
}
}
@media (min-width: 75rem) {
[dir="ltr"] .layout--content-narrow.text-content pre,
[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,
[dir="ltr"] .layout--content-narrow .text-content pre,
[dir="ltr"] .layout--pass--content-narrow > * .text-content pre {
margin-left: calc(-7.14286vw - -0.62946rem);
}
[dir="rtl"] .layout--content-narrow.text-content pre,
[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,
[dir="rtl"] .layout--content-narrow .text-content pre,
[dir="rtl"] .layout--pass--content-narrow > * .text-content pre {
margin-right: calc(-7.14286vw - -0.62946rem);
}
.layout--content-narrow.text-content pre,
.layout--pass--content-narrow > *.text-content pre,
.layout--content-narrow .text-content pre,
.layout--pass--content-narrow > * .text-content pre {
width: calc(85.71429vw - 9.80357rem);
}
}
@media (min-width: 90rem) {
[dir="ltr"] .layout--content-narrow.text-content pre,
[dir="ltr"] .layout--pass--content-narrow > *.text-content pre,
[dir="ltr"] .layout--content-narrow .text-content pre,
[dir="ltr"] .layout--pass--content-narrow > * .text-content pre {
margin-left: -5.86607rem;
}
[dir="rtl"] .layout--content-narrow.text-content pre,
[dir="rtl"] .layout--pass--content-narrow > *.text-content pre,
[dir="rtl"] .layout--content-narrow .text-content pre,
[dir="rtl"] .layout--pass--content-narrow > * .text-content pre {
margin-right: -5.86607rem;
}
.layout--content-narrow.text-content pre,
.layout--pass--content-narrow > *.text-content pre,
.layout--content-narrow .text-content pre,
.layout--pass--content-narrow > * .text-content pre {
width: 68.14286rem;
}
}
/**
* <pre> and <blockquote> elements should not break containers and overflow
* into sidebar region when present.
*/
.sidebar-grid .layout--content-narrow.text-content blockquote,
.sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,
.sidebar-grid .layout--content-narrow .text-content blockquote,
.sidebar-grid .layout--pass--content-narrow > * .text-content blockquote,
.sidebar-grid .layout--content-narrow.text-content pre,
.sidebar-grid .layout--pass--content-narrow > *.text-content pre,
.sidebar-grid .layout--content-narrow .text-content pre,
.sidebar-grid .layout--pass--content-narrow > * .text-content pre {
width: auto;
}
web/themes/custom/rorschach/css/layout/layout-content-narrow.pcss.css
+151
View File
@@ -0,0 +1,151 @@
/**
* @file
* Grid system definition for the content narrow layout.
*/
@import "../base/variables.pcss.css";
.layout--content-narrow,
.layout--pass--content-narrow > * {
grid-column: 1 / 7;
width: 100%;
@media (--grid-md) {
grid-column: 2 / 14;
}
@media (--lg) {
grid-column: 3 / 11;
}
}
/*
If .layout--content-narrow is nested within any of the following, allocate the appropriate
amount of columns within its parent .grid-full.
- .layout--content-narrow class.
- Element that's inheriting the layout--content-narrow styles from its parent region.
- .layout--content-medium class.
- Element that's inheriting the layout--content-medium styles from its parent region.
*/
.layout--content-narrow,
.layout--pass--content-narrow > *,
.layout--content-medium,
.layout--pass--content-medium > * {
& .layout--content-narrow,
& .layout--pass--content-narrow > * {
@media (--grid-md) {
grid-column: 1 / 13;
}
@media (--lg) {
grid-column: 1 / 9;
}
}
}
/*
Special grid-breaking treatment for text-content elements that
reside in a content-narrow layout.
*/
.layout--content-narrow,
.layout--pass--content-narrow > * {
&.text-content,
& .text-content {
& blockquote {
&:before {
@media (--grid-md) {
inset-inline-start: calc(-1 * (var(--grid-col-width--md) + var(--grid-gap--md)));
}
@media (--lg) {
inset-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
}
@media (--nav) {
inset-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
}
@media (--grid-max) {
inset-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
}
}
&:after {
@media (--grid-md) {
inset-inline-start: calc(-1 * (var(--grid-col-width--md) + var(--grid-gap--md)));
width: var(--sp);
height: calc(100% - 45px);
margin-inline-start: 2px;
}
@media (--lg) {
inset-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
}
@media (--nav) {
inset-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
}
@media (--grid-max) {
inset-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
}
}
@media (--grid-md) {
width: calc(10 * var(--grid-col-width--md) + 9 * var(--grid-gap--md));
margin-block: var(--sp3);
padding-inline-start: 0;
}
@media (--lg) {
width: calc(10 * var(--grid-col-width--lg) + 9 * var(--grid-gap--lg));
}
@media (--nav) {
width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));
}
@media (--grid-max) {
width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));
}
}
& pre {
@media (--grid-md) {
margin-block: var(--sp3);
}
@media (--lg) {
width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
}
@media (--nav) {
width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
}
@media (--grid-max) {
width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
}
}
}
}
/**
* <pre> and <blockquote> elements should not break containers and overflow
* into sidebar region when present.
*/
.sidebar-grid {
& .layout--content-narrow,
& .layout--pass--content-narrow > * {
&.text-content,
& .text-content {
& blockquote,
& pre {
width: auto;
}
}
}
}
web/themes/custom/rorschach/css/layout/layout-discovery-section-layout.css
+29
View File
@@ -0,0 +1,29 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/*
* @file
* Provides default layout styles for all layout sections.
*/
.layout {
margin-bottom: 1.125rem;
}
@media (min-width: 43.75rem) {
.layout {
margin-bottom: 2.25rem;
}
}
@media (min-width: 62.5rem) {
.layout {
margin-bottom: 3.375rem;
}
}
web/themes/custom/rorschach/css/layout/layout-discovery-section-layout.pcss.css
+18
View File
@@ -0,0 +1,18 @@
/*
* @file
* Provides default layout styles for all layout sections.
*/
@import "../base/variables.pcss.css";
.layout {
margin-block-end: var(--sp);
@media (--md) {
margin-block-end: var(--sp2);
}
@media (--lg) {
margin-block-end: var(--sp3);
}
}
web/themes/custom/rorschach/css/layout/layout-footer.css
+67
View File
@@ -0,0 +1,67 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Grid system definition for the footer top and footer bottom layouts.
*/
/**
* Creates stacking context ensuring that child elements can never appear in
* front of mobile navigation.
*/
.site-footer {
position: relative;
z-index: 1;
}
.site-footer__inner {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
@media (min-width: 75rem) {
.site-footer__inner {
padding-top: 4.5rem;
padding-bottom: 14.625rem;
}
}
.region--footer_top__inner > *,
.region--footer_bottom__inner > * {
margin-bottom: 2.25rem;
}
@media (min-width: 43.75rem) {
.region--footer_top__inner > *,
.region--footer_bottom__inner > * {
flex: 1;
margin-bottom: 0;
}
[dir="ltr"] .region--footer_top__inner > *:not(:last-child),
[dir="ltr"] .region--footer_bottom__inner > *:not(:last-child) {
margin-right: 2.25rem;
}
[dir="rtl"] .region--footer_top__inner > *:not(:last-child),
[dir="rtl"] .region--footer_bottom__inner > *:not(:last-child) {
margin-left: 2.25rem;
}
}
@media (min-width: 43.75rem) {
.region--footer_top__inner,
.region--footer_bottom__inner {
display: flex;
flex-wrap: wrap;
}
}
web/themes/custom/rorschach/css/layout/layout-footer.pcss.css
+44
View File
@@ -0,0 +1,44 @@
/**
* @file
* Grid system definition for the footer top and footer bottom layouts.
*/
@import "../base/variables.pcss.css";
/**
* Creates stacking context ensuring that child elements can never appear in
* front of mobile navigation.
*/
.site-footer {
position: relative;
z-index: 1;
}
.site-footer__inner {
padding-block: var(--sp2);
@media (--nav) {
padding-block: var(--sp4) calc(13 * var(--sp));
}
}
.region--footer_top__inner,
.region--footer_bottom__inner {
& > * {
margin-block-end: var(--sp2);
@media (--md) {
flex: 1;
margin-block-end: 0;
&:not(:last-child) {
margin-inline-end: var(--sp2);
}
}
}
@media (--md) {
display: flex;
flex-wrap: wrap;
}
}
web/themes/custom/rorschach/css/layout/layout-sidebar.css
+85
View File
@@ -0,0 +1,85 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Special grid system for sidebar.
*/
.sidebar-grid > .site-main {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
grid-column: 1 / 7;
align-self: flex-start;
-ms-grid-row-align: start;
}
@media (min-width: 43.75rem) {
.sidebar-grid > .site-main {
-ms-grid-column: 1;
-ms-grid-column-span: 14;
grid-column: 1 / 15;
}
}
@media (min-width: 62.5rem) {
.sidebar-grid > .site-main {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(0, 1fr))[8];
grid-template-columns: repeat(8, minmax(0, 1fr));
-ms-grid-column: 3;
-ms-grid-column-span: 8;
grid-column: 3 / 11;
}
.sidebar-grid > .site-main > .region--content-above,
.sidebar-grid > .site-main > .region--content {
-ms-grid-columns: (minmax(0, 1fr))[8];
grid-template-columns: repeat(8, minmax(0, 1fr));
-ms-grid-column: 1;
-ms-grid-column-span: 8;
grid-column: 1 / 9;
}
.sidebar-grid > .site-main .layout--content-narrow,
.sidebar-grid > .site-main .layout--pass--content-narrow > *,
.sidebar-grid > .site-main .layout--content-medium,
.sidebar-grid > .site-main .layout--pass--content-medium > * {
-ms-grid-column: 1;
-ms-grid-column-span: 8;
grid-column: 1 / 9;
}
}
.sidebar-grid .region--sidebar {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 6;
grid-column: 1 / 7;
}
@media (min-width: 43.75rem) {
.sidebar-grid .region--sidebar {
-ms-grid-column: 3;
-ms-grid-column-span: 10;
grid-column: 3 / 13;
}
}
@media (min-width: 62.5rem) {
.sidebar-grid .region--sidebar {
-ms-grid-row: 1;
-ms-grid-column: 12;
-ms-grid-column-span: 3;
grid-column: 12 / 15;
}
}
web/themes/custom/rorschach/css/layout/layout-sidebar.pcss.css
+51
View File
@@ -0,0 +1,51 @@
/**
* @file
* Special grid system for sidebar.
*/
@import "../base/variables.pcss.css";
.sidebar-grid {
& > .site-main {
grid-column: 1 / 7;
align-self: flex-start;
-ms-grid-row-align: start;
@media (--grid-md) {
grid-column: 1 / 15;
}
@media (--lg) {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-column: 3 / 11;
& > .region--content-above,
& > .region--content {
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-column: 1 / 9;
}
& .layout--content-narrow,
& .layout--pass--content-narrow > *,
& .layout--content-medium,
& .layout--pass--content-medium > * {
grid-column: 1 / 9;
}
}
}
& .region--sidebar {
-ms-grid-row: 2;
grid-column: 1 / 7;
@media (--grid-md) {
grid-column: 3 / 13;
}
@media (--lg) {
-ms-grid-row: 1;
grid-column: 12 / 15;
}
}
}
web/themes/custom/rorschach/css/layout/layout-views-grid-horizontal.css
+543
View File
@@ -0,0 +1,543 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Responsive styles for views grid horizontal layout.
*/
.views-view-grid--horizontal {
display: flex;
flex-wrap: wrap;
}
[dir="ltr"] .views-view-grid--horizontal.cols-1 > * {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-1 > * {
margin-left: 0;
}
.views-view-grid--horizontal.cols-1 > * {
flex-basis: 100%;
}
[dir="ltr"] .views-view-grid--horizontal.cols-2 > * {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-2 > * {
margin-left: 0;
}
.views-view-grid--horizontal.cols-2 > * {
flex-basis: 100%;
/* 2 column layout. */
}
@media (min-width: 43.75rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-2 > * {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-2 > * {
margin-left: 1.125rem;
}
.views-view-grid--horizontal.cols-2 > * {
flex-basis: calc(50% - 0.5625rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) {
margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-3 > * {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > * {
margin-left: 0;
}
.views-view-grid--horizontal.cols-3 > * {
flex-basis: 100%;
/* 2 column layout. */
}
@media (min-width: 43.75rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-3 > * {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > * {
margin-left: 1.125rem;
}
.views-view-grid--horizontal.cols-3 > * {
flex-basis: calc(50% - 0.5625rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
margin-left: 0;
}
}
/* 3 column layout. */
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-3 > * {
flex-basis: calc(33.33333% - 0.75rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {
margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-4 > * {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > * {
margin-left: 0;
}
.views-view-grid--horizontal.cols-4 > * {
flex-basis: 100%;
/* 2 column layout. */
}
@media (min-width: 43.75rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-4 > * {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > * {
margin-left: 1.125rem;
}
.views-view-grid--horizontal.cols-4 > * {
flex-basis: calc(50% - 0.5625rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
margin-left: 0;
}
}
/* 4 column layout. */
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-4 > * {
flex-basis: calc(25% - 0.84375rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {
margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > * {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > * {
margin-left: 0;
}
.views-view-grid--horizontal.cols-5 > * {
flex-basis: 100%;
/* 2 column layout. */
}
@media (min-width: 31.25rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-5 > * {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > * {
margin-left: 1.125rem;
}
.views-view-grid--horizontal.cols-5 > * {
flex-basis: calc(50% - 0.5625rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
margin-left: 0;
}
}
/* 3 column layout. */
@media (min-width: 43.75rem) {
.views-view-grid--horizontal.cols-5 > * {
flex-basis: calc(33.33333% - 0.75rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
margin-left: 0;
}
}
/* 5 column layout. */
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-5 > * {
flex-basis: calc(20% - 0.9rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {
margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > * {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > * {
margin-left: 0;
}
.views-view-grid--horizontal.cols-6 > * {
flex-basis: 100%;
/* 2 column layout. */
}
@media (min-width: 31.25rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-6 > * {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > * {
margin-left: 1.125rem;
}
.views-view-grid--horizontal.cols-6 > * {
flex-basis: calc(50% - 0.5625rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
margin-left: 0;
}
}
/* 3 column layout. */
@media (min-width: 43.75rem) {
.views-view-grid--horizontal.cols-6 > * {
flex-basis: calc(33.33333% - 0.75rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
margin-left: 0;
}
}
/* 6 column layout. */
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-6 > * {
flex-basis: calc(16.66667% - 0.9375rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {
margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > * {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > * {
margin-left: 0;
}
.views-view-grid--horizontal.cols-7 > * {
flex-basis: 100%;
/* 2 column layout. */
}
@media (min-width: 31.25rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-7 > * {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > * {
margin-left: 1.125rem;
}
.views-view-grid--horizontal.cols-7 > * {
flex-basis: calc(50% - 0.5625rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
margin-left: 0;
}
}
/* 3 column layout. */
@media (min-width: 43.75rem) {
.views-view-grid--horizontal.cols-7 > * {
flex-basis: calc(33.33333% - 0.75rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
margin-left: 0;
}
}
/* 7 column layout. */
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-7 > * {
flex-basis: calc(14.28571% - 0.96429rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {
margin-left: 0;
}
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > * {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > * {
margin-left: 0;
}
.views-view-grid--horizontal.cols-8 > * {
flex-basis: 100%;
/* 2 column layout. */
}
@media (min-width: 31.25rem) {
[dir="ltr"] .views-view-grid--horizontal.cols-8 > * {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > * {
margin-left: 1.125rem;
}
.views-view-grid--horizontal.cols-8 > * {
flex-basis: calc(50% - 0.5625rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
margin-left: 0;
}
}
/* 4 column layout. */
@media (min-width: 43.75rem) {
.views-view-grid--horizontal.cols-8 > * {
flex-basis: calc(25% - 0.84375rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
margin-left: 0;
}
}
/* 8 column layout. */
@media (min-width: 62.5rem) {
.views-view-grid--horizontal.cols-8 > * {
flex-basis: calc(12.5% - 0.98438rem);
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
margin-right: 1.125rem;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
margin-left: 1.125rem;
}
[dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {
margin-right: 0;
}
[dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {
margin-left: 0;
}
}
.views-view-grid--horizontal > * {
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 1.125rem;
}
web/themes/custom/rorschach/css/layout/layout-views-grid-horizontal.pcss.css
+277
View File
@@ -0,0 +1,277 @@
/**
* @file
* Responsive styles for views grid horizontal layout.
*/
@import "../base/variables.pcss.css";
:root {
--views-grid-layout-gap: var(--sp);
}
.views-view-grid--horizontal {
display: flex;
flex-wrap: wrap;
&.cols-1 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
}
}
&.cols-2 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--md) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
}
}
&.cols-3 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--md) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 3 column layout. */
@media (--lg) {
flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(3n) {
margin-inline-end: 0;
}
}
}
}
&.cols-4 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--md) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 4 column layout. */
@media (--lg) {
flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(4n) {
margin-inline-end: 0;
}
}
}
}
&.cols-5 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--sm) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 3 column layout. */
@media (--md) {
flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(3n) {
margin-inline-end: 0;
}
}
/* 5 column layout. */
@media (--lg) {
flex-basis: calc(100% / 5 - (((5 - 1) / 5) * var(--views-grid-layout-gap)));
&:nth-child(3n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(5n) {
margin-inline-end: 0;
}
}
}
}
&.cols-6 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--sm) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 3 column layout. */
@media (--md) {
flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(3n) {
margin-inline-end: 0;
}
}
/* 6 column layout. */
@media (--lg) {
flex-basis: calc(100% / 6 - (((6 - 1) / 6) * var(--views-grid-layout-gap)));
&:nth-child(3n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(6n) {
margin-inline-end: 0;
}
}
}
}
&.cols-7 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--sm) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 3 column layout. */
@media (--md) {
flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(3n) {
margin-inline-end: 0;
}
}
/* 7 column layout. */
@media (--lg) {
flex-basis: calc(100% / 7 - (((7 - 1) / 7) * var(--views-grid-layout-gap)));
&:nth-child(3n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(7n) {
margin-inline-end: 0;
}
}
}
}
&.cols-8 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--sm) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 4 column layout. */
@media (--md) {
flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(4n) {
margin-inline-end: 0;
}
}
/* 8 column layout. */
@media (--lg) {
flex-basis: calc(100% / 8 - (((8 - 1) / 8) * var(--views-grid-layout-gap)));
&:nth-child(4n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(8n) {
margin-inline-end: 0;
}
}
}
}
& > * {
flex-grow: 0;
flex-shrink: 0;
margin-block-end: var(--views-grid-layout-gap);
}
}
web/themes/custom/rorschach/css/layout/layout-views-grid-vertical.css
+148
View File
@@ -0,0 +1,148 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Responsive styles for views grid vertical layout.
*/
.views-view-grid--vertical {
margin-bottom: -1.125rem; /* Offset the bottom row's padding. */
column-gap: 1.125rem;
}
@media (min-width: 31.25rem) {
.views-view-grid--vertical.cols-2 {
column-count: 2;
}
}
@media (min-width: 31.25rem) {
.views-view-grid--vertical.cols-3 {
column-count: 2;
}
}
@media (min-width: 43.75rem) {
.views-view-grid--vertical.cols-3 {
column-count: 3;
}
}
@media (min-width: 31.25rem) {
.views-view-grid--vertical.cols-4 {
column-count: 2;
}
}
@media (min-width: 43.75rem) {
.views-view-grid--vertical.cols-4 {
column-count: 3;
}
}
@media (min-width: 62.5rem) {
.views-view-grid--vertical.cols-4 {
column-count: 4;
}
}
@media (min-width: 31.25rem) {
.views-view-grid--vertical.cols-5 {
column-count: 2;
}
}
@media (min-width: 43.75rem) {
.views-view-grid--vertical.cols-5 {
column-count: 3;
}
}
@media (min-width: 62.5rem) {
.views-view-grid--vertical.cols-5 {
column-count: 5;
}
}
@media (min-width: 31.25rem) {
.views-view-grid--vertical.cols-6 {
column-count: 2;
}
}
@media (min-width: 43.75rem) {
.views-view-grid--vertical.cols-6 {
column-count: 3;
}
}
@media (min-width: 62.5rem) {
.views-view-grid--vertical.cols-6 {
column-count: 6;
}
}
@media (min-width: 31.25rem) {
.views-view-grid--vertical.cols-7 {
column-count: 2;
}
}
@media (min-width: 43.75rem) {
.views-view-grid--vertical.cols-7 {
column-count: 3;
}
}
@media (min-width: 62.5rem) {
.views-view-grid--vertical.cols-7 {
column-count: 7;
}
}
@media (min-width: 31.25rem) {
.views-view-grid--vertical.cols-8 {
column-count: 2;
}
}
@media (min-width: 43.75rem) {
.views-view-grid--vertical.cols-8 {
column-count: 4;
}
}
@media (min-width: 62.5rem) {
.views-view-grid--vertical.cols-8 {
column-count: 8;
}
}
.views-view-grid--vertical .views-view-grid__item > * {
padding-bottom: 1.125rem;
page-break-inside: avoid;
break-inside: avoid;
}
web/themes/custom/rorschach/css/layout/layout-views-grid-vertical.pcss.css
+108
View File
@@ -0,0 +1,108 @@
/**
* @file
* Responsive styles for views grid vertical layout.
*/
@import "../base/variables.pcss.css";
:root {
--views-grid-layout-gap: var(--sp);
}
.views-view-grid--vertical {
margin-block-end: calc(-1 * var(--views-grid-layout-gap)); /* Offset the bottom row's padding. */
column-gap: var(--views-grid-layout-gap);
&.cols-2 {
@media (--sm) {
column-count: 2;
}
}
&.cols-3 {
@media (--sm) {
column-count: 2;
}
@media (--md) {
column-count: 3;
}
}
&.cols-4 {
@media (--sm) {
column-count: 2;
}
@media (--md) {
column-count: 3;
}
@media (--lg) {
column-count: 4;
}
}
&.cols-5 {
@media (--sm) {
column-count: 2;
}
@media (--md) {
column-count: 3;
}
@media (--lg) {
column-count: 5;
}
}
&.cols-6 {
@media (--sm) {
column-count: 2;
}
@media (--md) {
column-count: 3;
}
@media (--lg) {
column-count: 6;
}
}
&.cols-7 {
@media (--sm) {
column-count: 2;
}
@media (--md) {
column-count: 3;
}
@media (--lg) {
column-count: 7;
}
}
&.cols-8 {
@media (--sm) {
column-count: 2;
}
@media (--md) {
column-count: 4;
}
@media (--lg) {
column-count: 8;
}
}
& .views-view-grid__item {
& > * {
padding-block-end: var(--views-grid-layout-gap);
break-inside: avoid;
}
}
}
web/themes/custom/rorschach/css/layout/layout.css
+78
View File
@@ -0,0 +1,78 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Base Layout.
*/
.container {
width: 100%;
max-width: 84.375rem;
padding-right: 1.125rem;
padding-left: 1.125rem;
}
@media (min-width: 75rem) {
.container {
padding-right: 2.25rem;
padding-left: 2.25rem;
}
}
.page-wrapper {
max-width: 98.125rem;
background: #fff;
}
/**
* Creates stacking context ensuring that child elements can never appear in
* front of mobile navigation.
*/
.layout-main-wrapper {
position: relative;
z-index: 2; /* Ensure dropdown is not cut off by footer. */
}
/* Contains the social sidebar, and the primary content area. */
@media (min-width: 75rem) {
.layout-main {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
}
@media (min-width: 75rem) {
[dir="ltr"] .main-content {
margin-right: auto;
}
[dir="rtl"] .main-content {
margin-left: auto;
}
.main-content {
width: calc(100% - 5.625rem);
}
}
.main-content__container {
padding-top: 3.375rem;
}
@media (min-width: 43.75rem) {
.main-content__container {
padding-top: 5.625rem;
}
}
web/themes/custom/rorschach/css/layout/layout.pcss.css
+54
View File
@@ -0,0 +1,54 @@
/**
* @file
* Base Layout.
*/
@import "../base/variables.pcss.css";
.container {
width: 100%;
max-width: var(--max-width);
padding-inline: var(--container-padding);
@media (--nav) {
padding-inline: var(--container-padding-nav);
}
}
.page-wrapper {
max-width: var(--max-bg-color);
background: var(--color--white);
}
/**
* Creates stacking context ensuring that child elements can never appear in
* front of mobile navigation.
*/
.layout-main-wrapper {
position: relative;
z-index: 2; /* Ensure dropdown is not cut off by footer. */
}
/* Contains the social sidebar, and the primary content area. */
.layout-main {
@media (--nav) {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
}
.main-content {
@media (--nav) {
width: calc(100% - var(--content-left));
margin-inline-end: auto;
}
}
.main-content__container {
padding-block-start: var(--sp3);
@media (--md) {
padding-block-start: var(--sp5);
}
}
web/themes/custom/rorschach/css/layout/region-content-below.css
+69
View File
@@ -0,0 +1,69 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Content below region layout.
*/
@media (min-width: 43.75rem) {
.region--content-below {
display: flex;
flex-wrap: wrap;
}
[dir="ltr"] .region--content-below > * {
margin-right: 2.25rem;
}
[dir="rtl"] .region--content-below > * {
margin-left: 2.25rem;
}
.region--content-below > * {
flex-basis: calc(50% - 1.125rem);
flex-grow: 1;
flex-shrink: 0;
}
[dir="ltr"] .region--content-below > *:nth-child(2n),
[dir="ltr"] .region--content-below > *:last-child {
margin-right: 0;
}
[dir="rtl"] .region--content-below > *:nth-child(2n),
[dir="rtl"] .region--content-below > *:last-child {
margin-left: 0;
}
}
@media (min-width: 43.75rem) {
.region--content-below > * {
flex-basis: calc(33.33% - 1.50075rem);
}
[dir="ltr"] .region--content-below > *:nth-child(2n),
[dir="ltr"] .region--content-below > *:last-child {
margin-right: 2.25rem;
}
[dir="rtl"] .region--content-below > *:nth-child(2n),
[dir="rtl"] .region--content-below > *:last-child {
margin-left: 2.25rem;
}
[dir="ltr"] .region--content-below > *:nth-child(3n),
[dir="ltr"] .region--content-below > *:last-child {
margin-right: 0;
}
[dir="rtl"] .region--content-below > *:nth-child(3n),
[dir="rtl"] .region--content-below > *:last-child {
margin-left: 0;
}
}
web/themes/custom/rorschach/css/layout/region-content-below.pcss.css
+41
View File
@@ -0,0 +1,41 @@
/**
* @file
* Content below region layout.
*/
@import "../base/variables.pcss.css";
.region--content-below {
@media (--md) {
display: flex;
flex-wrap: wrap;
& > * {
flex-basis: calc(50% - (var(--grid-gap--md) / 2));
flex-grow: 1;
flex-shrink: 0;
margin-inline-end: var(--grid-gap--md);
&:nth-child(2n),
&:last-child {
margin-inline-end: 0;
}
}
}
@media (--md) {
& > * {
flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.667));
&:nth-child(2n),
&:last-child {
margin-inline-end: var(--grid-gap--md);
}
&:nth-child(3n),
&:last-child {
margin-inline-end: 0;
}
}
}
}
web/themes/custom/rorschach/css/layout/region-content.css
+29
View File
@@ -0,0 +1,29 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Content region layout.
*/
.region--content {
margin-bottom: 1.125rem;
}
@media (min-width: 43.75rem) {
.region--content {
margin-bottom: 2.25rem;
}
}
@media (min-width: 62.5rem) {
.region--content {
margin-bottom: 3.375rem;
}
}
web/themes/custom/rorschach/css/layout/region-content.pcss.css
+18
View File
@@ -0,0 +1,18 @@
/**
* @file
* Content region layout.
*/
@import "../base/variables.pcss.css";
.region--content {
margin-block-end: var(--sp);
@media (--md) {
margin-block-end: var(--sp2);
}
@media (--lg) {
margin-block-end: var(--sp3);
}
}
web/themes/custom/rorschach/css/layout/region-hero.css
+15
View File
@@ -0,0 +1,15 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Region default layout.
*/
.region--hero > *:last-child {
margin-bottom: 0;
}
web/themes/custom/rorschach/css/layout/region-hero.pcss.css
+12
View File
@@ -0,0 +1,12 @@
/**
* @file
* Region default layout.
*/
@import "../base/variables.pcss.css";
.region--hero {
& > *:last-child {
margin-block-end: 0;
}
}
web/themes/custom/rorschach/css/layout/region-secondary-menu.css
+33
View File
@@ -0,0 +1,33 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Secondary menu region layout styling.
*/
.region--secondary-menu {
display: flex;
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
.region--secondary-menu > * {
margin-bottom: 0;
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .region--secondary-menu {
justify-content: flex-end;
margin: 0;
/* If the secondary nav is the first item within the header, it does not need left separator. */
}
body:not(.is-always-mobile-nav) .region--secondary-menu:first-child .secondary-nav:before {
content: none;
}
}
web/themes/custom/rorschach/css/layout/region-secondary-menu.pcss.css
+30
View File
@@ -0,0 +1,30 @@
/**
* @file
* Secondary menu region layout styling.
*/
@import "../base/variables.pcss.css";
.region--secondary-menu {
display: flex;
margin-block-start: var(--sp2);
margin-block-end: var(--sp2);
& > * {
margin-block-end: 0;
}
}
body:not(.is-always-mobile-nav) {
@media (--nav) {
& .region--secondary-menu {
justify-content: flex-end;
margin: 0;
/* If the secondary nav is the first item within the header, it does not need left separator. */
&:first-child .secondary-nav:before {
content: none;
}
}
}
}
web/themes/custom/rorschach/css/layout/region.css
+29
View File
@@ -0,0 +1,29 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Region default layout.
*/
.region > * {
margin-bottom: 1.125rem;
}
@media (min-width: 43.75rem) {
.region > * {
margin-bottom: 2.25rem;
}
}
@media (min-width: 62.5rem) {
.region > * {
margin-bottom: 3.375rem;
}
}
web/themes/custom/rorschach/css/layout/region.pcss.css
+18
View File
@@ -0,0 +1,18 @@
/**
* @file
* Region default layout.
*/
@import "../base/variables.pcss.css";
.region > * {
margin-block-end: var(--sp);
@media (--md) {
margin-block-end: var(--sp2);
}
@media (--lg) {
margin-block-end: var(--sp3);
}
}
web/themes/custom/rorschach/css/layout/social-bar.css
+169
View File
@@ -0,0 +1,169 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Social Bar Region
.
*/
@media (min-width: 75rem) {
.social-bar {
flex-shrink: 0;
width: 5.625rem;
background-color: #f7f9fa;
}
}
[dir="ltr"] .social-bar__inner {
padding-left: 1.125rem;
}
[dir="rtl"] .social-bar__inner {
padding-right: 1.125rem;
}
[dir="ltr"] .social-bar__inner {
padding-right: 1.125rem;
}
[dir="rtl"] .social-bar__inner {
padding-left: 1.125rem;
}
.social-bar__inner {
position: relative;
padding-top: 0.5625rem;
padding-bottom: 0.5625rem;
}
@media (min-width: 75rem) {
[dir="ltr"] .social-bar__inner {
padding-left: 0;
}
[dir="rtl"] .social-bar__inner {
padding-right: 0;
}
[dir="ltr"] .social-bar__inner {
padding-right: 0;
}
[dir="rtl"] .social-bar__inner {
padding-left: 0;
}
.social-bar__inner {
position: relative;
width: 5.625rem;
padding-top: 5.625rem;
padding-bottom: 5.625rem;
}
[dir="ltr"] .social-bar__inner.is-fixed {
left: 0;
}
[dir="rtl"] .social-bar__inner.is-fixed {
right: 0;
}
.social-bar__inner.is-fixed {
position: fixed;
top: 6.75rem;
height: calc(100vh - 6.75rem);
}
}
.rotate > * {
margin-bottom: 2.25rem;
}
@media (min-width: 75rem) {
.rotate > * {
display: flex;
align-items: center;
margin-bottom: 0;
}
[dir="ltr"] .rotate > *:not(:first-child) {
margin-right: 2.25rem;
}
[dir="rtl"] .rotate > *:not(:first-child) {
margin-left: 2.25rem;
}
}
@media (min-width: 75rem) {
[dir="ltr"] .rotate .contextual {
right: auto;
left: 100%;
}
[dir="rtl"] .rotate .contextual {
right: 100%;
left: auto;
}
.rotate .contextual {
transform: rotate(90deg); /* LTR */
transform-origin: top left; /* LTR */
}
[dir="ltr"] .rotate .contextual .trigger {
float: left;
}
[dir="rtl"] .rotate .contextual .trigger {
float: right;
}
}
@media (min-width: 75rem) {
[dir="ltr"] .rotate {
left: 50%;
}
[dir="rtl"] .rotate {
right: 50%;
}
.rotate {
position: absolute;
display: flex;
flex-direction: row-reverse;
width: 100vh;
transform: rotate(-90deg) translateX(-100%); /* LTR */
transform-origin: left; /* LTR */
}
@supports (width: max-content) {
.rotate {
width: max-content;
}
}
}
@media (min-width: 75rem) {
[dir="rtl"] .rotate {
transform: rotate(90deg) translateX(100%);
transform-origin: right;
}
[dir="rtl"] .rotate .contextual {
transform: rotate(-90deg);
transform-origin: top right;
}
}
web/themes/custom/rorschach/css/layout/social-bar.pcss.css
+93
View File
@@ -0,0 +1,93 @@
/**
* @file
* Social Bar Region
.
*/
@import "../base/variables.pcss.css";
.social-bar {
@media (--nav) {
flex-shrink: 0;
width: var(--content-left);
background-color: var(--color--gray-95);
}
}
.social-bar__inner {
position: relative;
padding-block: var(--sp0-5);
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
@media (--nav) {
position: relative;
width: var(--content-left);
padding-block: calc(5 * var(--sp));
padding-inline-start: 0;
padding-inline-end: 0;
&.is-fixed {
position: fixed;
inset-block-start: var(--sp6);
inset-inline-start: 0;
height: calc(100vh - 6 * var(--sp));
}
}
}
.rotate {
& > * {
margin-block-end: var(--sp2);
@media (--nav) {
display: flex;
align-items: center;
margin-block-end: 0;
&:not(:first-child) {
margin-inline-end: var(--sp2);
}
}
}
& .contextual {
@media (--nav) {
inset-inline: 100% auto;
transform: rotate(90deg); /* LTR */
transform-origin: top left; /* LTR */
& .trigger {
float: inline-start;
}
}
}
@media (--nav) {
position: absolute;
inset-inline-start: 50%;
display: flex;
flex-direction: row-reverse;
width: 100vh;
transform: rotate(-90deg) translateX(-100%); /* LTR */
transform-origin: left; /* LTR */
@supports (width: max-content) {
width: max-content;
}
}
}
[dir="rtl"] {
@media (--nav) {
& .rotate {
transform: rotate(90deg) translateX(100%);
transform-origin: right;
& .contextual {
transform: rotate(-90deg);
transform-origin: top right;
}
}
}
}
web/themes/custom/rorschach/css/layout/views.css
+26
View File
@@ -0,0 +1,26 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Styles for views.
*/
.view > * {
margin-bottom: 2.25rem;
}
.view > *:last-child {
margin-bottom: 0;
}
@media (min-width: 43.75rem) {
.view > * {
margin-bottom: 3.375rem;
}
}
web/themes/custom/rorschach/css/layout/views.pcss.css
+20
View File
@@ -0,0 +1,20 @@
/**
* @file
* Styles for views.
*/
@import "../base/variables.pcss.css";
.view {
& > * {
margin-block-end: var(--sp2);
&:last-child {
margin-block-end: 0;
}
@media (--md) {
margin-block-end: var(--sp3);
}
}
}