modules/stanford_profile_styles/lib/scss/component/node/stanford_page.scss
@charset 'UTF-8';
@import '../../config';
//
// Custom Styles For Stanford Page Content Type.
//
.su-page-components {
// New layout paragraphs styles.
.paragraph--type--stanford-entity,
.paragraph--type--stanford-card,
.paragraph--type--stanford-wysiwyg,
.paragraph--type--stanford-media-caption,
.paragraph--type--stanford-cta-list,
.paragraph--type--stanford-stories,
.paragraph--type--stanford-lists,
.paragraph--type--stanford-gallery,
.ptype-stanford-card,
.ptype-stanford-wysiwyg,
.ptype-stanford-media-caption,
.ptype-stanford-cta-list,
.ptype-stanford-stories,
.ptype-stanford-image-cta,
.ptype-stanford-lists,
.ptype-stanford-entity,
.ptype-stanford-gallery{
margin: 0 auto;
width: 100%;
max-width: calc(100vw - #{map-get($su-screen-margins, 'xs') * 2});
@include grid-media('sm') {
max-width: calc(100vw - #{map-get($su-screen-margins, 'sm') * 2});
}
@include grid-media('md') {
max-width: calc(100vw - #{map-get($su-screen-margins, 'md') * 2});
}
@include grid-media('lg') {
max-width: 880px;
}
@include grid-media('xl') {
max-width: 980px;
}
}
// Old react paragraphs styles.
div[data-react-columns="12"] {
&.ptype-stanford-card,
&.ptype-stanford-wysiwyg,
&.ptype-stanford-media-caption,
&.ptype-stanford-cta-list,
&.ptype-stanford-stories,
&.ptype-stanford-image-cta,
&.ptype-stanford-lists,
&.ptype-stanford-entity,
&.ptype-stanford-gallery {
max-width: 980px;
@include grid-media-only('lg') {
margin-left: auto;
margin-right: auto;
max-width: 880px;
}
}
&.ptype-stanford-card {
img {
width: 100%;
}
}
}
}
.jumpstart-ui {
&--three-column,
&--two-column {
// Hide secondary navigation on mobile.
.left-region {
.menu--main {
@include grid-media-max('md') {
display: none;
}
}
}
// Add some extra space between the main-region and the left-region.
> .left-region + .main-region {
@include grid-media('xl') {
@include padding(null null null 80px);
}
}
}
}
.node-stanford-page-su-page-banner {
@include modular-spacing('margin-bottom', 4);
}
.paragraph--type--stanford-gallery,
.ptype-stanford-gallery {
h2 {
@include margin(0);
text-align: center;
}
}
// Make the people referenced entity pictures circles.
.su-person-photo {
@include margin(0 auto);
@include padding(30px);
max-width: 300px;
picture,
img {
border-radius: 50%;
}
}
.ds-entity--stanford-person {
text-align: center;
h3 {
font-size: 1.4em;
margin-bottom: 1.0rem;
}
}
.su-list-unstyled {
li {
@include modular-spacing('margin-bottom', 4);
}
a {
color: $su-color-bright-red;
&:active,
&:focus,
&:hover {
color: $su-color-black;
text-decoration: underline;
}
}
}
.ptype-stanford-entity,
.paragraph--type--stanford-entity,
.stanford-shared-tags {
.su-entity-headline {
h2 {
@include margin(0);
text-align: center;
}
}
.su-entity-item {
> div {
@include modular-spacing('margin-bottom', 4);
}
a {
color: $su-color-bright-red;
&:active,
&:focus,
&:hover {
color: $su-color-black;
text-decoration: underline;
}
}
}
&[data-react-columns="12"],
.layout--layout-paragraphs-one-column & {
.su-entity-item {
& > div:first-child:last-child {
.ds-entity--stanford-person {
@include grid-media('sm') {
.su-card {
display: flex;
}
.su-person-photo {
width: 25%;
flex: 1;
@include margin(3rem);
}
.su-card__contents {
flex: 1;
@include margin(auto);
}
}
}
}
}
@include grid-media('lg') {
.su-entity-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> div {
@include margin(0);
width: calc(33% - 40px);
&:nth-child(1):nth-last-child(1) {
width: 100%;
}
&:nth-child(1):nth-last-child(2),
&:nth-child(2):nth-last-child(1) {
width: calc(50% - 40px);
}
&:nth-child(n+4) {
@include modular-spacing('margin-top', 4);
}
}
}
}
}
.su-entity-button {
display: flex;
justify-content: center;
}
// Publication teasers
.ds-entity--stanford-publication {
.su-card__contents {
> h2,
h3 {
margin: 0;
@include responsive-spacing('margin-bottom', 2);
color: $su-color-black;
display: inline-block;
font-weight: $su-font-bold;
&::after {
@include modular-spacing('margin-left', -1);
background-color: $su-color-bright-red;
}
a {
@include link-icon(caret-right, 1.2rem, right);
color: $su-color-black;
&::after {
background-color: $su-color-bright-red;
}
&:hover,
&:focus,
&:active {
color: $su-color-bright-red;
text-decoration: underline;
&::after {
background-color: $su-color-bright-red;
}
}
}
}
h3 {
font-size: 1.4em;
}
.su-publication-topics {
ul {
list-style: none;
margin: 0;
padding: 0;
li {
display: inline-block;
}
}
a {
@include small-paragraph;
color: $su-color-bright-red;
font-weight: $su-font-regular;
text-decoration: none;
&:active,
&:focus,
&:hover {
color: $su-color-black;
text-decoration: underline;
}
}
// adding commas conditionally
li {
&:not(:last-of-type) {
&::after {
content: ",";
padding-right: 5px;
}
}
}
}
}
}
// Policy teasers
.ds-entity--stanford-policy {
h2 {
@include type-c;
}
h3 {
font-size: 1.4em;
}
}
}
.ptype-stanford-lists,
.paragraph--type--stanford-lists {
container: paragraph / inline-size;
.su-list-headline {
h2 {
@include margin(0);
text-align: center;
}
}
.su-list-button {
display: flex;
justify-content: center;
}
@container paragraph (max-width: 600px) {
.stanford-news--cards,
.stanford-events {
.views-view-grid {
.views-col,
.views-row {
@include responsive-spacing('margin-bottom', 4);
padding-top: 0; //for the event padding top on the first item
&:last-of-type {
margin-bottom: 0;
}
}
}
}
.view [class*="grid-container"] {
grid-template-columns: 1fr;
}
// Person grid has a little different need.
.stanford-people-grid {
.views-view-grid {
.views-col,
.views-row {
@include responsive-spacing('margin-bottom', 4);
}
}
.views-view-grid {
.views-row:last-of-type {
margin-bottom: 0;
}
}
}
.views-view-grid .views-row > div {
width: 100%;
max-width: 100%;
flex: none;
&:last-of-type {
margin-bottom: 0;
}
}
.su-news-list__item-date + .su-news-list__item {
.media {
margin-top: 0;
}
}
.su-news-vertical-teaser {
&.su-card {
margin-bottom: inherit;
}
}
// Stack the date above the title on the events lists.
.su-event-list-item {
display: block;
}
.su-news-list,
.su-basic-page-types-list {
img,
picture {
display: none;
}
}
}
&[data-react-columns]:not([data-react-columns="12"]) {
// Views-row for non-grid displays.
// Views-view-grid has some different markup, so it needs some different work.
// this is to remove spacing from the last col and to keep MS4 between the cards.
.stanford-news--cards,
.stanford-events {
.views-view-grid {
.views-col,
.views-row {
@include responsive-spacing('margin-bottom', 4);
padding-top: 0; //for the event padding top on the first item
&:last-of-type {
margin-bottom: 0;
}
}
}
}
.view [class*="grid-container"] {
grid-template-columns: 1fr;
}
// Person grid has a little different need.
.stanford-people-grid {
.views-view-grid {
.views-col,
.views-row {
@include responsive-spacing('margin-bottom', 4);
}
}
.views-view-grid {
.views-row:last-of-type {
margin-bottom: 0;
}
}
}
.views-view-grid .views-row > div {
width: 100%;
max-width: 100%;
flex: none;
&:last-of-type {
margin-bottom: 0;
}
}
.su-news-list__item-date + .su-news-list__item {
.media {
margin-top: 0;
}
}
.su-news-vertical-teaser {
&.su-card {
margin-bottom: inherit;
}
}
// Stack the date above the title on the events lists.
.su-event-list-item {
display: block;
}
.su-news-list,
.su-basic-page-types-list {
img,
picture {
display: none;
}
}
}
//adds margin for the basic page plus when a card in 12 across.
.stanford-basic-pages {
.views-view-grid {
.su-basic-page-types-view-row {
@include responsive-spacing('margin-bottom', 4);
&:last-of-type {
margin-bottom: 0;
}
}
}
}
//adds margin for the basic page plus when a card in 2 or 3 cols.
&.flex-6-of-12,
&.flex-4-of-12 {
.su-basic-page-types-view-column {
@include responsive-spacing('margin-bottom', 4);
&:last-of-type {
margin-bottom: 0;
}
}
}
// Removes the padding top for the first item
// but not on 12 across.
&:not(.flex-12-of-12) {
.stanford-news--list {
div:first-child {
.su-news-list {
@include grid-media-min('xl') {
padding-top: 0;
}
}
}
}
}
// Grid removal for news and people lists in cols
// Grid removal for event spanning dates in cols
&[data-react-columns='4'],
&[data-react-columns='6'] {
.su-news-list__header {
grid-template-columns: 1fr;
}
.stanford-people-grid {
.flex-container {
display: unset;
}
}
.su-event-list-item__date {
align-items: center;
display: flex;
}
}
}
@include grid-media-min('lg') {
.container-1-items,
.container-2-items,
.container-3-items {
.ptype-stanford-lists {
.field--name-su-list-view {
@include responsive-spacing('padding', null 2 null 0);
}
}
}
}
.ds-entity--stanford-event-series {
.su-card {
@include modular-typography(0);
.su-event-series-dek {
display: none;
}
h3 {
font-size: 1.4em;
}
a {
color: $su-color-black;
text-decoration: none;
&:hover,
&:focus {
color: $su-color-bright-red;
text-decoration: underline;
}
}
}
}