futuro 1.0.6 → 1.1.1

data/_sass/block/form/item.scss

@@ -1,22 +1,22 @@
 
-.block.item-row + .block.item-row {
-  margin-top: 0;
+// .block.item-row + .block.item-row {
+//   margin-top: 0;
 
-  .block.item-object {
-    border-top: 1px solid rgba(setcolor(slate),20%);
-  }
-}
+//   .block.item-object {
+//     border-top: 1px solid rgba(setcolor(slate),20%);
+//   }
+// }
 
-.block.item-object {
-  padding: ($radius * 2) ($radius * 3);
-  grid-template-columns: auto 100px;
-  display: grid;
+// .block.item-object {
+//   padding: ($radius * 2) ($radius * 3);
+//   grid-template-columns: auto 100px;
+//   display: grid;
 
-  @media#{map-get($query,min768)} {
-    grid-column: 2 / 3;
-  }
-}
+//   @media#{map-get($query,min768)} {
+//     grid-column: 2 / 3;
+//   }
+// }
 
-.block.item-object-price {
-  text-align: right;
-}
+// .block.item-object-price {
+//   text-align: right;
+// }

data/_sass/block/util.scss

@@ -8,6 +8,9 @@
 
 .block.util.type-page.style-page {
   @extend %ContentPrep;
+  fill: setcolor(coal);
+  grid-row-gap: 6px;
+  display: grid;
 }
 
 .block.util.type-chapter.style-page {

data/_sass/futuro.core.scss

@@ -4,6 +4,7 @@
 // Helper Styles
 
 @import
+"helpers/variables/colors",
 "helpers/variables",
 "helpers/mixins",
 "helpers/mixins/layout",
@@ -11,6 +12,7 @@
 "helpers/mixins/patterns",
 "helpers/mixins/theme",
 "helpers/extends",
+"helpers/extends/forms",
 "helpers/extends/grid",
 "helpers/extends/layout",
 "helpers/themes";
@@ -78,7 +80,8 @@
 @import
 "link/book",
 "link/browse",
-"link/navigation";
+"link/navigation",
+"link/scroller";
 
 // List Styles
 
@@ -91,6 +94,7 @@
 
 @import
 "title/alert",
+"title/book",
 "title/browse",
 "title/checkbox",
 "title/copied",
@@ -115,6 +119,7 @@
 "wrap/home",
 "wrap/scroller",
 "wrap/select",
+"wrap/switch",
 "wrap/text";
 
 // Other Styles
@@ -180,4 +185,17 @@
   grid-column-gap: 20px;
   grid-row-gap: 15px;
   display: grid;
+}
+
+.block.no-label {
+  grid-column: 2 / 3;
+}
+
+.block.has-price {
+  grid-template-columns: auto 100px;
+  display: grid;
+}
+
+.block.has-price > span:last-child {
+  text-align: right;
 }

data/_sass/helpers/extends.scss

@@ -24,20 +24,3 @@
 :focus {
   outline: rgba(0,0,0,0);
 }
-
-// MINDSETS IMPORT ************************************************************
-
-// %table {
-//   grid-template-columns: 220px repeat(4,110px);
-//   list-style: none;
-//   display: grid;
-//   padding: 0;
-
-//   li {
-//     padding: 5px;
-
-//     &:nth-of-type(n+2) {
-//       text-align: center;
-//     }
-//   }
-// }

data/_sass/helpers/extends/forms.scss

@@ -0,0 +1,16 @@
+
+%Checkbox {
+  @include zeros(absolute);
+  left: ($radius * 4);
+  cursor: pointer;
+  height: 14px;
+  margin: auto;
+  width: 14px;
+  right: auto;
+
+  &:checked + label {
+    @include color(setcolor(slate),100%);
+    @include border(setcolor(slate));
+    @include bg(setcolor(slate));
+  }
+}

data/_sass/helpers/mixins/layout.scss

@@ -14,7 +14,6 @@
 @mixin RotateTitle($origin : bottom left, $deg : 90){
   transform: rotate(-#{$deg}deg);
   transform-origin: $origin;
-  position: absolute;
 }
 
 @mixin PadBtn($value : 4) {

data/_sass/helpers/mixins/theme.scss

@@ -1,12 +1,10 @@
 
-
-
 // Used in Mindsets
 @mixin ThemeMorph($name,$color) {
   // find output path by dynamic class name
   svg#morph path#output.#{$name} {
     // set associated color for this class
-    stroke: $color;
+    stroke: setcolor($color);
   }
 }
 
@@ -76,7 +74,7 @@
 // Used in Patterns
 @mixin ThemeCheckbox($chapter,$title,$color) {
   .wrap.chapter-#{$chapter}.title-#{$title} {
-    .checkbox-input:checked + label {
+    input[type="checkbox"]:checked + label {
       background-color: setcolor($color,xlight);
       border: 1px solid setcolor($color,light);
       color: setcolor($color,dark);
@@ -196,24 +194,43 @@
   }
 }
 
-// Used in Patterns
+@mixin ThemeButtonCore($color) {
+  .button-wrap {
+    background: setcolor($color);
+
+    &:hover {
+      background: darken(setcolor($color),5%);
+    }
+  }
+}
+
+// Used in Patterns, Brandvoice
 @mixin ThemeButton($chapter,$title,$color) {
-  .wrap.chapter-#{$chapter}.title-#{$title} {
-    .button-wrap {
-      background: setcolor($color);
 
-      &:hover {
-        background: darken(setcolor($color),5%);
-      }
+  @if $title {
+    // if title has been provided
+    // page specific button colour 
+    .wrap.chapter-#{$chapter}.title-#{$title} {
+      // use the same mixin core; avoid repetition
+      @include ThemeButtonCore($color);
+    }
+
+  } @else {
+    // if only the chapter has been provided
+    // chapter specific button colour
+    .wrap.chapter-#{$chapter} {
+      // use the same mixin core; avoid repetition
+      @include ThemeButtonCore($color);
     }
+
   }
 }
 
-// Used globally
+// Used Globally
 @mixin ThemeHome($name,$color){
   // inherit theme color for the book cover
   .link.book.#{$name} {
-    background-color: $color;
+    background-color: setcolor($color);
   }
 }
 
@@ -221,23 +238,23 @@
 @mixin ThemeTopbar($name,$color) {
   // inherit theme color for the topbar link
   .link.navigation.#{$name} {
-    color: $color;
+    color: setcolor($color);
   }
   // add theme color tint to background on hover
   .link.navigation.#{$name}:hover {
-    background-color: rgba($color,10%);
+    background-color: rgba(setcolor($color),10%);
   }  
 }
 
 // Used globally
-@mixin ThemeCover($name,$color,$left:false,$chapter:false) {
+@mixin ThemeCover($book,$chapter,$color,$left:false) {
+  // optional arguments must come last
 
   @if $chapter {
 
-    // Chapter Covers
-
-    .wrap.page-wrap.type-chapter.chapter-#{$name} {
-      background-color: $color;
+    // chapter covers
+    .wrap.page-wrap.type-chapter.chapter-#{$chapter} {
+      background-color: setcolor($color);
 
       @if $left {
         .title.type-chapter {
@@ -247,23 +264,22 @@
     }
   } @else {
 
-    // Chapter Covers
-
-    .area.type-chapter.book-#{$name} {
-      background-color: $color;
+    // book covers
+    .wrap.page-wrap.type-chapter.book-#{$book} {
+      background-color: setcolor($color);
     }
   }
 }
 
-// Used globally
-@mixin PageInfo($col,$right) {
+// Used Globally
+@mixin PageInfo($color,$right) {
 
   .title.page-weight {
-    color: $col;
+    color: setcolor($color);
   }
 
   .title.page-chapter {
-    color: $col;
+    color: setcolor($color);
     @if $right {
       right: #{$right}px;
     }
@@ -271,113 +287,96 @@
 }
 
 // Used in Mindsets
-@mixin ThemeRollerInput($name,$col) {
-  background-color: rgba($col,10%);
-  color: $col;
+@mixin ThemeRollerInput($color) {
+  background-color: rgba(setcolor($color),10%);
+  color: setcolor($color);
+
+  &.active {
+    background-color: setcolor($color);
+    color: white;
+  }
 }
 
 // Used in Mindsets
-@mixin ThemeRollerOutput($name,$col) {
-  background-color: rgba($col,10%);
-  border-color: rgba($col,20%);
-  color: $col;
+@mixin ThemeRollerOutput($color) {
+  background-color: rgba(setcolor($color),10%);
+  border-color: rgba(setcolor($color),20%);
+  color: setcolor($color);
 }
 
-// Used in Mindsets
-@mixin ThemeRoller($name,$col,$chapter:false) {
+// Used in Mindsets, Brandvoice
+@mixin ThemeRoller($chapter,$title,$color) {
 
   @if $chapter {
 
-    .list.roller.chapter-#{$name} {
+    .list.roller.chapter-#{$chapter} {
 
       .item.roller.input {
-        @include ThemeRollerInput($name,$col);
-
-        &.active {
-          background-color: $col;
-          color: white;
-        }
+        @include ThemeRollerInput($color);
       }
 
       .item.roller.output {
-        @include ThemeRollerOutput($name,$col);
+        @include ThemeRollerOutput($color);
       }
     }
 
   } @else {
 
-    .item.roller.input.title-#{$name} {
-      @include ThemeRollerInput($name,$col);
-
-      &.active {
-        background-color: $col;
-        color: white;
-      }
+    .item.roller.input.title-#{$title} {
+      @include ThemeRollerInput($color);
     }
 
-    .item.roller.output.title-#{$name} {
-      @include ThemeRollerOutput($name,$col);
+    .item.roller.output.title-#{$title} {
+      @include ThemeRollerOutput($color);
     }
   }
 }
 
-// Used in Mindsets
-@mixin ThemeChart($col) {
+// Used in Mindsets, Brandvoice
+@mixin ThemeChart($color) {
   .block.chart-pcent-title {
-    color: $col;
+    color: setcolor($color);
   }
 
   .block.chart-bar-bg {
-    background-color: $col;
+    background-color: setcolor($color);
   }
 }
 
-// Used in Mindsets
-@mixin ThemePages($name,$col,$right:false,$chapter:false) {
+@mixin ThemePagesCore($color,$right) {
+  // stroke: setcolor($color);
+  fill: setcolor($color);
 
-  @if $chapter {
+  @include PageInfo($color,$right);
 
-    .wrap.type-page.chapter-#{$name} {
-      fill: $col;
+  @include ThemeChart($color);
 
-      @include PageInfo($col,$right);
+  .block.number-container {
+    color: setcolor($color);
+  }
 
-      @include ThemeChart($col);
+  .lnk.stats {
+    color: setcolor($color);
+  }
 
-      .block.number-container {
-        color: $col;
-      }
+  .list.pies {
+    color: setcolor($color);
+  }
+}
 
-      .lnk.stats {
-        color: $col;
-      }
+// Used in Mindsets
+@mixin ThemePages($book,$chapter,$color,$right:false) {
 
-      .list.pies {
-        color: $col;
-      }
+  @if $chapter {
+
+    .wrap.type-page.chapter-#{$chapter} {
+      @include ThemePagesCore($color,$right);
     }
 
   } @else {
 
-    .wrap.type-page.book-#{$name} {
-      stroke: $col;
-      fill: $col;
-
-      @include PageInfo($col,$right);
-
-      @include ThemeChart($col);
-
-      .block.number-container {
-        color: $col;
-      }
-
-      .lnk.stats {
-        color: $col;
-      }
-
-      .list.pies {
-        color: $col;
-      }
+    .wrap.type-page.book-#{$book} {
+      @include ThemePagesCore($color,$right);
     }
   }
 }
@@ -386,44 +385,38 @@
 @mixin ThemeSnap($name,$color) {
   svg.snap {
     path.#{$name} {
-      fill: #{$color};
+      fill: setcolor($color);
     }
   }
 }
 
-// Used everywhere
-@mixin ThemeSearch($name,$col,$chapter:false) {
+@mixin ThemeSearchCore($color) {
+  color: setcolor($color);
 
-  @if $chapter {
- 
-    // Search Results
+  &:hover {
+    background-color: rgba(setcolor($color),10%);
+  }
 
-    .block.results-entry.chapter-#{$name} {
-      color: $col;
+  .block.results-dot {
+    background-color: setcolor($color);
+  }
+}
 
-      &:hover {
-        background-color: rgba($col,10%);
-      }
+// Used Globally
+@mixin ThemeSearch($book,$chapter,$color) {
 
-      .block.results-dot {
-        background-color: $col;
-      }
+  @if $chapter {
+ 
+    // theme results by chapter
+    .block.results-entry.chapter-#{$chapter} {
+      @include ThemeSearchCore($color);      
     }
 
   } @else {
 
-    // Search Results
-
-    .block.results-entry.book-#{$name} {
-      color: $col;
-
-      &:hover {
-        background-color: rgba($col,10%);
-      }
-
-      .block.results-dot {
-        background-color: $col;
-      }
+    // theme results by book
+    .block.results-entry.book-#{$book} {
+      @include ThemeSearchCore($color);
     }
   }
 }