refactor(contenet): update padding variables

thetaPC · thetaPC · commit c8f817c76f49 · 2026-04-30T11:33:58.000-07:00
diff --git a/core/src/components/content/test/basic/index.html b/core/src/components/content/test/basic/index.html
@@ -26,7 +26,7 @@
       </ion-header>
 
       <div style="display: flex; flex: 1">
-        <ion-content class="ion-padding" style="text-align: center; flex: 2" id="content">
+        <ion-content id="content">
           <ion-content id="content-part">
             <f style="height: 50%"></f>
             <p>
@@ -135,6 +135,20 @@
         f:last-of-type {
           background: yellow;
         }
+
+        #content {
+          --ion-content-padding-start: 16px;
+          --ion-content-padding-end: 16px;
+          --ion-content-padding-top: 16px;
+          --ion-content-padding-bottom: 16px;
+
+          text-align: center;
+          flex: 2;
+        }
+
+        ion-content#content-part::part(background) {
+          background: #eee;
+        }
       </style>
     </ion-app>
   </body>
diff --git a/core/src/components/content/test/fullscreen/index.html b/core/src/components/content/test/fullscreen/index.html
@@ -67,6 +67,10 @@
       ion-content {
         --ion-content-background: linear-gradient(90deg, blue, red);
         --ion-content-color: white;
+        --ion-content-padding-start: 16px;
+        --ion-content-padding-end: 16px;
+        --ion-content-padding-top: 16px;
+        --ion-content-padding-bottom: 16px;
       }
 
       p:first-child {
diff --git a/core/src/components/content/test/standalone/index.html b/core/src/components/content/test/standalone/index.html
@@ -15,7 +15,7 @@
   </head>
   <body>
     <div class="content-height">
-      <ion-content class="ion-padding">
+      <ion-content>
         <h1>Heading</h1>
         <h2>Heading</h2>
         <h3>Heading</h3>
@@ -28,7 +28,7 @@ <h6>Heading</h6>
     </div>
 
     <div class="content-height">
-      <ion-content class="ion-padding" color="secondary">
+      <ion-content color="secondary">
         <h1>Heading</h1>
         <h2>Heading</h2>
         <h3>Heading</h3>
@@ -41,7 +41,7 @@ <h6>Heading</h6>
     </div>
 
     <div class="content-height">
-      <ion-content class="ion-padding custom-color">
+      <ion-content class="custom-color">
         <h1>Heading</h1>
         <h2>Heading</h2>
         <h3>Heading</h3>
