futuro 1.0.2 → 1.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f763ebdc34d1d167a49b548152f8d449fc9b21187ef3304f750684c8b573e1cb
-  data.tar.gz: 0300ec67b27d0e1e2b2f3e52c89b8558dbd36ad5ed1a5b65e16471d94757d74a
+  metadata.gz: 0ab0343f82969bfa0b85a9459b9ea5808321053a73afd09e807caa97336a4c5e
+  data.tar.gz: ba02241b3e13712740c2df5cf08dc34213ae0bae692d5a9150f423a46c339fb7
 SHA512:
-  metadata.gz: ce6e455a1e78c0d53ff02649a0cbfff1ae7398305f5e3e4edfd8be6cca2fb4fc9c04bb8b40bbff761360c51fcfdf8ee35723bb6bf2fd26a86c2a2401fd0b8adc
-  data.tar.gz: 93b04a219c7dc357b8dd4e1ddc51c33d03f4a8100ceccbf145c38bbc3fd56d88db2175cbd676674faaf7f4b4045c635777b6bbe3086bd753c55eb7f5f313a875
+  metadata.gz: d15eafb725acde47d1aa82025e2f8c7ce8d8ce35bf947f566fd8c93357440281f3dc7a127c562b5fe0b18d01d11ced1b5d1b9da4f8e6dc8856dcf31dab2aaa5c
+  data.tar.gz: d451a3cccc02af4197ffbb633331be7ec04da229d618f274b5486d13b230d2e559445dbb4563d58c39515ed543349ba567a6d61bd32d32c7cb431e76ed733834

data/_includes/html/page/content/loop/button/build.liquid

@@ -6,7 +6,8 @@
             {% if include.func %}{{ IncludeFunc }}{% endif %}
             {% if include.title %}{{ IncludeTitle }}{% endif %}
             {% if include.type %}{{ include.type | prepend : 'type-' }}{% endif %}
-            {% if include.style %}{{ include.style | prepend : 'style-' }}{% endif %}">
+            {% if include.style %}{{ include.style | prepend : 'style-' }}{% endif %}
+            {% if include.context %}{{ include.context | prepend : 'context-' }}{% endif %}">
 
   <button type="button" {% if include.slim %}class="modify-slim"{% endif %}>
 

data/_includes/html/page/content/loop/form.liquid

@@ -1,7 +1,8 @@
 
 {%- if item.yousaved -%}
 
-  {%- include {{ SiteContent | append : 'loop.liquid' }} type="yousaved" -%}
+  {%- include {{ SiteContent | append : 'loop.liquid' }} 
+                 type = "yousaved" -%}
 
 {%- elsif item.legend -%}
 
@@ -9,7 +10,8 @@
 
 {%- elsif item.addr -%}
 
-  {%- include {{ LoopForm | append : 'radio.liquid' }} type="address" -%}
+  {%- include {{ LoopForm | append : 'radio.liquid' }} 
+                 type = "address" -%}
 
 {%- elsif item.radio -%}
 
@@ -29,7 +31,8 @@
 
 {%- elsif item.alert -%}
 
-  {%- include {{ LoopForm | append : 'alert.liquid' }} context=include.context -%}
+  {%- include {{ LoopForm | append : 'alert.liquid' }} 
+                 context = include.context -%}
 
 {%- elsif item.message -%}
 

data/_includes/html/page/content/loop/form/button.liquid

@@ -1,19 +1,16 @@
 
-{%- if include.context == "legend" -%}
+{%- if include.context -%}
 
-  <p class="block form-row button-row">
-
-    <span class="block button-row legend-row">
-
-      {%- include {{ LoopButton | append : 'build.liquid' }}
-                     type  = item.button.type
-                     style = item.button.style
-                     func  = item.button.func
-                     title = item.button.title -%}  
+  <span class="block {{ include.context | append : '-row' }} button-row">
 
-    </span>
+    {%- include {{ LoopButton | append : 'build.liquid' }}
+                   type    = item.button.type
+                   style   = item.button.style
+                   func    = item.button.func
+                   title   = item.button.title
+                   context = include.context -%}
 
-  </p>
+  </span>
 
 {%- else -%}
 

data/_includes/html/page/content/loop/form/item.liquid

@@ -1,5 +1,5 @@
 
-{%- if context == "legend" -%}
+{%- if include.context == "legend" -%}
 
 <span class="block legend-row">
 

data/_includes/html/page/content/loop/form/label.liquid

@@ -1,6 +1,14 @@
 
-<label class="title {% if include.class %}{{ include.class }}{% endif %}"
-       {% if include.for %}for="{{ include.for }}"{% endif %}>
+{% if item.textarea %}
+  {% assign ItemStyle = "style-top" %}
+{% else %}
+  {% assign ItemStyle = "style-center" %}    
+{% endif %}
+
+<label class="title
+             {% if include.class %}{{ include.class }}{% endif %}
+             {{ ItemStyle }}"
+             {% if include.for %}for="{{ include.for }}"{% endif %}>
 
   {{ include.title }}
 

data/_includes/html/page/content/loop/form/legend.liquid

@@ -5,29 +5,31 @@
 
   <span class="block legend-key">
 
-    {% assign context = "legend" %}
-
     {%- for item in item.legend -%}
 
       {%- if item.text -%}
 
-        {%- include {{ LoopForm | append : 'text.liquid' }} -%}
+        {%- include {{ LoopForm | append : 'text.liquid' }} 
+                       context = "legend" -%}
 
       {%- elsif item.fee -%}
 
-        {%- include {{ LoopForm | append : 'fee.liquid' }} -%}
+        {%- include {{ LoopForm | append : 'fee.liquid' }} 
+                       context = "legend" -%}
 
       {%- elsif item.desc -%}
 
         {%- for item in item.desc -%}
 
-          {%- include {{ LoopForm | append : 'item.liquid' }} -%}
+          {%- include {{ LoopForm | append : 'item.liquid' }} 
+                         context = "legend" -%}
 
         {%- endfor -%}
 
       {%- elsif item.button -%}
 
-        {%- include {{ LoopForm | append : 'button.liquid' }} context="legend" -%}
+        {%- include {{ LoopForm | append : 'button.liquid' }} 
+                       context = "legend" -%}
 
       {%- endif -%}
 

data/_includes/html/page/content/loop/form/select.liquid

@@ -2,10 +2,10 @@
 <p class="block form-row select-row">
 
   {%- include {{ LoopForm | append : 'label.liquid' }}
-              title=item.select
-              small=item.small
-              subtitle=item.subtitle
-              class="form-label" -%}
+                 title    = item.select
+                 small    = item.small
+                 subtitle = item.subtitle
+                 class    = "form-label" -%}
 
   {% assign loop  = item.list %}
   {% assign title = item.select | replace: ' ','-' | downcase | append: '[]' %}

data/_includes/html/page/content/loop/form/text.liquid

@@ -1,5 +1,11 @@
 
-{% if context == "legend" %}
+{% if item.tag %}
+
+  {% assign ItemTags = item.tag | prepend : 'tag-' | split : ' ' | join : ' tag-' %}
+  
+{% endif %}
+
+{% if include.context == "legend" %}
 
 {% else %}
 
@@ -15,17 +21,13 @@
                   small = item.small
                   class = "form-label" %}
 
-    <span class="textinput-wrap {% if item.stub %}stub{% endif %}">
-
-      <span class="textinput-border">
-
-        {% include {{ LoopForm | append : 'input.liquid' }}
-                      type  = "text"
-                      id    = for
-                      name  = "name"
-                      class = "text-input" %}
+    <span class="wrap text-input {% if item.tag %}{{ ItemTags }}{% endif %}">
 
-      </span>
+      {% include {{ LoopForm | append : 'input.liquid' }}
+                    type  = "text"
+                    id    = for
+                    name  = "name"
+                    class = "text-input" %}
 
       {% if item.inline %}
 

data/_includes/html/page/content/loop/form/textarea.liquid

@@ -4,15 +4,11 @@
 <p class="block form-row textarea-row">
 
   {%- include {{ LoopForm | append : 'label.liquid' }}
-              title=item.textarea
-              small=item.small
-              subtitle=item.subtitle
-              class="form-label" -%}
+                 title=item.textarea
+                 small=item.small
+                 subtitle=item.subtitle
+                 class="form-label" -%}
 
-  <span class="textarea-wrap">
-
-    <textarea name="{{ name }}" id="{{ name }}"></textarea>
-
-  </span>
+  <textarea name="{{ name }}" id="{{ name }}"></textarea>
 
 </p>

data/_sass/_button.scss

@@ -1,8 +1,8 @@
 
 .button-wrap {
-  @include borderRad($radius);
   @include ib;
   -webkit-tap-highlight-color: transparent;
+  border-radius: 4px;
   position: relative;
   font-size: 1.6rem;
   cursor: pointer;
@@ -14,7 +14,7 @@
 
   @media#{map-get($query,min768)} {
     &:not(.legend-button) {
-      justify-self: flex-start;
+      justify-self: end;
       grid-column: 2;
     }
   }
@@ -33,6 +33,10 @@
   background-color: white;
 }
 
+.button-wrap.context-legend {
+  width: 100%;
+}
+
 .button-bg {
   @include zeros(absolute);
   z-index: 1;

data/_sass/block/form.scss

@@ -1,14 +1,17 @@
 
 .block.form-row {
+
   @media#{map-get($query,min768)} {
-    @include splitrow($align : center);
+
+    @include FormColumns;
+
   }
+
 }
 
 .block.form-date-group {
   grid-template-columns: minmax(70px,90px) minmax(70px,110px) minmax(70px,95px);
   grid-column-gap: 10px;
-  align-items: center;
   display: grid;
 
   @media#{map-get($query,min768)} {

data/_sass/block/form/alert.scss

@@ -1,8 +1,10 @@
 
 .block.form-alert {
-  @include padding($t:3.5,$b:2.5);
-  @include borderRad;
-  @include AlertColorCalc;
+  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;
 }
 

data/_sass/block/form/input.scss

@@ -1,10 +1,11 @@
 
 %textinput {
-  @include color($tint:80%);
-  @include padding;
-  @include bg;
+  border: 1px solid setcolor(gun,light) !important;
+  background-color: setcolor(gun,xlight);
+  padding: 14px 12px 10px 12px;
+  color: setcolor(gun,dark);
   -webkit-appearance: none;
-  border-radius: 0;
+  border-radius: 4px;
   display: block;
   width: 100%;
   border: 0;
@@ -14,28 +15,15 @@
   }
 }
 
-.textinput-wrap {
-  display: grid;
-
-  &.stub {
-    grid-template-columns: 100px auto;
-    grid-column-gap: 10px;
-    align-items: center;
-
-    small {
-      @extend %smallstyle;
-    }
-  }
+.wrap.text-input small {
+  @extend %smallstyle;
 }
 
-.textinput-border {
-  @include borderRad;
-  @include border;
-  display: block;
-
-  &.stub {
-    max-width: 100px;
-  }
+.wrap.text-input.tag-stub {
+  grid-template-columns: 100px auto;
+  grid-column-gap: 10px;
+  align-items: center;
+  display: grid;
 }
 
 input[type="text"] {

data/_sass/block/form/legend.scss

@@ -1,29 +1,36 @@
 
 .block.fieldset-row {
   @media#{map-get($query,min768)} {
-    @include splitrow( auto 250px );
+    @include FormColumns( auto 250px );
   }
 }
 
 .block.legend-row {
-  padding: ($radius * 2);
+  padding: 0 ($radius * 2) ($radius * 2);
   display: block;
+}
 
-  &.button-row {
-    padding: 0;
-  }
+.block.legend-row + .block.legend-row {
+  border-top: 1px solid rgba(setcolor(slate),20%);
+  padding-top: ($radius * 2);
+}
 
-  &.fee-row {
-    @media#{map-get($query,max767)} {
-      text-align: center;
-    }
-  }
+.block.legend-row + .block.legend-row.button-row {
+  border-top: none;
+}
 
-  + .block.legend-row:not(.button-row) {
-    border-top: 1px solid rgba(setcolor(slate),20%);
+.block.legend-row.fee-row {
+  @media#{map-get($query,max767)} {
+    text-align: center;
   }
 }
 
+.block.legend-row.button-row {
+  padding-bottom: 0;
+  padding-right: 0;
+  padding-left: 0;
+}
+
 .block.legend-key {
   display: block;
 }
@@ -44,7 +51,7 @@
 
 .block.legend-item {
   grid-template-columns: ($radius * 3) auto auto;
-  grid-column-gap: 10px;
+  grid-column-gap: 8px;
   align-items: center;
   display: grid;
 }
@@ -63,6 +70,7 @@
 .block.legend-fee {
   grid-template-columns: 12px auto;
   display: inline-grid;
+  padding-top: 2px;
 }
 
 .block.legend-item-price {

data/_sass/block/form/radio.scss

@@ -1,6 +1,6 @@
 
 .wrap.form-radio {
-  grid-row-gap: 10px;
+  grid-row-gap: 5px;
   display: grid;
 }
 

data/_sass/block/form/select.scss

@@ -1,15 +1,19 @@
 
 select {
-  @include color($tint:80%);
-  @include borderRad;
-  @include padding;
-  @include border;
-  @include bg;
+  background: url('/assets/imgs/dropdown.svg')
+              setcolor(gun,xlight)
+              no-repeat 
+              center 
+              right;
+  border: 1px solid setcolor(gun,light);
+  padding: 14px 12px 10px 12px;
+  color: setcolor(gun,dark);
   -webkit-appearance: none;
+  border-radius: 4px;
   display: block;
   width: 100%;
+}
 
-  &:focus {
-    outline: none;
-  }
+select:focus {
+  outline: none;
 }

data/_sass/block/form/text.scss

@@ -1,20 +1,15 @@
 
-.textarea-wrap {
-  @include borderRad;
-  @include border;
-  display: block;
-}
-
 textarea {
-  @include padding;
-  @include color($tint:80%);
-  @include bg;
+  background-color: setcolor(gun,xlight);
+  border: 1px solid setcolor(gun,light);
+  padding: 14px 12px 10px 12px;
+  color: setcolor(gun,dark);
   width: 100% !important;
+  border-radius: 4px;
   line-height: 1.3;
   display: block;
   outline: none;
   height: 200px;
-  border: none;
   resize: none;
   margin: 0;
-}
+}

data/_sass/helpers/mixins/layout.scss

@@ -4,6 +4,13 @@
   display: grid;
 }
 
+@mixin FormColumns( $columns : 250px auto, $align : stretch ) {
+  grid-template-columns: $columns;
+  grid-column-gap: 20px;
+  align-items: $align;
+  display: grid;
+}
+
 @mixin RotateTitle($origin : bottom left, $deg : 90){
   transform: rotate(-#{$deg}deg);
   transform-origin: $origin;

data/_sass/helpers/mixins/patterns.scss

@@ -1,11 +1,4 @@
 
-@mixin splitrow( $columns : 250px auto, $align : stretch ) {
-  grid-template-columns: $columns;
-  grid-column-gap: 20px;
-  align-items: $align;
-  display: grid;
-}
-
 // deprecated
 @mixin border( $col : setcolor(slate), $tint : 50% ) {
   border: 1px solid rgba( $col, $tint );

data/_sass/helpers/mixins/theme.scss

@@ -1,13 +1,13 @@
 
-// Alert modules require a darker color tint
-@mixin AlertColorCalc($custom:slate) {
-  // custom background color tint
-  background-color: setcolor($custom,xlight);
-  // border color = background * 0.65
-  border: 1px solid setcolor($custom,light);
-  // custom foreground color
-  color: setcolor($custom,dark);
-}
+// // Alert modules require a darker color tint
+// @mixin AlertColorCalc($custom) {
+//   // custom background color tint
+//   background-color: setcolor($custom,xlight);
+//   // border color = background * 0.65
+//   border: 1px solid setcolor($custom,light);
+//   // custom foreground color
+//   color: setcolor($custom,dark);
+// }
 
 // Used in Mindsets
 @mixin ThemeMorph($name,$color) {
@@ -45,7 +45,7 @@
 
 // Used in Patterns
 
-@mixin ThemeHeader($chapter,$title,$color:slate) {
+@mixin ThemeHeader($chapter,$title,$color) {
   .wrap.chapter-#{$chapter}.title-#{$title} {
 
     .block.header {
@@ -72,7 +72,7 @@
 }
 
 // Used in Patterns
-@mixin ThemeCheckbox($chapter,$title,$color:slate) {
+@mixin ThemeCheckbox($chapter,$title,$color) {
   .wrap.chapter-#{$chapter}.title-#{$title} {
     .checkbox-input:checked + label {
       background-color: setcolor($color,xlight);
@@ -83,56 +83,26 @@
 }
 
 // Used in Patterns
-@mixin ThemeRadio($name,$col) {
-  .area.title-#{$name} {
-
-    label.radio, label.jcf-radio-label {
-      color: $col;
-    }
-
-    .jcf-radio {
-      @include borderCol($col);
-      @include bg($col);
-
-      span {
-        background: $col;
-      }
-    }
-  }
-}
-
-// Used in Patterns
-@mixin ThemeTextArea($name,$col) {
-  .area.title-#{$name} {
-
+@mixin ThemeTextArea($chapter,$title,$color) {
+  .wrap.chapter-#{$chapter}.title-#{$title} {
     label.textarea {
-      color: $col;
-    }
-
-    .textarea-wrap {
-      @include borderCol($col);
+      color: setcolor($color,dark);
     }
-
     textarea {
-      @include borderCol($col);
-      @include color($col,100%);
-      @include bg($col);
+      background-color: setcolor($color,xlight);
+      border: 1px solid setcolor($color,light);
+      color: setcolor($color,dark);
     }
   }
 }
 
 // Used in Patterns
-@mixin ThemeSelect($name,$col) {
-  .area.title-#{$name} {
-
-    label.select {
-      color: $col;
-    }
-
+@mixin ThemeSelect($chapter,$title,$color) {
+  .wrap.chapter-#{$chapter}.title-#{$title} {
     select {
-      @include bg($col);
-      @include border($col);
-      @include color($col,100%);
+      background: setcolor($color,xlight);
+      border: 1px solid setcolor($color,light);
+      color: setcolor($color,dark);
     }
   }
 }
@@ -162,26 +132,21 @@
 }
 
 // Used in Patterns
-@mixin ThemeText($name,$col) {
-  .area.title-#{$name} {
-
+@mixin ThemeText($chapter,$title,$color) {
+  .wrap.chapter-#{$chapter}.title-#{$title} {
     label {
-      @include color($col,100%);
+      color: setcolor($color,dark);
     }
-
     input[type="text"] {
-      @include color($col,100%);
-      @include bg($col);
-    }
-
-    .textinput-border {
-      @include borderCol($col);
+      border: 1px solid setcolor($color,light) !important;
+      background-color: setcolor($color,xlight);
+      color: setcolor($color,dark);
     }
   }
 }
 
 // Used in Patterns
-@mixin ThemePassword($chapter,$title,$color:slate) {
+@mixin ThemePassword($chapter,$title,$color) {
   .wrap.chapter-#{$chapter}.title-#{$title} {
     .block.password-strength {
       background-color: setcolor($color);
@@ -202,7 +167,7 @@
 }
 
 // Used in Patterns
-@mixin ThemeCallout($chapter,$title,$color:slate) {
+@mixin ThemeCallout($chapter,$title,$color) {
   .wrap.chapter-#{$chapter}.title-#{$title} {
     .block.title {
       background-color: setcolor($color,xlight);
@@ -212,7 +177,7 @@
 }
 
 // Used in Patterns
-@mixin ThemeAlert($chapter,$title,$color:slate) {
+@mixin ThemeAlert($chapter,$title,$color) {
   .wrap.chapter-#{$chapter}.title-#{$title} {
     .block.form-alert {
       background-color: setcolor($color,xlight);
@@ -223,7 +188,7 @@
 }
 
 // Used in Patterns
-@mixin ThemeButton($chapter,$title,$color:slate) {
+@mixin ThemeButton($chapter,$title,$color) {
   .wrap.chapter-#{$chapter}.title-#{$title} {
     .button-wrap {
       background: setcolor($color);

data/_sass/helpers/variables.scss

@@ -144,7 +144,10 @@ $colormap : (
   ),
 
   paradise : (
-    base : #e8396c
+    base : #e8396c,
+    dark : darken(#e8396c,10%), // untested
+    light  : lighten(#e8396c,20%), // untested
+    xlight : lighten(#e8396c,40%) // untested
   ),
 
   artforall : (
@@ -192,17 +195,17 @@ $colormap : (
   ), 
 
   gun : (
-    base   : #666666,
-    dark   : darken(#666666,10%),
-    light  : lighten(#666666,50%),
-    xlight : lighten(#666666,75%)
+    base   : #666666, // untested
+    dark   : darken(#666666,10%), // untested
+    light  : lighten(#666666,32%), // untested
+    xlight : lighten(#666666,56%) // untested
   ), 
 
   slate : (
-    base   : #333333,
-    dark   : darken(#333333,10%),
-    light  : lighten(#333333,50%),
-    xlight : lighten(#333333,75%)
+    base   : #333333, // tested
+    dark   : darken(#333333,10%), // tested
+    light  : lighten(#333333,50%), // tested
+    xlight : lighten(#333333,75%) // tested
   ), 
 
   carbon : (

data/_sass/title/checkbox.scss

@@ -1,14 +1,14 @@
 
 .title.checkbox-label {
-  @include padding($t:3.5,$b:2.5,$l:10);
-  @include borderRad;
-  border: 1px solid setcolor(slate,light);
+  border: 1px solid setcolor(gun,light);
+  padding: 14px 12px 10px 40px;
   background-color: white;
-  color: setcolor(slate);
-  cursor: pointer;
+  color: setcolor(gun,dark);
+  border-radius: 4px;
+  cursor: pointer;  
+}
+
+.title.checkbox-label:hover {
+  background-color: darken(white,3%);
+}
 
-  &:hover {
-    background-color: setcolor(slate,xlight);
-  }
-  
-}

data/_sass/title/form.scss

@@ -1,7 +1,24 @@
 
 .title.form-label {
+  @extend %bold;
   @media#{map-get($query,max767)} {
     margin-bottom: 5px;
     display: block;
   }
+}
+
+.title.form-label.style-top {
+  @media#{map-get($query,min768)} {
+    padding-top: 14px;
+  }
+}
+
+.title.form-label.style-center {
+  @media#{map-get($query,min768)} {
+    align-self: center;
+  }
+}
+
+.title.form-label small {
+  @extend %book;
 }

data/assets/imgs/dropdown.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="36" height="46" viewBox="0 0 36 46" xml:space="preserve" enable-background="new 0 0 36 46"><style type="text/css">.st0{fill:#ebebeb}.st1{fill:#aaa}.st2{fill:#969696}</style><rect class="st0" width="36" height="46"/><rect class="st1" width="1" height="46"/><path class="st2" d="M23,19.9l-5,5l-5-5l-1.6,1.6l6.6,6.6l6.6-6.6L23,19.9z"/></svg>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: futuro
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.0.3
 platform: ruby
 authors:
 - Paul Heading
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-13 00:00:00.000000000 Z
+date: 2020-05-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -311,6 +311,7 @@ files:
 - assets/fonts/230883_3_0.eot
 - assets/fonts/230883_3_0.ttf
 - assets/fonts/230883_3_0.woff
+- assets/imgs/dropdown.svg
 - assets/js/footer/custom/1_Settings.js
 - assets/js/footer/custom/2_Check.width.js
 - assets/js/footer/custom/3_Setup.browse.js