Merge pull request #28 from csalmeida/themes-v4

Theme rewrite for ProtonMail v4

1 files changed, 76 insertions, 0 deletions

diff --git a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
new file mode 100644
index 0000000..0cf480b
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
@@ -0,0 +1,76 @@
+[aria-busy="true"] {
+	background-image: url(#{$path-images}loading-atom-smaller.svg);
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+}
+
+button[aria-busy="true"] {
+	padding-left: em(5);
+	padding-right: em(27);
+	background-image: url(#{$path-images}loading-atom-smaller-disabled.svg);
+	background-position: calc(100% - .25em) 50%;
+	background-size: 1.5em;
+	background-repeat: no-repeat;
+}
+
+.pm-button--small[aria-busy="true"] {
+	padding-left: em(2);
+	padding-right: em(22);
+	background-size: 1.25em;
+	background-position: calc(100% - .125em) 50%;
+}
+
+tr[aria-busy="true"] {
+	background-image: none;
+
+	td::after {
+		content: '\00a0'; // Force a height with default line height
+		pointer-events: none;
+		visibility: hidden;
+	}
+}
+
+tr[aria-busy="true"] td,
+td[aria-busy="true"] {
+	position: relative;
+	background-image: none;
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		background: var(--bgcolor-main-area, white) url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat;
+	}
+}
+
+svg[aria-busy="true"] {
+	& > * {
+		visibility: hidden;
+	}
+}
+
+.progressive[aria-busy="true"] {
+	position: relative;
+	background-image: none;
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		background-image: none;
+		animation: backgroundLoading 1s linear infinite alternate;
+	}
+}
+
+@keyframes backgroundLoading {
+	0% {
+		background-color: $white;
+	}
+	100% {
+		background-color: #eee;
+	}
+}