sass_twitter_bootstrap 0.1.alpha.1

data/stylesheets/sass_twitter_bootstrap/_mixins.sass

@@ -0,0 +1,487 @@
+// MIXINS
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
+
+// UTILITY MIXINS
+// -------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+=clearfix
+  *zoom: 1
+  &:before,
+  &:after
+    display: table
+    content: ""
+  &:after
+    clear: both
+
+// Webkit-style focus
+// ------------------
+=tab-focus
+  // Default
+  outline: thin dotted #333
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color
+  outline-offset: -2px
+
+// Center-align a block level element
+// ----------------------------------
+=center-block
+  display: block
+  margin-left: auto
+  margin-right: auto
+
+// IE7 inline-block
+// ----------------
+=ie7-inline-block
+  *display: inline
+  /* IE7 inline-block hack
+  *zoom: 1
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+=ie7-restore-left-whitespace
+  *margin-left: .3em
+  &:first-child
+    *margin-left: 0
+
+=ie7-restore-right-whitespace
+  *margin-right: .3em
+  &:last-child
+    *margin-left: 0
+
+// Sizing shortcuts
+// -------------------------
+=size($height: 5px, $width: 5px)
+  width: $width
+  height: $height
+
+=square($size: 5px)
+  +size($size, $size)
+
+// Placeholder text
+// -------------------------
+=placeholder($color: $placeholderText)
+  \:-moz-placeholder
+    color: $color
+  \::-webkit-input-placeholder
+    color: $color
+
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+=text-overflow
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+// FONTS
+// --------------------------------------------------
+
+// Font Stacks
+=font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  font-size: $size
+  font-weight: $weight
+  line-height: $lineHeight
+
+=font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  font-family: Georgia, "Times New Roman", Times, serif
+  +font-shorthand($size, $weight, $lineHeight)
+
+=font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+  +font-shorthand($size, $weight, $lineHeight)
+
+=font-family-monospace
+  font-family: Menlo, Monaco, "Courier New", monospace
+
+=font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  +font-family-monospace
+  +font-shorthand($size, $weight, $lineHeight)
+
+// GRID SYSTEM
+// --------------------------------------------------
+
+// Site container
+// -------------------------
+=container-fixed
+  width: $gridRowWidth
+  margin-left: auto
+  margin-right: auto
+  +clearfix
+
+// Le grid system
+// -------------------------
+=gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
+  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1)
+
+=gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns)
+  margin-left: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1) + $gridGutterWidth * 2
+
+=gridSystem-gridColumn($gridGutterWidth)
+  float: left
+  margin-left: $gridGutterWidth
+
+// Take these values and mixins, and make 'em do their thang
+=gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
+  // Row surrounds the columns
+  .row
+    margin-left: $gridGutterWidth * -1
+    +clearfix
+  // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
+  [class*="span"]
+    +gridSystem-gridColumn($gridGutterWidth)
+  // Default columns
+  @for $i from 1 through $gridColumns
+    .span#{$i}
+      +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i)
+  .container
+    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12)
+  // Offset column options
+  @for $i from 1 through $gridColumns - 1
+    .offset#{$i}
+      +gridSystem-offset($gridColumnWidth, $gridGutterWidth, $i)
+
+// Fluid grid system
+// -------------------------
+=fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns)
+  width: $fluidGridColumnWidth * $columns + $fluidGridGutterWidth * ($columns - 1)
+
+=fluidGridSystem-gridColumn($fluidGridGutterWidth)
+  float: left
+  margin-left: $fluidGridGutterWidth
+
+// Take these values and mixins, and make 'em do their thang
+=fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth)
+  // Row surrounds the columns
+  .row-fluid
+    width: 100%
+    +clearfix
+    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
+    > [class*="span"]
+      +fluidGridSystem-gridColumn($fluidGridGutterWidth)
+    > [class*="span"]:first-child
+      margin-left: 0
+    // Default columns
+    @for $i from 1 through $gridColumns
+      > .span#{$i}
+        +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $i)
+
+// Input grid system
+// -------------------------
+=inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
+  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1) - 10
+
+=inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
+  input,
+  textarea,
+  .uneditable-input
+    @for $i from 1 through $gridColumns
+      &.span#{$i}
+        +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i)
+
+// Make a Grid
+// -------------------------
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+=makeRow
+  margin-left: $gridGutterWidth * -1
+  +clearfix
+
+=makeColumn($columns: 1)
+  float: left
+  margin-left: $gridGutterWidth
+  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1)
+
+// Form field states (used in forms.less)
+// --------------------------------------------------
+
+// Mixin for form field states
+=formFieldState($textColor: #555555, $borderColor: #cccccc, $backgroundColor: whitesmoke)
+  // Set the text color
+  > label,
+  .help-block,
+  .help-inline
+    color: $textColor
+  // Style inputs accordingly
+  input,
+  select,
+  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
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
+// Border Radius
+=border-radius($radius: 5px)
+  -webkit-border-radius: $radius
+  -moz-border-radius: $radius
+  border-radius: $radius
+
+// Drop shadows
+=box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, 0.25))
+  -webkit-box-shadow: $shadow
+  -moz-box-shadow: $shadow
+  box-shadow: $shadow
+
+// Transitions
+=transition($transition)
+  -webkit-transition: $transition
+  -moz-transition: $transition
+  -ms-transition: $transition
+  -o-transition: $transition
+  transition: $transition
+
+// Transformations
+=rotate($degrees: 5deg)
+  -webkit-transform: rotate($degrees)
+  -moz-transform: rotate($degrees)
+  -ms-transform: rotate($degrees)
+  -o-transform: rotate($degrees)
+  transform: rotate($degrees)
+
+=scale($ratio)
+  -webkit-transform: scale($ratio)
+  -moz-transform: scale($ratio)
+  -ms-transform: scale($ratio)
+  -o-transform: scale($ratio)
+  transform: scale($ratio)
+
+=translate($x: 0, $y: 0)
+  -webkit-transform: translate($x, $y)
+  -moz-transform: translate($x, $y)
+  -ms-transform: translate($x, $y)
+  -o-transform: translate($x, $y)
+  transform: translate($x, $y)
+
+=skew($x: 0, $y: 0)
+  -webkit-transform: translate($x, $y)
+  -moz-transform: translate($x, $y)
+  -ms-transform: translate($x, $y)
+  -o-transform: translate($x, $y)
+  transform: translate($x, $y)
+
+=translate3d($x: 0, $y: 0, $z: 0)
+  -webkit-transform: translate($x, $y, $z)
+  -moz-transform: translate($x, $y, $z)
+  -ms-transform: translate($x, $y, $z)
+  -o-transform: translate($x, $y, $z)
+  transform: translate($x, $y, $z)
+
+// Background clipping
+// Heads up: FF 3.6 and under need padding instead of padding-box
+=background-clip($clip)
+  -webkit-background-clip: $clip
+  -moz-background-clip: $clip
+  background-clip: $clip
+
+// Background sizing
+=background-size($size)
+  -webkit-background-size: $size
+  -moz-background-size: $size
+  -o-background-size: $size
+  background-size: $size
+
+// Box sizing
+=box-sizing($boxmodel)
+  -webkit-box-sizing: $boxmodel
+  -moz-box-sizing: $boxmodel
+  box-sizing: $boxmodel
+
+// User select
+// For selecting text on the page
+=user-select($select)
+  -webkit-user-select: $select
+  -moz-user-select: $select
+  -o-user-select: $select
+  user-select: $select
+
+// Resize anything
+=resizable($direction: both)
+  resize: $direction
+  // Options: horizontal, vertical, both
+  overflow: auto
+  // Safari fix
+
+// CSS3 Content Columns
+=content-columns($columnCount, $columnGap: $gridColumnGutter)
+  -webkit-column-count: $columnCount
+  -moz-column-count: $columnCount
+  column-count: $columnCount
+  -webkit-column-gap: $columnGap
+  -moz-column-gap: $columnGap
+  column-gap: $columnGap
+
+// Opacity
+=opacity($opacity: 100)
+  opacity: $opacity / 100
+  filter: alpha(opacity = $opacity)
+
+// BACKGROUNDS
+// --------------------------------------------------
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+=translucent-background($color: $white, $alpha: 1)
+  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
+
+=translucent-border($color: $white, $alpha: 1)
+  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
+  +background-clip(padding-box)
+
+// Gradients
+=gradient-horizontal($startColor: #555555, $endColor: #333333)
+  background-color: $endColor
+  background-image: -moz-linear-gradient(left, $startColor, $endColor)
+  // FF 3.6+
+  background-image: -ms-linear-gradient(left, $startColor, $endColor)
+  // IE10
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor))
+  // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(left, $startColor, $endColor)
+  // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(left, $startColor, $endColor)
+  // Opera 11.10
+  background-image: linear-gradient(left, $startColor, $endColor)
+  // Le standard
+  background-repeat: repeat-x
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor
+  // IE9 and down
+
+=gradient-vertical($startColor: #555555, $endColor: #333333)
+  background-color: mix($startColor, $endColor, 60%)
+  background-image: -moz-linear-gradient(top, $startColor, $endColor)
+  // FF 3.6+
+  background-image: -ms-linear-gradient(top, $startColor, $endColor)
+  // IE10
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor))
+  // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(top, $startColor, $endColor)
+  // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(top, $startColor, $endColor)
+  // Opera 11.10
+  background-image: linear-gradient(top, $startColor, $endColor)
+  // The standard
+  background-repeat: repeat-x
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor
+  // IE9 and down
+
+=gradient-directional($startColor: #555555, $endColor: #333333, $deg: 45deg)
+  background-color: $endColor
+  background-repeat: repeat-x
+  background-image: -moz-linear-gradient($deg, $startColor, $endColor)
+  // FF 3.6+
+  background-image: -ms-linear-gradient($deg, $startColor, $endColor)
+  // IE10
+  background-image: -webkit-linear-gradient($deg, $startColor, $endColor)
+  // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient($deg, $startColor, $endColor)
+  // Opera 11.10
+  background-image: linear-gradient($deg, $startColor, $endColor)
+  // The standard
+
+=gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f)
+  background-color: mix($midColor, $endColor, 80%)
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor))
+  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor)
+  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor)
+  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor)
+  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor)
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor)
+  background-repeat: no-repeat
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor
+  // IE9 and down, gets no color-stop at all the proper fallback
+
+=gradient-radial($centerColor: #555555, $outsideColor: #333333)
+  background-color: $outerColor
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($centerColor), to($outsideColor))
+  background-image: -webkit-radial-gradient(circle, $centerColor, $outsideColor)
+  background-image: -moz-radial-gradient(circle, $centerColor, $outsideColor)
+  background-image: -ms-radial-gradient(circle, $centerColor, $outsideColor)
+  background-repeat: no-repeat
+  // Opera cannot do radial gradients yet
+
+=gradient-striped($color, $angle: -45deg)
+  background-color: $color
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent))
+  background-image: -webkit-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
+  background-image: -moz-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
+  background-image: -ms-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
+  background-image: -o-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
+  //background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+
+// Gradient Bar Colors for buttons and alerts
+=gradientBar($primaryColor, $secondaryColor)
+  +gradient-vertical($primaryColor, $secondaryColor)
+  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%)
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) fade-in(rgba(0, 0, 0, 0.1), 0.15)
+
+// Reset filters for IE
+=reset-filter
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
+
+// Mixin for generating button backgrounds
+// ---------------------------------------
+=buttonBackground($startColor, $endColor)
+  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+  +gradientBar($startColor, $endColor)
+  +reset-filter
+  // in these cases the gradient won't cover the background, so we override
+  &:hover, &:active, &.active, &.disabled, &[disabled]
+    background-color: $endColor
+  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
+  &:active,
+  &.active
+    background-color: darken($endColor, 10%) #{"\9"}
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// POPOVER ARROWS
+// -------------------------
+// For tipsies and popovers
+=popoverArrow-top($arrowWidth: 5px)
+  bottom: 0
+  left: 50%
+  margin-left: -$arrowWidth
+  border-left: $arrowWidth solid transparent
+  border-right: $arrowWidth solid transparent
+  border-top: $arrowWidth solid $black
+
+=popoverArrow-left($arrowWidth: 5px)
+  top: 50%
+  right: 0
+  margin-top: -$arrowWidth
+  border-top: $arrowWidth solid transparent
+  border-bottom: $arrowWidth solid transparent
+  border-left: $arrowWidth solid $black
+
+=popoverArrow-bottom($arrowWidth: 5px)
+  top: 0
+  left: 50%
+  margin-left: -$arrowWidth
+  border-left: $arrowWidth solid transparent
+  border-right: $arrowWidth solid transparent
+  border-bottom: $arrowWidth solid $black
+
+=popoverArrow-right($arrowWidth: 5px)
+  top: 50%
+  left: 0
+  margin-top: -$arrowWidth
+  border-top: $arrowWidth solid transparent
+  border-bottom: $arrowWidth solid transparent
+  border-right: $arrowWidth solid $black

data/stylesheets/sass_twitter_bootstrap/_modals.sass

@@ -0,0 +1,84 @@
+// MODALS
+// ------
+
+// Recalculate z-index where appropriate
+.modal-open
+  .dropdown-menu
+    z-index: $zindexDropdown + $zindexModal
+  .dropdown.open
+    *z-index: $zindexDropdown + $zindexModal
+  .popover
+    z-index: $zindexPopover + $zindexModal
+  .tooltip
+    z-index: $zindexTooltip + $zindexModal
+
+// Background
+.modal-backdrop
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: $zindexModalBackdrop
+  background-color: $black
+  // Fade for backdrop
+  &.fade
+    opacity: 0
+
+.modal-backdrop,
+.modal-backdrop.fade.in
+  +opacity(80)
+
+// Base modal
+.modal
+  position: fixed
+  top: 50%
+  left: 50%
+  z-index: $zindexModal
+  max-height: 500px
+  overflow: auto
+  width: 560px
+  margin: -250px 0 0 -280px
+  background-color: $white
+  border: 1px solid #999
+  border: 1px solid rgba(0, 0, 0, 0.3)
+  *border: 1px solid #999
+  /* IE6-7
+  +border-radius(6px)
+  +box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
+  +background-clip(padding-box)
+  &.fade
+    +transition(opacity 0.3s linear)
+    top: -25%
+  &.fade.in
+    top: 50%
+
+.modal-header
+  padding: 9px 15px
+  border-bottom: 1px solid #eee
+  // Close icon
+  .close
+    margin-top: 2px
+
+// Body (where all modal content resises)
+.modal-body
+  padding: 15px
+
+// Remove bottom margin if need be
+.modal-body .modal-form
+  margin-bottom: 0
+
+// Footer (for actions)
+.modal-footer
+  padding: 14px 15px 15px
+  margin-bottom: 0
+  background-color: #f5f5f5
+  border-top: 1px solid #ddd
+  +border-radius(0 0 6px 6px)
+  +box-shadow(inset 0 1px 0 $white)
+  +clearfix
+  .btn
+    float: right
+    margin-left: 5px
+    margin-bottom: 0
+    // account for input[type="submit"] which gets the bottom margin like all other inputs