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.
76 lines
1.6 KiB
76 lines
1.6 KiB
// |
|
// Base styles |
|
// -------------------------------------------------- |
|
|
|
// Use box sizing on all the things! |
|
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
|
|
|
body { |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
font-family: $font-family-default; |
|
font-size: $font-size-default; |
|
line-height: $line-height-default; |
|
color: #000; |
|
background-color: #fff; |
|
} |
|
|
|
// Universal link styling |
|
a { |
|
color: $primary-color; |
|
text-decoration: none; |
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links |
|
|
|
&:active { |
|
color: darken($primary-color, 10%); |
|
} |
|
} |
|
strong { |
|
font-weight: $font-weight; |
|
} |
|
|
|
// 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: #fff; |
|
-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); |
|
} |
|
|
|
// 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-nav ~ .content { |
|
padding-top: $bar-base-height; |
|
} |
|
.bar-tab ~ .content { |
|
padding-bottom: $bar-tab-height; |
|
} |
|
.bar-header-secondary ~ .content { |
|
padding-top: $bar-base-height*2; |
|
} |
|
|
|
// Utility classes |
|
.container { |
|
padding-right: 15px; |
|
padding-left: 15px; |
|
} |
|
.pull-left { |
|
float: left; |
|
} |
|
.pull-right { |
|
float: right; |
|
}
|
|
|