From ce38bedf0fbfa16c5f90849c9b0f278fb6191a78 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Tue, 16 Jun 2020 11:06:24 +0200
Subject: [PATCH] Make the menu button look/behave more like the login one
Same hover effect, padding and cleanup the CSS etc.
---
packages/auth/src/auth.js | 36 ++++++++++++++++++------------------
1 file changed, 18 insertions(+), 18 deletions(-)
diff --git a/packages/auth/src/auth.js b/packages/auth/src/auth.js
index 8f1915ec..3f53fcd2 100644
--- a/packages/auth/src/auth.js
+++ b/packages/auth/src/auth.js
@@ -373,39 +373,40 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
min-width: 150px;
}
- vpu-icon {
+ .menu-icon {
height: 1em;
width: 1em;
vertical-align: -0.1rem;
}
- .loginbox svg {
- width: 1.2em;
- height: 1.2em;
- top: 0.15em;
- position: relative;
- }
-
- .loginbox {
+ .login-box svg {
+ width: 1.1em;
+ height: 1.1em;
display: flex;
+ }
- align-items: center;
- padding: 0 0.1em;
+ .login-button {
+ padding: 0.3em 0.4em;
transition: background-color 0.15s, color 0.15s;
}
- .loginbox:hover {
+ .login-button:hover {
background-color: var(--vpu-dark);
color: var(--vpu-light);
cursor: pointer;
transition: none;
}
- .loginbox:hover svg path {
+ .login-box {
+ display: flex;
+ align-items: center;
+ }
+
+ .login-box:hover svg path {
fill: var(--vpu-light);
}
- .loginbox .label {
+ .login-box .label {
padding-left: 0.2em;
}
@@ -457,10 +458,9 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
return html`
<div class="dropdown" @click="${this.onDropdownClick}">
<a href="#">
- <div class="dropdown-trigger">
+ <div class="dropdown-trigger login-button">
<div class="name">${this.name}</div>
- <vpu-icon name="chevron-down" id="menu-chevron-icon"></vpu-icon>
-
+ <vpu-icon class="menu-icon" name="chevron-down" id="menu-chevron-icon"></vpu-icon>
</div>
</a>
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
@@ -500,7 +500,7 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
return html`
<a href="#" @click="${this.onLoginClicked}">
- <div class="loginbox">
+ <div class="login-box login-button">
<div class="icon">${unsafeHTML(loginSVG)}</div>
<div class="label">${i18n.t('login')}</div>
</div>
--
GitLab