spinner stuff
This commit is contained in:
Devin Smith
parent
fd3398374c
commit
0b4c9ca5c7
@ -3714,7 +3714,7 @@ class scss_parser {
|
||||
$s = $this->seek();
|
||||
// self
|
||||
if ($this->literal("&", false)) {
|
||||
$parts[] = scssc::$selfSelector;
|
||||
$parts[] = Scss_Scss::$selfSelector;
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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(),
|
||||
'transform': 'scale('+scale+')'
|
||||
'width': elem.width()
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
};
|
||||
|
||||
20
www/assets/scss/seven.reset.scss
Normal file
20
www/assets/scss/seven.reset.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
110
www/assets/scss/seven.spinner.scss
Normal file
110
www/assets/scss/seven.spinner.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
@ -3180,9 +3180,10 @@ i {
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.inline-spinner {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
@include scale(2.5);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user