summaryrefslogtreecommitdiffstats
path: root/core/css
diff options
context:
space:
mode:
authorJohn Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>2017-01-12 15:18:21 +0100
committerJohn Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>2017-01-12 15:18:21 +0100
commit052eb98c1847a53657847740b9e3186a574b6532 (patch)
tree0ed9288b2a0c11c09de6eb677270bd1dfda74b3d /core/css
parent00c3f807db59f69cac37429f1b4be424720371e3 (diff)
downloadnextcloud-server-052eb98c1847a53657847740b9e3186a574b6532.tar.gz
nextcloud-server-052eb98c1847a53657847740b9e3186a574b6532.zip
Header scss optimisation
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'core/css')
-rw-r--r--core/css/header.scss189
1 files changed, 83 insertions, 106 deletions
diff --git a/core/css/header.scss b/core/css/header.scss
index 8035f7e568a..82f6f0baa1b 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -1,3 +1,10 @@
+/**
+ * @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ */
+
/* prevent ugly selection effect on accidental selection */
#header, #navigation, #expanddiv {
@@ -25,7 +32,6 @@
}
/* HEADERS ------------------------------------------------------------------ */
-
#body-user #header, #body-settings #header, #body-public #header {
position: fixed;
top: 0;
@@ -39,7 +45,6 @@
}
/* LOGO and APP NAME -------------------------------------------------------- */
-
#nextcloud {
position: absolute;
top: 0;
@@ -88,6 +93,16 @@
padding-top: 18px;
padding-right: 10px;
}
+ /* show caret indicator next to logo to make clear it is tappable */
+ .icon-caret {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ margin: 0;
+ margin-top: -21px;
+ padding: 0;
+ vertical-align: middle;
+ }
}
/* hover effect for app switcher label */
@@ -123,7 +138,6 @@
}
/* show appname next to logo */
-
.header-appname {
display: inline-block;
position: relative;
@@ -136,26 +150,14 @@
vertical-align: middle;
}
-/* show caret indicator next to logo to make clear it is tappable */
-#header .icon-caret {
- display: inline-block;
- width: 12px;
- height: 12px;
- margin: 0;
- margin-top: -21px;
- padding: 0;
- vertical-align: middle;
-}
/* do not show menu toggle on public share links as there is no menu */
-
#body-public #header .icon-caret {
display: none;
}
/* NAVIGATION --------------------------------------------------------------- */
-
#navigation {
position: fixed;
top: 45px;
@@ -170,6 +172,7 @@
border-top-left-radius: 0;
border-top-right-radius: 0;
display: none;
+ box-sizing: border-box;
/*overflow-y: auto;
overflow-x: hidden;*/
z-index: 2000;
@@ -185,37 +188,8 @@
border-bottom-color: rgba(255, 255, 255, 0.97);
border-width: 10px;
margin-left: -10px;
+ left: 47%;
}
-}
-
-/* arrow look */
-
-#expanddiv:after {
- bottom: 100%;
- border: solid transparent;
- content: ' ';
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(0, 0, 0, 0);
- border-bottom-color: rgba(255, 255, 255, 0.97);
- border-width: 10px;
- margin-left: -10px;
-}
-
-/* position of dropdown arrow */
-
-#navigation:after {
- left: 47%;
-}
-
-#expanddiv:after {
- right: 15px;
-}
-
-#navigation {
- box-sizing: border-box;
* {
box-sizing: border-box;
}
@@ -245,7 +219,10 @@
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
opacity: .5;
}
- &:hover svg, &:focus svg, &:hover span, &:focus span {
+ &:hover svg,
+ &:focus svg,
+ &:hover span,
+ &:focus span {
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
opacity: 1;
}
@@ -256,26 +233,30 @@
}
}
}
-}
-
-/* icon opacity and hover effect */
-
-#apps-management a {
- &:hover svg, &:focus svg, &.active svg, &:hover span, &:focus span, &.active span {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
- opacity: 1;
+ .app-icon {
+ margin: 0 auto;
+ padding: 0;
+ max-height: 32px;
+ max-width: 32px;
+ }
+ /* loading feedback for apps */
+ .app-loading {
+ .icon-loading-dark {
+ display: inline !important;
+ position: absolute;
+ top: 20px;
+ left: 24px;
+ width: 32px;
+ height: 32px;
+ }
+ .app-icon {
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+ opacity: 0;
+ }
}
-}
-
-#navigation .app-icon {
- margin: 0 auto;
- padding: 0;
- max-height: 32px;
- max-width: 32px;
}
/* Apps management */
-
#apps-management {
min-height: initial;
height: initial;
@@ -285,23 +266,16 @@
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
opacity: .3;
}
- }
-}
-
-/* loading feedback for apps */
-
-#navigation .app-loading {
- .icon-loading-dark {
- display: inline !important;
- position: absolute;
- top: 20px;
- left: 24px;
- width: 32px;
- height: 32px;
- }
- .app-icon {
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
- opacity: 0;
+ /* icon opacity and hover effect */
+ &:hover svg,
+ &:focus svg,
+ &.active svg,
+ &:hover span,
+ &:focus span,
+ &.active span {
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
}
}
@@ -313,7 +287,6 @@
/* USER MENU -----------------------------------------------------------------*/
/* info part on the right, used e.g. for info on who shared something */
-
.header-right {
position: absolute;
right: 0;
@@ -325,21 +298,6 @@
box-sizing: border-box;
}
-/* Profile picture in header */
-
-#header .avatardiv {
- float: left;
- display: inline-block;
- margin-right: 8px;
- cursor: pointer;
- height: 32px;
- width: 32px;
- img {
- opacity: 1;
- cursor: pointer;
- }
-}
-
#settings {
float: right;
color: #ddd;
@@ -352,6 +310,7 @@
}
}
+/* User menu on the right */
#expand {
display: block;
padding: 7px 30px 6px 10px;
@@ -374,6 +333,24 @@
.icon-caret {
margin-top: 0;
}
+
+ /* Profile picture in header */
+ .avatardiv {
+ float: left;
+ display: inline-block;
+ margin-right: 8px;
+ 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;
+ }
+ }
}
#expanddiv {
@@ -389,8 +366,19 @@
border-top-right-radius: 0;
box-sizing: border-box;
&:after {
+ /* position of dropdown arrow */
+ right: 15px;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: rgba(255, 255, 255, 1);
+ bottom: 100%;
+ border: solid transparent;
+ content: ' ';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-width: 10px;
+ margin-left: -10px;
}
a {
display: block;
@@ -410,14 +398,3 @@
}
}
}
-
-/* do not show display name when profile picture is present */
-
-#header {
- .avatardiv.avatardiv-shown + #expandDisplayName {
- display: none;
- }
- #expand {
- display: block;
- }
-}