WIP

1 files changed, 83 insertions, 0 deletions

diff --git a/src/css/imports/_states.css b/src/css/imports/_states.css
new file mode 100755
index 0000000..f8f22a7
--- /dev/null
+++ b/src/css/imports/_states.css
@@ -0,0 +1,83 @@
+/* Focus states */
+input:focus, textarea:focus a:focus {
+  box-shadow: 0 0 0 2px var(--primary);
+  outline: 0;
+}
+
+button:focus {
+  box-shadow: 0 0 0 4px var(--primary);
+  outline: 0;
+}
+
+.raise {
+  transition: var(--hover-transition);
+  transform: translateY(0) translateZ(0);
+}
+
+.raise:hover,
+.raise:focus {
+  transition: var(--hover-transition);
+  transform: translateY(-.12rem) translateZ(0);
+}
+
+.raise:active {
+  transition: var(--hover-transition);
+  opacity: .5;
+}
+
+.hide-child .child {
+  opacity: 0;
+  transition: opacity .15s ease-in;
+}
+.hide-child:hover  .child,
+.hide-child:focus  .child,
+.hide-child:active .child {
+  opacity: 1;
+  transition: opacity .15s ease-in;
+}
+
+.underline-hover:hover,
+.underline-hover:focus {
+  text-decoration: underline;
+}
+
+/* Can combine this with overflow-hidden to make background images grow on hover
+ * even if you are using background-size: cover */
+
+.grow {
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform 0.25s ease-out;
+}
+
+.grow:hover,
+.grow:focus {
+  transform: scale(1.05);
+}
+
+.grow:active {
+  transform: scale(.90);
+}
+
+.grow-large {
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform .25s ease-in-out;
+}
+
+.grow-large:hover,
+.grow-large:focus {
+  transform: scale(1.2);
+}
+
+.grow-large:active {
+  transform: scale(.95);
+}
+
+/* Add pointer on hover */
+
+.pointer:hover {
+  cursor: pointer;
+}