Fix: Small theme file shake up (fixes #331)

less/core/global.less

@@ -7,43 +7,6 @@ body {
   vertical-align: middle;
 }
 
-.text-align-mixin(page);
-.text-align-mixin(article);
-.text-align-mixin(block);
-.text-align-mixin(component);
-
-.text-align-mixin(@selector) {
-
-.@{selector} {
-  &.title-align-left &__title,
-  &.body-align-left &__body,
-  &.instruction-align-left &__instruction {
-    text-align: left;
-
-    .dir-rtl & {
-      text-align: right;
-    }
-  }
-
-  &.title-align-center &__title,
-  &.body-align-center &__body,
-  &.instruction-align-center &__instruction {
-    text-align: center;
-  }
-
-  &.title-align-right &__title,
-  &.body-align-right &__body,
-  &.instruction-align-right &__instruction {
-    text-align: right;
-
-    .dir-rtl & {
-      text-align: left;
-    }
-  }
-}
-
-}
-
 // Quote related styling
 // override browser defined margins with rem unit
 blockquote,

less/project/theme-blocks.less

@@ -0,0 +1,73 @@
+// --------------------------------------------------
+// Block
+// --------------------------------------------------
+
+// Reverses the visual layout of the components above the medium breakpoint
+// e.g. Left layout components would still render first in the DOM order
+// but visually appear on the right hand side above the medium breakpoint. The
+// components woud vertically stack as per the DOM order below the breakpoint
+.block.reverse-desktop-order .component {
+  @media (min-width: @device-width-medium) {
+    &__container {
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+// Extend width of block to 70rem (1120px)
+// --------------------------------------------------
+.block.extend-content-container .block__inner {
+  max-width: 70rem;
+}
+
+// Extend width of block to max page width
+// --------------------------------------------------
+.block.extend-container .block__inner {
+  max-width: @max-page-width;
+}
+
+// DEPRECATED in favour of bg-color-mixin
+// Block background color mixin
+// Add to block to enable
+// e.g. 'block-color black'
+// Note: both arguments must be predefined variables
+// --------------------------------------------------
+.block-color-mixin(@color, @color-inverted) {
+
+.block-color.@{color} {
+  background-color: @@color;
+  color: @@color-inverted;
+
+  .block,
+  .component {
+    &__title,
+    &__body a,
+    &__instruction a {
+      color: @@color-inverted;
+    }
+  }
+
+  .pagelevelprogress {
+    &__indicator {
+      border-color: @@color-inverted;
+    }
+    &__indicator-inner {
+      background-color: @@color;
+    }
+    &__indicator-bar {
+      background-color: @@color-inverted;
+    }
+  }
+
+  .narrative {
+    &__progress {
+      background-color: fade(@@color-inverted, 50%);
+    }
+
+    &__progress.is-selected {
+      background-color: @@color-inverted;
+    }
+  }
+}
+
+}

less/project/theme-common.less

@@ -0,0 +1,106 @@
+// --------------------------------------------------
+// Common
+// --------------------------------------------------
+
+// Background color mixin
+// Can be added to course, contentObject, article, block, or component to enable
+// e.g. 'bg-color black'
+// Note: both arguments must be predefined variables
+// --------------------------------------------------
+.bg-color-mixin(black, white);
+.bg-color-mixin(background, background-inverted);
+.bg-color-mixin(transparent-light, black);
+.bg-color-mixin(transparent-dark, white);
+
+.bg-color-mixin(@color, @color-inverted) {
+
+.bg-color.@{color} {
+  background-color: @@color;
+  color: @@color-inverted;
+
+  .block,
+  .component {
+    &__title,
+    &__body a,
+    &__instruction a {
+      color: @@color-inverted;
+    }
+  }
+
+  .pagelevelprogress {
+    &__indicator {
+      border-color: @@color-inverted;
+    }
+    &__indicator-inner {
+      background-color: @@color;
+    }
+    &__indicator-bar {
+      background-color: @@color-inverted;
+    }
+  }
+
+  .narrative {
+    &__progress {
+      background-color: fade(@@color-inverted, 50%);
+    }
+
+    &__progress.is-selected {
+      background-color: @@color-inverted;
+    }
+  }
+}
+
+}
+
+// styles associated with _textAlignment property
+// --------------------------------------------------
+.text-align-mixin(page);
+.text-align-mixin(article);
+.text-align-mixin(block);
+.text-align-mixin(component);
+
+.text-align-mixin(@selector) {
+
+.@{selector} {
+  &.title-align-left &__title,
+  &.body-align-left &__body,
+  &.instruction-align-left &__instruction {
+    text-align: left;
+
+    .dir-rtl & {
+      text-align: right;
+    }
+  }
+
+  &.title-align-center &__title,
+  &.body-align-center &__body,
+  &.instruction-align-center &__instruction {
+    text-align: center;
+  }
+
+  &.title-align-right &__title,
+  &.body-align-right &__body,
+  &.instruction-align-right &__instruction {
+    text-align: right;
+
+    .dir-rtl & {
+      text-align: left;
+    }
+  }
+}
+
+}
+
+// classes to hide content above / below medium breakpoint
+// --------------------------------------------------
+.hide-on-desktop {
+  @media (min-width: @device-width-medium) {
+    display: none;
+  }
+}
+
+.hide-on-mobile {
+  @media (max-width: @device-width-medium) {
+    display: none;
+  }
+}

less/project/theme-components.less

@@ -0,0 +1,48 @@
+// --------------------------------------------------
+// Component
+// --------------------------------------------------
+
+// Component header bg color mixin
+// Can be added to component to enable
+// e.g. 'comp-header-bg-color black'
+// Note: both arguments must be predefined variables
+.component-header-bg-mixin(black, white);
+.component-header-bg-mixin(background, background-inverted);
+.component-header-bg-mixin(transparent-light, font-color);
+.component-header-bg-mixin(transparent-dark, font-color-inverted);
+
+.component-header-bg-mixin(@color, @color-inverted) {
+
+.comp-header-bg-color.@{color} {
+  .component {
+    &__inner {
+      margin: -@component-padding-ver -@component-padding-hoz;
+    }
+
+    &__header {
+      padding: @component-padding-ver @component-padding-ver;
+      background-color: @@color;
+      color: @@color-inverted;
+    }
+
+    &__title,
+    &__body a,
+    &__instruction a {
+      color: @@color-inverted;
+    }
+  }
+
+  .pagelevelprogress {
+    &__indicator {
+      border-color: @@color-inverted;
+    }
+    &__indicator-inner {
+      background-color: @@color;
+    }
+    &__indicator-bar {
+      background-color: @@color-inverted;
+    }
+  }
+}
+
+}

less/project/theme-contentObjects.less

@@ -0,0 +1,52 @@
+// --------------------------------------------------
+// contentObject
+// --------------------------------------------------
+
+// "_htmlClasses"
+// Hide nav back button
+// --------------------------------------------------
+.hide-nav-back-btn .nav__back-btn {
+  .u-display-none;
+}
+
+// "_classes"
+// Hide the page header
+// --------------------------------------------------
+.hide-page-header .page__header {
+  .u-display-none;
+}
+
+// Header color mixin
+// Add to menu/page to enable
+// e.g. 'header-color transparent-dark'
+// Note: both arguments must be predefined variables
+// --------------------------------------------------
+.header-color-mixin(black, white);
+.header-color-mixin(background, background-inverted);
+.header-color-mixin(transparent-light, font-color);
+.header-color-mixin(transparent-dark, font-color-inverted);
+
+.header-color-mixin(@color, @color-inverted) {
+
+.header-color.@{color} {
+  .menu,
+  .page {
+    &__header {
+      background-color: @@color;
+    }
+  }
+
+  .menu,
+  .page {
+    &__title,
+    &__subtitle,
+    &__body,
+    &__body a,
+    &__instruction,
+    &__instruction a {
+      color: @@color-inverted;
+    }
+  }
+}
+
+}