compass_twitter_bootstrap 0.1.7 → 0.1.8

data/stylesheets/compass_twitter_bootstrap/_reset.scss

@@ -1,5 +1,5 @@
 /* Reset.less
- * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
+ * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 

data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss

@@ -7,10 +7,8 @@
 // STRUCTURAL LAYOUT
 // -----------------
 
-html, body {
-  background-color: $white;
-}
 body {
+  background-color: $white;
   margin: 0;
   @include sans-serif(normal,$basefont,$baseline);
   color: $grayDark;
@@ -29,7 +27,9 @@ body {
   padding-right: 20px;
   @include clearfix();
   > .sidebar {
-    float: left;
+    position: absolute;
+    top: 0;
+    left: 20px;
     width: 220px;
   }
   // TODO in v2: rename this and .popover .content to be more specific
@@ -77,12 +77,12 @@ a {
 
 .row {
   @include clearfix();
-  margin-left: -1 * $gridGutterWidth;
+  margin-left: -$gridGutterWidth;
 }
 
 // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
 // Credit to $dhg for the idea
-[class*="span"] {
+.row > [class*="span"] {
   @include gridColumn();
 }
 
@@ -115,21 +115,25 @@ a {
 .span24    { @include columns(24); }
 
 // Offset column options
-.offset1   { @include offset(1); }
-.offset2   { @include offset(2); }
-.offset3   { @include offset(3); }
-.offset4   { @include offset(4); }
-.offset5   { @include offset(5); }
-.offset6   { @include offset(6); }
-.offset7   { @include offset(7); }
-.offset8   { @include offset(8); }
-.offset9   { @include offset(9); }
-.offset10  { @include offset(10); }
-.offset11  { @include offset(11); }
-.offset12  { @include offset(12); }
+.row {
+  > .offset1   { @include offset(1); }
+  > .offset2   { @include offset(2); }
+  > .offset3   { @include offset(3); }
+  > .offset4   { @include offset(4); }
+  > .offset5   { @include offset(5); }
+  > .offset6   { @include offset(6); }
+  > .offset7   { @include offset(7); }
+  > .offset8   { @include offset(8); }
+  > .offset9   { @include offset(9); }
+  > .offset10  { @include offset(10); }
+  > .offset11  { @include offset(11); }
+  > .offset12  { @include offset(12); }
+}
 
 // Unique column sizes for 16-column grid
 .span-one-third     { width: 300px; }
 .span-two-thirds    { width: 620px; }
-.offset-one-third   { margin-left: 340px; }
-.offset-two-thirds  { margin-left: 660px; }
+.row {
+  > .offset-one-third   { margin-left: 340px; }
+  > .offset-two-thirds  { margin-left: 660px; }
+}

data/stylesheets/compass_twitter_bootstrap/_tables.scss

@@ -11,12 +11,10 @@ table {
   width: 100%;
   margin-bottom: $baseline;
   padding: 0;
-  border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
   font-size: $basefont;
-  border: 1px solid #ddd;
-  @include border-radius(4px);
-  th, td {
+  border-collapse: collapse;
+  th,
+  td {
     padding: 10px 10px 9px;
     line-height: $baseline;
     text-align: left;
@@ -25,21 +23,47 @@ table {
     padding-top: 9px;
     font-weight: bold;
     vertical-align: middle;
-    border-bottom: 1px solid #ddd;
   }
   td {
     vertical-align: top;
+    border-top: 1px solid #ddd;
+  }
+  // When scoped to row, fix th in tbody
+  tbody th {
+    border-top: 1px solid #ddd;
+    vertical-align: top;
   }
+}
+
+
+// CONDENSED VERSION
+// -----------------
+.condensed-table {
+  th,
+  td {
+    padding: 5px 5px 4px;
+  }
+}
+
+
+// BORDERED VERSION
+// ----------------
+
+.bordered-table {
+  border: 1px solid #ddd;
+  border-collapse: separate; // Done so we can round those corners!
+  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+  @include border-radius(4px);
   th + th,
-  td + td {
+  td + td,
+  th + td {
     border-left: 1px solid #ddd;
   }
-  tr + tr td {
-    border-top: 1px solid #ddd;
-  }
+  thead tr:first-child th:first-child,
   tbody tr:first-child td:first-child {
     @include border-radius(4px 0 0 0);
   }
+  thead tr:first-child th:last-child,
   tbody tr:first-child td:last-child {
     @include border-radius(0 4px 0 0);
   }
@@ -52,20 +76,52 @@ table {
 }
 
 
+// TABLE CELL SIZES
+// ----------------
+
+// This is a duplication of the main grid @include columns(); mixin, but subtracts 20px to account for input padding and border
+@mixin tableColumns($columnSpan: 1) {
+  width: (($gridColumnWidth - 20) * $columnSpan) + (($gridColumnWidth - 20) * ($columnSpan - 1));
+}
+table {
+  // Default columns
+  .span1     { @include tableColumns(1); }
+  .span2     { @include tableColumns(2); }
+  .span3     { @include tableColumns(3); }
+  .span4     { @include tableColumns(4); }
+  .span5     { @include tableColumns(5); }
+  .span6     { @include tableColumns(6); }
+  .span7     { @include tableColumns(7); }
+  .span8     { @include tableColumns(8); }
+  .span9     { @include tableColumns(9); }
+  .span10    { @include tableColumns(10); }
+  .span11    { @include tableColumns(11); }
+  .span12    { @include tableColumns(12); }
+  .span13    { @include tableColumns(13); }
+  .span14    { @include tableColumns(14); }
+  .span15    { @include tableColumns(15); }
+  .span16    { @include tableColumns(16); }
+}
+
+
 // ZEBRA-STRIPING
 // --------------
 
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 .zebra-striped {
   tbody {
-    tr:nth-child(odd) td {
+    tr:nth-child(odd) td,
+    tr:nth-child(odd) th {
       background-color: #f9f9f9;
     }
-    tr:hover td {
+    tr:hover td,
+    tr:hover th {
       background-color: #f5f5f5;
     }
   }
+}
 
+table {
   // Tablesorting styles w/ jQuery plugin
   .header {
     cursor: pointer;
@@ -111,9 +167,6 @@ table {
       @include opacity(60);
     }
   }
-}
-
-table {
   // Blue Table Headings
   .blue {
     color: $blue;

data/stylesheets_sass/_compass_twitter_bootstrap.sass

@@ -0,0 +1,27 @@
+/*!
+ * Bootstrap v1.3.0
+ *
+ * Copyright 2011 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ * Date: @DATE
+
+@import compass
+
+// CSS Reset
+@import compass_twitter_bootstrap/reset
+
+// Core variables and mixins
+@import compass_twitter_bootstrap/variables
+@import compass_twitter_bootstrap/mixins
+
+// Grid system and page structure
+@import compass_twitter_bootstrap/scaffolding
+
+// Styled patterns and elements
+@import compass_twitter_bootstrap/type
+@import compass_twitter_bootstrap/forms
+@import compass_twitter_bootstrap/tables
+@import compass_twitter_bootstrap/patterns

data/stylesheets_sass/compass_twitter_bootstrap/_forms.sass

@@ -0,0 +1,451 @@
+/* Forms.less
+ * Base styles for various input types, form layouts, and states
+ * -------------------------------------------------------------
+
+// FORM STYLES
+// -----------
+
+form
+  margin-bottom: $baseline
+
+// Groups of fields with labels on top (legends)
+fieldset
+  margin-bottom: $baseline
+  padding-top: $baseline
+  legend
+    display: block
+    padding-left: 150px
+    font-size: $basefont * 1.5
+    line-height: 1
+    color: $grayDark
+    *padding: 0 0 5px 145px
+    /* IE6-7
+    *line-height: 1.5
+    /* IE6-7
+
+// Parent element that clears floats and wraps labels and fields together
+form .clearfix
+  margin-bottom: $baseline
+  +clearfix
+
+// Set font for forms
+
+label,
+input,
+select,
+textarea
+  +sans-serif(normal, 13px, normal)
+
+// Float labels left
+label
+  padding-top: 6px
+  font-size: $basefont
+  line-height: $baseline
+  float: left
+  width: 130px
+  text-align: right
+  color: $grayDark
+
+// Shift over the inside div to align all label's relevant content
+form .input
+  margin-left: 150px
+
+// Checkboxs and radio buttons
+
+input[type=checkbox],
+input[type=radio]
+  cursor: pointer
+
+// Inputs, Textareas, Selects
+
+input,
+textarea,
+select,
+.uneditable-input
+  display: inline-block
+  width: 210px
+  height: $baseline
+  padding: 4px
+  font-size: $basefont
+  line-height: $baseline
+  color: $gray
+  border: 1px solid #ccc
+  +border-radius(3px)
+
+// remove padding from select
+select
+  padding: initial
+
+// mini reset for non-html5 file types
+
+input[type=checkbox],
+input[type=radio]
+  width: auto
+  height: auto
+  padding: 0
+  margin: 3px 0
+  *margin-top: 0
+  /* IE6-7
+  line-height: normal
+  border: none
+
+input[type=file]
+  background-color: $white
+  padding: initial
+  border: initial
+  line-height: initial
+  +box-shadow(none)
+
+input[type=button],
+input[type=reset],
+input[type=submit]
+  width: auto
+  height: auto
+
+select,
+input[type=file]
+  height: $baseline * 1.5
+  // In IE7, the height of the select element cannot be changed by height, only font-size
+  *height: auto
+  // Reset for IE7
+  line-height: $baseline * 1.5
+  *margin-top: 4px
+  /* For IE7, add top margin to align select with labels
+
+// Make multiple select elements height not fixed
+select[multiple]
+  height: inherit
+  background-color: $white
+  // Fixes Chromium bug of unreadable items
+
+textarea
+  height: auto
+
+// For text that needs to appear as an input but should not be an input
+.uneditable-input
+  background-color: $white
+  display: block
+  border-color: #eee
+  +box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.025))
+  cursor: not-allowed
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+\:-moz-placeholder
+  color: $grayLight
+
+\::-webkit-input-placeholder
+  color: $grayLight
+
+// Focus states
+
+input,
+textarea
+  $transition: border linear 0.2s, box-shadow linear 0.2s
+  +transition($transition)
+  +box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1))
+
+input:focus,
+textarea:focus
+  outline: 0
+  border-color: rgba(82, 168, 236, 0.8)
+  $shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6)
+  +box-shadow($shadow)
+
+input[type=file]:focus,
+input[type=checkbox]:focus,
+select:focus
+  +box-shadow(none)
+  // override for file inputs
+  outline: 1px dotted #666
+  // Selet elements don't get box-shadow styles, so instead we do outline
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Mixin for form field states
+=formFieldState($textColor: #555555, $borderColor: #cccccc, $backgroundColor: #f5f5f5)
+  // Set the text color
+  > label,
+  .help-block,
+  .help-inline
+    color: $textColor
+  // Style inputs accordingly
+  input,
+  textarea
+    color: $textColor
+    border-color: $borderColor
+    &:focus
+      border-color: darken($borderColor, 10%)
+      +box-shadow(0 0 6px lighten($borderColor, 20%))
+  // Give a small background color for input-prepend/-append
+  .input-prepend .add-on,
+  .input-append .add-on
+    color: $textColor
+    background-color: $backgroundColor
+    border-color: $textColor
+
+// Error
+form .clearfix.error
+  +formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%))
+
+// Warning
+form .clearfix.warning
+  +formFieldState(#c09853, #ccae64, lighten(#ccae64, 5%))
+
+// Success
+form .clearfix.success
+  +formFieldState(#468847, #57a957, lighten(#57a957, 30%))
+
+// Form element sizes
+// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
+
+.input-mini,
+input.mini,
+textarea.mini,
+select.mini
+  width: 60px
+
+.input-small,
+input.small,
+textarea.small,
+select.small
+  width: 90px
+
+.input-medium,
+input.medium,
+textarea.medium,
+select.medium
+  width: 150px
+
+.input-large,
+input.large,
+textarea.large,
+select.large
+  width: 210px
+
+.input-xlarge,
+input.xlarge,
+textarea.xlarge,
+select.xlarge
+  width: 270px
+
+.input-xxlarge,
+input.xxlarge,
+textarea.xxlarge,
+select.xxlarge
+  width: 530px
+
+textarea.xxlarge
+  overflow-y: auto
+
+// Grid style input sizes
+// This is a duplication of the main grid @include columns(); mixin, but subtracts 10px to account for input padding and border
+=formColumns($columnSpan: 1)
+  display: inline-block
+  float: none
+  width: $gridColumnWidth * $columnSpan + $gridGutterWidth * ($columnSpan - 1) - 10
+  margin-left: 0
+
+input,
+textarea
+  // Default columns
+  &.span1
+    +formColumns(1)
+  &.span2
+    +formColumns(2)
+  &.span3
+    +formColumns(3)
+  &.span4
+    +formColumns(4)
+  &.span5
+    +formColumns(5)
+  &.span6
+    +formColumns(6)
+  &.span7
+    +formColumns(7)
+  &.span8
+    +formColumns(8)
+  &.span9
+    +formColumns(9)
+  &.span10
+    +formColumns(10)
+  &.span11
+    +formColumns(11)
+  &.span12
+    +formColumns(12)
+  &.span13
+    +formColumns(13)
+  &.span14
+    +formColumns(14)
+  &.span15
+    +formColumns(15)
+  &.span16
+    +formColumns(16)
+
+// Disabled and read-only inputs
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly]
+  background-color: #f5f5f5
+  border-color: #ddd
+  cursor: not-allowed
+
+// Actions (the buttons)
+.actions
+  background: #f5f5f5
+  margin-top: $baseline
+  margin-bottom: $baseline
+  padding: $baseline - 1 20px $baseline 150px
+  border-top: 1px solid #ddd
+  +border-radius(0 0 3px 3px)
+  .secondary-action
+    float: right
+    a
+      line-height: 30px
+      &:hover
+        text-decoration: underline
+
+// Help Text
+// TODO: Do we need to set basefont and baseline here?
+
+.help-inline,
+.help-block
+  font-size: $basefont
+  line-height: $baseline
+  color: $grayLight
+
+.help-inline
+  padding-left: 5px
+  *position: relative
+  /* IE6-7
+  *top: -5px
+  /* IE6-7
+
+// Big blocks of help text
+.help-block
+  display: block
+  max-width: 600px
+
+// Inline Fields (input fields that appear as inline objects
+.inline-inputs
+  color: $gray
+  span
+    padding: 0 2px 0 1px
+
+// Allow us to put symbols and text within the input field for a cleaner look
+
+.input-prepend,
+.input-append
+  input
+    +border-radius(0 3px 3px 0)
+  .add-on
+    position: relative
+    background: #f5f5f5
+    border: 1px solid #ccc
+    z-index: 2
+    float: left
+    display: block
+    width: auto
+    min-width: 16px
+    height: 18px
+    padding: 4px 4px 4px 5px
+    margin-right: -1px
+    font-weight: normal
+    line-height: 18px
+    color: $grayLight
+    text-align: center
+    text-shadow: 0 1px 0 $white
+    +border-radius(3px 0 0 3px)
+  .active
+    background: lighten($green, 30)
+    border-color: $green
+
+.input-prepend
+  .add-on
+    *margin-top: 1px
+    /* IE6-7
+
+.input-append
+  input
+    float: left
+    +border-radius(3px 0 0 3px)
+  .add-on
+    +border-radius(0 3px 3px 0)
+    margin-right: 0
+    margin-left: -1px
+
+// Stacked options for forms (radio buttons or checkboxes)
+.inputs-list
+  margin: 0 0 5px
+  width: 100%
+  li
+    display: block
+    padding: 0
+    width: 100%
+  label
+    display: block
+    float: none
+    width: auto
+    padding: 0
+    margin-left: 20px
+    line-height: $baseline
+    text-align: left
+    white-space: normal
+    strong
+      color: $gray
+    small
+      font-size: $basefont - 2
+      font-weight: normal
+  .inputs-list
+    margin-left: 25px
+    margin-bottom: 10px
+    padding-top: 0
+  &:first-child
+    padding-top: 6px
+  li + li
+    padding-top: 2px
+  input[type=radio],
+  input[type=checkbox]
+    margin-bottom: 0
+    margin-left: -20px
+    float: left
+
+// Stacked forms
+.form-stacked
+  padding-left: 20px
+  fieldset
+    padding-top: $baseline / 2
+  legend
+    padding-left: 0
+  label
+    display: block
+    float: none
+    width: auto
+    font-weight: bold
+    text-align: left
+    line-height: 20px
+    padding-top: 0
+  .clearfix
+    margin-bottom: $baseline / 2
+    div.input
+      margin-left: 0
+  .inputs-list
+    margin-bottom: 0
+    li
+      padding-top: 0
+      label
+        font-weight: normal
+        padding-top: 0
+  div.clearfix.error
+    padding-top: 10px
+    padding-bottom: 10px
+    padding-left: 10px
+    margin-top: 0
+    margin-left: -10px
+  .actions
+    margin-left: -20px
+    padding-left: 20px