[Enhancement] Animate Expandable Card padding to respect safe area inset guidelines for iPhone X and later

• Framework7 version: 5.7.13 (installed using framework7-cli for Vue)
• Platform and Target: iOS 14 Safari (iPhone X) PWA
• Live Link: Source Code | Live Preview (under the "Explore" tab

Hi, I would like to suggest an improvement to animate the padding of the expanded content in Expandable Cards, so it would look nicer and unobstructed in iOS devices. I'll be happy to open new PRs for it.

When I open the Expandable Card from the official demo/kitchen sink as a PWA, the content heading and the Close button are obstructed by the system statusbar.

This could be fixed and improved by setting the heading's top padding to match the top safe area inset. Note that I applied them only when the card has been opened.

  .card-expandable.card-opened .card-content .card-header {
    padding-top: calc(var(--f7-card-header-padding-vertical) + var(--f7-safe-area-top));
  }
  .card-expandable.card-opened .card-content .card-close {
    top: calc(15px + var(--f7-safe-area-top)) !important;
  }

I also added several CSS rules to make the card opening and closing transitions as smooth as possible.

  .card-expandable.card-opening .card-content .card-header {
    padding-top: calc(var(--f7-card-header-padding-vertical) + var(--f7-safe-area-top));
    transform: scale(1);
    transition: 0.5s all ease;
  }
  .card-expandable.card-opening .card-content .card-close {
    top: calc(15px + var(--f7-safe-area-top)) !important;
    transform: scale(1);
    transition: 0.5s all ease;
  }
  .card-expandable.card-closing .card-content .card-header {
    transform: scale(1);
    transition: 0.5s all ease;
  }

I have implemented this fix in https://github.com/reinhart1010/aqualife-mockup/blob/lead/src/pages/explore.vue, which the final result can be found on https://reinhart1010.github.io/aqualife-mockup/ under the "Explore Tab". When previewed in iOS as a standalone web app, the card heading and the Close button are now positioned correctly.

Start with the Expandable Card styles and the official iOS kitchen-sink demo, then compare them with the working example in src/pages/explore.vue. Verify the opened, opening, and closing states on an iPhone X or later PWA, and confirm that the heading and Close button remain clear of the safe area during the transition.