aboutsummaryrefslogtreecommitdiffstats
path: root/src/less/components/menus.less
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2017-11-18 19:30:26 +1100
committerSam Potts <sam@potts.es>2017-11-18 19:30:26 +1100
commit6984d6fb1606a71edd35ac043ac1116b6de8e98b (patch)
tree1dc18a90bb2870b3c4665e40a3dcaeb75f3bb831 /src/less/components/menus.less
parentd7a1c4428138d2dd5af09e41e998d1e08dafe76e (diff)
downloadplyr-6984d6fb1606a71edd35ac043ac1116b6de8e98b.tar.lz
plyr-6984d6fb1606a71edd35ac043ac1116b6de8e98b.tar.xz
plyr-6984d6fb1606a71edd35ac043ac1116b6de8e98b.zip
Controls cleanup, work on captions bug, click to invert time
Diffstat (limited to 'src/less/components/menus.less')
-rw-r--r--src/less/components/menus.less38
1 files changed, 36 insertions, 2 deletions
diff --git a/src/less/components/menus.less b/src/less/components/menus.less
index a679e69b..f96393e0 100644
--- a/src/less/components/menus.less
+++ b/src/less/components/menus.less
@@ -129,11 +129,45 @@
}
label.plyr__control {
- padding-left: ceil(@plyr-control-padding * 2.5);
+ padding-left: @plyr-control-padding;
- input[type='radio'] {
+ /*input[type='radio'] {
position: relative;
left: -@plyr-control-padding;
+ }*/
+
+ input[type='radio'] + span {
+ position: relative;
+ display: block;
+ height: 14px;
+ width: 14px;
+ border-radius: 100%;
+ background: fade(#000, 10%);
+ margin-right: @plyr-control-spacing;
+ box-shadow: inset 0 1px 1px fade(#000, 15%);
+
+ &::after {
+ content: '';
+ position: absolute;
+ height: 6px;
+ width: 6px;
+ top: 4px;
+ left: 4px;
+ transform: scale(0);
+ opacity: 0;
+ background: #fff;
+ border-radius: 100%;
+ transition: transform 0.3s ease, opacity 0.3s ease;
+ }
+ }
+
+ input[type='radio']:checked + span {
+ background: @plyr-color-main;
+
+ &::after {
+ transform: scale(1);
+ opacity: 1;
+ }
}
}