@pi0/framework7/src/components/toolbar/toolbar-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  @import (multiple) '../../less/vars-md.less';
  @duration: 400ms;
  .toolbar {
    background: @toolbarBg;
    height: @toolbarSize;
    color: @toolbarColor;
    font-size: 14px;
    top: 0;
    .md-bar-shadow-to-bottom();
    &.no-shadow {
      .md-bar-no-shadow();
    }
    a {
      color: @toolbarLinkColor;
    }
    a.link {
      justify-content: center;
      padding: 0 16px;
      min-width: 48px;
      line-height: @toolbarSize;
      height: @toolbarSize;
      .md-link-highlight();
      i + span, i + i, span + i, span + span {
        .ltr({
          margin-left: 8px;
        });
        .rtl({
          margin-right: 8px;
        });
      }
    }
    a.icon-only {
      min-width: 0;
      flex-shrink: 0;
    }
  }
  .toolbar-inner {
    overflow: hidden;
  }

  .tabbar, .tabbar-labels {
    a.link, a.tab-link {
      padding-left: 0;
      padding-right: 0;
      font-size: 14px;
      text-transform: uppercase;
    }
    i.icon {
      height: 24px;
    }
    a.tab-link {
      transition-duration: 300ms;
      overflow: hidden;
      color: @tabbarLinkColor;
      position: relative;
      &.tab-link-active, &.active-state {
        color: @tabbarActiveLinkColor;
      }
    }
    .tab-link-highlight {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      background: rgba(255,255,255,0.5);
      transition-duration: 300ms;
      .ltr({
        left: 0;
      });
      .rtl({
        right: 0;
      })
    }
  }
  .toolbar-bottom-md, .messagebar {
    top: auto !important;
    bottom: 0 !important;
    .md-bar-shadow-to-top();
    .tab-link-highlight {
      bottom: auto;
      top: 0;
    }
  }
  .tabbar-labels {
    height: @tabbarLabelsSize;
    a.tab-link, a.link {
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .tabbar-label {
      margin-top: 10px;
      max-width: 100%;
      overflow: hidden;
    }
    &.toolbar-bottom-md {
      height: @tabbarLabelsBottomSize;
      a.tab-link, a.link {
        padding-top: 7px;
        padding-bottom: 7px;
      }
      .tabbar-label {
        text-transform: none;
        line-height: 1.2;
      }
    }
  }


  // Scrollable
  .tabbar-scrollable {
    .toolbar-inner {
      overflow: auto;
    }
    a.tab-link, a.link {
      padding: 0 16px;
    }
  }

  // Relation with page and navbar
  .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ * .page-content,
  .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .page-content {
    padding-top: @toolbarSize;
  }
  .toolbar.tabbar-labels:not(.toolbar-bottom-md) ~ * .page-content, .toolbar.tabbar-labels:not(.toolbar-bottom-md) ~ .page-content {
    padding-top: @tabbarLabelsSize;
  }

  // Hidden
  .toolbar-hidden {
    transform: translate3d(0, -100%, 0);
    .md-bar-no-shadow();
    &.toolbar-bottom-md, &.messagebar {
      transform: translate3d(0, 100%, 0);
    }
  }

  // With Navbar
  .navbar {
    + .toolbar:not(.toolbar-bottom-md):not(.messagebar) {
      top: @navbarSize;
    }
    + .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ * .page-content,
    + .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .page-content {
      padding-top: @toolbarSize + @navbarSize;
    }
    + .toolbar.tabbar-labels:not(.toolbar-bottom-md) ~ * .page-content, + .toolbar.tabbar-labels:not(.toolbar-bottom-md) ~ .page-content {
      padding-top: @tabbarLabelsSize + @navbarSize;
    }
    + .toolbar-hidden:not(.toolbar-bottom-md):not(.messagebar) {
      @translate: @navbarSize + @toolbarSize;
      transform: translate3d(0, -@translate, 0);
    }
    + .toolbar-hidden.tabbar-labels:not(.toolbar-bottom-md) {
      @translate: @navbarSize + @tabbarLabelsSize;
      transform: translate3d(0, -@translate, 0);
    }
    &.navbar-hidden {
      + .toolbar:not(.toolbar-bottom-md):not(.messagebar) {
        transform: translate3d(0, -@navbarSize, 0);
      }
    }
    @media (min-width: 768px) {
      + .toolbar:not(.toolbar-bottom-md):not(.messagebar) {
        top: @navbarSizeTablet;
      }
      + .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ * .page-content,
      + .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .page-content {
        padding-top: @toolbarSize + @navbarSizeTablet;
      }
      + .toolbar.tabbar-labels:not(.toolbar-bottom-md) ~ * .page-content, + .toolbar.tabbar-labels:not(.toolbar-bottom-md) ~ .page-content {
        padding-top: @tabbarLabelsSize + @navbarSizeTablet;
      }
      &.navbar-hidden {
        + .toolbar:not(.toolbar-bottom-md) {
          transform: translate3d(0, -@navbarSizeTablet, 0);
        }
      }
      + .toolbar-hidden:not(.toolbar-bottom-md):not(.messagebar) {
        @translate: @navbarSizeTablet + @toolbarSize;
        transform: translate3d(0, -@translate, 0);
      }
      + .toolbar-hidden.tabbar-labels:not(.toolbar-bottom-md) {
        @translate: @navbarSizeTablet + @tabbarLabelsSize;
        transform: translate3d(0, -@translate, 0);
      }
    }
  }

  // Bottom
  .toolbar-bottom-md ~ * .page-content,
  .toolbar-bottom-md ~ .page-content,
  .messagebar ~ * .page-content,
  .messagebar ~ .page-content {
    padding-bottom: @toolbarSize;
  }
  .toolbar-bottom-md.tabbar-labels ~ * .page-content, .toolbar-bottom-md.tabbar-labels ~ .page-content {
    padding-bottom: @tabbarLabelsBottomSize;
  }

  // Transitions
  .toolbar-transitioning, .navbar-transitioning + .toolbar {
    transition-duration: @duration;
  }

  .color-theme-loop({
    .color-theme-@{colorThemeName} {
      .toolbar:not(.messagebar), &.toolbar:not(.messagebar) {
        background: @colorThemeValue;
      }
    }
  });
  .color-loop({
    .toolbar:not(.messagebar).color-@{colorName} {
      background: @colorValue;
    }
  });
}