First Commit

hackatonApp/scss/common/common.styles.scss

@@ -0,0 +1,150 @@
+// General reset styles
+*
+{
+	color: $content-color;
+}
+
+.bar.app-top-bar
+{
+	background-color: $top-bar-bg;
+
+	.title
+	{
+		color: $top-bar-color !important;
+		*
+		{
+			color: $top-bar-color !important;
+		}
+	}
+
+	.button
+	{
+		color: $top-bar-color !important;
+		*
+		{
+			color: $top-bar-color !important;
+		}
+	}
+}
+
+// Preload images aux styles (ratios)
+// Auto generate ratios for the whole app (see: http://stackoverflow.com/a/18120181/1116959)
+@each $ratio in $pre-img-ratios {
+  .pre-img._#{nth($ratio, 1)}_#{nth($ratio, 2)}
+  {
+    // Conserve aspect ratio (see: http://stackoverflow.com/a/10441480/1116959)
+    width: 100%;
+    padding-bottom: #{(nth($ratio, 2) / nth($ratio, 1)) * 100}%;
+  }
+}
+
+.pre-img
+{
+  position: relative;
+  background-color: $pre-img-bg;
+
+	// If the image is rounded
+	&.rounded-image
+	{
+		border-radius: 50%;
+	}
+
+  &.finish-loading
+  {
+    background-color: transparent;
+    border: none;
+
+		img
+	  {
+			visibility: visible;
+			opacity: 1;
+	  }
+  }
+
+  img
+  {
+    position: absolute;
+		left: 0px;
+		top: 0px;
+		visibility: hidden;
+		opacity: 0;
+		@include transition(visibility 0s linear, opacity 0.5s linear);
+  }
+}
+
+// spinner-on-load
+@include keyframes(spin) {
+  from {
+    @include transform(rotate(0deg));
+  }
+  to {
+    @include transform(rotate(359deg));
+  }
+}
+.spinner-on-load
+{
+	position: absolute;
+	font-size: $spinner-size;
+	width: $spinner-size;
+	height: $spinner-size;
+	line-height: $spinner-size;
+  color: $spinner-color;
+	@include animation(spin 2s infinite linear);
+	@include calc(top, "50% - #{($spinner-size/2)}");
+	@include calc(left, "50% - #{($spinner-size/2)}");
+}
+ion-spinner.spinner-on-load
+{
+	@include animation(none);
+  stroke: $spinner-color;
+	width: $spinner-svg-size;
+  height: $spinner-svg-size;
+	line-height: inherit;
+	@include calc(top, "50% - #{($spinner-svg-size/2)}");
+	@include calc(left, "50% - #{($spinner-svg-size/2)}");
+}
+
+// Multimedia background
+.multi-bg-outer
+{
+  position: relative;
+  background-color: rgba(darken($multi-bg, 10%), 0.7);
+  height: 100%;
+  @include transition(all ease-in-out .3s);
+
+  background-size: cover;
+  background-repeat: no-repeat;
+  z-index: -2;
+
+  &.finish-loading
+  {
+    background-color: transparent;
+  }
+
+  .bg-overlay
+  {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: $overlay-bg;
+    z-index: -1;
+    opacity: 0.6;
+  }
+
+  .multi-bg
+  {
+    display: none;
+  }
+}
+
+.loading-container .loading
+{
+	background-color: $loading-background-color;
+  *
+  {
+    color: darken($loading-color, 5);
+		font-weight: 500;
+  }
+}

hackatonApp/scss/common/common.variables.scss

@@ -0,0 +1,21 @@
+// Images - Preload images
+$pre-img-bg: rgba(lighten(#666666, 15%), .25);
+// Images - Preload images - Spinner on load
+$spinner-size: 50px;
+$spinner-svg-size: 28px;
+$spinner-color: #FFFFFF;
+// Images - Multimedia background
+$multi-bg: darken(#666666, 30%);
+$overlay-bg: darken(#fcfcfc, 80%);
+
+$pre-img-ratios: ();
+
+// App colors
+$top-bar-bg: $theme-color-2;
+$top-bar-color: #FFFFFF;
+
+$loading-color: #FFFFFF;
+$loading-background-color: rgba(#444444, .9);
+
+$content-bg: #EAEAEA;
+$content-color: #444444;

hackatonApp/scss/common/theme.variables.scss

@@ -0,0 +1,14 @@
+// THEME 1
+$theme-color-1: #387ef5;
+$theme-color-2: #FF4C4C;
+$theme-color-3: #3E454C;
+
+// THEME 2
+// $theme-color-1: #633CA6;
+// $theme-color-2: #F4C447;
+// $theme-color-3: #414DA8;
+
+// THEME 3
+// $theme-color-1: #33AC6B;
+// $theme-color-2: #33779B;
+// $theme-color-3: #3E454C;