diff options
| author | Sam Potts <sam@potts.es> | 2018-08-13 23:43:22 +1000 |
|---|---|---|
| committer | Sam Potts <sam@potts.es> | 2018-08-13 23:43:22 +1000 |
| commit | 1aeef8128895a97ba7f2f4e8f289efae4db5e9a9 (patch) | |
| tree | 7b297a93ee0b49af64600410645f61fd25d2b734 /src | |
| parent | 211ad6c8f59c3d48648f8be0bc1cde85fd72ea95 (diff) | |
| download | plyr-1aeef8128895a97ba7f2f4e8f289efae4db5e9a9.tar.lz plyr-1aeef8128895a97ba7f2f4e8f289efae4db5e9a9.tar.xz plyr-1aeef8128895a97ba7f2f4e8f289efae4db5e9a9.zip | |
Controls spacing improvements
Diffstat (limited to 'src')
| -rw-r--r-- | src/sass/components/controls.scss | 36 |
1 files changed, 19 insertions, 17 deletions
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss index bde8600b..41426e8b 100644 --- a/src/sass/components/controls.scss +++ b/src/sass/components/controls.scss @@ -18,18 +18,22 @@ > .plyr__control, .plyr__progress, .plyr__time, - .plyr__menu { + .plyr__menu, + .plyr__volume { margin-left: ($plyr-control-spacing / 2); + } - &:first-child, - &:first-child + [data-plyr='pause'] { - margin-left: 0; - margin-right: auto; - } + .plyr__menu + .plyr__control, + > .plyr__control + .plyr__menu, + > .plyr__control + .plyr__control, + .plyr__progress + .plyr__control { + margin-left: floor($plyr-control-spacing / 4); } - .plyr__volume { - margin-left: ($plyr-control-spacing / 2); + > .plyr__control:first-child, + > .plyr__control:first-child + [data-plyr='pause'] { + margin-left: 0; + margin-right: auto; } // Hide empty controls @@ -39,17 +43,12 @@ @media (min-width: $plyr-bp-sm) { > .plyr__control, + .plyr__menu, .plyr__progress, .plyr__time, - .plyr__menu { + .plyr__volume { margin-left: $plyr-control-spacing; } - - > .plyr__control + .plyr__control, - .plyr__menu + .plyr__control, - > .plyr__control + .plyr__menu { - margin-left: ($plyr-control-spacing / 2); - } } } @@ -72,12 +71,15 @@ bottom: 0; color: $plyr-video-control-color; left: 0; - padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing - $plyr-control-spacing; + padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2); position: absolute; right: 0; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; z-index: 3; + + @media (min-width: $plyr-bp-sm) { + padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing; + } } // Hide video controls |