`fitWidth` for `video-miniature`, fluid grid (#2830)

[oweals/peertube.git] / client / src / app / shared / menu / top-menu-dropdown.component.scss

diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 77159532f64cc44196f969c9c51a31dd234afa7c..84dd7dce3375ae96db321147a8d2ff80c350c64a 100644 (file)
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .parent-entry {
   span[role=button] {
     cursor: pointer;
@@ -8,11 +11,46 @@
   }
 }
 
-/deep/ .dropdown-toggle::after {
+::ng-deep .dropdown-toggle::after {
   position: relative;
   top: 2px;
 }
 
-/deep/ .dropdown-menu {
+::ng-deep .dropdown-menu {
   margin-top: 0 !important;
 }
+
+.icon {
+  @include dropdown-with-icon-item;
+
+  top: -1px;
+}
+
+.sub-menu.no-scroll {
+  overflow-x: hidden;
+}
+
+.modal-body {
+  .hidden {
+    display: none;
+  }
+
+  a {
+    @include disable-default-a-behaviour;
+
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+
+    &.active {
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}