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.

175 lines
3.4 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 {
11 years ago
color: inherit;
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 {
color: #fff;
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 {
color: #fff;
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 {
color: #fff;
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
}
11 years ago
// Button overrides
// --------------------------------------------------
11 years ago
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
}
11 years ago
// Buttons with badges
// --------------------------------------------------
11 years ago
// Generic styles for all badges within default buttons
.btn .badge {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0,0,0,.15);
}
11 years ago
// Buttons with inverted badges
.btn .badge-inverted,
.btn:active .badge-inverted {
background-color: transparent;
}
.btn-primary:active .badge-inverted,
.btn-positive:active .badge-inverted,
.btn-negative:active .badge-inverted {
color: #fff;
11 years ago
}
11 years ago
11 years ago
// Position badges within block level buttons
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
// stays at the center of button
.btn-block .badge {
position: absolute;
right: 0;
margin-right: 10px;
}
11 years ago
// Buttons with Ratchicons
// --------------------------------------------------
11 years ago
.btn .icon {
font-size: inherit;
}