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.
136 lines
2.4 KiB
136 lines
2.4 KiB
// |
|
// Bars |
|
// -------------------------------------------------- |
|
|
|
[class*="bar-"] { |
|
position: fixed; |
|
right: 0; |
|
left: 0; |
|
z-index: 10; |
|
height: $bar-base-height; |
|
padding: 5px $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-nav |
|
&.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-nav { |
|
top: 0; |
|
display: -webkit-box; |
|
display: box; |
|
-webkit-box-orient: horizontal; |
|
box-orient: horizontal; |
|
} |
|
|
|
// Centered text in the .bar-nav |
|
.title { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
display: block; |
|
width: 100%; |
|
padding: 0; |
|
margin: 0; |
|
font-size: $font-size-default; |
|
font-weight: $font-weight; |
|
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 { |
|
width: 24px; |
|
height: 24px; |
|
margin-top: -2px; |
|
} |
|
} |
|
|
|
// Label for tab |
|
.tab-label { |
|
margin-top: -2px; |
|
font-size: 11px; |
|
font-weight: 400; |
|
color: $default-color; |
|
} |
|
.tab-item.active .tab-label { |
|
color: $primary-color; |
|
} |
|
|
|
// Nav bar in popovers |
|
// -------------------------------------------------- |
|
|
|
.popover .bar-nav { |
|
padding-right: 15px; |
|
padding-left: 15px; |
|
border-bottom: 1px solid rgba(0,0,0,.15); |
|
border-radius: 12px 12px 0 0; |
|
box-shadow: none; |
|
|
|
.title + [class*="button"]:last-child { |
|
right: 15px; |
|
} |
|
} |