From f1ac63488c0050fec1c4d713d74db4f4ea944395 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 15 Apr 2021 13:43:50 +0200 Subject: Refactor menu css --- client/src/app/menu/menu.component.scss | 225 +++++++++++++------------------- 1 file changed, 94 insertions(+), 131 deletions(-) (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 729dbc6ee..00d1a1f69 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -5,7 +5,9 @@ $menu-link-icon-size: 22px; $menu-link-icon-margin-right: 18px; $footer-links-base-opacity: .8; -@mixin menu-link { +.menu-link { + @include disable-default-a-behaviour; + display: flex; align-items: center; padding-left: $menu-lateral-padding; @@ -91,32 +93,15 @@ menu { display: flex; align-items: center; justify-content: left; - - my-notification { - margin-left: auto; - margin-right: 15px; - } } } -.logged-in-more { - $main-radius: 25px; - - flex: 1; - margin-left: 13px; - border-radius: $main-radius; - transition: all .1s ease-in-out; - cursor: pointer; - - *, & { - line-height: 1; - } - - &.show { - background-color: rgba(255, 255, 255, 0.20); - box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); - } +my-notification { + margin-left: auto; + margin-right: 15px; +} +.logged-in-more { @mixin display-hints($is-mobile: false) { background-color: rgba(255, 255, 255, 0.15); @@ -130,6 +115,20 @@ menu { } } + $main-radius: 25px; + + flex: 1; + margin-left: 13px; + border-radius: $main-radius; + transition: all .1s ease-in-out; + cursor: pointer; + line-height: 1; + + &.show { + background-color: rgba(255, 255, 255, 0.20); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); + } + &:hover { @include display-hints; } @@ -140,13 +139,14 @@ menu { /* fill space when on mobile */ max-width: calc(100% - 80px); + .dropdown-toggle { max-width: 100%; } + .logged-in-info { max-width: calc(100% - 45px) !important; } - } .dropdown-toggle-indicator { @@ -175,35 +175,35 @@ menu { padding: 5px 7px; border-radius: $main-radius; } +} - my-account-avatar { - margin-right: 10px; - } +my-account-avatar { + margin-right: 10px; } .logged-in-info { max-width: 105px; flex-grow: 1; +} - .logged-in-display-name, - .logged-in-username { - @include ellipsis; - } +.logged-in-display-name, +.logged-in-username { + @include ellipsis; +} - .logged-in-display-name { - font-size: 16px; - font-weight: $font-semibold; - color: pvar(--menuForegroundColor); +.logged-in-display-name { + font-size: 16px; + font-weight: $font-semibold; + color: pvar(--menuForegroundColor); - @include disable-default-a-behaviour; - } + @include disable-default-a-behaviour; +} - .logged-in-username { - font-size: 13px; - color: #C6C6C6; - margin-top: 3px; - } +.logged-in-username { + font-size: 13px; + color: #C6C6C6; + margin-top: 3px; } .logged-in-menu { @@ -214,9 +214,6 @@ menu { line-height: $line-height-normal; a { - @include menu-link; - @include disable-default-a-behaviour; - $icon-size: 13px; $additional-margin: ($menu-link-icon-size - $icon-size) / 2; @@ -230,10 +227,6 @@ menu { // Keep aligned with other icons margin-left: $additional-margin; - - &[iconName="channel"] { - margin-top: -2px; - } } &.active, @@ -260,27 +253,22 @@ menu { .login-buttons-block { margin: 30px 25px 35px 25px; - .login-button { - @include peertube-button-link; - @include orange-button; - + > a { display: block; width: 100%; - margin-bottom: 10px; - } - .create-account-button { - @include peertube-button-link; - - display: block; - width: 100%; + :not(:last-child) { + margin-bottom: 10px; + } + } +} - color: #fff; - background-color: rgba(255, 255, 255, 0.25); +.create-account-button { + color: #fff; + background-color: rgba(255, 255, 255, 0.25); - &:hover { - background-color: rgba(255, 255, 255, 0.28); - } + &:hover { + background-color: rgba(255, 255, 255, 0.28); } } @@ -290,48 +278,30 @@ menu { margin-bottom: 15px; .block-title { + @include ellipsis; + text-transform: uppercase; font-weight: $font-bold; // Bold font-size: 13px; margin-bottom: 25px; margin-left: 26px; - - @include ellipsis; - margin-right: 30px; } a { - @include menu-link; - @include disable-default-a-behaviour; - min-height: 40px; - - my-global-icon { - &[iconName="playlists"] { - height: 24px; - width: 24px; - - margin-right: 16px; - } - - &[iconName="videos"] { - position: relative; - right: -1px; - } - } } } .footer { width: $menu-width; padding-bottom: 15px; +} - .bottom-links { - display: flex; - flex-direction: column; - padding: 0 $menu-lateral-padding; - } +.footer-bottom { + display: flex; + flex-direction: column; + padding: 0 $menu-lateral-padding; } .footer-links { @@ -340,7 +310,8 @@ menu { flex-wrap: wrap; } - a, span[role=button] { + a, + span[role=button] { display: inline-block; text-decoration: none; color: pvar(--menuForegroundColor); @@ -350,22 +321,6 @@ menu { font-weight: 500; line-height: 1.4rem; margin-right: 8px; - - &.inline-global-icon { - display: inline-flex; - align-items: center; - white-space: nowrap; - height: 1.4rem; - - my-global-icon { - @include apply-svg-color(pvar(--menuForegroundColor)); - - display: flex; - width: auto; - height: 90%; - margin-right: .2rem; - } - } } } @@ -395,32 +350,13 @@ menu { opacity: .4; } - my-global-icon { - &[iconName="cog"], - &[iconName="sign-out"] { - position: relative; - right: -2px; - height: 20px; - width: 20px; - } - } - - my-global-icon.not-displayed { - display: none; - } - &:hover { - my-global-icon.hover-display-toggle.not-displayed { - display: inherit; - } - my-global-icon.hover-display-toggle { + .hover-display-toggle { display: none; } - &.settings-sensitive { - my-global-icon ::ng-deep svg { - margin-top: 2px !important; - } + .hover-display-toggle[hidden] { + display: inherit !important; } } } @@ -440,7 +376,8 @@ menu { } } - .top-menu, .footer { + .top-menu, + .footer { width: 100% !important; } @@ -448,9 +385,35 @@ menu { width: calc(100vw - 30px); } - .dropdown-item:hover, .dropdown-item:active { + .dropdown-item:hover, + .dropdown-item:active { &.settings-sensitive my-global-icon ::ng-deep svg { margin-top: 0px !important; } } } + +my-global-icon { + &[iconName="playlists"] { + height: 24px; + width: 24px; + + margin-right: 16px; + } + + &[iconName="videos"] { + position: relative; + right: -1px; + } + + &[iconName="channel"] { + margin-top: -2px; + } + + &[iconName="sign-out"] { + position: relative; + right: -2px; + height: 20px; + width: 20px; + } +} -- cgit v1.2.3