reseting baseline to 18px, fixing wells, moving pre styles for chili to docs

4e95e558 · Mark Otto · 01c5e74b · 4e95e558 · 4e95e558 · 4e95e558
Commit 4e95e558 authored Jun 28, 2011 by Mark Otto
10 changed files
--- a/bootstrap-1.0.0.css
+++ b/bootstrap-1.0.0.css
--- a/bootstrap-1.0.0.min.css
+++ b/bootstrap-1.0.0.min.css
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -186,3 +186,44 @@ div.topbar-wrapper div.topbar {
  -moz-border-radius: 4px;
  border-radius: 4px;
 }
+/* Code blocks
+-------------------------------------------------- */
+pre.css, pre.html {
+  background-color: #fff;
+}
+pre ol {
+  background-color: #feeed6;
+  list-style: decimal;
+  margin: -17px;
+  padding-left: 59px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+pre ol li {
+  background-color: #fff;
+  padding: 0 10px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #fddfb3;
+  font-size: 11px;
+  line-height: 18px;
+  color: #bbb;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
+  word-wrap: break-word;
+}
+pre ol li:first-child {
+  padding-top: 9px;
+}
+pre ol li:last-child {
+  padding-bottom: 9px;
+}
+span.html__tag_start, span.html__tag_end {
+  color: #277ac1;
+  font-weight: normal;
+}
+span.html__attr_name {
+  color: #d78b41;
+}
+span.html__attr_value {
+  color: #de4a3f;
+}
--- a/docs/index.html
+++ b/docs/index.html
@@ -11,7 +11,6 @@
    <!-- Le javascript -->
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
-    <script src="assets/js/jquery/hashgrid.js"></script>
    <script src="assets/js/jquery/chili/jquery.chili-2.2.js"></script>
    <script src="assets/js/jquery/chili/recipes.js"></script>
    <script id="setup">ChiliBook.lineNumbers = true;</script>
@@ -744,6 +743,7 @@
        <label for="xlInput">X-Large Input</label>
        <div class="input">
          <input class="xlarge error" id="xlInput" name="xlInput" size="30" type="text" />
+          <span class="help-inline">Small snippet of help text</span>
        </div>
      </div> <!-- /clearfix -->
    </fieldset>
@@ -1180,12 +1180,12 @@
 <section id="modals">
  <div class="page-header">
-    <h1>Modals <small>Rules and conditions for displaying content in popovers.</small></h1>
+    <h1>Modals <small>Rules and conditions for displaying content in dialog boxes</small></h1>
  </div>
  <div class="row">
    <div class="span4 columns">
-      <h2>Tweet Modal</h2>
+      <h2>Example modal</h2>
-      <p>This is text about a modal that i am making. mark will say change this text. we will change it. It will be changed O_O</p>
+      <p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it's important that the background context be maintained.</p>
    </div>
    <div class="span12 columns">
      <div class="modal-backdrop" style="position:relative; min-height:200px; padding:40px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; z-index: 1">

--- a/lib/forms.less
+++ b/lib/forms.less
@@ -37,6 +37,7 @@ form {
    float: left;
    width: 130px;
    text-align: right;
+    color: @grayDark;
  }
  // Shift over the inside div to align all label's relevant content
  div.input {
@@ -53,7 +54,7 @@ form {
  textarea,
  select,
  .uneditable-input {
-    display: block;
+    display: inline-block;
    width: 210px;
    margin: 0;
    padding: 4px;
@@ -99,7 +100,9 @@ form {
    margin: -10px 0 10px;
    .border-radius(4px);
    @error-text: desaturate(lighten(@red, 25%), 25%);
-    > label {
+    > label,
+    span.help-inline,
+    span.help-block {
      color: @red;
    }
    input[type=text],

--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -230,7 +230,7 @@ div.topbar {
          background: rgba(0,0,0,.2);
          padding: 6px 15px;
          cursor: default;
-          color: #666;
+          color: @gray;
          border-top: 1px solid rgba(0,0,0,.2);
        }
      }
@@ -244,10 +244,9 @@ div.topbar {
 div.page-header {
  margin-bottom: @baseline - 1;
  border-bottom: 1px solid #ddd;
-  .border-radius(6px 6px 0 0);
  .box-shadow(0 1px 0 rgba(255,255,255,.5));
  h1 {
-    margin-bottom: 0;
+    margin-bottom: (@baseline / 2) - 1px;
  }
 }
@@ -260,11 +259,11 @@ div.alert-message {
  #gradient > .vertical(transparent, rgba(0,0,0,0.15));
  background-color: @grayLighter;
  margin-bottom: @baseline;
-  padding: 10px 15px 9px;
+  padding: 8px 15px;
-  .border-radius(6px);
  color: #fff;
-  border-bottom: 1px solid rgba(0,0,0,.25);
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  border-bottom: 1px solid rgba(0,0,0,.25);
+  .border-radius(4px);
  p {
    color: #fff;
    margin-bottom: 0;
@@ -303,15 +302,13 @@ div.alert-message {
 // Block-level Alerts
 div.block-message {
  margin-bottom: @baseline;
-  padding: 14px 19px;
+  padding: 14px;
-  color: #333;
+  color: @grayDark;
  color: rgba(0,0,0,.8);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  .border-radius(6px);
  p {
-    font-size: 13px;
+    color: @grayDark;
-    line-height: 18px;
-    color: #333;
    color: rgba(0,0,0,.8);
    margin-right: 30px;
    margin-bottom: 0;
@@ -324,7 +321,7 @@ div.block-message {
  }
  a.close {
    display: block;
-    color: #333;
+    color: @grayDark;
    color: rgba(0,0,0,.5);
    text-shadow: 0 1px 1px rgba(255,255,255,.75);
  }
@@ -368,7 +365,7 @@ ul.pills {
 // Basic Tabs
 ul.tabs {
  width: 100%;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid @grayLight;
  li {
    a {
      margin-bottom: -1px;
@@ -377,12 +374,12 @@ ul.tabs {
      line-height: (@baseline * 2) - 1;
      .border-radius(3px 3px 0 0);
      &:hover {
-        background: #f5f5f5;
+        background-color: @grayLighter;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid @grayLight;
      }
    }
    &.active a {
-      background: #fff;
+      background-color: #fff;
      padding: 0 14px;
      border: 1px solid #ccc;
      border-bottom: 0;
@@ -465,7 +462,7 @@ div.well {
  min-height: 20px;
  border: 1px solid #ddd;
  .border-radius(4px);
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075);
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05);
 }

--- a/lib/preboot.less
+++ b/lib/preboot.less
@@ -30,7 +30,8 @@
 @purple:            #7a43b6;
 // Baseline grid
-@baseline:          20px;
+@basefont:          13px;
+@baseline:          18px;
 // Griditude
 @gridColumns:       16;

--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -35,7 +35,7 @@ html, body {
 }
 body {
  margin: 0;
-  #font > .sans-serif(normal,14px,20px);
+  #font > .sans-serif(normal,@basefont,@baseline);
  color: @gray;
  text-rendering: optimizeLegibility;
 }

--- a/lib/tables.less
+++ b/lib/tables.less
@@ -13,9 +13,10 @@ table {
  padding: 0;
  text-align: left;
  border-collapse: separate;
+  font-size: 13px;
  th, td {
    padding: 10px 10px 9px;
-    line-height: @baseline;
+    line-height: @baseline * .75;
    vertical-align: middle;
    border-bottom: 1px solid #ddd;
  }

--- a/lib/type.less
+++ b/lib/type.less
@@ -8,7 +8,7 @@
 -------------------------------------------------- */
 p {
-  #font > .shorthand(normal,14px,@baseline);
+  #font > .shorthand(normal,@basefont,@baseline);
  margin-bottom: @baseline;
  small {
    font-size: 12px;
@@ -114,40 +114,6 @@ dl {
 /* Misc
 -------------------------------------------------- */
-// Labels
-span.label {
-  background-color: #ccc;
-  padding: 3px 5px;
-  font-size: 10px;
-  font-weight: bold;
-  color: #fff;
-  text-shadow: 0 0 1px rgba(0,0,0,.01);
-  text-transform: uppercase;
-  .border-radius(3px);
-  &.expired {
-    background-color: #f5f5f5;
-    color: #999;
-  }
-  &.pending {
-    background-color: #48489b;
-  }
-  &.declined {
-    background-color: #9b4848;
-  }
-  &.active,
-  &.approved {
-    background-color: #59bf59;
-  }
-  &.disabled {
-    background-color: #faa226;
-  }
-  &.scheduled {
-    background-color: #f5f5f5;
-    color: #59bf59;
-    text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  }
-}
 // Horizontal rules
 hr {
  margin: 0 0 19px;
@@ -219,38 +185,3 @@ pre {
  .border-radius(3px);
  white-space: pre-wrap;
 }
\ No newline at end of file
-// Code block styling from Chili
-pre.css, pre.html {
-  background-color: #fff;
-}
-pre ol {
-  background-color: lighten(@orange, 42%);
-  list-style: decimal;
-  margin: (@baseline - 1) * -1;
-  padding-left: 59px;
-  .border-radius(2px);
-  li {
-    background-color: #fff;
-    padding: 0 10px;
-    border-left: 1px solid rgba(0,0,0,.1);
-    border-left-color: lighten(@orange, 35%);
-    font-size: 11px;
-    line-height: @baseline;
-    color: @grayLight;
-    text-shadow: 0 1px 1px rgba(255,255,255,.5);
-    word-wrap: break-word;
-    &:hover {
-    }
-    &:first-child {
-      padding-top: 9px;
-    }
-    &:last-child {
-      padding-bottom: 9px;
-    }
-  }
-}
-// Language Styles
-span.html__tag_start,
-span.html__tag_end { color: #277ac1; font-weight: normal; }
-span.html__attr_name { color: #d78b41; }
-span.html__attr_value { color: #de4a3f; }