oui-kit/lib/mobile/oui-mobile.styl

> *...c'est un "kit" pour Vue.js :)*

@require "../stylus/index.styl";

vendors = official;

html.oui-mobile {
  --safe-top = env(safe-area-inset-top, 0);
  --safe-right = env(safe-area-inset-right, 0);
  --safe-bottom = env(safe-area-inset-bottom, 0);
  --safe-left = env(safe-area-inset-left, 0);

  &.virtual-keyboard {
    --safe-bottom: 0;
  }

  & {
    /* hidden and height are defined by the apps themselves */
    height: var(--visible-height, 100%) !important;
  }

  body {
    position: relative;
  }

  &, body, ._keyboard_aware_height, .oui-modal { /* hack: for modal */
    /* Animation only works well in PWA mode */
    /* https://forums.developer.apple.com/forums/thread/48088 */
    transition: height 400ms cubic-bezier(0.38, 0.7, 0.125, 1);
  }

  & {
    /* Avoids bouncy scrolling */
    /* https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/ */
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
  }

  &, * {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
  }

  @keyframes iosPreventScrollingBugIssues {
    /* https://gist.github.com/kiding/72721a0553fa93198ae2bb6eefaa3299 */
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  input:focus, textarea:focus, [contenteditable]:focus {
    /* Avoids scroll issues on keyboard showup */
    animation: iosPreventScrollingBugIssues 0.01s;
  }
}