update themes to 3.0.0-rc2

author: Thomas Park <thomas@thomaspark.me> 2013-08-17 09:37:53 -0700
committer: Thomas Park <thomas@thomaspark.me> 2013-08-17 09:37:53 -0700
commit: 14c61be7fa8145279f527e4b36ab70d19c0abd5c (patch)
tree: a1946a368b5ff647b39c28011eec1ee54393624d /custom
parent: 4fe37339653c909368ba772ea9214c0b2a511fee (diff)
2 files changed, 179 insertions, 123 deletions
diff --git a/custom/index.html b/custom/index.html
index f4a36f3d..5aeae58b 100644
--- a/custom/index.html
+++ b/custom/index.html
@@ -24,16 +24,19 @@
     </script>
   </head>
   <body>
+    <script src="../assets/js/bsa.js"></script>
 
     <div class="navbar navbar-fixed-top">
       <div class="container">
-        <a href="../" class="navbar-brand">Bootswatch</a>
-        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <div class="nav-collapse collapse" id="navbar-main">
+        <div class="navbar-header">
+          <a href="../" class="navbar-brand">Bootswatch</a>
+          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+        </div>
+        <div class="navbar-collapse collapse" id="navbar-main">
           <ul class="nav navbar-nav">
             <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
@@ -72,7 +75,7 @@
             </li>
           </ul>
 
-          <ul class="nav navbar-nav pull-right">
+          <ul class="nav navbar-nav navbar-right">
             <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
             <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
           </ul>
@@ -90,16 +93,10 @@
             <h1>Custom</h1>
             <p class="lead">Your tagline</p>
           </div>
-          <div class="col-lg-6 well" style="padding: 15px 15px 0 15px;">
-            <a href="http://carboncostume.com/apple-store-genius/" target="_blank">
-              <span style="float: left; margin: 0 15px 15px 0;">
-                <img src="../assets/img/carboncostume.png" width="175" height="135" style="border-radius: 4px;">
-              </span>
-            </a>
-            <a href="http://carboncostume.com" target="_blank">
-              <h4 style="margin-bottom: 0.4em; color: #fff;">Carbon Costume</h4>
-              <span style="display: block; margin-bottom: 1em; color: #fff;">Guides for DIY costumes using everyday gear.</span>
-            </a>
+          <div class="col-lg-6">
+            <div class="bsa well">
+                <div id="bsap_1277971" class="bsarocks bsap_c466df00a3cd5ee8568b5c4983b6bb19"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -116,13 +113,15 @@
             <div class="bs-example">
               <div class="navbar">
                 <div class="container">
-                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                  </button>
-                  <a class="navbar-brand" href="#">Brand</a>
-                  <div class="nav-collapse collapse navbar-responsive-collapse">
+                  <div class="navbar-header">
+                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+                      <span class="icon-bar"></span>
+                      <span class="icon-bar"></span>
+                      <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand" href="#">Brand</a>
+                  </div>
+                  <div class="navbar-collapse collapse navbar-responsive-collapse">
                     <ul class="nav navbar-nav">
                       <li class="active"><a href="#">Active</a></li>
                       <li><a href="#">Link</a></li>
@@ -139,10 +138,10 @@
                         </ul>
                       </li>
                     </ul>
-                    <form class="navbar-form pull-left">
+                    <form class="navbar-form navbar-left">
                       <input type="text" class="form-control col-lg-8" placeholder="Search">
                     </form>
-                    <ul class="nav navbar-nav pull-right">
+                    <ul class="nav navbar-nav navbar-right">
                       <li><a href="#">Link</a></li>
                       <li class="dropdown">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
@@ -162,13 +161,15 @@
 
               <div class="navbar navbar-inverse">
                 <div class="container">
-                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                  </button>
-                  <a class="navbar-brand" href="#">Brand</a>
-                  <div class="nav-collapse collapse navbar-inverse-collapse">
+                  <div class="navbar-header">
+                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+                      <span class="icon-bar"></span>
+                      <span class="icon-bar"></span>
+                      <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand" href="#">Brand</a>
+                  </div>
+                  <div class="navbar-collapse collapse navbar-inverse-collapse">
                     <ul class="nav navbar-nav">
                       <li class="active"><a href="#">Active</a></li>
                       <li><a href="#">Link</a></li>
@@ -185,10 +186,10 @@
                         </ul>
                       </li>
                     </ul>
-                    <form class="navbar-form pull-left">
+                    <form class="navbar-form navbar-left">
                       <input type="text" class="form-control col-lg-8" placeholder="Search">
                     </form>
-                    <ul class="nav navbar-nav pull-right">
+                    <ul class="nav navbar-nav navbar-right">
                       <li><a href="#">Link</a></li>
                       <li class="dropdown">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
@@ -312,10 +313,10 @@
 
             <div class="bs-example">
               <p>
-                <button type="button" class="btn btn-primary btn-large">Large button</button>
+                <button type="button" class="btn btn-primary btn-lg">Large button</button>
                 <button type="button" class="btn btn-primary">Default button</button>
-                <button type="button" class="btn btn-primary btn-small">Small button</button>
-                <button type="button" class="btn btn-primary btn-mini">Mini button</button>
+                <button type="button" class="btn btn-primary btn-sm">Small button</button>
+                <button type="button" class="btn btn-primary btn-xs">Mini button</button>
               </p>
             </div>
             
@@ -640,7 +641,7 @@
                 </div>
                 <div class="form-group">
                   <label class="control-label" for="inputLarge">Large input</label>
-                  <input class="form-control input-large" type="text" id="inputLarge">
+                  <input class="form-control input-lg" type="text" id="inputLarge">
                 </div>
                 <div class="form-group">
                   <label class="control-label" for="inputDefault">Default input</label>
@@ -648,7 +649,7 @@
                 </div>
                 <div class="form-group">
                   <label class="control-label" for="inputSmall">Small input</label>
-                  <input class="form-control input-small" type="text" id="inputSmall">
+                  <input class="form-control input-sm" type="text" id="inputSmall">
                 </div>
                 <div class="form-group">
                   <label class="control-label">Input addons</label>
@@ -845,7 +846,7 @@
           <div class="col-lg-12">
             <h2>Alerts</h2>
             <div class="bs-example">
-              <div class="alert alert-block">
+              <div class="alert alert-dismissable">
                 <button type="button" class="close" data-dismiss="alert">&times;</button>
                 <h4>Warning!</h4>
                 <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
@@ -855,19 +856,19 @@
         </div>
         <div class="row">
           <div class="col-lg-4">
-            <div class="alert alert-danger">
+            <div class="alert alert-dismissable alert-danger">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="alert alert-success">
+            <div class="alert alert-dismissable alert-success">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="alert alert-info">
+            <div class="alert alert-dismissable alert-info">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
             </div>
@@ -877,7 +878,7 @@
           <div class="col-lg-4">
             <h2>Labels</h2>
             <div class="bs-example" style="margin-bottom: 40px;">
-              <span class="label">Default</span>
+              <span class="label label-default">Default</span>
               <span class="label label-success">Success</span>
               <span class="label label-warning">Warning</span>
               <span class="label label-danger">Danger</span>
@@ -1048,14 +1049,20 @@
         <div class="row">
           <div class="col-lg-4">        
             <div class="panel">
-              Basic panel
+              <div class="panel-body">
+                Basic panel
+              </div>
             </div>
             <div class="panel">
               <div class="panel-heading">Panel heading</div>
-              Panel content
+              <div class="panel-body">
+                Panel content
+              </div>
             </div>
             <div class="panel">
-              Panel content
+              <div class="panel-body">
+                Panel content
+              </div>
               <div class="panel-footer">Panel footer</div>
             </div>
           </div>
@@ -1064,13 +1071,17 @@
               <div class="panel-heading">
                 <h3 class="panel-title">Panel primary</h3>
               </div>
-              Panel content
+              <div class="panel-body">
+                Panel content
+              </div>
             </div>
             <div class="panel panel-success">
               <div class="panel-heading">
                 <h3 class="panel-title">Panel success</h3>
               </div>
-              Panel content
+              <div class="panel-body">
+                Panel content
+              </div>
             </div>
             <div class="panel panel-warning">
               <div class="panel-heading">
@@ -1084,13 +1095,17 @@
               <div class="panel-heading">
                 <h3 class="panel-title">Panel danger</h3>
               </div>
-              Panel content
+              <div class="panel-body">
+                Panel content
+              </div>
             </div>
             <div class="panel panel-info">
               <div class="panel-heading">
                 <h3 class="panel-title">Panel info</h3>
               </div>
-              Panel content
+              <div class="panel-body">
+                Panel content
+              </div>
             </div>
           </div>
         </div>
diff --git a/custom/variables.less b/custom/variables.less
index ab53d125..07a0227b 100644..100755
--- a/custom/variables.less
+++ b/custom/variables.less
@@ -60,21 +60,26 @@
 // -------------------------
 // Based on 14px font-size and 1.428 line-height (~20px to start)
 
-@padding-base-vertical:          8px;
+@padding-base-vertical:          6px;
 @padding-base-horizontal:        12px;
 
-@padding-large-vertical:         14px;
+@padding-large-vertical:         10px;
 @padding-large-horizontal:       16px;
 
 @padding-small-vertical:         5px;
 @padding-small-horizontal:       10px;
 
+@line-height-large:              1.33;
+@line-height-small:              1.5;
+
 @border-radius-base:             4px;
 @border-radius-large:            6px;
 @border-radius-small:            3px;
 
 @component-active-bg:            @brand-primary;
 
+@caret-width-base:               4px;
+@caret-width-large:              5px;
 
 // Tables
 // -------------------------
@@ -93,31 +98,33 @@
 // Buttons
 // -------------------------
 
-@btn-default-color:              #fff;
-@btn-default-bg:                 #474949;
-@btn-default-border:             @btn-default-bg;
+@btn-font-weight:                bold;
+
+@btn-default-color:              #333;
+@btn-default-bg:                 #fff;
+@btn-default-border:             #ccc;
 
-@btn-primary-color:              @btn-default-color;
+@btn-primary-color:              #fff;
 @btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             @btn-primary-bg;
+@btn-primary-border:             darken(@btn-primary-bg, 5%);
 
-@btn-success-color:              @btn-default-color;
+@btn-success-color:              #fff;
 @btn-success-bg:                 @brand-success;
-@btn-success-border:             @btn-success-bg;
+@btn-success-border:             darken(@btn-success-bg, 5%);
 
-@btn-warning-color:              @btn-default-color;
+@btn-warning-color:              #fff;
 @btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             @btn-warning-bg;
+@btn-warning-border:             darken(@btn-warning-bg, 5%);
 
-@btn-danger-color:               @btn-default-color;
+@btn-danger-color:               #fff;
 @btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              @btn-danger-bg;
+@btn-danger-border:              darken(@btn-danger-bg, 5%);
 
-@btn-info-color:                 @btn-default-color;
+@btn-info-color:                 #fff;
 @btn-info-bg:                    @brand-info;
-@btn-info-border:                @btn-info-bg;
+@btn-info-border:                darken(@btn-info-bg, 5%);
 
-@btn-hover-color:                @btn-default-color;
+@btn-link-disabled-color:        @gray-light;
 
 
 // Forms
@@ -126,17 +133,21 @@
 @input-bg:                       #fff;
 @input-bg-disabled:              @gray-lighter;
 
+@input-color:                    @gray;
 @input-border:                   #ccc;
 @input-border-radius:            @border-radius-base;
+@input-border-focus:             #66afe9;
 
 @input-color-placeholder:        @gray-light;
 
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-@input-height-large:             (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
-@input-height-small:             (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
+@input-height-large:             (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
 
+@legend-color:                   @gray-dark;
 @legend-border-color:            #e5e5e5;
 
+@input-group-addon-bg:           @gray-lighter;
 @input-group-addon-border-color: @input-border;
 
 
@@ -155,6 +166,10 @@
 @dropdown-link-hover-color:      #fff;
 @dropdown-link-hover-bg:         @dropdown-link-active-bg;
 
+@dropdown-link-disabled-color:   @gray-light;
+
+@dropdown-header-color:          @gray-light;
+
 @dropdown-caret-color:           #000;
 
 
@@ -174,15 +189,54 @@
 @zindex-modal-background:  1040;
 @zindex-modal:             1050;
 
+// Media queries breakpoints
+// --------------------------------------------------
+
+// Extra small screen / phone
+@screen-xsmall:              480px;
+@screen-phone:               @screen-xsmall;
+
+// Small screen / tablet
+@screen-small:               768px;
+@screen-tablet:              @screen-small;
+
+// Medium screen / desktop
+@screen-medium:              992px;
+@screen-desktop:             @screen-medium;
+
+// Large screen / wide desktop
+@screen-large:               1200px;
+@screen-large-desktop:       @screen-large;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-phone-max:           (@screen-small - 1);
+@screen-small-max:           (@screen-medium - 1);
+@screen-tablet-max:          (@screen-desktop - 1);
+@screen-desktop-max:         (@screen-large-desktop - 1);
+
+
+// Grid system
+// --------------------------------------------------
+
+// Number of columns in the grid system
+@grid-columns:              12;
+// Padding, to be divided by two and applied to the left and right of all columns
+@grid-gutter-width:         30px;
+// Point at which the navbar stops collapsing
+@grid-float-breakpoint:     @screen-tablet;
+
 
 // Navbar
 // -------------------------
 
 // Basics of a navbar
 @navbar-height:                    50px;
+@navbar-margin-bottom:             @line-height-computed;
 @navbar-color:                     #777;
-@navbar-bg:                        #eee;
-@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);  // ~15px
+@navbar-bg:                        #f8f8f8;
+@navbar-border:                    darken(@navbar-bg, 6.5%);
+@navbar-border-radius:             @border-radius-base;
+@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 
 // Navbar links
@@ -190,7 +244,7 @@
 @navbar-link-hover-color:          #333;
 @navbar-link-hover-bg:             transparent;
 @navbar-link-active-color:         #555;
-@navbar-link-active-bg:            darken(@navbar-bg, 10%);
+@navbar-link-active-bg:            darken(@navbar-bg, 6.5%);
 @navbar-link-disabled-color:       #ccc;
 @navbar-link-disabled-bg:          transparent;
 
@@ -210,6 +264,7 @@
 // Reset inverted navbar basics
 @navbar-inverse-color:                      @gray-light;
 @navbar-inverse-bg:                         #222;
+@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
 
 // Inverted navbar links
 @navbar-inverse-link-color:                 @gray-light;
@@ -241,6 +296,7 @@
 // Navs
 // -------------------------
 
+@nav-link-padding:                          10px 15px;
 @nav-link-hover-bg:                         @gray-lighter;
 
 @nav-disabled-link-color:                   @gray-light;
@@ -271,10 +327,15 @@
 
 @pagination-bg:                        #fff;
 @pagination-border:                    #ddd;
-@pagination-active-bg:                 #f5f5f5;
-@pagination-active-color:              @gray-light;
+
+@pagination-hover-bg:                  @gray-lighter;
+
+@pagination-active-bg:                 @brand-primary;
+@pagination-active-color:              #fff;
+
 @pagination-disabled-color:            @gray-light;
 
+
 // Pager
 // -------------------------
 
@@ -314,7 +375,7 @@
 // -------------------------
 @tooltip-max-width:           200px;
 @tooltip-color:               #fff;
-@tooltip-bg:                  rgba(0,0,0,.9);
+@tooltip-bg:                  #000;
 
 @tooltip-arrow-width:         5px;
 @tooltip-arrow-color:         @tooltip-bg;
@@ -339,6 +400,9 @@
 
 // Labels
 // -------------------------
+
+@label-default-bg:            @gray-light;
+@label-primary-bg:            @brand-primary;
 @label-success-bg:            @brand-success;
 @label-info-bg:               @brand-info;
 @label-warning-bg:            @brand-warning;
@@ -366,10 +430,13 @@
 
 // Alerts
 // -------------------------
+@alert-padding:               15px;
+@alert-border-radius:         @border-radius-base;
+@alert-link-font-weight:      bold;
+
 @alert-bg:                    @state-warning-bg;
 @alert-text:                  @state-warning-text;
 @alert-border:                @state-warning-border;
-@alert-border-radius:         @border-radius-base;
 
 @alert-success-bg:            @state-success-bg;
 @alert-success-text:          @state-success-text;
@@ -442,31 +509,33 @@
 
 // Thumbnails
 // -------------------------
-@thumbnail-caption-color:     @text-color;
+@thumbnail-padding:           4px;
 @thumbnail-bg:                @body-bg;
 @thumbnail-border:            #ddd;
 @thumbnail-border-radius:     @border-radius-base;
 
+@thumbnail-caption-color:     @text-color;
+@thumbnail-caption-padding:   9px;
+
 
 // Wells
 // -------------------------
 @well-bg:                     #f5f5f5;
 
 
-// Accordion
-// -------------------------
-@accordion-border-color:      #e5e5e5;
-
-
 // Badges
 // -------------------------
 @badge-color:                 #fff;
 @badge-link-hover-color:      #fff;
-
 @badge-bg:                    @gray-light;
+
 @badge-active-color:          @link-color;
 @badge-active-bg:             #fff;
 
+@badge-font-weight:           bold;
+@badge-line-height:           1;
+@badge-border-radius:         10px;
+
 
 // Breadcrumbs
 // -------------------------
@@ -477,12 +546,16 @@
 
 // Carousel
 // ------------------------
+
 @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
 
 @carousel-control-color:                      #fff;
+@carousel-control-width:                      15%;
+@carousel-control-opacity:                    .5;
+@carousel-control-font-size:                  20px;
 
-@carousel-indicator-border-color:             #fff;
 @carousel-indicator-active-bg:                #fff;
+@carousel-indicator-border-color:             #fff;
 
 @carousel-caption-color:                      #fff;
 
@@ -490,6 +563,7 @@
 // Close
 // ------------------------
 @close-color:                 #000;
+@close-font-weight:           bold;
 @close-text-shadow:           0 1px 0 #fff;
 
 
@@ -499,7 +573,9 @@
 @code-bg:                     #f9f2f4;
 
 @pre-bg:                      #f5f5f5;
+@pre-color:                   @gray-dark;
 @pre-border-color:            #ccc;
+@pre-scrollable-max-height:   340px;
 
 // Type
 // ------------------------
@@ -520,49 +596,14 @@
 @component-offset-horizontal: 180px;
 
 
-// Media queries breakpoints
-// --------------------------------------------------
-
-// Tiny screen / phone
-@screen-tiny:                480px;
-@screen-phone:               @screen-tiny;
-
-// Small screen / tablet
-@screen-small:               768px;
-@screen-tablet:              @screen-small;
-
-// Medium screen / desktop
-@screen-medium:              992px;
-@screen-desktop:             @screen-medium;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-small-max:           (@screen-medium - 1);
-@screen-tablet-max:          @screen-small-max;
-
-// Large screen / wide desktop
-@screen-large:               1200px;
-@screen-large-desktop:       @screen-large;
-
-
 // Container sizes
 // --------------------------------------------------
 
 // Small screen / tablet
-@container-tablet:          728px;
+@container-tablet:          720px;
 
 // Medium screen / desktop
 @container-desktop:         940px;
 
 // Large screen / wide desktop
-@container-large-desktop:   1170px;
-
-
-// Grid system
-// --------------------------------------------------
-
-// Number of columns in the grid system
-@grid-columns:              12;
-// Padding, to be divided by two and applied to the left and right of all columns
-@grid-gutter-width:         30px;
-// Point at which the navbar stops collapsing
-@grid-float-breakpoint:     @screen-tablet;
+@container-large-desktop:   1140px;
author	Thomas Park <thomas@thomaspark.me>	2013-08-17 09:37:53 -0700
committer	Thomas Park <thomas@thomaspark.me>	2013-08-17 09:37:53 -0700
commit	14c61be7fa8145279f527e4b36ab70d19c0abd5c (patch)
tree	a1946a368b5ff647b39c28011eec1ee54393624d /custom
parent	4fe37339653c909368ba772ea9214c0b2a511fee (diff)