futuro 0.7.4 → 0.7.5

data/_sass/helpers/mixins/theme.scss

@@ -1,333 +1,415 @@
 
-@mixin ThemeBook($name,$col) {
 
-  // Home Books
+@mixin ThemeArtformHeader($name,$col) {
 
-  .wrap.book.#{$name} {
+  .block.header.title-artform.tag-#{$name} {
     background-color: $col;
 
-    svg {
-      fill: white;
+    .list.login-list {
+      @include border($col,100%);
     }
-  }
 
-  // Topbar Links
+    .item.login-item {
+      @include bg(lighten($col,45%),100%);
+      @include color($col,100%);
 
-  button.navigation.#{$name} {
-    color: $col;
+      &:hover {
+        @include bg(lighten($col,40%),100%);
+      }
 
-    &:hover {
-      background-color: rgba($col,10%);
+      + .login-item {
+        border-top: 1px solid rgba($col,20%);
+      }
     }
   }
 }
 
-@mixin ThemeCover($name,$color,$left:false,$chapter:false) {
+@mixin ThemeHeader($name,$col) {
 
-  @if $chapter {
+  .block.header.title-#{$name} {
+    background-color: $col;
+  }
 
-    // Chapter Covers
+  .list.login-list.title-#{$name} {
+    @include border($col,100%);
+  }
 
-    .wrap.type-chapter.chapter-#{$name} {
-      background-color: $color;
+  .item.login-item.title-#{$name} {
+    @include bg(lighten($col,45%),100%);
+    @include color($col,100%);
 
-      @if $left {
-        .title.chapter-title {
-          left: #{$left}px;
-        }
-      }
+    &:hover {
+      @include bg(lighten($col,40%),100%);
     }
-  } @else {
 
-    // Chapter Covers
-
-    .area.type-chapter.book-#{$name} {
-      background-color: $color;
+    + .login-item {
+      border-top: 1px solid rgba($col,20%);
     }
   }
 }
 
-@mixin ThemePages($name,$col,$right:false) {
+@mixin ThemeCheckbox($name,$col) {
+  .area.title-#{$name} {
 
-  // Chapter Pages
+    .checkbox-input:checked + label {
+      @include border($col);
+      @include color($col,100%);
+      @include bg($col);
+    }
+  }
+}
 
-  .wrap.type-page.chapter-#{$name} {
+@mixin ThemeRadio($name,$col) {
+  .area.title-#{$name} {
 
-    .title.page-weight {
+    label.radio, label.jcf-radio-label {
       color: $col;
     }
 
-    .title.page-chapter {
-      color: $col;
-      @if $right {
-        right: #{$right}px;
+    .jcf-radio {
+      @include borderCol($col);
+      @include bg($col);
+
+      span {
+        background: $col;
       }
     }
+  }
+}
 
-    .title.animate {
+@mixin ThemeTextArea($name,$col) {
+  .area.title-#{$name} {
+
+    label.textarea {
       color: $col;
     }
 
-    .block.page-icon {
-      fill: $col;
+    .textarea-wrap {
+      @include borderCol($col);
     }
 
-    .lnk.stats {
-      color: $col;
+    textarea {
+      @include borderCol($col);
+      @include color($col,100%);
+      @include bg($col);
     }
+  }
+}
 
-    .item.text-roller {
-      background-color: rgba($col,10%);
+@mixin ThemeSelect($name,$col) {
+  .area.title-#{$name} {
+
+    label.select {
       color: $col;
+    }
 
-      &.active {
-        background-color: $col;
-        color: white;
-      }
+    select {
+      @include bg($col);
+      @include border($col);
+      @include color($col,100%);
     }
+  }
+}
 
-    .item.text-output {
-      background-color: rgba($col,10%);
-      border-color: rgba($col,20%);
+@mixin ThemeList($name,$col) {
+  .area.title-#{$name} {
+
+    label.select {
       color: $col;
     }
 
-    .list.pies {
+    select {
+      @include bg($col);
+    }
+
+    .jcf-list-box {
+      @include borderCol($col);
+      @include bg($col);
       color: $col;
     }
 
-    .block.pie.svg-wrap {
-      fill: $col;
+    .jcf-list .jcf-option.jcf-selected {
+      background: rgba($col,10%);
     }
+  }
+}
 
-    svg#background {
-      fill: $col;
+@mixin ThemeText($name,$col) {
+  .area.title-#{$name} {
+
+    label {
+      @include color($col,100%);
     }
 
-    svg#tickets {
-      fill: $col;
+    input[type="text"] {
+      @include color($col,100%);
+      @include bg($col);
+    }
 
-      .bar {
-        stroke: $col !important;
-      }
+    .textinput-border {
+      @include borderCol($col);
     }
   }
 }
 
-@mixin ThemePies($name,$col) {
-  &.#{$name} {
-    color: $col;
+@mixin ThemePassword($name,$col) {
+  .area.title-#{$name} {
+    .block.password-strength {
+      background: $col;
+    }
+    .block.password-bg {
+      background: rgba($col,10%);
+    }
+  }
+}
 
-    .chunk.#{$name} {
-      opacity: 1;
+@mixin ThemeMessage($name,$col) {
+  .area.title-#{$name} {
+    .block.message {
+      color: $col;
     }
   }
 }
 
+@mixin ThemeCallout($name,$col) {
+  .area.title-#{$name} {
+    .block.title {
+      @include bg($col);
+      color: $col;
+    }
+  }
+}
 
-@mixin ThemeRoller($name,$col) {
-  &.#{$name} {
-    background-color: rgba($col,10%);
-    color: $col;
+@mixin ThemeAlert($name,$col) {
+  .area.title-#{$name} {
+    .block.form-alert {
+      @include borderCol($col);
+      @include bg($col);
+      color: $col;
+    }
+  }
+}
 
-    &.active {
-      background-color: $col;
-      color: white;
+@mixin ThemeButton($name,$col) {
+  .area.title-#{$name} {
+    .button-wrap {
+      border-color: $col;
+      background: $col;
     }
   }
 }
 
-@mixin ThemeOutput($name,$col) {
-  &.#{$name} {
-    background-color: rgba($col,10%);
-    border-color: rgba($col,20%);
+@mixin ThemeBook($name,$col) {
+
+  // Home Books
+
+  .wrap.book.#{$name} {
+    background-color: $col;
+
+    svg {
+      fill: white;
+    }
+  }
+
+  // Topbar Links
+
+  .link.navigation.#{$name} {
     color: $col;
+
+    &:hover {
+      background-color: rgba($col,10%);
+    }
   }
 }
 
-@mixin ThemeSearch($name,$col,$chapter:false) {
+@mixin ThemeCover($name,$color,$left:false,$chapter:false) {
 
   @if $chapter {
 
-    // Search Results
-
-    .block.results-entry.chapter-#{$name} {
-      color: $col;
+    // Chapter Covers
 
-      &:hover {
-        background-color: rgba($col,10%);
-      }
+    .wrap.type-chapter.chapter-#{$name} {
+      background-color: $color;
 
-      .block.results-dot {
-        background-color: $col;
+      @if $left {
+        .title.type-chapter {
+          left: #{$left}px;
+        }
       }
     }
-
   } @else {
 
-    // Search Results
+    // Chapter Covers
 
-    .block.results-entry.book-#{$name} {
-      color: $col;
+    .area.type-chapter.book-#{$name} {
+      background-color: $color;
+    }
+  }
+}
 
-      &:hover {
-        background-color: rgba($color,10%);
-      }
+@mixin PageInfo($col,$right) {
 
-      .block.results-dot {
-        background-color: $color;
-      }
+  .title.page-weight {
+    color: $col;
+  }
+
+  .title.page-chapter {
+    color: $col;
+    @if $right {
+      right: #{$right}px;
     }
   }
 }
 
-@mixin ThemeValue($val,$prefix:false,$important:false) {
+@mixin ThemeRollerInput($name,$col) {
+  background-color: rgba($col,10%);
+  color: $col;
+}
+
+@mixin ThemeRollerOutput($name,$col) {
+  background-color: rgba($col,10%);
+  border-color: rgba($col,20%);
+  color: $col;
+}
+
+@mixin ThemeRoller($name,$col,$chapter:false) {
 
-  @if $prefix {
-    @if $important {
-      &.#{$prefix}culture-addicts {
-        #{$val} : $addicts !important;
+  @if $chapter {
+
+    .list.roller.chapter-#{$name} {
+
+      .item.roller.input {
+        @include ThemeRollerInput($name,$col);
+
+        &.active {
+          background-color: $col;
+          color: white;
+        }
       }
-    } @else {
-      &.#{$prefix}culture-addicts {
-        #{$val} : $addicts;
+
+      .item.roller.output {
+        @include ThemeRollerOutput($name,$col);
       }
     }
+
   } @else {
-    @if $important {
-      &.culture-addicts {
-        #{$val} : $addicts !important;
-      }
-    } @else {
-      &.culture-addicts {
-        #{$val} : $addicts;
-      }
-    }
-  }
 
-  @if $prefix {
-    @if $important {
-      &.#{$prefix}family-centric {
-        #{$val} : $family !important;
-      }
-    } @else {
-      &.#{$prefix}family-centric {
-        #{$val} : $family;
+    .item.roller.input.title-#{$name} {
+      @include ThemeRollerInput($name,$col);
+
+      &.active {
+        background-color: $col;
+        color: white;
       }
     }
-  } @else {
-    @if $important {
-      &.family-centric {
-        #{$val} : $family !important;
-      }
-    } @else {
-      &.family-centric {
-        #{$val} : $family;
-      }
+
+    .item.roller.output.title-#{$name} {
+      @include ThemeRollerOutput($name,$col);
     }
   }
+}
 
-  @if $prefix {
-    @if $important {
-      &.#{$prefix}receptive {
-        #{$val} : $receptive !important;
-      }
-    } @else {
-      &.#{$prefix}receptive {
-        #{$val} : $receptive;
-      }
-    }
-  } @else {
-    @if $important {
-      &.receptive {
-        #{$val} : $receptive !important;
-      }
-    } @else {
-      &.receptive {
-        #{$val} : $receptive;
-      }
-    }
+@mixin ThemeChart($col) {
+  .block.chart-pcent-title {
+    color: $col;
   }
 
-  @if $prefix {
-    @if $important {
-      &.#{$prefix}value-seekers {
-        #{$val} : $value !important;
+  .block.chart-bar-bg {
+    background-color: $col;
+  }
+}
+
+@mixin ThemePages($name,$col,$right:false,$chapter:false) {
+
+  @if $chapter {
+
+    .wrap.type-page.chapter-#{$name} {
+      fill: $col;
+
+      @include PageInfo($col,$right);
+
+      @include ThemeChart($col);
+
+      .block.number-container {
+        color: $col;
+      }
+
+      .lnk.stats {
+        color: $col;
       }
-    } @else {
-      &.#{$prefix}value-seekers {
-        #{$val} : $value;
+
+      .list.pies {
+        color: $col;
       }
     }
+
   } @else {
-    @if $important {
-      &.value-seekers {
-        #{$val} : $value !important;
-      }
-    } @else {
-      &.value-seekers {
-        #{$val} : $value;
+
+    .wrap.type-page.book-#{$name} {
+      stroke: $col;
+      fill: $col;
+
+      @include PageInfo($col,$right);
+
+      @include ThemeChart($col);
+
+      .block.number-container {
+        color: $col;
       }
-    }
-  }
 
-  @if $prefix {
-    @if $important {
-      &.#{$prefix}next-generation {
-        #{$val} : $next !important;
+      .lnk.stats {
+        color: $col;
       }
-    } @else {
-      &.#{$prefix}next-generation {
-        #{$val} : $next;
+
+      .list.pies {
+        color: $col;
       }
     }
-  } @else {
-    @if $important {
-      &.next-generation {
-        #{$val} : $next !important;
-      }
-    } @else {
-      &.next-generation {
-        #{$val} : $next;
-      }
+  }
+}
+
+@mixin ThemePies($name,$col) {
+  &.#{$name} {
+    color: $col;
+
+    .chunk.#{$name} {
+      opacity: 1;
     }
   }
+}
+
+@mixin ThemeSearch($name,$col,$chapter:false) {
 
-  @if $prefix {
-    @if $important {
-      &.#{$prefix}maybe-someday {
-        #{$val} : $maybe !important;
+  @if $chapter {
+
+    // Search Results
+
+    .block.results-entry.chapter-#{$name} {
+      color: $col;
+
+      &:hover {
+        background-color: rgba($col,10%);
       }
-    } @else {
-      &.#{$prefix}maybe-someday {
-        #{$val} : $maybe;
+
+      .block.results-dot {
+        background-color: $col;
       }
     }
+
   } @else {
-    @if $important {
-      &.maybe-someday {
-        #{$val} : $maybe !important;
+
+    // Search Results
+
+    .block.results-entry.book-#{$name} {
+      color: $col;
+
+      &:hover {
+        background-color: rgba($col,10%);
       }
-    } @else {
-      &.maybe-someday {
-        #{$val} : $maybe;
+
+      .block.results-dot {
+        background-color: $col;
       }
     }
   }
 }
-
-@mixin theme_roller($type) {
-  background-color: rgba($type,0.1);
-  color: $type;
-
-  &.active {
-    background-color: $type;
-    color: white;
-  }
-}
-
-@mixin theme_output($type) {
-  background-color: rgba($type,0.1);
-  border-color: rgba($type,0.2);
-  color: $type;
-}

data/_sass/helpers/mixins.scss

@@ -1,5 +1,5 @@
 
-@mixin zeros($pos:fixed,$val:0) {
+@mixin zeros($pos : fixed, $val : 0) {
   position: $pos;
   bottom: $val;
   right: $val;
@@ -32,14 +32,3 @@
     clear: both;
   }
 }
-
-@mixin grid($rep) {
-  grid-template-columns: repeat($rep,1fr);
-  display: grid;
-}
-
-@mixin rotatetitle($origin:bottom left,$deg:-90deg){
-  transform-origin: $origin;
-  transform: rotate($deg);
-  position: absolute;
-}

data/_sass/helpers/themes.scss

@@ -1,3 +1,13 @@
 
+// ThemeBook | $name | $col
+
 @include ThemeBook("orwell",blue);
 @include ThemeBook("woolf",green);
+
+// ThemeCover | $name | $col | $left | $chapter
+
+@include ThemeCover("animal",blue,false,true);
+
+// ThemePages | $name | $col | $right | $chapter
+
+@include ThemePages("animal",blue,false,true);