framework7/components/subnavbar/subnavbar-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;
  .subnavbar {
    height: 45px;
    margin-top: -1px;
    padding-top: 1px;
    background: @barsBg;
    &.no-hairline {
      .hairline-remove(bottom);
    }
    .title {
      font-weight: 700;
      line-height: 1;
      overflow: visible;
      font-size: 34px;
      text-align: center;
      display: flex;
      align-items: center;
      align-self: flex-start;
      flex-shrink: 10;
      letter-spacing: -0.03em;
    }
    .ltr({
      .title {
        margin-left: 7px;
      }
      .left, .right {
        a + a {
          margin-left: 15px;
        }
      }
      .left {
        margin-right: 10px;
      }
      .right {
        margin-left: 10px;
      }
      .right:first-child {
        right: 8px;
      }
    });
    .rtl({
      .title {
        margin-right: 7px;
      }
      .left, .right {
        a + a {
          margin-right: 15px;
        }
      }
      .left {
        margin-left: 10px;
      }
      .right {
        margin-right: 10px;
      }
      .right:first-child {
        left: 8px;
      }
    });

    a.link {
      line-height: 44px;
      height: 44px;
      justify-content: flex-start;
    }
    a.icon-only {
      min-width: 44px;
      justify-content: center;
      margin: 0;
    }
  }
  .hairline-root('.subnavbar', bottom, @barsBorderColor);

  .subnavbar-inner {
    padding: 0 8px;
  }

  // Relation with page
  .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
  .navbar ~ .subnavbar
  {
    top: 44px;
  }

  .page-with-subnavbar .page-content,
  .subnavbar ~ .page-content,
  .subnavbar ~ * .page-content
  {
    padding-top: 44px;
  }

  .navbar ~ .page-with-subnavbar:not(.no-navbar) .page-content,
  .page-with-subnavbar .navbar ~ .page-content,
  .navbar ~ *:not(.no-navbar) .subnavbar ~ .page-content,
  .navbar ~ *:not(.no-navbar) .subnavbar ~ * .page-content
  {
    padding-top: 88px;
  }

  // Dark Theme
  .theme-dark {
    .subnavbar, .subnavbar& {
      background: @navbarBgDark;
      .hairline-color(bottom, @navbarBorderColorDark);
    }
  }

  .safe-areas-landscape({
    .safe-area-left({
      .subnavbar-inner {
        padding-left: ~"calc(8px + constant(safe-area-inset-left))";
        padding-left: ~"calc(8px + env(safe-area-inset-left))";
      }
    });
    .safe-area-right({
      .subnavbar-inner {
        padding-right: ~"calc(8px + constant(safe-area-inset-right))";
        padding-right: ~"calc(8px + env(safe-area-inset-right))";
      }
    });
  });
}