aboutsummaryrefslogtreecommitdiffstats
path: root/src/css/imports/_hovers.css
diff options
context:
space:
mode:
authorDarin Dimitroff <d@thecrazyones.agency>2017-01-02 16:09:21 +0200
committerDarin Dimitroff <d@thecrazyones.agency>2017-01-02 16:09:21 +0200
commit20d33818a838a7c022456d5620d255283531ba97 (patch)
tree7ea19ac7b847c10f2783a5b50f956f1e3ed5cbd6 /src/css/imports/_hovers.css
parent4ad2ee71fbecb4dcef47319e3cbbe18b57cd1c61 (diff)
WIP
Diffstat (limited to 'src/css/imports/_hovers.css')
-rwxr-xr-xsrc/css/imports/_hovers.css86
1 files changed, 0 insertions, 86 deletions
diff --git a/src/css/imports/_hovers.css b/src/css/imports/_hovers.css
deleted file mode 100755
index a10c718..0000000
--- a/src/css/imports/_hovers.css
+++ /dev/null
@@ -1,86 +0,0 @@
-@media (--breakpoint-large) {
- .raise {
- transform: none;
- transition: var(--hover-transition);
- }
- .raise:hover,
- .raise:focus {
- transform: translateY(-.1rem);
- transition: var(--hover-transition);
- }
- .raise:active {
- opacity: .5; transition: var(--hover-transition);
- }
-}
-
-/*
-
- Hide child & reveal on hover:
-
- Put the hide-child class on a parent element and any nested element with the
- child class will be hidden and displayed on hover or focus.
-
- <div class="hide-child">
- <div class="child"> Hidden until hover or focus </div>
- <div class="child"> Hidden until hover or focus </div>
- <div class="child"> Hidden until hover or focus </div>
- <div class="child"> Hidden until hover or focus </div>
- </div>
-*/
-
-.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;
-}