framework7/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;
      font-weight: 500;
      letter-spacing: 0.03em;
    }
    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: 2px;
      background: #fff;
      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;
        font-weight: normal;
        letter-spacing: 0;
      }
    }
  }


  // Scrollable
  .tabbar-scrollable {
    .toolbar-inner {
      overflow: auto;
      justify-content: flex-start;
    }
    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):not(.toolbar-hidden) {
        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):not(.messagebar):not(.toolbar-hidden) {
          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):not(.messagebar) {
        @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;
    }
  });

  .safe-areas({
    .views, .view, .page, .popup, .panel, .login-screen {
      >.toolbar:first-child:not(.toolbar-bottom-md) {
        height: ~"calc(@{toolbarSize} + constant(safe-area-inset-top))";
        height: ~"calc(@{toolbarSize} + env(safe-area-inset-top))";
        .toolbar-inner {
          height: auto;
        }
        .toolbar-inner {
          bottom: 0;
          top: constant(safe-area-inset-top);
          top: env(safe-area-inset-top);
        }
        &.tabbar-labels {
          height: ~"calc(@{tabbarLabelsSize} + constant(safe-area-inset-top))";
          height: ~"calc(@{tabbarLabelsSize} + env(safe-area-inset-top))";
        }
      }
      >.toolbar-bottom-md {
        height: ~"calc(@{toolbarSize} + constant(safe-area-inset-bottom))";
        height: ~"calc(@{toolbarSize} + env(safe-area-inset-bottom))";
        .toolbar-inner {
          height: auto;
          top: 0;
          bottom: constant(safe-area-inset-bottom);
          bottom: env(safe-area-inset-bottom);
        }
        &.tabbar-labels {
          height: ~"calc(@{tabbarLabelsBottomSize} + constant(safe-area-inset-bottom))";
          height: ~"calc(@{tabbarLabelsBottomSize} + env(safe-area-inset-bottom))";
        }
      }
    }

    // Relation with page
    .toolbar-bottom-md ~ * .page-content,
    .toolbar-bottom-md ~ .page-content,
    .messagebar ~ * .page-content,
    .messagebar ~ .page-content {
      padding-bottom: ~"calc(@{toolbarSize} + constant(safe-area-inset-bottom))";
      padding-bottom: ~"calc(@{toolbarSize} + env(safe-area-inset-bottom))";
    }
    .toolbar-bottom-md.tabbar-labels ~ * .page-content,
    .toolbar-bottom-md.tabbar-labels ~ .page-content {
      padding-bottom: ~"calc(@{tabbarLabelsBottomSize} + constant(safe-area-inset-bottom))";
      padding-bottom: ~"calc(@{tabbarLabelsBottomSize} + env(safe-area-inset-bottom))";
    }
  });
  .safe-areas-landscape({
    .safe-area-left({
      .toolbar-inner {
        padding-left: constant(safe-area-inset-left);
        padding-left: env(safe-area-inset-left);
      }
    });
    .safe-area-right({
      .toolbar-inner {
        padding-right: constant(safe-area-inset-right);
        padding-right: env(safe-area-inset-right);
      }
    });
  });
}