1 files changed, 155 insertions, 0 deletions
diff --git a/src/less/components/menus.less b/src/less/components/menus.less
new file mode 100644
index 00000000..52b735de
--- /dev/null
+++ b/src/less/components/menus.less
@@ -0,0 +1,155 @@
+// --------------------------------------------------------------
+// Menus
+// --------------------------------------------------------------
+
+.plyr__menu {
+    position: relative;
+
+    // Animate the icon
+    .plyr__control svg {
+        transition: transform 0.3s ease;
+    }
+    .plyr__control[aria-expanded='true'] {
+        svg {
+            transform: rotate(45deg);
+        }
+
+        // Hide tooltip
+        .plyr__tooltip {
+            display: none;
+        }
+    }
+
+    // The actual menu container
+    &__container {
+        position: absolute;
+        z-index: 1;
+        bottom: 100%;
+        right: -3px;
+        margin-bottom: 10px;
+        animation: plyr-popup 0.2s ease;
+        background: @plyr-menu-bg;
+        border-radius: 4px;
+        box-shadow: 0 1px 2px fade(#000, 20%);
+        white-space: nowrap;
+        text-align: left;
+        color: @plyr-menu-color;
+        font-size: @plyr-font-size-small;
+
+        > div {
+            overflow: hidden;
+            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        // Arrow
+        &::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            right: 15px;
+            height: 0;
+            width: 0;
+            border: 4px solid transparent;
+            border-top-color: @plyr-menu-bg;
+        }
+
+        ul {
+            margin: 0;
+            padding: @plyr-control-padding;
+            list-style: none;
+            overflow: hidden;
+        }
+
+        // Options
+        .plyr__control {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
+            color: @plyr-menu-color;
+            font-weight: @plyr-font-weight-bold;
+            user-select: none;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                border: 4px solid transparent;
+                transition: border-color 0.2s ease;
+            }
+
+            &--forward {
+                padding-right: ceil(@plyr-control-padding * 4);
+
+                &::after {
+                    right: 5px;
+                    border-left-color: fade(@plyr-menu-color, 80%);
+                }
+
+                &.tab-focus::after,
+                &:hover::after {
+                    border-left-color: currentColor;
+                }
+            }
+
+            &--back {
+                position: relative;
+                @horizontal-padding: (@plyr-control-padding * 2);
+
+                width: ~'calc(100% - @{horizontal-padding})';
+                margin: @plyr-control-padding;
+                margin-bottom: floor(@plyr-control-padding / 2);
+                padding-left: ceil(@plyr-control-padding * 4);
+                font-weight: @plyr-font-weight-normal;
+
+                &::after {
+                    left: @plyr-control-padding;
+                    border-right-color: fade(@plyr-menu-color, 80%);
+                }
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 100%;
+                    left: 0;
+                    right: 0;
+                    height: 1px;
+                    overflow: hidden;
+                    margin-top: ceil(@plyr-control-padding / 2);
+                    background: fade(#000, 15%);
+                    box-shadow: 0 1px 0 fade(#fff, 10%);
+                }
+
+                &.tab-focus::after,
+                &:hover::after {
+                    border-right-color: currentColor;
+                }
+            }
+        }
+
+        label.plyr__control {
+            padding-left: ceil(@plyr-control-padding * 2.5);
+
+            input[type='radio'] {
+                position: relative;
+                left: -@plyr-control-padding;
+            }
+        }
+
+        // Option value
+        .plyr__menu__value {
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+            padding-left: ceil(@plyr-control-padding * 3.5);
+            pointer-events: none;
+            overflow: hidden;
+            font-weight: @plyr-font-weight-normal;
+
+            .plyr__badge {
+                font-weight: @plyr-font-weight-bold;
+            }
+        }
+    }
+}