futuro 0.8.3 → 0.8.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 355e9c5bfcae06dd83e64528c4a64aee4648a12ca369418a8fabcbd8de374b96
-  data.tar.gz: 241d070855aeefaecac15123989a3a4f80d7981d92df934e58504bb68c017684
+  metadata.gz: 4bef1f10a0a1ec29f3f4665fba831ac168c6d4e6702a3642f59868544525afc6
+  data.tar.gz: 16c71920e7e36aef5472c65afa78a12c8e0ac8a88e70f1e63a40c53dd31fa07e
 SHA512:
-  metadata.gz: 6e55351fd4604d46678b5316d00a42f57b1b3c790282e034e5d55be01eeed264086f45fd3ea310ecbdc133ced4e4b9c4ab653a6a2aaadfc346fcf61a084dcd62
-  data.tar.gz: c0da529612953d1d7fe4ac6ecb455462d7e684ec719df5417df440b723fde4521f1f24c2084219e79ce54b8663e0e5936f87b5cdebd921abb8543f431394faf2
+  metadata.gz: 1b5504ff55c0e514efac76df527eb5bf2ba11a956e23e5fdd2022db0158abd0dbadc03ba6eb57553bf59dfca598fd370d89bcee6c4a6209dd7bcf0ea030c1969
+  data.tar.gz: ae4fe683146e82bc253d968ce1988521572e1e6fc9d2304ac182e53d320e8767839f9640d3ace4f0008a6d4ea7ddd20b701354f4a088eedae0ab7d4d301157fc

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

@@ -13,22 +13,6 @@
 
   </div>
 
-  {%- unless include.func == "inactive" -%}
-
-    <div class="button-version">
-
-      <div class="title button-version">Secondary</div>
-
-      {%- include {{ LoopForm | append : 'button.liquid' }}
-                     context = "example"
-                     version = "secondary"
-                     func    = include.func
-                     content = include.content -%}
-
-    </div>
-
-  {%- endunless -%}
-
   <div class="button-version">
 
     <div class="title button-version">Pri. Slim</div>
@@ -44,6 +28,18 @@
 
   {%- unless include.func == "inactive" -%}
 
+    <div class="button-version">
+
+      <div class="title button-version">Secondary</div>
+
+      {%- include {{ LoopForm | append : 'button.liquid' }}
+                     context = "example"
+                     version = "secondary"
+                     func    = include.func
+                     content = include.content -%}
+
+    </div>
+
     <div class="button-version">
 
       <div class="title button-version">Sec. Slim</div>

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

@@ -18,11 +18,36 @@
 {%- elsif include.context == "example" -%}
 
   {% assign IncludeFunc    = include.func    | append : '-button' %}
+
   {% assign IncludeContent = include.content | prepend : 'title-' | downcase %}
 
   <div class="button-wrap {{ IncludeFunc }} {{ IncludeContent }} {{ include.version | prepend : 'modify-' }}">
 
-    <button type="button" {% if include.slim %}class="modify-slim"{% endif %}>{{ include.content }}</button>
+    <button type="button" {% if include.slim %}class="modify-slim"{% endif %}>
+
+      <div class="block button-icon-wrap">
+
+        <div class="block button-icon">
+
+          {%- if include.func == "inactive" -%}
+
+            {%- include {{ SvgIcon }} type="info" -%}
+
+          {%- else -%}
+
+            {%- include {{ SvgIcon }} type="cta" -%}
+
+          {%- endif -%}
+
+        </div>
+
+        <div class="block button-title">
+          {{ include.content }}
+        </div>
+
+      </div>
+
+    </button>
 
     <span class="button-bg {{ IncludeFunc }}"></span>
 

data/_includes/svg/site/icon.liquid

@@ -3,14 +3,14 @@
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 31.8"><path d="M0,0h7.2v11.8c1.7-1.5,3.3-2.1,5.7-2.1c6,0,10.3,4.7,10.3,11.2c0,3.2-1.1,6.1-3.1,8.1c-1.8,1.8-4.1,2.7-7,2.7	S8.4,31,6.9,29.2V31H0V0L0,0z M6.7,20.7c0,3.1,1.9,5.1,4.6,5.1c2.7,0,4.4-1.9,4.4-4.9c0-3.1-1.7-5.1-4.5-5.1	C8.4,15.8,6.7,17.8,6.7,20.7L6.7,20.7z M40.4,29.6c-1.9,1.7-3.1,2.2-6,2.2c-3.2,0-5.5-0.9-7.3-2.8c-1.9-2-3-4.9-3-8.2	c0-6.4,4.2-11,10.2-11c2.6,0,4.1,0.6,6.1,2.4v-1.8h6.9V31h-6.9V29.6L40.4,29.6z M31.6,21c0,3.1,1.7,4.9,4.5,4.9c2.7,0,4.5-2,4.5-5.1	c0-2.9-1.8-4.9-4.4-4.9C33.5,15.8,31.6,18,31.6,21L31.6,21z M49.2,10.5h6.9V13c1.5-2.4,3-3.2,5.5-3.2c0.5,0,0.8,0,2.5,0.2v6.6	c-0.8-0.2-1.3-0.3-1.9-0.3c-3.8,0-5.8,2-5.8,5.9V31h-7.2V10.5 M65.3,0h7.2v11.8c1.7-1.5,3.3-2.1,5.7-2.1c6,0,10.3,4.7,10.3,11.2	c0,3.2-1.1,6.1-3.1,8.1c-1.8,1.8-4.1,2.7-7,2.7s-4.6-0.7-6.2-2.5V31h-6.9V0L65.3,0z M72,20.7c0,3.1,1.9,5.1,4.6,5.1	c2.7,0,4.4-1.9,4.4-4.9c0-3.1-1.7-5.1-4.5-5.1C73.7,15.8,72,17.8,72,20.7L72,20.7z M97.4,4.5c0,2.2-1.8,4-4,4c-2.2,0-3.9-1.8-3.9-4	c0-2.2,1.8-3.9,3.9-3.9C95.6,0.6,97.4,2.4,97.4,4.5L97.4,4.5z M89.9,10.5H97V31h-7.2V10.5z M114.8,30.1c-3,1.5-4,1.7-6.5,1.7	c-2.8,0-5-0.8-6.6-2.3c-2-2-3.2-5-3.2-8.5c0-6.7,4.1-11.4,10.1-11.4c2.3,0,3.8,0.4,6.2,1.9v7.2c-1.7-2-2.7-2.6-4.5-2.6	c-2.6,0-4.2,1.8-4.2,4.7c0,2.8,1.6,4.6,4.2,4.6c1.6,0,2.8-0.6,4.5-2.3V30.1 M131.8,29.6c-1.9,1.7-3.1,2.2-6,2.2	c-3.2,0-5.5-0.9-7.3-2.8c-1.9-2-3-4.9-3-8.2c0-6.4,4.2-11,10.2-11c2.6,0,4.1,0.6,6.1,2.4v-1.8h6.9V31h-6.9V29.6L131.8,29.6z M123,21	c0,3.1,1.7,4.9,4.5,4.9c2.7,0,4.5-2,4.5-5.1c0-2.9-1.8-4.9-4.4-4.9S123,18,123,21L123,21z M140.6,10.5h7.1v2.4	c1.8-2.4,3.4-3.1,6.3-3.1c3.2,0,5.8,1.3,7,3.4c0.6,1.1,0.9,2.4,0.9,4V31h-7.2V19.7c0-2.8-1-4-3.2-4c-2.3,0-3.8,1.6-3.8,4V31h-7.2	V10.5"/></svg>
 
-{%- elsif include.type == "carrier" -%}
-
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 226.6"><path d="M279.13,0H20.87C7.62,22.39,0,48.53,0,76.44C0,159.37,67.16,226.6,150,226.6c82.85,0,150-67.23,150-150.17	C300,48.53,292.38,22.39,279.13,0z"/></svg>
-
 {%- elsif include.type == "shopmark" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 38"><path d="M135.7,30h6.9V19.2c0-2.4,1.5-3.9,3.7-3.9	c2.1,0,3.1,1.2,3.1,3.9V30h6.9V16.7c0-1.5-0.3-2.8-0.9-3.8c-1.2-2.1-3.7-3.3-6.8-3.3c-2.8,0-4.4,0.7-6.1,3v-2.3h-6.8V30z M118.9,20.4c0,2.9,1.6,4.7,4.4,4.7c2.6,0,4.4-1.9,4.4-4.9c0-2.8-1.7-4.7-4.3-4.7C120.8,15.5,118.9,17.6,118.9,20.4z M127.5,28.7	c-1.8,1.6-3,2.1-5.8,2.1c-3.1,0-5.3-0.9-7.1-2.7c-1.9-2-2.9-4.7-2.9-7.9c0-6.2,4.1-10.6,9.9-10.6c2.5,0,3.9,0.6,5.9,2.3v-1.7h6.6V30	h-6.6C127.5,30,127.5,28.7,127.5,28.7z M110.6,22.4c-1.6,1.6-2.8,2.2-4.4,2.2c-2.5,0-4-1.7-4-4.4c0-2.8,1.5-4.5,4.1-4.5	c1.7,0,2.7,0.6,4.3,2.5v-6.9c-2.3-1.4-3.8-1.8-6-1.8c-5.8,0-9.7,4.4-9.7,10.9c0,3.3,1.1,6.3,3.1,8.2c1.5,1.5,3.6,2.2,6.4,2.2	c2.4,0,3.4-0.3,6.3-1.7C110.6,29.2,110.6,22.4,110.6,22.4z M86.7,30h6.9V10.3h-6.9V30z M94,4.6c0,2.1-1.7,3.8-3.8,3.8c0,0,0,0,0,0	c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8C92.2,0.8,94,2.5,94,4.6z M69.5,20.1c0,2.9,1.8,5,4.4,5c2.6,0,4.3-1.8,4.3-4.7	c0-3-1.7-4.9-4.4-4.9C71.2,15.5,69.5,17.3,69.5,20.1L69.5,20.1z M63,0.2H70v11.4c1.6-1.5,3.2-2,5.5-2c5.8,0,10,4.5,10,10.8	c0,3-1.1,5.9-3,7.8c-1.7,1.8-4,2.6-6.8,2.6c-2.8,0-4.5-0.7-6-2.4V30H63L63,0.2z M47.2,30h6.9v-8.3c0-3.8,1.9-5.7,5.6-5.7	c0.6,0,1,0,1.8,0.3V9.9c-1.6-0.2-1.9-0.2-2.4-0.2c-2.4,0-3.8,0.8-5.3,3.1v-2.5h-6.6V30z M30.5,20.4c0,2.9,1.6,4.7,4.4,4.7	c2.6,0,4.4-1.9,4.4-4.9c0-2.8-1.7-4.7-4.3-4.7S30.5,17.6,30.5,20.4z M39,28.7c-1.8,1.6-3,2.1-5.8,2.1c-3.1,0-5.3-0.9-7.1-2.7	c-1.9-2-2.9-4.7-2.9-7.9c0-6.2,4.1-10.6,9.9-10.6c2.5,0,3.9,0.6,5.9,2.4v-1.7h6.6V30H39C39,30,39,28.7,39,28.7z M6.5,20.1	c0,2.9,1.8,5,4.4,5s4.3-1.8,4.3-4.7c0-3-1.7-4.9-4.4-4.9C8.2,15.5,6.5,17.3,6.5,20.1z M0,0.2h6.9v11.4c1.6-1.5,3.2-2,5.5-2	c5.8,0,10,4.5,10,10.8c0,3-1.1,5.9-3,7.8c-1.7,1.8-4,2.6-6.8,2.6c-2.8,0-4.5-0.7-6-2.4V30H0V0.2z" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF"/><path d="M221.7,37.9h7v-9.1c1.6,1.5,3.1,2.1,5.7,2.1c5.9,0,9.9-4.3,9.9-10.7c0-6.5-3.8-10.8-9.8-10.8c-2.8,0-4.1,0.5-6.1,2.4v-1.7	h-6.7V37.9L221.7,37.9z M232.7,15.1c2.6,0,4.4,1.9,4.4,5c0,2.9-1.7,4.7-4.4,4.7c-2.6,0-4.4-1.9-4.4-4.7	C228.2,17.1,230.1,15.1,232.7,15.1z M209.3,9.3c-6.9,0-11.9,4.5-11.9,10.7c0,6.2,5,10.7,11.8,10.7c7.1,0,11.8-4.3,11.8-10.7	C220.9,13.7,216.1,9.3,209.3,9.3L209.3,9.3z M209.2,14.8c2.8,0,4.5,2,4.5,5.2c0,3.3-1.7,5.2-4.7,5.2c-2.6,0-4.5-2.2-4.5-5.2	C204.6,17,206.5,14.8,209.2,14.8L209.2,14.8z M175.5,30h7V19.6c0-2.9,1.3-4.5,3.6-4.5c2.1,0,3.2,1.2,3.2,3.4V30h7V17.1	c0-2-0.3-3.2-0.8-4.2c-1.2-2.1-4-3.5-6.9-3.5c-2.5,0-4.1,0.7-6.1,2.7V0h-7L175.5,30L175.5,30z M172,15.8c-1.7-0.9-3.5-1.6-4.9-1.6	c-1.2,0-1.9,0.5-1.9,1.4c0,0.4,0.2,0.8,0.6,1.1c0.5,0.3,1.1,0.5,1.7,0.7l0.7,0.1l0.7,0.2l0.7,0.2c3.5,0.8,4.7,2.2,4.7,5.6	c0,2-0.8,3.9-2.2,5.2c-1.8,1.6-3.7,2.2-7.2,2.2c-1.4,0-3.5-0.4-5-1c-0.8-0.3-1.4-0.6-2.7-1.4l2.2-4.7c2.2,1.2,3.6,1.8,5.1,1.9	c1.4,0.1,2.4-0.5,2.4-1.3c0-0.7-0.8-1.2-2.7-1.7c-2.8-0.6-3.6-0.9-4.6-1.8c-1.1-1-1.7-2.6-1.6-4.4c0.2-4.6,3.9-7.4,9.3-7.1	c2.3,0.1,4.2,0.6,7.1,1.9L172,15.8L172,15.8z"/></svg>
 
+{%- elsif include.type == "carrier" -%}
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 226.6"><path d="M279.13,0H20.87C7.62,22.39,0,48.53,0,76.44C0,159.37,67.16,226.6,150,226.6c82.85,0,150-67.23,150-150.17	C300,48.53,292.38,22.39,279.13,0z"/></svg>
+
 {%- elsif include.type == "avatar" -%}
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
@@ -39,4 +39,16 @@
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184 184"><path d="M182,92c0,49.7-40.3,90-90,90S2,141.7,2,92S42.3,2,92,2 S182,42.3,182,92z" opacity="0.2" enable-background="new"/></svg>
 
+{%- elsif include.type == "info" -%}
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13,9h-2V7h2V9z M13,17h-2v-6h2V17z M12,22c5.5,0,10-4.5,10-10S17.5,2,12,2C6.5,2,2,6.5,2,12S6.5,22,12,22z M12,4	c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S7.6,4,12,4z"/></svg>
+
+{%- elsif include.type == "alert" -%}
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,15h2v2h-2V15z M11,7h2v6h-2V7z M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20	c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z"/></svg>
+
+{%- elsif include.type == "cta" -%}
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12"><path d="M14,5.9L7.2,12l-1.9-1.7l4-3.2H0V4.9h9.4l-4-3.3L7.2,0L14,5.9z"/></svg>
+
 {%- endif -%}

data/_sass/block/button.scss

@@ -0,0 +1,14 @@
+
+.block.button-icon-wrap {
+  grid-auto-columns: 14px auto;
+  justify-content: center;
+  grid-auto-flow: column;
+  align-items: center;
+  grid-gap: 8px;
+  display: grid;
+}
+
+.block.button-title {
+  position: relative;
+  top: 2px;
+}

data/_sass/futuro.core.scss

@@ -29,6 +29,7 @@
 
 @import
 "block",
+"block/button",
 "block/clipper",
 "block/custom",
 "block/chart",

data/_sass/helpers/mixins/layout.scss

@@ -11,15 +11,9 @@
 }
 
 @mixin PadBtn($value : 4) {
-  padding: ($radius * $value)
-           ($radius * $value)
-           round(($radius * $value) * 0.8)
-           ($radius * $value);
+  padding: ($radius * ($value * 0.875)) ($radius * $value);
 }
 
-@mixin PadBtnSlim($value : 3) {
-  padding: round(($radius * $value) * 0.9)
-           ($radius * $value)
-           ($radius * ($value - 1))
-           ($radius * $value);
+@mixin PadBtnSlim($value : 4) {
+  padding: round($radius * ($value * 0.625)) ($radius * $value);
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: futuro
 version: !ruby/object:Gem::Version
-  version: 0.8.3
+  version: 0.8.4
 platform: ruby
 authors:
 - Paul Heading
@@ -219,6 +219,7 @@ files:
 - _sass/area/overlay.scss
 - _sass/area/page.scss
 - _sass/area/topbar.scss
+- _sass/block/button.scss
 - _sass/block/chart.scss
 - _sass/block/clipper.scss
 - _sass/block/custom.scss