framework7/components/sheet/sheet-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';
  .sheet-modal {
    background: #cfd5da;
    .toolbar {
      background: @barsBg;
      + .sheet-modal-inner {
        height: ~"calc(100% - 44px)";
      }
      ~ .sheet-modal-inner .page-content {
        padding-bottom: 0;
      }
    }
  }
  .hairline-root('.sheet-modal .toolbar', top, #929499);

  .safe-areas({
    .sheet-modal {
      .toolbar ~ .sheet-modal-inner .page-content,
      .sheet-modal-inner > .page-content {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
      }
    }
  });

  // Dark Theme
  & when (@includeDarkTheme) {
    .theme-dark {
      .sheet-modal, .sheet-modal& {
        background-color: #171717;
        .toolbar {
          background-color: @barsBgDark;
          .hairline-color(top, @barsBorderColorDark)
        }
      }
    }
  }
}