From 1969a9001995fbb0db9889b74fadc90ae5365af5 Mon Sep 17 00:00:00 2001
From: Brian Canini <canini.16@osu.edu>
Date: Wed, 5 May 2021 09:23:08 -0400
Subject: [PATCH] setting up full width red button option
---
.../assets/sass/components/_paragraphs.scss | 14 ++
web/themes/asc_bootstrap/css/style.css | 121 ++++++++++--------
.../paragraph/paragraph--button.html.twig | 6 +-
3 files changed, 87 insertions(+), 54 deletions(-)
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
index 3c65ccc7f1..6be9e806c6 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss
@@ -188,6 +188,20 @@
}
}
+.btn-fullw-red {
+ width: 100%;
+ text-align: center;
+ padding: 10px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ border-radius: 5px;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
// --------------------------------------------------
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index 87f554dd5d..5a5bece786 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -12440,47 +12440,62 @@ article.news-story {
background-color: #efefef;
}
-/* line 198, ../assets/sass/components/_paragraphs.scss */
+/* line 191, ../assets/sass/components/_paragraphs.scss */
+.btn-fullw-red {
+ width: 100%;
+ text-align: center;
+ padding: 10px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ border-radius: 5px;
+}
+/* line 200, ../assets/sass/components/_paragraphs.scss */
+.btn-fullw-red:hover {
+ text-decoration: underline;
+}
+
+/* line 212, ../assets/sass/components/_paragraphs.scss */
.call-out-container .img-link-wrapper:hover + .field--type-link a {
color: #BB0000;
text-decoration: underline;
}
-/* line 203, ../assets/sass/components/_paragraphs.scss */
+/* line 217, ../assets/sass/components/_paragraphs.scss */
.call-out-container .field--item:hover > a {
color: #BB0000;
text-decoration: underline;
}
-/* line 208, ../assets/sass/components/_paragraphs.scss */
+/* line 222, ../assets/sass/components/_paragraphs.scss */
.call-out-container a {
color: #444444;
font-size: 20px;
padding-top: 5px;
font-weight: 500;
}
-/* line 214, ../assets/sass/components/_paragraphs.scss */
+/* line 228, ../assets/sass/components/_paragraphs.scss */
.call-out-container a:hover {
color: #BB0000;
text-decoration: underline;
}
-/* line 220, ../assets/sass/components/_paragraphs.scss */
+/* line 234, ../assets/sass/components/_paragraphs.scss */
.call-out-container .field--type-link {
width: 100%;
border-bottom: #BB0000 solid 5px;
margin-bottom: 15px;
}
-/* line 225, ../assets/sass/components/_paragraphs.scss */
+/* line 239, ../assets/sass/components/_paragraphs.scss */
.call-out-container .field--type-link .field--item {
padding: 15px;
background: #F5F5F5;
}
@media (max-width: 768px) {
- /* line 220, ../assets/sass/components/_paragraphs.scss */
+ /* line 234, ../assets/sass/components/_paragraphs.scss */
.call-out-container .field--type-link {
margin-bottom: 0;
}
}
-/* line 246, ../assets/sass/components/_paragraphs.scss */
+/* line 260, ../assets/sass/components/_paragraphs.scss */
.dgray-bg .call-out-container a,
.dscarlet-bg .call-out-container a,
.dviolet-bg .call-out-container a,
@@ -12490,7 +12505,7 @@ article.news-story {
.dorange-bg .call-out-container a {
text-decoration: none;
}
-/* line 249, ../assets/sass/components/_paragraphs.scss */
+/* line 263, ../assets/sass/components/_paragraphs.scss */
.dgray-bg .call-out-container a:hover,
.dscarlet-bg .call-out-container a:hover,
.dviolet-bg .call-out-container a:hover,
@@ -12501,20 +12516,20 @@ article.news-story {
text-decoration: underline;
}
-/* line 264, ../assets/sass/components/_paragraphs.scss */
+/* line 278, ../assets/sass/components/_paragraphs.scss */
.file .file-icon span {
color: #bb0000;
}
-/* line 271, ../assets/sass/components/_paragraphs.scss */
+/* line 285, ../assets/sass/components/_paragraphs.scss */
.file .file-link a {
color: #bb0000;
}
-/* line 276, ../assets/sass/components/_paragraphs.scss */
+/* line 290, ../assets/sass/components/_paragraphs.scss */
.file .file-size {
color: #bb0000;
}
-/* line 286, ../assets/sass/components/_paragraphs.scss */
+/* line 300, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container {
width: 100%;
position: absolute;
@@ -12525,12 +12540,12 @@ article.news-story {
max-height: 550px;
}
@media (max-width: 768px) {
- /* line 286, ../assets/sass/components/_paragraphs.scss */
+ /* line 300, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container {
max-height: 100%;
}
}
-/* line 299, ../assets/sass/components/_paragraphs.scss */
+/* line 313, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
@@ -12542,7 +12557,7 @@ article.news-story {
transform: perspective(1px) translateY(-50%);
}
@media (max-width: 768px) {
- /* line 299, ../assets/sass/components/_paragraphs.scss */
+ /* line 313, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt {
height: 100%;
display: flex;
@@ -12550,11 +12565,11 @@ article.news-story {
justify-content: center;
}
}
-/* line 316, ../assets/sass/components/_paragraphs.scss */
+/* line 330, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper {
width: 100%;
}
-/* line 319, ../assets/sass/components/_paragraphs.scss */
+/* line 333, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper h2 {
font-size: 36px;
text-transform: uppercase;
@@ -12563,36 +12578,36 @@ article.news-story {
line-height: 1.1;
}
@media (max-width: 768px) {
- /* line 319, ../assets/sass/components/_paragraphs.scss */
+ /* line 333, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper h2 {
font-size: 15px;
margin-top: 0;
}
}
-/* line 332, ../assets/sass/components/_paragraphs.scss */
+/* line 346, ../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 332, ../assets/sass/components/_paragraphs.scss */
+ /* line 346, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper p {
font-size: 14px;
margin-top: 0;
}
}
-/* line 343, ../assets/sass/components/_paragraphs.scss */
+/* line 357, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn {
white-space: normal;
}
-/* line 347, ../assets/sass/components/_paragraphs.scss */
+/* line 361, ../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 352, ../assets/sass/components/_paragraphs.scss */
+/* line 366, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
min-width: 25%;
margin: 10px;
@@ -12602,23 +12617,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 361, ../assets/sass/components/_paragraphs.scss */
+/* line 375, ../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 368, ../assets/sass/components/_paragraphs.scss */
+/* line 382, ../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 372, ../assets/sass/components/_paragraphs.scss */
+/* line 386, ../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 352, ../assets/sass/components/_paragraphs.scss */
+ /* line 366, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
display: block;
width: 100%;
@@ -12626,22 +12641,22 @@ article.news-story {
font-weight: 700;
}
}
-/* line 384, ../assets/sass/components/_paragraphs.scss */
+/* line 398, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 388, ../assets/sass/components/_paragraphs.scss */
+/* line 402, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 394, ../assets/sass/components/_paragraphs.scss */
+/* line 408, ../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 399, ../assets/sass/components/_paragraphs.scss */
+/* line 413, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
min-width: 40%;
margin: 10px;
@@ -12651,23 +12666,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 408, ../assets/sass/components/_paragraphs.scss */
+/* line 422, ../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 415, ../assets/sass/components/_paragraphs.scss */
+/* line 429, ../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 419, ../assets/sass/components/_paragraphs.scss */
+/* line 433, ../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 399, ../assets/sass/components/_paragraphs.scss */
+ /* line 413, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
display: block;
width: 100%;
@@ -12675,22 +12690,22 @@ article.news-story {
font-weight: 700;
}
}
-/* line 431, ../assets/sass/components/_paragraphs.scss */
+/* line 445, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 435, ../assets/sass/components/_paragraphs.scss */
+/* line 449, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 441, ../assets/sass/components/_paragraphs.scss */
+/* line 455, ../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 446, ../assets/sass/components/_paragraphs.scss */
+/* line 460, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
min-width: 50%;
margin: 10px;
@@ -12700,23 +12715,23 @@ article.news-story {
text-transform: uppercase;
padding: 5px;
}
-/* line 455, ../assets/sass/components/_paragraphs.scss */
+/* line 469, ../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 462, ../assets/sass/components/_paragraphs.scss */
+/* line 476, ../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 466, ../assets/sass/components/_paragraphs.scss */
+/* line 480, ../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 446, ../assets/sass/components/_paragraphs.scss */
+ /* line 460, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
display: block;
width: 100%;
@@ -12724,46 +12739,46 @@ article.news-story {
font-weight: 700;
}
}
-/* line 478, ../assets/sass/components/_paragraphs.scss */
+/* line 492, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper {
background: transparent;
color: #4A4A4A;
}
-/* line 482, ../assets/sass/components/_paragraphs.scss */
+/* line 496, ../assets/sass/components/_paragraphs.scss */
.slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper:hover {
background: transparent;
}
-/* line 499, ../assets/sass/components/_paragraphs.scss */
+/* line 513, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tagline {
margin: 20px 0;
float: left;
}
-/* line 510, ../assets/sass/components/_paragraphs.scss */
+/* line 524, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field {
padding: 20px;
}
-/* line 514, ../assets/sass/components/_paragraphs.scss */
+/* line 528, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field--name-field-media-file {
padding: 0;
}
-/* line 518, ../assets/sass/components/_paragraphs.scss */
+/* line 532, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--tabs .field--name-field-media-image {
padding: 20px 0;
}
-/* line 529, ../assets/sass/components/_paragraphs.scss */
+/* line 543, ../assets/sass/components/_paragraphs.scss */
.para_1_col .field--name-field-media-twitter {
margin: 0 auto;
width: 60%;
}
-/* line 533, ../assets/sass/components/_paragraphs.scss */
+/* line 547, ../assets/sass/components/_paragraphs.scss */
.para_1_col .field--name-field-media-twitter .col-xs-12 {
padding: 0;
}
-/* line 543, ../assets/sass/components/_paragraphs.scss */
+/* line 557, ../assets/sass/components/_paragraphs.scss */
.paragraph--type--video iframe {
width: 100% !important;
}
diff --git a/web/themes/asc_bootstrap/templates/paragraph/paragraph--button.html.twig b/web/themes/asc_bootstrap/templates/paragraph/paragraph--button.html.twig
index c903175de5..388552dbac 100644
--- a/web/themes/asc_bootstrap/templates/paragraph/paragraph--button.html.twig
+++ b/web/themes/asc_bootstrap/templates/paragraph/paragraph--button.html.twig
@@ -39,6 +39,10 @@
{% set btnstyle, btnwrap = 'btn-fullw', 'btn-fullw-wrapper' %}
+{% elseif content.field_button_type['#items'].getString() == "full-width-btn-red" %}
+
+ {% set btnstyle = 'btn-fullw-red btn-primary' %}
+
{% elseif content.field_button_type['#items'].getString() == "default-btn" %}
{% set btnstyle = 'btn-primary' %}
@@ -55,7 +59,7 @@
<div class="btn {{ btnstyle }} btn-par">
{{ content.field_button.0['#title'] }}
- {% if btnstyle != "btn-fullw" %}
+ {% if btnstyle != "btn-fullw" and btnstyle != "btn-fullw-red btn-primary" %}
<i class="fa fa-angle-right"></i>
{% endif %}
</div>
--
GitLab