feat(block): support theme-specific block-strong-[ios|md] states

Author: nolimits4web

src/core/components/block/block.less

@@ -25,7 +25,9 @@
     }
   }
 }
-.block-strong {
+.block-strong,
+.ios .block-strong-ios,
+.md .block-strong-md {
   color: var(--f7-block-strong-text-color);
   padding-top: var(--f7-block-padding-vertical);
   padding-bottom: var(--f7-block-padding-vertical);
@@ -168,8 +170,12 @@
   --f7-safe-area-right: 0px;
 }
 .block-strong.inset,
+.ios .block-strong-ios.inset,
+.md .block-strong-md.inset,
 .ios .block-strong.inset-ios,
-.md .block-strong.inset-md {
+.md .block-strong.inset-md,
+.ios .block-strong-ios.inset-ios,
+.md .block-strong-md.inset-md {
   .hairline-remove-top-bottom();
 }
 
@@ -178,17 +184,19 @@ each(@breakpoints, {
     .block.@{key}-inset,
     .ios .block.@{key}-inset-ios,
     .md .block.@{key}-inset-md {
+      .hairline-remove-top-bottom();
       border-radius: var(--f7-block-inset-border-radius);
       margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
       margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
       --f7-safe-area-left: 0px;
       --f7-safe-area-right: 0px;
-      &.block-outline,
-      .ios &.block-outline-ios,
-      .md &.block-outline-md {
-        .hairline-remove-top-bottom();
+    }
+    .block.@{key}-inset.block-outline,
+    .ios .block.@{key}-inset-ios.block-outline,
+    .ios .block.@{key}-inset-ios.block-outline-ios,
+    .md .block.@{key}-inset-md.block-outline,
+    .md .block.@{key}-inset-md.block-outline-md {
         border: 1px solid var(--f7-block-outline-border-color);
-      }
     }
   }
 });

src/react/components/block.jsx

@@ -26,6 +26,8 @@ import { useTab } from '../shared/use-tab.js';
   xlargeInsetIos?: boolean
   xlargeInsetMd?: boolean
   strong?: boolean
+  strongIos?: boolean
+  strongMd?: boolean
   outline?: boolean
   outlineIos?: boolean
   outlineMd?: boolean
@@ -63,6 +65,8 @@ const Block = forwardRef((props, ref) => {
     xlargeInsetIos,
     xlargeInsetMd,
     strong,
+    strongIos,
+    strongMd,
     outline,
     outlineIos,
     outlineMd,
@@ -108,6 +112,8 @@ const Block = forwardRef((props, ref) => {
       'xlarge-inset-ios': xlargeInsetIos,
       'xlarge-inset-md': xlargeInsetMd,
       'block-strong': strong,
+      'block-strong-ios': strongIos,
+      'block-strong-md': strongMd,
       'block-outline': outline,
       'block-outline-ios': outlineIos,
       'block-outline-md': outlineMd,

src/svelte/components/block.svelte

@@ -26,6 +26,8 @@
   export let xlargeInsetIos = false;
   export let xlargeInsetMd = false;
   export let strong = false;
+  export let strongIos = false;
+  export let strongMd = false;
   export let tabs = false;
   export let tab = false;
   export let tabActive = false;
@@ -63,6 +65,8 @@
       'xlarge-inset-ios': xlargeInsetIos,
       'xlarge-inset-md': xlargeInsetMd,
       'block-strong': strong,
+      'block-strong-ios': strongIos,
+      'block-strong-md': strongMd,
       'accordion-list': accordionList,
       'accordion-opposite': accordionOpposite,
       tabs,

src/vue/components/block.vue

@@ -31,6 +31,8 @@ export default {
     xlargeInsetIos: Boolean,
     xlargeInsetMd: Boolean,
     strong: Boolean,
+    strongIos: Boolean,
+    strongMd: Boolean,
     outline: Boolean,
     outlineIos: Boolean,
     outlineMd: Boolean,
@@ -68,6 +70,8 @@ export default {
         xlargeInsetIos,
         xlargeInsetMd,
         strong,
+        strongIos,
+        strongMd,
         outline,
         outlineIos,
         outlineMd,
@@ -99,6 +103,8 @@ export default {
           'xlarge-inset-ios': xlargeInsetIos,
           'xlarge-inset-md': xlargeInsetMd,
           'block-strong': strong,
+          'block-strong-ios': strongIos,
+          'block-strong-md': strongMd,
           'accordion-list': accordionList,
           'accordion-opposite': accordionOpposite,
           tabs,