diff options
-rw-r--r-- | client/src/app/app.component.html | 2 | ||||
-rw-r--r-- | client/src/sass/application.scss | 1 | ||||
-rw-r--r-- | client/src/sass/loading-bar.scss | 94 |
3 files changed, 1 insertions, 96 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index b66c9afde..9a8a8e14f 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html | |||
@@ -41,7 +41,7 @@ | |||
41 | </div> | 41 | </div> |
42 | </div> | 42 | </div> |
43 | 43 | ||
44 | <ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar> | 44 | <ngx-loading-bar [includeSpinner]="false" color="var(--mainColor)"></ngx-loading-bar> |
45 | 45 | ||
46 | <my-confirm></my-confirm> | 46 | <my-confirm></my-confirm> |
47 | 47 | ||
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index eacfad30b..9668da39d 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss | |||
@@ -10,7 +10,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
10 | 10 | ||
11 | $assets-path: '../../assets/'; | 11 | $assets-path: '../../assets/'; |
12 | @import './player/index'; | 12 | @import './player/index'; |
13 | @import './loading-bar'; | ||
14 | 13 | ||
15 | @import './bootstrap'; | 14 | @import './bootstrap'; |
16 | @import './primeng-custom'; | 15 | @import './primeng-custom'; |
diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss deleted file mode 100644 index d7c308911..000000000 --- a/client/src/sass/loading-bar.scss +++ /dev/null | |||
@@ -1,94 +0,0 @@ | |||
1 | @import '_mixins'; | ||
2 | // Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css | ||
3 | |||
4 | /* Make clicks pass-through */ | ||
5 | #loading-bar, | ||
6 | #loading-bar-spinner { | ||
7 | pointer-events: none; | ||
8 | -webkit-pointer-events: none; | ||
9 | -webkit-transition: 350ms linear all; | ||
10 | -moz-transition: 350ms linear all; | ||
11 | -o-transition: 350ms linear all; | ||
12 | transition: 350ms linear all; | ||
13 | color: pvar(--mainColor); | ||
14 | } | ||
15 | |||
16 | #loading-bar .bar { | ||
17 | -webkit-transition: width 350ms; | ||
18 | -moz-transition: width 350ms; | ||
19 | -o-transition: width 350ms; | ||
20 | transition: width 350ms; | ||
21 | |||
22 | background: pvar(--mainColor); | ||
23 | position: fixed; | ||
24 | z-index: z(loadbar); | ||
25 | top: 0; | ||
26 | left: 0; | ||
27 | width: 100%; | ||
28 | height: 2px; | ||
29 | border-bottom-right-radius: 1px; | ||
30 | border-top-right-radius: 1px; | ||
31 | } | ||
32 | |||
33 | /* Fancy blur effect */ | ||
34 | #loading-bar .peg { | ||
35 | position: absolute; | ||
36 | width: 70px; | ||
37 | right: 0; | ||
38 | top: 0; | ||
39 | height: 2px; | ||
40 | opacity: .45; | ||
41 | -moz-box-shadow: 1px 0 6px 1px; | ||
42 | -ms-box-shadow: 1px 0 6px 1px; | ||
43 | -webkit-box-shadow: 1px 0 6px 1px; | ||
44 | box-shadow: 1px 0 6px 1px; | ||
45 | color: inherit; | ||
46 | -moz-border-radius: 100%; | ||
47 | -webkit-border-radius: 100%; | ||
48 | border-radius: 100%; | ||
49 | } | ||
50 | |||
51 | #loading-bar-spinner { | ||
52 | display: block; | ||
53 | position: fixed; | ||
54 | z-index: z(loadbar); | ||
55 | top: 10px; | ||
56 | left: 10px; | ||
57 | } | ||
58 | |||
59 | #loading-bar-spinner .spinner-icon { | ||
60 | width: 14px; | ||
61 | height: 14px; | ||
62 | |||
63 | border: solid 2px transparent; | ||
64 | border-top-color: inherit; | ||
65 | border-left-color: inherit; | ||
66 | border-radius: 50%; | ||
67 | |||
68 | -webkit-animation: loading-bar-spinner 400ms linear infinite; | ||
69 | -moz-animation: loading-bar-spinner 400ms linear infinite; | ||
70 | -ms-animation: loading-bar-spinner 400ms linear infinite; | ||
71 | -o-animation: loading-bar-spinner 400ms linear infinite; | ||
72 | animation: loading-bar-spinner 400ms linear infinite; | ||
73 | } | ||
74 | |||
75 | @-webkit-keyframes loading-bar-spinner { | ||
76 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } | ||
77 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } | ||
78 | } | ||
79 | @-moz-keyframes loading-bar-spinner { | ||
80 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } | ||
81 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } | ||
82 | } | ||
83 | @-o-keyframes loading-bar-spinner { | ||
84 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } | ||
85 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } | ||
86 | } | ||
87 | @-ms-keyframes loading-bar-spinner { | ||
88 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } | ||
89 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } | ||
90 | } | ||
91 | @keyframes loading-bar-spinner { | ||
92 | 0% { transform: rotate(0deg); } | ||
93 | 100% { transform: rotate(360deg); } | ||
94 | } | ||