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.
244 lines
4.3 KiB
244 lines
4.3 KiB
11 years ago
|
//
|
||
|
// Bars
|
||
|
// --------------------------------------------------
|
||
12 years ago
|
|
||
11 years ago
|
.bar {
|
||
12 years ago
|
position: fixed;
|
||
|
right: 0;
|
||
|
left: 0;
|
||
|
z-index: 10;
|
||
11 years ago
|
height: $bar-base-height;
|
||
11 years ago
|
padding-right: $bar-side-spacing;
|
||
|
padding-left: $bar-side-spacing;
|
||
11 years ago
|
border-bottom: $border-default;
|
||
11 years ago
|
background-color: $chrome-color;
|
||
11 years ago
|
|
||
12 years ago
|
|
||
11 years ago
|
// Modifier class to dock any bar below .bar-nav
|
||
11 years ago
|
&.bar-header-secondary {
|
||
11 years ago
|
top: $bar-base-height;
|
||
11 years ago
|
}
|
||
12 years ago
|
|
||
11 years ago
|
// Modifier class to dock any bar to bottom of viewport
|
||
|
&.bar-footer {
|
||
|
bottom: 0;
|
||
|
}
|
||
12 years ago
|
|
||
11 years ago
|
// Modifier class to dock any bar above a standard bar
|
||
|
&.bar-footer-secondary {
|
||
11 years ago
|
bottom: $bar-base-height;
|
||
11 years ago
|
}
|
||
|
|
||
|
// Modifier class to dock any bar above a .bar-tab
|
||
|
&.bar-footer-secondary-tab {
|
||
11 years ago
|
bottom: $bar-tab-height;
|
||
11 years ago
|
}
|
||
12 years ago
|
}
|
||
|
|
||
11 years ago
|
|
||
11 years ago
|
// Nav bar
|
||
|
// --------------------------------------------------
|
||
12 years ago
|
|
||
11 years ago
|
// Bar docked to top of viewport for showing page title and actions
|
||
11 years ago
|
.bar-nav {
|
||
12 years ago
|
top: 0;
|
||
|
}
|
||
|
|
||
11 years ago
|
// Centered text in the .bar-nav
|
||
11 years ago
|
.title {
|
||
11 years ago
|
position: absolute;
|
||
12 years ago
|
display: block;
|
||
|
width: 100%;
|
||
11 years ago
|
padding: 0;
|
||
11 years ago
|
margin-top: 0;
|
||
|
margin-bottom: 0;
|
||
|
margin-left: -$bar-side-spacing;
|
||
|
margin-right: -$bar-side-spacing;
|
||
11 years ago
|
font-size: $font-size-default;
|
||
11 years ago
|
font-weight: $font-weight;
|
||
11 years ago
|
line-height: $bar-base-height;
|
||
11 years ago
|
color: #000;
|
||
12 years ago
|
text-align: center;
|
||
|
white-space: nowrap;
|
||
|
}
|
||
|
|
||
11 years ago
|
> a:not(.btn) {
|
||
12 years ago
|
display: block;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
11 years ago
|
//Retain specified title color
|
||
11 years ago
|
.title a {
|
||
12 years ago
|
color: inherit;
|
||
|
}
|
||
|
|
||
11 years ago
|
|
||
11 years ago
|
// Tab bar
|
||
|
// --------------------------------------------------
|
||
12 years ago
|
|
||
11 years ago
|
// Bar docked to bottom used for primary app navigation
|
||
12 years ago
|
.bar-tab {
|
||
11 years ago
|
display: table;
|
||
12 years ago
|
bottom: 0;
|
||
11 years ago
|
height: $bar-tab-height;
|
||
11 years ago
|
width: 100%;
|
||
12 years ago
|
padding: 0;
|
||
11 years ago
|
border-top: $border-default;
|
||
11 years ago
|
table-layout: fixed;
|
||
11 years ago
|
|
||
11 years ago
|
// Navigational tab
|
||
|
.tab-item {
|
||
|
display: table-cell;
|
||
|
height: 100%;
|
||
|
width: 1%;
|
||
11 years ago
|
vertical-align: middle;
|
||
11 years ago
|
color: #929292;
|
||
11 years ago
|
text-align: center;
|
||
12 years ago
|
|
||
11 years ago
|
// Active states for the tab bar
|
||
|
&.active,
|
||
|
&:active {
|
||
|
color: $primary-color;
|
||
11 years ago
|
}
|
||
|
|
||
11 years ago
|
// Tab icon
|
||
11 years ago
|
.icon {
|
||
11 years ago
|
top: 2px;
|
||
11 years ago
|
width: 24px;
|
||
|
height: 24px;
|
||
11 years ago
|
padding: 0;
|
||
11 years ago
|
|
||
|
// Make the label smaller if it's used with an icon
|
||
|
~ .tab-label {
|
||
11 years ago
|
display: block;
|
||
11 years ago
|
margin-top: -2px;
|
||
|
font-size: 11px;
|
||
|
}
|
||
11 years ago
|
}
|
||
11 years ago
|
}
|
||
11 years ago
|
}
|
||
|
|
||
11 years ago
|
|
||
11 years ago
|
// Nav bars with buttons
|
||
|
// --------------------------------------------------
|
||
|
|
||
|
.bar-nav .btn {
|
||
|
position: relative;
|
||
11 years ago
|
z-index: 20; // Position the buttons on top of .title
|
||
11 years ago
|
padding: 6px 12px;
|
||
|
margin-top: 8px;
|
||
|
font-weight: $font-weight-light;
|
||
|
|
||
|
&.pull-right {
|
||
|
margin-left: $bar-side-spacing;
|
||
|
}
|
||
|
&.pull-left {
|
||
|
margin-right: $bar-side-spacing;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Nav bars with link buttons (Line the text up with content)
|
||
|
.bar-nav .btn-link {
|
||
|
margin-top: 0;
|
||
11 years ago
|
padding-top: 0;
|
||
|
padding-bottom: 0;
|
||
11 years ago
|
font-size: 16px;
|
||
|
color: $primary-color;
|
||
|
line-height: $bar-base-height;
|
||
11 years ago
|
border: 0;
|
||
11 years ago
|
|
||
|
&:active,
|
||
|
&.active {
|
||
|
color: darken($primary-color, 10%);
|
||
|
}
|
||
11 years ago
|
|
||
|
// Make sure link buttons w/ icons line up with the content correctly
|
||
|
.icon {
|
||
11 years ago
|
top: 2px;
|
||
|
padding: 0;
|
||
11 years ago
|
}
|
||
11 years ago
|
&.pull-left {
|
||
11 years ago
|
margin-left: -10px;
|
||
11 years ago
|
|
||
|
.icon {
|
||
11 years ago
|
margin-right: -5px;
|
||
|
margin-left: -7px;
|
||
11 years ago
|
}
|
||
|
}
|
||
|
&.pull-right {
|
||
11 years ago
|
margin-right: -10px;
|
||
11 years ago
|
|
||
|
.icon {
|
||
11 years ago
|
margin-right: -7px;
|
||
|
margin-left: -5px;
|
||
11 years ago
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
// Bars with block buttons
|
||
|
// --------------------------------------------------
|
||
|
|
||
|
// Add proper padding
|
||
|
.bar .btn-block {
|
||
|
padding: 7px 0 6px;
|
||
|
margin-top: 5px;
|
||
|
margin-bottom: 0;
|
||
|
font-size: 16px; // Scale down font size to fit in bar.
|
||
|
}
|
||
|
|
||
|
|
||
11 years ago
|
// Bars for search forms
|
||
11 years ago
|
// --------------------------------------------------
|
||
|
|
||
|
// Position/size search bar within the bar
|
||
|
.bar input[type="search"] {
|
||
|
height: 29px;
|
||
|
margin: 6px 0;
|
||
|
}
|
||
|
|
||
|
|
||
11 years ago
|
// Bars with segmented controls
|
||
11 years ago
|
// --------------------------------------------------
|
||
|
|
||
|
// Remove standard segmented bottom margin
|
||
|
.bar .segmented-control {
|
||
|
top: 8px;
|
||
|
margin: 0 auto;
|
||
|
}
|
||
|
|
||
|
|
||
11 years ago
|
// Bars with Ratchicons
|
||
11 years ago
|
// --------------------------------------------------
|
||
|
|
||
11 years ago
|
.bar {
|
||
|
.icon {
|
||
|
position: relative;
|
||
11 years ago
|
padding: 10px 13px;
|
||
11 years ago
|
z-index: 20; // Position the buttons on top of .title
|
||
|
font-size: 24px;
|
||
11 years ago
|
}
|
||
|
> .icon {
|
||
11 years ago
|
padding-right: 5px;
|
||
|
padding-left: 5px;
|
||
11 years ago
|
|
||
11 years ago
|
// Offset the bar's side padding
|
||
11 years ago
|
&.pull-left {
|
||
11 years ago
|
margin-left: -10px;
|
||
11 years ago
|
}
|
||
|
&.pull-right {
|
||
11 years ago
|
margin-right: -10px;
|
||
11 years ago
|
}
|
||
11 years ago
|
}
|
||
11 years ago
|
// Handle carets in the titles
|
||
11 years ago
|
.title .icon {
|
||
11 years ago
|
padding: 0;
|
||
11 years ago
|
|
||
|
&.icon-caret {
|
||
|
top: 4px;
|
||
|
margin-left: -5px;
|
||
|
}
|
||
11 years ago
|
}
|
||
|
}
|