aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/menu.component.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu/menu.component.scss')
-rw-r--r--client/src/app/menu/menu.component.scss133
1 files changed, 110 insertions, 23 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index e79ecb5c7..89dc26e87 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -88,47 +88,118 @@ menu {
88 height: 80px; 88 height: 80px;
89 display: flex; 89 display: flex;
90 align-items: center; 90 align-items: center;
91 justify-content: center; 91 justify-content: left;
92 92
93 .logged-in-info { 93 .logged-in-more {
94 @include ellipsis; 94 $main-radius: 25px;
95 95
96 flex-grow: 1; 96 margin-left: 13px;
97 border-radius: $main-radius;
98 transition: all .1s ease-in-out;
99 cursor: pointer;
97 100
98 .logged-in-display-name { 101 *, & {
99 font-size: 16px; 102 line-height: 1;
100 font-weight: $font-semibold; 103 }
101 color: pvar(--menuForegroundColor);
102 cursor: pointer;
103 104
104 @include disable-default-a-behaviour; 105 &.show {
106 background-color: rgba(255, 255, 255, 0.20);
107 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
105 } 108 }
106 109
107 .logged-in-username { 110 @mixin display-hints($is-mobile: false) {
108 @include ellipsis; 111 background-color: rgba(255, 255, 255, 0.15);
109 112
110 font-size: 13px; 113 @if $is-mobile {
111 color: #C6C6C6; 114 .dropdown-toggle-indicator {
112 max-width: 140px; 115 display: inherit !important;
113 cursor: pointer; 116 }
117 .dropdown-toggle:first-child {
118 padding-right: 30px !important;
119 }
120 }
114 } 121 }
115 }
116 122
117 .logged-in-more { 123 &:hover {
118 margin-right: 20px; 124 @include display-hints;
125 }
119 126
120 my-global-icon.dropdown-toggle { 127 /* smartphones and touchscreens */
121 cursor: pointer; 128 @media (hover: none) and (pointer: coarse) {
129 @include display-hints($is-mobile: true);
122 130
131 /* fill space when on mobile */
132 max-width: calc(100% - 80px);
133 .dropdown-toggle {
134 max-width: 100%;
135 }
136 .logged-in-info {
137 max-width: calc(100% - 45px) !important;
138 }
139
140 }
141
142 .dropdown-toggle-indicator {
143 position: relative;
144 width: 0;
145 display: none;
146
147 span {
148 position: absolute;
149 right: -35px;
150 top: -8px;
151 color: grey;
152 width: $main-radius;
153 }
154 }
155
156 .dropdown-toggle {
123 &::after { 157 &::after {
124 border: none; 158 border: none;
125 } 159 }
160 }
126 161
127 ::ng-deep { 162 .dropdown-toggle:first-child {
128 @include apply-svg-color(pvar(--menuForegroundColor)); 163 display: inline-flex;
164 align-items: center;
165 padding: 5px 7px;
166 }
167
168 img {
169 @include avatar(34px);
170
171 margin-right: 10px;
172 }
173
174 .logged-in-info {
175 max-width: 105px;
176
177 flex-grow: 1;
178
179 .logged-in-display-name,
180 .logged-in-username {
181 @include ellipsis;
182 }
183
184 .logged-in-display-name {
185 font-size: 16px;
186 font-weight: $font-semibold;
187 color: pvar(--menuForegroundColor);
188
189 @include disable-default-a-behaviour;
190 }
191
192 .logged-in-username {
193 font-size: 13px;
194 color: #C6C6C6;
129 } 195 }
130 } 196 }
131 } 197 }
198
199 my-notification {
200 margin-left: auto;
201 margin-right: 15px;
202 }
132 } 203 }
133 204
134 .logged-in-menu { 205 .logged-in-menu {
@@ -343,6 +414,12 @@ menu {
343 my-global-icon.hover-display-toggle { 414 my-global-icon.hover-display-toggle {
344 display: none; 415 display: none;
345 } 416 }
417
418 &.settings-sensitive {
419 my-global-icon ::ng-deep svg {
420 margin-top: 2px !important;
421 }
422 }
346 } 423 }
347} 424}
348 425
@@ -364,4 +441,14 @@ menu {
364 .top-menu, .footer { 441 .top-menu, .footer {
365 width: 100% !important; 442 width: 100% !important;
366 } 443 }
444
445 .dropdown-menu {
446 width: calc(100vw - 30px);
447 }
448
449 .dropdown-item:hover, .dropdown-item:active {
450 &.settings-sensitive my-global-icon ::ng-deep svg {
451 margin-top: 0px !important;
452 }
453 }
367} 454}