From 052eb98c1847a53657847740b9e3186a574b6532 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 12 Jan 2017 15:18:21 +0100 Subject: [PATCH] Header scss optimisation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/header.scss | 189 +++++++++++++++++++------------------------ 1 file 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; - } -}