Header scss

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

diff --git a/core/css/header.scss b/core/css/header.scss
new file mode 100644 (file)
index 0000000..8035f7e
--- /dev/null
+++ b/core/css/header.scss
@@ -0,0 +1,423 @@
+/* prevent ugly selection effect on accidental selection */
+
+#header, #navigation, #expanddiv {
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+}
+
+/* removed until content-focusing issue is fixed */
+
+#skip-to-content a {
+       position: absolute;
+       left: -10000px;
+       top: auto;
+       width: 1px;
+       height: 1px;
+       overflow: hidden;
+       &:focus {
+               left: 76px;
+               top: -9px;
+               color: #fff;
+               width: auto;
+               height: auto;
+       }
+}
+
+/* HEADERS ------------------------------------------------------------------ */
+
+#body-user #header, #body-settings #header, #body-public #header {
+       position: fixed;
+       top: 0;
+       left: 0;
+       right: 0;
+       z-index: 2000;
+       height: 45px;
+       line-height: 2.5em;
+       background-color: #0082c9;
+       box-sizing: border-box;
+}
+
+/* LOGO and APP NAME -------------------------------------------------------- */
+
+#nextcloud {
+       position: absolute;
+       top: 0;
+       left: 0;
+       padding: 5px;
+       padding-bottom: 0;
+       height: 45px;
+       /* header height */
+       box-sizing: border-box;
+       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+       opacity: 1;
+       &:focus {
+               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
+               opacity: .75;
+       }
+       &:hover, &:active {
+               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+               opacity: 1;
+       }
+}
+
+#header {
+       .logo {
+               background-image: url('../img/logo-icon.svg?v=1');
+               background-repeat: no-repeat;
+               background-size: 175px;
+               background-position: center;
+               width: 252px;
+               height: 120px;
+               margin: 0 auto;
+       }
+       .logo-icon {
+               /* display logo so appname can be shown next to it */
+               display: inline-block;
+               background-image: url('../img/logo-icon.svg?v=1');
+               background-repeat: no-repeat;
+               background-position: center center;
+               width: 62px;
+               height: 34px;
+       }
+       .header-appname-container {
+               display: inline-block;
+               position: absolute;
+               left: 70px;
+               height: 27px;
+               padding-top: 18px;
+               padding-right: 10px;
+       }
+}
+
+/* hover effect for app switcher label */
+
+.header-appname-container .header-appname {
+       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
+       opacity: .75;
+}
+
+.menutoggle {
+       .icon-caret {
+               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
+               opacity: .75;
+       }
+       &:hover {
+               .header-appname, .icon-caret {
+                       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+                       opacity: 1;
+               }
+       }
+       &:focus {
+               .header-appname, .icon-caret {
+                       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+                       opacity: 1;
+               }
+       }
+       &.active {
+               .header-appname, .icon-caret {
+                       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+                       opacity: 1;
+               }
+       }
+}
+
+/* show appname next to logo */
+
+.header-appname {
+       display: inline-block;
+       position: relative;
+       color: #fff;
+       font-size: 16px;
+       font-weight: 300;
+       margin: 0;
+       margin-top: -24px;
+       padding: 7px 0 7px 5px;
+       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;
+       left: 10px;
+       width: 265px;
+       max-height: 85%;
+       margin-top: 0;
+       padding-bottom: 10px;
+       background-color: rgba(255, 255, 255, 0.97);
+       box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75);
+       border-radius: 3px;
+       border-top-left-radius: 0;
+       border-top-right-radius: 0;
+       display: none;
+       /*overflow-y: auto;
+       overflow-x: hidden;*/
+       z-index: 2000;
+       &: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;
+       }
+}
+
+/* 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;
+       }
+       li {
+               display: inline-block;
+       }
+       a {
+               position: relative;
+               width: 80px;
+               height: 80px;
+               display: inline-block;
+               text-align: center;
+               padding: 20px 0;
+               span {
+                       display: inline-block;
+                       font-size: 13px;
+                       padding-bottom: 0;
+                       padding-left: 0;
+                       width: 80px;
+                       text-align: center;
+                       color: #000;
+                       white-space: nowrap;
+                       overflow: hidden;
+                       text-overflow: ellipsis;
+               }
+               svg, span {
+                       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
+                       opacity: .5;
+               }
+               &:hover svg, &:focus svg, &:hover span, &:focus span {
+                       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+                       opacity: 1;
+               }
+               &.active {
+                       svg, span {
+                               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+                               opacity: 1;
+                       }
+               }
+       }
+}
+
+/* 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;
+       }
+}
+
+#navigation .app-icon {
+       margin: 0 auto;
+       padding: 0;
+       max-height: 32px;
+       max-width: 32px;
+}
+
+/* Apps management */
+
+#apps-management {
+       min-height: initial;
+       height: initial;
+       margin: 0;
+       a {
+               svg, span {
+                       -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;
+       }
+}
+
+#apps {
+       max-height: calc(100vh - 100px);
+       overflow: auto;
+}
+
+/* USER MENU -----------------------------------------------------------------*/
+
+/* info part on the right, used e.g. for info on who shared something */
+
+.header-right {
+       position: absolute;
+       right: 0;
+       padding: 7px 5px;
+       color: #fff;
+       height: 100%;
+       max-width: 80%;
+       white-space: nowrap;
+       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;
+       cursor: pointer;
+       .icon-loading-small-dark {
+               display: inline-block;
+               margin-bottom: -3px;
+               margin-right: 6px;
+               background-size: 16px 16px;
+       }
+}
+
+#expand {
+       display: block;
+       padding: 7px 30px 6px 10px;
+       cursor: pointer;
+       * {
+               cursor: pointer;
+       }
+       &:hover, &:focus, &:active {
+               color: #fff;
+       }
+       img {
+               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
+               opacity: .7;
+               margin-bottom: -2px;
+       }
+       &:hover img, &:focus img, &:active img {
+               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+               opacity: 1;
+       }
+       .icon-caret {
+               margin-top: 0;
+       }
+}
+
+#expanddiv {
+       position: absolute;
+       right: 13px;
+       top: 45px;
+       z-index: 2000;
+       display: none;
+       background: rgb(255, 255, 255);
+       box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75);
+       border-radius: 3px;
+       border-top-left-radius: 0;
+       border-top-right-radius: 0;
+       box-sizing: border-box;
+       &:after {
+               border-color: rgba(0, 0, 0, 0);
+               border-bottom-color: rgba(255, 255, 255, 1);
+       }
+       a {
+               display: block;
+               height: 40px;
+               color: #000;
+               padding: 4px 12px 0;
+               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
+               opacity: .5;
+               box-sizing: border-box;
+               img {
+                       margin-bottom: -3px;
+                       margin-right: 6px;
+               }
+               &:hover, &:focus, &:active, &.active {
+                       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+                       opacity: 1;
+               }
+       }
+}
+
+/* do not show display name when profile picture is present */
+
+#header {
+       .avatardiv.avatardiv-shown + #expandDisplayName {
+               display: none;
+       }
+       #expand {
+               display: block;
+       }
+}