futuro 0.7.6 → 0.7.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a064474f717722cead136d52ac15da9d745b4a8f20bfb091fbcfa62fae259f86
-  data.tar.gz: 4a541deb07861c0de115089206aceee3323be07334c21ee2b6039616fd720c53
+  metadata.gz: f6a4b96553b4527d52123e0d6a91a00611c805065c7c44af2c2fc8ab6dbb4961
+  data.tar.gz: 14b5a3c6968d5847faf7eb1e046132692a90f79da3ce86675ed8b38a5d8a12d7
 SHA512:
-  metadata.gz: d9f2466555ff46e86b00c0da7943a2a7914ff968296804fad74d122dfeffe457b09764b78045c619507a8651e8bc220d7af96f09fbf8928540163432da488240
-  data.tar.gz: e1bb71d05c62e9be22fbcac389ba94e80270e93192915634b3738cedda17689b9f08ed8fb7517bba939415b57f772173d41c61b5f67b7fe37a580ae2751d72ee
+  metadata.gz: b09f8c539634241f1446856e7ae4dc0d231e75595b62b310466a572d0d5aedc1dacabebf97866b4b7e3caf1366a884fa26346753744a3a83a176203b71eaf90b
+  data.tar.gz: ba33728e2dd51ea0ee01f8300abf37586c04c253c38f6c6c7529b6852df7df10152ec857a20e8bd949c62bb222661bec1bdd0ab176a4f3f89c129b3233a27a63

data/_includes/html/assign/site.liquid

@@ -15,6 +15,7 @@
 {% assign LoopForm     = ContentLoop | append : 'form/' %}
 {% assign LoopHeader   = ContentLoop | append : 'header/' %}
 {% assign LoopScreen   = ContentLoop | append : 'screen/' %}
+{% assign LoopButton   = ContentLoop | append : 'button/' %}
 
 {% assign SiteSvg = 'svg/site/' %}
 {% assign SvgLoad = SiteSvg | append : 'load/' %}

data/_includes/html/page/content.liquid

@@ -10,7 +10,7 @@
 
   {%- endunless -%}
 
-{% else %}
+{% else %} 
 
   {%- include html/page/subtitle.liquid -%}
 
@@ -132,4 +132,10 @@
 
   {%- endif -%}
 
+  {%- if page.button -%}
+
+    {%- include {{ SiteContent | append : 'loop.liquid' }} type="button" -%}
+
+  {%- endif -%}
+
 {%- endunless -%}

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

@@ -0,0 +1,14 @@
+
+{%- if item.submit -%}
+
+  {%- include {{ LoopButton | append : 'container.liquid' }} type="submit" value=item.submit -%}
+
+{%- elsif item.update -%}
+
+  {%- include {{ LoopButton | append : 'container.liquid' }} type="update" value=item.update -%}
+
+{%- elsif item.option -%}
+
+  {%- include {{ LoopButton | append : 'container.liquid' }} type="option" value=item.option -%}
+
+{%- endif -%}

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

@@ -0,0 +1,63 @@
+
+{% assign IncludeType = include.type | append : '-button' %}
+{% assign IncludeValue = include.value | prepend : 'title-' | downcase %}
+
+<div class="button-container">
+
+  <div class="button-version">
+
+    <div class="title button-version">Primary</div>
+
+    <div class="button-wrap {{ IncludeType }} {{ IncludeValue }} modify-primary">
+
+      <button type="button">{{ include.value }}</button>
+
+      <span class="button-bg {{ IncludeType }}"></span>
+
+    </div>
+
+  </div>
+
+  <div class="button-version">
+
+    <div class="title button-version">Pri. Slim</div>
+
+    <div class="button-wrap {{ IncludeType }} {{ IncludeValue }} modify-primary">
+
+      <button class="modify-slim" type="button">{{ include.value }}</button>
+
+      <span class="button-bg {{ IncludeType }}"></span>
+
+    </div>
+
+  </div>
+
+  <div class="button-version">
+
+    <div class="title button-version">Secondary</div>
+
+    <div class="button-wrap {{ IncludeType }} {{ IncludeValue }} modify-secondary">
+
+      <button type="button">{{ include.value }}</button>
+
+      <span class="button-bg {{ IncludeType }}"></span>
+
+    </div>
+
+  </div>
+
+  <div class="button-version">
+
+    <div class="title button-version">Sec. Slim</div>
+
+    <div class="button-wrap {{ IncludeType }} {{ IncludeValue }} modify-secondary">
+
+      <button class="modify-slim" type="button">{{ include.value }}</button>
+
+      <span class="button-bg {{ IncludeType }}"></span>
+
+    </div>
+
+  </div>
+
+</div>

data/_sass/_base.scss

@@ -133,7 +133,7 @@ img {
 button {
   @extend %bold;
   @include borderRad($radius);
-  @include padding($l:5,$r:5);
+  @include Padding2(3);
   position: relative;
   background: none;
   border-width: 0;
@@ -143,6 +143,10 @@ button {
   z-index: 2;
 }
 
+button.modify-slim {
+  @include Padding2(3);
+}
+
 button.navigation {
   letter-spacing: -0.02em;
   border-radius: 0;

data/_sass/_button.scss

@@ -21,12 +21,23 @@
   }
 }
 
+.button-bg {
+  @include zeros(absolute);
+  z-index: 1;
+}
+
+.button-bg.submit-button {
+  @include borderRad($radius);
+}
+
+.button-wrap.update-button {
+  overflow: hidden;
+}
+
 .button-wrap.switch-button {
   min-width: 9rem;
 }
 
-.button-bg {
-  @include zeros(absolute);
-  @include borderRad($radius);
-  z-index: 1;
+.button-bg.update-button {
+  right: 100%;
 }

data/_sass/helpers/mixins/patterns.scss

@@ -29,3 +29,10 @@
 @mixin padding( $t : 3.5, $r : 3, $b : 2.5, $l : 3 ) {
   padding: ($radius * $t) ($radius * $r) ($radius * $b) ($radius * $l);
 }
+
+@mixin Padding2($value : 3) {
+  padding: ($radius * ($value * 1.1))
+           ($radius * $value)
+           ($radius * ($value * 0.9))
+           ($radius * $value);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: futuro
 version: !ruby/object:Gem::Version
-  version: 0.7.6
+  version: 0.7.8
 platform: ruby
 authors:
 - Paul Heading
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-04-16 00:00:00.000000000 Z
+date: 2020-04-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -117,6 +117,8 @@ files:
 - _includes/html/page/content/loop/artwork.liquid
 - _includes/html/page/content/loop/artwork/image.liquid
 - _includes/html/page/content/loop/artwork/video.liquid
+- _includes/html/page/content/loop/button.liquid
+- _includes/html/page/content/loop/button/container.liquid
 - _includes/html/page/content/loop/chart.liquid
 - _includes/html/page/content/loop/chart/assign.liquid
 - _includes/html/page/content/loop/form.liquid