From: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Date: Thu, 22 Dec 2016 10:16:48 +0000 (+0100)
Subject: Header scss
X-Git-Tag: v12.0.0beta1~732^2~20
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=0b51bd0a3286d1a074442f86764e6cac00ba4102;p=nextcloud-server.git

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
index 00000000000..8035f7e568a
--- /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;
+	}
+}