diff --git a/demos/src/loading/app.component.ts b/demos/src/loading/app.component.ts index 978c7a9b2e..208eb78778 100644 --- a/demos/src/loading/app.component.ts +++ b/demos/src/loading/app.component.ts @@ -2,7 +2,8 @@ import { Component } from '@angular/core'; import { LoadingController, NavController } from 'ionic-angular'; @Component({ - templateUrl: 'page.html' + templateUrl: 'page.html', + styleUrls: ['style.css'] }) export class Page1 { constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {} diff --git a/src/components/loading/test/basic/app-module.ts b/src/components/loading/test/basic/app-module.ts index f05a10fd3e..2a5bf713a9 100644 --- a/src/components/loading/test/basic/app-module.ts +++ b/src/components/loading/test/basic/app-module.ts @@ -3,7 +3,81 @@ import { IonicApp, IonicModule, LoadingController, NavController } from '../../. @Component({ - templateUrl: 'main.html' + templateUrl: 'main.html', + styles: [ + ` + /* Fix the spinner used in e2e */ + .fixed-spinner svg { + animation: none; + } + `, + ` + .custom-spinner-container { + position: relative; + display: inline-block; + box-sizing: border-box; + } + `, + ` + .custom-spinner-box { + position: relative; + box-sizing: border-box; + border: 4px solid #000; + width: 60px; + height: 60px; + animation: spin 3s infinite linear; + } + `, + ` + .custom-spinner-box:before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + border: 4px solid #000; + width: 40px; + height: 40px; + animation: pulse 1.5s infinite ease; + } + `, + ` + .wp .custom-spinner-box, + .wp .custom-spinner-box:before { + border-color: #fff; + } + ` + , + ` + @-webkit-keyframes pulse { + 50% { + border-width: 20px; + } + } + `, + ` + @keyframes pulse { + 50% { + border-width: 20px; + } + } + `, + ` + @-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + `, + `@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + }` + ] }) export class E2EPage { constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {} diff --git a/src/components/tabs/test/badges/app-module.ts b/src/components/tabs/test/badges/app-module.ts index 3e2fda7a78..7ceae67e32 100644 --- a/src/components/tabs/test/badges/app-module.ts +++ b/src/components/tabs/test/badges/app-module.ts @@ -7,7 +7,24 @@ export class E2EPage {} @Component({ templateUrl: 'main.html', - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + styles: [ + ` + ion-tabs { + margin-bottom: 20px; + } + `, + ` + ion-tabs, + ion-tabs ion-tabbar { + position: relative; + top: auto; + height: auto; + visibility: visible; + opacity: 1; + } + ` + ] }) export class E2EApp { root = E2EPage; diff --git a/src/components/tabs/test/colors/app-module.ts b/src/components/tabs/test/colors/app-module.ts index a3e6e94d0d..be0eafc1b5 100644 --- a/src/components/tabs/test/colors/app-module.ts +++ b/src/components/tabs/test/colors/app-module.ts @@ -8,7 +8,25 @@ export class E2EPage {} @Component({ templateUrl: 'main.html', - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + styles: [ + ` + ion-tabs { + margin-bottom: 20px; + } + `, + + ` + ion-tabs, + ion-tabs ion-tabbar { + position: relative; + top: auto; + height: auto; + visibility: visible; + opacity: 1; + } + ` + ] }) export class E2EApp { root = E2EPage; diff --git a/src/components/tabs/test/tab-bar-scenarios/app-module.ts b/src/components/tabs/test/tab-bar-scenarios/app-module.ts index a3e6e94d0d..684f7a1dd9 100644 --- a/src/components/tabs/test/tab-bar-scenarios/app-module.ts +++ b/src/components/tabs/test/tab-bar-scenarios/app-module.ts @@ -8,7 +8,24 @@ export class E2EPage {} @Component({ templateUrl: 'main.html', - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + styles: [ + ` + ion-tabs { + margin-bottom: 20px; + } + `, + ` + ion-tabs, + ion-tabs ion-tabbar { + position: relative; + top: auto; + height: auto; + visibility: visible; + opacity: 1; + } + ` + ] }) export class E2EApp { root = E2EPage;