Updated Button Blocks Colors (#83)

* [MISC} added button block color * [DOCS] added new version * [MISC] wrong variable color name * [FEATURE] built css * [MISC] build reverting colors again. * [MISC] wrong button, oops * [MISC] last change on app.js
vhx · Sep 27, 2017 · c504192 · c504192
1 parent 19e38cd
commit c504192
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 1.5.5
+**2017-9-27**
+* added black to button blocks.
+
 ### 1.5.4
 **2017-9-27**
 * default text now set to Regent Gray instead of Teal.

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.5.4
+1.5.5
diff --git a/dist/block.css b/dist/block.css
@@ -75,7 +75,7 @@
 ......................................*/
 /* button block base
 ......................................*/
-.btn-block, .btn-block-teal, .btn-block-gray, .btn-block-navy {
+.btn-block, .btn-block-teal, .btn-block-gray, .btn-block-navy, .btn-block-black {
   transition: all .2s ease;
   display: flex;
   align-items: center;
@@ -90,17 +90,17 @@
   text-align: center;
   text-transform: uppercase;
   font-family: "brandon-grotesque-n1", "brandon-grotesque", "Brandon Grotesque", sans-serif; }
-  .btn-block.btn--border, .btn--border.btn-block-teal, .btn--border.btn-block-gray, .btn--border.btn-block-navy {
+  .btn-block.btn--border, .btn--border.btn-block-teal, .btn--border.btn-block-gray, .btn--border.btn-block-navy, .btn--border.btn-block-black {
     border-left: 1px solid #D7DDE1;
     border-right: 1px solid #D7DDE1; }
-    .btn-block.btn--border + .btn-block, .btn--border.btn-block-teal + .btn-block, .btn--border.btn-block-gray + .btn-block, .btn--border.btn-block-navy + .btn-block, .btn-block.btn--border + .btn-block-teal, .btn--border.btn-block-teal + .btn-block-teal, .btn--border.btn-block-gray + .btn-block-teal, .btn--border.btn-block-navy + .btn-block-teal, .btn-block.btn--border + .btn-block-gray, .btn--border.btn-block-teal + .btn-block-gray, .btn--border.btn-block-gray + .btn-block-gray, .btn--border.btn-block-navy + .btn-block-gray, .btn-block.btn--border + .btn-block-navy, .btn--border.btn-block-teal + .btn-block-navy, .btn--border.btn-block-gray + .btn-block-navy, .btn--border.btn-block-navy + .btn-block-navy {
+    .btn-block.btn--border + .btn-block, .btn--border.btn-block-teal + .btn-block, .btn--border.btn-block-gray + .btn-block, .btn--border.btn-block-navy + .btn-block, .btn--border.btn-block-black + .btn-block, .btn-block.btn--border + .btn-block-teal, .btn--border.btn-block-teal + .btn-block-teal, .btn--border.btn-block-gray + .btn-block-teal, .btn--border.btn-block-navy + .btn-block-teal, .btn--border.btn-block-black + .btn-block-teal, .btn-block.btn--border + .btn-block-gray, .btn--border.btn-block-teal + .btn-block-gray, .btn--border.btn-block-gray + .btn-block-gray, .btn--border.btn-block-navy + .btn-block-gray, .btn--border.btn-block-black + .btn-block-gray, .btn-block.btn--border + .btn-block-navy, .btn--border.btn-block-teal + .btn-block-navy, .btn--border.btn-block-gray + .btn-block-navy, .btn--border.btn-block-navy + .btn-block-navy, .btn--border.btn-block-black + .btn-block-navy, .btn-block.btn--border + .btn-block-black, .btn--border.btn-block-teal + .btn-block-black, .btn--border.btn-block-gray + .btn-block-black, .btn--border.btn-block-navy + .btn-block-black, .btn--border.btn-block-black + .btn-block-black {
       border-left: 1px solid transparent; }
-  .btn-block.is-active, .is-active.btn-block-teal, .is-active.btn-block-gray, .is-active.btn-block-navy, .btn-block:hover, .btn-block-teal:hover, .btn-block-gray:hover, .btn-block-navy:hover, .btn-block.is-hover, .is-hover.btn-block-teal, .is-hover.btn-block-gray, .is-hover.btn-block-navy {
+  .btn-block.is-active, .is-active.btn-block-teal, .is-active.btn-block-gray, .is-active.btn-block-navy, .is-active.btn-block-black, .btn-block:hover, .btn-block-teal:hover, .btn-block-gray:hover, .btn-block-navy:hover, .btn-block-black:hover, .btn-block.is-hover, .is-hover.btn-block-teal, .is-hover.btn-block-gray, .is-hover.btn-block-navy, .is-hover.btn-block-black {
     cursor: pointer;
     box-shadow: inset 0px -4px 0px #869AA5; }
-  .btn-block span, .btn-block-teal span, .btn-block-gray span, .btn-block-navy span {
+  .btn-block span, .btn-block-teal span, .btn-block-gray span, .btn-block-navy span, .btn-block-black span {
     display: block; }
-    .btn-block span:first-child, .btn-block-teal span:first-child, .btn-block-gray span:first-child, .btn-block-navy span:first-child {
+    .btn-block span:first-child, .btn-block-teal span:first-child, .btn-block-gray span:first-child, .btn-block-navy span:first-child, .btn-block-black span:first-child {
       margin-top: -7px; }
 
 /* button block teal
@@ -135,3 +135,14 @@
   .btn-block-navy:active, .btn-block-navy.is-active {
     color: #5E7887;
     box-shadow: inset 0px -4px 0px #5E7887; }
+
+/* button block navy
+......................................*/
+.btn-block-black {
+  color: #1a2e3b; }
+  .btn-block-black:link, .btn-block-black:visited {
+    color: #1a2e3b; }
+  .btn-block-black:hover, .btn-block-black.is-hover
+  .btn-block-black:active, .btn-block-black.is-active {
+    color: #1a2e3b;
+    box-shadow: inset 0px -4px 0px #1a2e3b; }
diff --git a/dist/component-checkbox.css b/dist/component-checkbox.css
@@ -136,24 +136,24 @@
     border: 1px solid #9aaab4; }
 
 .form .checkbox.small {
-  min-height: 13.3333333333px; }
+  min-height: 13.33333px; }
   .form .checkbox.small label {
-    min-height: 13.3333333333px;
-    line-height: 13.3333333333px; }
+    min-height: 13.33333px;
+    line-height: 13.33333px; }
     .form .checkbox.small label .checkbox--icon {
-      width: 13.3333333333px;
-      height: 13.3333333333px; }
+      width: 13.33333px;
+      height: 13.33333px; }
       .form .checkbox.small label .checkbox--icon .checkbox-animate {
-        width: 10.3333333333px;
-        height: 10.3333333333px;
+        width: 10.33333px;
+        height: 10.33333px;
         top: 1px;
         right: 1px; }
     .form .checkbox.small label .checkbox--label {
-      width: calc(100% - 18.3333333333px);
-      left: 18.3333333333px; }
+      width: calc(100% - 18.33333px);
+      left: 18.33333px; }
     .form .checkbox.small label .checkbox--label,
     .form .checkbox.small label .checkbox--contain {
-      min-height: 13.3333333333px; }
+      min-height: 13.33333px; }
 
 .form .checkbox.medium {
   min-height: 20px; }

diff --git a/dist/quartz.css b/dist/quartz.css
@@ -406,7 +406,7 @@
 ......................................*/
 /* button block base
 ......................................*/
-.btn-block, .btn-block-teal, .btn-block-gray, .btn-block-navy {
+.btn-block, .btn-block-teal, .btn-block-gray, .btn-block-navy, .btn-block-black {
   transition: all .2s ease;
   display: flex;
   align-items: center;
@@ -421,17 +421,17 @@
   text-align: center;
   text-transform: uppercase;
   font-family: "brandon-grotesque-n1", "brandon-grotesque", "Brandon Grotesque", sans-serif; }
-  .btn-block.btn--border, .btn--border.btn-block-teal, .btn--border.btn-block-gray, .btn--border.btn-block-navy {
+  .btn-block.btn--border, .btn--border.btn-block-teal, .btn--border.btn-block-gray, .btn--border.btn-block-navy, .btn--border.btn-block-black {
     border-left: 1px solid #D7DDE1;
     border-right: 1px solid #D7DDE1; }
-    .btn-block.btn--border + .btn-block, .btn--border.btn-block-teal + .btn-block, .btn--border.btn-block-gray + .btn-block, .btn--border.btn-block-navy + .btn-block, .btn-block.btn--border + .btn-block-teal, .btn--border.btn-block-teal + .btn-block-teal, .btn--border.btn-block-gray + .btn-block-teal, .btn--border.btn-block-navy + .btn-block-teal, .btn-block.btn--border + .btn-block-gray, .btn--border.btn-block-teal + .btn-block-gray, .btn--border.btn-block-gray + .btn-block-gray, .btn--border.btn-block-navy + .btn-block-gray, .btn-block.btn--border + .btn-block-navy, .btn--border.btn-block-teal + .btn-block-navy, .btn--border.btn-block-gray + .btn-block-navy, .btn--border.btn-block-navy + .btn-block-navy {
+    .btn-block.btn--border + .btn-block, .btn--border.btn-block-teal + .btn-block, .btn--border.btn-block-gray + .btn-block, .btn--border.btn-block-navy + .btn-block, .btn--border.btn-block-black + .btn-block, .btn-block.btn--border + .btn-block-teal, .btn--border.btn-block-teal + .btn-block-teal, .btn--border.btn-block-gray + .btn-block-teal, .btn--border.btn-block-navy + .btn-block-teal, .btn--border.btn-block-black + .btn-block-teal, .btn-block.btn--border + .btn-block-gray, .btn--border.btn-block-teal + .btn-block-gray, .btn--border.btn-block-gray + .btn-block-gray, .btn--border.btn-block-navy + .btn-block-gray, .btn--border.btn-block-black + .btn-block-gray, .btn-block.btn--border + .btn-block-navy, .btn--border.btn-block-teal + .btn-block-navy, .btn--border.btn-block-gray + .btn-block-navy, .btn--border.btn-block-navy + .btn-block-navy, .btn--border.btn-block-black + .btn-block-navy, .btn-block.btn--border + .btn-block-black, .btn--border.btn-block-teal + .btn-block-black, .btn--border.btn-block-gray + .btn-block-black, .btn--border.btn-block-navy + .btn-block-black, .btn--border.btn-block-black + .btn-block-black {
       border-left: 1px solid transparent; }
-  .btn-block.is-active, .is-active.btn-block-teal, .is-active.btn-block-gray, .is-active.btn-block-navy, .btn-block:hover, .btn-block-teal:hover, .btn-block-gray:hover, .btn-block-navy:hover, .btn-block.is-hover, .is-hover.btn-block-teal, .is-hover.btn-block-gray, .is-hover.btn-block-navy {
+  .btn-block.is-active, .is-active.btn-block-teal, .is-active.btn-block-gray, .is-active.btn-block-navy, .is-active.btn-block-black, .btn-block:hover, .btn-block-teal:hover, .btn-block-gray:hover, .btn-block-navy:hover, .btn-block-black:hover, .btn-block.is-hover, .is-hover.btn-block-teal, .is-hover.btn-block-gray, .is-hover.btn-block-navy, .is-hover.btn-block-black {
     cursor: pointer;
     box-shadow: inset 0px -4px 0px #869AA5; }
-  .btn-block span, .btn-block-teal span, .btn-block-gray span, .btn-block-navy span {
+  .btn-block span, .btn-block-teal span, .btn-block-gray span, .btn-block-navy span, .btn-block-black span {
     display: block; }
-    .btn-block span:first-child, .btn-block-teal span:first-child, .btn-block-gray span:first-child, .btn-block-navy span:first-child {
+    .btn-block span:first-child, .btn-block-teal span:first-child, .btn-block-gray span:first-child, .btn-block-navy span:first-child, .btn-block-black span:first-child {
       margin-top: -7px; }
 
 /* button block teal
@@ -467,6 +467,17 @@
     color: #5E7887;
     box-shadow: inset 0px -4px 0px #5E7887; }
 
+/* button block navy
+......................................*/
+.btn-block-black {
+  color: #1a2e3b; }
+  .btn-block-black:link, .btn-block-black:visited {
+    color: #1a2e3b; }
+  .btn-block-black:hover, .btn-block-black.is-hover
+  .btn-block-black:active, .btn-block-black.is-active {
+    color: #1a2e3b;
+    box-shadow: inset 0px -4px 0px #1a2e3b; }
+
 /* .....................................
   Fonts
 ..................................... */

diff --git a/dist/quartz.min.css b/dist/quartz.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vhx/quartz",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "VHX Style Guide and JS Components.",
   "homepage": "https://github.com/vhx/quartz",
   "author": "VHX",

diff --git a/quartz-css/buttons/styles/block.scss b/quartz-css/buttons/styles/block.scss
@@ -79,3 +79,15 @@
   );
 }
 
+/* button block navy
+......................................*/
+.btn-block-black {
+  @extend .btn-block;
+  @include button-block-colors(
+    $astro-granite, // text color
+    $astro-granite, // text color hover
+    $astro-granite  // bottom border-color
+  );
+}
+
+