@xenknight/framework7 0.0.2

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Vladimir Kharlampidi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+<a href="https://www.patreon.com/framework7"><img src="https://framework7.io/i/support-badge.png" height="20"></a>
+
+# Framework7
+
+Full Featured Mobile HTML Framework For Building iOS & Android Apps
+
+## Supporting Framework7
+
+Framework7 is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome [backers](https://github.com/framework7io/framework7/blob/master/BACKERS.md). If you'd like to join them, please consider [becoming a backer or sponsor on Patreon.](https://www.patreon.com/framework7)
+
+
+## Getting Started
+  * [Getting Started Guide](https://framework7.io/docs/introduction.html)
+  * [Installation Guide](https://framework7.io/docs/installation.html)
+  * [App Layout](https://framework7.io/docs/app-layout.html)
+  * [Initialize App](https://framework7.io/docs/init-app.html)
+
+## Forum
+
+If you have questions about Framework7 or want to help others you are welcome to special forum at https://forum.framework7.io/
+
+## Docs
+
+Documentation available at https://framework7.io/docs/
+
+## Tutorials
+
+Tutorials available at https://framework7.io/tutorials/
+
+## Showcase
+
+Appstore apps made with Framework7: https://framework7.io/showcase/

package/components/accordion/accordion-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/accordion/accordion-md.less

@@ -0,0 +1,2 @@
+.md {
+}

package/components/accordion/accordion-rtl.css

@@ -0,0 +1 @@
+:root{--f7-accordion-chevron-icon-down:'chevron_down';--f7-accordion-chevron-icon-up:'chevron_up'}.accordion-item-toggle{cursor:pointer}.list.accordion-list .accordion-item-toggle{transition-duration:.3s;position:relative;overflow:hidden}.list.accordion-list .accordion-item-toggle.active-state{transition-duration:.3s;background-color:var(--f7-list-link-pressed-bg-color)}.list.accordion-list .accordion-item-toggle.active-state>.item-inner:after{background-color:transparent}.list.accordion-list .accordion-item-toggle .item-inner{transition-duration:.3s;transition-property:background-color}.list.accordion-list .accordion-item-toggle .item-inner:after{transition-duration:.3s}.list.accordion-list .accordion-item-toggle .ripple-wave{z-index:0}.accordion-item .item-link .item-inner:after{transition-duration:.3s}.accordion-item .block,.accordion-item .list{margin-top:0;margin-bottom:0}.accordion-item .block>h1:first-child,.accordion-item .block>h2:first-child,.accordion-item .block>h3:first-child,.accordion-item .block>h4:first-child,.accordion-item .block>p:first-child{margin-top:10px}.accordion-item .block>h1:last-child,.accordion-item .block>h2:last-child,.accordion-item .block>h3:last-child,.accordion-item .block>h4:last-child,.accordion-item .block>p:last-child{margin-bottom:10px}.accordion-item-opened .accordion-item-toggle .item-inner:after,.accordion-item-opened>.item-link .item-inner:after{background-color:transparent}.list li.accordion-item ul{padding-right:0}.accordion-item-content{position:relative;overflow:hidden;height:0;font-size:14px;transition-duration:.3s}.accordion-item-opened>.accordion-item-content{height:auto}html.device-android-4 .accordion-item-content{transform:none}.list .accordion-item-toggle .item-inner:before{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;position:absolute;top:50%;font-size:var(--f7-list-chevron-icon-font-size);color:var(--f7-list-chevron-icon-color);pointer-events:none;left:calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))}.list:not(.accordion-opposite) .accordion-item-toggle .item-inner{padding-left:calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))}.accordion-opposite .accordion-item-toggle .item-inner,.accordion-opposite .accordion-item-toggle.item-link .item-inner,.accordion-opposite .accordion-item>.item-link>.item-content>.item-inner,.accordion-opposite .accordion-item>.item-link>.item-inner{padding-left:calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))}.accordion-opposite .accordion-item>.item-link>.item-title-row{padding-right:0}.accordion-opposite .accordion-item-toggle .item-inner:before,.accordion-opposite .accordion-item-toggle.item-link .item-inner:before,.accordion-opposite .accordion-item>.item-link .item-title-row:before,.accordion-opposite .accordion-item>.item-link>.item-content>.item-inner:before,.accordion-opposite .accordion-item>.item-link>.item-inner:before{display:none}.accordion-opposite .accordion-item-toggle.item-content,.accordion-opposite .accordion-item-toggle>.item-content,.accordion-opposite .accordion-item>.item-content,.accordion-opposite .accordion-item>.item-link>.item-content,.accordion-opposite.links-list .accordion-item>a{position:relative;padding-right:calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))}.accordion-opposite .accordion-item-toggle.item-content:before,.accordion-opposite .accordion-item-toggle>.item-content:before,.accordion-opposite .accordion-item>.item-content:before,.accordion-opposite .accordion-item>.item-link>.item-content:before,.accordion-opposite.links-list .accordion-item>a:before{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;position:absolute;top:50%;font-size:var(--f7-list-chevron-icon-font-size);color:var(--f7-list-chevron-icon-color);pointer-events:none;content:var(--f7-accordion-chevron-icon-down);width:14px;height:8px;margin-top:-4px;line-height:8px;transform:translateX(-50%);right:calc((var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal))/ 2 + var(--f7-safe-area-right))}.list .accordion-item-toggle.active-state{background-color:var(--f7-list-link-pressed-bg-color)}.accordion-item.media-item .accordion-item-toggle .item-title-row:before,.accordion-item.media-item>.item-link .item-title-row:before,.links-list .accordion-item>a:before,.list .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item:not(.media-item)>.item-link .item-inner:before,.media-list .accordion-item .accordion-item-toggle .item-title-row:before,.media-list .accordion-item>.item-link .item-title-row:before{content:var(--f7-accordion-chevron-icon-down);width:14px;height:8px;margin-top:-4px;line-height:8px}.accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,.accordion-item-opened.media-item>.item-link .item-title-row:before,.accordion-opposite .accordion-item-opened .accordion-item-toggle.item-content:before,.accordion-opposite .accordion-item-opened .accordion-item-toggle>.item-content:before,.accordion-opposite .accordion-item-opened>.item-content:before,.accordion-opposite .accordion-item-opened>.item-link>.item-content:before,.accordion-opposite .links-list .accordion-item-opened>a:before,.links-list .accordion-item-opened>a:before,.list .accordion-item-toggle.accordion-item-opened .item-inner:before,.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item-opened:not(.media-item)>.item-link .item-inner:before,.media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,.media-list .accordion-item-opened>.item-link .item-title-row:before{content:var(--f7-accordion-chevron-icon-up);width:14px;height:8px;margin-top:-4px;line-height:8px}

package/components/accordion/accordion.css

@@ -0,0 +1 @@
+:root{--f7-accordion-chevron-icon-down:'chevron_down';--f7-accordion-chevron-icon-up:'chevron_up'}.accordion-item-toggle{cursor:pointer}.list.accordion-list .accordion-item-toggle{transition-duration:.3s;position:relative;overflow:hidden}.list.accordion-list .accordion-item-toggle.active-state{transition-duration:.3s;background-color:var(--f7-list-link-pressed-bg-color)}.list.accordion-list .accordion-item-toggle.active-state>.item-inner:after{background-color:transparent}.list.accordion-list .accordion-item-toggle .item-inner{transition-duration:.3s;transition-property:background-color}.list.accordion-list .accordion-item-toggle .item-inner:after{transition-duration:.3s}.list.accordion-list .accordion-item-toggle .ripple-wave{z-index:0}.accordion-item .item-link .item-inner:after{transition-duration:.3s}.accordion-item .block,.accordion-item .list{margin-top:0;margin-bottom:0}.accordion-item .block>h1:first-child,.accordion-item .block>h2:first-child,.accordion-item .block>h3:first-child,.accordion-item .block>h4:first-child,.accordion-item .block>p:first-child{margin-top:10px}.accordion-item .block>h1:last-child,.accordion-item .block>h2:last-child,.accordion-item .block>h3:last-child,.accordion-item .block>h4:last-child,.accordion-item .block>p:last-child{margin-bottom:10px}.accordion-item-opened .accordion-item-toggle .item-inner:after,.accordion-item-opened>.item-link .item-inner:after{background-color:transparent}.list li.accordion-item ul{padding-left:0}.accordion-item-content{position:relative;overflow:hidden;height:0;font-size:14px;transition-duration:.3s}.accordion-item-opened>.accordion-item-content{height:auto}html.device-android-4 .accordion-item-content{transform:none}.list .accordion-item-toggle .item-inner:before{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;position:absolute;top:50%;font-size:var(--f7-list-chevron-icon-font-size);color:var(--f7-list-chevron-icon-color);pointer-events:none;right:calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))}.list:not(.accordion-opposite) .accordion-item-toggle .item-inner{padding-right:calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))}.accordion-opposite .accordion-item-toggle .item-inner,.accordion-opposite .accordion-item-toggle.item-link .item-inner,.accordion-opposite .accordion-item>.item-link>.item-content>.item-inner,.accordion-opposite .accordion-item>.item-link>.item-inner{padding-right:calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))}.accordion-opposite .accordion-item>.item-link>.item-title-row{padding-right:0}.accordion-opposite .accordion-item-toggle .item-inner:before,.accordion-opposite .accordion-item-toggle.item-link .item-inner:before,.accordion-opposite .accordion-item>.item-link .item-title-row:before,.accordion-opposite .accordion-item>.item-link>.item-content>.item-inner:before,.accordion-opposite .accordion-item>.item-link>.item-inner:before{display:none}.accordion-opposite .accordion-item-toggle.item-content,.accordion-opposite .accordion-item-toggle>.item-content,.accordion-opposite .accordion-item>.item-content,.accordion-opposite .accordion-item>.item-link>.item-content,.accordion-opposite.links-list .accordion-item>a{position:relative;padding-left:calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))}.accordion-opposite .accordion-item-toggle.item-content:before,.accordion-opposite .accordion-item-toggle>.item-content:before,.accordion-opposite .accordion-item>.item-content:before,.accordion-opposite .accordion-item>.item-link>.item-content:before,.accordion-opposite.links-list .accordion-item>a:before{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;position:absolute;top:50%;font-size:var(--f7-list-chevron-icon-font-size);color:var(--f7-list-chevron-icon-color);pointer-events:none;content:var(--f7-accordion-chevron-icon-down);width:14px;height:8px;margin-top:-4px;line-height:8px;transform:translateX(-50%);left:calc((var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal))/ 2 + var(--f7-safe-area-left))}.list .accordion-item-toggle.active-state{background-color:var(--f7-list-link-pressed-bg-color)}.accordion-item.media-item .accordion-item-toggle .item-title-row:before,.accordion-item.media-item>.item-link .item-title-row:before,.links-list .accordion-item>a:before,.list .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item:not(.media-item)>.item-link .item-inner:before,.media-list .accordion-item .accordion-item-toggle .item-title-row:before,.media-list .accordion-item>.item-link .item-title-row:before{content:var(--f7-accordion-chevron-icon-down);width:14px;height:8px;margin-top:-4px;line-height:8px}.accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,.accordion-item-opened.media-item>.item-link .item-title-row:before,.accordion-opposite .accordion-item-opened .accordion-item-toggle.item-content:before,.accordion-opposite .accordion-item-opened .accordion-item-toggle>.item-content:before,.accordion-opposite .accordion-item-opened>.item-content:before,.accordion-opposite .accordion-item-opened>.item-link>.item-content:before,.accordion-opposite .links-list .accordion-item-opened>a:before,.links-list .accordion-item-opened>a:before,.list .accordion-item-toggle.accordion-item-opened .item-inner:before,.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item-opened:not(.media-item)>.item-link .item-inner:before,.media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,.media-list .accordion-item-opened>.item-link .item-title-row:before{content:var(--f7-accordion-chevron-icon-up);width:14px;height:8px;margin-top:-4px;line-height:8px}

package/components/accordion/accordion.d.ts

@@ -0,0 +1,55 @@
+import Framework7 from '../app/app-class.js';
+import { CSSSelector, Framework7Plugin } from '../app/app-class.js';
+
+export namespace Accordion {
+  interface AppMethods {
+    accordion: {
+      /** open specified accordion item */
+      open(el: HTMLElement | CSSSelector): void;
+
+      /** close specified accordion item */
+      close(el: HTMLElement | CSSSelector): void;
+
+      /** toggle specified accordion item */
+      toggle(el: HTMLElement | CSSSelector): void;
+    };
+  }
+  interface AppParams {}
+  interface DomEvents {
+    /** Event will be triggered right before accordion content starts its opening animation. event.detail.prevent contains function that will prevent accordion from opening when called */
+    'accordion:beforeopen': () => void;
+    /** Event will be triggered when accordion content starts its opening animation */
+    'accordion:open': () => void;
+    /** Event will be triggered after accordion content completes its opening animation */
+    'accordion:opened': () => void;
+    /** Event will be triggered right before accordion content starts its closing animation. event.detail.prevent contains function that will prevent accordion from closing when called */
+    'accordion:beforeclose': () => void;
+    /** Event will be triggered when accordion content starts its closing animation */
+    'accordion:close': () => void;
+    /** Event will be triggered after accordion content completes its closing animation */
+    'accordion:closed': () => void;
+  }
+  interface AppEvents {
+    /** Event will be triggered before accordion content starts its opening animation */
+    accordionBeforeOpen: (el: HTMLElement | CSSSelector, prevent: () => void) => void;
+
+    /** Event will be triggered when accordion content starts its opening animation */
+    accordionOpen: (el: HTMLElement | CSSSelector) => void;
+
+    /** Event will be triggered after accordion content completes its opening animation */
+    accordionOpened: (el: HTMLElement | CSSSelector) => void;
+
+    /** Event will be triggered before accordion content starts its closing animation */
+    accordionBeforeClose: (el: HTMLElement | CSSSelector, prevent: () => void) => void;
+
+    /** Event will be triggered when accordion content starts its closing animation */
+    accordionClose: (el: HTMLElement | CSSSelector) => void;
+
+    /** Event will be triggered after accordion content completes its closing animation */
+    accordionClosed: (el: HTMLElement | CSSSelector) => void;
+  }
+}
+
+declare const AccordionComponent: Framework7Plugin;
+
+export default AccordionComponent;

package/components/accordion/accordion.js

@@ -0,0 +1,118 @@
+import $ from '../../shared/dom7.js';
+import { nextFrame, bindMethods } from '../../shared/utils.js';
+const Accordion = {
+  toggleClicked($clickedEl) {
+    const app = this;
+    let $accordionItemEl = $clickedEl.closest('.accordion-item').eq(0);
+    if (!$accordionItemEl.length) $accordionItemEl = $clickedEl.parents('li').eq(0);
+    const $accordionContent = $clickedEl.parents('.accordion-item-content').eq(0);
+    if ($accordionContent.length) {
+      if ($accordionContent.parents($accordionItemEl).length) return;
+    }
+    if ($clickedEl.parents('li').length > 1 && $clickedEl.parents('li')[0] !== $accordionItemEl[0]) return;
+    app.accordion.toggle($accordionItemEl);
+  },
+  open(el) {
+    const app = this;
+    const $el = $(el);
+    let prevented = false;
+    function prevent() {
+      prevented = true;
+    }
+    $el.trigger('accordion:beforeopen', {
+      prevent
+    }, prevent);
+    app.emit('accordionBeforeOpen', $el[0], prevent);
+    if (prevented) return;
+    const $list = $el.parents('.accordion-list').eq(0);
+    let $contentEl = $el.children('.accordion-item-content');
+    $contentEl.removeAttr('aria-hidden');
+    if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
+    if ($contentEl.length === 0) return;
+    const $openedItem = $list.length > 0 && $el.parent().children('.accordion-item-opened');
+    if ($openedItem.length > 0) {
+      app.accordion.close($openedItem);
+    }
+    $contentEl.transitionEnd(() => {
+      if ($el.hasClass('accordion-item-opened')) {
+        $contentEl.transition(0);
+        $contentEl.css('height', 'auto');
+        nextFrame(() => {
+          $contentEl.transition('');
+          $el.trigger('accordion:opened');
+          app.emit('accordionOpened', $el[0]);
+        });
+      } else {
+        $contentEl.css('height', '');
+        $el.trigger('accordion:closed');
+        app.emit('accordionClosed', $el[0]);
+      }
+    });
+    $contentEl.css('height', `${$contentEl[0].scrollHeight}px`);
+    $el.trigger('accordion:open');
+    $el.addClass('accordion-item-opened');
+    app.emit('accordionOpen', $el[0]);
+  },
+  close(el) {
+    const app = this;
+    const $el = $(el);
+    let prevented = false;
+    function prevent() {
+      prevented = true;
+    }
+    $el.trigger('accordion:beforeclose', {
+      prevent
+    }, prevent);
+    app.emit('accordionBeforeClose', $el[0], prevent);
+    if (prevented) return;
+    let $contentEl = $el.children('.accordion-item-content');
+    if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
+    $el.removeClass('accordion-item-opened');
+    $contentEl.attr('aria-hidden', true);
+    $contentEl.transition(0);
+    $contentEl.css('height', `${$contentEl[0].scrollHeight}px`);
+    // Close
+    $contentEl.transitionEnd(() => {
+      if ($el.hasClass('accordion-item-opened')) {
+        $contentEl.transition(0);
+        $contentEl.css('height', 'auto');
+        nextFrame(() => {
+          $contentEl.transition('');
+          $el.trigger('accordion:opened');
+          app.emit('accordionOpened', $el[0]);
+        });
+      } else {
+        $contentEl.css('height', '');
+        $el.trigger('accordion:closed');
+        app.emit('accordionClosed', $el[0]);
+      }
+    });
+    nextFrame(() => {
+      $contentEl.transition('');
+      $contentEl.css('height', '');
+      $el.trigger('accordion:close');
+      app.emit('accordionClose', $el[0]);
+    });
+  },
+  toggle(el) {
+    const app = this;
+    const $el = $(el);
+    if ($el.length === 0) return;
+    if ($el.hasClass('accordion-item-opened')) app.accordion.close(el);else app.accordion.open(el);
+  }
+};
+export default {
+  name: 'accordion',
+  create() {
+    const app = this;
+    bindMethods(app, {
+      accordion: Accordion
+    });
+  },
+  clicks: {
+    '.accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a': function open($clickedEl) {
+      const app = this;
+      Accordion.toggleClicked.call(app, $clickedEl);
+    }
+  }
+};

package/components/accordion/accordion.less

@@ -0,0 +1,215 @@
+/* === Accordion === */
+@import './accordion-vars.less';
+
+:root {
+  --f7-accordion-chevron-icon-down: 'chevron_down';
+  --f7-accordion-chevron-icon-up: 'chevron_up';
+}
+.accordion-item-toggle {
+  cursor: pointer;
+}
+.list.accordion-list .accordion-item-toggle {
+  transition-duration: 300ms;
+  position: relative;
+  overflow: hidden;
+  &.active-state {
+    transition-duration: 300ms;
+    background-color: var(--f7-list-link-pressed-bg-color);
+    > .item-inner {
+      .hairline-color(bottom, transparent);
+    }
+  }
+  .item-inner {
+    transition-duration: 300ms;
+    transition-property: background-color;
+    &:after {
+      transition-duration: 300ms;
+    }
+  }
+  .ripple-wave {
+    z-index: 0;
+  }
+}
+
+.accordion-item {
+  .item-link .item-inner:after {
+    transition-duration: 300ms;
+  }
+  .list,
+  .block {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .block {
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > p {
+      &:first-child {
+        margin-top: 10px;
+      }
+      &:last-child {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+.accordion-item-opened {
+  .accordion-item-toggle .item-inner,
+  > .item-link .item-inner {
+    .hairline-color(bottom, transparent);
+  }
+}
+
+.list li.accordion-item ul {
+  .ltr({
+    padding-left: 0;
+  });
+  .rtl({
+    padding-right: 0;
+  });
+}
+.accordion-item-content {
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  font-size: 14px;
+  transition-duration: 300ms;
+  .accordion-item-opened > & {
+    height: auto;
+  }
+  html.device-android-4 & {
+    transform: none;
+  }
+}
+.list .accordion-item-toggle .item-inner {
+  &:before {
+    .core-icons-font();
+    position: absolute;
+    top: 50%;
+    font-size: var(--f7-list-chevron-icon-font-size);
+    color: var(--f7-list-chevron-icon-color);
+    pointer-events: none;
+    .ltr({
+      right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
+    });
+    .rtl({
+      left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
+    });
+  }
+}
+.list:not(.accordion-opposite) .accordion-item-toggle .item-inner {
+  .ltr({
+    padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
+  });
+  .rtl({
+    padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
+  });
+}
+.accordion-opposite {
+  .accordion-item-toggle.item-link .item-inner,
+  .accordion-item-toggle .item-inner,
+  .accordion-item > .item-link > .item-inner,
+  .accordion-item > .item-link > .item-content > .item-inner {
+    .ltr({
+      padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
+    });
+    .rtl({
+      padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
+    });
+  }
+  .accordion-item > .item-link > .item-title-row {
+    padding-right: 0;
+  }
+  .accordion-item-toggle.item-link .item-inner,
+  .accordion-item-toggle .item-inner,
+  .accordion-item > .item-link > .item-inner,
+  .accordion-item > .item-link > .item-content > .item-inner,
+  .accordion-item > .item-link .item-title-row {
+    &:before {
+      display: none;
+    }
+  }
+  .accordion-item-toggle > .item-content,
+  .accordion-item-toggle.item-content,
+  .accordion-item > .item-content,
+  .accordion-item > .item-link > .item-content,
+  &.links-list .accordion-item > a {
+    position: relative;
+    .ltr({
+      padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
+    });
+    .rtl({
+      padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
+    });
+    &:before {
+      .core-icons-font();
+      position: absolute;
+      top: 50%;
+      font-size: var(--f7-list-chevron-icon-font-size);
+      color: var(--f7-list-chevron-icon-color);
+      pointer-events: none;
+      content: var(--f7-accordion-chevron-icon-down);
+      width: 14px;
+      height: 8px;
+      margin-top: -4px;
+      line-height: 8px;
+      transform: translateX(-50%);
+      .ltr({
+        left: calc((var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal)) / 2 + var(--f7-safe-area-left));
+      });
+      .rtl({
+        right: calc((var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal)) / 2 + var(--f7-safe-area-right));
+      });
+    }
+  }
+}
+.list .accordion-item-toggle.active-state {
+  background-color: var(--f7-list-link-pressed-bg-color);
+}
+
+.list .accordion-item-toggle .item-inner,
+.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner,
+.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner,
+.media-list .accordion-item .accordion-item-toggle .item-title-row,
+.media-list .accordion-item > .item-link .item-title-row,
+.accordion-item.media-item .accordion-item-toggle .item-title-row,
+.accordion-item.media-item > .item-link .item-title-row,
+.links-list .accordion-item > a {
+  &:before {
+    content: var(--f7-accordion-chevron-icon-down);
+    width: 14px;
+    height: 8px;
+    margin-top: -4px;
+    line-height: 8px;
+  }
+}
+.list .accordion-item-toggle.accordion-item-opened .item-inner,
+.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
+.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
+.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
+.media-list .accordion-item-opened > .item-link .item-title-row,
+.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
+.accordion-item-opened.media-item > .item-link .item-title-row,
+.links-list .accordion-item-opened > a,
+.accordion-opposite .accordion-item-opened .accordion-item-toggle > .item-content,
+.accordion-opposite .accordion-item-opened .accordion-item-toggle.item-content,
+.accordion-opposite .accordion-item-opened > .item-content,
+.accordion-opposite .accordion-item-opened > .item-link > .item-content,
+.accordion-opposite &.links-list .accordion-item-opened > a {
+  &:before {
+    content: var(--f7-accordion-chevron-icon-up);
+    width: 14px;
+    height: 8px;
+    margin-top: -4px;
+    line-height: 8px;
+  }
+}
+
+.if-ios-theme({
+  @import './accordion-ios.less';
+});
+.if-md-theme({
+  @import './accordion-md.less';
+});