From 6953eb9c903b4d0e79e41f3b3dc44b93b62ed2d0 Mon Sep 17 00:00:00 2001
From: Brian Canini <canini.16@osu.edu>
Date: Thu, 16 Dec 2021 09:51:21 -0500
Subject: [PATCH] setting up advanced callout box
---
.../assets/sass/components/_paragraphs.scss | 145 +++++++++-
web/themes/asc_bootstrap/css/style.css | 262 ++++++++++++++----
...av-cb-link--advanced-callout-box.html.twig | 87 ++++++
.../paragraph--advanced-callout-box.html.twig | 57 ++++
.../paragraph--columns_four.html.twig | 126 ++++++++-
.../paragraph--columns_three.html.twig | 126 ++++++++-
.../paragraph--columns_two.html.twig | 134 ++++++++-
web/themes/asc_seven/css/customstyle.css | 11 +
8 files changed, 872 insertions(+), 76 deletions(-)
create mode 100644 web/themes/asc_bootstrap/templates/field/field--paragraph--field-av-cb-link--advanced-callout-box.html.twig
create mode 100644 web/themes/asc_bootstrap/templates/paragraph/paragraph--advanced-callout-box.html.twig
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
index 13bc870883..b3593974da 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
@@ -290,27 +290,164 @@
// --------------------------------------------------
//## Call Out Boxes - Advanced.
+
+.carousel.adv-callout-desktop {
+ display: block;
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+}
+
+.carousel.adv-callout-mobile {
+ display: none;
+
+ @media (max-width: 768px) {
+ display: block;
+ }
+}
+
+.carousel.adv-callout-carousel {
+ margin: 30px 0;
+ overflow: visible;
+
+ .row {
+ display: flex;
+
+ .col-l {
+ flex: 1;
+ background: $brand-lgray;
+ margin: 0 12px;
+ padding: 0 0 30px;
+ }
+
+ .col-m {
+ flex: 1;
+ background: $brand-lgray;
+ margin: 0 12px;
+ padding: 0 0 30px;
+ }
+
+ .col-r {
+ flex: 1;
+ background: $brand-lgray;
+ margin: 0 12px;
+ padding: 0 0 30px;
+ }
+ }
+
+ .last-row {
+ display: block;
+ }
+
+ .container {
+ @media (max-width: 768px) {
+ margin-bottom: 20px;
+ }
+ }
+}
+
.call-out-adv-container {
- background: $brand-lgray;
- float: left;
- padding-bottom: 10px;
+ padding-bottom: 9.5px;
.field--name-field-av-cb-text {
padding: 20px;
+
+ p, h2, h3, h4, h5, h6, a {
+ color: $gray;
+ }
}
.field--name-field-av-cb-link {
- float: right;
+ text-align: right;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 6px 0;
a {
color: $white;
background: $red-base;
padding: 10px;
+
+ @media (max-width: 768px) {
+ width: 100%;
+ display: block;
+ }
+ }
+
+ @media (max-width: 768px) {
+ text-align: center;
+ position: relative;
+ width: 100%;
}
}
}
+.control-l {
+ position: absolute;
+ left: 0;
+ top: 40%;
+ background: #3d3d3d;
+ border: none;
+ height: 90px;
+ width: 50px;
+ border-radius: 0;
+
+ i {
+ text-align: center;
+ line-height: 75px;
+ font-size: 2em;
+ }
+ @media (max-width: 768px) {
+ position: relative;
+ bottom: 0;
+ width: 100px;
+ }
+}
+
+.control-l.btn:hover,
+.control-l.btn:active,
+.control-l.btn:focus,
+.control-l.btn:visited {
+ background: #999;
+}
+
+.control-r {
+ position: absolute;
+ right: 0;
+ top: 40%;
+ background: #3d3d3d;
+ border: none;
+ height: 90px;
+ width: 50px;
+ border-radius: 0;
+
+ i {
+ text-align: center;
+ line-height: 75px;
+ font-size: 2em;
+ }
+
+ @media (max-width: 768px) {
+ position: relative;
+ bottom: 0;
+ width: 100px;
+ }
+}
+
+.control-r.btn:hover,
+.control-r.btn:active,
+.control-r.btn:focus,
+.control-r.btn:visited {
+ background: #999;
+}
+
+.landing-page .carousel .adv-call-mob-inner {
+ display: block;
+ background: $brand-lgray;
+}
// ---------------------------------------------------
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index 076a6d72bc..e6dbe5cf74 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -13198,41 +13198,199 @@ article.news-story {
text-decoration: underline;
}
-/* line 293, ../assets/sass/components/_paragraphs.scss */
-.call-out-adv-container {
+/* line 294, ../assets/sass/components/_paragraphs.scss */
+.carousel.adv-callout-desktop {
+ display: block;
+}
+@media (max-width: 768px) {
+ /* line 294, ../assets/sass/components/_paragraphs.scss */
+ .carousel.adv-callout-desktop {
+ display: none;
+ }
+}
+
+/* line 302, ../assets/sass/components/_paragraphs.scss */
+.carousel.adv-callout-mobile {
+ display: none;
+}
+@media (max-width: 768px) {
+ /* line 302, ../assets/sass/components/_paragraphs.scss */
+ .carousel.adv-callout-mobile {
+ display: block;
+ }
+}
+
+/* line 310, ../assets/sass/components/_paragraphs.scss */
+.carousel.adv-callout-carousel {
+ margin: 30px 0;
+ overflow: visible;
+}
+/* line 314, ../assets/sass/components/_paragraphs.scss */
+.carousel.adv-callout-carousel .row {
+ display: flex;
+}
+/* line 317, ../assets/sass/components/_paragraphs.scss */
+.carousel.adv-callout-carousel .row .col-l {
+ flex: 1;
background: #F5F5F5;
- float: left;
- padding-bottom: 10px;
+ margin: 0 12px;
+ padding: 0 0 30px;
}
-/* line 298, ../assets/sass/components/_paragraphs.scss */
+/* line 324, ../assets/sass/components/_paragraphs.scss */
+.carousel.adv-callout-carousel .row .col-m {
+ flex: 1;
+ background: #F5F5F5;
+ margin: 0 12px;
+ padding: 0 0 30px;
+}
+/* line 331, ../assets/sass/components/_paragraphs.scss */
+.carousel.adv-callout-carousel .row .col-r {
+ flex: 1;
+ background: #F5F5F5;
+ margin: 0 12px;
+ padding: 0 0 30px;
+}
+/* line 339, ../assets/sass/components/_paragraphs.scss */
+.carousel.adv-callout-carousel .last-row {
+ display: block;
+}
+@media (max-width: 768px) {
+ /* line 343, ../assets/sass/components/_paragraphs.scss */
+ .carousel.adv-callout-carousel .container {
+ margin-bottom: 20px;
+ }
+}
+
+/* line 350, ../assets/sass/components/_paragraphs.scss */
+.call-out-adv-container {
+ padding-bottom: 9.5px;
+}
+/* line 353, ../assets/sass/components/_paragraphs.scss */
.call-out-adv-container .field--name-field-av-cb-text {
padding: 20px;
}
-/* line 302, ../assets/sass/components/_paragraphs.scss */
+/* line 356, ../assets/sass/components/_paragraphs.scss */
+.call-out-adv-container .field--name-field-av-cb-text p, .call-out-adv-container .field--name-field-av-cb-text h2, .call-out-adv-container .field--name-field-av-cb-text h3, .call-out-adv-container .field--name-field-av-cb-text h4, .call-out-adv-container .field--name-field-av-cb-text h5, .call-out-adv-container .field--name-field-av-cb-text h6, .call-out-adv-container .field--name-field-av-cb-text a {
+ color: #555555;
+}
+/* line 361, ../assets/sass/components/_paragraphs.scss */
.call-out-adv-container .field--name-field-av-cb-link {
- float: right;
+ text-align: right;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 6px 0;
}
-/* line 305, ../assets/sass/components/_paragraphs.scss */
+/* line 368, ../assets/sass/components/_paragraphs.scss */
.call-out-adv-container .field--name-field-av-cb-link a {
color: #ffffff;
background: #bb0000;
padding: 10px;
}
+@media (max-width: 768px) {
+ /* line 368, ../assets/sass/components/_paragraphs.scss */
+ .call-out-adv-container .field--name-field-av-cb-link a {
+ width: 100%;
+ display: block;
+ }
+}
+@media (max-width: 768px) {
+ /* line 361, ../assets/sass/components/_paragraphs.scss */
+ .call-out-adv-container .field--name-field-av-cb-link {
+ text-align: center;
+ position: relative;
+ width: 100%;
+ }
+}
+
+/* line 387, ../assets/sass/components/_paragraphs.scss */
+.control-l {
+ position: absolute;
+ left: 0;
+ top: 40%;
+ background: #3d3d3d;
+ border: none;
+ height: 90px;
+ width: 50px;
+ border-radius: 0;
+}
+/* line 397, ../assets/sass/components/_paragraphs.scss */
+.control-l i {
+ text-align: center;
+ line-height: 75px;
+ font-size: 2em;
+}
+@media (max-width: 768px) {
+ /* line 387, ../assets/sass/components/_paragraphs.scss */
+ .control-l {
+ position: relative;
+ bottom: 0;
+ width: 100px;
+ }
+}
+
+/* line 410, ../assets/sass/components/_paragraphs.scss */
+.control-l.btn:hover,
+.control-l.btn:active,
+.control-l.btn:focus,
+.control-l.btn:visited {
+ background: #999;
+}
+
+/* line 417, ../assets/sass/components/_paragraphs.scss */
+.control-r {
+ position: absolute;
+ right: 0;
+ top: 40%;
+ background: #3d3d3d;
+ border: none;
+ height: 90px;
+ width: 50px;
+ border-radius: 0;
+}
+/* line 427, ../assets/sass/components/_paragraphs.scss */
+.control-r i {
+ text-align: center;
+ line-height: 75px;
+ font-size: 2em;
+}
+@media (max-width: 768px) {
+ /* line 417, ../assets/sass/components/_paragraphs.scss */
+ .control-r {
+ position: relative;
+ bottom: 0;
+ width: 100px;
+ }
+}
+
+/* line 440, ../assets/sass/components/_paragraphs.scss */
+.control-r.btn:hover,
+.control-r.btn:active,
+.control-r.btn:focus,
+.control-r.btn:visited {
+ background: #999;
+}
+
+/* line 447, ../assets/sass/components/_paragraphs.scss */
+.landing-page .carousel .adv-call-mob-inner {
+ display: block;
+ background: #F5F5F5;
+}
-/* line 322, ../assets/sass/components/_paragraphs.scss */
+/* line 459, ../assets/sass/components/_paragraphs.scss */
.file .file-icon span {
color: #bb0000;
}
-/* line 329, ../assets/sass/components/_paragraphs.scss */
+/* line 466, ../assets/sass/components/_paragraphs.scss */
.file .file-link a {
color: #bb0000;
}
-/* line 334, ../assets/sass/components/_paragraphs.scss */
+/* line 471, ../assets/sass/components/_paragraphs.scss */
.file .file-size {
color: #bb0000;
}
-/* line 344, ../assets/sass/components/_paragraphs.scss */
+/* line 481, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container {
width: 100%;
position: absolute;
@@ -13243,12 +13401,12 @@ article.news-story {
max-height: 550px;
}
@media (max-width: 768px) {
- /* line 344, ../assets/sass/components/_paragraphs.scss */
+ /* line 481, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container {
max-height: 100%;
}
}
-/* line 357, ../assets/sass/components/_paragraphs.scss */
+/* line 494, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
@@ -13260,7 +13418,7 @@ article.news-story {
transform: perspective(1px) translateY(-50%);
}
@media (max-width: 768px) {
- /* line 357, ../assets/sass/components/_paragraphs.scss */
+ /* line 494, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt {
height: 100%;
display: flex;
@@ -13268,11 +13426,11 @@ article.news-story {
justify-content: center;
}
}
-/* line 374, ../assets/sass/components/_paragraphs.scss */
+/* line 511, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper {
width: 100%;
}
-/* line 377, ../assets/sass/components/_paragraphs.scss */
+/* line 514, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper h2 {
font-size: 36px;
text-transform: uppercase;
@@ -13281,36 +13439,36 @@ article.news-story {
line-height: 1.1;
}
@media (max-width: 768px) {
- /* line 377, ../assets/sass/components/_paragraphs.scss */
+ /* line 514, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper h2 {
font-size: 15px;
margin-top: 0;
}
}
-/* line 390, ../assets/sass/components/_paragraphs.scss */
+/* line 527, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper p {
font-size: 18px;
margin: 25px 0;
color: #333333;
}
@media (max-width: 768px) {
- /* line 390, ../assets/sass/components/_paragraphs.scss */
+ /* line 527, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper p {
font-size: 14px;
margin-top: 0;
}
}
-/* line 401, ../assets/sass/components/_paragraphs.scss */
+/* line 538, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn {
white-space: normal;
}
-/* line 405, ../assets/sass/components/_paragraphs.scss */
+/* line 542, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 {
width: 100%;
margin: 0 auto;
font-size: 18px;
}
-/* line 410, ../assets/sass/components/_paragraphs.scss */
+/* line 547, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
min-width: 25%;
margin: 10px;
@@ -13320,23 +13478,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 419, ../assets/sass/components/_paragraphs.scss */
+/* line 556, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper .btn-primary {
background-color: transparent;
border-color: transparent;
border: 0;
border-radius: 0;
}
-/* line 426, ../assets/sass/components/_paragraphs.scss */
+/* line 563, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper i {
padding-top: 1px;
}
-/* line 430, ../assets/sass/components/_paragraphs.scss */
+/* line 567, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper:hover {
background: #8E0101;
}
@media (max-width: 768px) {
- /* line 410, ../assets/sass/components/_paragraphs.scss */
+ /* line 547, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
display: block;
width: 100%;
@@ -13344,22 +13502,22 @@ article.news-story {
font-weight: 700;
}
}
-/* line 442, ../assets/sass/components/_paragraphs.scss */
+/* line 579, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 446, ../assets/sass/components/_paragraphs.scss */
+/* line 583, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 452, ../assets/sass/components/_paragraphs.scss */
+/* line 589, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 {
width: 100%;
margin: 0 auto;
font-size: 18px;
}
-/* line 457, ../assets/sass/components/_paragraphs.scss */
+/* line 594, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
min-width: 40%;
margin: 10px;
@@ -13369,23 +13527,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 466, ../assets/sass/components/_paragraphs.scss */
+/* line 603, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper .btn-primary {
background-color: transparent;
border-color: transparent;
border: 0;
border-radius: 0;
}
-/* line 473, ../assets/sass/components/_paragraphs.scss */
+/* line 610, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper i {
padding-top: 1px;
}
-/* line 477, ../assets/sass/components/_paragraphs.scss */
+/* line 614, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper:hover {
background: #8E0101;
}
@media (max-width: 768px) {
- /* line 457, ../assets/sass/components/_paragraphs.scss */
+ /* line 594, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
display: block;
width: 100%;
@@ -13393,22 +13551,22 @@ article.news-story {
font-weight: 700;
}
}
-/* line 489, ../assets/sass/components/_paragraphs.scss */
+/* line 626, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 493, ../assets/sass/components/_paragraphs.scss */
+/* line 630, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 499, ../assets/sass/components/_paragraphs.scss */
+/* line 636, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 {
width: 100%;
margin: 0 auto;
font-size: 18px;
}
-/* line 504, ../assets/sass/components/_paragraphs.scss */
+/* line 641, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
min-width: 50%;
margin: 10px;
@@ -13418,23 +13576,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 513, ../assets/sass/components/_paragraphs.scss */
+/* line 650, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper .btn-primary {
background-color: transparent;
border-color: transparent;
border: 0;
border-radius: 0;
}
-/* line 520, ../assets/sass/components/_paragraphs.scss */
+/* line 657, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper i {
padding-top: 1px;
}
-/* line 524, ../assets/sass/components/_paragraphs.scss */
+/* line 661, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper:hover {
background: #8E0101;
}
@media (max-width: 768px) {
- /* line 504, ../assets/sass/components/_paragraphs.scss */
+ /* line 641, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
display: block;
width: 100%;
@@ -13442,46 +13600,46 @@ article.news-story {
font-weight: 700;
}
}
-/* line 536, ../assets/sass/components/_paragraphs.scss */
+/* line 673, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 540, ../assets/sass/components/_paragraphs.scss */
+/* line 677, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 557, ../assets/sass/components/_paragraphs.scss */
+/* line 694, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tagline {
margin: 20px 0;
float: left;
}
-/* line 568, ../assets/sass/components/_paragraphs.scss */
+/* line 705, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field {
padding: 20px;
}
-/* line 572, ../assets/sass/components/_paragraphs.scss */
+/* line 709, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field--name-field-media-file {
padding: 0;
}
-/* line 576, ../assets/sass/components/_paragraphs.scss */
+/* line 713, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field--name-field-media-image {
padding: 20px 0;
}
-/* line 587, ../assets/sass/components/_paragraphs.scss */
+/* line 724, ../assets/sass/components/_paragraphs.scss */
.para_1_col .field--name-field-media-twitter {
margin: 0 auto;
width: 60%;
}
-/* line 591, ../assets/sass/components/_paragraphs.scss */
+/* line 728, ../assets/sass/components/_paragraphs.scss */
.para_1_col .field--name-field-media-twitter .col-xs-12 {
padding: 0;
}
-/* line 601, ../assets/sass/components/_paragraphs.scss */
+/* line 738, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--video iframe {
width: 100% !important;
}
diff --git a/web/themes/asc_bootstrap/templates/field/field--paragraph--field-av-cb-link--advanced-callout-box.html.twig b/web/themes/asc_bootstrap/templates/field/field--paragraph--field-av-cb-link--advanced-callout-box.html.twig
new file mode 100644
index 0000000000..8225e74d0b
--- /dev/null
+++ b/web/themes/asc_bootstrap/templates/field/field--paragraph--field-av-cb-link--advanced-callout-box.html.twig
@@ -0,0 +1,87 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ * - attributes: List of HTML attributes for each item.
+ * - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+ set classes = [
+ 'field',
+ 'field--name-' ~ field_name|clean_class,
+ 'field--type-' ~ field_type|clean_class,
+ 'field--label-' ~ label_display,
+ ]
+%}
+{%
+ set title_classes = [
+ 'field--label',
+ label_display == 'visually_hidden' ? 'sr-only',
+ ]
+%}
+
+{% if label_hidden %}
+ {% if multiple %}
+ <div{{ attributes.addClass(classes, 'field--items') }}>
+ {% for item in items %}
+ <div{{ item.attributes.addClass('field--item') }}>{{ item.content }}</div>
+ {% endfor %}
+ </div>
+ {% else %}
+ {% for item in items %}
+ <div{{ attributes.addClass(classes, 'field--item') }}>
+ <a href="{{ item.content['#url'] }}" title="{{ item.content['#options'].attributes.title }}">
+ {{ item.content['#title'] }} <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a></div>
+ {% endfor %}
+ {% endif %}
+{% else %}
+ <div{{ attributes.addClass(classes) }}>
+ <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+ {% if multiple %}
+ <div class="field--items">
+ {% endif %}
+ {% for item in items %}
+ <div{{ attributes.addClass(classes, 'field--item') }}>
+ <a href="{{ item.content['#url'] }}" title="{{ item.content['#options'].attributes.title }}">
+ {{ item.content['#title'] }} <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a></div>
+ {% endfor %}
+ {% if multiple %}
+ </div>
+ {% endif %}
+ </div>
+{% endif %}
diff --git a/web/themes/asc_bootstrap/templates/paragraph/paragraph--advanced-callout-box.html.twig b/web/themes/asc_bootstrap/templates/paragraph/paragraph--advanced-callout-box.html.twig
new file mode 100644
index 0000000000..6c939c2894
--- /dev/null
+++ b/web/themes/asc_bootstrap/templates/paragraph/paragraph--advanced-callout-box.html.twig
@@ -0,0 +1,57 @@
+{#
+/**
+ * @file
+ * Custom Paragraphs template for displaying an Advanced Callout Box layout.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ * Only method names starting with "get", "has", or "is" and a few common
+ * methods such as "id", "label", and "bundle" are available. For example:
+ * - paragraph.getCreatedTime() will return the paragraph creation timestamp.
+ * - paragraph.id(): The paragraph ID.
+ * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
+ * - paragraph.getOwnerId(): The user ID of the paragraph author.
+ * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
+ * and methods for the paragraph object.
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ * or print a subset such as {{ content.field_example }}. Use
+ * {{ content|without('field_example') }} to temporarily suppress the printing
+ * of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ * The attributes.class element may contain one or more of the following
+ * classes:
+ * - paragraphs: The current template type (also known as a "theming hook").
+ * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ * "Image" it would result in "paragraphs--type--image". Note that the machine
+ * name will often be in a short form of the human readable label.
+ * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ * preview would result in: "paragraphs--view-mode--preview", and
+ * default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ * current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ * is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+ set classes = [
+ 'paragraph',
+ 'paragraph--type--' ~ paragraph.bundle|clean_class,
+ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+ not paragraph.isPublished() ? 'paragraph--unpublished'
+ ]
+%}
+{% block paragraph %}
+<div class="call-out-adv-container">
+ <div{{ attributes.addClass(classes) }}>
+ {% block content %}
+ {{ content }}
+ {% endblock %}
+ </div>
+</div>
+{% endblock paragraph %}
diff --git a/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig b/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig
index b27300e85a..25535d1b2b 100644
--- a/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig
+++ b/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig
@@ -1,7 +1,7 @@
{#
/**
* @file
- * Custom Paragraphs template for displaying a Three Column layout.
+ * Custom Paragraphs template for displaying a Four Column layout.
*
* Available variables:
* - paragraph: Full paragraph entity.
@@ -59,15 +59,127 @@
<div{{ attributes.addClass(classes) }}>
<div class="paragraph__column {{ bgcolor }} para_4_col">
-{% if page_content_type == 'landing_page' %}
- <div class="container">
- {% endif %}
-
{% set thecont = [] %}
+{% set rand = random(56748) %}
+
{% for item in content|without('field_column_style_4')|without('field_background_color') %}
{% set thecont = thecont|merge(item) %}
{% endfor %}
+{% if page_content_type == 'landing_page' and thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
+ <div class="container">
+{% endif %}
+
+
+{# Advanced Callout Box Mobile #}
+{% if thecont[0]['#paragraph'].type.target_id == 'advanced_callout_box' %}
+ {% set contcount = thecont|length - 17 %}
+
+ <div id="carousel-mobile-{{ rand }}" class="carousel slide adv-callout-carousel adv-callout-mobile" data-ride="false" data-interval="0">
+
+{% if page_content_type == 'landing_page' %}
+ <div class="container">
+{% endif %}
+
+ <div class="carousel-inner adv-call-mob-inner" role="listbox">
+
+ {% for item in thecont|slice(0, contcount) %}
+ <div class="item {% if loop.first %}active{% endif %}">
+
+ <div class="col-xs-12">
+ <div class="card">
+ {{ thecont[loop.index0] }}
+ </div>
+ </div>
+
+ </div>
+ {% endfor %}
+
+ </div>
+
+{% if page_content_type == 'landing_page' %}
+ </div>
+{% endif %}
+
+{% if page_content_type != 'page' %}
+ <!-- Controls -->
+ <div class="col-12 text-center">
+ <a class="btn btn-primary mb-3 mr-1 control-l" href="#carousel-mobile-{{ rand }}" role="button" data-slide="prev">
+ <i class="fa fa-angle-left" aria-hidden="true"></i>
+ </a>
+ <a class="btn btn-primary mb-3 control-r" href="#carousel-mobile-{{ rand }}" role="button" data-slide="next">
+ <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a>
+ </div>
+{% endif %}
+ </div>
+
+
+{# Advanced Callout box #}
+ {% set counter = 1 %}
+ {% set contcount = thecont|length - 17 %}
+
+ <div id="carousel-desktop-{{ rand }}" class="carousel slide adv-callout-carousel adv-callout-desktop" data-ride="false" data-interval="0">
+
+{% if page_content_type == 'landing_page' %}
+ <div class="container">
+{% endif %}
+
+ <div class="carousel-inner" role="listbox">
+
+ {% for item in thecont|slice(0, contcount) %}
+ {% if counter == 1 %}
+ <div class="item {% if loop.first %}active{% endif %}">
+ <div class="row {% if loop.last %}last-row{% endif %}">
+ {% endif %}
+
+ <div class="{% if counter == 1 %}col-xs-12 col-md-3 col-l{% elseif counter == 2 or counter == 3 %}col-xs-12 col-md-3 col-m{% else %}col-xs-12 col-md-3 col-r{% endif %}">
+ <div class="card">
+ {{ thecont[loop.index0] }}
+ </div>
+ </div>
+
+ {% if counter == 4 or loop.last %}
+ </div>
+ </div>
+ {% set counter = 5 %}
+ {% endif %}
+
+
+ {% if counter <= 3 %}
+ {% set counter = counter + 1 %}
+ {% endif %}
+
+ {% if counter == 5 %}
+ {% set counter = 1 %}
+ {% endif %}
+
+ {% endfor %}
+ </div>
+
+{% if page_content_type == 'landing_page' %}
+ </div>
+{% endif %}
+
+{% if page_content_type != 'page' %}
+ {% if contcount > 4 %}
+ <!-- Controls -->
+ <div class="col-6 text-right">
+ <a class="btn btn-primary mb-3 mr-1 control-l" href="#carousel-desktop-{{ rand }}" role="button" data-slide="prev">
+ <i class="fa fa-angle-left" aria-hidden="true"></i>
+ </a>
+ <a class="btn btn-primary mb-3 control-r" href="#carousel-desktop-{{ rand }}" role="button" data-slide="next">
+ <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a>
+ </div>
+ {% endif %}
+{% endif %}
+ </div>
+
+
+
+ {% elseif thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
+
<div class="{{ leftwidth }} col-l">
{{ thecont[0] }}
</div>
@@ -84,7 +196,9 @@
{{ thecont[3] }}
</div>
- {% if page_content_type == 'landing_page' %}
+ {% endif %}
+
+ {% if page_content_type == 'landing_page' and thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
</div>
{% endif %}
diff --git a/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_three.html.twig b/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_three.html.twig
index 82785cb889..db2793d8b3 100644
--- a/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_three.html.twig
+++ b/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_three.html.twig
@@ -71,7 +71,6 @@
{% endif %}
-
{# Setting up variable that determines the background color for section #}
{% set bgcolor = content.field_background_color['#items'].getString() %}
@@ -83,15 +82,128 @@
<div{{ attributes.addClass(classes) }}>
<div class="paragraph__column {{ bgcolor }} para_3_col">
-{% if page_content_type == 'landing_page' %}
- <div class="container">
- {% endif %}
+ {% set thecont = [] %}
+{% set rand = random(56748) %}
-{% set thecont = [] %}
{% for item in content|without('field_column_style_3')|without('field_background_color') %}
{% set thecont = thecont|merge(item) %}
{% endfor %}
+{% if page_content_type == 'landing_page' and thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
+ <div class="container">
+{% endif %}
+
+{# Advanced Callout Box Mobile #}
+{% if thecont[0]['#paragraph'].type.target_id == 'advanced_callout_box' %}
+ {% set contcount = thecont|length - 17 %}
+
+ <div id="carousel-mobile-{{ rand }}" class="carousel slide adv-callout-carousel adv-callout-mobile" data-ride="false" data-interval="0">
+
+{% if page_content_type == 'landing_page' %}
+ <div class="container">
+{% endif %}
+
+ <div class="carousel-inner adv-call-mob-inner" role="listbox">
+
+ {% for item in thecont|slice(0, contcount) %}
+ <div class="item {% if loop.first %}active{% endif %}">
+
+ <div class="col-xs-12">
+ <div class="card">
+ {{ thecont[loop.index0] }}
+ </div>
+ </div>
+
+ </div>
+ {% endfor %}
+
+ </div>
+
+{% if page_content_type == 'landing_page' %}
+ </div>
+{% endif %}
+
+{% if page_content_type != 'page' %}
+ <!-- Controls -->
+ <div class="col-12 text-center">
+ <a class="btn btn-primary mb-3 mr-1 control-l" href="#carousel-mobile-{{ rand }}" role="button" data-slide="prev">
+ <i class="fa fa-angle-left" aria-hidden="true"></i>
+ </a>
+ <a class="btn btn-primary mb-3 control-r" href="#carousel-mobile-{{ rand }}" role="button" data-slide="next">
+ <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a>
+ </div>
+{% endif %}
+ </div>
+
+
+{# Advanced Callout box desktop #}
+ {% set counter = 1 %}
+ {% set contcount = thecont|length - 17 %}
+ <div id="carousel-desktop-{{ rand }}" class="carousel slide adv-callout-carousel adv-callout-desktop" data-ride="false" data-interval="0">
+
+{% if page_content_type == 'landing_page' %}
+ <div class="container">
+{% endif %}
+
+ <div class="carousel-inner" role="listbox">
+
+ {% for item in thecont|slice(0, contcount) %}
+ {% if counter == 1 %}
+ <div class="item {% if loop.first %}active{% endif %}">
+ <div class="row {% if loop.last %}last-row{% endif %}">
+ {% endif %}
+
+ <div class="{% if counter == 1 %}col-xs-12 col-md-4 col-l{% elseif counter == 2 %}col-xs-12 col-md-4 col-m{% else %}col-xs-12 col-md-4 col-r{% endif %}">
+ <div class="card">
+ {{ thecont[loop.index0] }}
+ </div>
+ </div>
+
+ {% if counter == 3 or loop.last %}
+ </div>
+ </div>
+ {% set counter = 4 %}
+ {% endif %}
+
+
+ {% if counter == 1 or counter == 2 %}
+ {% set counter = counter + 1 %}
+ {% endif %}
+
+ {% if counter == 4 %}
+ {% set counter = 1 %}
+ {% endif %}
+
+ {% endfor %}
+ </div>
+
+{% if page_content_type == 'landing_page' %}
+ </div>
+{% endif %}
+
+{% if page_content_type != 'page' %}
+ {% if contcount > 3 %}
+ <!-- Controls -->
+ <div class="col-6 text-right">
+ <a class="btn btn-primary mb-3 mr-1 control-l" href="#carousel-desktop-{{ rand }}" role="button" data-slide="prev">
+ <i class="fa fa-angle-left" aria-hidden="true"></i>
+ </a>
+ <a class="btn btn-primary mb-3 control-r" href="#carousel-desktop-{{ rand }}" role="button" data-slide="next">
+ <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a>
+ </div>
+
+ {% endif %}
+{% endif %}
+ </div>
+
+
+
+
+
+ {% elseif thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
+
<div class="{{ leftwidth }} col-l">
{{ thecont[0] }}
</div>
@@ -104,7 +216,9 @@
{{ thecont[2] }}
</div>
- {% if page_content_type == 'landing_page' %}
+ {% endif %}
+
+ {% if page_content_type == 'landing_page' and thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
</div>
{% endif %}
diff --git a/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_two.html.twig b/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_two.html.twig
index 3a8361ee10..6773ebb2d3 100644
--- a/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_two.html.twig
+++ b/web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_two.html.twig
@@ -75,18 +75,134 @@
<div{{ attributes.addClass(classes) }}>
<div class="paragraph__column {{ bgcolor }} para_2_col">
- {% if page_content_type == 'landing_page' %}
- <div class="container">
- {% endif %}
+{% set thecont = [] %}
+{% set rand = random(56748) %}
+
+ {% for item in content|without('field_column_style_2')|without('field_background_color') %}
+ {% set thecont = thecont|merge(item) %}
+ {% endfor %}
+
+{% if page_content_type == 'landing_page' and thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
+ <div class="container">
+{% endif %}
{# content.field_column_content_2[0]['#paragraph'].field_text.value #}
{# for key in content.field_column_content_2|keys %}
{{ key }}
{ endfor %}
{{ paragraph.id.value #}
-{% set thecont = [] %}
- {% for item in content|without('field_column_style_2')|without('field_background_color') %}
- {% set thecont = thecont|merge(item) %}
- {% endfor %}
+
+
+{# Advanced Callout Box Mobile #}
+{% if thecont[0]['#paragraph'].type.target_id == 'advanced_callout_box' %}
+ {% set contcount = thecont|length - 17 %}
+
+ <div id="carousel-mobile-{{ rand }}" class="carousel slide adv-callout-carousel adv-callout-mobile" data-ride="false" data-interval="0">
+
+{% if page_content_type == 'landing_page' %}
+ <div class="container">
+{% endif %}
+
+ <div class="carousel-inner adv-call-mob-inner" role="listbox">
+
+ {% for item in thecont|slice(0, contcount) %}
+ <div class="item {% if loop.first %}active{% endif %}">
+
+ <div class="col-xs-12">
+ <div class="card">
+ {{ thecont[loop.index0] }}
+ </div>
+ </div>
+
+ </div>
+ {% endfor %}
+
+ </div>
+
+{% if page_content_type == 'landing_page' %}
+ </div>
+{% endif %}
+
+{% if page_content_type != 'page' %}
+ <!-- Controls -->
+ <div class="col-12 text-center">
+ <a class="btn btn-primary mb-3 mr-1 control-l" href="#carousel-mobile-{{ rand }}" role="button" data-slide="prev">
+ <i class="fa fa-angle-left" aria-hidden="true"></i>
+ </a>
+ <a class="btn btn-primary mb-3 control-r" href="#carousel-mobile-{{ rand }}" role="button" data-slide="next">
+ <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a>
+ </div>
+{% endif %}
+ </div>
+
+
+{# Advanced Callout box desktop #}
+ {% set counter = 1 %}
+ {% set contcount = thecont|length - 17 %}
+
+ <div id="carousel-desktop-{{ rand }}" class="carousel slide adv-callout-carousel adv-callout-desktop" data-ride="false" data-interval="0">
+
+{% if page_content_type == 'landing_page' %}
+ <div class="container">
+{% endif %}
+
+ <div class="carousel-inner{% if contcount > 2 %} controls-spacing{% endif %}" role="listbox">
+
+ {% for item in thecont|slice(0, contcount) %}
+ {% if counter == 1 %}
+ <div class="item {% if loop.first %}active{% endif %}">
+ <div class="row {% if loop.last %}last-row{% endif %}">
+ {% endif %}
+
+ <div class="{% if counter == 1 %}col-xs-12 col-md-6 col-l{% else %}col-xs-12 col-md-6 col-r{% endif %}">
+ <div class="card">
+ {{ thecont[loop.index0] }}
+ </div>
+ </div>
+
+ {% if counter == 2 or loop.last %}
+ </div>
+ </div>
+ {% set counter = 3 %}
+ {% endif %}
+
+
+ {% if counter == 1 %}
+ {% set counter = counter + 1 %}
+ {% endif %}
+
+ {% if counter == 3 %}
+ {% set counter = 1 %}
+ {% endif %}
+
+ {% endfor %}
+
+ </div>
+
+{% if page_content_type == 'landing_page' %}
+ </div>
+{% endif %}
+
+{% if page_content_type != 'page' %}
+ {% if contcount > 2 %}
+
+ <!-- Controls -->
+ <div class="col-6 text-right">
+ <a class="btn btn-primary mb-3 mr-1 control-l" href="#carousel-desktop-{{ rand }}" role="button" data-slide="prev">
+ <i class="fa fa-angle-left" aria-hidden="true"></i>
+ </a>
+ <a class="btn btn-primary mb-3 control-r" href="#carousel-desktop-{{ rand }}" role="button" data-slide="next">
+ <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a>
+ </div>
+
+ {% endif %}
+{% endif %}
+ </div>
+
+
+ {% elseif thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
+
<div class="{{ leftwidth }} col-l">
{{ thecont[0] }}
@@ -96,7 +212,9 @@
{{ thecont[1] }}
</div>
- {% if page_content_type == 'landing_page' %}
+{% endif %}
+
+ {% if page_content_type == 'landing_page' and thecont[0]['#paragraph'].type.target_id != 'advanced_callout_box' %}
</div>
{% endif %}
diff --git a/web/themes/asc_seven/css/customstyle.css b/web/themes/asc_seven/css/customstyle.css
index 75436544c8..f62fc630e7 100644
--- a/web/themes/asc_seven/css/customstyle.css
+++ b/web/themes/asc_seven/css/customstyle.css
@@ -49,3 +49,14 @@ select option[value="4"] {
display: inline-block;
margin: 0;
}
+
+
+
+/*
+// Paragraphs
+// --------------------------------------------------
+*/
+
+.js .paragraph-type-title {
+ flex-basis: 500px;
+}
--
GitLab