git.roojs.org Git - ratchet/blob - lib/css/base.css

   1 /* Hard reset
   2 -------------------------------------------------- */
   3
   4 * {
   5   padding: 0;
   6   margin: 0;
   7   border: 0;
   8 }
   9
  10 /* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */
  11 html {
  12   -webkit-text-size-adjust: 100%;
  13       -ms-text-size-adjust: 100%;
  14 }
  15
  16 /* Base styles
  17 -------------------------------------------------- */
  18
  19 body {
  20   position: fixed;
  21   top: 0;
  22   right: 0;
  23   bottom: 0;
  24   left: 0;
  25   font: 14px/1.25 "Helvetica Neue", sans-serif;
  26   color: #222;
  27   background-color: #fff;
  28 }
  29
  30 /* Universal link styling */
  31 a {
  32   color: #0882f0;
  33   text-decoration: none;
  34   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */
  35 }
  36
  37 /* Wrapper to be used around all content not in .bar-title and .bar-tab */
  38 .content {
  39   position: fixed;
  40   top: 0;
  41   right: 0;
  42   bottom: 0;
  43   left: 0;
  44   overflow: auto;
  45   background-color: #fff;
  46   -webkit-transition-property: top, bottom;
  47           transition-property: top, bottom;
  48   -webkit-transition-duration: .2s, .2s;
  49           transition-duration: .2s, .2s;
  50   -webkit-transition-timing-function: linear, linear;
  51           transition-timing-function: linear, linear;
  52   -webkit-overflow-scrolling: touch;
  53 }
  54
  55 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
  56    Note: This is a bug for "-webkit-overflow-scrolling: touch" */
  57 .content > * {
  58   -webkit-transform: translateZ(0px);
  59           transform: translateZ(0px);
  60 }
  61
  62 /* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */
  63 .content-padded {
  64   padding: 10px;
  65 }
  66
  67 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
  68    Note: For these to work, content must come after both bars in the markup */
  69 .bar-title ~ .content {
  70   top: 44px;
  71 }
  72 .bar-tab ~ .content {
  73   bottom: 51px;
  74 }
  75 .bar-header-secondary ~ .content {
  76   top: 88px;
  77 }