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.

222 lines
4.8 KiB

//
// Buttons
// --------------------------------------------------
[class*="button"] {
position: relative;
display: inline-block;
padding: 5px 10px 7px;
margin: 0;
font-size: $button-font-size;
font-weight: $font-weight-light;
line-height: 1;
color: $default-color;
text-align: center;
vertical-align: top;
cursor: pointer;
background-color: transparent;
border: 1px solid $default-color;
border-radius: 4px;
// Active & filled button styles
&:active,
&.active,
&.button-filled {
color: #fff;
background-color: $default-color;
@include transition(background-color, opacity);
@include transition-duration(.2s);
@include transition-timing-function(linear);
}
// Disabled styles & filled button active styles
&:disabled,
&.disabled,
&.button-filled:active {
opacity: .6;
}
}
// Other button types
// --------------------------------------------------
// Primary button (Default color is blue)
.button-primary {
color: $primary-color;
border: 1px solid $primary-color;
&:active,
&.active,
&.button-filled {
background-color: $primary-color;
}
}
// Positive button (Default color is green)
.button-positive {
color: $positive-color;
border: 1px solid $positive-color;
&:active,
&.active,
&.button-filled {
background-color: $positive-color;
}
}
// Negative button (Default color is red)
.button-negative {
color: $negative-color;
border: 1px solid $negative-color;
&:active,
&.active,
&.button-filled {
background-color: $negative-color;
}
}
// Block level buttons (full width buttons)
.button-block {
display: block;
padding: 12px 0;
margin-bottom: 10px;
font-size: 16px;
}
// Buttons in nav bars
// --------------------------------------------------
.bar-nav {
// Generic style for all buttons in .bar-title
[class*="button"] {
position: relative;
z-index: 10; // Places buttons over full width title
padding: 0;
margin-top: -5px; // Offsets the bar's vertical padding
font-size: 16px;
font-weight: $font-weight-light;
line-height: $bar-base-height;
color: $primary-color;
border: 0;
@include transition(opacity .2s linear);
@include box-flex(0);
}
// Hacky way to right align buttons outside of flex-box system
// Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
.title + [class*="button"]:last-child,
.button + [class*="button"]:last-child,
[class*="button"].pull-right {
position: absolute;
top: 5px; // Offsets the bar's vertical padding
right: $bar-side-spacing;
}
// Override standard button active states
.button:active,
.button.active,
.button-prev:active,
.button-prev.active,
.button-next:active,
.button-next.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;
}
// Directional buttons in nav bars
// --------------------------------------------------
.button-prev:before,
.button-prev:after,
.button-next:before,
.button-next:after {
position: absolute;
display: block;
width: 15px;
height: 3px;
background-color: $primary-color;
content: '';
}
// Prev/next button base styles
.button-prev {
padding-left: $button-directional-padding;
margin-left: $button-directional-margin;
}
.button-next {
padding-right: $button-directional-padding;
margin-right: $button-directional-margin;
}
// Position the chevrons horizontally
.button-prev:before,
.button-prev:after {
left: 0;
}
.button-next:before,
.button-next:after {
right: 0;
}
// Position the chevrons vertically
.button-prev:before,
.button-next:before {
top: 16px;
}
.button-prev:after,
.button-next:after {
top: 25px;
}
// Rotate the chevrons
.button-prev:before,
.button-next:after {
@include transform(rotate(-45deg));
}
.button-prev:after,
.button-next:before {
@include transform(rotate(45deg));
}
}
// Block buttons in all bars
// --------------------------------------------------
// Add proper padding and replace buttons normal dropshadow with a shine from bar
[class*="bar"] .button-block {
padding: 7px 0;
margin-top: 1px;
}
// Button overrides
// --------------------------------------------------
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
}
// 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;
}