Merge pull request #3026 from nextcloud/icons-scss-optimisation

Icons scss optimisation

1 files changed, 52 insertions, 60 deletions

diff --git a/core/css/icons.scss b/core/css/icons.scss
index 9afb5630181..b1f9cc6df67 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -1,3 +1,11 @@
+/**
+ * @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ */
+
+/* GLOBAL ------------------------------------------------------------------- */
 [class^='icon-'], [class*=' icon-'] {
 	background-repeat: no-repeat;
 	background-position: center;
@@ -5,99 +13,76 @@
 	min-height: 16px;
 }
 
-/* general assets */
-
 .icon-breadcrumb {
 	background-image: url('../img/breadcrumb.svg?v=1');
 }
 
+/* LOADING ------------------------------------------------------------------ */
 .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
 	position: relative;
+	&:after {
+		z-index: 2;
+		content: '';
+		height: 30px;
+		width: 30px;
+		margin: -16px 0 0 -16px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: 100%;
+		-webkit-animation: rotate .8s infinite linear;
+		animation: rotate .8s infinite linear;
+		-webkit-transform-origin: center;
+		-ms-transform-origin: center;
+		transform-origin: center;
+		border: 2px solid rgba(150, 150, 150, 0.5);
+		border-top-color: rgb(100, 100, 100);
+	}
 }
 
-.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
-	z-index: 2;
-	content: '';
-	height: 30px;
-	width: 30px;
-	margin: -16px 0 0 -16px;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	border-radius: 100%;
-	-webkit-animation: rotate .8s infinite linear;
-	animation: rotate .8s infinite linear;
-	-webkit-transform-origin: center;
-	-ms-transform-origin: center;
-	transform-origin: center;
-}
-
-.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
-	border: 2px solid rgba(150, 150, 150, 0.5);
-	border-top-color: rgb(100, 100, 100);
-}
-
-.icon-loading-dark:after, .icon-loading-small-dark:after {
+.icon-loading-dark:after,
+.icon-loading-small-dark:after {
 	border: 2px solid rgba(187, 187, 187, 0.5);
 	border-top-color: #bbb;
 }
 
-.icon-loading-small:after, .icon-loading-small-dark:after {
+.icon-loading-small:after,
+.icon-loading-small-dark:after {
 	height: 14px;
 	width: 14px;
 	margin: -8px 0 0 -8px;
 }
 
 /* Css replaced elements don't have ::after nor ::before */
-
-img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading {
-	background-image: url('../img/loading.gif');
-}
-
-img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark {
-	background-image: url('../img/loading-dark.gif');
-}
-
-img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small {
-	background-image: url('../img/loading-small.gif');
-}
-
-img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark {
-	background-image: url('../img/loading-small-dark.gif');
-}
-
-@-webkit-keyframes rotate {
-	from {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
+img, object, video, button, textarea, input, select {
+	.icon-loading {
+		background-image: url('../img/loading.gif');
 	}
-
-	to {
-		-webkit-transform: rotate(360deg);
-		transform: rotate(360deg);
+	.icon-loading-dark {
+		background-image: url('../img/loading-dark.gif');
+	}
+	.icon-loading-small {
+		background-image: url('../img/loading-small.gif');
+	}
+	.icon-loading-small-dark {
+		background-image: url('../img/loading-small-dark.gif');
 	}
 }
 
-
 @keyframes rotate {
 	from {
-		-webkit-transform: rotate(0deg);
 		transform: rotate(0deg);
 	}
-
 	to {
-		-webkit-transform: rotate(360deg);
 		transform: rotate(360deg);
 	}
 }
 
-
 .icon-32 {
 	background-size: 32px !important;
 }
 
-/* action icons */
-
+/* ICONS -------------------------------------------------------------------- */
 .icon-add {
 	background-image: url('../img/actions/add.svg?v=1');
 }
@@ -172,6 +157,14 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
 
 .icon-delete-white {
 	background-image: url('../img/actions/delete-white.svg?v=1');
+	&.no-permission {
+		&:hover, &:focus {
+			background-image: url('../img/actions/delete-white.svg?v=1');
+		}
+	}
+	&:hover, &:focus {
+		background-image: url('../img/actions/delete-hover.svg?v=1');
+	}
 }
 
 .icon-details {
@@ -407,8 +400,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
 	background-image: url('../img/actions/view-previous.svg?v=1');
 }
 
-/* places icons */
-
+/* PLACES ------------------------------------------------------------------- */
 .icon-calendar-dark {
 	background-image: url('../img/places/calendar-dark.svg?v=1');
 }