futuro 0.7.4 → 0.7.5

data/_sass/futuro.core.scss

@@ -1,34 +1,85 @@
 
 @charset "utf-8";
 
+// Helper Styles
+
 @import
-"helpers/variables/patterns",
 "helpers/variables",
+"helpers/mixins",
+"helpers/mixins/layout",
 "helpers/mixins/mindsets",
 "helpers/mixins/patterns",
 "helpers/mixins/theme",
-"helpers/mixins",
 "helpers/extends",
-"helpers/themes",
-"base",
-"area",
-"area/overlay/about",
-"area/overlay/browse",
-"area/overlay/load",
-"area/overlay/mobile",
-"area/overlay/search",
+"helpers/extends/grid",
+"helpers/extends/layout",
+"helpers/themes";
+
+// Area Styles
+
+@import
 "area/overlay",
+"area/book",
+"area/chapter",
+"area/content",
 "area/page",
-"area/topbar",
-"artwork",
-"bar",
+"area/topbar";
+
+// Block Styles
+
+@import
 "block",
-"block/browse",
 "block/clipper",
+"block/custom",
+"block/chart",
 "block/navigation",
+"block/number",
+"block/pie",
 "block/results",
+"block/scroller",
 "block/stop",
-"block/util",
+"block/util";
+
+// Form Styles
+
+@import
+"block/form",
+"block/form/alert",
+"block/form/header",
+"block/form/subheader",
+"block/form/search",
+"block/form/radio",
+"block/form/select",
+"block/form/screen",
+"block/form/text",
+"block/form/label",
+"block/form/login",
+"block/form/message",
+"block/form/title",
+"block/form/checkbox",
+"block/form/input",
+"block/form/item",
+"block/form/legend",
+"block/form/password",
+"block/form/scroller";
+
+// Wrap Styles
+
+@import
+"wrap/browse",
+"wrap/overlay",
+"wrap/chapter",
+"wrap/page",
+"wrap/book",
+"wrap/home",
+"wrap/scroller";
+
+// Other Styles
+
+@import
+"artwork",
+"base",
+"bar",
 "box",
 "button",
 "col",
@@ -37,20 +88,16 @@
 "input",
 "item",
 "list",
-"lnk",
+"link",
 "site",
 "slick",
 "split",
 "task",
 "title",
-"title/overlay",
-"wrap/overlay/legacy",
-"wrap/overlay/load",
-"wrap/overlay/mobile",
-"wrap/overlay/search",
-"wrap/overlay",
-"wrap/chapter",
-"wrap/page",
-"wrap/book",
-"wrap/home",
-"wrap/scroller";
+"title/overlay";
+
+.placeholder {
+  width: 340px;
+  height: 380px;
+  background: #eee;
+}

data/_sass/helpers/extends/grid.scss

@@ -0,0 +1,24 @@
+
+%GridDefault {
+  grid-template-columns: 20px minmax(280px,1000px) 20px;
+}
+
+%GridOverlay {
+  grid-template-columns: 20px minmax(280px,560px) 20px;
+}
+
+%GridSearch {
+  grid-template-columns: 20px minmax(280px,480px) 20px;
+}
+
+%GridLoad {
+  grid-template-columns: 20px minmax(240px,300px) 20px;
+}
+
+%GridUtil {
+  justify-content: flex-start;
+  grid-auto-flow: column;
+  grid-column-gap: 10px;
+  align-items: center;
+  display: grid;
+}

data/_sass/helpers/extends/layout.scss

@@ -0,0 +1,27 @@
+
+%SiteSetup {
+  @extend %GridDefault;
+  justify-content: center;
+  padding-bottom: 50px;
+  padding-top: 100px;
+}
+
+%PagePosition {
+  grid-column: 2 / 3;
+  position: relative;
+  height: 560px;
+}
+
+%ContentFlow {
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  flex-wrap: wrap;
+  display: flex;
+}
+
+%ContentPrep {
+  margin: 0 0 20px;
+  padding: 0 20px;
+  width: 50%;
+}

data/_sass/helpers/extends.scss

@@ -1,116 +1,14 @@
 
-%grid_default {
-  grid-template-columns: 20px minmax(280px,1000px) 20px;
-}
-
-%grid_overlay {
-  grid-template-columns: 20px minmax(280px,560px) 20px;
-}
-
-%grid_search {
-  grid-template-columns: 20px minmax(280px,480px) 20px;
-}
-
-%grid_load {
-  grid-template-columns: 20px minmax(240px,300px) 20px;
-}
-
-%wrap_grid {
-  grid-column: 2 / 3;
-  display: grid;
-}
-
-%wrap_block {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-%wrap_overlay {
-  min-width: 280px;
-  @include ib;
-}
-
 :focus {
   outline: rgba(0,0,0,0);
 }
 
-%util-grid {
-  justify-content: flex-start;
-  grid-auto-flow: column;
-  grid-column-gap: 10px;
-  align-items: center;
-  display: grid;
-}
-
-%site-setup {
-  @extend %grid_default;
-  justify-content: center;
-  padding-bottom: 60px;
-  padding-top: 120px;
-}
-
-%area-page {
-  position: relative;
-  overflow: hidden;
-  display: grid;
-
-  &:not(.style-docs) {
-    grid-template-columns: repeat(2,1fr);
-    height: 560px;
-  }
-
-  &.style-docs {
-    padding: 20px;
-  }
-
-  &.tag-tree {
-    grid-template-rows: 60px 500px;
-    grid-template-columns: auto;
-  }
-
-  &.tag-new {
-    grid-template-columns: 860px 140px;
-  }
-
-  &.tag-custom {
-    grid-template-columns: 860px 140px;
-  }
-}
-
 %tight {
   letter-spacing: -0.03em;
 }
 
 // MINDSETS IMPORT ************************************************************
 
-%list-roller {
-  @extend %bold;
-  max-width: 320px;
-  list-style: none;
-  font-size: 21px;
-  display: grid;
-  padding: 0;
-
-  &.split {
-    grid-template-columns: repeat(2,50%);
-  }
-
-  &.sml {
-    font-size: 16px;
-  }
-}
-
-%list-output {
-  margin: 0 0 0 40px;
-  max-width: 320px;
-  list-style: none;
-  padding: 0;
-
-  &.sml {
-    font-size: 16px;
-  }
-}
-
 %table {
   grid-template-columns: 220px repeat(4,110px);
   list-style: none;
@@ -126,22 +24,31 @@
   }
 }
 
-%item_roller {
-  background-color: rgba(0,0,0,0.05);
-  border: 2px solid white;
-  padding: 8px 10px 6px;
-  cursor: pointer;
-}
+// PATTERNS IMPORT ************************************************************
 
-%item_output {
-  background-color: rgba(black,5%);
-  border: 2px solid;
-  padding: 10px;
-  display: none;
+%jcf-box {
+  @include ib;
+  @include bg(map-get($color,slate));
+  @include border(map-get($color,slate));
+  position: relative;
+  height: 16px;
+  width: 16px;
 
-  &.active {
+  &.jcf-checked span {
     display: block;
   }
+
+  span {
+    @include zeros(absolute,3px);
+    background-color: map-get($color,slate);
+    cursor: pointer;
+    display: none;
+  }
 }
 
-// PATTERNS IMPORT ************************************************************
+%smallstyle {
+  @include ib;
+  @extend %book;
+  line-height: 1.3;
+  opacity: 0.5;
+}

data/_sass/helpers/mixins/layout.scss

@@ -0,0 +1,11 @@
+
+@mixin Grid($rep) {
+  grid-template-columns: repeat($rep,1fr);
+  display: grid;
+}
+
+@mixin RotateTitle($origin : bottom left, $deg : 90){
+  transform: rotate(-#{$deg}deg);
+  transform-origin: $origin;
+  position: absolute;
+}

data/_sass/helpers/mixins/mindsets.scss

@@ -29,12 +29,6 @@
   }
 }
 
-@mixin grid($rep) {
-  grid-template-columns: repeat($rep,1fr);
-  display: grid;
-}
-
-
 @mixin rollover($type) {
 
   .list {

data/_sass/helpers/mixins/patterns.scss

@@ -6,11 +6,11 @@
   display: grid;
 }
 
-@mixin border( $col : $forms, $tint : 50% ) {
+@mixin border( $col : map-get($color,slate), $tint : 50% ) {
   border: 1px solid rgba( $col, $tint );
 }
 
-@mixin borderCol( $col : $forms, $tint : 50% ) {
+@mixin borderCol( $col : map-get($color,slate), $tint : 50% ) {
   border-color: rgba( $col, $tint );
 }
 
@@ -18,11 +18,11 @@
   border-radius: $calc;
 }
 
-@mixin color( $col : $forms, $tint : 50% ) {
+@mixin color( $col : map-get($color,slate), $tint : 50% ) {
   color: rgba( $col, $tint );
 }
 
-@mixin bg( $col : $forms, $tint : 5% ) {
+@mixin bg( $col : map-get($color,slate), $tint : 5% ) {
   background: rgba( $col, $tint );
 }