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

🎯 *UI toolkit with a French touch* 🇫🇷

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

vendors = official;

:root {
  --safe-top = 0;
  --safe-right = 0;
  --safe-bottom = 0;
  --safe-left = 0;
}

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;
  }

  /* Always correct height also for virtual keyboard */
  .oui-mobile-fullheight {
     height: var(--visible-height, 100%) !important;
  }

  &.virtual-keyboard-transition,
  &.virtual-keyboard-transition body,
  &.virtual-keyboard-transition .oui-mobile-fullheight { /* hack: for modal */
    /* Animation only works well in PWA mode */
    /* https://forums.developer.apple.com/forums/thread/48088 */
    /* Only animate when keyboard appears (shrinking), not when it hides (growing) */
    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.4s;
  }
}