&:active {
background-color: darken($backgroundColor, 8%);
}
+ &:focus {
+ background-color: lighten($backgroundColor, 4%);
+ box-shadow: $bs-light;
+ text-decoration: none;
+ color: $textColor;
+ }
}
// Button Specific Variables
-$button-border-radius: 3px;
+$button-border-radius: 2px;
.button-base {
text-decoration: none;
margin: $-xs $-xs $-xs 0;
display: inline-block;
border: none;
+ font-weight: 500;
+ font-family: $text;
outline: 0;
border-radius: $button-border-radius;
cursor: pointer;
- transition: all ease-in-out 80ms;
- box-shadow: 0 0 0 0 #000;
+ transition: all ease-in-out 120ms;
+ box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
@include generate-button-colors(#EEE, $primary);
}
&.secondary {
@include generate-button-colors(#EEE, $secondary);
}
+ &.muted {
+ @include generate-button-colors(#EEE, #888);
+ }
+}
+
+.text-button {
+ @extend .link;
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+ border: none;
+ &:focus, &:active {
+ outline: 0;
+ }
+ &:hover {
+ text-decoration: none;
+ }
+ &.neg {
+ color: $negative;
+ }
}
.button-group {
}
}
}
+
+.button.block {
+ width: 100%;
+ text-align: center;
+ display: block;
+}
+
+.button.icon {
+ i {
+ padding-right: 0;
+ }
+}
+
+.button[disabled] {
+ background-color: #BBB;
+ cursor: default;
+ &:hover {
+ background-color: #BBB;
+ cursor: default;
+ box-shadow: none;
+ }
+}
+