From 4c235fa9594896fa2c34da3932af44acc6c5c2ba Mon Sep 17 00:00:00 2001 From: Jen Breese-Kauth Date: Thu, 25 Jun 2020 22:47:30 -0700 Subject: [PATCH 1/9] D8CORE-2129: initial commit for the SOE image CTA styling. Removed the specific to SOE code. --- dist/css/image-cta-paragraph.styles.css | 2 +- lib/scss/components/image-cta/_image_cta.scss | 15 ++++++--------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/dist/css/image-cta-paragraph.styles.css b/dist/css/image-cta-paragraph.styles.css index c4f17dc..a6e2d02 100644 --- a/dist/css/image-cta-paragraph.styles.css +++ b/dist/css/image-cta-paragraph.styles.css @@ -1 +1 @@ -@media only screen and (max-width:767px) and (min-width:0){.su-image-cta-paragraph{margin-bottom:2.31rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-image-cta-paragraph{margin-bottom:2.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:2.74rem}}@media only screen and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__image{margin-bottom:1.6rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__image{margin-bottom:1.8rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__image{margin-bottom:1.9rem}}@media (max-width:767px){.su-image-cta-paragraph .su-image-cta-paragraph__image{display:none}}@media only screen and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:11.4rem}}.su-image-cta-paragraph .su-image-cta-paragraph__link a{color:#b1040e;text-decoration:none}.su-image-cta-paragraph .su-image-cta-paragraph__link a:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link a:hover{color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after{background-color:#b1040e}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link:after:hover{background-color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:active{background-color:#b1040e}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:8rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:9rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:9.5rem}}@media only screen and (max-width:767px) and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.6rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.8rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.9rem}} \ No newline at end of file +@media only screen and (min-width:0){.su-image-cta-paragraph{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:11.4rem}}@media only screen and (max-width:767px) and (min-width:0){.su-image-cta-paragraph{margin-bottom:2.31rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-image-cta-paragraph{margin-bottom:2.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:2.74rem}}@media (max-width:767px){.su-image-cta-paragraph .su-image-cta-paragraph__image{display:none}}@media only screen and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.6rem 2.31rem 2.31rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.8rem 2.6rem 2.6rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.9rem 2.74rem 2.74rem}}.su-image-cta-paragraph .su-image-cta-paragraph__link a{color:#b1040e;text-decoration:none}.su-image-cta-paragraph .su-image-cta-paragraph__link a:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link a:hover{color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after{background-color:#b1040e}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link:after:hover{background-color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:active{background-color:#b1040e}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:8rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:9rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:9.5rem}}@media only screen and (max-width:767px) and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.6rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.8rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.9rem}} \ No newline at end of file diff --git a/lib/scss/components/image-cta/_image_cta.scss b/lib/scss/components/image-cta/_image_cta.scss index 00d0771..9fdd1d8 100644 --- a/lib/scss/components/image-cta/_image_cta.scss +++ b/lib/scss/components/image-cta/_image_cta.scss @@ -1,21 +1,20 @@ @charset 'UTF-8'; .su-image-cta-paragraph { + @include modular-spacing('margin-bottom', 7); @include grid-media-between('xs', 'sm') { @include modular-spacing('margin-bottom', 1); - }; + } .su-image-cta-paragraph__image { - @include modular-spacing('margin-bottom', 0); - @include grid-media-between('xs', 'sm') { display: none; - }; + } } .su-image-cta-paragraph__link { - @include modular-spacing('margin-bottom', 7); + @include modular-spacing('padding', 0 1 1 1); a { color: $su-color-bright-red; @@ -48,12 +47,10 @@ @include grid-media-between('md', 'lg') { @include modular-spacing('margin-bottom', 6); - }; + } @include grid-media-between('xs', 'sm') { @include modular-spacing('margin-bottom', 0); - }; - + } } - } From 7a581047763970334e7986b658585e14cc37b66d Mon Sep 17 00:00:00 2001 From: Jen Breese-Kauth Date: Fri, 26 Jun 2020 16:03:51 -0700 Subject: [PATCH 2/9] D8CORE-2129: fixing up the mobile padding. Needs more work --- dist/css/image-cta-paragraph.styles.css | 2 +- lib/scss/components/image-cta/_image_cta.scss | 12 ++++-------- .../templates/image-cta-paragraph.html.twig | 6 ++++-- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/dist/css/image-cta-paragraph.styles.css b/dist/css/image-cta-paragraph.styles.css index a6e2d02..4ca7207 100644 --- a/dist/css/image-cta-paragraph.styles.css +++ b/dist/css/image-cta-paragraph.styles.css @@ -1 +1 @@ -@media only screen and (min-width:0){.su-image-cta-paragraph{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:11.4rem}}@media only screen and (max-width:767px) and (min-width:0){.su-image-cta-paragraph{margin-bottom:2.31rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-image-cta-paragraph{margin-bottom:2.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:2.74rem}}@media (max-width:767px){.su-image-cta-paragraph .su-image-cta-paragraph__image{display:none}}@media only screen and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.6rem 2.31rem 2.31rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.8rem 2.6rem 2.6rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.9rem 2.74rem 2.74rem}}.su-image-cta-paragraph .su-image-cta-paragraph__link a{color:#b1040e;text-decoration:none}.su-image-cta-paragraph .su-image-cta-paragraph__link a:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link a:hover{color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after{background-color:#b1040e}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link:after:hover{background-color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:active{background-color:#b1040e}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:8rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:9rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:9.5rem}}@media only screen and (max-width:767px) and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.6rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.8rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{margin-bottom:1.9rem}} \ No newline at end of file +@media only screen and (min-width:0){.su-image-cta-paragraph{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:11.4rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:0){.su-image-cta-paragraph{margin-bottom:8rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:768px){.su-image-cta-paragraph{margin-bottom:9rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:9.5rem}}@media only screen and (max-width:767px) and (min-width:0){.su-image-cta-paragraph{margin-bottom:2.31rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-image-cta-paragraph{margin-bottom:2.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:2.74rem}}@media (max-width:767px){.su-image-cta-paragraph .su-image-cta-paragraph__image{display:none}}@media only screen and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.6rem 2.31rem 2.31rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.8rem 2.6rem 2.6rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.9rem 2.74rem 2.74rem}}.su-image-cta-paragraph .su-image-cta-paragraph__link a{color:#b1040e;text-decoration:none}.su-image-cta-paragraph .su-image-cta-paragraph__link a:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link a:hover{color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after{background-color:#b1040e}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link:after:hover{background-color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:active{background-color:#b1040e} \ No newline at end of file diff --git a/lib/scss/components/image-cta/_image_cta.scss b/lib/scss/components/image-cta/_image_cta.scss index 9fdd1d8..72885e6 100644 --- a/lib/scss/components/image-cta/_image_cta.scss +++ b/lib/scss/components/image-cta/_image_cta.scss @@ -3,6 +3,10 @@ .su-image-cta-paragraph { @include modular-spacing('margin-bottom', 7); + @include grid-media-between('md', 'lg') { + @include modular-spacing('margin-bottom', 6); + } + @include grid-media-between('xs', 'sm') { @include modular-spacing('margin-bottom', 1); } @@ -44,13 +48,5 @@ background-color: $su-color-bright-red; } } - - @include grid-media-between('md', 'lg') { - @include modular-spacing('margin-bottom', 6); - } - - @include grid-media-between('xs', 'sm') { - @include modular-spacing('margin-bottom', 0); - } } } diff --git a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig index 49e8076..22f64a6 100644 --- a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig +++ b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig @@ -12,8 +12,10 @@ * */ #} - {%- set attributes = attributes.addClass(['su-image-cta-paragraph', modifier_class]) -%} + - {{ paragraph_content }} + + {{ paragraph_content }} + From 5be0d41aa8d8cb1730ca9a409cf2bf8b77ae8cf2 Mon Sep 17 00:00:00 2001 From: Ian Monroe Date: Thu, 2 Jul 2020 11:44:28 -0600 Subject: [PATCH 3/9] D8CORE-2129: changed Image CTA so the image was clickable --- ...y.paragraph.stanford_image_cta.default.yml | 26 +++++++++++++------ .../templates/image-cta-paragraph.html.twig | 17 +++++++++--- .../image-cta-paragraph.ui_patterns.yml | 6 ++++- 3 files changed, 36 insertions(+), 13 deletions(-) diff --git a/modules/soe_paragraph_image_cta/config/install/core.entity_view_display.paragraph.stanford_image_cta.default.yml b/modules/soe_paragraph_image_cta/config/install/core.entity_view_display.paragraph.stanford_image_cta.default.yml index cdb637b..821ddfd 100644 --- a/modules/soe_paragraph_image_cta/config/install/core.entity_view_display.paragraph.stanford_image_cta.default.yml +++ b/modules/soe_paragraph_image_cta/config/install/core.entity_view_display.paragraph.stanford_image_cta.default.yml @@ -22,8 +22,9 @@ third_party_settings: field_templates: default variant: default regions: - paragraph_content: + image: - stanford_image_cta_image + link: - stanford_image_cta_link id: paragraph.stanford_image_cta.default targetEntityType: paragraph @@ -31,29 +32,38 @@ bundle: stanford_image_cta mode: default content: stanford_image_cta_image: - type: media_image_formatter + type: media_multimedia_formatter weight: 0 label: hidden settings: view_mode: default - image_style: card_2_1 link: false + image: + image_formatter: image_style + image_formatter_image_style: large + image_formatter_responsive_image_style: full_responsive + image_formatter_view_mode: default + video: + video_formatter: entity + video_formatter_view_mode: default + other: + view_mode: default third_party_settings: field_formatter_class: - class: su-image-cta-paragraph--image - region: paragraph_content + class: su-image-cta-paragraph__image + region: image stanford_image_cta_link: type: link weight: 1 - region: paragraph_content + region: link label: hidden settings: - trim_length: 80 + trim_length: null url_only: false url_plain: false rel: '0' target: '0' third_party_settings: field_formatter_class: - class: 'su-link--action su-image-cta-paragraph--link' + class: 'su-link--action su-image-cta-paragraph__link' hidden: { } diff --git a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig index 22f64a6..d416b99 100644 --- a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig +++ b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig @@ -8,14 +8,23 @@ * * Available variables: * - * {{ paragraph_content }} + * {{ image }} + * {{ link }} * + + {{ paragraph_content.stanford_image_cta_link[0]['#url']|render|striptags|trim }} */ #} +{%- set field_keys = link|keys -%} +{%- set field_name = field_keys[0] -%} +{%- set link_uri = link[field_name][0]['#url']|render|striptags|trim -%} {%- set attributes = attributes.addClass(['su-image-cta-paragraph', modifier_class]) -%} - - {{ paragraph_content }} - + {% if link|render|striptags is not empty %} + {{ link(image, link_uri) }} + {% else %} + {{ image }} + {% endif %} + {{ link }} diff --git a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.ui_patterns.yml b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.ui_patterns.yml index 17c212f..8c28f2f 100644 --- a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.ui_patterns.yml +++ b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.ui_patterns.yml @@ -6,10 +6,14 @@ image-cta-paragraph: label: Minimal description: "Minimal" fields: - paragraph_content: + image: type: text label: "Content" description: "The image to display for the Paragraph" + link: + type: text + label: "Link" + description: "The link to use" use: "@soe_paragraph_image_cta/image-cta-paragraph.html.twig" libraries: - image-cta-paragraph: From c0fa074e6f7dd04cdb50b171f896ea3f935e305e Mon Sep 17 00:00:00 2001 From: Jen Breese-Kauth Date: Thu, 2 Jul 2020 14:00:16 -0700 Subject: [PATCH 4/9] D8CORE-2129: fixup for responsive --- dist/css/image-cta-paragraph.styles.css | 2 +- lib/scss/components/cta-list/_cta-list.scss | 2 +- lib/scss/components/image-cta/_image_cta.scss | 23 ++++++++++++------- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/dist/css/image-cta-paragraph.styles.css b/dist/css/image-cta-paragraph.styles.css index 4ca7207..e1255e2 100644 --- a/dist/css/image-cta-paragraph.styles.css +++ b/dist/css/image-cta-paragraph.styles.css @@ -1 +1 @@ -@media only screen and (min-width:0){.su-image-cta-paragraph{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:11.4rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:0){.su-image-cta-paragraph{margin-bottom:8rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:768px){.su-image-cta-paragraph{margin-bottom:9rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:9.5rem}}@media only screen and (max-width:767px) and (min-width:0){.su-image-cta-paragraph{margin-bottom:2.31rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-image-cta-paragraph{margin-bottom:2.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-image-cta-paragraph{margin-bottom:2.74rem}}@media (max-width:767px){.su-image-cta-paragraph .su-image-cta-paragraph__image{display:none}}@media only screen and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.6rem 2.31rem 2.31rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.8rem 2.6rem 2.6rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.9rem 2.74rem 2.74rem}}.su-image-cta-paragraph .su-image-cta-paragraph__link a{color:#b1040e;text-decoration:none}.su-image-cta-paragraph .su-image-cta-paragraph__link a:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link a:hover{color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after{background-color:#b1040e}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link:after:hover{background-color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:active{background-color:#b1040e} \ No newline at end of file +@media only screen and (min-width:0){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:11.4rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:0){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:8rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:768px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:9rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:1500px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:9.5rem}}@media only screen and (max-width:767px) and (min-width:0){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:2.31rem}}@media only screen and (max-width:767px) and (min-width:768px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:2.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:2.74rem}}@media (max-width:767px){.su-image-cta-paragraph .su-image-cta-paragraph__image{display:none}}@media only screen and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.6rem 2.31rem 2.31rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.8rem 2.6rem 2.6rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.9rem 2.74rem 2.74rem}}.su-image-cta-paragraph .su-image-cta-paragraph__link a{color:#b1040e;text-decoration:none}.su-image-cta-paragraph .su-image-cta-paragraph__link a:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link a:hover{color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after{background-color:#b1040e}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link:after:hover{background-color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:active{background-color:#b1040e} \ No newline at end of file diff --git a/lib/scss/components/cta-list/_cta-list.scss b/lib/scss/components/cta-list/_cta-list.scss index 925c724..f0d9e70 100644 --- a/lib/scss/components/cta-list/_cta-list.scss +++ b/lib/scss/components/cta-list/_cta-list.scss @@ -15,7 +15,7 @@ .su-cta-list-paragraph__header { @include type-c; - font-weight: 700; + font-weight: $su-font-bold; @include modular-spacing('margin-bottom', 1); } diff --git a/lib/scss/components/image-cta/_image_cta.scss b/lib/scss/components/image-cta/_image_cta.scss index 72885e6..1a65829 100644 --- a/lib/scss/components/image-cta/_image_cta.scss +++ b/lib/scss/components/image-cta/_image_cta.scss @@ -1,15 +1,22 @@ @charset 'UTF-8'; -.su-image-cta-paragraph { - @include modular-spacing('margin-bottom', 7); - - @include grid-media-between('md', 'lg') { - @include modular-spacing('margin-bottom', 6); - } +// Getting the correct margins for responsive sizing. +.content { + .paragraph-item { + &.ptype-stanford-image-cta { + @include modular-spacing('margin', null null 7 null); + + @include grid-media-between('md', 'lg') { + @include modular-spacing('margin', null null 6 null); + } - @include grid-media-between('xs', 'sm') { - @include modular-spacing('margin-bottom', 1); + @include grid-media-between('xs', 'sm') { + @include modular-spacing('margin', null null 1 null); + } + } } +} +.su-image-cta-paragraph { .su-image-cta-paragraph__image { @include grid-media-between('xs', 'sm') { From 52c57884b4bd77463074dd850b381a19b7e512d2 Mon Sep 17 00:00:00 2001 From: Ian Monroe Date: Mon, 6 Jul 2020 09:05:23 -0600 Subject: [PATCH 5/9] D8CORE-2129: fixed internal links and one codeclimate issue. --- lib/scss/components/image-cta/_image_cta.scss | 1 + .../templates/image-cta-paragraph.html.twig | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/scss/components/image-cta/_image_cta.scss b/lib/scss/components/image-cta/_image_cta.scss index 1a65829..cbd048d 100644 --- a/lib/scss/components/image-cta/_image_cta.scss +++ b/lib/scss/components/image-cta/_image_cta.scss @@ -16,6 +16,7 @@ } } } + .su-image-cta-paragraph { .su-image-cta-paragraph__image { diff --git a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig index d416b99..b953571 100644 --- a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig +++ b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig @@ -17,7 +17,10 @@ #} {%- set field_keys = link|keys -%} {%- set field_name = field_keys[0] -%} -{%- set link_uri = link[field_name][0]['#url']|render|striptags|trim -%} + +{%- set field_info = links[field_name] -%} +{%- set field_items = field_info["#items"] -%} +{%- set link_uri = link[field_name]['#items'][0].uri -%} {%- set attributes = attributes.addClass(['su-image-cta-paragraph', modifier_class]) -%} From b39b946bdc30c9febd32208c93a89fa332b4d06c Mon Sep 17 00:00:00 2001 From: Ian Monroe Date: Mon, 6 Jul 2020 11:42:04 -0600 Subject: [PATCH 6/9] D8CORE-2129: fixup! --- .../templates/image-cta-paragraph.html.twig | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig index b953571..b90769f 100644 --- a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig +++ b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig @@ -17,10 +17,9 @@ #} {%- set field_keys = link|keys -%} {%- set field_name = field_keys[0] -%} - {%- set field_info = links[field_name] -%} {%- set field_items = field_info["#items"] -%} -{%- set link_uri = link[field_name]['#items'][0].uri -%} +{%- set link_uri = field_items[0].uri -%} {%- set attributes = attributes.addClass(['su-image-cta-paragraph', modifier_class]) -%} From 7ddeed58f654012d5bc330a8064e422f313895c9 Mon Sep 17 00:00:00 2001 From: Ian Monroe Date: Mon, 6 Jul 2020 11:44:21 -0600 Subject: [PATCH 7/9] D8CORE-2129: fixup! --- .../templates/image-cta-paragraph.html.twig | 2 -- 1 file changed, 2 deletions(-) diff --git a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig index b90769f..cf295a4 100644 --- a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig +++ b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig @@ -11,8 +11,6 @@ * {{ image }} * {{ link }} * - - {{ paragraph_content.stanford_image_cta_link[0]['#url']|render|striptags|trim }} */ #} {%- set field_keys = link|keys -%} From 38ba0b166c51b2d88137580a5a4a51b52063a22c Mon Sep 17 00:00:00 2001 From: Ian Monroe Date: Wed, 8 Jul 2020 21:30:29 -0600 Subject: [PATCH 8/9] D8CORE-2242: fixing template, recompile css --- dist/css/cta-list-paragraph.styles.css | 200 +++++++++- dist/css/image-cta-paragraph.styles.css | 81 +++- dist/css/soe_paragraphs.styles.css | 3 + dist/css/stories-paragraph.styles.css | 350 +++++++++++++++++- dist/js/soe_paragraphs.script.js | 132 ++++++- .../templates/image-cta-paragraph.html.twig | 8 +- 6 files changed, 764 insertions(+), 10 deletions(-) diff --git a/dist/css/cta-list-paragraph.styles.css b/dist/css/cta-list-paragraph.styles.css index d8d586d..018d9a1 100644 --- a/dist/css/cta-list-paragraph.styles.css +++ b/dist/css/cta-list-paragraph.styles.css @@ -1 +1,199 @@ -.su-cta-list-paragraph{border-top:1px solid #d2d3d4}@media only screen and (min-width:0){.su-cta-list-paragraph{padding-top:4rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph{padding-top:4.5rem}}@media only screen and (min-width:1500px){.su-cta-list-paragraph{padding-top:4.75rem}}@media only screen and (min-width:0){.su-cta-list-paragraph{padding-left:3.2rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph{padding-left:3.6rem}}@media only screen and (min-width:1500px){.su-cta-list-paragraph{padding-left:3.8rem}}@media only screen and (min-width:0){.su-cta-list-paragraph{padding-right:3.2rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph{padding-right:3.6rem}}@media only screen and (min-width:1500px){.su-cta-list-paragraph{padding-right:3.8rem}}@media only screen and (max-width:991px) and (min-width:0){.su-cta-list-paragraph{padding-left:1.6rem}}@media only screen and (max-width:991px) and (min-width:768px){.su-cta-list-paragraph{padding-left:1.8rem}}@media only screen and (max-width:991px) and (min-width:1500px){.su-cta-list-paragraph{padding-left:1.9rem}}@media only screen and (max-width:991px) and (min-width:0){.su-cta-list-paragraph{padding-right:1.6rem}}@media only screen and (max-width:991px) and (min-width:768px){.su-cta-list-paragraph{padding-right:1.8rem}}@media only screen and (max-width:991px) and (min-width:1500px){.su-cta-list-paragraph{padding-right:1.9rem}}.su-cta-list-paragraph .su-cta-list-paragraph__header{font-size:1.5625em;letter-spacing:-.012em;font-weight:700}@media only screen and (min-width:0){.su-cta-list-paragraph .su-cta-list-paragraph__header{margin-bottom:2.31rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph .su-cta-list-paragraph__header{margin-bottom:2.6rem}}@media only screen and (min-width:1500px){.su-cta-list-paragraph .su-cta-list-paragraph__header{margin-bottom:2.74rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph .su-cta-list-paragraph__description{font-size:2.1rem;line-height:1.7}}@media only screen and (min-width:0){.su-cta-list-paragraph .su-cta-list-paragraph__description{margin-bottom:4rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph .su-cta-list-paragraph__description{margin-bottom:4.5rem}}@media only screen and (min-width:1500px){.su-cta-list-paragraph .su-cta-list-paragraph__description{margin-bottom:4.75rem}}.su-cta-list-paragraph .su-cta-list__links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%}@media only screen and (min-width:0) and (max-width:575px){.su-cta-list-paragraph .su-cta-list__links{display:block;width:100%}}@media only screen and (min-width:0) and (max-width:575px) and (min-width:0){.su-cta-list-paragraph .su-cta-list__links{padding-bottom:2.31rem}}@media only screen and (min-width:0) and (max-width:575px) and (min-width:768px){.su-cta-list-paragraph .su-cta-list__links{padding-bottom:2.6rem}}@media only screen and (min-width:0) and (max-width:575px) and (min-width:1500px){.su-cta-list-paragraph .su-cta-list__links{padding-bottom:2.74rem}}.su-cta-list-paragraph .su-cta-list__links .su-link--action{display:block;width:100%}@media only screen and (min-width:0){.su-cta-list-paragraph .su-cta-list__links .su-link--action{margin-bottom:2.31rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph .su-cta-list__links .su-link--action{margin-bottom:2.6rem}}@media only screen and (min-width:1500px){.su-cta-list-paragraph .su-cta-list__links .su-link--action{margin-bottom:2.74rem}}.su-cta-list-paragraph .su-cta-list__links .col-1{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:200px}@media only screen and (min-width:0){.su-cta-list-paragraph .su-cta-list__links .col-1{margin-right:2.31rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph .su-cta-list__links .col-1{margin-right:2.6rem}}@media only screen and (min-width:1500px){.su-cta-list-paragraph .su-cta-list__links .col-1{margin-right:2.74rem}}.su-cta-list-paragraph .su-cta-list__links .col-1 a{color:#b1040e}.su-cta-list-paragraph .su-cta-list__links .col-1 a:after,.su-cta-list-paragraph .su-cta-list__links .col-1 a:after:active,.su-cta-list-paragraph .su-cta-list__links .col-1 a:after:focus,.su-cta-list-paragraph .su-cta-list__links .col-1 a:after:hover{background-color:#b1040e}@media only screen and (min-width:0) and (max-width:575px){.su-cta-list-paragraph .su-cta-list__links .col-1{display:block;width:100%}}.su-cta-list-paragraph .su-cta-list__links .col-2{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}@media only screen and (min-width:0){.su-cta-list-paragraph .su-cta-list__links .col-2{margin-right:9.6rem}}@media only screen and (min-width:768px){.su-cta-list-paragraph .su-cta-list__links .col-2{margin-right:10.8rem}}@media only screen and (min-width:1500px){.su-cta-list-paragraph .su-cta-list__links .col-2{margin-right:11.4rem}}.su-cta-list-paragraph .su-cta-list__links .col-2 a{color:#b1040e}.su-cta-list-paragraph .su-cta-list__links .col-2 a:after,.su-cta-list-paragraph .su-cta-list__links .col-2 a:after:active,.su-cta-list-paragraph .su-cta-list__links .col-2 a:after:focus,.su-cta-list-paragraph .su-cta-list__links .col-2 a:after:hover{background-color:#b1040e}@media (max-width:1199px){.su-cta-list-paragraph .su-cta-list__links .col-2{min-width:150px}}@media only screen and (max-width:1199px) and (min-width:0){.su-cta-list-paragraph .su-cta-list__links .col-2{margin-right:2.31rem}}@media only screen and (max-width:1199px) and (min-width:768px){.su-cta-list-paragraph .su-cta-list__links .col-2{margin-right:2.6rem}}@media only screen and (max-width:1199px) and (min-width:1500px){.su-cta-list-paragraph .su-cta-list__links .col-2{margin-right:2.74rem}}@media only screen and (min-width:0) and (max-width:575px){.su-cta-list-paragraph .su-cta-list__links .col-2{display:block;width:100%}} \ No newline at end of file +.su-cta-list-paragraph { + border-top: 1px solid #d2d3d4; } + @media only screen and (min-width: 0) { + .su-cta-list-paragraph { + padding-top: 4rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph { + padding-top: 4.5rem; } } + @media only screen and (min-width: 1500px) { + .su-cta-list-paragraph { + padding-top: 4.75rem; } } + @media only screen and (min-width: 0) { + .su-cta-list-paragraph { + padding-left: 3.2rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph { + padding-left: 3.6rem; } } + @media only screen and (min-width: 1500px) { + .su-cta-list-paragraph { + padding-left: 3.8rem; } } + @media only screen and (min-width: 0) { + .su-cta-list-paragraph { + padding-right: 3.2rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph { + padding-right: 3.6rem; } } + @media only screen and (min-width: 1500px) { + .su-cta-list-paragraph { + padding-right: 3.8rem; } } + +@media only screen and (max-width: 991px) and (min-width: 0) { + .su-cta-list-paragraph { + padding-left: 1.6rem; } } + +@media only screen and (max-width: 991px) and (min-width: 768px) { + .su-cta-list-paragraph { + padding-left: 1.8rem; } } + +@media only screen and (max-width: 991px) and (min-width: 1500px) { + .su-cta-list-paragraph { + padding-left: 1.9rem; } } + +@media only screen and (max-width: 991px) and (min-width: 0) { + .su-cta-list-paragraph { + padding-right: 1.6rem; } } + +@media only screen and (max-width: 991px) and (min-width: 768px) { + .su-cta-list-paragraph { + padding-right: 1.8rem; } } + +@media only screen and (max-width: 991px) and (min-width: 1500px) { + .su-cta-list-paragraph { + padding-right: 1.9rem; } } + .su-cta-list-paragraph .su-cta-list-paragraph__header { + font-size: 1.5625em; + letter-spacing: -0.012em; + font-weight: 700; } + @media only screen and (min-width: 0) { + .su-cta-list-paragraph .su-cta-list-paragraph__header { + margin-bottom: 2.31rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph .su-cta-list-paragraph__header { + margin-bottom: 2.6rem; } } + @media only screen and (min-width: 1500px) { + .su-cta-list-paragraph .su-cta-list-paragraph__header { + margin-bottom: 2.74rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph .su-cta-list-paragraph__description { + font-size: 2.1rem; + line-height: 1.7; } } + @media only screen and (min-width: 0) { + .su-cta-list-paragraph .su-cta-list-paragraph__description { + margin-bottom: 4rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph .su-cta-list-paragraph__description { + margin-bottom: 4.5rem; } } + @media only screen and (min-width: 1500px) { + .su-cta-list-paragraph .su-cta-list-paragraph__description { + margin-bottom: 4.75rem; } } + .su-cta-list-paragraph .su-cta-list__links { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 100%; } + @media only screen and (min-width: 0) and (max-width: 575px) { + .su-cta-list-paragraph .su-cta-list__links { + display: block; + width: 100%; } } + @media only screen and (min-width: 0) and (max-width: 575px) and (min-width: 0) { + .su-cta-list-paragraph .su-cta-list__links { + padding-bottom: 2.31rem; } } + @media only screen and (min-width: 0) and (max-width: 575px) and (min-width: 768px) { + .su-cta-list-paragraph .su-cta-list__links { + padding-bottom: 2.6rem; } } + @media only screen and (min-width: 0) and (max-width: 575px) and (min-width: 1500px) { + .su-cta-list-paragraph .su-cta-list__links { + padding-bottom: 2.74rem; } } + .su-cta-list-paragraph .su-cta-list__links .su-link--action { + display: block; + width: 100%; } + @media only screen and (min-width: 0) { + .su-cta-list-paragraph .su-cta-list__links .su-link--action { + margin-bottom: 2.31rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph .su-cta-list__links .su-link--action { + margin-bottom: 2.6rem; } } + @media only screen and (min-width: 1500px) { + .su-cta-list-paragraph .su-cta-list__links .su-link--action { + margin-bottom: 2.74rem; } } + .su-cta-list-paragraph .su-cta-list__links .col-1 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 200px; } + @media only screen and (min-width: 0) { + .su-cta-list-paragraph .su-cta-list__links .col-1 { + margin-right: 2.31rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph .su-cta-list__links .col-1 { + margin-right: 2.6rem; } } + @media only screen and (min-width: 1500px) { + .su-cta-list-paragraph .su-cta-list__links .col-1 { + margin-right: 2.74rem; } } + .su-cta-list-paragraph .su-cta-list__links .col-1 a { + color: #b1040e; } + .su-cta-list-paragraph .su-cta-list__links .col-1 a::after { + background-color: #b1040e; } + .su-cta-list-paragraph .su-cta-list__links .col-1 a::after:hover { + background-color: #b1040e; } + .su-cta-list-paragraph .su-cta-list__links .col-1 a::after:focus { + background-color: #b1040e; } + .su-cta-list-paragraph .su-cta-list__links .col-1 a::after:active { + background-color: #b1040e; } + @media only screen and (min-width: 0) and (max-width: 575px) { + .su-cta-list-paragraph .su-cta-list__links .col-1 { + display: block; + width: 100%; } } + .su-cta-list-paragraph .su-cta-list__links .col-2 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } + @media only screen and (min-width: 0) { + .su-cta-list-paragraph .su-cta-list__links .col-2 { + margin-right: 9.6rem; } } + @media only screen and (min-width: 768px) { + .su-cta-list-paragraph .su-cta-list__links .col-2 { + margin-right: 10.8rem; } } + @media only screen and (min-width: 1500px) { + .su-cta-list-paragraph .su-cta-list__links .col-2 { + margin-right: 11.4rem; } } + .su-cta-list-paragraph .su-cta-list__links .col-2 a { + color: #b1040e; } + .su-cta-list-paragraph .su-cta-list__links .col-2 a::after { + background-color: #b1040e; } + .su-cta-list-paragraph .su-cta-list__links .col-2 a::after:hover { + background-color: #b1040e; } + .su-cta-list-paragraph .su-cta-list__links .col-2 a::after:focus { + background-color: #b1040e; } + .su-cta-list-paragraph .su-cta-list__links .col-2 a::after:active { + background-color: #b1040e; } + @media (max-width: 1199px) { + .su-cta-list-paragraph .su-cta-list__links .col-2 { + min-width: 150px; } } + @media only screen and (max-width: 1199px) and (min-width: 0) { + .su-cta-list-paragraph .su-cta-list__links .col-2 { + margin-right: 2.31rem; } } + @media only screen and (max-width: 1199px) and (min-width: 768px) { + .su-cta-list-paragraph .su-cta-list__links .col-2 { + margin-right: 2.6rem; } } + @media only screen and (max-width: 1199px) and (min-width: 1500px) { + .su-cta-list-paragraph .su-cta-list__links .col-2 { + margin-right: 2.74rem; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .su-cta-list-paragraph .su-cta-list__links .col-2 { + display: block; + width: 100%; } } + + +/*# sourceMappingURL=cta-list-paragraph.styles.css.map*/ \ No newline at end of file diff --git a/dist/css/image-cta-paragraph.styles.css b/dist/css/image-cta-paragraph.styles.css index e1255e2..4c91f90 100644 --- a/dist/css/image-cta-paragraph.styles.css +++ b/dist/css/image-cta-paragraph.styles.css @@ -1 +1,80 @@ -@media only screen and (min-width:0){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:11.4rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:0){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:8rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:768px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:9rem}}@media only screen and (min-width:768px) and (max-width:1199px) and (min-width:1500px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:9.5rem}}@media only screen and (max-width:767px) and (min-width:0){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:2.31rem}}@media only screen and (max-width:767px) and (min-width:768px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:2.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.content .paragraph-item.ptype-stanford-image-cta{margin-bottom:2.74rem}}@media (max-width:767px){.su-image-cta-paragraph .su-image-cta-paragraph__image{display:none}}@media only screen and (min-width:0){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.6rem 2.31rem 2.31rem}}@media only screen and (min-width:768px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.8rem 2.6rem 2.6rem}}@media only screen and (min-width:1500px){.su-image-cta-paragraph .su-image-cta-paragraph__link{padding:1.9rem 2.74rem 2.74rem}}.su-image-cta-paragraph .su-image-cta-paragraph__link a{color:#b1040e;text-decoration:none}.su-image-cta-paragraph .su-image-cta-paragraph__link a:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link a:hover{color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after{background-color:#b1040e}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:focus,.su-image-cta-paragraph .su-image-cta-paragraph__link:after:hover{background-color:#2e2d29}.su-image-cta-paragraph .su-image-cta-paragraph__link:after:active{background-color:#b1040e} \ No newline at end of file +@media only screen and (min-width: 0) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 9.6rem; } } + +@media only screen and (min-width: 768px) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 10.8rem; } } + +@media only screen and (min-width: 1500px) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 11.4rem; } } + +@media only screen and (min-width: 768px) and (max-width: 1199px) and (min-width: 0) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 8rem; } } + +@media only screen and (min-width: 768px) and (max-width: 1199px) and (min-width: 768px) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 9rem; } } + +@media only screen and (min-width: 768px) and (max-width: 1199px) and (min-width: 1500px) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 9.5rem; } } + +@media only screen and (max-width: 767px) and (min-width: 0) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 2.31rem; } } + +@media only screen and (max-width: 767px) and (min-width: 768px) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 2.6rem; } } + +@media only screen and (max-width: 767px) and (min-width: 1500px) { + .content .paragraph-item.ptype-stanford-image-cta { + margin-bottom: 2.74rem; } } + +@media (max-width: 767px) { + .su-image-cta-paragraph .su-image-cta-paragraph__image { + display: none; } } + +@media only screen and (min-width: 0) { + .su-image-cta-paragraph .su-image-cta-paragraph__link { + padding-top: 1.6rem; + padding-right: 2.31rem; + padding-bottom: 2.31rem; + padding-left: 2.31rem; } } + +@media only screen and (min-width: 768px) { + .su-image-cta-paragraph .su-image-cta-paragraph__link { + padding-top: 1.8rem; + padding-right: 2.6rem; + padding-bottom: 2.6rem; + padding-left: 2.6rem; } } + +@media only screen and (min-width: 1500px) { + .su-image-cta-paragraph .su-image-cta-paragraph__link { + padding-top: 1.9rem; + padding-right: 2.74rem; + padding-bottom: 2.74rem; + padding-left: 2.74rem; } } + +.su-image-cta-paragraph .su-image-cta-paragraph__link a { + color: #b1040e; + text-decoration: none; } + .su-image-cta-paragraph .su-image-cta-paragraph__link a:hover { + color: #2e2d29; } + .su-image-cta-paragraph .su-image-cta-paragraph__link a:focus { + color: #2e2d29; } + +.su-image-cta-paragraph .su-image-cta-paragraph__link::after { + background-color: #b1040e; } + .su-image-cta-paragraph .su-image-cta-paragraph__link::after:hover { + background-color: #2e2d29; } + .su-image-cta-paragraph .su-image-cta-paragraph__link::after:focus { + background-color: #2e2d29; } + .su-image-cta-paragraph .su-image-cta-paragraph__link::after:active { + background-color: #b1040e; } + + +/*# sourceMappingURL=image-cta-paragraph.styles.css.map*/ \ No newline at end of file diff --git a/dist/css/soe_paragraphs.styles.css b/dist/css/soe_paragraphs.styles.css index e69de29..f8bec17 100644 --- a/dist/css/soe_paragraphs.styles.css +++ b/dist/css/soe_paragraphs.styles.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=soe_paragraphs.styles.css.map*/ \ No newline at end of file diff --git a/dist/css/stories-paragraph.styles.css b/dist/css/stories-paragraph.styles.css index c45797f..1727966 100644 --- a/dist/css/stories-paragraph.styles.css +++ b/dist/css/stories-paragraph.styles.css @@ -1 +1,349 @@ -.su-stories-paragraph .su-stories-paragraph__cta-region a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer;display:inline-block;border:0;font-size:2rem;font-weight:400;line-height:1;text-align:center;text-decoration:none;width:auto;-webkit-transition:background-color .25s ease-in-out,color .25s ease-in-out;transition:background-color .25s ease-in-out,color .25s ease-in-out}.su-stories-paragraph .su-stories-paragraph__cta-region a a{font-weight:400;text-decoration:none}.su-stories-paragraph .su-stories-paragraph__cta-region a:active,.su-stories-paragraph .su-stories-paragraph__cta-region a:focus,.su-stories-paragraph .su-stories-paragraph__cta-region a:hover{text-decoration:underline}.su-stories-paragraph{border:1px solid #e3e3e3;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.13),0 3px 6px rgba(0,0,0,.1);box-shadow:0 3px 6px rgba(0,0,0,.13),0 3px 6px rgba(0,0,0,.1);display:block;background-color:#fff}@media only screen and (min-width:0) and (max-width:575px){.su-stories-paragraph figure,.su-stories-paragraph img{display:none}}.su-stories-paragraph .su-card__contents{font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif}@media only screen and (min-width:0){.su-stories-paragraph .su-card__contents{padding:3.2rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-card__contents{padding:3.6rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-card__contents{padding:3.8rem}}.su-stories-paragraph .su-card__contents p{font-size:1.8rem;line-height:1.3}@media (max-width:767px){.su-stories-paragraph .su-card__contents p{font-size:1.6rem}}.su-stories-paragraph .su-card__contents>:first-child{padding-top:0;margin-top:-.3em}.su-stories-paragraph .su-card__contents>:last-child:not(.su-card__button){padding-bottom:0;margin-bottom:0}.su-stories-paragraph .su-card__contents>span{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-top:0;clear:both;font-weight:700;line-height:1.2;font-size:.9em;display:block}@media only screen and (min-width:0){.su-stories-paragraph .su-card__contents>span{margin-bottom:.53rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-card__contents>span{margin-bottom:.6rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-card__contents>span{margin-bottom:.63rem}}.su-stories-paragraph .su-card__contents>span a{text-decoration:none;font-weight:700}.su-stories-paragraph .su-card__contents>h2{font-size:1.5625em;letter-spacing:-.012em}@media only screen and (min-width:0){.su-stories-paragraph .su-card__contents>h2{margin-bottom:1.07rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-card__contents>h2{margin-bottom:1.2rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-card__contents>h2{margin-bottom:1.27rem}}.su-stories-paragraph .su-card__contents>h2>a{font-weight:700;-webkit-transition:color .3s ease-out;transition:color .3s ease-out}.su-stories-paragraph .su-card__contents>h2>a:focus,.su-stories-paragraph .su-card__contents>h2>a:hover{color:#b1040e;text-decoration:underline}.su-stories-paragraph .su-card__contents>div:not(.su-card__button){line-height:1.4}.su-stories-paragraph .su-card__contents>div:not(.su-card__button),.su-stories-paragraph .su-card__contents>p:last-of-type{margin-bottom:0}.su-stories-paragraph .su-card__contents>.su-link--action:not(:first-child),.su-stories-paragraph .su-card__contents>a:not(:first-child){display:inline-block}@media only screen and (min-width:0){.su-stories-paragraph .su-card__contents>.su-link--action:not(:first-child),.su-stories-paragraph .su-card__contents>a:not(:first-child){margin-top:1.07rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-card__contents>.su-link--action:not(:first-child),.su-stories-paragraph .su-card__contents>a:not(:first-child){margin-top:1.2rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-card__contents>.su-link--action:not(:first-child),.su-stories-paragraph .su-card__contents>a:not(:first-child){margin-top:1.27rem}}@media only screen and (min-width:0){.su-stories-paragraph .su-card__button{margin-top:2.31rem;margin-bottom:.53rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-card__button{margin-top:2.6rem;margin-bottom:.6rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-card__button{margin-top:2.74rem;margin-bottom:.63rem}}@media only screen and (min-width:0) and (max-width:575px){.su-stories-paragraph .su-card__button .su-button{width:auto}}.su-stories-paragraph a .su-media__wrapper img{-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.su-stories-paragraph a:focus .su-media__wrapper img,.su-stories-paragraph a:hover .su-media__wrapper img{-webkit-transform:scale(1.03);transform:scale(1.03)}.su-stories-paragraph .su-stories-paragraph__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}@media only screen and (min-width:0){.su-stories-paragraph .su-stories-paragraph__content{padding:3.2rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__content{padding:3.6rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__content{padding:3.8rem}}@media (max-width:767px){.su-stories-paragraph .su-stories-paragraph__content{display:block}}@media only screen and (max-width:767px) and (min-width:0){.su-stories-paragraph .su-stories-paragraph__content{padding-top:1.6rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__content{padding-top:1.8rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__content{padding-top:1.9rem}}.su-stories-paragraph .su-stories-paragraph__photo .stanford-stories-photo-border{display:none}.su-stories-paragraph .su-stories-paragraph__photo.border-color-default img{border:6px solid #000}.su-stories-paragraph .su-stories-paragraph__photo.border-color-1 img{border:6px solid #00ece9}.su-stories-paragraph .su-stories-paragraph__photo.border-color-2 img{border:6px solid #ff525c}.su-stories-paragraph .su-stories-paragraph__photo.border-color-3 img{border:6px solid #ffbd54}.su-stories-paragraph .su-stories-paragraph__photo img{width:290px;height:290px;min-width:290px;min-height:290px;border-radius:50%;overflow:hidden}@media only screen and (min-width:0){.su-stories-paragraph .su-stories-paragraph__photo img{margin-left:3.2rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__photo img{margin-left:3.6rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__photo img{margin-left:3.8rem}}@media only screen and (min-width:0){.su-stories-paragraph .su-stories-paragraph__photo img{margin-right:6.4rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__photo img{margin-right:7.2rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__photo img{margin-right:7.6rem}}@media (min-width:768px) and (max-width:1199px){.su-stories-paragraph .su-stories-paragraph__photo img{width:255px;height:255px;min-width:255px;min-height:255px}}@media (max-width:767px){.su-stories-paragraph .su-stories-paragraph__photo img{display:block;margin-left:auto;margin-right:auto;padding:0;width:220px;height:220px;min-width:220px;min-height:220px}}@media only screen and (max-width:767px) and (min-width:0){.su-stories-paragraph .su-stories-paragraph__photo img{margin-top:3.2rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__photo img{margin-top:3.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__photo img{margin-top:3.8rem}}@media only screen and (max-width:767px) and (min-width:0){.su-stories-paragraph .su-stories-paragraph__photo img{margin-bottom:3.2rem}}@media only screen and (max-width:767px) and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__photo img{margin-bottom:3.6rem}}@media only screen and (max-width:767px) and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__photo img{margin-bottom:3.8rem}}@media (max-width:767px){.su-stories-paragraph .su-stories__details{display:block}}.su-stories-paragraph .su-stories-paragraph__name{font-size:1.25em;letter-spacing:-.01em;font-weight:800}@media only screen and (min-width:0){.su-stories-paragraph .su-stories-paragraph__name{margin-top:1.6rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__name{margin-top:1.8rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__name{margin-top:1.9rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__title{font-size:2.1rem;line-height:1.7}}@media only screen and (min-width:0){.su-stories-paragraph .su-stories-paragraph__title{margin-bottom:1.6rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__title{margin-bottom:1.8rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__title{margin-bottom:1.9rem}}.su-stories-paragraph .su-stories-paragraph__quote{font-size:2.44140625em;letter-spacing:-.016em;font-weight:800}@media (max-width:767px){.su-stories-paragraph .su-stories-paragraph__quote{font-size:2.0751953125em}}@media only screen and (min-width:0){.su-stories-paragraph .su-stories-paragraph__quote{margin-bottom:4rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__quote{margin-bottom:4.5rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__quote{margin-bottom:4.75rem}}@media only screen and (min-width:0){.su-stories-paragraph .su-stories-paragraph__node-link{margin-bottom:8rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__node-link{margin-bottom:9rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__node-link{margin-bottom:9.5rem}}.su-stories-paragraph .su-stories-paragraph__node-link a{text-decoration:none}.su-stories-paragraph .su-stories-paragraph__node-link a:active,.su-stories-paragraph .su-stories-paragraph__node-link a:hover{text-decoration:underline}.su-stories-paragraph .su-stories-paragraph__cta-region{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media only screen and (min-width:0){.su-stories-paragraph .su-stories-paragraph__cta-region{padding-bottom:6.4rem}}@media only screen and (min-width:768px){.su-stories-paragraph .su-stories-paragraph__cta-region{padding-bottom:7.2rem}}@media only screen and (min-width:1500px){.su-stories-paragraph .su-stories-paragraph__cta-region{padding-bottom:7.6rem}}.su-stories-paragraph .su-stories-paragraph__cta-region a{padding:1rem 2rem 1.15rem;background-color:#b1040e;color:#fff}.su-stories-paragraph .su-stories-paragraph__cta-region a:focus,.su-stories-paragraph .su-stories-paragraph__cta-region a:hover{background-color:#2e2d29;color:#fff}.su-stories-paragraph .su-stories-paragraph__cta-region a:focus{-webkit-box-shadow:0 0 3px #4d4f53,0 0 7px #4d4f53;box-shadow:0 0 3px #4d4f53,0 0 7px #4d4f53} \ No newline at end of file +.su-stories-paragraph .su-stories-paragraph__cta-region a { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + cursor: pointer; + display: inline-block; + border: 0; + font-size: 2rem; + font-weight: 400; + line-height: 1; + text-align: center; + text-decoration: none; + width: auto; + -webkit-transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; + transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; } + .su-stories-paragraph .su-stories-paragraph__cta-region a a { + font-weight: 400; + text-decoration: none; } + .su-stories-paragraph .su-stories-paragraph__cta-region a:active, .su-stories-paragraph .su-stories-paragraph__cta-region a:focus, .su-stories-paragraph .su-stories-paragraph__cta-region a:hover { + text-decoration: underline; } + +.su-stories-paragraph .su-stories-paragraph__cta-region a { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + cursor: pointer; + display: inline-block; + border: 0; + font-size: 2rem; + font-weight: 400; + line-height: 1; + text-align: center; + text-decoration: none; + width: auto; + -webkit-transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; + transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; } + .su-stories-paragraph .su-stories-paragraph__cta-region a a { + font-weight: 400; + text-decoration: none; } + .su-stories-paragraph .su-stories-paragraph__cta-region a:active, .su-stories-paragraph .su-stories-paragraph__cta-region a:focus, .su-stories-paragraph .su-stories-paragraph__cta-region a:hover { + text-decoration: underline; } + +.su-stories-paragraph { + border: 1px solid #e3e3e3; + -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); + display: block; + background-color: #ffffff; } + @media only screen and (min-width: 0) and (max-width: 575px) { + .su-stories-paragraph img, + .su-stories-paragraph figure { + display: none; } } + .su-stories-paragraph .su-card__contents { + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-card__contents { + padding: 3.2rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-card__contents { + padding: 3.6rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-card__contents { + padding: 3.8rem; } } + .su-stories-paragraph .su-card__contents p { + font-size: 1.8rem; + line-height: 1.3; } + @media (max-width: 767px) { + .su-stories-paragraph .su-card__contents p { + font-size: 1.6rem; } } + .su-stories-paragraph .su-card__contents > *:first-child { + padding-top: 0; + margin-top: -0.3em; } + .su-stories-paragraph .su-card__contents > *:last-child:not(.su-card__button) { + padding-bottom: 0; + margin-bottom: 0; } + .su-stories-paragraph .su-card__contents > span { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin-top: 0; + clear: both; + font-weight: 700; + line-height: 1.2; + font-size: 0.9em; + display: block; } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-card__contents > span { + margin-bottom: 0.53rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-card__contents > span { + margin-bottom: 0.6rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-card__contents > span { + margin-bottom: 0.63rem; } } + .su-stories-paragraph .su-card__contents > span a { + text-decoration: none; + font-weight: 700; } + .su-stories-paragraph .su-card__contents > h2 { + font-size: 1.5625em; + letter-spacing: -0.012em; } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-card__contents > h2 { + margin-bottom: 1.07rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-card__contents > h2 { + margin-bottom: 1.2rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-card__contents > h2 { + margin-bottom: 1.27rem; } } + .su-stories-paragraph .su-card__contents > h2 > a { + font-weight: 700; + -webkit-transition: color 0.3s ease-out; + transition: color 0.3s ease-out; } + .su-stories-paragraph .su-card__contents > h2 > a:hover, .su-stories-paragraph .su-card__contents > h2 > a:focus { + color: #b1040e; + text-decoration: underline; } + .su-stories-paragraph .su-card__contents > div:not(.su-card__button) { + line-height: 1.4; } + .su-stories-paragraph .su-card__contents > div:not(.su-card__button), + .su-stories-paragraph .su-card__contents > p:last-of-type { + margin-bottom: 0; } + .su-stories-paragraph .su-card__contents > .su-link--action:not(:first-child), + .su-stories-paragraph .su-card__contents > a:not(:first-child) { + display: inline-block; } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-card__contents > .su-link--action:not(:first-child), + .su-stories-paragraph .su-card__contents > a:not(:first-child) { + margin-top: 1.07rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-card__contents > .su-link--action:not(:first-child), + .su-stories-paragraph .su-card__contents > a:not(:first-child) { + margin-top: 1.2rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-card__contents > .su-link--action:not(:first-child), + .su-stories-paragraph .su-card__contents > a:not(:first-child) { + margin-top: 1.27rem; } } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-card__button { + margin-top: 2.31rem; + margin-bottom: 0.53rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-card__button { + margin-top: 2.6rem; + margin-bottom: 0.6rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-card__button { + margin-top: 2.74rem; + margin-bottom: 0.63rem; } } + @media only screen and (min-width: 0) and (max-width: 575px) { + .su-stories-paragraph .su-card__button .su-button { + width: auto; } } + .su-stories-paragraph a .su-media__wrapper img { + -webkit-transition: -webkit-transform 0.3s ease-in-out; + transition: -webkit-transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } + .su-stories-paragraph a:hover .su-media__wrapper img, .su-stories-paragraph a:focus .su-media__wrapper img { + -webkit-transform: scale(1.03); + transform: scale(1.03); } + .su-stories-paragraph .su-stories-paragraph__content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__content { + padding: 3.2rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__content { + padding: 3.6rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__content { + padding: 3.8rem; } } + @media (max-width: 767px) { + .su-stories-paragraph .su-stories-paragraph__content { + display: block; } } + @media only screen and (max-width: 767px) and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__content { + padding-top: 1.6rem; } } + @media only screen and (max-width: 767px) and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__content { + padding-top: 1.8rem; } } + @media only screen and (max-width: 767px) and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__content { + padding-top: 1.9rem; } } + .su-stories-paragraph .su-stories-paragraph__photo .stanford-stories-photo-border { + display: none; } + .su-stories-paragraph .su-stories-paragraph__photo.border-color-default img { + border: 6px #000000 solid; } + .su-stories-paragraph .su-stories-paragraph__photo.border-color-1 img { + border: 6px #00ece9 solid; } + .su-stories-paragraph .su-stories-paragraph__photo.border-color-2 img { + border: 6px #ff525c solid; } + .su-stories-paragraph .su-stories-paragraph__photo.border-color-3 img { + border: 6px #ffbd54 solid; } + .su-stories-paragraph .su-stories-paragraph__photo img { + width: 290px; + height: 290px; + min-width: 290px; + min-height: 290px; + border-radius: 50%; + overflow: hidden; } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-left: 3.2rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-left: 3.6rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-left: 3.8rem; } } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-right: 6.4rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-right: 7.2rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-right: 7.6rem; } } + @media (min-width: 768px) and (max-width: 1199px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + width: 255px; + height: 255px; + min-width: 255px; + min-height: 255px; } } + @media (max-width: 767px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + display: block; + margin-left: auto; + margin-right: auto; + padding: 0; + width: 220px; + height: 220px; + min-width: 220px; + min-height: 220px; } } + @media only screen and (max-width: 767px) and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-top: 3.2rem; } } + @media only screen and (max-width: 767px) and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-top: 3.6rem; } } + @media only screen and (max-width: 767px) and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-top: 3.8rem; } } + @media only screen and (max-width: 767px) and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-bottom: 3.2rem; } } + @media only screen and (max-width: 767px) and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-bottom: 3.6rem; } } + @media only screen and (max-width: 767px) and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__photo img { + margin-bottom: 3.8rem; } } + @media (max-width: 767px) { + .su-stories-paragraph .su-stories__details { + display: block; } } + .su-stories-paragraph .su-stories-paragraph__name { + font-size: 1.25em; + letter-spacing: -0.01em; + font-weight: 800; } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__name { + margin-top: 1.6rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__name { + margin-top: 1.8rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__name { + margin-top: 1.9rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__title { + font-size: 2.1rem; + line-height: 1.7; } } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__title { + margin-bottom: 1.6rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__title { + margin-bottom: 1.8rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__title { + margin-bottom: 1.9rem; } } + .su-stories-paragraph .su-stories-paragraph__quote { + font-size: 2.44140625em; + letter-spacing: -0.016em; + font-weight: 800; } + @media (max-width: 767px) { + .su-stories-paragraph .su-stories-paragraph__quote { + font-size: 2.0751953125em; } } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__quote { + margin-bottom: 4rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__quote { + margin-bottom: 4.5rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__quote { + margin-bottom: 4.75rem; } } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__node-link { + margin-bottom: 8rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__node-link { + margin-bottom: 9rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__node-link { + margin-bottom: 9.5rem; } } + .su-stories-paragraph .su-stories-paragraph__node-link a { + text-decoration: none; } + .su-stories-paragraph .su-stories-paragraph__node-link a:hover { + text-decoration: underline; } + .su-stories-paragraph .su-stories-paragraph__node-link a:active { + text-decoration: underline; } + .su-stories-paragraph .su-stories-paragraph__cta-region { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + @media only screen and (min-width: 0) { + .su-stories-paragraph .su-stories-paragraph__cta-region { + padding-bottom: 6.4rem; } } + @media only screen and (min-width: 768px) { + .su-stories-paragraph .su-stories-paragraph__cta-region { + padding-bottom: 7.2rem; } } + @media only screen and (min-width: 1500px) { + .su-stories-paragraph .su-stories-paragraph__cta-region { + padding-bottom: 7.6rem; } } + .su-stories-paragraph .su-stories-paragraph__cta-region a { + padding: 1rem 2rem 1.15rem; + background-color: #b1040e; + color: #ffffff; + color: #fff; } + .su-stories-paragraph .su-stories-paragraph__cta-region a:hover, .su-stories-paragraph .su-stories-paragraph__cta-region a:focus { + background-color: #2e2d29; + color: #ffffff; } + .su-stories-paragraph .su-stories-paragraph__cta-region a:focus { + -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + + +/*# sourceMappingURL=stories-paragraph.styles.css.map*/ \ No newline at end of file diff --git a/dist/js/soe_paragraphs.script.js b/dist/js/soe_paragraphs.script.js index 3f6bca9..ae5fdb3 100644 --- a/dist/js/soe_paragraphs.script.js +++ b/dist/js/soe_paragraphs.script.js @@ -1,2 +1,132 @@ -!function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,n){"use strict";n.r(t);n(1)},function(e,t){window.Drupal.behaviors.soe_paragraphs={attach:function(){},detach:function(){}}}]); +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = "./lib/js/soe_paragraphs.js"); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "./lib/js/soe_paragraphs.behavior.js": +/*!*******************************************!*\ + !*** ./lib/js/soe_paragraphs.behavior.js ***! + \*******************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +/** + * Behavior Example that works with Webpack. + * + * @see: https://www.npmjs.com/package/drupal-behaviors-loader + * + * Webpack wraps everything in enclosures and hides the global variables from + * scripts so special handling is needed. + */ +window.Drupal.behaviors.soe_paragraphs = { + // Attach Drupal Behavior. + attach: function attach(context, settings) {// console.log("Attached."); + }, + // Detach Example. + detach: function detach() {// console.log("Detached."); + } +}; + +/***/ }), + +/***/ "./lib/js/soe_paragraphs.js": +/*!**********************************!*\ + !*** ./lib/js/soe_paragraphs.js ***! + \**********************************/ +/*! no exports provided */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _soe_paragraphs_behavior_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./soe_paragraphs.behavior.js */ "./lib/js/soe_paragraphs.behavior.js"); +/* harmony import */ var _soe_paragraphs_behavior_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_soe_paragraphs_behavior_js__WEBPACK_IMPORTED_MODULE_0__); +// Main Webpack entry file. + // Your code goes below. + +/***/ }) + +/******/ }); //# sourceMappingURL=soe_paragraphs.script.js.map \ No newline at end of file diff --git a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig index cf295a4..845ab4f 100644 --- a/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig +++ b/modules/soe_paragraph_image_cta/templates/image-cta-paragraph.html.twig @@ -15,16 +15,12 @@ #} {%- set field_keys = link|keys -%} {%- set field_name = field_keys[0] -%} -{%- set field_info = links[field_name] -%} +{%- set field_info = link[field_name] -%} {%- set field_items = field_info["#items"] -%} {%- set link_uri = field_items[0].uri -%} {%- set attributes = attributes.addClass(['su-image-cta-paragraph', modifier_class]) -%} - {% if link|render|striptags is not empty %} - {{ link(image, link_uri) }} - {% else %} - {{ image }} - {% endif %} + {{ link(image, link_uri) }} {{ link }} From aa8a4ce122c2b32afdaab7b3df227b3b9b25ad1e Mon Sep 17 00:00:00 2001 From: Ian Monroe Date: Mon, 13 Jul 2020 14:18:23 -0600 Subject: [PATCH 9/9] 8.1.0-beta.1 --- CHANGELOG.md | 15 +++++++++++++++ .../soe_paragraph_cta_list.info.yml | 2 +- .../soe_paragraph_image_cta.info.yml | 2 +- .../soe_paragraph_stories.info.yml | 2 +- soe_paragraphs.info.yml | 2 +- 5 files changed, 19 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 350ef77..21f2706 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,20 @@ # SOE Paragraphs +8.x-1.0-beta.1 +-------------------------------------------------------------------------------- +_Release Date: 2020-07-13_ + +- Merge pull request #8 from SU-SOE/D8CORE-2242 (ba236f0) +- D8CORE-2242: fixing template, recompile css (475b57e) +- Merge pull request #7 from SU-SOE/D8CORE-2129 (415a54e) +- D8CORE-2129: fixup! (b322f47) +- D8CORE-2129: fixup! (424e362) +- D8CORE-2129: fixed internal links and one codeclimate issue. (273d54f) +- D8CORE-2129: fixup for responsive (cf60178) +- D8CORE-2129: changed Image CTA so the image was clickable (7098048) +- D8CORE-2129: fixing up the mobile padding. Needs more work (6a02c62) +- D8CORE-2129: initial commit for the SOE image CTA styling. Removed the specific to SOE code. (cb40eaf) + 8.x-1.0-alpha -------------------------------------------------------------------------------- _Release Date: 2020-06-18_ diff --git a/modules/soe_paragraph_cta_list/soe_paragraph_cta_list.info.yml b/modules/soe_paragraph_cta_list/soe_paragraph_cta_list.info.yml index 9098cb3..55e18f3 100644 --- a/modules/soe_paragraph_cta_list/soe_paragraph_cta_list.info.yml +++ b/modules/soe_paragraph_cta_list/soe_paragraph_cta_list.info.yml @@ -9,4 +9,4 @@ dependencies: - paragraphs:paragraphs - drupal:text - soe_paragraphs:soe_paragraphs -version: 8.x-1.0-dev +version: 8.x-1.0-beta1 diff --git a/modules/soe_paragraph_image_cta/soe_paragraph_image_cta.info.yml b/modules/soe_paragraph_image_cta/soe_paragraph_image_cta.info.yml index bd9694a..1953090 100644 --- a/modules/soe_paragraph_image_cta/soe_paragraph_image_cta.info.yml +++ b/modules/soe_paragraph_image_cta/soe_paragraph_image_cta.info.yml @@ -9,4 +9,4 @@ dependencies: - paragraphs:paragraphs - drupal:text - soe_paragraphs:soe_paragraphs -version: 8.x-1.0-dev +version: 8.x-1.0-beta1 diff --git a/modules/soe_paragraph_stories/soe_paragraph_stories.info.yml b/modules/soe_paragraph_stories/soe_paragraph_stories.info.yml index 356a830..e2a6b72 100644 --- a/modules/soe_paragraph_stories/soe_paragraph_stories.info.yml +++ b/modules/soe_paragraph_stories/soe_paragraph_stories.info.yml @@ -9,4 +9,4 @@ dependencies: - paragraphs:paragraphs - drupal:text - soe_paragraphs:soe_paragraphs -version: 8.x-1.0-dev +version: 8.x-1.0-beta1 diff --git a/soe_paragraphs.info.yml b/soe_paragraphs.info.yml index 0c99ce8..a377631 100644 --- a/soe_paragraphs.info.yml +++ b/soe_paragraphs.info.yml @@ -3,7 +3,7 @@ type: module description: 'Provides custom paragraph types for SOE' core_version_requirement: ^8.8 || ^9 package: Stanford -version: 8.x-1.0-dev +version: 8.x-1.0-beta1 dependencies: - paragraphs:paragraphs - jumpstart_ui:jumpstart_ui