Merge pull request #588 from adventistchurch/13.12.0

Initial commit for modified WP theme 3.14.4 support

CHANGELOG.md

@@ -3,6 +3,12 @@ A record of the changes made to `ALPS V3`.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.12.0]
+- New wp-editor styleseheet for WP page builder editor support and additional rules for
+- new _wp.pagebuilders scss to feed wp-editor stylesheet and provide additional classes to front end sheets by inclusion in common.scss
+- Additional class for featured image heros
+- Fix header style for overlayed header on dark theme
+
 ## [3.11.10]
 New design of ALPS Quote block. Fix styles for citation and quote fields. [story](https://app.zenhub.com/workspaces/alps---core-and-wp-583365a5f9e6361b5cc5f5f6/issues/adventistchurch/alps-gutenberg-blocks/87)
 

source/css/_objects.sections.scss

@@ -128,6 +128,12 @@
   }
 }
 
+.c-page-header__longer {
+  &.has-background {
+    padding-top: 33vw;
+  }
+}
+
 .l-section__block-row {
   .c-block__image-wrap {
     margin-right: $space-mobile;

source/css/_settings.themes.scss

@@ -1360,7 +1360,7 @@
     opacity: 0.1;
   }
 
-  .c-header,
+  .c-header:not(.c-header--overlay),
   .c-header__nav-secondary .c-secondary-nav__list-item__search,
   .c-header__nav-secondary .c-secondary-nav__list-item__menu {
     background-color: $c-gray--darker;

source/css/_wp.pagebuilders.scss

@@ -0,0 +1,82 @@
+/**
+ * Mods and fixes for page builders
+ */
+
+// content-width padding for wrappers
+.u-padding--container {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  @include media(">large") {
+    padding-left: calc((100vw/7)*1) !important;
+    padding-right: calc((100vw/7)*1) !important;
+  }
+  @include media(">xxxlarge"){
+    padding-left: 21vw !important;
+    padding-right: 21vw !important;
+  }
+}
+
+// move carousel dots to the bottom so they don't interfere with overlayed header
+.c-hero {
+  .slick-dots {
+    top: auto;
+    bottom: 0;
+  }
+}
+
+// fixes for overlay header
+.c-header--overlay {
+  .c-header__logo {
+    img {
+      filter: invert(100%);
+    }
+  }
+  .c-header__nav-primary {
+    display: none;
+    @include media(">large"){
+      display: flex;
+    }
+  }
+}
+
+// sabbath column fixes for overlay header
+.hide-sabbath {
+  .c-header--overlay .c-header--inner {
+    width: 100vw;
+  }
+}
+.hide-sabbath--until-small {
+  .c-header--overlay .c-header--inner {
+    width: 100vw;
+    @include media(">small"){
+      width: calc((100vw/7) * 6 - 0.01px);
+    }
+  }
+}
+.hide-sabbath--until-medium {
+  .c-header--overlay .c-header--inner {
+    width: 100vw;
+    @include media(">medium"){
+      width: calc((100vw/7) * 6 - 0.01px);
+    }
+  }
+}
+.hide-sabbath--until-large {
+  .c-header--overlay .c-header--inner {
+    width: 100vw;
+    @include media(">large"){
+      width: calc((100vw/7) * 6 - 0.01px);
+    }
+  }
+}
+
+// margin fixes for page headers inside custom template
+.template-custom {
+  .c-page-header__long--inner {
+    .c-page-header__content {
+      @include media(">xxxlarge"){
+        margin: 0 21vw;
+      }
+    }
+  }
+}

source/css/common.scss

@@ -136,4 +136,5 @@
     $TRUMPS
 \*------------------------------------*/
 @import "trumps.helper-classes";
+@import "wp.pagebuilders";
 @import "base.print";

source/css/wp-editor.scss

@@ -0,0 +1,46 @@
+@import "settings.variables";
+
+.editor-styles-wrapper {
+  /*------------------------------------*\
+    $TOOLS
+  \*------------------------------------*/
+  @import "tools.mixins";
+  @import "tools.include-media";
+
+  /*------------------------------------*\
+    $BASE
+  \*------------------------------------*/
+  @import "base.forms";
+  @import "base.headings";
+  @import "base.links";
+  @import "base.lists";
+  @import "base.tables";
+
+  /*------------------------------------*\
+    $TEXT
+  \*------------------------------------*/
+  @import "objects.text";
+
+  /*------------------------------------*\
+    $COMPONENTS
+  \*------------------------------------*/
+  @import "objects.blocks";
+  @import "objects.buttons";
+  @import "objects.icons";
+  @import "objects.lists";
+  @import "objects.forms";
+
+  /*------------------------------------*\
+    $MODIFIERS
+  \*------------------------------------*/
+  @import "modifier.borders";
+  @import "modifier.colors";
+  @import "modifier.display";
+  @import "modifier.spacing";
+
+  /*------------------------------------*\
+    WP Editor
+  \*------------------------------------*/
+  @import "wp.pagebuilders";
+
+}