chore: tweak KS swiper styles

Author: nolimits4web

kitchen-sink/core/pages/swiper.html

@@ -18,7 +18,7 @@
         with super flexible configuration and lot, lot of features. Just check the following demos:
       </p>
     </div>
-    <div class="list links-list">
+    <div class="list links-list list-strong inset-md list-dividers-ios list-outline-ios">
       <ul>
         <li>
           <a href="swiper-horizontal/">Swiper Horizontal</a>
@@ -74,4 +74,4 @@
       </ul>
     </div>
   </div>
-</div>
+</div>

kitchen-sink/react/src/pages/swiper.jsx

@@ -14,7 +14,7 @@ export default () => (
         with super flexible configuration and lot, lot of features. Just check the following demos:
       </p>
     </Block>
-    <List>
+    <List strong insetMd outlineIos dividersIos>
       <ListItem link="swiper-horizontal/" title="Swiper Horizontal" />
       <ListItem link="swiper-vertical/" title="Swiper Vertical" />
       <ListItem link="swiper-space-between/" title="Space Between Slides" />

kitchen-sink/svelte/src/pages/swiper.svelte

@@ -11,7 +11,7 @@
       with super flexible configuration and lot, lot of features. Just check the following demos:
     </p>
   </Block>
-  <List>
+  <List strong insetMd outlineIos dividersIos>
     <ListItem link="swiper-horizontal/" title="Swiper Horizontal" />
     <ListItem link="swiper-vertical/" title="Swiper Vertical" />
     <ListItem link="swiper-space-between/" title="Space Between Slides" />

kitchen-sink/vue/src/pages/swiper.vue

@@ -8,70 +8,36 @@
         with super flexible configuration and lot, lot of features. Just check the following demos:
       </p>
     </div>
-    <div class="list links-list">
-      <ul>
-        <li>
-          <a href="swiper-horizontal/">Swiper Horizontal</a>
-        </li>
-        <li>
-          <a href="swiper-vertical/">Swiper Vertical</a>
-        </li>
-        <li>
-          <a href="swiper-space-between/">Space Between Slides</a>
-        </li>
-        <li>
-          <a href="swiper-multiple/">Multiple Per Page</a>
-        </li>
-        <li>
-          <a href="swiper-nested/">Nested Swipers</a>
-        </li>
-        <li>
-          <a href="swiper-loop/">Infinite Loop Mode</a>
-        </li>
-        <li>
-          <a href="swiper-3d-cube/">3D Cube Effect</a>
-        </li>
-        <li>
-          <a href="swiper-3d-coverflow/">3D Coverflow Effect</a>
-        </li>
-        <li>
-          <a href="swiper-3d-flip/">3D Flip Effect</a>
-        </li>
-        <li>
-          <a href="swiper-fade/">Fade Effect</a>
-        </li>
-        <li>
-          <a href="swiper-scrollbar/">With Scrollbar</a>
-        </li>
-        <li>
-          <a href="swiper-gallery/">Thumbs Gallery</a>
-        </li>
-        <li>
-          <a href="swiper-parallax/">Parallax</a>
-        </li>
-        <li>
-          <a href="swiper-lazy/">Lazy Loading</a>
-        </li>
-        <li>
-          <a href="swiper-pagination-progress/">Progress Pagination</a>
-        </li>
-        <li>
-          <a href="swiper-pagination-fraction/">Fraction Pagination</a>
-        </li>
-        <li>
-          <a href="swiper-zoom/">Zoom</a>
-        </li>
-      </ul>
-    </div>
+    <f7-list strong inset-md outline-ios dividers-ios>
+      <f7-list-item link="swiper-horizontal/" title="Swiper Horizontal" />
+      <f7-list-item link="swiper-vertical/" title="Swiper Vertical" />
+      <f7-list-item link="swiper-space-between/" title="Space Between Slides" />
+      <f7-list-item link="swiper-multiple/" title="Multiple Per Page" />
+      <f7-list-item link="swiper-nested/" title="Nested Swipers" />
+      <f7-list-item link="swiper-loop/" title="Infinite Loop Mode" />
+      <f7-list-item link="swiper-3d-cube/" title="3D Cube Effect" />
+      <f7-list-item link="swiper-3d-coverflow/" title="3D Coverflow Effect" />
+      <f7-list-item link="swiper-3d-flip/" title="3D Flip Effect" />
+      <f7-list-item link="swiper-fade/" title="Fade Effect" />
+      <f7-list-item link="swiper-scrollbar/" title="With Scrollbar" />
+      <f7-list-item link="swiper-gallery/" title="Thumbs Gallery" />
+      <f7-list-item link="swiper-parallax/" title="Parallax" />
+      <f7-list-item link="swiper-lazy/" title="Lazy Loading" />
+      <f7-list-item link="swiper-pagination-progress/" title="Progress Pagination" />
+      <f7-list-item link="swiper-pagination-fraction/" title="Fraction Pagination" />
+      <f7-list-item link="swiper-zoom/" title="Zoom" />
+    </f7-list>
   </f7-page>
 </template>
 <script>
-import { f7Navbar, f7Page } from 'framework7-vue';
+import { f7Navbar, f7Page, f7List, f7ListItem } from 'framework7-vue';
 
 export default {
   components: {
     f7Navbar,
     f7Page,
+    f7List,
+    f7ListItem,
   },
 };
 </script>