futuro 1.0.5 → 1.1.0

data/_sass/block/form/parsley.scss

@@ -1,40 +1,37 @@
 
+%ParsleySuccess {
+  border: 1px solid setcolor(success,light) !important;
+}
+
+%ParsleyError {
+  border: 1px solid setcolor(error,light) !important;
+}
+
 input.parsley-success,
 select.parsley-success,
 textarea.parsley-success {
-  color: #468847;
-  background-color: #DFF0D8;
-  border: 1px solid #D6E9C6;
+  @extend %ParsleySuccess;
 }
 
 input.parsley-error,
 select.parsley-error,
 textarea.parsley-error {
-  color: #B94A48;
-  background-color: #F2DEDE;
-  border: 1px solid #EED3D7;
+  @extend %ParsleyError;
 }
 
 .parsley-errors-list {
-  margin: 2px 0 3px;
-  padding: 0;
+  transition: margin 100ms;
   list-style-type: none;
-  font-size: 0.9em;
-  line-height: 0.9em;
+  padding: 0;
   opacity: 0;
-  color: #B94A48;
-
-  transition: all .3s ease-in;
-  -o-transition: all .3s ease-in;
-  -moz-transition: all .3s ease-in;
-  -webkit-transition: all .3s ease-in;
 }
 
 .parsley-errors-list.filled {
+  @extend %AlertBlock;
+  @extend %NoLabel;
+  background-color: setcolor(error,xlight);
+  border: 1px solid setcolor(error,light);
+  color: setcolor(error,dark);
+  margin-top: 20px;
   opacity: 1;
-}
-
-.errors.text-input {
-  min-height: 20px;
-  grid-column: 2;
 }

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

@@ -5,12 +5,14 @@
 
 @import
 "helpers/variables",
+"helpers/variables/colors",
 "helpers/mixins",
 "helpers/mixins/layout",
 "helpers/mixins/items",
 "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
@@ -163,11 +168,6 @@
   fill: darken(setcolor(smoke),10%);
 }
 
-.wrap.select {
-  grid-template-columns: auto 34px;
-  display: grid;
-}
-
 .block.select-dropdown {
   background-color: darken(setcolor(gun,xlight),3%);
   border-left: 1px solid setcolor(gun,light);
@@ -178,4 +178,24 @@
 
 .block.select-dropdown svg {
   width: 30px;
+}
+
+.block.form-date.group {
+  justify-content: start;
+  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/extends/layout.scss

@@ -47,3 +47,18 @@
   width: 100%;
   border: 0;
 }
+
+%AlertBlock {
+  padding: 14px 12px 10px 12px;
+  background-color: setcolor(gun,xlight);
+  border: 1px solid setcolor(gun,light);
+  color: setcolor(gun,dark);
+  border-radius: 4px;
+  display: block;
+}
+
+%NoLabel {
+  @media#{map-get($query,min768)} {
+    grid-column: 2 / 3;
+  }
+}

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);
@@ -103,18 +101,16 @@
 // Used in Patterns
 @mixin ThemeSelect($chapter,$title,$color) {
   .wrap.chapter-#{$chapter}.title-#{$title} {
-    .wrap.select {
+    .wrap.select > select {
       border: 1px solid setcolor($color,light);
+      background: setcolor($color,xlight);
+      color: setcolor($color,dark);
     }
     .block.select-dropdown {
       background-color: darken(setcolor($color,xlight),3%);
       border-left: 1px solid setcolor($color,light);
       fill: setcolor($color);
     }
-    select {
-      background: setcolor($color,xlight);
-      color: setcolor($color,dark);
-    }
   }
 }
 
@@ -148,10 +144,8 @@
     label {
       color: setcolor($color,dark);
     }
-    .wrap.text-input {
+    .wrap.text-input > input {
       border: 1px solid setcolor($color,light);
-    }
-    input[type="text"] {
       background-color: setcolor($color,xlight);
       color: setcolor($color,dark);
     }
@@ -200,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);
   }
 }
 
@@ -225,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 {
@@ -251,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;
     }
@@ -275,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);
     }
   }
 }
@@ -390,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);
     }
   }
 }