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.

191 lines
3.8 KiB

//
// Buttons
// --------------------------------------------------
12 years ago
[class*="button"] {
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: 4px;
// 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)
.button-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)
12 years ago
.button-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)
12 years ago
.button-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
.button-outlined {
background-color: transparent;
&.button-primary {
color: $primary-color;
}
&.button-positive {
color: $positive-color;
}
&.button-negative {
color: $negative-color;
}
// Active states
&.button-primary:active,
&.button-positive:active,
&.button-negative:active {
color: #fff;
}
12 years ago
}
// Link button (Buttons that look like links)
.button-link {
color: $primary-color;
border: none;
&:active,
&.active {
color: darken($primary-color, 10%);
}
}
// Block level buttons (full width buttons)
12 years ago
.button-block {
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
[class*="button"] {
11 years ago
position: relative;
z-index: 10; // Position the buttons on top of .title
padding: 0;
font-size: 16px;
11 years ago
font-weight: $font-weight-light;
line-height: $bar-base-height;
color: $primary-color;
background-color: transparent;
border: 0;
11 years ago
&.pull-right {
margin-left: $bar-side-spacing;
}
&.pull-left {
margin-right: $bar-side-spacing;
}
}
// Override standard button active states
.button:active,
.button.active,
.button-primary:active,
.button-primary.active {
color: $primary-color;
background-color: transparent;
opacity: .3;
}
// Primary button in bars
.button-primary {
font-weight: $font-weight;
}
}
// Block buttons in all bars
// --------------------------------------------------
// Add proper padding
[class*="bar"] .button-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 .button-block {
margin-bottom: 5px;
}
// Remove extra margin on bottom of last button
.popover .button-block:last-child {
margin-bottom: 0;
}