Permalink
Browse files

Bump to 4.6.1. Updates dev dependencies as well.

  • Loading branch information...
1 parent 28ff1d0 commit c246410d6b09cb290dfb4bb5b4fce3917d726b39 @mrmrs mrmrs committed Dec 15, 2016
View
@@ -2,7 +2,7 @@
"name": "tachyons-sass",
"description": "Transpiled Sass partials for Tachyons",
"author": "John Otander",
- "version": "4.5.6",
+ "version": "4.6.1",
"style": "tachyons.scss",
"scripts": {
"start": "node build.js",
@@ -18,12 +18,12 @@
],
"license": "MIT",
"dependencies": {
- "tachyons": "^4.5.4"
+ "tachyons": "^4.6.1"
},
"devDependencies": {
- "ava": "^0.16.0",
+ "ava": "^0.17.0",
"css-scss": "^0.1.0",
"glob": "^7.1.1",
- "node-sass": "^3.10.1"
+ "node-sass": "^4.0.0"
}
}
@@ -0,0 +1,142 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+ ASPECT RATIOS
+
+*/
+
+/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
+ * Make sure there are no height and width attributes on the embedded media.
+ * Adapted from: https://github.com/suitcss/components-flex-embed
+ *
+ * Example:
+ *
+ * <div class="aspect-ratio aspect-ratio--16x9">
+ * <iframe class="aspect-ratio--object"></iframe>
+ * </div>
+ *
+ * */
+
+.aspect-ratio {
+ height: 0;
+ position: relative;
+}
+
+.aspect-ratio--16x9 { padding-bottom: 56.25%; }
+.aspect-ratio--9x16 { padding-bottom: 177.77%; }
+
+.aspect-ratio--4x3 { padding-bottom: 75%; }
+.aspect-ratio--3x4 { padding-bottom: 133.33%; }
+
+.aspect-ratio--6x4 { padding-bottom: 66.6%; }
+.aspect-ratio--4x6 { padding-bottom: 150%; }
+
+.aspect-ratio--8x5 { padding-bottom: 62.5%; }
+.aspect-ratio--5x8 { padding-bottom: 160%; }
+
+.aspect-ratio--7x5 { padding-bottom: 71.42%; }
+.aspect-ratio--5x7 { padding-bottom: 140%; }
+
+.aspect-ratio--1x1 { padding-bottom: 100%; }
+
+.aspect-ratio--object {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+}
+
+@media #{$breakpoint-not-small}{
+ .aspect-ratio-ns {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-ns { padding-bottom: 75%; }
+ .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-ns { padding-bottom: 150%; }
+ .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-ns { padding-bottom: 160%; }
+ .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-ns { padding-bottom: 140%; }
+ .aspect-ratio--1x1-ns { padding-bottom: 100%; }
+ .aspect-ratio--object-ns {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
+}
+
+@media #{$breakpoint-medium}{
+ .aspect-ratio-m {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-m { padding-bottom: 75%; }
+ .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-m { padding-bottom: 150%; }
+ .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-m { padding-bottom: 160%; }
+ .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-m { padding-bottom: 140%; }
+ .aspect-ratio--1x1-m { padding-bottom: 100%; }
+ .aspect-ratio--object-m {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
+}
+
+@media #{$breakpoint-large}{
+ .aspect-ratio-l {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-l { padding-bottom: 75%; }
+ .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-l { padding-bottom: 150%; }
+ .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-l { padding-bottom: 160%; }
+ .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-l { padding-bottom: 140%; }
+ .aspect-ratio--1x1-l { padding-bottom: 100%; }
+ .aspect-ratio--object-l {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
+}
@@ -116,8 +116,8 @@
.br-100-l { border-radius: 100%; }
.br-pill-l { border-radius: 9999px; }
.br--bottom-l {
- border-radius-top-left: 0;
- border-radius-top-right: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
.br--top-l {
border-bottom-left-radius: 0;
@@ -21,8 +21,11 @@ footer,
header,
form,
fieldset,
+legend,
pre,
code,
+a,
+h1,h2,h3,h4,h5,h6,
p,
ul,
ol,
@@ -31,6 +34,10 @@ dl,
dt,
dd,
textarea,
+table,
+td,
+th,
+tr,
input[type="email"],
input[type="number"],
input[type="password"],
@@ -16,7 +16,7 @@
.sans-serif {
font-family: -apple-system, BlinkMacSystemFont,
'avenir next', avenir,
- helvetica, 'helvetica neue',
+ 'helvetica neue', helvetica,
ubuntu,
roboto, noto,
'segoe ui', arial,
View
@@ -11,6 +11,7 @@
Docs: http://tachyons.io/docs/themes/hovers/
- Dim
+ - Glow
- Hide Child
- Underline text
- Grow
@@ -39,6 +40,20 @@
/*
+ Animate opacity to 100% on hover by adding the glow class.
+
+*/
+.glow {
+ transition: opacity .15s ease-in;
+}
+.glow:hover,
+.glow:focus {
+ opacity: 1;
+ transition: opacity .15s ease-in;
+}
+
+/*
+
Hide child & reveal on hover:
Put the hide-child class on a parent element and any nested element with the
@@ -116,10 +131,23 @@
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
+.shadow-hover {
+ cursor: pointer;
+ position: relative;
+ transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
.shadow-hover::after {
- box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, .2 );
+ content: '';
+ box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
opacity: 0;
- transition: opacity .25s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover:hover::after,
@@ -128,7 +156,7 @@
}
/* Combine with classes in skins and skins-pseudo for
- * thousands of different transition possibilities. */
+ * many different transition possibilities. */
.bg-animate,
.bg-animate:hover,
Oops, something went wrong.

0 comments on commit c246410

Please sign in to comment.