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.
133 lines
2.3 KiB
133 lines
2.3 KiB
// |
|
// Bars |
|
// -------------------------------------------------- |
|
|
|
.bar { |
|
position: fixed; |
|
right: 0; |
|
left: 0; |
|
z-index: 10; |
|
height: $bar-base-height; |
|
padding-right: $bar-side-spacing; |
|
padding-left: $bar-side-spacing; |
|
border-bottom: $border-default; |
|
background-color: $chrome-color; |
|
|
|
|
|
// 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; |
|
} |
|
|
|
// Modifier class to dock any bar above a standard bar |
|
&.bar-footer-secondary { |
|
bottom: $bar-base-height; |
|
} |
|
|
|
// Modifier class to dock any bar above a .bar-tab |
|
&.bar-footer-secondary-tab { |
|
bottom: $bar-tab-height; |
|
} |
|
} |
|
|
|
|
|
// Nav bar |
|
// -------------------------------------------------- |
|
|
|
// Bar docked to top of viewport for showing page title and actions |
|
.bar-nav { |
|
top: 0; |
|
} |
|
|
|
// Centered text in the .bar-nav |
|
.title { |
|
position: absolute; |
|
display: block; |
|
width: 100%; |
|
padding: 0; |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
margin-left: -$bar-side-spacing; |
|
margin-right: -$bar-side-spacing; |
|
font-size: $font-size-default; |
|
font-weight: $font-weight; |
|
line-height: $bar-base-height; |
|
color: #000; |
|
text-align: center; |
|
white-space: nowrap; |
|
} |
|
|
|
> a:not(.btn) { |
|
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 { |
|
display: table; |
|
bottom: 0; |
|
height: $bar-tab-height; |
|
padding: 0; |
|
border-top: $border-default; |
|
|
|
// Navigational tab |
|
.tab-item { |
|
display: table-cell; |
|
height: 100%; |
|
width: 1%; |
|
vertical-align: bottom; |
|
text-align: center; |
|
|
|
.tab-label, |
|
.icon { |
|
color: #929292; |
|
} |
|
|
|
// Label for tab |
|
.tab-label { |
|
margin-top: -2px; |
|
font-size: 11px; |
|
font-weight: 400; |
|
} |
|
|
|
.icon { |
|
width: 24px; |
|
height: 24px; |
|
margin-top: 0; |
|
} |
|
|
|
// Active states for the tab bar |
|
&.active, |
|
&:active { |
|
.tab-label, |
|
.icon { |
|
color: $primary-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// Nav bar in popovers |
|
// -------------------------------------------------- |
|
|
|
.popover .bar-nav { |
|
border-bottom: $border-default; |
|
border-radius: 12px 12px 0 0; |
|
@include box-shadow(none); |
|
}
|
|
|