compass_twitter_bootstrap 0.1.8 → 2.0.0

data/stylesheets_sass/compass_twitter_bootstrap/_dropdowns.sass

@@ -0,0 +1,121 @@
+// DROPDOWN MENUS
+// --------------
+
+// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropdown
+  position: relative
+
+.dropdown-toggle
+  // The caret makes the toggle a bit too tall in IE7
+  *margin-bottom: -3px
+
+.dropdown-toggle:active,
+.open .dropdown-toggle
+  outline: 0
+
+// Dropdown arrow/caret
+.caret
+  display: inline-block
+  width: 0
+  height: 0
+  text-indent: -99999px
+  // IE7 won't do the border trick if there's a text indent, but it doesn't
+  // do the content that text-indent is hiding, either, so we're ok.
+  *text-indent: 0
+  vertical-align: top
+  border-left: 4px solid transparent
+  border-right: 4px solid transparent
+  border-top: 4px solid $black
+  +opacity(0.3)
+  content: "\2193"
+
+.dropdown .caret
+  margin-top: 8px
+  margin-left: 2px
+
+.dropdown:hover .caret,
+.open.dropdown .caret
+  +opacity(1)
+
+// The dropdown menu (ul)
+.dropdown-menu
+  position: absolute
+  top: 100%
+  left: 0
+  z-index: $zindexDropdown
+  float: left
+  display: none
+  // none by default, but block on "open" of the menu
+  min-width: 160px
+  max-width: 220px
+  _width: 160px
+  padding: 4px 0
+  margin: 0
+  // override default ul
+  list-style: none
+  background-color: $white
+  border-color: #ccc
+  border-color: rgba(0, 0, 0, 0.2)
+  border-style: solid
+  border-width: 1px
+  +border-radius(0 0 5px 5px)
+  +box-shadow(0 5px 10px rgba(0, 0, 0, 0.2))
+  -webkit-background-clip: padding-box
+  -moz-background-clip: padding
+  background-clip: padding-box
+  *border-right-width: 2px
+  *border-bottom-width: 2px
+  // Allow for dropdowns to go bottom up (aka, dropup-menu)
+  &.bottom-up
+    top: auto
+    bottom: 100%
+    margin-bottom: 2px
+  // Dividers (basically an hr) within the dropdown
+  .divider
+    height: 1px
+    margin: 5px 1px
+    overflow: hidden
+    background-color: #e5e5e5
+    border-bottom: 1px solid $white
+    // IE7 needs a set width since we gave a height. Restricting just
+    // to IE7 to keep the 1px left/right space in other browsers.
+    // It is unclear where IE is getting the extra space that we need
+    // to negative-margin away, but so it goes.
+    *width: 100%
+    *margin: -5px 0 5px
+  // Links within the dropdown menu
+  a
+    display: block
+    padding: 3px 15px
+    clear: both
+    font-weight: normal
+    line-height: 18px
+    color: $gray
+    white-space: nowrap
+
+// Hover state
+
+.dropdown-menu li > a:hover,
+.dropdown-menu .active > a,
+.dropdown-menu .active > a:hover
+  color: $white
+  text-decoration: none
+  background-color: $linkColor
+
+// Open state for the dropdown
+.dropdown.open
+  // IE7's z-index only goes to the nearest positioned ancestor, which would
+  // make the menu appear below buttons that appeared later on the page
+  *z-index: $zindexDropdown
+  .dropdown-toggle
+    color: $white
+    background: #ccc
+    background: rgba(0, 0, 0, 0.3)
+  .dropdown-menu
+    display: block
+
+// Typeahead
+.typeahead
+  margin-top: 2px
+  // give it some space to breathe
+  +border-radius(4px)

data/stylesheets_sass/compass_twitter_bootstrap/_forms.sass

@@ -1,61 +1,46 @@
-/* Forms.less
- * Base styles for various input types, form layouts, and states
- * -------------------------------------------------------------
+// Forms.less
+// Base styles for various input types, form layouts, and states
+// -------------------------------------------------------------
 
-// FORM STYLES
-// -----------
+// GENERAL STYLES
+// --------------
 
+// Make all forms have space below them
 form
-  margin-bottom: $baseline
+  margin: 0 0 $baseLineHeight
 
-// 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
+  padding: 0
+  margin: 0
+  border: 0
 
-// Parent element that clears floats and wraps labels and fields together
-form .clearfix
-  margin-bottom: $baseline
-  +clearfix
+// Groups of fields with labels on top (legends)
+legend
+  display: block
+  width: 100%
+  padding: 0
+  margin-bottom: $baseLineHeight * 1.5
+  font-size: $baseFontSize * 1.5
+  line-height: $baseLineHeight * 2
+  color: $grayDark
+  border: 0
+  border-bottom: 1px solid #eee
 
 // Set font for forms
 
 label,
 input,
+button,
 select,
 textarea
-  +sans-serif(normal, 13px, normal)
+  +font-sans-serif($baseFontSize, normal, $baseLineHeight)
 
-// Float labels left
+// Identify controls by their labels
 label
-  padding-top: 6px
-  font-size: $basefont
-  line-height: $baseline
-  float: left
-  width: 130px
-  text-align: right
+  display: block
+  margin-bottom: 5px
   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,
@@ -64,100 +49,208 @@ select,
 .uneditable-input
   display: inline-block
   width: 210px
-  height: $baseline
+  height: $baseLineHeight
   padding: 4px
-  font-size: $basefont
-  line-height: $baseline
+  margin-bottom: 9px
+  font-size: $baseFontSize
+  line-height: $baseLineHeight
   color: $gray
   border: 1px solid #ccc
   +border-radius(3px)
 
-// remove padding from select
-select
-  padding: initial
+.uneditable-textarea
+  width: auto
+  height: auto
 
-// mini reset for non-html5 file types
+// Inputs within a label
 
-input[type=checkbox],
-input[type=radio]
+label input,
+label textarea,
+label select
+  display: block
+
+// Mini reset for unique input types
+
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"]
   width: auto
   height: auto
   padding: 0
   margin: 3px 0
   *margin-top: 0
-  /* IE6-7
+  /* IE7
   line-height: normal
-  border: none
+  border: 0
+  cursor: pointer
+  +border-radius(0)
 
-input[type=file]
-  background-color: $white
+// Reset the file input to browser defaults
+input[type="file"]
   padding: initial
-  border: initial
   line-height: initial
+  border: initial
+  background-color: $white
+  background-color: initial
   +box-shadow(none)
 
-input[type=button],
-input[type=reset],
-input[type=submit]
+// Help out input buttons
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"]
   width: auto
   height: auto
 
+// Set the height of select and file controls to match text inputs
+
 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
+input[type="file"]
+  height: 28px
+  /* In IE7, the height of the select element cannot be changed by height, only font-size
   *margin-top: 4px
   /* For IE7, add top margin to align select with labels
+  line-height: 28px
 
-// Make multiple select elements height not fixed
-select[multiple]
-  height: inherit
+// Chrome on Linux and Mobile Safari need background-color
+select
+  width: 220px
+  // default input width + 10px of padding that doesn't get applied
   background-color: $white
-  // Fixes Chromium bug of unreadable items
 
+// Make multiple select elements height not fixed
+
+select[multiple],
+select[size]
+  height: auto
+
+// Remove shadow from image inputs
+input[type="image"]
+  +box-shadow(none)
+
+// Make textarea height behave
 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
+// Hidden inputs
+input[type="hidden"]
+  display: none
 
-// Placeholder text gets special styles; can't be bundled together though for some reason
-\:-moz-placeholder
-  color: $grayLight
+// CHECKBOXES & RADIOS
+// -------------------
 
-\::-webkit-input-placeholder
-  color: $grayLight
+// Indent the labels to position radios/checkboxes as hanging
+
+.radio,
+.checkbox
+  padding-left: 18px
 
-// Focus states
+.radio input[type="radio"],
+.checkbox input[type="checkbox"]
+  float: left
+  margin-left: -18px
+
+// Move the options list down to align with labels
+
+.controls > .radio:first-child,
+.controls > .checkbox:first-child
+  padding-top: 5px
+  // has to be padding because margin collaspes
+
+// Radios and checkboxes on same line
+
+.radio.inline,
+.checkbox.inline
+  display: inline-block
+  margin-bottom: 0
+  vertical-align: middle
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline
+  margin-left: 10px
+  // space out consecutive inline controls
+
+// But don't forget to remove their padding on first-child
+
+.controls > .radio.inline:first-child,
+.controls > .checkbox.inline:first-child
+  padding-top: 0
+
+// FOCUS STATE
+// -----------
 
 input,
 textarea
+  +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
   $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)
+  $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
   +box-shadow($shadow)
+  outline: 0
+  outline: thin dotted \9
+  /* IE6-8
 
-input[type=file]:focus,
-input[type=checkbox]:focus,
+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
+  +tab-focus
+
+// INPUT SIZES
+// -----------
+
+// General classes for quick sizes
+.input-mini
+  width: 60px
+
+.input-small
+  width: 90px
+
+.input-medium
+  width: 150px
+
+.input-large
+  width: 210px
+
+.input-xlarge
+  width: 270px
+
+.input-xxlarge
+  width: 530px
+
+// Grid style input sizes
+
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input
+  float: none
+  margin-left: 0
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
++inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
+
+// DISABLED STATE
+// --------------
+
+// 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
 
 // FORM FIELD FEEDBACK STATES
 // --------------------------
@@ -171,6 +264,7 @@ select:focus
     color: $textColor
   // Style inputs accordingly
   input,
+  select,
   textarea
     color: $textColor
     border-color: $borderColor
@@ -184,184 +278,102 @@ select:focus
     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%))
+.control-group.warning
+  +formFieldState($warningText, $warningText, $warningBackground)
 
-// 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
+// Error
+.control-group.error
+  +formFieldState($errorText, $errorText, $errorBackground)
 
-textarea.xxlarge
-  overflow-y: auto
+// Success
+.control-group.success
+  +formFieldState($successText, $successText, $successBackground)
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+
+input:focus:required:invalid,
+textarea:focus:required:invalid,
+select:focus:required:invalid
+  color: #b94a48
+  border-color: #ee5f5b
+  &:focus
+    border-color: darken(#ee5f5b, 10%)
+    +box-shadow(0 0 6px lighten(#ee5f5b, 20%))
+
+// FORM ACTIONS
+// ------------
+
+.form-actions
+  padding: $baseLineHeight - 1 20px $baseLineHeight
+  margin-top: $baseLineHeight
+  margin-bottom: $baseLineHeight
+  background-color: #f5f5f5
+  border-top: 1px solid #ddd
 
-// 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
+// For text that needs to appear as an input but should not be an input
+.uneditable-input
+  display: block
+  background-color: $white
+  border-color: #eee
+  +box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.025))
+  cursor: not-allowed
 
-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)
+// Placeholder text gets special styles; can't be bundled together though for some reason
++placeholder($grayLight)
 
-// Disabled and read-only inputs
+// HELP TEXT
+// ---------
 
-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
+  margin-top: 5px
+  margin-bottom: 0
   color: $grayLight
 
 .help-inline
+  display: inline-block
+  +ie7-inline-block
+  margin-bottom: 9px
+  vertical-align: middle
   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
+// INPUT GROUPS
+// ------------
 
 // Allow us to put symbols and text within the input field for a cleaner look
 
 .input-prepend,
 .input-append
-  input
+  margin-bottom: 5px
+  +clearfix
+  // Clear the float to prevent wrapping
+  input,
+  .uneditable-input
     +border-radius(0 3px 3px 0)
+    &:focus
+      position: relative
+      z-index: 2
+  .uneditable-input
+    border-left-color: #ccc
   .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
+    height: $baseLineHeight
     margin-right: -1px
+    padding: 4px 5px
     font-weight: normal
-    line-height: 18px
+    line-height: $baseLineHeight
     color: $grayLight
     text-align: center
     text-shadow: 0 1px 0 $white
+    background-color: #f5f5f5
+    border: 1px solid #ccc
     +border-radius(3px 0 0 3px)
   .active
-    background: lighten($green, 30)
+    background-color: lighten($green, 30)
     border-color: $green
 
 .input-prepend
@@ -370,82 +382,91 @@ textarea[readonly]
     /* IE6-7
 
 .input-append
-  input
+  input,
+  .uneditable-input
     float: left
     +border-radius(3px 0 0 3px)
+  .uneditable-input
+    border-right-color: #ccc
   .add-on
-    +border-radius(0 3px 3px 0)
     margin-right: 0
     margin-left: -1px
+    +border-radius(0 3px 3px 0)
+  input:first-child
+    // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
+    // inherit the sum of its ancestors' margins.
+    *margin-left: -160px
+    & + .add-on
+      *margin-left: -21px
+
+// SEARCH FORM
+// -----------
 
-// 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
+.search-query
+  padding-left: 14px
+  padding-right: 14px
+  margin-bottom: 0
+  // remove the default margin on all inputs
+  +border-radius(14px)
 
-// 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
+// HORIZONTAL & VERTICAL FORMS
+// ---------------------------
+
+// Common properties
+// -----------------
+
+.form-search,
+.form-inline,
+.form-horizontal
+  input,
+  textarea,
+  select,
+  .help-inline,
+  .uneditable-input
+    display: inline-block
     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
+
+.form-search label,
+.form-inline label,
+.form-search .input-append,
+.form-inline .input-append,
+.form-search .input-prepend,
+.form-inline .input-prepend
+  display: inline-block
+
+// Make the prepend and append add-on vertical-align: middle;
+
+.form-search .input-append .add-on,
+.form-inline .input-prepend .add-on,
+.form-search .input-append .add-on,
+.form-inline .input-prepend .add-on
+  vertical-align: middle
+
+// Margin to space out fieldsets
+.control-group
+  margin-bottom: $baseLineHeight / 2
+
+// Horizontal-specific styles
+// --------------------------
+
+.form-horizontal
+  // Legend collapses margin, so we're relegated to padding
+  legend + .control-group
+    margin-top: $baseLineHeight
+    -webkit-margin-top-collapse: separate
+  // Increase spacing between groups
+  .control-group
+    margin-bottom: $baseLineHeight
+    +clearfix
+  // Float the labels left
+  .control-group > label
+    float: left
+    width: 140px
+    padding-top: 5px
+    text-align: right
+  // Move over all input controls and content
+  .controls
+    margin-left: 160px
+  // Move over buttons in .form-actions to align with .controls
+  .form-actions
+    padding-left: 160px