From de71d8ad3ce3795b821c69e4e881c25a9f72f8ec Mon Sep 17 00:00:00 2001
From: Brian Canini <canini.16@osu.edu>
Date: Tue, 11 Jan 2022 13:05:25 -0500
Subject: [PATCH] callouts - adding horizontal callouts - fixing mobile styles
for advanced callouts - fixing basic page displays for advanced callouts
---
.../assets/sass/components/_paragraphs.scss | 111 ++++++++
web/themes/asc_bootstrap/css/style.css | 246 +++++++++++++-----
...h-button--callout-box-horizontal.html.twig | 87 +++++++
...aragraph--callout-box-horizontal.html.twig | 47 ++++
.../paragraph/paragraph--column_one.html.twig | 46 +++-
.../paragraph--columns_four.html.twig | 25 +-
.../paragraph--columns_three.html.twig | 21 +-
7 files changed, 501 insertions(+), 82 deletions(-)
create mode 100644 web/themes/asc_bootstrap/templates/field/field--paragraph--field-cb-h-button--callout-box-horizontal.html.twig
create mode 100644 web/themes/asc_bootstrap/templates/paragraph/paragraph--callout-box-horizontal.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 819836ef8a..bd0ade9415 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
@@ -304,7 +304,27 @@
@media (max-width: 768px) {
display: block;
+
+
+ .col-xs-12.col-adv-call-mobile {
+ padding: 0;
+ }
+
}
+
+}
+
+.adv-call-mobile-bl,
+.adv-call-mobile-bm,
+.adv-call-mobile-br {
+ background: $brand-lgray;
+}
+
+.paragraph__column .col-r.adv-call-mobile-br,
+.paragraph__column .col-m.adv-call-mobile-bm,
+.paragraph__column .col-l.adv-call-mobile-bl {
+ margin: 16px 0;
+ padding: 0;
}
.carousel.adv-callout-carousel {
@@ -356,6 +376,10 @@
p, h2, h3, h4, h5, h6, a {
color: $gray;
}
+
+ @media (max-width: 768px) {
+ padding: 20px 15px 0;
+ }
}
.field--name-field-av-cb-link {
@@ -380,6 +404,7 @@
text-align: center;
position: relative;
width: 100%;
+ padding: 15px;
}
}
}
@@ -449,6 +474,92 @@
background: $brand-lgray;
}
+
+
+// ---------------------------------------------------
+
+//## Call Out Boxes - Horizontal
+
+.cb-h {
+ background: #EFF1F2;
+ float: left;
+ display: flex;
+ width: 100%;
+
+ .cb-h-l {
+ padding: 0;
+ flex:1;
+ }
+
+ .cb-h-r {
+ flex:1;
+
+ .field--name-field-cb-h-text {
+ padding: 25px 40px 25px 10px;
+
+ @media (max-width: 768px) {
+ padding: 0 0 20px;
+ }
+ }
+
+ .field--name-field-cb-h-button {
+ 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%;
+ }
+ }
+ }
+
+ @media (max-width: 768px) {
+ display: block;
+ }
+}
+
+.hor-arrows {
+
+ .control-l,
+ .control-r {
+ background: rgba(0,0,0,0.5);
+ }
+
+ @media (max-width: 768px) {
+ text-align: center;
+ margin-top: 10px;
+ }
+}
+
+.landing-page .carousel.hor-callout-carousel {
+ max-height: none;
+
+ @media (max-width: 768px) {
+ .carousel-inner {
+
+ .item {
+ flex-shrink: 1;
+ }
+ }
+ }
+}
+
+
// ---------------------------------------------------
//## Media
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index 340ab0ad37..1124f83dfb 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -13213,62 +13213,87 @@ article.news-story {
.carousel.adv-callout-mobile {
display: block;
}
+ /* line 309, ../assets/sass/components/_paragraphs.scss */
+ .carousel.adv-callout-mobile .col-xs-12.col-adv-call-mobile {
+ padding: 0;
+ }
+}
+
+/* line 317, ../assets/sass/components/_paragraphs.scss */
+.adv-call-mobile-bl,
+.adv-call-mobile-bm,
+.adv-call-mobile-br {
+ background: #F5F5F5;
+}
+
+/* line 323, ../assets/sass/components/_paragraphs.scss */
+.paragraph__column .col-r.adv-call-mobile-br,
+.paragraph__column .col-m.adv-call-mobile-bm,
+.paragraph__column .col-l.adv-call-mobile-bl {
+ margin: 16px 0;
+ padding: 0;
}
-/* line 310, ../assets/sass/components/_paragraphs.scss */
+/* line 330, ../assets/sass/components/_paragraphs.scss */
.carousel.adv-callout-carousel {
margin: 30px 0;
overflow: visible;
}
-/* line 314, ../assets/sass/components/_paragraphs.scss */
+/* line 334, ../assets/sass/components/_paragraphs.scss */
.carousel.adv-callout-carousel .row {
display: flex;
}
-/* line 317, ../assets/sass/components/_paragraphs.scss */
+/* line 337, ../assets/sass/components/_paragraphs.scss */
.carousel.adv-callout-carousel .row .col-l {
flex: 1;
background: #F5F5F5;
margin: 0 12px;
padding: 0 0 30px;
}
-/* line 324, ../assets/sass/components/_paragraphs.scss */
+/* line 344, ../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 */
+/* line 351, ../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 */
+/* line 359, ../assets/sass/components/_paragraphs.scss */
.carousel.adv-callout-carousel .last-row {
display: block;
}
@media (max-width: 768px) {
- /* line 343, ../assets/sass/components/_paragraphs.scss */
+ /* line 363, ../assets/sass/components/_paragraphs.scss */
.carousel.adv-callout-carousel .container {
margin-bottom: 20px;
}
}
-/* line 350, ../assets/sass/components/_paragraphs.scss */
+/* line 370, ../assets/sass/components/_paragraphs.scss */
.call-out-adv-container {
padding-bottom: 9.5px;
}
-/* line 353, ../assets/sass/components/_paragraphs.scss */
+/* line 373, ../assets/sass/components/_paragraphs.scss */
.call-out-adv-container .field--name-field-av-cb-text {
padding: 20px;
}
-/* line 356, ../assets/sass/components/_paragraphs.scss */
+/* line 376, ../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 */
+@media (max-width: 768px) {
+ /* line 373, ../assets/sass/components/_paragraphs.scss */
+ .call-out-adv-container .field--name-field-av-cb-text {
+ padding: 20px 15px 0;
+ }
+}
+/* line 385, ../assets/sass/components/_paragraphs.scss */
.call-out-adv-container .field--name-field-av-cb-link {
text-align: right;
position: absolute;
@@ -13276,29 +13301,30 @@ article.news-story {
bottom: 0;
padding: 6px 0;
}
-/* line 368, ../assets/sass/components/_paragraphs.scss */
+/* line 392, ../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 */
+ /* line 392, ../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 */
+ /* line 385, ../assets/sass/components/_paragraphs.scss */
.call-out-adv-container .field--name-field-av-cb-link {
text-align: center;
position: relative;
width: 100%;
+ padding: 15px;
}
}
-/* line 387, ../assets/sass/components/_paragraphs.scss */
+/* line 412, ../assets/sass/components/_paragraphs.scss */
.control-l {
position: absolute;
left: 0;
@@ -13309,14 +13335,14 @@ article.news-story {
width: 50px;
border-radius: 0;
}
-/* line 397, ../assets/sass/components/_paragraphs.scss */
+/* line 422, ../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 */
+ /* line 412, ../assets/sass/components/_paragraphs.scss */
.control-l {
position: relative;
bottom: 0;
@@ -13324,7 +13350,7 @@ article.news-story {
}
}
-/* line 410, ../assets/sass/components/_paragraphs.scss */
+/* line 435, ../assets/sass/components/_paragraphs.scss */
.control-l.btn:hover,
.control-l.btn:active,
.control-l.btn:focus,
@@ -13332,7 +13358,7 @@ article.news-story {
background: #999;
}
-/* line 417, ../assets/sass/components/_paragraphs.scss */
+/* line 442, ../assets/sass/components/_paragraphs.scss */
.control-r {
position: absolute;
right: 0;
@@ -13343,14 +13369,14 @@ article.news-story {
width: 50px;
border-radius: 0;
}
-/* line 427, ../assets/sass/components/_paragraphs.scss */
+/* line 452, ../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 */
+ /* line 442, ../assets/sass/components/_paragraphs.scss */
.control-r {
position: relative;
bottom: 0;
@@ -13358,7 +13384,7 @@ article.news-story {
}
}
-/* line 440, ../assets/sass/components/_paragraphs.scss */
+/* line 465, ../assets/sass/components/_paragraphs.scss */
.control-r.btn:hover,
.control-r.btn:active,
.control-r.btn:focus,
@@ -13366,26 +13392,112 @@ article.news-story {
background: #999;
}
-/* line 447, ../assets/sass/components/_paragraphs.scss */
+/* line 472, ../assets/sass/components/_paragraphs.scss */
.landing-page .carousel .carousel-inner.adv-call-mob-inner {
display: block;
background: #F5F5F5;
}
-/* line 459, ../assets/sass/components/_paragraphs.scss */
+/* line 483, ../assets/sass/components/_paragraphs.scss */
+.cb-h {
+ background: #EFF1F2;
+ float: left;
+ display: flex;
+ width: 100%;
+}
+/* line 489, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-l {
+ padding: 0;
+ flex: 1;
+}
+/* line 494, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-r {
+ flex: 1;
+}
+/* line 497, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-r .field--name-field-cb-h-text {
+ padding: 25px 40px 25px 10px;
+}
+@media (max-width: 768px) {
+ /* line 497, ../assets/sass/components/_paragraphs.scss */
+ .cb-h .cb-h-r .field--name-field-cb-h-text {
+ padding: 0 0 20px;
+ }
+}
+/* line 505, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-r .field--name-field-cb-h-button {
+ text-align: right;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 6px 0;
+}
+/* line 512, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-r .field--name-field-cb-h-button a {
+ color: #ffffff;
+ background: #bb0000;
+ padding: 10px;
+}
+@media (max-width: 768px) {
+ /* line 512, ../assets/sass/components/_paragraphs.scss */
+ .cb-h .cb-h-r .field--name-field-cb-h-button a {
+ width: 100%;
+ display: block;
+ }
+}
+@media (max-width: 768px) {
+ /* line 505, ../assets/sass/components/_paragraphs.scss */
+ .cb-h .cb-h-r .field--name-field-cb-h-button {
+ text-align: center;
+ position: relative;
+ width: 100%;
+ }
+}
+@media (max-width: 768px) {
+ /* line 483, ../assets/sass/components/_paragraphs.scss */
+ .cb-h {
+ display: block;
+ }
+}
+
+/* line 538, ../assets/sass/components/_paragraphs.scss */
+.hor-arrows .control-l,
+.hor-arrows .control-r {
+ background: rgba(0, 0, 0, 0.5);
+}
+@media (max-width: 768px) {
+ /* line 536, ../assets/sass/components/_paragraphs.scss */
+ .hor-arrows {
+ text-align: center;
+ margin-top: 10px;
+ }
+}
+
+/* line 549, ../assets/sass/components/_paragraphs.scss */
+.landing-page .carousel.hor-callout-carousel {
+ max-height: none;
+}
+@media (max-width: 768px) {
+ /* line 555, ../assets/sass/components/_paragraphs.scss */
+ .landing-page .carousel.hor-callout-carousel .carousel-inner .item {
+ flex-shrink: 1;
+ }
+}
+
+/* line 570, ../assets/sass/components/_paragraphs.scss */
.file .file-icon span {
color: #bb0000;
}
-/* line 466, ../assets/sass/components/_paragraphs.scss */
+/* line 577, ../assets/sass/components/_paragraphs.scss */
.file .file-link a {
color: #bb0000;
}
-/* line 471, ../assets/sass/components/_paragraphs.scss */
+/* line 582, ../assets/sass/components/_paragraphs.scss */
.file .file-size {
color: #bb0000;
}
-/* line 481, ../assets/sass/components/_paragraphs.scss */
+/* line 592, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container {
width: 100%;
position: absolute;
@@ -13396,12 +13508,12 @@ article.news-story {
max-height: 550px;
}
@media (max-width: 768px) {
- /* line 481, ../assets/sass/components/_paragraphs.scss */
+ /* line 592, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container {
max-height: 100%;
}
}
-/* line 494, ../assets/sass/components/_paragraphs.scss */
+/* line 605, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
@@ -13413,7 +13525,7 @@ article.news-story {
transform: perspective(1px) translateY(-50%);
}
@media (max-width: 768px) {
- /* line 494, ../assets/sass/components/_paragraphs.scss */
+ /* line 605, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt {
height: 100%;
display: flex;
@@ -13421,11 +13533,11 @@ article.news-story {
justify-content: center;
}
}
-/* line 511, ../assets/sass/components/_paragraphs.scss */
+/* line 622, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper {
width: 100%;
}
-/* line 514, ../assets/sass/components/_paragraphs.scss */
+/* line 625, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper h2 {
font-size: 36px;
text-transform: uppercase;
@@ -13434,36 +13546,36 @@ article.news-story {
line-height: 1.1;
}
@media (max-width: 768px) {
- /* line 514, ../assets/sass/components/_paragraphs.scss */
+ /* line 625, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper h2 {
font-size: 15px;
margin-top: 0;
}
}
-/* line 527, ../assets/sass/components/_paragraphs.scss */
+/* line 638, ../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 527, ../assets/sass/components/_paragraphs.scss */
+ /* line 638, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper p {
font-size: 14px;
margin-top: 0;
}
}
-/* line 538, ../assets/sass/components/_paragraphs.scss */
+/* line 649, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn {
white-space: normal;
}
-/* line 542, ../assets/sass/components/_paragraphs.scss */
+/* line 653, ../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 547, ../assets/sass/components/_paragraphs.scss */
+/* line 658, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
min-width: 25%;
margin: 10px;
@@ -13473,23 +13585,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 556, ../assets/sass/components/_paragraphs.scss */
+/* line 667, ../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 563, ../assets/sass/components/_paragraphs.scss */
+/* line 674, ../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 567, ../assets/sass/components/_paragraphs.scss */
+/* line 678, ../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 547, ../assets/sass/components/_paragraphs.scss */
+ /* line 658, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
display: block;
width: 100%;
@@ -13497,22 +13609,22 @@ article.news-story {
font-weight: 700;
}
}
-/* line 579, ../assets/sass/components/_paragraphs.scss */
+/* line 690, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 583, ../assets/sass/components/_paragraphs.scss */
+/* line 694, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 589, ../assets/sass/components/_paragraphs.scss */
+/* line 700, ../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 594, ../assets/sass/components/_paragraphs.scss */
+/* line 705, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
min-width: 40%;
margin: 10px;
@@ -13522,23 +13634,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 603, ../assets/sass/components/_paragraphs.scss */
+/* line 714, ../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 610, ../assets/sass/components/_paragraphs.scss */
+/* line 721, ../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 614, ../assets/sass/components/_paragraphs.scss */
+/* line 725, ../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 594, ../assets/sass/components/_paragraphs.scss */
+ /* line 705, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
display: block;
width: 100%;
@@ -13546,22 +13658,22 @@ article.news-story {
font-weight: 700;
}
}
-/* line 626, ../assets/sass/components/_paragraphs.scss */
+/* line 737, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 630, ../assets/sass/components/_paragraphs.scss */
+/* line 741, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 636, ../assets/sass/components/_paragraphs.scss */
+/* line 747, ../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 641, ../assets/sass/components/_paragraphs.scss */
+/* line 752, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
min-width: 50%;
margin: 10px;
@@ -13571,23 +13683,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 650, ../assets/sass/components/_paragraphs.scss */
+/* line 761, ../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 657, ../assets/sass/components/_paragraphs.scss */
+/* line 768, ../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 661, ../assets/sass/components/_paragraphs.scss */
+/* line 772, ../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 641, ../assets/sass/components/_paragraphs.scss */
+ /* line 752, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
display: block;
width: 100%;
@@ -13595,46 +13707,46 @@ article.news-story {
font-weight: 700;
}
}
-/* line 673, ../assets/sass/components/_paragraphs.scss */
+/* line 784, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 677, ../assets/sass/components/_paragraphs.scss */
+/* line 788, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 694, ../assets/sass/components/_paragraphs.scss */
+/* line 805, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tagline {
margin: 20px 0;
float: left;
}
-/* line 705, ../assets/sass/components/_paragraphs.scss */
+/* line 816, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field {
padding: 20px;
}
-/* line 709, ../assets/sass/components/_paragraphs.scss */
+/* line 820, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field--name-field-media-file {
padding: 0;
}
-/* line 713, ../assets/sass/components/_paragraphs.scss */
+/* line 824, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field--name-field-media-image {
padding: 20px 0;
}
-/* line 724, ../assets/sass/components/_paragraphs.scss */
+/* line 835, ../assets/sass/components/_paragraphs.scss */
.para_1_col .field--name-field-media-twitter {
margin: 0 auto;
width: 60%;
}
-/* line 728, ../assets/sass/components/_paragraphs.scss */
+/* line 839, ../assets/sass/components/_paragraphs.scss */
.para_1_col .field--name-field-media-twitter .col-xs-12 {
padding: 0;
}
-/* line 738, ../assets/sass/components/_paragraphs.scss */
+/* line 849, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--video iframe {
width: 100% !important;
}
diff --git a/web/themes/asc_bootstrap/templates/field/field--paragraph--field-cb-h-button--callout-box-horizontal.html.twig b/web/themes/asc_bootstrap/templates/field/field--paragraph--field-cb-h-button--callout-box-horizontal.html.twig
new file mode 100644
index 0000000000..8225e74d0b
--- /dev/null
+++ b/web/themes/asc_bootstrap/templates/field/field--paragraph--field-cb-h-button--callout-box-horizontal.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--callout-box-horizontal.html.twig b/web/themes/asc_bootstrap/templates/paragraph/paragraph--callout-box-horizontal.html.twig
new file mode 100644
index 0000000000..4f5eaf9937
--- /dev/null
+++ b/web/themes/asc_bootstrap/templates/paragraph/paragraph--callout-box-horizontal.html.twig
@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * Custom Paragraph template for displaying a Horizontal Callout Box.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ * - id: The paragraph ID.
+ * - bundle: The type of the paragraph, for example, "image" or "text".
+ * - authorid: The user ID of the paragraph author.
+ * - createdtime: Formatted creation date. Preprocess functions can
+ * reformat it by calling format_date() with the desired parameters on
+ * $variables['paragraph']->getCreatedTime().
+ * - 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()
+ *
+ */
+#}
+
+<div class="cb-h">
+ <div class="col-xs-12 col-md-6 cb-h-l">
+ {{ content.field_cb_h_image }}
+ </div>
+ <div class="col-xs-12 col-md-6 cb-h-r">
+ {{ content.field_cb_h_text }}
+ {{ content.field_cb_h_button }}
+ </div>
+</div>
diff --git a/web/themes/asc_bootstrap/templates/paragraph/paragraph--column_one.html.twig b/web/themes/asc_bootstrap/templates/paragraph/paragraph--column_one.html.twig
index 1ddac5b409..4026aa7b2b 100644
--- a/web/themes/asc_bootstrap/templates/paragraph/paragraph--column_one.html.twig
+++ b/web/themes/asc_bootstrap/templates/paragraph/paragraph--column_one.html.twig
@@ -51,13 +51,53 @@
{% 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 %}
- <div class="col-xs-12 col-f">
- {{ thecont[0] }}
- </div>
+
+ {% if thecont[0]['#paragraph'].type.target_id == 'callout_box_horizontal' %}
+
+ {% set contcount = thecont|length - 17 %}
+
+ <div id="carousel-{{ rand }}" class="carousel slide adv-callout-carousel hor-callout-carousel" data-ride="false" data-interval="0">
+ <div class="carousel-inner{% if contcount > 2 %} controls-spacing{% endif %}" role="listbox">
+
+ {% for item in thecont|slice(0, contcount) %}
+
+ <div class="item {% if loop.first %}active{% endif %}">
+ {{ thecont[loop.index0] }}
+ </div>
+
+ {% endfor %}
+
+ </div>
+
+ {% if contcount > 1 %}
+
+ <!-- Controls -->
+ <div class="col-6 text-right hor-arrows">
+ <a class="btn btn-primary mb-3 mr-1 control-l" href="#carousel-{{ 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-{{ rand }}" role="button" data-slide="next">
+ <i class="fa fa-angle-right" aria-hidden="true"></i>
+ </a>
+ </div>
+
+ {% endif %}
+
+ </div>
+
+ {% else %}
+ <div class="col-xs-12 col-f">
+ {{ thecont[0] }}
+ </div>
+ {% endif %}
+
{% if page_content_type == 'landing_page' %}
</div>
{% endif %}
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 25535d1b2b..5bd5b02bc9 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
@@ -76,17 +76,14 @@
{% 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="col-xs-12 col-adv-call-mobile">
<div class="card">
{{ thecont[loop.index0] }}
</div>
@@ -94,12 +91,28 @@
</div>
{% endfor %}
+{% endif %}
+{% if page_content_type == 'page' %}
+ <div class="{{ leftwidth }} col-l adv-call-mobile-bl">
+ {{ thecont[0] }}
+ </div>
- </div>
+ <div class="{{ middlewidth }} col-m adv-call-mobile-bm">
+ {{ thecont[1] }}
+ </div>
-{% if page_content_type == 'landing_page' %}
+ <div class="{{ middlewidth }} col-m adv-call-mobile-bm">
+ {{ thecont[2] }}
+ </div>
+
+ <div class="{{ rightwidth }} col-r adv-call-mobile-br">
+ {{ thecont[3] }}
</div>
{% endif %}
+{% if page_content_type == 'landing_page' %}
+ </div>
+{% endif %}
+ </div>
{% if page_content_type != 'page' %}
<!-- Controls -->
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 db2793d8b3..f970f3b5f8 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
@@ -98,17 +98,14 @@
{% 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="col-xs-12 col-adv-call-mobile">
<div class="card">
{{ thecont[loop.index0] }}
</div>
@@ -116,12 +113,24 @@
</div>
{% endfor %}
+{% endif %}
+{% if page_content_type == 'page' %}
+ <div class="{{ leftwidth }} col-l adv-call-mobile-bl">
+ {{ thecont[0] }}
+ </div>
- </div>
+ <div class="{{ middlewidth }} col-m adv-call-mobile-bm">
+ {{ thecont[1] }}
+ </div>
-{% if page_content_type == 'landing_page' %}
+ <div class="{{ rightwidth }} col-r adv-call-mobile-br">
+ {{ thecont[2] }}
</div>
{% endif %}
+{% if page_content_type == 'landing_page' %}
+ </div>
+{% endif %}
+ </div>
{% if page_content_type != 'page' %}
<!-- Controls -->
--
GitLab