@xenknight/framework7 0.0.2

package/components/toolbar/toolbar.less

@@ -0,0 +1,306 @@
+/* === Toolbar === */
+@import './toolbar-vars.less';
+
+.toolbar {
+  width: 100%;
+  position: relative;
+  margin: 0;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  z-index: 600;
+  box-sizing: border-box;
+  left: 0;
+  height: var(--f7-toolbar-height);
+  background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
+  color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
+  font-size: var(--f7-toolbar-font-size);
+  .ios-translucent-bars(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
+  b {
+    font-weight: 600;
+  }
+  a {
+    color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+    box-sizing: border-box;
+    flex-shrink: 1;
+    position: relative;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .link {
+    display: flex;
+    line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
+    height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
+    font-weight: var(--f7-toolbar-link-font-weight);
+  }
+  i.icon {
+    display: block;
+  }
+  &:after,
+  &:before {
+    backface-visibility: hidden;
+  }
+}
+.views,
+.view,
+.page {
+  > .toolbar {
+    position: absolute;
+  }
+}
+.toolbar-top,
+.ios .toolbar-top-ios,
+.md .toolbar-top-md {
+  top: 0;
+  .tab-link-highlight {
+    bottom: 0;
+  }
+  &.no-outline {
+    &:after {
+      display: none !important;
+    }
+  }
+  &.toolbar-hidden {
+    &:before {
+      display: none !important;
+    }
+  }
+  &:after,
+  &:before {
+    backface-visibility: hidden;
+  }
+  .hairline(bottom, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
+}
+.toolbar-bottom,
+.ios .toolbar-bottom-ios,
+.md .toolbar-bottom-md {
+  bottom: 0;
+  height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
+  .tab-link-highlight {
+    top: 0;
+  }
+  .toolbar-inner {
+    height: auto;
+    top: 0;
+    bottom: var(--f7-safe-area-bottom);
+  }
+  &.no-outline {
+    &:before {
+      display: none !important;
+    }
+  }
+  &.toolbar-hidden {
+    &:after {
+      display: none !important;
+    }
+  }
+
+  .hairline(top, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
+}
+.toolbar-inner {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  align-items: center;
+  align-content: center;
+  overflow: hidden;
+  padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0
+    calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
+}
+.tabbar,
+.tabbar-icons {
+  .views > & {
+    z-index: 5001;
+  }
+  a {
+    color: var(--f7-tabbar-link-inactive-color);
+  }
+  .link {
+    line-height: 1.4;
+  }
+  .tab-link,
+  .link {
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-transform: var(--f7-tabbar-link-text-transform);
+    font-weight: var(--f7-tabbar-link-font-weight);
+    letter-spacing: var(--f7-tabbar-link-letter-spacing);
+    overflow: hidden;
+  }
+  .tab-link-active {
+    color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
+    background-color: var(--f7-tabbar-link-active-bg-color, transparent);
+  }
+  i.icon {
+    font-size: var(--f7-tabbar-icon-size);
+    height: var(--f7-tabbar-icon-size);
+    line-height: var(--f7-tabbar-icon-size);
+  }
+  .md &.tabbar-icons .tab-link-highlight {
+    display: none;
+  }
+  .md &:not(.tabbar-icons) .tab-link-highlight {
+    position: absolute;
+    left: 0;
+    height: 2px;
+    background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
+    transition-duration: 300ms;
+    .ltr({
+      left: 0;
+    });
+    .rtl({
+      right: 0;
+    });
+  }
+}
+.tabbar-icons {
+  --f7-toolbar-height: var(--f7-tabbar-icons-height);
+  .tab-link,
+  .link {
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+  .tabbar-label {
+    display: block;
+    line-height: 1;
+    margin: 0;
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--f7-tabbar-label-font-size);
+    text-transform: var(--f7-tabbar-label-text-transform);
+    font-weight: var(--f7-tabbar-label-font-weight);
+    letter-spacing: var(--f7-tabbar-label-letter-spacing);
+  }
+}
+@media (min-width: 768px) and (min-height: 600px) {
+  :root {
+    --f7-tabbar-icons-height: var(--f7-tabbar-icons-tablet-height);
+    --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
+  }
+}
+.tabbar-scrollable {
+  .toolbar-inner {
+    justify-content: flex-start;
+    .scrollable();
+    .no-scrollbar();
+  }
+  .tab-link,
+  .link {
+    width: auto;
+    flex-shrink: 0;
+  }
+}
+// Transitions
+.toolbar-transitioning,
+.navbar-transitioning + .toolbar,
+.navbar-transitioning ~ * .toolbar {
+  transition-duration: var(--f7-toolbar-hide-show-transition-duration);
+}
+
+// Relation with page
+.toolbar-bottom,
+.ios .toolbar-bottom-ios,
+.md .toolbar-bottom-md {
+  ~ * {
+    --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
+  }
+  &.tabbar-icons ~ * {
+    --f7-page-toolbar-bottom-offset: var(--f7-tabbar-icons-height);
+  }
+}
+.toolbar-bottom,
+.ios .toolbar-bottom-ios,
+.md .toolbar-bottom-md {
+  &.toolbar-hidden {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+.toolbar-top,
+.ios .toolbar-top-ios,
+.md .toolbar-top-md {
+  ~ * {
+    --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
+  }
+  &.tabbar-icons ~ * {
+    --f7-page-toolbar-top-offset: var(--f7-tabbar-icons-height);
+  }
+}
+.toolbar-top,
+.ios .toolbar-top-ios,
+.md .toolbar-top-md {
+  &.toolbar-hidden {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.navbar ~ .toolbar-top,
+.navbars ~ .toolbar-top,
+.ios .navbar ~ .toolbar-top-ios,
+.ios .navbars ~ .toolbar-top-ios,
+.md .navbar ~ .toolbar-top-md,
+.navbar ~ * .toolbar-top,
+.navbars ~ * .toolbar-top,
+.ios .navbar ~ * .toolbar-top-ios,
+.ios .navbars ~ * .toolbar-top-ios,
+.md .navbar ~ * .toolbar-top-md,
+.navbar ~ .page:not(.no-navbar) .toolbar-top,
+.navbars ~ .page:not(.no-navbar) .toolbar-top,
+.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
+.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
+.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
+  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
+  &.toolbar-hidden {
+    transform: translate3d(
+      0,
+      calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))),
+      0
+    );
+    &.tabbar-icons {
+      transform: translate3d(
+        0,
+        calc(
+          -1 * (var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))
+        ),
+        0
+      );
+    }
+  }
+}
+.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
+.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
+.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
+.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
+.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
+.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
+  transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
+}
+.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
+.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
+.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
+.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
+.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
+.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
+  transform: translate3d(
+    0,
+    calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)),
+    0
+  );
+}
+
+.if-ios-theme({
+  @import './toolbar-ios.less';
+});
+.if-md-theme({
+  @import './toolbar-md.less';
+});

package/components/tooltip/tooltip-class.js

@@ -0,0 +1,336 @@
+import { getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+import Framework7Class from '../../shared/class.js';
+class Tooltip extends Framework7Class {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    super(params, [app]);
+    const tooltip = this;
+    const support = getSupport();
+    const defaults = extend({}, app.params.tooltip);
+    const document = getDocument();
+
+    // Extend defaults with modules params
+    tooltip.useModulesParams(defaults);
+    tooltip.params = extend(defaults, params);
+    if (typeof params.offset === 'undefined' && support.touch && tooltip.params.trigger === 'hover') {
+      tooltip.params.offset = 10;
+    }
+    const {
+      targetEl,
+      containerEl
+    } = tooltip.params;
+    if (!targetEl && !tooltip.params.delegated) return tooltip;
+    const $targetEl = $(targetEl);
+    if ($targetEl.length === 0 && !tooltip.params.delegated) return tooltip;
+    if ($targetEl[0] && $targetEl[0].f7Tooltip && !tooltip.params.delegated) return $targetEl[0].f7Tooltip;
+    let $containerEl = $(containerEl || app.$el).eq(0);
+    if ($containerEl.length === 0) {
+      $containerEl = app.$el;
+    }
+    const $el = $(tooltip.render()).eq(0);
+    extend(tooltip, {
+      app,
+      $targetEl,
+      targetEl: $targetEl && $targetEl[0],
+      $containerEl,
+      containerEl: $containerEl && $containerEl[0],
+      $el,
+      el: $el && $el[0],
+      text: tooltip.params.text || '',
+      visible: false,
+      opened: false
+    });
+    if ($targetEl[0]) $targetEl[0].f7Tooltip = tooltip;
+    const touchesStart = {};
+    let isTouched;
+    function handleClick() {
+      if (tooltip.opened) tooltip.hide();else tooltip.show(this);
+    }
+    function handleClickOut(e) {
+      if (tooltip.opened && ($(e.target).closest($targetEl).length || $(e.target).closest(tooltip.$el).length)) return;
+      tooltip.hide();
+    }
+    function handleTouchStart(e) {
+      if (isTouched) return;
+      isTouched = true;
+      touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+      touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+      tooltip.show(this);
+    }
+    function handleTouchMove(e) {
+      if (!isTouched) return;
+      const x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      const y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      const distance = ((x - touchesStart.x) ** 2 + (y - touchesStart.y) ** 2) ** 0.5;
+      if (distance > 50) {
+        isTouched = false;
+        tooltip.hide();
+      }
+    }
+    function handleTouchEnd() {
+      if (!isTouched) return;
+      isTouched = false;
+      tooltip.hide();
+    }
+    function handleMouseEnter() {
+      tooltip.show(this);
+    }
+    function handleMouseLeave() {
+      tooltip.hide();
+    }
+    function handleTransitionEnd() {
+      if (!$el.hasClass('tooltip-in')) {
+        $el.removeClass('tooltip-out').remove();
+      }
+    }
+    tooltip.attachEvents = function attachEvents() {
+      $el.on('transitionend', handleTransitionEnd);
+      if (tooltip.params.trigger === 'click') {
+        if (tooltip.params.delegated) {
+          $(document).on('click', tooltip.params.targetEl, handleClick);
+        } else {
+          tooltip.$targetEl.on('click', handleClick);
+        }
+        $('html').on('click', handleClickOut);
+        return;
+      }
+      if (tooltip.params.trigger === 'manual') return;
+      if (support.touch) {
+        const passive = support.passiveListener ? {
+          passive: true
+        } : false;
+        if (tooltip.params.delegated) {
+          $(document).on(app.touchEvents.start, tooltip.params.targetEl, handleTouchStart, passive);
+        } else {
+          tooltip.$targetEl.on(app.touchEvents.start, handleTouchStart, passive);
+        }
+        app.on('touchmove', handleTouchMove);
+        app.on('touchend:passive', handleTouchEnd);
+      } else {
+        // eslint-disable-next-line
+        if (tooltip.params.delegated) {
+          $(document).on(support.pointerEvents ? 'pointerenter' : 'mouseenter', tooltip.params.targetEl, handleMouseEnter, true);
+          $(document).on(support.pointerEvents ? 'pointerleave' : 'mouseleave', tooltip.params.targetEl, handleMouseLeave, true);
+        } else {
+          tooltip.$targetEl.on(support.pointerEvents ? 'pointerenter' : 'mouseenter', handleMouseEnter);
+          tooltip.$targetEl.on(support.pointerEvents ? 'pointerleave' : 'mouseleave', handleMouseLeave);
+        }
+      }
+    };
+    tooltip.detachEvents = function detachEvents() {
+      $el.off('transitionend', handleTransitionEnd);
+      if (tooltip.params.trigger === 'click') {
+        if (tooltip.params.delegated) {
+          $(document).on('click', tooltip.params.targetEl, handleClick);
+        } else {
+          tooltip.$targetEl.off('click', handleClick);
+        }
+        $('html').off('click', handleClickOut);
+        return;
+      }
+      if (tooltip.params.trigger === 'manual') return;
+      if (support.touch) {
+        const passive = support.passiveListener ? {
+          passive: true
+        } : false;
+        if (tooltip.params.delegated) {
+          $(document).off(app.touchEvents.start, tooltip.params.targetEl, handleTouchStart, passive);
+        } else {
+          tooltip.$targetEl.off(app.touchEvents.start, handleTouchStart, passive);
+        }
+        app.off('touchmove', handleTouchMove);
+        app.off('touchend:passive', handleTouchEnd);
+      } else {
+        // eslint-disable-next-line
+        if (tooltip.params.delegated) {
+          $(document).off(support.pointerEvents ? 'pointerenter' : 'mouseenter', tooltip.params.targetEl, handleMouseEnter, true);
+          $(document).off(support.pointerEvents ? 'pointerleave' : 'mouseleave', tooltip.params.targetEl, handleMouseLeave, true);
+        } else {
+          tooltip.$targetEl.off(support.pointerEvents ? 'pointerenter' : 'mouseenter', handleMouseEnter);
+          tooltip.$targetEl.off(support.pointerEvents ? 'pointerleave' : 'mouseleave', handleMouseLeave);
+        }
+      }
+    };
+
+    // Install Modules
+    tooltip.useModules();
+    tooltip.init();
+    return tooltip;
+  }
+  setTargetEl(targetEl) {
+    const tooltip = this;
+    tooltip.detachEvents();
+    tooltip.$targetEl = $(targetEl);
+    tooltip.targetEl = tooltip.$targetEl[0];
+    tooltip.attachEvents();
+    return tooltip;
+  }
+  position(targetEl) {
+    const tooltip = this;
+    const {
+      $el,
+      app,
+      $containerEl
+    } = tooltip;
+    const hasContainerEl = !!tooltip.params.containerEl;
+    const tooltipOffset = tooltip.params.offset || 0;
+    $el.css({
+      left: '',
+      top: ''
+    });
+    const $targetEl = $(targetEl || tooltip.targetEl);
+    const [width, height] = [$el.width(), $el.height()];
+    $el.css({
+      left: '',
+      top: ''
+    });
+    let targetWidth;
+    let targetHeight;
+    let targetOffsetLeft;
+    let targetOffsetTop;
+    const boundaries = hasContainerEl && $containerEl.length ? $containerEl[0].getBoundingClientRect() : app;
+    if ($targetEl && $targetEl.length > 0) {
+      targetWidth = $targetEl.outerWidth();
+      targetHeight = $targetEl.outerHeight();
+      if (typeof targetWidth === 'undefined' && typeof targetHeight === 'undefined') {
+        const clientRect = $targetEl[0].getBoundingClientRect();
+        targetWidth = clientRect.width;
+        targetHeight = clientRect.height;
+      }
+      const targetOffset = $targetEl.offset();
+      targetOffsetLeft = targetOffset.left - boundaries.left;
+      targetOffsetTop = targetOffset.top - boundaries.top;
+      const targetParentPage = $targetEl.parents('.page');
+      if (targetParentPage.length > 0) {
+        targetOffsetTop -= targetParentPage[0].scrollTop;
+      }
+    }
+    let [left, top] = [0, 0, 0];
+
+    // Top Position
+    let position = 'top';
+    if (height + tooltipOffset < targetOffsetTop) {
+      // On top
+      top = targetOffsetTop - height - tooltipOffset;
+    } else if (height < boundaries.height - targetOffsetTop - targetHeight) {
+      // On bottom
+      position = 'bottom';
+      top = targetOffsetTop + targetHeight + tooltipOffset;
+    } else {
+      // On middle
+      position = 'middle';
+      top = targetHeight / 2 + targetOffsetTop - height / 2;
+      if (top <= 0) {
+        top = 8;
+      } else if (top + height >= boundaries.height) {
+        top = boundaries.height - height - 8;
+      }
+    }
+
+    // Horizontal Position
+    if (position === 'top' || position === 'bottom') {
+      left = targetWidth / 2 + targetOffsetLeft - width / 2;
+      if (left < 8) left = 8;
+      if (left + width > boundaries.width) left = boundaries.width - width - 8;
+      if (left < 0) left = 0;
+    } else if (position === 'middle') {
+      left = targetOffsetLeft - width;
+      if (left < 8 || left + width > boundaries.width) {
+        if (left < 8) left = targetOffsetLeft + targetWidth;
+        if (left + width > boundaries.width) left = boundaries.width - width - 8;
+      }
+    }
+
+    // Apply Styles
+    $el.css({
+      top: `${top}px`,
+      left: `${left}px`
+    });
+  }
+  show(aroundEl) {
+    const tooltip = this;
+    const {
+      $el,
+      $targetEl,
+      $containerEl
+    } = tooltip;
+    if ($containerEl[0] && $el[0] && !$containerEl[0].contains($el[0])) {
+      $containerEl.append($el);
+    }
+    tooltip.position(aroundEl);
+    const $aroundEl = $(aroundEl);
+    tooltip.visible = true;
+    tooltip.opened = true;
+    $targetEl.trigger('tooltip:show');
+    $el.trigger('tooltip:show');
+    if ($aroundEl.length && $aroundEl[0] !== $targetEl[0]) {
+      $aroundEl.trigger('tooltip:show');
+    }
+    tooltip.emit('local::show tooltipShow', tooltip);
+    $el.removeClass('tooltip-out').addClass('tooltip-in');
+    return tooltip;
+  }
+  hide() {
+    const tooltip = this;
+    const {
+      $el,
+      $targetEl
+    } = tooltip;
+    tooltip.visible = false;
+    tooltip.opened = false;
+    $targetEl.trigger('tooltip:hide');
+    $el.trigger('tooltip:hide');
+    tooltip.emit('local::hide tooltipHide', tooltip);
+    $el.addClass('tooltip-out').removeClass('tooltip-in');
+    return tooltip;
+  }
+  render() {
+    const tooltip = this;
+    if (tooltip.params.render) return tooltip.params.render.call(tooltip, tooltip);
+    const {
+      cssClass,
+      text
+    } = tooltip.params;
+    return `
+      <div class="tooltip ${cssClass || ''}">
+        <div class="tooltip-content">${text || ''}</div>
+      </div>
+    `.trim();
+  }
+  setText(newText) {
+    const tooltip = this;
+    if (typeof newText === 'undefined') {
+      return tooltip;
+    }
+    tooltip.params.text = newText;
+    tooltip.text = newText;
+    if (tooltip.$el) {
+      tooltip.$el.children('.tooltip-content').html(newText);
+    }
+    if (tooltip.opened) {
+      tooltip.position();
+    }
+    return tooltip;
+  }
+  init() {
+    const tooltip = this;
+    tooltip.attachEvents();
+  }
+  destroy() {
+    const tooltip = this;
+    if (!tooltip.$targetEl || tooltip.destroyed) return;
+    tooltip.$targetEl.trigger('tooltip:beforedestroy');
+    tooltip.emit('local::beforeDestroy tooltipBeforeDestroy', tooltip);
+    tooltip.$el.remove();
+    if (tooltip.$targetEl[0]) delete tooltip.$targetEl[0].f7Tooltip;
+    tooltip.detachEvents();
+    deleteProps(tooltip);
+    tooltip.destroyed = true;
+  }
+}
+export default Tooltip;

package/components/tooltip/tooltip-ios.less

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

package/components/tooltip/tooltip-md.less

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

package/components/tooltip/tooltip-rtl.css

@@ -0,0 +1 @@
+:root{--f7-tooltip-padding:8px 16px;--f7-tooltip-font-size:14px;--f7-tooltip-font-weight:500;--f7-tooltip-desktop-padding:6px 8px;--f7-tooltip-desktop-font-size:12px}.ios{--f7-tooltip-border-radius:4px;--f7-tooltip-bg-color:rgba(0, 0, 0, 0.87);--f7-tooltip-text-color:#fff}.md{--f7-tooltip-border-radius:8px}.md,.md .dark,.md [class*=color-]{--f7-tooltip-bg-color:var(--f7-md-secondary);--f7-tooltip-text-color:var(--f7-md-on-secondary)}.tooltip{position:absolute;z-index:20000;background:var(--f7-tooltip-bg-color);border-radius:var(--f7-tooltip-border-radius);padding:var(--f7-tooltip-padding);color:var(--f7-tooltip-text-color);font-size:var(--f7-tooltip-font-size);font-weight:var(--f7-tooltip-font-weight);box-sizing:border-box;line-height:1.2;opacity:0;transform:scale(.9);transition-duration:150ms;transition-property:opacity,transform;z-index:99000}.tooltip.tooltip-in{transform:scale(1);opacity:1}.tooltip.tooltip-out{opacity:0;transform:scale(1)}.device-desktop .tooltip{font-size:var(--f7-tooltip-desktop-font-size);padding:var(--f7-tooltip-desktop-padding)}

package/components/tooltip/tooltip-vars.less

@@ -0,0 +1,19 @@
+:root {
+  --f7-tooltip-padding: 8px 16px;
+  --f7-tooltip-font-size: 14px;
+  --f7-tooltip-font-weight: 500;
+  --f7-tooltip-desktop-padding: 6px 8px;
+  --f7-tooltip-desktop-font-size: 12px;
+}
+.ios-vars({
+  --f7-tooltip-border-radius: 4px;
+  --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
+  --f7-tooltip-text-color: #fff;
+});
+.md-vars({
+  --f7-tooltip-border-radius: 8px;
+});
+.md-color-vars({
+  --f7-tooltip-bg-color: var(--f7-md-secondary);
+  --f7-tooltip-text-color: var(--f7-md-on-secondary);
+});

package/components/tooltip/tooltip.css

@@ -0,0 +1 @@
+:root{--f7-tooltip-padding:8px 16px;--f7-tooltip-font-size:14px;--f7-tooltip-font-weight:500;--f7-tooltip-desktop-padding:6px 8px;--f7-tooltip-desktop-font-size:12px}.ios{--f7-tooltip-border-radius:4px;--f7-tooltip-bg-color:rgba(0, 0, 0, 0.87);--f7-tooltip-text-color:#fff}.md{--f7-tooltip-border-radius:8px}.md,.md .dark,.md [class*=color-]{--f7-tooltip-bg-color:var(--f7-md-secondary);--f7-tooltip-text-color:var(--f7-md-on-secondary)}.tooltip{position:absolute;z-index:20000;background:var(--f7-tooltip-bg-color);border-radius:var(--f7-tooltip-border-radius);padding:var(--f7-tooltip-padding);color:var(--f7-tooltip-text-color);font-size:var(--f7-tooltip-font-size);font-weight:var(--f7-tooltip-font-weight);box-sizing:border-box;line-height:1.2;opacity:0;transform:scale(.9);transition-duration:150ms;transition-property:opacity,transform;z-index:99000}.tooltip.tooltip-in{transform:scale(1);opacity:1}.tooltip.tooltip-out{opacity:0;transform:scale(1)}.device-desktop .tooltip{font-size:var(--f7-tooltip-desktop-font-size);padding:var(--f7-tooltip-desktop-padding)}