asc_bootstrap - new btn paragraph type

web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss

@@ -164,6 +164,26 @@
   }
 }
 
+.btn-fullw-wrapper {
+  color: $brand-gray;
+}
+
+.btn-fullw {
+  width: 100%;
+  text-align: center;
+  padding: 10px;
+  border: solid $brand-gray 2px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  border-radius: 5px;
+
+  &:hover {
+    text-decoration: underline;
+    background-color: #efefef;
+  }
+}
+
 
 // ---------------------------------------------------
 
@@ -282,6 +302,15 @@
             font-weight: 700;
           }
         }
+
+        .btn-fullw-wrapper {
+          background: transparent;
+          color: $brand-gray;
+
+          &:hover {
+            background: transparent;
+          }
+        }
       }
 
       .btn-links-18 {
@@ -320,6 +349,15 @@
             font-weight: 700;
           }
         }
+
+        .btn-fullw-wrapper {
+          background: transparent;
+          color: $brand-gray;
+
+          &:hover {
+            background: transparent;
+          }
+        }
       }
 
       .btn-links-17 {
@@ -358,6 +396,15 @@
             font-weight: 700;
           }
         }
+
+        .btn-fullw-wrapper {
+          background: transparent;
+          color: $brand-gray;
+
+          &:hover {
+            background: transparent;
+          }
+        }
       }
     }
 

web/themes/asc_bootstrap/assets/sass/layout/_section-background-colors.scss

@@ -194,6 +194,14 @@
   .field--name-field-callout-link a:hover {
     color: $white;
   }
+
+  .btn-fullw {
+    border: solid $white 2px;
+
+    &:hover {
+      border: solid $brand-gray 2px;
+    }
+  }
 }
 
 .dscarlet-bg {
@@ -238,6 +246,14 @@
   .field--name-field-callout-link a:hover {
     color: $white;
   }
+
+  .btn-fullw {
+    border: solid $white 2px;
+
+    &:hover {
+      border: solid $brand-gray 2px;
+    }
+  }
 }
 
 .dviolet-bg {
@@ -282,6 +298,14 @@
   .field--name-field-callout-link a:hover {
     color: $white;
   }
+
+  .btn-fullw {
+    border: solid $white 2px;
+
+    &:hover {
+      border: solid $brand-gray 2px;
+    }
+  }
 }
 
 .dteal-bg {
@@ -326,6 +350,14 @@
   .field--name-field-callout-link a:hover {
     color: $white;
   }
+
+  .btn-fullw {
+    border: solid $white 2px;
+
+    &:hover {
+      border: solid $brand-gray 2px;
+    }
+  }
 }
 
 .dpurple-bg {
@@ -370,6 +402,14 @@
   .field--name-field-callout-link a:hover {
     color: $white;
   }
+
+  .btn-fullw {
+    border: solid $white 2px;
+
+    &:hover {
+      border: solid $brand-gray 2px;
+    }
+  }
 }
 
 .dgreen-bg {
@@ -414,6 +454,14 @@
   .field--name-field-callout-link a:hover {
     color: $white;
   }
+
+  .btn-fullw {
+    border: solid $white 2px;
+
+    &:hover {
+      border: solid $brand-gray 2px;
+    }
+  }
 }
 
 .dorange-bg {
@@ -458,4 +506,12 @@
   .field--name-field-callout-link a:hover {
     color: $white;
   }
+
+  .btn-fullw {
+    border: solid $white 2px;
+
+    &:hover {
+      border: solid $brand-gray 2px;
+    }
+  }
 }

web/themes/asc_bootstrap/templates/paragraph/paragraph--button.html.twig

@@ -35,11 +35,29 @@
  *
  */
 #}
+{% if content.field_button_type['#items'].getString() == "full-width-btn" %}
+
+        {% set btnstyle, btnwrap = 'btn-fullw', 'btn-fullw-wrapper' %}
+
+{% elseif content.field_button_type['#items'].getString() == "default-btn" %}
+
+        {% set btnstyle = 'btn-primary' %}
+
+{% else %}
+
+        {% set btnstyle = 'btn-primary' %}
+
+{% endif %}
+
+
 {% if content.field_button.0 %}
-  <a href="{{ content.field_button[0]['#url'] }}" title="{{ content.field_button.0['#title'] }}" class="btn-wrapper">
+  <a href="{{ content.field_button[0]['#url'] }}" title="{{ content.field_button.0['#title'] }}" class="btn-wrapper {{ btnwrap }}">
 
-    <div class="btn btn-primary btn-par">
-        {{ content.field_button.0['#title'] }} <i class="fa fa-angle-right"></i>
+    <div class="btn {{ btnstyle }} btn-par">
+        {{ content.field_button.0['#title'] }}
+        {% if btnstyle != "btn-fullw" %}
+          <i class="fa fa-angle-right"></i>
+        {% endif %}
     </div>
 
   </a>