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.
122 lines
2.1 KiB
122 lines
2.1 KiB
// |
|
// Bars |
|
// -------------------------------------------------- |
|
|
|
[class*="bar-"] { |
|
position: fixed; |
|
right: 0; |
|
left: 0; |
|
z-index: 10; |
|
height: $bar-base-height; |
|
padding: 0 $bar-side-spacing; |
|
background-color: $chrome-color; |
|
box-shadow: 0 0 1px rgba(0,0,0,.85); |
|
|
|
// Modifier class to dock any bar below .bar-title |
|
&.bar-header-secondary { |
|
top: $bar-base-height; |
|
} |
|
|
|
// Modifier class to dock any bar to bottom of viewport |
|
&.bar-footer { |
|
bottom: 0; |
|
} |
|
|
|
// Flip border position to top for footer bars |
|
&.bar-footer.bar-standard, |
|
&.bar-footer-secondary.bar-standard { |
|
box-shadow: 0 0 1px rgba(0,0,0,.85); |
|
} |
|
} |
|
|
|
|
|
// Nav bar |
|
// -------------------------------------------------- |
|
|
|
// Bar docked to top of viewport for showing page title and actions |
|
.bar-title { |
|
top: 0; |
|
display: -webkit-box; |
|
display: box; |
|
-webkit-box-orient: horizontal; |
|
box-orient: horizontal; |
|
} |
|
|
|
// Centered text in the .bar-title |
|
.title { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
display: block; |
|
width: 100%; |
|
padding: 0; |
|
margin: 0; |
|
font-size: 18px; |
|
font-weight: 500; |
|
line-height: $bar-base-height; |
|
color: #000; |
|
text-align: center; |
|
white-space: nowrap; |
|
} |
|
|
|
> a:not([class*="button"]) { |
|
display: block; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
//Retain specified title color |
|
.title a { |
|
color: inherit; |
|
} |
|
|
|
|
|
// Tab bar |
|
// -------------------------------------------------- |
|
|
|
// Bar docked to bottom used for primary app navigation |
|
.bar-tab { |
|
bottom: 0; |
|
height: $bar-tab-height; |
|
padding: 0; |
|
box-shadow: 0 0px 1px rgba(0,0,0,.85); |
|
} |
|
|
|
// Wrapper for individual tab |
|
.tab-inner { |
|
display: -webkit-box; |
|
display: box; |
|
height: 100%; |
|
padding: 0; |
|
margin: 0; |
|
list-style: none; |
|
-webkit-box-orient: horizontal; |
|
box-orient: horizontal; |
|
} |
|
|
|
// Navigational tab |
|
.tab-item { |
|
height: 100%; |
|
padding-top: 9px; |
|
text-align: center; |
|
-webkit-box-flex: 1; |
|
box-flex: 1; |
|
} |
|
|
|
// Icon for tab |
|
.tab-icon { |
|
display: block; |
|
height: 18px; |
|
margin: 0 auto; |
|
} |
|
|
|
// Label for tab |
|
.tab-label { |
|
margin-top: 1px; |
|
font-size: 11px; |
|
font-weight: 400; |
|
color: $default-color; |
|
} |
|
.tab-item.active .tab-label { |
|
color: $primary-color; |
|
} |