docs(all): update usage of css utils (#19208)

angular/test/test-app/src/app/alert/alert.component.html

@@ -5,6 +5,6 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding-top padding-horizontal>
+<ion-content>
   <p>Change Detections: <span id="counter">{{counter()}}</span></p>
 </ion-content>

angular/test/test-app/src/app/modal-example/modal-example.component.html

@@ -8,7 +8,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Value</h1>
   <h2>{{value}}</h2>
   <h3>{{valueFromParams}}</h3>

angular/test/test-app/src/app/modal/modal.component.html

@@ -5,7 +5,7 @@
       </ion-title>
     </ion-toolbar>
   </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-button (click)="openModal()" id="action-button">Open Modal</ion-button>
   <ion-button (click)="openNav()" id="action-button-2">Open Nav in Modal</ion-button>
   <p>

angular/test/test-app/src/app/providers/providers.component.html

@@ -5,7 +5,7 @@
       </ion-title>
     </ion-toolbar>
   </ion-header>
-  <ion-content padding>
+  <ion-content class="ion-padding">
     <p>
       isLoaded: <span id="is-loaded">{{isLoaded}}</span>
     </p>

angular/test/test-app/src/app/router-link-page/router-link-page.component.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>canGoBack: <span id="canGoBack">{{canGoBack}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>

angular/test/test-app/src/app/router-link-page2/router-link-page2.component.html

@@ -7,6 +7,6 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-button routerLink="/router-link-page3" id="goToPage3">Go to Page 3</ion-button>
 </ion-content>

angular/test/test-app/src/app/router-link-page3/router-link-page3.component.html

@@ -7,6 +7,6 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   Page 3
 </ion-content>

angular/test/test-app/src/app/router-link/router-link.component.html

@@ -5,7 +5,7 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>

angular/test/test-app/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>

angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html

@@ -4,7 +4,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>LAZY LOADED TAB</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to NESTED PAGE {{id}}</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>

angular/test/test-app/src/app/view-child/view-child.component.html

@@ -5,7 +5,7 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-slides>
     <ion-slide #slide>
         <ion-button id="color-button">Hello! it's a button</ion-button>

angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.html

@@ -7,7 +7,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content padding>
+  <ion-content class="ion-padding">
     <h1>Item {{itemNu}}</h1>
     <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
     <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>

core/src/components/menu/readme.md

@@ -167,7 +167,7 @@ constructor(private menu: MenuController) { }
         <ion-title>Menu - Basic</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
       <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
       <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>

core/src/components/menu/usage/javascript.md

@@ -57,7 +57,7 @@
         <ion-title>Menu - Basic</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
       <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
       <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>

core/src/components/modal/readme.md

@@ -267,7 +267,7 @@ export const ModalExample: React.FC = () => {
         <ion-title>{{ title }}</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content padding>
+    <ion-content class="ion-padding">
       {{ content }}
     </ion-content>
   </div>

core/src/components/modal/usage/vue.md

@@ -6,7 +6,7 @@
         <ion-title>{{ title }}</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content padding>
+    <ion-content class="ion-padding">
       {{ content }}
     </ion-content>
   </div>