oui-kit/src/app-mobile.styl

🎯 *UI toolkit with a French touch* 🇫🇷

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

:root {
  --footer-bg: var(--t3-bg);
}

html, body {
  /* This seems to fix overscrolling */
  /* https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/ */
  position: fixed;
  overflow: hidden;
}

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

  100% {
    opacity: 1;
  }
}

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  background: var(--footer-bg);
}

body {
  /* https://forums.developer.apple.com/forums/thread/48088 */
  transition: height 400ms cubic-bezier(0.38, 0.7, 0.125, 1);
}

#app {
  use: stack-y;
  height: 100%;
}

.app-mobile {
  use: stack-y;
  height: 100%;  
  // use: safe-margin;
}

main {
  use: grow;
  use: scroll;
}

header, footer {
  min-height: 44;
  background: var(--footer-bg);
  padding-left: -safe-left;
  padding-right: -safe-right;
}

header {
  padding-top: -safe-top;
}

footer {
  padding-bottom: -safe-bottom;

  .virtual-keyboard & {
    background: lime;
    padding-bottom: 0;
  }
}

html {
  /* Avoids overflow */
  -webkit-overflow-scrolling: none;
  overscroll-behavior: none;
}

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

  100% {
    opacity: 1;
  }
}

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