diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 31ec686..adb47f5 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -6,6 +6,7 @@ $leaderboardHeight: 90px; $leaderboardHeightMobile: 50px; $playerHeight: 100px; $toolsBreakPoint: 472px; +$menuBreakpoint: 1180px; $head-color-height: 280px; $head-color-height-lg: 130px; diff --git a/assets/scss/global.scss b/assets/scss/global.scss index f621aed..d53b02d 100644 --- a/assets/scss/global.scss +++ b/assets/scss/global.scss @@ -127,8 +127,12 @@ section { } &:after { content: ''; - transition: height calc(var(--transition-duration) * 2), top calc(var(--transition-duration) * 2); - -webkit-transition: height calc(var(--transition-duration) * 2), top calc(var(--transition-duration) * 2); + transition: + height calc(var(--transition-duration) * 2), + top calc(var(--transition-duration) * 2); + -webkit-transition: + height calc(var(--transition-duration) * 2), + top calc(var(--transition-duration) * 2); //default alpha gradient background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.46) 100%); @@ -363,3 +367,104 @@ section { } @import 'cards'; + +// had to bring this entire file in because of the menu breakpoint +@media screen and (max-width: $menuBreakpoint) { + .p-menubar { + position: relative; + + .p-menubar-button { + display: flex; + width: $actionIconWidth; + height: $actionIconHeight; + color: $horizontalMenuRootMenuitemIconColor; + border-radius: $actionIconBorderRadius; + transition: $actionIconTransition; + + &:hover { + color: $horizontalMenuRootMenuitemIconHoverColor; + background: $horizontalMenuRootMenuitemHoverBg; + } + + &:focus { + @include focused(); + } + } + + .p-menubar-root-list { + position: absolute; + display: none; + padding: $verticalMenuPadding; + background: $overlayMenuBg; + border: $overlayMenuBorder; + box-shadow: $overlayMenuShadow; + width: 100%; + + .p-menu-separator { + border-top: $divider; + margin: $menuSeparatorMargin; + } + + .p-submenu-icon { + font-size: $menuitemSubmenuIconFontSize; + } + + > .p-menuitem { + width: 100%; + position: static; + + > .p-menuitem-link { + @include menuitem-link(); + + > .p-submenu-icon { + margin-left: auto; + transition: transform $transitionDuration; + } + } + + &.p-menuitem-active { + > .p-menuitem-link { + > .p-submenu-icon { + transform: rotate(-180deg); + } + } + } + } + + .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + + .p-submenu-icon { + transition: transform $transitionDuration; + transform: rotate(90deg); + } + + .p-menuitem-active { + > .p-menuitem-link { + > .p-submenu-icon { + transform: rotate(-90deg); + } + } + } + } + + .p-menuitem { + width: 100%; + position: static; + } + + @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10); + } + + &.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + } +} diff --git a/components/ListenersCta.vue b/components/ListenersCta.vue index 67ff31d..a96fdfa 100644 --- a/components/ListenersCta.vue +++ b/components/ListenersCta.vue @@ -1,12 +1,16 @@