framework7/components/navbar/navbar-aurora.less

Full featured mobile HTML framework for building iOS & Android apps

.aurora {
  .navbar {
    a.icon-only {
      margin: 0;
      justify-content: center;
    }
    .left,
    .right {
      a + a {
        .ltr({
          margin-left: 10px;
        });
        .rtl({
          margin-right: 10px;
        });
      }
    }
    b {
      font-weight: bold;
    }
    .left {
      .ltr({
        margin-right: 16px;
      });
      .rtl({
        margin-left: 16px;
      });
    }
    .right {
      .ltr({
        margin-left: 16px;
      });
      .rtl({
        margin-right: 16px;
      });
    }
    .right:first-child {
      .ltr({
        right: calc(16px + var(--f7-safe-area-right));
      });
      .rtl({
        left: calc(16px + var(--f7-safe-area-left));
      });
    }
  }

  .navbar-inner {
    justify-content: space-between;
  }
  .navbar-inner-left-title {
    justify-content: flex-start;
    .right {
      .ltr({
        margin-left: auto;
      });
      .rtl({
        margin-right: auto;
      });
    }
    .title {
      text-align: left;
      .ltr({
        margin-right: 16px;
      });
      .rtl({
        margin-left: 16px;
      });
    }
  }
}