From 5ef2b6561a8409cc26c413e4a152df89a383f0e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 22:47:45 -0700 Subject: [PATCH] realign icons to five cols, fix buttons --- docs/base-css.html | 92 +++++++++++++++++--------- docs/templates/pages/base-css.mustache | 92 +++++++++++++++++--------- 2 files changed, 122 insertions(+), 62 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 979a873853..618dee29a4 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1202,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline.

Buttons

+ +

Default buttons

+

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

@@ -1249,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.
-

Buttons for actions

-

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

-

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

-

Cross browser compatibility

+

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

-

Multiple sizes

+ +
+ + +

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

@@ -1269,29 +1273,51 @@ For example, <code>section</code> should be wrapped as inline.

-
-

Disabled state

-

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

-

+ + +

+ + +

Disabled state

+

Make buttons look unclickable by fading them back 50%.

+ +

Anchor element

+

Add the .disabled class to <a> buttons.

+

Primary link Link

-

- - -

+
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

-

One class, multiple tags

+

Button element

+

Add the disabled attribute to <button> buttons.

+

+ + +

+
+<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button class="btn btn-large" disabled>Button</button>
+
+ + +
+ + +

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

-
-Link - - - + + Link + + + 
 <a class="btn" href="">Link</a>
@@ -1346,6 +1372,10 @@ For example, <code>section</code> should be wrapped as inline.
         
  •  icon-download
    • 
         
  •  icon-upload
    • 
         
  •  icon-inbox
    • 
+      
+    
+    
    
+      
      
         
    •  icon-play-circle
      • 
         
    •  icon-repeat
      • 
         
    •  icon-refresh
      • 
@@ -1353,10 +1383,6 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-lock
      • 
         
    •  icon-flag
      • 
         
    •  icon-headphones
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-volume-off
      • 
         
    •  icon-volume-down
      • 
         
    •  icon-volume-up
      • 
@@ -1378,6 +1404,10 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-align-right
      • 
         
    •  icon-align-justify
      • 
         
    •  icon-list
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-indent-left
      • 
         
    •  icon-indent-right
      • 
         
    •  icon-facetime-video
      • 
@@ -1392,10 +1422,6 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-move
      • 
         
    •  icon-step-backward
      • 
         
    •  icon-fast-backward
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-backward
      • 
         
    •  icon-play
      • 
         
    •  icon-pause
      • 
@@ -1410,6 +1436,10 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-minus-sign
      • 
         
    •  icon-remove-sign
      • 
         
    •  icon-ok-sign
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-question-sign
      • 
         
    •  icon-info-sign
      • 
         
    •  icon-screenshot
      • 
@@ -1431,10 +1461,6 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-leaf
      • 
         
    •  icon-fire
      • 
         
    •  icon-eye-open
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-eye-close
      • 
         
    •  icon-warning-sign
      • 
         
    •  icon-plane
      • 
@@ -1442,6 +1468,10 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-random
      • 
         
    •  icon-comment
      • 
         
    •  icon-magnet
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-chevron-up
      • 
         
    •  icon-chevron-down
      • 
         
    •  icon-retweet
      • 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index f7f12c8781..48043cbc8a 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1133,6 +1133,9 @@
   
      
     
      {{_i}}Buttons{{/i}}
      
   
      
+
+  
      Default buttons
      
+  
      {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}
      
   
@@ -1180,13 +1183,14 @@
     
      
     
       
      
   
      
 
-  
      {{_i}}Buttons for actions{{/i}}
      
-  
      {{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}
      
-  
      {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.{{/i}}
      
-  
      {{_i}}Cross browser compatibility{{/i}}
      
+  
      {{_i}}Cross browser compatibility{{/i}}
      
   
      {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}
      
 
-  
      {{_i}}Multiple sizes{{/i}}
      
+
+  
      
+
+
+  
      {{_i}}Button sizes{{/i}}
      
   
      {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}
      
   
      
     
@@ -1200,29 +1204,51 @@
     
     
   
      
-  
      
-  
      {{_i}}Disabled state{{/i}}
      
-  
      {{_i}}For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.{{/i}}
      
-  
      
+
+
+  
      
+
+
+  
      {{_i}}Disabled state{{/i}}
      
+  
      {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}
      
+
+  
      Anchor element
      
+  
      {{_i}}Add the .disabled class to <a> buttons.{{/i}}
      
+  
      
     {{_i}}Primary link{{/i}}
     {{_i}}Link{{/i}}
   
      
-  
      
-    
-    
-  
      
+
      +<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
+<a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
+
      
   
      
     {{_i}}Heads up!{{/i}}
     {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}}
   
      
 
-  
      {{_i}}One class, multiple tags{{/i}}
      
+  
      Button element
      
+  
      {{_i}}Add the disabled attribute to <button> buttons.{{/i}}
      
+  
      
+    
+    
+  
      
+
      +<button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
+<button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
+
      
+
+
+  
      
+
+
+  
      {{_i}}One class, multiple tags{{/i}}
      
   
      {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}
      
-
      
-{{_i}}Link{{/i}}
-
-
-
+
+  {{_i}}Link{{/i}}
+  
+  
+  
 
      
 
       <a class="btn" href="">{{_i}}Link{{/i}}</a>
@@ -1277,6 +1303,10 @@
         
    •  icon-download
      • 
         
    •  icon-upload
      • 
         
    •  icon-inbox
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-play-circle
      • 
         
    •  icon-repeat
      • 
         
    •  icon-refresh
      • 
@@ -1284,10 +1314,6 @@
         
    •  icon-lock
      • 
         
    •  icon-flag
      • 
         
    •  icon-headphones
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-volume-off
      • 
         
    •  icon-volume-down
      • 
         
    •  icon-volume-up
      • 
@@ -1309,6 +1335,10 @@
         
    •  icon-align-right
      • 
         
    •  icon-align-justify
      • 
         
    •  icon-list
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-indent-left
      • 
         
    •  icon-indent-right
      • 
         
    •  icon-facetime-video
      • 
@@ -1323,10 +1353,6 @@
         
    •  icon-move
      • 
         
    •  icon-step-backward
      • 
         
    •  icon-fast-backward
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-backward
      • 
         
    •  icon-play
      • 
         
    •  icon-pause
      • 
@@ -1341,6 +1367,10 @@
         
    •  icon-minus-sign
      • 
         
    •  icon-remove-sign
      • 
         
    •  icon-ok-sign
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-question-sign
      • 
         
    •  icon-info-sign
      • 
         
    •  icon-screenshot
      • 
@@ -1362,10 +1392,6 @@
         
    •  icon-leaf
      • 
         
    •  icon-fire
      • 
         
    •  icon-eye-open
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-eye-close
      • 
         
    •  icon-warning-sign
      • 
         
    •  icon-plane
      • 
@@ -1373,6 +1399,10 @@
         
    •  icon-random
      • 
         
    •  icon-comment
      • 
         
    •  icon-magnet
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-chevron-up
      • 
         
    •  icon-chevron-down
      • 
         
    •  icon-retweet
      •