spinner stuff

include/library/Scss/Scss.php

@@ -3714,7 +3714,7 @@ class scss_parser {
 			$s = $this->seek();
 			// self
 			if ($this->literal("&", false)) {
-				$parts[] = scssc::$selfSelector;
+				$parts[] = Scss_Scss::$selfSelector;
 				continue;
 			}
 

include/views/default/seven/frontend/location.phtml

@@ -12,7 +12,7 @@
 						</td>
 						<td>				
 							<button class="location-detect" ng-click="locEat()">
-								<span class="fa fa-location-arrow" ng-spinner="loadingLocation" data-spinner-color="#fff" data-spinner-scale="1.5" data-spinner-css='{"margin-left": "25%"}'></span>
+								<span class="fa fa-location-arrow" ng-spinner="loadingLocation" data-spinner-color="#fff" data-spinner-scale="1.5"></span>
 							</button>
 						</td>
 					</tr>

www/assets/js/controllers.js

@@ -444,7 +444,6 @@ NGApp.controller( 'RestaurantsCtrl', function ( $scope, $rootScope, $http, $loca
 		restaurant.isActive(
 			function( active ){
 				if( active ){
-					$scope.loadingRestaurant = false;
 					checkHours();
 				} else {
 					$scope.loadingRestaurant = false;

www/assets/js/directives.js

@@ -389,6 +389,8 @@ NGApp.directive('ngSpinner', function ($compile) {
 			var spin = '<svg width="'+(elem.width())+'px" height="'+(elem.height())+'px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(0 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(30 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.08333333333333333s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(60 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.16666666666666666s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(90 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.25s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(120 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.3333333333333333s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(150 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.4166666666666667s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(180 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(210 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5833333333333334s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(240 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.6666666666666666s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(270 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.75s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(300 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.8333333333333334s" repeatCount="indefinite"/></rect><rect  x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="'+color+'" transform="rotate(330 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.9166666666666666s" repeatCount="indefinite"/></rect></svg>';
 			var spinner = angular.element('<div class="inline-spinner"></div>');
 			var scaler = angular.element('<div class="inline-spinner-scaler"></div>');
+			var user = angular.element('<div class="inline-spinner-user"></div>');
+			var spinwrap = angular.element('<div class="inline-spinner-spinwrap"></div>');
 			var spinnerWrapper = angular.element('<div class="inline-spinner-wrapper"></div>');
 
 			scope.$watch(attr.ngSpinner, function(val) {
@@ -405,23 +407,25 @@ NGApp.directive('ngSpinner', function ($compile) {
 			});
 
 			scaler.css({
-				'margin-top': '-' + (elem.height()) + 'px',
+				'transform': 'scale('+scale+')',
+				'margin-top': '-' + elem.height() + 'px',
 				'height': elem.height(),
-				'width': elem.width(),
+				'width': elem.width()
-				'transform': 'scale('+scale+')'
 			});
 
 			if (css) {
-				scaler.css(css);
+				user.css(css);
 			}
 
+			spinwrap.append(user);
+			user.append(scaler);
 			scaler.append(spinner);
 			
             //spinner.insertAfter(elem);
 			//$compile(spinnerWrapper)(scope);
 			elem.replaceWith(spinnerWrapper);
 			spinnerWrapper.append(elem);
-			spinnerWrapper.append(scaler);
+			spinnerWrapper.append(spinwrap);
 			elem.addClass('inline-spinner-content');
 		}
 	};

www/assets/scss/seven.reset.scss

@@ -0,0 +1,20 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}

www/assets/scss/seven.scss

@@ -1,25 +1,8 @@
+@import 'seven.reset';
+@import 'seven.spinner';
+
 $link: #d74924;
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
 body {
 	line-height: 1;
 	font-size: 10px;
@@ -206,7 +189,6 @@ html {
 	border-bottom-right-radius:6px;
 	border: 2px solid #003f35;
 	font-size: 15px;
-	height: 2.7em;
 
 	color: #fff;
 	margin: 0 0 15px 0;
@@ -3936,45 +3918,3 @@ font-familt: "Museo Slab";
 	background-size: 100%;
 	margin: 0 auto;
 }
-
-
-
-@mixin transform($transforms) {
-	-moz-transform: $transforms;
-	-o-transform: $transforms;
-	-ms-transform: $transforms;
-	-webkit-transform: $transforms;
-	transform: $transforms;
-}
-
-@mixin scale ($deg) {
-	@include transform(scale($deg));
-}
-
-@mixin transition($transition) {
-	-moz-transition: $transition;
-	-o-transition: $transition;
-	-ms-transition: $transition;
-	-webkit-transition: $transition;
-	transition: $transition;
-}
-
-.inline-spinner {
-	opacity: 0;
-	position: absolute;
-	pointer-events: none;
-	overflow: hidden;
-	@include scale(2.5);
-}
-.inline-spinner-wrapper .inline-spinner, .inline-spinner-wrapper .inline-spinner-content {
-	@include transition(all 0.2s);
-}
-
-.inline-spinner-wrapper.loading .inline-spinner {
-	opacity: 1;
-	@include scale(1);
-}
-
-.inline-spinner-wrapper.loading .inline-spinner-content {
-	opacity: 0;
-}

www/assets/scss/seven.spinner.scss

@@ -0,0 +1,110 @@
+
+
+
+@mixin transform($transforms) {
+	-moz-transform: $transforms;
+	-o-transform: $transforms;
+	-ms-transform: $transforms;
+	-webkit-transform: $transforms;
+	transform: $transforms;
+}
+
+@mixin scale ($deg) {
+	@include transform(scale($deg));
+}
+
+@mixin transition($transition) {
+	-moz-transition: $transition;
+	-o-transition: $transition;
+	-ms-transition: $transition;
+	-webkit-transition: $transition;
+	transition: $transition;
+}
+
+.inline-spinner {
+	opacity: 0;
+	position: absolute;
+	pointer-events: none;
+	overflow: hidden;
+	@include scale(2.5);
+}
+.inline-spinner-wrapper .inline-spinner, .inline-spinner-wrapper .inline-spinner-content {
+	@include transition(all 0.2s);
+}
+
+.inline-spinner-wrapper.loading .inline-spinner {
+	opacity: 1;
+	@include scale(1);
+}
+
+.inline-spinner-wrapper.loading .inline-spinner-content {
+	opacity: 0;
+}
+
+.location-detect .inline-spinner-user {
+	margin-left: 25%;
+	margin-top: -4%;
+	position: absolute;
+}
+
+
+
+/*
+$spinner-color: #69717d !default;
+$spinner-size: 50px !default;
+
+@mixin absolute-center {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.overlay {
+  background: rgba(black, 0.9);
+  @include absolute-center;
+}
+
+.spinner {
+  font-size: $spinner-size;
+  position: relative;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  &.center {
+    @include absolute-center;
+  }
+  .spinner-blade {
+    position: absolute;
+    left: 0.4629em;
+    bottom: 0;
+    width: 0.074em;
+    height: 0.2777em;
+    border-radius: 0.5em;
+    background-color: transparent;
+    transform-origin: center -0.2222em;
+    animation: spinner-fade 1s infinite linear;
+    $animation-delay: 0s;
+    $blade-rotation: 0deg;
+    @for $i from 1 through 12 {
+      &:nth-child(#{$i}) {
+        animation-delay: $animation-delay;
+        transform: rotate($blade-rotation);
+        $blade-rotation: $blade-rotation + 30;
+        $animation-delay: $animation-delay + 0.083;
+      }
+    }
+  }
+}
+
+@keyframes spinner-fade {
+  0% {
+    background-color: $spinner-color;
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+*/

www/assets/scss/style.scss

@@ -3180,9 +3180,10 @@ i {
 	transition: $transition;
 }
 
+
+
 .inline-spinner {
 	opacity: 0;
-	position: absolute;
 	pointer-events: none;
 	overflow: hidden;
 	@include scale(2.5);