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

Merge branch 'feature/EXPHR-kpaxman-container_queries' into '1.1.x' 

ISTWCMS-6507: convert media queries in timeline, calendar, Waterloo Events and...

See merge request !233
parents 4443c60b 315d96ef
No related branches found
No related tags found
1 merge request!233ISTWCMS-6507: convert media queries in timeline, calendar, Waterloo Events and...
Hide whitespace changes
Inline Side-by-side
Showing
with 44 additions and 30 deletions
.stylelintrc.json 0 → 100644
+ 7
− 0
View file @ b68297f8
{
"rules": {
"property-no-unknown": [true, {
"ignoreProperties": ["container-name", "container-type"]
}]
}
}
build_ohana.sh
+ 1
− 0
View file @ b68297f8
......@@ -84,6 +84,7 @@ echo "**************************************************************************
echo "Setting up es lint and gulp ..."
rm .eslintignore
ln -s ../.eslintignore .eslintignore
ln -s ../.stylelintrc.json .stylelintrc.json
cp ../dashboard.js gulp-tasks
sed -i "3 i const { compileDashboard } = require('./gulp-tasks/dashboard');" gulpfile.js
sed -i "s/parallel(compileSass, compileJS)/parallel(compileSass, compileJS, compileDashboard)/g" gulpfile.js
......
php8fix-package.json
+ 4
− 0
View file @ b68297f8
......@@ -46,6 +46,7 @@
"@pattern-lab/plugin-tab": "6.0.0",
"@pattern-lab/uikit-workshop": "6.0.3",
"browser-sync": "2.29.3",
"clean-css": "5.3.3",
"del": "^6.0.0",
"generator-ohana": "^1.0.2",
"gulp": "^4.0.2",
......@@ -67,6 +68,9 @@
"stylelint-scss": "^3.21.0",
"yo": "^4.3.1"
},
"overrides": {
"clean-css": "$clean-css"
},
"resolutions": {
"@basalt/twig-renderer": "2.1.1"
},
......
src/patterns/03-layouts/layout/_layout-base.scss
+ 2
− 0
View file @ b68297f8
......@@ -16,6 +16,8 @@
--layout-border-radius: 0;
}
.layout__region {
container-name: column;
container-type: inline-size;
.pl & {
outline: var(--size-xs) dashed var(--blue-6);
......
src/patterns/04-components/timeline/_timeline.scss
+ 7
− 7
View file @ b68297f8
......@@ -17,11 +17,11 @@
font-weight: 500;
}
@media(min-width: $screen-sm) {
@container column (min-width: #{$screen-sm}) {
margin-left: var(--size-4);
}
@media(min-width: $screen-md) {
@container column (min-width: #{$screen-md}) {
margin: 0;
}
p{
......@@ -54,7 +54,7 @@
color: var(--uw-white);
display: inline-block;
@media(min-width: $screen-md) {
@container column (min-width: #{$screen-md}) {
margin-left: inherit;
}
padding: var(--size-05) var(--size-1);
......@@ -70,7 +70,7 @@
color: var(--uw-white);
display: inline-block;
@media(min-width: $screen-md) {
@container column (min-width: #{$screen-md}) {
margin-left: -0.23rem;
}
padding: var(--size-05) var(--size-1);
......@@ -129,7 +129,7 @@
height: var(--size-105);
left: -0.5rem;
@media(min-width: $screen-md) {
@container column (min-width: #{$screen-md}) {
left: -1.45rem;
}
position: absolute;
......@@ -172,7 +172,7 @@
padding-top: var(--size-4);
width: 100%;
@media(min-width: $screen-md) {
@container column (min-width: #{$screen-md}) {
width: calc(100% - 4rem);
}
}
......@@ -184,7 +184,7 @@
margin: 0;
width: 100%;
@media(min-width: $screen-md) {
@container column (min-width: #{$screen-md}) {
margin: -1rem 0 0 var(--size-4);
padding: var(--size-2) var(--size-2) 0;
width: calc(100% - 8rem);
......
src/patterns/04-components/view/view-calendar/_view-calendar.scss
+ 4
− 4
View file @ b68297f8
......@@ -244,7 +244,7 @@
height: auto;
min-height: var(--size-15);
.uw-full-width .block-uw-cbl-multi-type-calendar & {
@media(min-width: $screen-xl) {
@container column (min-width: #{$screen-xl}) {
min-height: var(--size-26);
}
}
......@@ -421,7 +421,7 @@
}
/** Mobile (e.g. 48rem = 768px) **/
@media(max-width: 48rem) {
@container column (max-width: 48rem) {
.calendar-view-table thead,
.calendar-view-table .next-month,
.calendar-view-table .previous-month {
......@@ -459,7 +459,7 @@
*/
/** Desktop (e.g. 48rem = 768px) **/
@media(min-width: 48rem) {
@container column (min-width: 48rem) {
/** Multi-day events **/
.calendar-view-day__row.is-multi {
--calendar-view-day-multi-offset: calc(-1rem - 1px);
......@@ -495,7 +495,7 @@
// UW CODE
.block-uw-cbl-multi-type-calendar .view-uw-view-calendar:has(ul.pager__items) {
text-shadow: none;
@media(min-width: 48rem) {
@container column (min-width: 48rem) {
.view-content {
margin-top: calc(-1 * var(--size-9));
position: relative;
......
src/patterns/04-components/waterloo-events/_waterloo-events.scss
+ 3
− 3
View file @ b68297f8
......@@ -18,10 +18,10 @@
background-color: var(--gray-2);
min-height: var(--size-20);
width: 100%;
@media(min-width: $screen-sm) {
@container column (min-width: #{$screen-sm}) {
width: 45%;
}
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
width: 30%;
}
}
......@@ -110,7 +110,7 @@
.uw-waterloo-events__button {
display: flex;
justify-content: center;
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
grid-column: 1 / 3;
}
flex-flow: row;
......
src/patterns/04-components/waterloo-news/_waterloo-news.scss
+ 16
− 16
View file @ b68297f8
......@@ -10,7 +10,7 @@
}
.layout--uw-1-col &,
.pl-js-pattern-example & {
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
grid-template-columns: repeat(2, 1fr);
}
}
......@@ -22,7 +22,7 @@
position: relative;
z-index: var(--layer-content);
}
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
.layout--uw-1-col &,
.pl-js-pattern-example & {
min-height: 50rem;
......@@ -32,10 +32,10 @@
}
&--content {
background-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
@media(min-width: $screen-sm) {
@container column (min-width: #{$screen-sm}) {
background-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.65) 25%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
}
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
background-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 100%);
}
background-position: bottom;
......@@ -69,7 +69,7 @@
.uw-full-width & {
.uw-waterloo-news__featured--headline,
.uw-waterloo-news__featured--subhead {
@media(min-width: $screen-xl) {
@container column (min-width: #{$screen-xl}) {
max-width: 35rem;
}
}
......@@ -87,7 +87,7 @@
&__items {
grid-row: 2 / 3;
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
.layout--uw-1-col &,
.pl-js-pattern-example & {
grid-column: 2 / 3;
......@@ -105,7 +105,7 @@
.layout--uw-1-col &,
.pl-js-pattern-example & {
margin-bottom: 0;
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
padding: var(--size-2);
}
}
......@@ -119,7 +119,7 @@
.pl-js-pattern-example & {
padding: var(--size-2);
max-width: $screen-fb;
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
padding: 0 var(--size-2) 0 var(--size-6);
}
}
......@@ -143,12 +143,12 @@
// and over image on mobile.
&.uw-waterloo-news__featured-right {
.uw-waterloo-news__featured {
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
grid-column: 2 / 3;
}
}
.uw-waterloo-news__items {
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
grid-column: 1 / 2;
}
}
......@@ -160,7 +160,7 @@
}
.uw-waterloo-news__items {
display: none;
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
height: 100%;
min-height: inherit;
max-height: inherit;
......@@ -168,7 +168,7 @@
}
}
.uw-waterloo-news__featured--content {
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
display: none;
}
}
......@@ -194,17 +194,17 @@
padding: 0;
}
.uw-waterloo-news__featured {
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
grid-column: 2 / 3;
}
}
.uw-waterloo-news__items {
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
grid-column: 1 / 2;
}
}
@media(min-width: $screen-xxl) {
@container column (min-width: #{$screen-xxl}) {
.uw-full-width & {
.uw-waterloo-news__item--content {
max-width: unset;
......@@ -216,7 +216,7 @@
.uw-waterloo-news__button {
display: flex;
justify-content: center;
@media(min-width: $screen-lg) {
@container column (min-width: #{$screen-lg}) {
grid-column: 1 / 3;
}
flex-flow: row;
......
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