aboutsummaryrefslogtreecommitdiffstats
path: root/core
diff options
context:
space:
mode:
authorJohn Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>2018-02-15 11:38:24 +0100
committerJohn Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>2018-03-04 14:12:28 +0100
commitc3016d3291c28fd7ca692044fff83437a372d991 (patch)
treed9a2f7e003666bf0fa28f0e7803173ab9477effc /core
parent6975cef00b3a0c0c6085949963cc29b6789507cd (diff)
downloadnextcloud-server-c3016d3291c28fd7ca692044fff83437a372d991.tar.gz
nextcloud-server-c3016d3291c28fd7ca692044fff83437a372d991.zip
New standard for top right header
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'core')
-rw-r--r--core/css/header.scss114
1 files changed, 64 insertions, 50 deletions
diff --git a/core/css/header.scss b/core/css/header.scss
index 7021762bf7f..d6fe3ccf983 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -74,13 +74,16 @@
#header {
/* Header menu */
.menu {
- top: 45px;
background-color: $color-main-background;
filter: drop-shadow(0 1px 10px $color-box-shadow);
border-radius: 0 0 3px 3px;
box-sizing: border-box;
z-index: 2000;
position: absolute;
+ max-width: 350px;
+ max-height: 280px;
+ right: 0;
+ top: 44px;
&:not(.popovermenu) {
display: none;
@@ -96,6 +99,7 @@
width: 0;
position: absolute;
pointer-events: none;
+ right: 13px;
}
}
.logo {
@@ -151,6 +155,25 @@
#header-right, .header-right {
justify-content: flex-end;
}
+
+ /* Right header standard */
+ .header-right {
+ > div,
+ > form {
+ position: relative;
+ > .menutoggle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 44px;
+ height: 44px;
+ cursor: pointer;
+ opacity: 0.6;
+ padding: 0;
+ margin: 0;
+ }
+ }
+ }
}
/* hover effect for app switcher label */
@@ -335,57 +358,52 @@ nav {
display: inline-block;
color: rgba($color-primary-text, 0.7);
cursor: pointer;
+ margin-right: 13px;
+ flex: 0 0 auto;
+
.icon-loading-small-dark {
display: inline-block;
margin-bottom: -3px;
margin-right: 6px;
background-size: 16px 16px;
}
- flex: 0 0 auto;
-}
-/* User menu on the right */
-#expand {
- position: relative;
- display: flex;
- align-items: center;
- padding: 7px 20px 6px 10px;
- cursor: pointer;
- * {
- cursor: pointer;
- }
- img {
- opacity: .7;
- margin-bottom: -2px;
- }
- &:hover,
- &:focus,
- &:active {
- color: $color-primary-text;
- img,
- #expandDisplayName {
- opacity: 1;
+ /* User menu on the right */
+ #expand {
+ opacity: 1; /* override icon opacity */
+ img {
+ opacity: .7;
+ margin-bottom: -2px;
+ }
+ &:hover,
+ &:focus,
+ &:active {
+ color: $color-primary-text;
+ img,
+ #expandDisplayName {
+ opacity: 1;
+ }
}
- }
- /* Profile picture in header */
- .avatardiv {
- cursor: pointer;
- height: 32px;
- width: 32px;
- img {
- opacity: 1;
+ /* Profile picture in header */
+ .avatardiv {
cursor: pointer;
+ height: 32px;
+ width: 32px;
+ img {
+ opacity: 1;
+ cursor: pointer;
+ }
+ /* do not show display name when profile picture is present */
+ &.avatardiv-shown + #expandDisplayName {
+ display: none;
+ }
}
- /* do not show display name when profile picture is present */
- &.avatardiv-shown + #expandDisplayName {
- display: none;
- }
- }
- #expandDisplayName {
- padding: 8px;
- opacity: .6;
+ #expandDisplayName {
+ padding: 8px;
+ opacity: .6;
+ }
}
}
@@ -412,22 +430,18 @@ nav {
}
#expanddiv {
- right: 13px;
- background: $color-main-background;
- &:after {
- /* position of dropdown arrow */
- right: 13px;
- }
a {
- display: block;
+ display: inline-flex;
+ align-items: center;
height: 40px;
color: $color-main-text;
- padding: 10px 12px 0;
+ padding: 12px;
box-sizing: border-box;
opacity: .7;
img {
- margin-bottom: -3px;
- margin-right: 6px;
+ margin-right: 9px;
+ height: 16px;
+ width: 16px;
}
&:hover,
&:focus,