raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-01 02:03:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

loading-popup: improve style

Browse Source
This commit is contained in:
Sebastian Castro
2022-01-11 21:52:49 +01:00
parent 80342e258b
commit 0eb97f1cdc
2 changed files with 14 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/views/spree/layouts/admin/_progress_spinner.html.haml
View File

@@ -1,24 +1,4 @@
#progress
/ By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
%svg{:class => "spinner", :viewbox => "0 0 58 58", :xmlns => "http://www.w3.org/2000/svg"}
%g{:fill => "none", "fill-rule" => "evenodd"}
%g{:stroke => "currentColor", "stroke-width" => "1.5", :transform => "translate(2 1)"}
%circle{:cx => "42.601", :cy => "11.462", :fill => "currentColor", "fill-opacity" => "1", :r => "5"}
%animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "1;0;0;0;0;0;0;0"}
%circle{:cx => "49.063", :cy => "27.063", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
%animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;1;0;0;0;0;0;0"}
%circle{:cx => "42.601", :cy => "42.663", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
%animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;1;0;0;0;0;0"}
%circle{:cx => "27", :cy => "49.125", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
%animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;1;0;0;0;0"}
%circle{:cx => "11.399", :cy => "42.663", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
%animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;1;0;0;0"}
%circle{:cx => "4.938", :cy => "27.063", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
%animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;1;0;0"}
%circle{:cx => "11.399", :cy => "11.462", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
%animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;0;1;0"}
%circle{:cx => "27", :cy => "5", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
%animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;0;0;1"}
%i.spinner.fa.fa-spin.fa-circle-o-notch
= Spree.t(:loading)
\...

32
app/webpacker/css/admin/components/progress.scss
View File

@@ -1,28 +1,22 @@
// Loading throbber displayed when ajax request takes too long to complete
#progress {
@include border-radius(10px);
position: fixed;
top: -10px;
left: 50%;
z-index: 1000;
opacity: 0.8;
width: 200px;
background-color: $spree-blue;
color: $color-1;
display: none;
font-size: 120%;
@include border-radius(0 0 4px 4px);
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
background-color: $spree-blue;
color: #FFFFFF;
opacity: .8;
font-size: 1rem;
padding: .5rem 1rem;
font-weight: bold;
line-height: 40px;
margin-left: -100px;
padding-top: 15px;
text-align: center;
text-transform: uppercase;
.spinner {
position: absolute;
left: 50%;
width: 30px;
height: 30px;
top: -5px;
margin-left: -15px;
margin-right: 5px;
}
}