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.

202 lines
3.9 KiB

//
// Buttons
// --------------------------------------------------
12 years ago
11 years ago
.btn {
12 years ago
position: relative;
display: inline-block;
padding: 5px 8px;
12 years ago
margin: 0;
font-size: $button-font-size;
font-weight: $font-weight-light;
line-height: 1.15; // Center button text on the phone.
color: #333;
12 years ago
text-align: center;
vertical-align: top;
cursor: pointer;
background-color: $chrome-color;
border: 1px solid #ccc;
border-radius: 3px;
// Active & filled button styles
&:active,
&.active {
background-color: #ccc;
11 years ago
}
// Disabled styles & filled button active styles
&:disabled,
&.disabled {
11 years ago
opacity: .6;
}
12 years ago
}
// Other button types
// --------------------------------------------------
12 years ago
// Primary button (Default color is blue)
11 years ago
.btn-primary {
color: #fff;
border: 1px solid $primary-color;
background-color: $primary-color;
&:active,
&.active {
border: 1px solid darken($primary-color, 10%);
background-color: darken($primary-color, 10%);
}
12 years ago
}
// Positive button (Default color is green)
11 years ago
.btn-positive {
color: #fff;
border: 1px solid $positive-color;
background-color: $positive-color;
&:active,
&.active{
border: 1px solid darken($positive-color, 10%);
background-color: darken($positive-color, 10%);
}
12 years ago
}
// Negative button (Default color is red)
11 years ago
.btn-negative {
color: #fff;
border: 1px solid $negative-color;
background-color: $negative-color;
12 years ago
&:active,
&.active {
border: 1px solid darken($negative-color, 10%);
background-color: darken($negative-color, 10%);
}
}
11 years ago
// Outlined buttons
11 years ago
.btn-outlined {
background-color: transparent;
11 years ago
&.btn-primary {
color: $primary-color;
}
11 years ago
&.btn-positive {
color: $positive-color;
}
11 years ago
&.btn-negative {
color: $negative-color;
}
// Active states
11 years ago
&.btn-primary:active,
&.btn-positive:active,
&.btn-negative:active {
color: #fff;
}
12 years ago
}
// Link button (Buttons that look like links)
11 years ago
.btn-link {
padding-top: 6px;
padding-bottom: 6px;
color: $primary-color;
background-color: transparent;
border: none;
&:active,
&.active {
color: darken($primary-color, 10%);
background-color: transparent;
}
}
// Block level buttons (full width buttons)
11 years ago
.btn-block {
12 years ago
display: block;
padding: 15px 0;
12 years ago
margin-bottom: 10px;
font-size: 18px;
12 years ago
}
// Button overrides
// --------------------------------------------------
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
}
// Buttons in nav bars
// --------------------------------------------------
.bar-nav {
// Generic style for all buttons in .bar-title
11 years ago
.btn {
11 years ago
position: relative;
z-index: 10; // Position the buttons on top of .title
padding: 6px 12px;
margin-top: 8px;
11 years ago
font-weight: $font-weight-light;
11 years ago
&.pull-right {
margin-left: $bar-side-spacing;
}
&.pull-left {
margin-right: $bar-side-spacing;
}
}
// Link button (Buttons that look like links)
11 years ago
.btn-link {
padding: 0;
margin-top: 0;
font-size: 16px;
color: $primary-color;
line-height: $bar-base-height;
background-color: transparent;
border: none;
&:active,
&.active {
color: darken($primary-color, 10%);
}
}
}
// Block buttons in all bars
// --------------------------------------------------
// Add proper padding
.bar .btn-block {
padding: 7px 0;
11 years ago
margin-top: 4px;
margin-bottom: 5px;
font-size: 16px; // Scale down font size to fit in bar.
}
// Block level buttons in popovers
// --------------------------------------------------
// Positioning and giving darker border to look sharp against dark popover
.popover {
11 years ago
.btn-block {
margin-bottom: 5px;
}
// Remove extra margin on bottom of last button
11 years ago
.btn-block:last-child {
margin-bottom: 0;
}
// Line the button text up with content's text
11 years ago
.bar-nav .btn-link {
&.pull-left {
margin-left: 5px;
}
&.pull-right {
margin-right: 5px;
}
}
}