Skip to content
Snippets Groups Projects
Commit b63e8de4 authored by Martin Leblanc's avatar Martin Leblanc
Browse files

additional css for node page layout

parent e63c3809
No related branches found
No related tags found
1 merge request!66ISTWCMS-4704: adding date component with ability to handle multiple dates and...
Hide whitespace changes
Inline Side-by-side
css/styles.css
+ 92
− 0
View file @ b63e8de4
...@@ -3569,6 +3569,12 @@ button { ...@@ -3569,6 +3569,12 @@ button {
.card--show-hover:hover, .card--show-hover:focus-within { .card--show-hover:hover, .card--show-hover:focus-within {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.card__featured-image {
background-repeat: no-repeat;
background-size: cover;
height: 45rem;
min-height: 44rem; }
.card__header { .card__header {
color: #757575; color: #757575;
margin-bottom: 1rem; margin-bottom: 1rem;
...@@ -3733,6 +3739,92 @@ button { ...@@ -3733,6 +3739,92 @@ button {
.card.node > .card__body { .card.node > .card__body {
padding: 0; } padding: 0; }
.node--type-uw-ct-blog .card.node .card__body, .node--type-uw-ct-event .card.node .card__body, .node--type-uw-ct-news-item .card.node .card__body {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
background: #fff;
margin-top: -10rem; }
@media (min-width: 75rem) {
.node--type-uw-ct-blog .card.node .card__body, .node--type-uw-ct-event .card.node .card__body, .node--type-uw-ct-news-item .card.node .card__body {
padding-left: 0;
padding-right: 0; } }
.node--type-uw-ct-blog .card.node .card__header, .node--type-uw-ct-event .card.node .card__header, .node--type-uw-ct-news-item .card.node .card__header {
margin-bottom: 10rem; }
.node--type-uw-ct-blog .card.node .card__header .card__title, .node--type-uw-ct-event .card.node .card__header .card__title, .node--type-uw-ct-news-item .card.node .card__header .card__title {
font-size: 41.056px;
padding: 8px 24px; }
.node--type-uw-ct-blog .card.node .card__header .card__sub-title, .node--type-uw-ct-event .card.node .card__header .card__sub-title, .node--type-uw-ct-news-item .card.node .card__header .card__sub-title {
font-size: 25.632px;
padding: 8px 24px; }
.node--type-uw-ct-blog .card.node .card__header .card__date, .node--type-uw-ct-event .card.node .card__header .card__date, .node--type-uw-ct-news-item .card.node .card__header .card__date {
margin-top: -2.25rem; }
.node--type-uw-ct-blog .card.node .card__header .card__date .uw-date, .node--type-uw-ct-event .card.node .card__header .card__date .uw-date, .node--type-uw-ct-news-item .card.node .card__header .card__date .uw-date {
background-color: #fdd54f;
color: #000;
display: inline-block;
width: inherit; }
.node--type-uw-ct-blog .card.node .card__header .card__author, .node--type-uw-ct-event .card.node .card__header .card__author, .node--type-uw-ct-news-item .card.node .card__header .card__author {
padding: 8px 24px; }
.node--type-uw-ct-blog .card.node .card__footer, .node--type-uw-ct-event .card.node .card__footer, .node--type-uw-ct-news-item .card.node .card__footer {
padding: 8px 24px; }
.node--type-uw-ct-event .card.node .card__header .card__date .uw-date-details__summary {
background-image: url("../source/images/icons/mobile-arrow-down.svg"); }
> .node--type-uw-ct-event .card.node .card__header .card__date .uw-date-details__summary {
background-image: url("../source/images/icons/mobile-arrow-up.svg"); }
.node--type-uw-ct-event .card.node .card__header .card__date .uw-date {
background-color: #fdd54f;
color: #000;
display: block; }
.node--type-uw-ct-contact .card.node .card__body {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px; }
@media (min-width: 75rem) {
.node--type-uw-ct-contact .card.node .card__body {
padding-left: 0;
padding-right: 0; } }
.node--type-uw-ct-contact .card.node .card__header {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px; }
@media (min-width: 75rem) {
.node--type-uw-ct-contact .card.node .card__header {
padding-left: 0;
padding-right: 0; } }
.node--type-uw-ct-profile .card.node .card__body {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px; }
@media (min-width: 75rem) {
.node--type-uw-ct-profile .card.node .card__body {
padding-left: 0;
padding-right: 0; } }
.node--type-uw-ct-profile .card.node .card__header {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px; }
@media (min-width: 75rem) {
.node--type-uw-ct-profile .card.node .card__header {
padding-left: 0;
padding-right: 0; } }
.uw-main > div > .action-links {
margin: 0 !important; }
.uw-colour-bar__cbarorg-default__uw-gold--lvl1 { .uw-colour-bar__cbarorg-default__uw-gold--lvl1 {
background-color: #fffaaa; } background-color: #fffaaa; }
......
source/_patterns/04-components/card/_card.scss
+ 7
− 0
View file @ b63e8de4
...@@ -27,6 +27,13 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -27,6 +27,13 @@ $card-padding: rem(gesso-spacing(sm)) !default;
box-shadow: gesso-box-shadow(3); box-shadow: gesso-box-shadow(3);
} }
} }
.card__featured-image{
background-repeat:no-repeat;
background-size: cover;
height:45rem;
min-height: 44rem;
}
// top // top
.card__header{ .card__header{
//background: $test-color-2; //background: $test-color-2;
......
source/_patterns/04-components/card/card--node/_card--node.scss
+ 118
− 0
View file @ b63e8de4
...@@ -7,3 +7,121 @@ ...@@ -7,3 +7,121 @@
padding:0; padding:0;
} }
} }
.node{
&--type-uw-ct-blog,
&--type-uw-ct-event,
&--type-uw-ct-news-item{
.card.node{
.card{
&__body{
@include uw-contained-width;
background: #fff;
margin-top: -10rem;
.card__content{
}
}
&__header{
margin-bottom:10rem;
.card__title{
font-size:gesso-font-size(8);
padding:gesso-spacing(xs) gesso-spacing(md);
}
.card__sub-title{
font-size:gesso-font-size(4);
padding:gesso-spacing(xs) gesso-spacing(md);
}
.card__date{
margin-top:-2.25rem;
.uw-date{
background-color: gesso-brand(org-default,uw-gold,'primary');
color: gesso-brand(org-default,uw-black,'primary');
display:inline-block;
width:inherit;
}
}
.card__author{
padding:gesso-spacing(xs) gesso-spacing(md);
}
}
&__footer{
padding:gesso-spacing(xs) gesso-spacing(md);
}
}
}
}
&--type-uw-ct-blog{
}
&--type-uw-ct-event{
.card.node{
.card{
&__header {
.card__date{
.uw-date-details__summary{ @include svg-background(mobile-arrow-down);
> & {
@include svg-background(mobile-arrow-up);
}
}
.uw-date{
background-color: gesso-brand(org-default,uw-gold,'primary');
color: gesso-brand(org-default,uw-black,'primary');
display:block;
}
}
}
}
}
}
&--type-uw-ct-news-item{
}
&--type-uw-ct-contact{
.card.node{
.card{
&__body{
@include uw-contained-width;
}
&__header {
@include uw-contained-width;
}
}
}
}
&--type-uw-ct-profile{
.card.node{
.card{
&__body{
@include uw-contained-width;
}
&__header {
@include uw-contained-width;
}
}
}
}
}
.uw-main > div > .action-links{
margin:0 !important;
}
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