diff options
| author | Darin Dimitroff <d@thecrazyones.agency> | 2017-01-02 16:09:21 +0200 |
|---|---|---|
| committer | Darin Dimitroff <d@thecrazyones.agency> | 2017-01-02 16:09:21 +0200 |
| commit | 20d33818a838a7c022456d5620d255283531ba97 (patch) | |
| tree | 7ea19ac7b847c10f2783a5b50f956f1e3ed5cbd6 /src/css/imports/_hovers.css | |
| parent | 4ad2ee71fbecb4dcef47319e3cbbe18b57cd1c61 (diff) | |
WIP
Diffstat (limited to 'src/css/imports/_hovers.css')
| -rwxr-xr-x | src/css/imports/_hovers.css | 86 |
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; -} |
