framework7/components/navbar/navbar-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  .navbar {
    .material-icons {
      width: 24px;
    }
    .f7-icons {
      width: 28px;
    }
    a.link {
      padding: 0 16px;
      min-width: 48px;
      .link-highlight();
    }
    a.icon-only {
      min-width: 0;
      flex-shrink: 0;
      width: 56px;
    }
    .right {
      .ltr({
        margin-left: auto;
      });
      .rtl({
        margin-right: auto;
      });
    }
    .right:first-child {
      .ltr({
        right: var(--f7-safe-area-right)
      });
      .rtl({
        left: var(--f7-safe-area-left)
      });
    }
  }
  .navbar-inner {
    justify-content: flex-start;
    overflow: hidden;
  }
  .navbar-inner-large:not(.navbar-inner-large-collapsed) {
    overflow: visible;
  }
  .page.page-with-subnavbar .navbar-inner {
    overflow: visible;
  }
  .navbar-inner-centered-title {
    justify-content: space-between;
    .right {
      .ltr({
        margin-left: 0;
      });
      .rtl({
        margin-right: 0;
      })
    }
    .title {
      text-align: center;
    }
  }
}