mirror of https://github.com/twbs/ratchet.git
Build mobile apps with simple HTML, CSS, and JS components.
http://goratchet.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
2.3 KiB
153 lines
2.3 KiB
// |
|
// Hard reset |
|
// -------------------------------------------------- |
|
|
|
html, |
|
body, |
|
div, |
|
span, |
|
iframe, |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6, |
|
p, |
|
blockquote, |
|
pre, |
|
a, |
|
abbr, |
|
acronym, |
|
address, |
|
big, |
|
cite, |
|
code, |
|
del, |
|
dfn, |
|
em, |
|
img, |
|
ins, |
|
kbd, |
|
q, |
|
s, |
|
samp, |
|
small, |
|
strike, |
|
strong, |
|
sub, |
|
sup, |
|
tt, |
|
var, |
|
b, |
|
u, |
|
i, |
|
center, |
|
dl, |
|
dt, |
|
dd, |
|
ol, |
|
ul, |
|
li, |
|
fieldset, |
|
form, |
|
label, |
|
legend, |
|
table, |
|
caption, |
|
tbody, |
|
tfoot, |
|
thead, |
|
tr, |
|
th, |
|
td, |
|
article, |
|
aside, |
|
canvas, |
|
details, |
|
embed, |
|
figure, |
|
figcaption, |
|
footer, |
|
header, |
|
hgroup, |
|
menu, |
|
nav, |
|
output, |
|
section, |
|
summary, |
|
time, |
|
audio, |
|
video { |
|
padding: 0; |
|
margin: 0; |
|
border: 0; |
|
} |
|
|
|
// Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) |
|
html { |
|
-webkit-text-size-adjust: 100%; |
|
} |
|
|
|
/* Base styles |
|
-------------------------------------------------- */ |
|
|
|
body { |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
font: 14px/1.25 "Helvetica Neue", sans-serif; |
|
color: #000; |
|
background-color: #fff; |
|
} |
|
|
|
// Universal link styling |
|
a { |
|
color: #007aff; |
|
text-decoration: none; |
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links |
|
} |
|
|
|
// Wrapper to be used around all content not in .bar-title and .bar-tab |
|
.content { |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
overflow: auto; |
|
background-color: #efeff4; |
|
-webkit-transition-property: top, bottom; |
|
transition-property: top, bottom; |
|
-webkit-transition-duration: .2s, .2s; |
|
transition-duration: .2s, .2s; |
|
-webkit-transition-timing-function: linear, linear; |
|
transition-timing-function: linear, linear; |
|
-webkit-overflow-scrolling: touch; |
|
} |
|
|
|
// Hack to force all relatively and absolutely positioned elements still render while scrolling |
|
// Note: This is a bug for "-webkit-overflow-scrolling: touch" |
|
.content > * { |
|
-webkit-transform: translateZ(0px); |
|
transform: translateZ(0px); |
|
} |
|
|
|
// Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed |
|
.content-padded { |
|
padding: 10px; |
|
} |
|
|
|
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. |
|
// Note: For these to work, content must come after both bars in the markup |
|
.bar-title ~ .content { |
|
padding-top: 44px; |
|
} |
|
.bar-tab ~ .content { |
|
padding-bottom: 51px; |
|
} |
|
.bar-header-secondary ~ .content { |
|
padding-top: 88px; |
|
}
|
|
|