diff options
| author | Sam <me@sampotts.me> | 2016-09-26 23:21:57 +1000 |
|---|---|---|
| committer | Sam <me@sampotts.me> | 2016-09-26 23:21:57 +1000 |
| commit | 1ad103c29fd5c92fc05c6a6d85c9d74e61b0fb54 (patch) | |
| tree | e14dd1bab9890d9b95e5e12e68cdf6275f27fff4 /src/less | |
| parent | ca37b4c9ac24b840a9e8e5930012c33da9a44682 (diff) | |
| download | plyr-1ad103c29fd5c92fc05c6a6d85c9d74e61b0fb54.tar.lz plyr-1ad103c29fd5c92fc05c6a6d85c9d74e61b0fb54.tar.xz plyr-1ad103c29fd5c92fc05c6a6d85c9d74e61b0fb54.zip | |
Menu animation
Diffstat (limited to 'src/less')
| -rw-r--r-- | src/less/plyr.less | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index 26c92b2d..5ba916cd 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -492,14 +492,21 @@ right: -5px; margin-bottom: 10px; animation: plyr-popup .2s ease; + background: @plyr-menu-bg; box-shadow: 0 1px 0 fade(#000, 20%); border-radius: 4px; + white-space: nowrap; text-align: left; color: @plyr-menu-color; font-size: @plyr-font-size-small; + > div { + overflow: hidden; + transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1); + } + // Arrow &::after { content: ""; @@ -516,6 +523,7 @@ margin: 0; padding: 5px; list-style: none; + overflow: hidden; } button { display: flex; @@ -575,6 +583,7 @@ margin-left: auto; padding-left: ceil(@plyr-control-padding * 3.5); pointer-events: none; + overflow: hidden; } // Option value @@ -591,6 +600,16 @@ color: @plyr-menu-bg; font-size: 10px; } + + // When animating between menus + &.is-resizing { + overflow: hidden; + transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1); + + ul { + //opacity: 0; + } + } } } |