Merge pull request #3024 from nextcloud/apps-scss-optimisation

Apps scss optimisation

1 files changed, 232 insertions, 258 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8bb380ad0ae..6166a9b3326 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -1,3 +1,30 @@
+/**
+ * @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ */
+
+/* HEADING STYLING ---------------------------------------------------------- */
+
+h2 {
+	font-size: 20px;
+	font-weight: 300;
+	margin-bottom: 12px;
+	line-height: 140%;
+}
+h3 {
+	font-size: 15px;
+	font-weight: 300;
+	margin: 12px 0;
+}
+/* do not use italic typeface style, instead lighter color */
+em {
+	font-style: normal;
+	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
+	opacity: .5;
+}
+
 /* APP STYLING -------------------------------------------------------------- */
 
 #app {
@@ -39,13 +66,15 @@
 	&.without-app-settings {
 		padding-bottom: 0;
 	}
-	.active.with-menu > a, .with-counter > a {
+	.active.with-menu > a,
+	.with-counter > a {
 		padding-right: 50px;
 	}
 	.active.with-menu.with-counter > a {
 		padding-right: 90px;
 	}
-	.with-icon a, .app-navigation-entry-loading a {
+	.with-icon a,
+	.app-navigation-entry-loading a {
 		padding-left: 44px;
 		background-size: 16px 16px;
 		background-position: 14px center;
@@ -64,26 +93,15 @@
 		color: #000;
 		opacity: .57;
 	}
-	.active {
-		opacity: 1;
-		a {
-			opacity: 1;
-		}
-	}
-	li {
-		&:hover > a, &:focus > a {
-			opacity: 1;
-		}
-	}
-	a:focus {
+	li:hover > a,
+	li:focus > a,
+	a:focus,
+	.selected,
+	.selected a,
+	.active,
+	.active a {
 		opacity: 1;
 	}
-	.selected {
-		opacity: 1;
-		a {
-			opacity: 1;
-		}
-	}
 	.collapse {
 		display: none;
 		/* hide collapse button initially */
@@ -105,11 +123,15 @@
 			outline: none !important;
 			box-shadow: none;
 		}
-		&:hover > a, &:focus > a {
+		&:hover > a,
+		&:focus > a {
 			background-image: none;
 		}
-		&:hover > .collapse, &:focus > .collapse {
-			display: block;
+		&:hover,
+		&:focus {
+			> .collapse {
+				display: block;
+			}
 		}
 		.collapse {
 			-webkit-transform: rotate(-90deg);
@@ -128,6 +150,7 @@
 		}
 	}
 	> {
+		/* Second level nesting for lists */
 		ul ul {
 			display: none;
 			li > a {
@@ -135,20 +158,23 @@
 			}
 		}
 		.with-icon ul li {
-			> a, &.app-navigation-entry-loading > a {
+			> a,
+			&.app-navigation-entry-loading > a {
 				padding-left: 68px;
 				background-position: 44px center;
 			}
 		}
 	}
 	> ul .collapsible.open {
-		&:hover, &:focus {
+		&:hover,
+		&:focus {
 			box-shadow: inset 0 0 3px #ddd;
 		}
 		ul {
 			display: block;
 		}
 	}
+	/* Deleted entries with undo button */
 	.app-navigation-entry-deleted {
 		display: inline-block;
 		height: 44px;
@@ -178,6 +204,7 @@
 			opacity: 1;
 		}
 	}
+	/* counter and actions, legacy code */
 	.utils {
 		position: absolute;
 		padding: 7px 7px 0 0;
@@ -191,6 +218,7 @@
 			padding-top: 12px;
 		}
 	}
+	/* drag and drop */
 	.drag-and-drop {
 		-webkit-transition: padding-bottom 500ms ease 0s;
 		transition: padding-bottom 500ms ease 0s;
@@ -202,32 +230,34 @@
 	.app-navigation-separator {
 		border-bottom: 1px solid #ddd;
 	}
+
+	/**
+	 * App navigation utils, buttons and counters for drop down menu
+	 */
 	.app-navigation-entry-utils {
 		position: absolute;
 		top: 0;
 		right: 0;
 		z-index: 105;
 		ul {
-			display: block !important;
+			display: flex !important;
+			align-items: center;
+			justify-content: flex-end;
 		}
 		li {
-			float: left;
 			width: 44px !important;
 			height: 44px;
-			line-height: 44px;
 		}
 	}
 	.active > .app-navigation-entry-utils li {
 		display: inline-block;
 	}
 	.app-navigation-entry-utils button {
-		height: 38px;
-		width: 38px;
-		line-height: 38px;
-		float: left;
+		height: 100%;
+		width: 100%;
+		margin: 0;
 	}
 	.app-navigation-entry-utils-menu-button {
-		display: none;
 		button {
 			border: 0;
 			opacity: .5;
@@ -236,7 +266,8 @@
 			background-position: center;
 			background-image: url('../img/actions/more.svg?v=1');
 		}
-		&:hover button, &:focus button {
+		&:hover button,
+		&:focus button {
 			background-color: transparent;
 			opacity: 1;
 		}
@@ -253,109 +284,8 @@
 	.app-navigation-entry-utils ul, .app-navigation-entry-menu ul {
 		list-style-type: none;
 	}
-}
-
-/* Second level nesting for lists */
-
-/* Deleted entries with undo button */
-
-/* counter and actions, legacy code */
-
-/* drag and drop */
-
-/**
- * App navigation utils, buttons and counters for drop down menu
- */
-
-/* menu bubble / popover */
-
-.bubble, #app-navigation .app-navigation-entry-menu {
-	position: absolute;
-	background-color: #fff;
-	color: #333;
-	border-radius: 3px;
-	border-top-right-radius: 0;
-	z-index: 110;
-	margin: 5px;
-	margin-top: -5px;
-	right: 0;
-	-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-	-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-	-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
-}
-
-.ie {
-	.bubble, #app-navigation .app-navigation-entry-menu, .bubble:after, #app-navigation .app-navigation-entry-menu:after {
-		border: 1px solid #eee;
-	}
-}
-
-.edge {
-	.bubble, #app-navigation .app-navigation-entry-menu, .bubble:after, #app-navigation .app-navigation-entry-menu:after {
-		border: 1px solid #eee;
-	}
-}
-
-/* miraculous border arrow stuff */
-
-.bubble:after, #app-navigation .app-navigation-entry-menu:after {
-	bottom: 100%;
-	right: 6px;
-	/* change this to adjust the arrow position */
-	border: solid transparent;
-	content: ' ';
-	height: 0;
-	width: 0;
-	position: absolute;
-	pointer-events: none;
-}
-
-.bubble:after, #app-navigation .app-navigation-entry-menu:after {
-	border-color: rgba(238, 238, 238, 0);
-	border-bottom-color: #fff;
-	border-width: 10px;
-}
-
-.bubble .action {
-	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
-	filter: alpha(opacity = 50) !important;
-	opacity: .5 !important;
-	&:hover, &:focus, &.active {
-		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
-		filter: alpha(opacity = 100) !important;
-		opacity: 1 !important;
-	}
-}
-
-#app-navigation {
-	.app-navigation-entry-menu {
-		display: none;
-		&.open {
-			display: block;
-		}
-		ul {
-			display: block !important;
-		}
-		li {
-			float: left;
-			width: 38px !important;
-			button {
-				float: right;
-				width: 36px !important;
-				height: 36px;
-				line-height: 36px;
-				border: 0;
-				opacity: .5;
-				background-color: transparent;
-				&:hover, &:focus {
-					opacity: 1;
-					background-color: transparent;
-				}
-			}
-		}
-	}
+	
+	/* editing an entry */
 	.app-navigation-entry-edit {
 		padding-left: 5px;
 		padding-right: 5px;
@@ -372,7 +302,8 @@
 			float: left;
 			border: 1px solid rgba(190, 190, 190, 0.9);
 		}
-		button, input[type='submit'] {
+		button,
+		input[type='submit'] {
 			width: 36px;
 			height: 38px;
 			float: left;
@@ -386,18 +317,19 @@
 	}
 }
 
-/* list of options for an entry */
-
-/* editing an entry */
-
 /* APP-CONTENT ---------------------------------------------------------------*/
-
 /* Part where the content will be loaded into */
-
 #app-content {
 	position: relative;
 	height: 100%;
 	overflow-y: auto;
+	/* no top border for first settings item */
+	> .section:first-child {
+		border-top: none;
+	}
+	&.with-app-sidebar {
+		margin-right: 27%;
+	}
 }
 
 #app-content-wrapper {
@@ -412,7 +344,6 @@
 	 have it as first element within app-content in order to shrink other
 	 sibling containers properly. Compare Files app for example.
 */
-
 #app-sidebar {
 	position: fixed;
 	top: 45px;
@@ -430,27 +361,22 @@
 	overflow-y: auto;
 	visibility: visible;
 	z-index: 500;
-}
-
-#app-content.with-app-sidebar {
-	margin-right: 27%;
-}
-
-#app-sidebar.disappear {
-	visibility: hidden;
+	&.disappear {
+		visibility: hidden;
+	}
 }
 
 /* APP-SETTINGS ---------------------------------------------------------------*/
 
 /* settings area */
-
 #app-settings {
 	position: fixed;
 	width: 250px;
 	/* change to 100% when layout positions are absolute */
 	bottom: 0;
 	z-index: 140;
-	&.open #app-settings-content, &.opened #app-settings-content {
+	&.open #app-settings-content,
+	&.opened #app-settings-content {
 		display: block;
 	}
 }
@@ -465,6 +391,11 @@
 	border-right: 1px solid #eee;
 	width: 250px;
 	box-sizing: border-box;
+
+	/* display input fields at full width */
+	input[type='text'] {
+		width: 93%;
+	}
 }
 
 #app-settings-header {
@@ -473,12 +404,6 @@
 	box-sizing: border-box;
 }
 
-/* display input fields at full width */
-
-#app-settings-content input[type='text'] {
-	width: 93%;
-}
-
 .settings-button {
 	display: block;
 	height: 44px;
@@ -495,7 +420,8 @@
 	text-align: left;
 	padding-left: 42px;
 	font-weight: normal;
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		background-color: #fff;
 	}
 	&.opened {
@@ -505,18 +431,7 @@
 	}
 }
 
-/* buttons */
-
-button.loading {
-	background-image: url('../img/loading.gif');
-	background-position: right 10px center;
-	background-repeat: no-repeat;
-	background-size: 16px;
-	padding-right: 30px;
-}
-
-/* general styles for the content area */
-
+/* GENERAL SECTION ---------------------------------------------------------- */
 .section {
 	display: block;
 	padding: 30px;
@@ -525,8 +440,15 @@ button.loading {
 	&.hidden {
 		display: none !important;
 	}
+	/* slight position correction of checkboxes and radio buttons */
+	input {
+		&[type='checkbox'],
+		&[type='radio'] {
+			vertical-align: -2px;
+			margin-right: 4px;
+		}
+	}
 }
-
 .sub-section {
 	position: relative;
 	margin-top: 10px;
@@ -534,36 +456,6 @@ button.loading {
 	margin-bottom: 10px;
 }
 
-/* no top border for first settings item */
-
-#app-content > .section:first-child {
-	border-top: none;
-}
-
-/* heading styles */
-
-h2 {
-	font-size: 20px;
-	font-weight: 300;
-	margin-bottom: 12px;
-	line-height: 140%;
-}
-
-h3 {
-	font-size: 15px;
-	font-weight: 300;
-	margin: 12px 0;
-}
-
-/* slight position correction of checkboxes and radio buttons */
-
-.section input {
-	&[type='checkbox'], &[type='radio'] {
-		vertical-align: -2px;
-		margin-right: 4px;
-	}
-}
-
 .appear {
 	opacity: 1;
 	-webkit-transition: opacity 500ms ease 0s;
@@ -576,16 +468,7 @@ h3 {
 	}
 }
 
-/* do not use italic typeface style, instead lighter color */
-
-em {
-	font-style: normal;
-	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
-	opacity: .5;
-}
-
-/* generic dropdown style */
-
+/* DROPDOWN ----------------------------------------------------------------- */
 .dropdown {
 	background: #eee;
 	border-bottom-left-radius: 5px;
@@ -600,8 +483,7 @@ em {
 	padding: 16px;
 }
 
-/* generic tab styles */
-
+/* TABS --------------------------------------------------------------------- */
 .tabHeaders {
 	display: inline-block;
 	margin: 15px;
@@ -632,7 +514,6 @@ em {
 		}
 	}
 }
-
 .tabsContainer {
 	clear: left;
 	.tab {
@@ -640,50 +521,143 @@ em {
 	}
 }
 
-/* popover menu styles (use together with 'bubble' class) */
+/* POPOVER MENU ------------------------------------------------------------- */
+.ie,
+.edge {
+	.bubble, .bubble:after,
+	.popovermenu, .popovermenu:after,
+	#app-navigation .app-navigation-entry-menu,
+	#app-navigation .app-navigation-entry-menu:after {
+		border: 1px solid #eee;
+	}
+}
 
+.bubble,
+.app-navigation-entry-menu,
 .popovermenu {
-	.menuitem {
-		cursor: pointer;
-		vertical-align: middle;
-		> span {
-			cursor: pointer;
-			vertical-align: middle;
-		}
-		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
-		filter: alpha(opacity = 50);
-		opacity: .5;
-		&:hover, &:focus, &.active {
-			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-			filter: alpha(opacity = 100);
-			opacity: 1;
-		}
-		img {
-			padding: initial;
-		}
-	}
-	a.menuitem, label.menuitem, .menuitem {
-		padding: 10px !important;
-		width: auto;
-	}
-	&.hidden {
-		display: none;
+	position: absolute;
+	background-color: #fff;
+	color: #333;
+	border-radius: 3px;
+	border-top-right-radius: 0;
+	z-index: 110;
+	margin: 5px;
+	margin-top: -5px;
+	right: 0;
+	-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	display: none;
+
+	&:after {
+		bottom: 100%;
+	 /* Min-width of popover is 36px and arrow width is 20px
+		wich leaves us 8px right and 8px left */
+		right: 8px;
+		/* change this to adjust the arrow position */
+		border: solid transparent;
+		content: ' ';
+		height: 0;
+		width: 0;
+		position: absolute;
+		pointer-events: none;
+		border-color: rgba(238, 238, 238, 0);
+		border-bottom-color: #fff;
+		border-width: 10px;
+	}
+	/* Center the popover */
+	&.menu-center {
+		transform: translateX(50%);
+		right: 50%;
+		margin-right: 0;
+		border-top-right-radius: 3px;
+		&:after {
+			right: 50%;
+			transform: translateX(50%);
+		}
+	}
+	/* Align the popover to the left */
+	&.menu-left {
+		right: auto;
+		left: 0;
+		margin-right: 0;
+		border-top-left-radius: 0;
+		border-top-right-radius: 3px;
+		&:after {
+			left: 6px;
+			right: auto;
+		}
+	}
+
+	&.open {
+		display: block;
 	}
-	.menuitem {
+
+	ul {
+		/* Overwrite #app-navigation > ul ul */
 		display: flex !important;
-		line-height: 30px;
-		color: #000;
-		align-items: center;
-		.icon, .no-icon {
-			display: inline-block;
-			width: 16px;
-			height: 16px;
-			margin-right: 10px;
-			vertical-align: middle;
-		}
-		opacity: 0.5;
+		flex-direction: column;
 	}
-	li:hover .menuitem {
-		opacity: 1;
+	li {
+		display: flex;
+		> button,
+		> a {
+			cursor: pointer;
+			line-height: 36px;
+			border: 0;
+			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
+			filter: alpha(opacity = 50) !important;
+			opacity: .5 !important;
+			background-color: transparent;
+			display: flex;
+			align-items: center;
+			width: auto;
+			height: auto;
+			margin: 0;
+			font-weight: inherit;
+			/* prevent .action class to break the design */
+			&.action {
+				padding: inherit !important;
+			}
+			&:hover, &:focus {
+				-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
+				filter: alpha(opacity = 100) !important;
+				opacity: 1 !important;
+				background-color: transparent;
+			}
+			> span {
+				cursor: pointer;
+			}
+			> p {
+				width: 150px;
+				line-height: 1.6em;
+				padding: 8px 0;
+				> span {
+					-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)' !important;
+					filter: alpha(opacity = 70) !important;
+					opacity: .7 !important;
+				}
+			}
+			/* Add padding if contains icon+text */
+			&:not(:empty) {
+				padding: 0 !important;
+				padding-right: 10px !important;
+			}
+			> img {
+				width: 16px;
+				padding: 0 10px;
+			}
+		}
+		[class^='icon-'],
+		[class*=' icon-']{
+			/* Keep padding to define the width to
+			 assure correct position of a possible text */
+			padding: 18px 0 18px 36px;
+			min-width: 0; /* Overwrite icons*/
+			min-height: 0;
+			background-position: 10px center
+		}
 	}
 }