framework7 7.1.5 → 8.0.0-beta.2

package/components/grid/grid.less

@@ -1,200 +1,73 @@
 /* === Grid === */
 @import './grid-vars.less';
 
-@cols: 5, 10, 15, 20, 25, 30, 100/3, 35, 40, 45, 50, 55, 60, 65, 100 * (2/3), 70, 75, 80, 85, 90, 95,
-  100;
+@cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20;
 
-.row {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  --f7-cols-per-row: 1;
-  + .row {
-    margin-top: var(--f7-grid-row-gap);
+.grid {
+  display: grid;
+  &.grid-gap {
+    gap: var(--f7-grid-gap);
   }
-  > [class*='col-'],
-  > .col {
-    box-sizing: border-box;
-    width: calc(
-      (100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row)
-    );
-    &.resizable {
-      position: relative;
-    }
-  }
-  &.resizable {
-    position: relative;
+}
+each(@cols, {
+  .grid-cols-@{value} {
+    grid-template-columns: repeat(@value, minmax(0,1fr));
   }
-  &.no-gap {
-    --f7-grid-gap: 0px;
-    --f7-grid-row-gap: 0px;
+});
+each(@cols, {
+  .grid-rows-@{value} {
+    grid-template-rows: repeat(@value, minmax(0,1fr));
   }
-
+});
+@media (min-width: @breakpoints[xsmall]) {
   each(@cols, {
-    @className: floor((@value));
-    @n: (100 / @value);
-    .col-@{className} {
-      --f7-cols-per-row: @n;
+    .xsmall-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .xsmall-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
     }
   });
+}
+@media (min-width: @breakpoints[small]) {
   each(@cols, {
-    .col:nth-last-of-type(@{index}),
-    .col:nth-last-of-type(@{index}) ~ .col {
-      --f7-cols-per-row: @index;
+    .small-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .small-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
     }
   });
-
-  @media (min-width: @breakpoints[xsmall]) {
-    each(@cols, {
-      @className: floor((@value));
-      @n: (100 / @value);
-      .xsmall-@{className} {
-        --f7-cols-per-row: @n;
-      }
-    });
-    each(@cols, {
-      .xsmall-auto:nth-last-of-type(@{index}),
-      .xsmall-auto:nth-last-of-type(@{index}) ~ .xsmall-auto {
-        --f7-cols-per-row: @index;
-      }
-    });
-  }
-  @media (min-width: @breakpoints[small]) {
-    each(@cols, {
-      @className: floor((@value));
-      @n: (100 / @value);
-      .small-@{className} {
-        --f7-cols-per-row: @n;
-      }
-    });
-    each(@cols, {
-      .small-auto:nth-last-of-type(@{index}),
-      .small-auto:nth-last-of-type(@{index}) ~ .small-auto {
-        --f7-cols-per-row: @index;
-      }
-    });
-  }
-  @media (min-width: @breakpoints[medium]) {
-    each(@cols, {
-      @className: floor((@value));
-      @n: (100 / @value);
-      .medium-@{className} {
-        --f7-cols-per-row: @n;
-      }
-    });
-    each(@cols, {
-      .medium-auto:nth-last-of-type(@{index}),
-      .medium-auto:nth-last-of-type(@{index}) ~ .medium-auto {
-        --f7-cols-per-row: @index;
-      }
-    });
-  }
-  @media (min-width: @breakpoints[large]) {
-    each(@cols, {
-      @className: floor((@value));
-      @n: (100 / @value);
-      .large-@{className} {
-        --f7-cols-per-row: @n;
-      }
-    });
-    each(@cols, {
-      .large-auto:nth-last-of-type(@{index}),
-      .large-auto:nth-last-of-type(@{index}) ~ .large-auto {
-        --f7-cols-per-row: @index;
-      }
-    });
-  }
-  @media (min-width: @breakpoints[xlarge]) {
-    each(@cols, {
-      @className: floor((@value));
-      @n: (100 / @value);
-      .xlarge-@{className} {
-        --f7-cols-per-row: @n;
-      }
-    });
-    each(@cols, {
-      .xlarge-auto:nth-last-of-type(@{index}),
-      .xlarge-auto:nth-last-of-type(@{index}) ~ .xlarge-auto {
-        --f7-cols-per-row: @index;
-      }
-    });
-  }
-}
-.row .resize-handler {
-  position: absolute;
-  user-select: none;
-  z-index: 100;
-  &:before {
-    content: '';
-    position: absolute;
-  }
-  &:after {
-    content: '';
-    position: absolute;
-    border-radius: 4px;
-    background: var(--f7-grid-resize-handler-bg-color);
-  }
 }
-.row > .resize-handler {
-  width: 100%;
-  height: var(--f7-grid-row-gap);
-  left: 0;
-  top: 100%;
-  cursor: row-resize;
-  &:before {
-    left: 0%;
-    top: 50%;
-    height: 12px;
-    width: 100%;
-    min-height: var(--f7-grid-row-gap);
-    transform: translateY(-50%);
-  }
-  &:after {
-    height: 4px;
-    margin-top: -2px;
-    width: 80%;
-    max-width: 20px;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%);
-  }
+@media (min-width: @breakpoints[medium]) {
+  each(@cols, {
+    .medium-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .medium-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
+    }
+  });
 }
-[class*='col-'] > .resize-handler,
-.col > .resize-handler {
-  width: var(--f7-grid-gap);
-  left: 100%;
-  top: 0;
-  height: 100%;
-  cursor: col-resize;
-  &:before {
-    left: 50%;
-    top: 0;
-    height: 100%;
-    width: 12px;
-    min-width: var(--f7-grid-gap);
-    transform: translateX(-50%);
-  }
-  &:after {
-    width: 4px;
-    margin-left: -2px;
-    height: 80%;
-    max-height: 20px;
-    border-radius: 4px;
-    left: 50%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
+@media (min-width: @breakpoints[large]) {
+  each(@cols, {
+    .large-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .large-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
+    }
+  });
 }
-.row:last-child,
-.row:last-of-type,
-.row [class*='col-']:last-child,
-.row [class*='col-']:last-of-type,
-.row .col:last-child,
-.row .col:last-of-type {
-  > .resize-handler {
-    display: none;
-  }
+@media (min-width: @breakpoints[xlarge]) {
+  each(@cols, {
+    .xlarge-grid-cols-@{value} {
+      grid-template-columns: repeat(@value, minmax(0,1fr));
+    }
+    .xlarge-grid-rows-@{value} {
+      grid-template-rows: repeat(@value, minmax(0,1fr));
+    }
+  });
 }
 
 .if-ios-theme({
@@ -203,6 +76,3 @@
 .if-md-theme({
   @import './grid-md.less';
 });
-.if-aurora-theme({
-  @import './grid-aurora.less';
-});

package/components/icon/icon.less

@@ -31,6 +31,3 @@ i.icon {
 .if-md-theme({
   @import './icon-md.less';
 });
-.if-aurora-theme({
-  @import './icon-aurora.less';
-});

package/components/infinite-scroll/infinite-scroll-rtl.css

@@ -1 +1 @@
-.infinite-scroll-preloader{margin-left:auto;margin-right:auto;text-align:center}.infinite-scroll-preloader.preloader{display:block}.ios .infinite-scroll-preloader{margin-top:35px;margin-bottom:35px}.ios .infinite-scroll-preloader .preloader,.ios .infinite-scroll-preloader.preloader{width:27px;height:27px}.md .infinite-scroll-preloader{margin-top:32px;margin-bottom:32px}.aurora .infinite-scroll-preloader{margin-top:16px;margin-bottom:16px}
+.infinite-scroll-preloader{margin-left:auto;margin-right:auto;text-align:center}.infinite-scroll-preloader.preloader{display:block}.ios .infinite-scroll-preloader{margin-top:35px;margin-bottom:35px}.ios .infinite-scroll-preloader .preloader,.ios .infinite-scroll-preloader.preloader{width:27px;height:27px}.md .infinite-scroll-preloader{margin-top:32px;margin-bottom:32px}

package/components/infinite-scroll/infinite-scroll.css

@@ -1 +1 @@
-.infinite-scroll-preloader{margin-left:auto;margin-right:auto;text-align:center}.infinite-scroll-preloader.preloader{display:block}.ios .infinite-scroll-preloader{margin-top:35px;margin-bottom:35px}.ios .infinite-scroll-preloader .preloader,.ios .infinite-scroll-preloader.preloader{width:27px;height:27px}.md .infinite-scroll-preloader{margin-top:32px;margin-bottom:32px}.aurora .infinite-scroll-preloader{margin-top:16px;margin-bottom:16px}
+.infinite-scroll-preloader{margin-left:auto;margin-right:auto;text-align:center}.infinite-scroll-preloader.preloader{display:block}.ios .infinite-scroll-preloader{margin-top:35px;margin-bottom:35px}.ios .infinite-scroll-preloader .preloader,.ios .infinite-scroll-preloader.preloader{width:27px;height:27px}.md .infinite-scroll-preloader{margin-top:32px;margin-bottom:32px}

package/components/infinite-scroll/infinite-scroll.js

@@ -12,13 +12,10 @@ const InfiniteScroll = {
     let virtualList;
     const onTop = $el.hasClass('infinite-scroll-top');
     if (!distance) distance = 50;
-
     if (typeof distance === 'string' && distance.indexOf('%') >= 0) {
       distance = parseInt(distance, 10) / 100 * height;
     }
-
     if (distance > height) distance = height;
-
     if (onTop) {
       if (scrollTop < distance) {
         $el.trigger('infinite', e);
@@ -27,31 +24,25 @@ const InfiniteScroll = {
     } else if (scrollTop + height >= scrollHeight - distance) {
       if (virtualListContainer.length > 0) {
         virtualList = virtualListContainer.eq(-1)[0].f7VirtualList;
-
         if (virtualList && !virtualList.reachEnd && !virtualList.params.updatableScroll) {
           return;
         }
       }
-
       $el.trigger('infinite', e);
       app.emit('infinite', $el[0], e);
     }
   },
-
   create(el) {
     const $el = $(el);
     const app = this;
-
     function scrollHandler(e) {
       app.infiniteScroll.handle(this, e);
     }
-
     $el.each(element => {
       element.f7InfiniteScrollHandler = scrollHandler;
       element.addEventListener('scroll', element.f7InfiniteScrollHandler);
     });
   },
-
   destroy(el) {
     const $el = $(el);
     $el.each(element => {
@@ -59,18 +50,15 @@ const InfiniteScroll = {
       delete element.f7InfiniteScrollHandler;
     });
   }
-
 };
 export default {
   name: 'infiniteScroll',
-
   create() {
     const app = this;
     bindMethods(app, {
       infiniteScroll: InfiniteScroll
     });
   },
-
   on: {
     tabMounted(tabEl) {
       const app = this;
@@ -81,7 +69,6 @@ export default {
         app.infiniteScroll.create(el);
       });
     },
-
     tabBeforeRemove(tabEl) {
       const $tabEl = $(tabEl);
       const app = this;
@@ -91,20 +78,17 @@ export default {
         app.infiniteScroll.destroy(el);
       });
     },
-
     pageInit(page) {
       const app = this;
       page.$el.find('.infinite-scroll-content').each(el => {
         app.infiniteScroll.create(el);
       });
     },
-
     pageBeforeRemove(page) {
       const app = this;
       page.$el.find('.infinite-scroll-content').each(el => {
         app.infiniteScroll.destroy(el);
       });
     }
-
   }
 };

package/components/infinite-scroll/infinite-scroll.less

@@ -13,6 +13,3 @@
 .if-md-theme({
   @import './infinite-scroll-md.less';
 });
-.if-aurora-theme({
-  @import './infinite-scroll-aurora.less';
-});

package/components/input/input-ios.less

@@ -5,6 +5,9 @@
       margin-top: 0;
     }
   }
+  .item-floating-label {
+    transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height) + 25%));
+  }
   .item-input-focused .item-floating-label {
     color: var(--f7-label-text-color);
   }
@@ -17,18 +20,14 @@
     margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
     margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
   }
-  .inline-labels,
-  .inline-label {
-    .item-label,
-    .item-floating-label {
-      + .item-input-wrap {
-        margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
-      }
-    }
-    .item-input-wrap {
-      margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
+
+  .item-input:not(.item-input-outline) {
+    .item-content,
+    &.item-content {
+      background: var(--f7-input-item-bg-color);
     }
   }
+
   .item-input-error-message,
   .item-input-info,
   .input-error-message,
@@ -79,40 +78,49 @@
     }
   }
 
-  .item-input-outline,
+  .item-input-outline .item-content,
+  .item-input-outline.item-content {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+  li.item-input-outline:first-child,
+  li:first-child > .item-input-outline {
+    padding-top: 16px;
+    &::after {
+      top: 16px;
+    }
+  }
+  li.item-input-outline:last-child,
+  li:last-child > .item-input-outline {
+    padding-bottom: 16px;
+    &::after {
+      bottom: 16px;
+    }
+  }
+
+  .item-input-outline .item-content,
+  .item-input-outline.item-content,
   .input-outline {
+    .item-inner {
+      display: block;
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
     .item-input-wrap {
-      margin-top: 0;
-      margin-bottom: 0;
+      margin-top: -22px;
     }
-    .item-input-error-message,
-    .item-input-info,
-    .input-error-message,
-    .input-info {
-      margin-top: 0;
-      white-space: normal;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .item-input-info,
-    .input-info {
-      margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
-    }
-    .item-input-error-message,
-    .input-error-message {
-      margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
-    }
-    &.item-input-with-info,
-    &.input-with-info {
-      .item-input-wrap {
-        margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
-      }
-    }
-    &.item-input-with-error-message,
-    &.input-with-error-message {
-      .item-input-wrap {
-        margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
-      }
+
+    .item-label,
+    .item-floating-label {
+      display: inline-flex;
+      margin: -8px -4px -4px;
+      top: -4px;
+    }
+
+    .item-floating-label {
+      transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height)));
     }
   }
 }

package/components/input/input-md.less

@@ -1,35 +1,104 @@
 .md {
-  .item-input:not(.item-input-outline) .item-input-wrap,
-  .input:not(.input-outline) {
-    .hairline(bottom, var(--f7-list-item-border-color));
-    &:after {
-      transition-duration: 200ms;
-    }
-  }
   .item-input-wrap {
     min-height: var(--f7-input-height);
   }
 
+  .item-floating-label {
+    transform: scale(var(--f7-floating-label-scale))
+      translateY(calc((var(--f7-input-height) / 2) / var(--f7-floating-label-scale)));
+  }
+
   .item-input {
-    .item-media {
-      align-self: flex-end;
-    }
     .item-inner {
       .hairline-remove(bottom);
     }
   }
-  .inline-labels,
-  .inline-label {
-    .item-media {
-      align-self: flex-start;
-      padding-top: 14px;
+  .item-input {
+    .item-content,
+    &.item-content {
+      margin-left: 16px;
+      margin-right: 16px;
+      padding-top: 8px;
+      padding-bottom: 8px;
     }
   }
+  .input {
+    .hairline(bottom, var(--f7-input-border-color));
+    &::after {
+      transform: scaleY(1) !important;
+      transition-duration: 200ms;
+      bottom: 0px;
+    }
+    &.input-focused::after {
+      transform: scaleY(2) !important;
+      background: var(--f7-input-focused-border-color, var(--f7-theme-color));
+    }
+    &.input-invalid {
+      &::after {
+        transform: scaleY(2) !important;
+        background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
+      }
+    }
+  }
+  .item-input:not(.item-input-outline) {
+    .item-content,
+    &.item-content {
+      .hairline(bottom, var(--f7-input-border-color));
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 8px;
+        bottom: 8px;
+        right: 0;
+        border-radius: var(--f7-input-item-border-radius);
+        background: var(--f7-input-item-bg-color);
+        pointer-events: none;
+      }
+      &::after {
+        transform: scaleY(1) !important;
+        transition-duration: 200ms;
+        bottom: 8px;
+      }
+      &.item-input-focused::after {
+        transform: scaleY(2) !important;
+        background: var(--f7-input-focused-border-color, var(--f7-theme-color));
+      }
+      &.item-input-invalid,
+      &.input-invalid {
+        &::after {
+          transform: scaleY(2) !important;
+          background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
+        }
+      }
+    }
+  }
+
+  .item-input-outline .item-content,
+  .item-input-outline.item-content,
+  .input-outline {
+    .item-inner {
+      padding-top: 16px;
+      padding-bottom: 16px;
+    }
+
+    .item-label,
+    .item-floating-label {
+      --label-height: calc(var(--f7-label-height) + 8px);
+      margin: calc(0px - 16px - var(--label-height) / 2) -4px 4px;
+    }
+
+    .item-floating-label {
+      transform: scale(var(--f7-floating-label-scale))
+        translateY(calc((var(--f7-input-height) / 2) + 8px));
+    }
+  }
+
   .item-input-with-error-message,
   .item-input-with-info,
   .input-with-error-message,
   .input-with-info {
-    padding-bottom: 20px;
+    padding-bottom: 24px !important;
   }
   .item-input-error-message,
   .item-input-info,
@@ -37,7 +106,6 @@
   .input-info {
     position: absolute;
     top: 100%;
-    margin-top: 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -89,9 +157,9 @@
 
   .input-clear-button {
     &:after {
-      font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
+      font-size: var(--f7-input-clear-button-size);
       content: 'delete_round_md';
-      line-height: 1.2;
+      line-height: 1;
     }
     &:before {
       width: 48px;