refactor buttons.less

1 files changed, 118 insertions, 101 deletions

diff --git a/less/buttons.less b/less/buttons.less
index 2bc457f65..ce725cd4b 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -2,57 +2,11 @@
 // -------------
 
 
-// Colors
-// ------
-
-.btn {
-  // Set text color
-  &.primary,
-  &.primary:hover,
-  &.warning,
-  &.warning:hover,
-  &.danger,
-  &.danger:hover,
-  &.success,
-  &.success:hover,
-  &.info,
-  &.info:hover {
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-    color: @white
-  }
-  &.primary.active,
-  &.warning.active,
-  &.danger.active,
-  &.success.active,
-  &.info.active {
-    color: rgba(255,255,255,.75);
-  }
-  &.primary {
-    .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
-  }
-  // Warning appears are orange
-  &.warning {
-    .buttonBackground(lighten(@orange, 15%), @orange);
-  }
-  // Danger and error appear as red
-  &.danger {
-    .buttonBackground(#ee5f5b, #bd362f);
-  }
-  // Success appears as green
-  &.success {
-    .buttonBackground(#62c462, #51a351);
-  }
-  // Info appears as a neutral blue
-  &.info {
-    .buttonBackground(#5bc0de, #2f96b4);
-  }
-}
-
 // Base styles
-// -----------
+// --------------------------------------------------
 
+// Core
 .btn {
-  // Button Base
   display: inline-block;
   padding: 4px 10px 4px;
   font-size: @baseFontSize;
@@ -68,70 +22,133 @@
   .box-shadow(@shadow);
   cursor: pointer;
 
+  // Give IE7 some love
   .ie7-restore-left-whitespace();
+}
 
-  &:hover {
-    color: @grayDark;
-    text-decoration: none;
-    background-color: darken(@white, 10%);
-    background-position: 0 -15px;
+// Hover state
+.btn:hover {
+  color: @grayDark;
+  text-decoration: none;
+  background-color: darken(@white, 10%);
+  background-position: 0 -15px;
 
-    // transition is only when going to hover, otherwise the background
-    // behind the gradient (there for IE<=9 fallback) gets mismatched
-    .transition(background-position .1s linear);
-  }
+  // transition is only when going to hover, otherwise the background
+  // behind the gradient (there for IE<=9 fallback) gets mismatched
+  .transition(background-position .1s linear);
+}
 
-  // Focus state for keyboard and accessibility
-  &:focus {
-    .tab-focus();
-  }
+// Focus state for keyboard and accessibility
+.btn:focus {
+  .tab-focus();
+}
 
-  // Active and Disabled states
-  &.active,
-  &:active {
-    background-image: none;
-    @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-    .box-shadow(@shadow);
-    background-color: darken(@white, 10%);
-    background-color: darken(@white, 15%) e("\9");
-    color: rgba(0,0,0,.5);
-    outline: 0;
-  }
-  &.disabled,
-  &[disabled] {
-    cursor: default;
-    background-image: none;
-    background-color: darken(@white, 10%);
-    .opacity(65);
-    .box-shadow(none);
-  }
+// Active state
+.btn.active,
+.btn:active {
+  background-image: none;
+  @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+  .box-shadow(@shadow);
+  background-color: darken(@white, 10%);
+  background-color: darken(@white, 15%) e("\9");
+  color: rgba(0,0,0,.5);
+  outline: 0;
+}
 
-  // Button Sizes
-  &.large {
-    padding: 9px 14px;
-    font-size: @baseFontSize + 2px;
-    line-height: normal;
-    .border-radius(5px);
-  }
-  &.large .icon {
-    margin-top: 1px;
-  }
-  &.small {
-    padding: 5px 9px;
-    font-size: @baseFontSize - 2px;
-    line-height: @baseLineHeight - 2px;
-  }
-  &.small .icon {
-    margin-top: -1px;
-  }
+// Disabled state
+.btn.disabled,
+.btn[disabled] {
+  cursor: default;
+  background-image: none;
+  background-color: darken(@white, 10%);
+  .opacity(65);
+  .box-shadow(none);
+}
+
+
+// Button Sizes
+// --------------------------------------------------
+
+// Large
+.btn.large {
+  padding: 9px 14px;
+  font-size: @baseFontSize + 2px;
+  line-height: normal;
+  .border-radius(5px);
+}
+.btn.large .icon {
+  margin-top: 1px;
+}
+
+// Small
+.btn.small {
+  padding: 5px 9px;
+  font-size: @baseFontSize - 2px;
+  line-height: @baseLineHeight - 2px;
+}
+.btn.small .icon {
+  margin-top: -1px;
+}
+
+
+// Alternate buttons
+// --------------------------------------------------
+
+// Set text color
+// -------------------------
+.btn.primary,
+.btn.primary:hover,
+.btn.warning,
+.btn.warning:hover,
+.btn.danger,
+.btn.danger:hover,
+.btn.success,
+.btn.success:hover,
+.btn.info,
+.btn.info:hover {
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  color: @white
+}
+// Provide *some* extra contrast for those who can get it
+.btn.primary.active,
+.btn.warning.active,
+.btn.danger.active,
+.btn.success.active,
+.btn.info.active {
+  color: rgba(255,255,255,.75);
+}
+
+// Set the backgrounds
+// -------------------------
+.btn.primary {
+  .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
 }
+// Warning appears are orange
+.btn.warning {
+  .buttonBackground(lighten(@orange, 15%), @orange);
+}
+// Danger and error appear as red
+.btn.danger {
+  .buttonBackground(#ee5f5b, #bd362f);
+}
+// Success appears as green
+.btn.success {
+  .buttonBackground(#62c462, #51a351);
+}
+// Info appears as a neutral blue
+.btn.info {
+  .buttonBackground(#5bc0de, #2f96b4);
+}
+
+
+// Cross-browser Jank
+// --------------------------------------------------
 
-// Help Firefox not be a jerk about adding extra padding to buttons
 button.btn,
 input[type="submit"].btn {
   &::-moz-focus-inner {
-  	padding: 0;
-  	border: 0;
+  padding: 0;
+    border: 0;
   }
 
   // IE7 has some default padding on button controls