Merge pull request #357 from tachyons-css/v4.7.0

V4.7.0
tachyons-css · Apr 3, 2017 · 2071e67 · 2071e67
2 parents 3ff2ade + 26bf9cd
commit 2071e67
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 59 deletions.
diff --git a/css/tachyons.css b/css/tachyons.css
@@ -141,7 +141,7 @@ svg:not(:root) { overflow: hidden; }
  * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
-button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
+button, input, optgroup, select, textarea { font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
@@ -453,6 +453,7 @@ img { max-width: 100%; }
 .b--washed-yellow { border-color: #fffceb; }
 .b--washed-red { border-color: #ffdfdf; }
 .b--transparent { border-color: transparent; }
+.b--inherit { border-color: inherit; }
 /*
 
    BORDER RADIUS
@@ -1173,6 +1174,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
 .washed-green { color: #e8fdf5; }
 .washed-yellow { color: #fffceb; }
 .washed-red { color: #ffdfdf; }
+.color-inherit { color: inherit; }
 .bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
 .bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); }
 .bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
@@ -1230,6 +1232,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
 .bg-washed-green { background-color: #e8fdf5; }
 .bg-washed-yellow { background-color: #fffceb; }
 .bg-washed-red { background-color: #ffdfdf; }
+.bg-inherit { background-color: inherit; }
 /* 
   
    SKINS:PSEUDO
@@ -1296,6 +1299,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
 .hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); }
 .hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); }
 .hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); }
+.hover-inherit:hover, .hover-inherit:focus { color: inherit; }
 .hover-bg-black:hover { background-color: #000; }
 .hover-bg-black:focus { background-color: #000; }
 .hover-bg-near-black:hover { background-color: #111; }
@@ -1456,6 +1460,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
 .hover-bg-washed-yellow:focus { background-color: #fffceb; }
 .hover-bg-washed-red:hover { background-color: #ffdfdf; }
 .hover-bg-washed-red:focus { background-color: #ffdfdf; }
+.hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; }
 /* Variables */
 /*
    SPACING
@@ -1754,6 +1759,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
      4 = 4th step in size scale
      5 = 5th step in size scale
      6 = 6th step in size scale
+     7 = 7th step in size scale
 
    Media Query Extensions:
      -ns = not-small
@@ -1775,6 +1781,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
 .f4 { font-size: 1.25rem; }
 .f5 { font-size: 1rem; }
 .f6 { font-size: .875rem; }
+.f7 { font-size: .75rem; }
+/* Small and hard to read for many people so use with extreme caution */
 /*
 
    TYPOGRAPHY
@@ -1801,7 +1809,13 @@ code, .code { font-family: Consolas, monaco, monospace; }
 
    UTILITIES
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
+/* Equivalent to .overflow-y-scroll */
 .overflow-container { overflow-y: scroll; }
 .center { margin-right: auto; margin-left: auto; }
 /*
@@ -1866,8 +1880,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
 
 */
 .dim { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
-.dim:hover, .dim:focus { opacity: .5; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
-.dim:active { opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; }
+.dim:hover, .dim:focus { -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .5; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
+.dim:active { -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; }
 /*
 
   Animate opacity to 100% on hover by adding the glow class.
@@ -2455,12 +2469,14 @@ code, .code { font-family: Consolas, monaco, monospace; }
  .f4-ns { font-size: 1.25rem; }
  .f5-ns { font-size: 1rem; }
  .f6-ns { font-size: .875rem; }
+ .f7-ns { font-size: .75rem; }
  .measure-ns { max-width: 30em; }
  .measure-wide-ns { max-width: 34em; }
  .measure-narrow-ns { max-width: 20em; }
  .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
  .small-caps-ns { font-variant: small-caps; }
  .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+ .center-ns { margin-right: auto; margin-left: auto; }
  .clip-ns { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
  .ws-normal-ns { white-space: normal; }
  .nowrap-ns { white-space: nowrap; }
@@ -2494,9 +2510,6 @@ code, .code { font-family: Consolas, monaco, monospace; }
  .outline-m { outline: 1px solid; }
  .outline-transparent-m { outline: 1px solid transparent; }
  .outline-0-m { outline: 0; }
- .outline-l { outline: 1px solid; }
- .outline-transparent-l { outline: 1px solid transparent; }
- .outline-0-l { outline: 0; }
  .ba-m { border-style: solid; border-width: 1px; }
  .bt-m { border-top-style: solid; border-top-width: 1px; }
  .br-m { border-right-style: solid; border-right-width: 1px; }
@@ -2868,12 +2881,14 @@ code, .code { font-family: Consolas, monaco, monospace; }
  .f4-m { font-size: 1.25rem; }
  .f5-m { font-size: 1rem; }
  .f6-m { font-size: .875rem; }
+ .f7-m { font-size: .75rem; }
  .measure-m { max-width: 30em; }
  .measure-wide-m { max-width: 34em; }
  .measure-narrow-m { max-width: 20em; }
  .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
  .small-caps-m { font-variant: small-caps; }
  .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+ .center-m { margin-right: auto; margin-left: auto; }
  .clip-m { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
  .ws-normal-m { white-space: normal; }
  .nowrap-m { white-space: nowrap; }
@@ -2904,6 +2919,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
  .bg-right-l { background-repeat: no-repeat; background-position: center right; }
  .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; }
  .bg-left-l { background-repeat: no-repeat; background-position: center left; }
+ .outline-l { outline: 1px solid; }
+ .outline-transparent-l { outline: 1px solid transparent; }
+ .outline-0-l { outline: 0; }
  .ba-l { border-style: solid; border-width: 1px; }
  .bt-l { border-top-style: solid; border-top-width: 1px; }
  .br-l { border-right-style: solid; border-right-width: 1px; }
@@ -3275,12 +3293,14 @@ code, .code { font-family: Consolas, monaco, monospace; }
  .f4-l { font-size: 1.25rem; }
  .f5-l { font-size: 1rem; }
  .f6-l { font-size: .875rem; }
+ .f7-l { font-size: .75rem; }
  .measure-l { max-width: 30em; }
  .measure-wide-l { max-width: 34em; }
  .measure-narrow-l { max-width: 20em; }
  .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
  .small-caps-l { font-variant: small-caps; }
  .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+ .center-l { margin-right: auto; margin-left: auto; }
  .clip-l { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
  .ws-normal-l { white-space: normal; }
  .nowrap-l { white-space: nowrap; }

diff --git a/css/tachyons.min.css b/css/tachyons.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tachyons",
-  "version": "4.6.2",
+  "version": "4.7.0",
   "description": "Functional CSS for humans",
   "author": "mrmrs",
   "style": "css/tachyons.min.css",
@@ -23,7 +23,7 @@
   "devDependencies": {
     "copy-files": "^0.1.0",
     "immutable-css-cli": "^1.1.1",
-    "normalize.css": "^4.2.0",
+    "normalize.css": "^6.0.0",
     "tachyons-modules": "^1.1.8",
     "tachyons-cli": "^1.0.10",
     "watch": "^1.0.1"

diff --git a/readme.md b/readme.md
@@ -153,14 +153,14 @@ Please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/
 * https://windtoday.co
 * http://claudio.netlify.com
 * http://devday-ar.com
+* http://mrmrs.io/mnml
 * http://mrmrs.io/up
 * http://mrmrs.io/profile/
 * http://mrmrs.io/gradients
 * http://mrmrs.io/btns/
 * http://mrmrs.io/beats/
 * http://mrmrs.io/writing
 * http://mrmrs.cc
-* http://mn-ml.cc
 * https://fontawesome.com
 
 And of course...

diff --git a/src/_border-colors.css b/src/_border-colors.css
@@ -83,3 +83,4 @@
 .b--washed-red { border-color: var(--washed-red); }
 
 .b--transparent { border-color: var(--transparent); }
+.b--inherit { border-color: inherit; }
diff --git a/src/_flexbox.css b/src/_flexbox.css
@@ -25,6 +25,9 @@
 .flex-column  { flex-direction: column; }
 .flex-row     { flex-direction: row; }
 .flex-wrap    { flex-wrap: wrap; }
+.flex-column-reverse  { flex-direction: column-reverse; }
+.flex-row-reverse     { flex-direction: row-reverse; }
+.flex-wrap-reverse    { flex-wrap: wrap-reverse; }
 
 .items-start    { align-items: flex-start; }
 .items-end      { align-items: flex-end; }
@@ -72,8 +75,11 @@
   }
   .flex-none-ns { flex: none; }
   .flex-column-ns { flex-direction: column; }
-  .flex-row-ns     { flex-direction: row; }
+  .flex-row-ns { flex-direction: row; }
   .flex-wrap-ns { flex-wrap: wrap; }
+  .flex-column-reverse-ns { flex-direction: column-reverse; }
+  .flex-row-reverse-ns { flex-direction: row-reverse; }
+  .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
   .items-start-ns { align-items: flex-start; }
   .items-end-ns { align-items: flex-end; }
   .items-center-ns { align-items: center; }
@@ -122,6 +128,9 @@
   .flex-column-m { flex-direction: column; }
   .flex-row-m     { flex-direction: row; }
   .flex-wrap-m { flex-wrap: wrap; }
+  .flex-column-reverse-m { flex-direction: column-reverse; }
+  .flex-row-reverse-m { flex-direction: row-reverse; }
+  .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
   .items-start-m { align-items: flex-start; }
   .items-end-m { align-items: flex-end; }
   .items-center-m { align-items: center; }
@@ -171,6 +180,10 @@
   .flex-column-l { flex-direction: column; }
   .flex-row-l { flex-direction: row; }
   .flex-wrap-l { flex-wrap: wrap; }
+  .flex-column-reverse-l { flex-direction: column-reverse; }
+  .flex-row-reverse-l { flex-direction: row-reverse; }
+  .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
+
   .items-start-l { align-items: flex-start; }
   .items-end-l { align-items: flex-end; }
   .items-center-l { align-items: center; }

diff --git a/src/_normalize.css b/src/_normalize.css
@@ -1,33 +1,23 @@
-/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
 
 /**
- * 1. Change the default font family in all browsers (opinionated).
- * 2. Correct the line height in all browsers.
- * 3. Prevent adjustments of font size after orientation changes in
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
  *    IE on Windows Phone and in iOS.
  */
 
-/* Document
-   ========================================================================== */
-
 html {
-  font-family: sans-serif; /* 1 */
-  line-height: 1.15; /* 2 */
-  -ms-text-size-adjust: 100%; /* 3 */
-  -webkit-text-size-adjust: 100%; /* 3 */
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
    ========================================================================== */
 
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
 /**
  * Add the correct display in IE 9-.
  */
@@ -108,17 +98,7 @@ a {
 }
 
 /**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-/**
- * 1. Remove the bottom border in Firefox 39-.
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 
@@ -245,19 +225,15 @@ svg:not(:root) {
    ========================================================================== */
 
 /**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
+ * Remove the margin in Firefox and Safari.
  */
 
 button,
 input,
 optgroup,
 select,
 textarea {
-  font-family: sans-serif; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
+  margin: 0;
 }
 
 /**
@@ -316,16 +292,6 @@ button:-moz-focusring,
   outline: 1px dotted ButtonText;
 }
 
-/**
- * Change the border, margin, and padding in all browsers (opinionated).
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.

diff --git a/src/_outlines.css b/src/_outlines.css
@@ -25,7 +25,7 @@
   .outline-0-m { outline: 0; }
 }
 
-@media (--breakpoint-medium) {
+@media (--breakpoint-large) {
   .outline-l { outline: 1px solid; }
   .outline-transparent-l { outline: 1px solid transparent; }
   .outline-0-l { outline: 0; }

diff --git a/src/_skins-pseudo.css b/src/_skins-pseudo.css
@@ -66,6 +66,8 @@
 .hover-white-20:focus { color: var(--white-20); }
 .hover-white-10:hover,
 .hover-white-10:focus { color: var(--white-10); }
+.hover-inherit:hover,
+.hover-inherit:focus { color: inherit; }
 
 .hover-bg-black:hover, 
 .hover-bg-black:focus { background-color: var(--black); }
@@ -230,4 +232,5 @@
 .hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); }
 .hover-bg-washed-red:hover,
 .hover-bg-washed-red:focus { background-color: var(--washed-red); }
-
+.hover-bg-inherit:hover,
+.hover-bg-inherit:focus { background-color: inherit; }
diff --git a/src/_skins.css b/src/_skins.css
@@ -69,6 +69,7 @@
 .washed-green { color: var(--washed-green); }
 .washed-yellow { color: var(--washed-yellow); }
 .washed-red { color: var(--washed-red); }
+.color-inherit { color: inherit; }
 
 .bg-black-90 {         background-color: var(--black-90); }
 .bg-black-80 {         background-color: var(--black-80); }
@@ -132,3 +133,4 @@
 .bg-washed-green { background-color: var(--washed-green); }
 .bg-washed-yellow { background-color: var(--washed-yellow); }
 .bg-washed-red { background-color: var(--washed-red); }
+.bg-inherit { background-color: inherit; }