futuro 1.0.7 → 1.1.2

data/_sass/_button.scss

@@ -21,16 +21,16 @@
 }
 
 .button-wrap.type-solid {
-  @include bg($tint:100%);
+  background-color: setcolor(slate);
   color: white;
-  fill: white;
+  fill: white; 
 }
 
 .button-wrap.type-outline {
   border: 1px solid setcolor(slate);
+  background-color: white;
   color: setcolor(slate);
   fill: setcolor(slate);
-  background-color: white;
 }
 
 .button-wrap.context-legend {
@@ -43,7 +43,7 @@
 }
 
 .button-bg.func-submit {
-  @include borderRad($radius);
+  border-radius: 4px;
 }
 
 .button-wrap.func-update {

data/_sass/area/chapter.scss

@@ -3,7 +3,8 @@
   @extend %ContentFlow;
 
   ul {
-    grid-auto-rows: min-content;
+    // grid-auto-rows: min-content;
+    padding: 20px 0 0;
     list-style: none;
     grid-gap: 8px;
     display: grid;

data/_sass/area/page.scss

@@ -9,7 +9,7 @@ $AreaSub : $AreaHeight - $SubHeight;
 
 %PageContent {
 
-  > h1, > h2, > h3, > h4, > h5, > h6, > p, > ul, > ol, > .roller, .block.animate {
+  > h1, > h2, > h3, > h4, > h5, > h6, > p, > ul, > ol, > .roller, .block.animate, .wrap.switch {
     @extend %ContentPrep;
   }
 

data/_sass/area/topbar.scss

@@ -1,8 +1,8 @@
 
 .area.topbar {
   @include zeros;
+  border-bottom: 1px solid setcolor(gray);
   height: map-get($topbar,height);
-  border-bottom: $NavBorder;
   background-color: white;
   grid-auto-flow: column;
   display: grid;

data/_sass/block/chart.scss

@@ -39,6 +39,7 @@
 .block.chart-title {
   @include RotateTitle;
   left: calc(50% + 14px);
-  bottom: 10px;
+  position: absolute;
   color: white;
+  bottom: 10px;
 }

data/_sass/block/form/screen.scss

@@ -18,59 +18,78 @@ $title: 2.6rem;
   }
 }
 
-.block.screen-row {
-  grid-row-gap: $title * 0.2;
-  line-height: 1.1;
-  display: grid;
-}
-
 %ScreenRow {
   @extend %bold;
   @include padding(5,5,4.5,5);
 
   + .screen-row.type-event,
+  + .screen-row.type-level,
   + .screen-row.type-retail  {
     border-top: 1px solid setcolor(gun);
   }
 }
 
-.block.screen-row.type-header {
-  @extend %ScreenRow;
-  background: setcolor(smoke);
-  grid-row-gap: $title * 0.1;
-  color: setcolor(carbon);
+.block.screen-row {
+  grid-row-gap: $title * 0.2;
+  line-height: 1.1;
+  display: grid;
 
-  .screen-title {
-    @extend %large;
+  &.type-header {
+    @extend %ScreenRow;
+    background: setcolor(smoke);
+    grid-row-gap: $title * 0.1;
+    color: setcolor(carbon);
+  
+    .screen-title {
+      @extend %large;
+    }
+  
+    .screen-title.small {
+      @extend %small;
+    }
   }
 
-  .screen-title.small {
-    @extend %small;
+  &.type-event {
+    @extend %ScreenRow;
+    background-color: setcolor(carbon);
+    color: setcolor(gray);
   }
-}
 
-.block.screen-row.type-event {
-  @extend %ScreenRow;
-  background-color: setcolor(carbon);
-  color: setcolor(gray);
-} 
+  &.type-level {
+    @extend %ScreenRow;
+    grid-template-columns: 20fr 20fr 40fr 20fr;
+    background-color: setcolor(carbon);
+    color: setcolor(gray);
+    grid-column-gap: 1rem;
+  }
 
-.block.screen-row.type-retail {
-  @extend %ScreenRow;
-  background: setcolor(slate);
-  color: setcolor(gray);
+  &.type-retail {
+    @extend %ScreenRow;
+    background: setcolor(slate);
+    color: setcolor(gray);
+  }
 }
 
 .block.screen-title {
   font-size: $title;
-}
 
-.block.screen-title:not(.small) {
-  @extend %tight;
+  &.small {
+    @extend %small;
+  }
+
+  &:not(.small) {
+    @extend %tight;
+  }
+
+  &.type-level {
+    font-size: 10rem;
+    line-height: 1;
+  }
 }
 
-.block.screen-title.small {
+.block.room-title {
   @extend %small;
+  @extend %book;
 }
 
 .block.screen-wrap {
@@ -82,3 +101,17 @@ sup {
   @extend %small;
   left: 0.2em;
 }
+
+.block.tag-list {
+  grid-template-columns: repeat(5,1fr);
+  grid-template-rows: min-content;
+  grid-gap: 1rem;
+  display: grid;
+}
+
+.block.tag-list div {
+  background-color: setcolor(gray);
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+}

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",
@@ -79,7 +80,8 @@
 @import
 "link/book",
 "link/browse",
-"link/navigation";
+"link/navigation",
+"link/scroller";
 
 // List Styles
 
@@ -92,6 +94,7 @@
 
 @import
 "title/alert",
+"title/book",
 "title/browse",
 "title/checkbox",
 "title/copied",
@@ -116,6 +119,7 @@
 "wrap/home",
 "wrap/scroller",
 "wrap/select",
+"wrap/switch",
 "wrap/text";
 
 // Other Styles

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/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);
   }
 }
 
@@ -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);
     }
   }
 }