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

   1 /* Hard reset
   2 -------------------------------------------------- */
   3
   4 html,
   5 body,
   6 div,
   7 span,
   8 iframe,
   9 h1,
  10 h2,
  11 h3,
  12 h4,
  13 h5,
  14 h6,
  15 p,
  16 blockquote,
  17 pre,
  18 a,
  19 abbr,
  20 acronym,
  21 address,
  22 big,
  23 cite,
  24 code,
  25 del,
  26 dfn,
  27 em,
  28 img,
  29 ins,
  30 kbd,
  31 q,
  32 s,
  33 samp,
  34 small,
  35 strike,
  36 strong,
  37 sub,
  38 sup,
  39 tt,
  40 var,
  41 b,
  42 u,
  43 i,
  44 center,
  45 dl,
  46 dt,
  47 dd,
  48 ol,
  49 ul,
  50 li,
  51 fieldset,
  52 form,
  53 label,
  54 legend,
  55 table,
  56 caption,
  57 tbody,
  58 tfoot,
  59 thead,
  60 tr,
  61 th,
  62 td,
  63 article,
  64 aside,
  65 canvas,
  66 details,
  67 embed,
  68 figure,
  69 figcaption,
  70 footer,
  71 header,
  72 hgroup,
  73 menu,
  74 nav,
  75 output,
  76 section,
  77 summary,
  78 time,
  79 audio,
  80 video {
  81   padding: 0;
  82   margin: 0;
  83   border: 0;
  84 }
  85
  86 /* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */
  87 html {
  88   -webkit-text-size-adjust: 100%;
  89       -ms-text-size-adjust: 100%;
  90 }
  91
  92 /* Base styles
  93 -------------------------------------------------- */
  94
  95 body {
  96   position: fixed;
  97   top: 0;
  98   right: 0;
  99   bottom: 0;
 100   left: 0;
 101   font: 14px/1.25 "Helvetica Neue", sans-serif;
 102   color: #222;
 103   background-color: #fff;
 104 }
 105
 106 /* Universal link styling */
 107 a {
 108   color: #0882f0;
 109   text-decoration: none;
 110   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */
 111 }
 112
 113 /* Wrapper to be used around all content not in .bar-title and .bar-tab */
 114 .content {
 115   position: fixed;
 116   top: 0;
 117   right: 0;
 118   bottom: 0;
 119   left: 0;
 120   overflow: auto;
 121   background: #fff;
 122   -webkit-transition-property: top, bottom;
 123           transition-property: top, bottom;
 124   -webkit-transition-duration: .2s, .2s;
 125           transition-duration: .2s, .2s;
 126   -webkit-transition-timing-function: linear, linear;
 127           transition-timing-function: linear, linear;
 128   -webkit-overflow-scrolling: touch;
 129 }
 130
 131 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
 132    Note: This is a bug for "-webkit-overflow-scrolling: touch" */
 133 .content > * {
 134   -webkit-transform: translateZ(0px);
 135           transform: translateZ(0px);
 136 }
 137
 138 /* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */
 139 .content-padded {
 140   padding: 10px;
 141 }
 142
 143 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 144    Note: For these to work, content must come after both bars in the markup */
 145 .bar-title ~ .content {
 146   top: 44px;
 147 }
 148 .bar-tab ~ .content {
 149   bottom: 51px;
 150 }
 151 .bar-header-secondary ~ .content {
 152   top: 88px;
 153 }