@xenknight/framework7 0.0.2

package/components/treeview/treeview.js

@@ -0,0 +1,74 @@
+import $ from '../../shared/dom7.js';
+import { bindMethods, iosPreloaderContent, mdPreloaderContent } from '../../shared/utils.js';
+const Treeview = {
+  open(itemEl) {
+    const app = this;
+    const $itemEl = $(itemEl).eq(0);
+    if (!$itemEl.length) return;
+    $itemEl.addClass('treeview-item-opened');
+    $itemEl.trigger('treeview:open');
+    app.emit('treeviewOpen', $itemEl[0]);
+    function done(cancel) {
+      if (cancel) {
+        $itemEl.removeClass('treeview-item-opened');
+        $itemEl.trigger('treeview:close');
+        app.emit('treeviewClose', $itemEl[0]);
+      } else {
+        $itemEl[0].f7TreeviewChildrenLoaded = true;
+      }
+      $itemEl.find('.treeview-toggle').removeClass('treeview-toggle-hidden');
+      $itemEl.find('.treeview-preloader').remove();
+    }
+    if ($itemEl.hasClass('treeview-load-children') && !$itemEl[0].f7TreeviewChildrenLoaded) {
+      const preloaders = {
+        iosPreloaderContent,
+        mdPreloaderContent
+      };
+      $itemEl.trigger('treeview:loadchildren', done);
+      app.emit('treeviewLoadChildren', $itemEl[0], done);
+      $itemEl.find('.treeview-toggle').addClass('treeview-toggle-hidden');
+      $itemEl.find('.treeview-item-root').prepend(`<div class="preloader treeview-preloader">${preloaders[`${app.theme}PreloaderContent`]}</div>`);
+    }
+  },
+  close(itemEl) {
+    const app = this;
+    const $itemEl = $(itemEl).eq(0);
+    if (!$itemEl.length) return;
+    $itemEl.removeClass('treeview-item-opened');
+    $itemEl.trigger('treeview:close');
+    app.emit('treeviewClose', $itemEl[0]);
+  },
+  toggle(itemEl) {
+    const app = this;
+    const $itemEl = $(itemEl).eq(0);
+    if (!$itemEl.length) return;
+    const wasOpened = $itemEl.hasClass('treeview-item-opened');
+    app.treeview[wasOpened ? 'close' : 'open']($itemEl);
+  }
+};
+export default {
+  name: 'treeview',
+  create() {
+    const app = this;
+    bindMethods(app, {
+      treeview: Treeview
+    });
+  },
+  clicks: {
+    '.treeview-toggle': function toggle($clickedEl, clickedData, e) {
+      const app = this;
+      if ($clickedEl.parents('.treeview-item-toggle').length) return;
+      const $treeviewItemEl = $clickedEl.parents('.treeview-item').eq(0);
+      if (!$treeviewItemEl.length) return;
+      e.preventF7Router = true;
+      app.treeview.toggle($treeviewItemEl[0]);
+    },
+    '.treeview-item-toggle': function toggle($clickedEl, clickedData, e) {
+      const app = this;
+      const $treeviewItemEl = $clickedEl.closest('.treeview-item').eq(0);
+      if (!$treeviewItemEl.length) return;
+      e.preventF7Router = true;
+      app.treeview.toggle($treeviewItemEl[0]);
+    }
+  }
+};

package/components/treeview/treeview.less

@@ -0,0 +1,160 @@
+/* === Treeview === */
+@import './treeview-vars.less';
+
+.treeview-item-root {
+  .ltr({
+    padding-left: var(--f7-treeview-item-padding-left);
+    padding-right: var(--f7-treeview-item-padding-right);
+  });
+  .rtl({
+    padding-right: var(--f7-treeview-item-padding-left);
+    padding-left: var(--f7-treeview-item-padding-right);
+  });
+  min-height: var(--f7-treeview-item-height);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.treeview-item-content {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  > i,
+  > .f7-icons,
+  > .material-icons {
+    font-size: var(--f7-treeview-icon-size);
+    color: var(--f7-treeview-icon-color);
+  }
+  &:first-child {
+    .ltr({
+      margin-left: calc(var(--f7-treeview-toggle-size) + 5px);
+    });
+    .rtl({
+      margin-right: calc(var(--f7-treeview-toggle-size) + 5px);
+    });
+  }
+  > * + * {
+    .ltr({
+      margin-left: 5px;
+    });
+    .rtl({
+      margin-right: 5px;
+    });
+  }
+}
+.treeview-item-label {
+  font-size: var(--f7-treeview-label-font-size);
+  font-weight: var(--f7-treeview-label-font-weight);
+  color: var(--f7-treeview-label-text-color);
+}
+.treeview-toggle {
+  width: var(--f7-treeview-toggle-size);
+  height: var(--f7-treeview-toggle-size);
+  cursor: pointer;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0);
+  transition-duration: 200ms;
+  position: relative;
+  .ltr({
+    margin-right: 5px;;
+  });
+  .rtl({
+    margin-left: 5px;
+  });
+  &.active-state {
+    background-color: var(--f7-treeview-toggle-pressed-bg-color);
+  }
+  &:after {
+    transition-duration: 200ms;
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    transform: translate(-50%, -50%);
+    .ltr({
+      border-left: 6px solid var(--f7-treeview-toggle-color);
+    });
+    .rtl({
+      border-right: 6px solid var(--f7-treeview-toggle-color);
+    });
+  }
+}
+.treeview-toggle-hidden {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+.treeview-preloader {
+  --f7-preloader-size: var(--f7-treeview-toggle-size);
+  .ltr({
+    margin-right: calc(-1 * var(--f7-treeview-toggle-size));
+  });
+  .rtl({
+    margin-left: calc(-1 * var(--f7-treeview-toggle-size));
+  });
+}
+.treeview-item-children {
+  display: none;
+}
+.treeview-item-opened {
+  > .treeview-item-children {
+    display: block;
+  }
+  > .treeview-item-root .treeview-toggle:after {
+    .ltr({
+      transform: translate(-50%, -50%) rotate(90deg);
+    });
+    .rtl({
+      transform: translate(-50%, -50%) rotate(-90deg);
+    });
+  }
+}
+a.treeview-item-root {
+  color: var(--f7-treeview-label-text-color);
+}
+.treeview-item-selectable > .treeview-item-root,
+.treeview-item-selectable.treeview-item-root {
+  cursor: pointer;
+  transition-duration: 150ms;
+}
+a.treeview-item-root {
+  transition-duration: 150ms;
+  &.active-state {
+    background: var(--f7-treeview-link-pressed-bg-color);
+  }
+}
+.treeview-item-toggle > .treeview-item-root,
+.treeview-item-toggle.treeview-item-root {
+  cursor: pointer;
+}
+.treeview-item-selected > .treeview-item-root,
+.treeview-item-selected.treeview-item-root {
+  background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
+}
+.generate-treeview-children(@n, @i: 1) when (@i <= @n) {
+  .treeview-item {
+    .treeview-item-root {
+      .ltr({
+        padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * @i);
+      });
+      .rtl({
+        padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * @i);
+      });
+    }
+    .generate-treeview-children(@n, (@i + 1));
+  }
+}
+.treeview-item {
+  .generate-treeview-children(10);
+}
+
+.if-ios-theme({
+  @import './treeview-ios.less';
+});
+.if-md-theme({
+  @import './treeview-md.less';
+});

package/components/typography/typography-ios.less

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

package/components/typography/typography-md.less

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

package/components/typography/typography-rtl.css

@@ -0,0 +1 @@
+:root{--f7-typography-padding:16px;--f7-typography-margin:16px}.display-flex{display:flex!important}.display-block{display:block!important}.display-inline-flex{display:inline-flex!important}.display-inline-block{display:inline-block!important}.display-inline{display:inline!important}.display-none{display:none!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-shrink-2{flex-shrink:2!important}.flex-shrink-3{flex-shrink:3!important}.flex-shrink-4{flex-shrink:4!important}.flex-shrink-5{flex-shrink:5!important}.flex-shrink-6{flex-shrink:6!important}.flex-shrink-7{flex-shrink:7!important}.flex-shrink-8{flex-shrink:8!important}.flex-shrink-9{flex-shrink:9!important}.flex-shrink-10{flex-shrink:10!important}.flex-direction-row{flex-direction:row!important}.flex-direction-row-reverse{flex-direction:row-reverse!important}.flex-direction-column{flex-direction:column!important}.flex-direction-column-reverse{flex-direction:column-reverse!important}.justify-content-flex-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-flex-end{justify-content:flex-end!important}.justify-content-space-between{justify-content:space-between!important}.justify-content-space-around{justify-content:space-around!important}.justify-content-space-evenly{justify-content:space-evenly!important}.justify-content-stretch{justify-content:stretch!important}.justify-content-start{justify-content:start!important}.justify-content-end{justify-content:end!important}.justify-content-left{justify-content:left!important}.justify-content-right{justify-content:right!important}.align-content-flex-start{align-content:flex-start!important}.align-content-flex-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-space-between{align-content:space-between!important}.align-content-space-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-items-baseline{align-items:baseline!important}.align-items-flex-start{align-items:flex-start!important}.align-items-flex-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-stretch{align-items:stretch!important}.align-self-flex-start{align-self:flex-start!important}.align-self-flex-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-stretch{align-self:stretch!important}.text-align-left{text-align:left!important}.text-align-center{text-align:center!important}.text-align-right{text-align:right!important}.text-align-justify{text-align:justify!important}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.vertical-align-bottom{vertical-align:bottom!important}.vertical-align-middle{vertical-align:middle!important}.vertical-align-top{vertical-align:top!important}.no-padding{padding:0!important}.no-padding-left{padding-left:0!important}.no-padding-right{padding-right:0!important}.no-padding-horizontal{padding-left:0!important;padding-right:0!important}.no-padding-top{padding-top:0!important}.no-padding-bottom{padding-bottom:0!important}.no-padding-vertical{padding-top:0!important;padding-bottom:0!important}.no-margin{margin:0!important}.no-margin-left{margin-left:0!important}.no-margin-right{margin-right:0!important}.no-margin-horizontal{margin-left:0!important;margin-right:0!important}.no-margin-top{margin-top:0!important}.no-margin-bottom{margin-bottom:0!important}.no-margin-vertical{margin-top:0!important;margin-bottom:0!important}.width-auto{width:auto!important}.width-100{width:100%!important}.padding{padding:var(--f7-typography-padding)!important}.padding-half{padding:calc(var(--f7-typography-padding)/ 2)!important}.padding-top{padding-top:var(--f7-typography-padding)!important}.padding-top-half{padding-top:calc(var(--f7-typography-padding)/ 2)!important}.padding-bottom{padding-bottom:var(--f7-typography-padding)!important}.padding-bottom-half{padding-bottom:calc(var(--f7-typography-padding)/ 2)!important}.padding-left{padding-left:var(--f7-typography-padding)!important}.padding-left-half{padding-left:calc(var(--f7-typography-padding)/ 2)!important}.padding-right{padding-right:var(--f7-typography-padding)!important}.padding-right-half{padding-right:calc(var(--f7-typography-padding)/ 2)!important}.padding-vertical{padding-top:var(--f7-typography-padding)!important;padding-bottom:var(--f7-typography-padding)!important}.padding-vertical-half{padding-top:calc(var(--f7-typography-padding)/ 2)!important;padding-bottom:calc(var(--f7-typography-padding)/ 2)!important}.padding-horizontal{padding-left:var(--f7-typography-padding)!important;padding-right:var(--f7-typography-padding)!important}.padding-horizontal-half{padding-left:calc(var(--f7-typography-padding)/ 2)!important;padding-right:calc(var(--f7-typography-padding)/ 2)!important}.margin{margin:var(--f7-typography-margin)!important}.margin-half{margin:calc(var(--f7-typography-margin)/ 2)!important}.margin-top{margin-top:var(--f7-typography-margin)!important}.margin-top-half{margin-top:calc(var(--f7-typography-margin)/ 2)!important}.margin-bottom{margin-bottom:var(--f7-typography-margin)!important}.margin-bottom-half{margin-bottom:calc(var(--f7-typography-margin)/ 2)!important}.margin-left{margin-left:var(--f7-typography-margin)!important}.margin-left-half{margin-left:calc(var(--f7-typography-margin)/ 2)!important}.margin-right{margin-right:var(--f7-typography-margin)!important}.margin-right-half{margin-right:calc(var(--f7-typography-margin)/ 2)!important}.margin-vertical{margin-top:var(--f7-typography-margin)!important;margin-bottom:var(--f7-typography-margin)!important}.margin-vertical-half{margin-top:calc(var(--f7-typography-margin)/ 2)!important;margin-bottom:calc(var(--f7-typography-margin)/ 2)!important}.margin-horizontal{margin-left:var(--f7-typography-margin)!important;margin-right:var(--f7-typography-margin)!important}.margin-horizontal-half{margin-left:calc(var(--f7-typography-margin)/ 2)!important;margin-right:calc(var(--f7-typography-margin)/ 2)!important}[class*=text-color-]{color:var(--f7-theme-color-text-color)!important}[class*=bg-color-]{background-color:var(--f7-theme-color-bg-color)!important}[class*=border-color-]{border-color:var(--f7-theme-color-border-color)!important}

package/components/typography/typography-vars.less

@@ -0,0 +1,4 @@
+:root {
+  --f7-typography-padding: 16px;
+  --f7-typography-margin: 16px;
+}

package/components/typography/typography.css

@@ -0,0 +1 @@
+:root{--f7-typography-padding:16px;--f7-typography-margin:16px}.display-flex{display:flex!important}.display-block{display:block!important}.display-inline-flex{display:inline-flex!important}.display-inline-block{display:inline-block!important}.display-inline{display:inline!important}.display-none{display:none!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-shrink-2{flex-shrink:2!important}.flex-shrink-3{flex-shrink:3!important}.flex-shrink-4{flex-shrink:4!important}.flex-shrink-5{flex-shrink:5!important}.flex-shrink-6{flex-shrink:6!important}.flex-shrink-7{flex-shrink:7!important}.flex-shrink-8{flex-shrink:8!important}.flex-shrink-9{flex-shrink:9!important}.flex-shrink-10{flex-shrink:10!important}.flex-direction-row{flex-direction:row!important}.flex-direction-row-reverse{flex-direction:row-reverse!important}.flex-direction-column{flex-direction:column!important}.flex-direction-column-reverse{flex-direction:column-reverse!important}.justify-content-flex-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-flex-end{justify-content:flex-end!important}.justify-content-space-between{justify-content:space-between!important}.justify-content-space-around{justify-content:space-around!important}.justify-content-space-evenly{justify-content:space-evenly!important}.justify-content-stretch{justify-content:stretch!important}.justify-content-start{justify-content:start!important}.justify-content-end{justify-content:end!important}.justify-content-left{justify-content:left!important}.justify-content-right{justify-content:right!important}.align-content-flex-start{align-content:flex-start!important}.align-content-flex-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-space-between{align-content:space-between!important}.align-content-space-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-items-baseline{align-items:baseline!important}.align-items-flex-start{align-items:flex-start!important}.align-items-flex-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-stretch{align-items:stretch!important}.align-self-flex-start{align-self:flex-start!important}.align-self-flex-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-stretch{align-self:stretch!important}.text-align-left{text-align:left!important}.text-align-center{text-align:center!important}.text-align-right{text-align:right!important}.text-align-justify{text-align:justify!important}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.vertical-align-bottom{vertical-align:bottom!important}.vertical-align-middle{vertical-align:middle!important}.vertical-align-top{vertical-align:top!important}.no-padding{padding:0!important}.no-padding-left{padding-left:0!important}.no-padding-right{padding-right:0!important}.no-padding-horizontal{padding-left:0!important;padding-right:0!important}.no-padding-top{padding-top:0!important}.no-padding-bottom{padding-bottom:0!important}.no-padding-vertical{padding-top:0!important;padding-bottom:0!important}.no-margin{margin:0!important}.no-margin-left{margin-left:0!important}.no-margin-right{margin-right:0!important}.no-margin-horizontal{margin-left:0!important;margin-right:0!important}.no-margin-top{margin-top:0!important}.no-margin-bottom{margin-bottom:0!important}.no-margin-vertical{margin-top:0!important;margin-bottom:0!important}.width-auto{width:auto!important}.width-100{width:100%!important}.padding{padding:var(--f7-typography-padding)!important}.padding-half{padding:calc(var(--f7-typography-padding)/ 2)!important}.padding-top{padding-top:var(--f7-typography-padding)!important}.padding-top-half{padding-top:calc(var(--f7-typography-padding)/ 2)!important}.padding-bottom{padding-bottom:var(--f7-typography-padding)!important}.padding-bottom-half{padding-bottom:calc(var(--f7-typography-padding)/ 2)!important}.padding-left{padding-left:var(--f7-typography-padding)!important}.padding-left-half{padding-left:calc(var(--f7-typography-padding)/ 2)!important}.padding-right{padding-right:var(--f7-typography-padding)!important}.padding-right-half{padding-right:calc(var(--f7-typography-padding)/ 2)!important}.padding-vertical{padding-top:var(--f7-typography-padding)!important;padding-bottom:var(--f7-typography-padding)!important}.padding-vertical-half{padding-top:calc(var(--f7-typography-padding)/ 2)!important;padding-bottom:calc(var(--f7-typography-padding)/ 2)!important}.padding-horizontal{padding-left:var(--f7-typography-padding)!important;padding-right:var(--f7-typography-padding)!important}.padding-horizontal-half{padding-left:calc(var(--f7-typography-padding)/ 2)!important;padding-right:calc(var(--f7-typography-padding)/ 2)!important}.margin{margin:var(--f7-typography-margin)!important}.margin-half{margin:calc(var(--f7-typography-margin)/ 2)!important}.margin-top{margin-top:var(--f7-typography-margin)!important}.margin-top-half{margin-top:calc(var(--f7-typography-margin)/ 2)!important}.margin-bottom{margin-bottom:var(--f7-typography-margin)!important}.margin-bottom-half{margin-bottom:calc(var(--f7-typography-margin)/ 2)!important}.margin-left{margin-left:var(--f7-typography-margin)!important}.margin-left-half{margin-left:calc(var(--f7-typography-margin)/ 2)!important}.margin-right{margin-right:var(--f7-typography-margin)!important}.margin-right-half{margin-right:calc(var(--f7-typography-margin)/ 2)!important}.margin-vertical{margin-top:var(--f7-typography-margin)!important;margin-bottom:var(--f7-typography-margin)!important}.margin-vertical-half{margin-top:calc(var(--f7-typography-margin)/ 2)!important;margin-bottom:calc(var(--f7-typography-margin)/ 2)!important}.margin-horizontal{margin-left:var(--f7-typography-margin)!important;margin-right:var(--f7-typography-margin)!important}.margin-horizontal-half{margin-left:calc(var(--f7-typography-margin)/ 2)!important;margin-right:calc(var(--f7-typography-margin)/ 2)!important}[class*=text-color-]{color:var(--f7-theme-color-text-color)!important}[class*=bg-color-]{background-color:var(--f7-theme-color-bg-color)!important}[class*=border-color-]{border-color:var(--f7-theme-color-border-color)!important}

package/components/typography/typography.d.ts

@@ -0,0 +1,14 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Typography {
+  interface AppMethods {}
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const TypographyComponent: Framework7Plugin;
+export default TypographyComponent;

package/components/typography/typography.js

@@ -0,0 +1,3 @@
+export default {
+  name: 'typography'
+};

package/components/typography/typography.less

@@ -0,0 +1,220 @@
+/* === Typography === */
+@import './typography-vars.less';
+
+.rules-loop(@values, @ruleName) {
+  each(@values, {
+    .@{ruleName}-@{value} {
+      @{ruleName}: @value !important;
+    }
+  });
+}
+
+// Display
+@display: flex, block, inline-flex, inline-block, inline, none;
+.rules-loop(@display, display);
+
+// Flex Shrink
+@shrinks: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+.rules-loop(@shrinks, flex-shrink);
+
+// Flex Direction
+@directions: row, row-reverse, column, column-reverse;
+.rules-loop(@directions, flex-direction);
+
+// Justify Content
+@justify: flex-start, center, flex-end, space-between, space-around, space-evenly, stretch, start,
+  end, left, right;
+.rules-loop(@justify, justify-content);
+
+// Align Content
+@alignContent: flex-start, flex-end, center, space-between, space-around, stretch;
+.rules-loop(@alignContent, align-content);
+
+// Align Items
+@alignItems: baseline, flex-start, flex-end, center, stretch;
+.rules-loop(@alignItems, align-items);
+
+// Align Self
+@alignSelf: flex-start, flex-end, center, stretch;
+.rules-loop(@alignSelf, align-self);
+
+// Text Align
+@textAlign: left, center, right, justify;
+.rules-loop(@textAlign, text-align);
+
+// Float
+@float: left, right, none;
+.rules-loop(@float, float);
+
+// Vertical Align
+@verticalAlign: bottom, middle, top;
+.rules-loop(@verticalAlign, vertical-align);
+
+// Padding
+.no-padding {
+  padding: 0 !important;
+}
+.no-padding-left {
+  padding-left: 0 !important;
+}
+.no-padding-right {
+  padding-right: 0 !important;
+}
+.no-padding-horizontal {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.no-padding-top {
+  padding-top: 0 !important;
+}
+.no-padding-bottom {
+  padding-bottom: 0 !important;
+}
+.no-padding-vertical {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+// Margin
+.no-margin {
+  margin: 0 !important;
+}
+.no-margin-left {
+  margin-left: 0 !important;
+}
+.no-margin-right {
+  margin-right: 0 !important;
+}
+.no-margin-horizontal {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+.no-margin-top {
+  margin-top: 0 !important;
+}
+.no-margin-bottom {
+  margin-bottom: 0 !important;
+}
+.no-margin-vertical {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+// Width
+.width-auto {
+  width: auto !important;
+}
+.width-100 {
+  width: 100% !important;
+}
+
+// Padding
+.padding {
+  padding: var(--f7-typography-padding) !important;
+}
+.padding-half {
+  padding: calc(var(--f7-typography-padding) / 2) !important;
+}
+.padding-top {
+  padding-top: var(--f7-typography-padding) !important;
+}
+.padding-top-half {
+  padding-top: calc(var(--f7-typography-padding) / 2) !important;
+}
+.padding-bottom {
+  padding-bottom: var(--f7-typography-padding) !important;
+}
+.padding-bottom-half {
+  padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
+}
+.padding-left {
+  padding-left: var(--f7-typography-padding) !important;
+}
+.padding-left-half {
+  padding-left: calc(var(--f7-typography-padding) / 2) !important;
+}
+.padding-right {
+  padding-right: var(--f7-typography-padding) !important;
+}
+.padding-right-half {
+  padding-right: calc(var(--f7-typography-padding) / 2) !important;
+}
+.padding-vertical {
+  padding-top: var(--f7-typography-padding) !important;
+  padding-bottom: var(--f7-typography-padding) !important;
+}
+.padding-vertical-half {
+  padding-top: calc(var(--f7-typography-padding) / 2) !important;
+  padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
+}
+.padding-horizontal {
+  padding-left: var(--f7-typography-padding) !important;
+  padding-right: var(--f7-typography-padding) !important;
+}
+.padding-horizontal-half {
+  padding-left: calc(var(--f7-typography-padding) / 2) !important;
+  padding-right: calc(var(--f7-typography-padding) / 2) !important;
+}
+// Margin
+.margin {
+  margin: var(--f7-typography-margin) !important;
+}
+.margin-half {
+  margin: calc(var(--f7-typography-margin) / 2) !important;
+}
+.margin-top {
+  margin-top: var(--f7-typography-margin) !important;
+}
+.margin-top-half {
+  margin-top: calc(var(--f7-typography-margin) / 2) !important;
+}
+.margin-bottom {
+  margin-bottom: var(--f7-typography-margin) !important;
+}
+.margin-bottom-half {
+  margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
+}
+.margin-left {
+  margin-left: var(--f7-typography-margin) !important;
+}
+.margin-left-half {
+  margin-left: calc(var(--f7-typography-margin) / 2) !important;
+}
+.margin-right {
+  margin-right: var(--f7-typography-margin) !important;
+}
+.margin-right-half {
+  margin-right: calc(var(--f7-typography-margin) / 2) !important;
+}
+.margin-vertical {
+  margin-top: var(--f7-typography-margin) !important;
+  margin-bottom: var(--f7-typography-margin) !important;
+}
+.margin-vertical-half {
+  margin-top: calc(var(--f7-typography-margin) / 2) !important;
+  margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
+}
+.margin-horizontal {
+  margin-left: var(--f7-typography-margin) !important;
+  margin-right: var(--f7-typography-margin) !important;
+}
+.margin-horizontal-half {
+  margin-left: calc(var(--f7-typography-margin) / 2) !important;
+  margin-right: calc(var(--f7-typography-margin) / 2) !important;
+}
+// Colors
+[class*='text-color-'] {
+  color: var(--f7-theme-color-text-color) !important;
+}
+[class*='bg-color-'] {
+  background-color: var(--f7-theme-color-bg-color) !important;
+}
+[class*='border-color-'] {
+  border-color: var(--f7-theme-color-border-color) !important;
+}
+
+.if-ios-theme({
+  @import './typography-ios.less';
+});
+.if-md-theme({
+  @import './typography-md.less';
+});

package/components/view/resizable-view.js

@@ -0,0 +1,125 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+function resizableView(view) {
+  const app = view.app;
+  const support = getSupport();
+  if (view.resizableInitialized) return;
+  extend(view, {
+    resizable: true,
+    resizableWidth: null,
+    resizableInitialized: true
+  });
+  const $htmlEl = $('html');
+  const {
+    $el
+  } = view;
+  if (!$el) return;
+  let $resizeHandlerEl;
+  let isTouched;
+  let isMoved;
+  const touchesStart = {};
+  let touchesDiff;
+  let width;
+  let minWidth;
+  let maxWidth;
+  function transformCSSWidth(v) {
+    if (!v) return null;
+    if (v.indexOf('%') >= 0 || v.indexOf('vw') >= 0) {
+      return parseInt(v, 10) / 100 * app.width;
+    }
+    const newV = parseInt(v, 10);
+    if (Number.isNaN(newV)) return null;
+    return newV;
+  }
+  function isResizable() {
+    return view.resizable && $el.hasClass('view-resizable') && $el.hasClass('view-master-detail');
+  }
+  function handleTouchStart(e) {
+    if (!isResizable()) return;
+    touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+    touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+    isMoved = false;
+    isTouched = true;
+    const $pageMasterEl = $el.children('.page-master');
+    minWidth = transformCSSWidth($pageMasterEl.css('min-width'));
+    maxWidth = transformCSSWidth($pageMasterEl.css('max-width'));
+  }
+  function handleTouchMove(e) {
+    if (!isTouched) return;
+    e.f7PreventSwipePanel = true;
+    const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+    if (!isMoved) {
+      width = $resizeHandlerEl[0].offsetLeft + $resizeHandlerEl[0].offsetWidth;
+      $el.addClass('view-resizing');
+      $htmlEl.css('cursor', 'col-resize');
+    }
+    isMoved = true;
+    e.preventDefault();
+    touchesDiff = pageX - touchesStart.x;
+    let newWidth = width + touchesDiff;
+    if (minWidth && !Number.isNaN(minWidth)) {
+      newWidth = Math.max(newWidth, minWidth);
+    }
+    if (maxWidth && !Number.isNaN(maxWidth)) {
+      newWidth = Math.min(newWidth, maxWidth);
+    }
+    newWidth = Math.min(Math.max(newWidth, 0), app.width);
+    view.resizableWidth = newWidth;
+    $htmlEl[0].style.setProperty('--f7-page-master-width', `${newWidth}px`);
+    $el.trigger('view:resize', newWidth);
+    view.emit('local::resize viewResize', view, newWidth);
+  }
+  function handleTouchEnd() {
+    $('html').css('cursor', '');
+    if (!isTouched || !isMoved) {
+      isTouched = false;
+      isMoved = false;
+      return;
+    }
+    isTouched = false;
+    isMoved = false;
+    $htmlEl[0].style.setProperty('--f7-page-master-width', `${view.resizableWidth}px`);
+    $el.removeClass('view-resizing');
+  }
+  function handleResize() {
+    if (!view.resizableWidth) return;
+    minWidth = transformCSSWidth($resizeHandlerEl.css('min-width'));
+    maxWidth = transformCSSWidth($resizeHandlerEl.css('max-width'));
+    if (minWidth && !Number.isNaN(minWidth) && view.resizableWidth < minWidth) {
+      view.resizableWidth = Math.max(view.resizableWidth, minWidth);
+    }
+    if (maxWidth && !Number.isNaN(maxWidth) && view.resizableWidth > maxWidth) {
+      view.resizableWidth = Math.min(view.resizableWidth, maxWidth);
+    }
+    view.resizableWidth = Math.min(Math.max(view.resizableWidth, 0), app.width);
+    $htmlEl[0].style.setProperty('--f7-page-master-width', `${view.resizableWidth}px`);
+  }
+  $resizeHandlerEl = view.$el.children('.view-resize-handler');
+  if (!$resizeHandlerEl.length) {
+    view.$el.append('<div class="view-resize-handler"></div>');
+    $resizeHandlerEl = view.$el.children('.view-resize-handler');
+  }
+  view.$resizeHandlerEl = $resizeHandlerEl;
+  $el.addClass('view-resizable');
+
+  // Add Events
+  const passive = support.passiveListener ? {
+    passive: true
+  } : false;
+  view.$el.on(app.touchEvents.start, '.view-resize-handler', handleTouchStart, passive);
+  app.on('touchmove:active', handleTouchMove);
+  app.on('touchend:passive', handleTouchEnd);
+  app.on('resize', handleResize);
+  view.on('beforeOpen', handleResize);
+  view.once('viewDestroy', () => {
+    $el.removeClass('view-resizable');
+    view.$resizeHandlerEl.remove();
+    view.$el.off(app.touchEvents.start, '.view-resize-handler', handleTouchStart, passive);
+    app.off('touchmove:active', handleTouchMove);
+    app.off('touchend:passive', handleTouchEnd);
+    app.off('resize', handleResize);
+    view.off('beforeOpen', handleResize);
+  });
+}
+export default resizableView;