framework7/components/navbar/navbar-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  @import (multiple) '../../less/vars-ios.less';
  @duration: 400ms;
  .navbar {
    height: @navbarSize;
    font-size: 17px;
    background: @navbarBg;
    &.no-hairline {
      .hairline-remove(bottom);
    }
    &:after {
      backface-visibility: hidden;
    }
    a.link {
      justify-content: flex-start;
      line-height: @navbarSize;
      height: @navbarSize;
    }
    a.icon-only {
      width: @navbarSize;
      margin: 0;
      justify-content: center;
    }
    .title {
      font-size: 17px;
      margin: 0;
      line-height: 1.2;
    }
    .subtitle {
      color: #6d6d72;
      line-height: 1;
      font-size: 10px;
      text-align: center;
      font-weight: normal;
    }
    .left, .right {
      a + a {
        .ltr({
          margin-left: 15px;
        });
        .rtl({
          margin-right: 15px;
        });
      }
    }
    b, .title {
      font-weight: 600;
    }
    .left {
      .ltr({
        margin-right: 10px;
      });
      .rtl({
        margin-left: 10px;
      });
    }
    .right {
      .ltr({
        margin-left: 10px;
      });
      .rtl({
        margin-right: 10px;
      });
    }
    .right:first-child {
      .ltr({
        right: 8px;
      });
      .rtl({
        left: 8px;
      });
    }
  }
  .hairline-root('.navbar', bottom, @navbarBorderColor);
  .navbar-inner {
    justify-content: space-between;
    padding: 0 8px;
  }

  // Relation with page
  .navbar ~ *:not(.no-navbar) .page-content, .navbar ~ .page-content {
    padding-top: @navbarSize;
  }

  // Positions
  .navbar-previous {
    pointer-events: none;
    .left, .right, > .title, .subnavbar, .fading {
      opacity: 0;
    }
    .sliding {
      opacity: 0;
    }
    .subnavbar.sliding, &.sliding .subnavbar {
      opacity: 1;
      transform: translate3d(-100%, 0, 0);
    }
  }
  .navbar-next {
    pointer-events: none;
    .left, .right, > .title, .subnavbar, .fading {
      opacity: 0;
    }
    .sliding {
      opacity: 0;
    }
    &.sliding {
      .left, .right, > .title, .subnavbar {
        opacity: 0;
      }
    }
    .subnavbar.sliding, &.sliding .subnavbar {
      opacity: 1;
      transform: translate3d(100%, 0, 0);
    }
  }

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

  // Hidden
  .navbar-hidden {
    transform: translate3d(0, -100%, 0);
  }

  // Animations
  .router-transition-css-forward, .router-transition-css-backward {
    .navbar-current {
      .left, > .title, .right, .subnavbar {
        animation: ios-navbar-element-fade-out @duration forwards;
      }
      .sliding,
      .left.sliding .icon,
      &.sliding .left,
      &.sliding .left .icon,
      &.sliding > .title,
      &.sliding .right {
        transition-duration: @duration;
        opacity: 0 !important;
        animation: none;
      }
      &.sliding .subnavbar, .sliding.subnavbar {
        transition-duration: @duration;
        animation: none;
        opacity: 1;
      }
    }
  }
  .router-transition-css-forward .navbar-next, .router-transition-css-backward .navbar-previous {
    .left, > .title, .right, .subnavbar {
      animation: ios-navbar-element-fade-in @duration forwards;
    }
    & .sliding,
    & .left.sliding .icon,
    &.sliding .left,
    &.sliding .left .icon,
    &.sliding > .title,
    &.sliding .right,
    &.sliding .subnavbar {
      transition-duration: @duration;
      animation: none;
      transform: translate3d(0,0,0) !important;
      opacity: 1 !important;
    }
  }

  // Dark Theme
  & when (@includeDarkTheme) {
    .theme-dark {
      .navbar, .navbar& {
        background: @navbarBgDark;
        .hairline-color(bottom, @navbarBorderColorDark);
        .subtitle {
          color: #8e8e93;
        }
      }
    }
  }

  .safe-areas-landscape({
    .safe-area-left({
      .navbar-inner {
        padding-left: ~"calc(8px + constant(safe-area-inset-right))";
        padding-left: ~"calc(8px + env(safe-area-inset-right))";
      }
    });
    .safe-area-right({
      .navbar-inner {
        padding-right: ~"calc(8px + constant(safe-area-inset-right))";
        padding-right: ~"calc(8px + env(safe-area-inset-right))";
      }
    });
  });
}
@keyframes ios-navbar-element-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes ios-navbar-element-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}