fixing padding on advanced textarea sections

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

@@ -13,7 +13,10 @@
 }
 
 .transparent-bg {
-  padding: 16px;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 }
 
 
@@ -24,7 +27,11 @@
 .lgray-bg {
   background-color: #f5f5f5;
   color: $black-base;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   .panel {
     background-color: transparent;
@@ -37,12 +44,27 @@
   .field--name-field-callout-link a:hover {
     color: $black-base;
   }
+
+}
+
+.lgray-bg:before {
+    content: "";
+    background-color: #f5f5f5;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
 }
 
 .lblue-bg {
   background-color: #e9eff7;
   color: $black-base;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   .panel {
     background-color: transparent;
@@ -57,10 +79,24 @@
   }
 }
 
+.lblue-bg:before {
+    content: "";
+    background-color: #e9eff7;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .lviolet-bg {
   background-color: #f3e9ef;
   color: $black-base;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   .panel {
     background-color: transparent;
@@ -75,10 +111,24 @@
   }
 }
 
+.lviolet-bg:before {
+    content: "";
+    background-color: #f3e9ef;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .ltaupe-bg {
   background-color: #f5f5ee;
   color: $black-base;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   .panel {
     background-color: transparent;
@@ -93,10 +143,24 @@
   }
 }
 
+.ltaupe-bg:before {
+    content: "";
+    background-color: #f5f5ee;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .lturquoise-bg {
   background-color: #f1f8f7;
   color: $black-base;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   .panel {
     background-color: transparent;
@@ -111,10 +175,24 @@
   }
 }
 
+.lturquoise-bg:before {
+    content: "";
+    background-color: #f1f8f7;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .lteal-bg {
   background-color: #eaf0f1;
   color: $black-base;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   .panel {
     background-color: transparent;
@@ -129,10 +207,24 @@
   }
 }
 
+.lteal-bg:before {
+    content: "";
+    background-color: #eaf0f1;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .lyellow-bg {
   background-color: #f6f9da;
   color: $black-base;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   .panel {
     background-color: transparent;
@@ -147,6 +239,16 @@
   }
 }
 
+.lyellow-bg:before {
+    content: "";
+    background-color: #f6f9da;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 
 // --------------------------------------------------
 // Dark Colors
@@ -155,7 +257,11 @@
 .dgray-bg {
   background-color: $brand-gray;
   color: $white;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   p {
     color: $white;
@@ -204,10 +310,24 @@
   }
 }
 
+.dgray-bg:before {
+    content: "";
+    background-color: $brand-gray;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .dscarlet-bg {
   background-color: #830000;
   color: $white;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   p {
     color: $white;
@@ -256,10 +376,24 @@
   }
 }
 
+.dscarlet-bg:before {
+    content: "";
+    background-color: #830000;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .dviolet-bg {
   background-color: #5d1542;
   color: $white;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   p {
     color: $white;
@@ -308,10 +442,24 @@
   }
 }
 
+.dviolet-bg:before {
+    content: "";
+    background-color: #5d1542;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .dteal-bg {
   background-color: #1b494c;
   color: $white;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   p {
     color: $white;
@@ -360,10 +508,24 @@
   }
 }
 
+.dteal-bg:before {
+    content: "";
+    background-color: #1b494c;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .dpurple-bg {
   background-color: #442369;
   color: $white;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   p {
     color: $white;
@@ -412,10 +574,24 @@
   }
 }
 
+.dpurple-bg:before {
+    content: "";
+    background-color: #442369;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .dgreen-bg {
   background-color: #565b22;
   color: $white;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   p {
     color: $white;
@@ -464,10 +640,24 @@
   }
 }
 
+.dgreen-bg:before {
+    content: "";
+    background-color: #565b22;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}
+
 .dorange-bg {
   background-color: #953d1c;
   color: $white;
-  padding: 16px;
+  position: relative;
+
+  .field {
+    padding: 16px 16px 16px 0;
+  }
 
   p {
     color: $white;
@@ -515,3 +705,13 @@
     }
   }
 }
+
+.dorange-bg:before {
+    content: "";
+    background-color: #953d1c;
+    position: absolute;
+    height: 100%;
+    width: 100px;
+    left: -20px;
+    z-index: -1;
+}