Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Synced with twbs/bootstrap@b81b0e2

  • Loading branch information...
commit 7a6b5f21fd55370d39635d2eaa1ea411b1b127a0 1 parent fada738
@ixti authored
Showing with 1,533 additions and 967 deletions.
  1. +22 −5 lib/bootstrap.scss
  2. +83 −0 lib/bootstrap/_alerts.scss
  3. +116 −0 lib/bootstrap/_button-groups.scss
  4. +120 −0 lib/bootstrap/_buttons.scss
  5. +17 −0 lib/bootstrap/_close.scss
  6. +18 −0 lib/bootstrap/_component-animations.scss
  7. +90 −0 lib/bootstrap/_dropdowns.scss
  8. +141 −56 lib/bootstrap/_forms.scss
  9. +16 −0 lib/bootstrap/_labels.scss
  10. +0 −26 lib/bootstrap/_media-grids.scss
  11. +10 −6 lib/bootstrap/_mixins.scss
  12. +8 −4 lib/bootstrap/_modals.scss
  13. +217 −0 lib/bootstrap/_navbar.scss
  14. +8 −1 lib/bootstrap/_pagination.scss
  15. +0 −633 lib/bootstrap/_patterns.scss
  16. +9 −5 lib/bootstrap/_popovers.scss
  17. +18 −0 lib/bootstrap/_print.scss
  18. +7 −1 lib/bootstrap/_reset.scss
  19. +144 −67 lib/bootstrap/_responsive.scss
  20. +37 −18 lib/bootstrap/_scaffolding.scss
  21. +43 −0 lib/bootstrap/_sidenav.scss
  22. +118 −0 lib/bootstrap/_sprites.scss
  23. +62 −105 lib/bootstrap/_tables.scss
  24. +84 −17 lib/bootstrap/_tabs-pills.scss
  25. +84 −0 lib/bootstrap/_thumbnails.scss
  26. +10 −8 lib/bootstrap/_twipsy.scss
  27. +15 −9 lib/bootstrap/_type.scss
  28. +18 −5 lib/bootstrap/_variables.scss
  29. +17 −0 lib/bootstrap/_wells.scss
  30. +1 −1  src
View
27 lib/bootstrap.scss
@@ -21,21 +21,38 @@
// Grid system and page structure
@import "bootstrap/scaffolding";
-// Styled patterns and elements
+// Base CSS
@import "bootstrap/type";
@import "bootstrap/forms";
@import "bootstrap/tables";
-// Temp catchall for what's missing thus far
-@import "bootstrap/patterns";
-
+// Components: common
+@import "bootstrap/sprites";
+@import "bootstrap/dropdowns";
+@import "bootstrap/wells";
+@import "bootstrap/component-animations";
+@import "bootstrap/close";
+
+// Components: Nav
+@import "bootstrap/navbar";
@import "bootstrap/tabs-pills";
+@import "bootstrap/sidenav";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
+
+// Components: Popovers
@import "bootstrap/modals";
@import "bootstrap/twipsy";
@import "bootstrap/popovers";
-@import "bootstrap/media-grids";
+
+// Components: Buttons & Alerts
+@import "bootstrap/buttons";
+@import "bootstrap/button-groups";
+@import "bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons
+
+// Components: Misc
+@import "bootstrap/thumbnails";
+@import "bootstrap/labels";
// Responsive
@import "bootstrap/responsive";
View
83 lib/bootstrap/_alerts.scss
@@ -0,0 +1,83 @@
+// ALERT STYLES
+// ------------
+
+// Base alert styles
+.alert-message {
+ position: relative;
+ padding: 7px 15px;
+ margin-bottom: $baseLineHeight;
+ color: $grayDark;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ @include gradientBar(#fceec1, #eedc94); // warning by default
+ border-width: 1px;
+ border-style: solid;
+ @include border-radius(4px);
+ @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
+
+ // Adjust close icon
+ .close {
+ *margin-top: 3px; /* IE7 spacing */
+ }
+
+ // Remove extra margin from content
+ h5 {
+ line-height: $baseLineHeight;
+ }
+ p {
+ margin-bottom: 0;
+ }
+ div {
+ margin-top: 5px;
+ margin-bottom: 2px;
+ line-height: 28px;
+ }
+ .btn {
+ // Provide actions with buttons
+ @include box-shadow(0 1px 0 rgba(255,255,255,.25));
+ }
+
+ &.error,
+ &.success,
+ &.info {
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ }
+
+ &.block-message {
+ padding: 14px;
+ background-image: none;
+ background-color: lighten(#fceec1, 5%);
+ @include reset-filter; // undo gradient for IE9
+ border-color: #fceec1;
+ @include box-shadow(none);
+ ul, p {
+ margin-right: 30px;
+ }
+ ul {
+ margin-bottom: 0;
+ }
+ li {
+ color: $grayDark;
+ }
+ .alert-actions {
+ margin-top: 5px;
+ }
+ &.error,
+ &.success,
+ &.info {
+ color: $grayDark;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ }
+ &.error {
+ background-color: lighten(#f56a66, 25%);
+ border-color: lighten(#f56a66, 20%);
+ }
+ &.success {
+ background-color: lighten(#62c462, 30%);
+ border-color: lighten(#62c462, 25%);
+ }
+ &.info {
+ background-color: lighten(#6bd0ee, 25%);
+ border-color: lighten(#6bd0ee, 20%);
+ }
+ }
+}
View
116 lib/bootstrap/_button-groups.scss
@@ -0,0 +1,116 @@
+// BUTTON GROUPS
+// -------------
+
+
+// Make the div behave like a button
+.btn-group {
+ position: relative;
+ @include clearfix; // clears the floated buttons
+}
+
+// Space out series of button groups
+.btn-group + .btn-group {
+ margin-left: 5px;
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+ .btn-group {
+ display: inline-block;
+ }
+}
+
+// Float them, remove border radius, then re-add to first and last elements
+.btn-group .btn {
+ position: relative;
+ float: left;
+ margin-left: -1px;
+ @include border-radius(0);
+}
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group .btn:first-child {
+ margin-left: 0;
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-left-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-left-radius: 4px;
+}
+.btn-group .btn:last-child,
+.btn-group .dropdown-toggle {
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-bottom-right-radius: 4px;
+}
+// Reset corners for large buttons
+.btn-group .btn.large:first-child {
+ margin-left: 0;
+ -webkit-border-top-left-radius: 6px;
+ -moz-border-radius-topleft: 6px;
+ border-top-left-radius: 6px;
+ -webkit-border-bottom-left-radius: 6px;
+ -moz-border-radius-bottomleft: 6px;
+ border-bottom-left-radius: 6px;
+}
+.btn-group .btn.large:last-child,
+.btn-group .large.dropdown-toggle {
+ -webkit-border-top-right-radius: 6px;
+ -moz-border-radius-topright: 6px;
+ border-top-right-radius: 6px;
+ -webkit-border-bottom-right-radius: 6px;
+ -moz-border-radius-bottomright: 6px;
+ border-bottom-right-radius: 6px;
+}
+
+// On hover/focus/active, bring the proper btn to front
+.btn-group .btn:hover,
+.btn-group .btn:focus,
+.btn-group .btn:active {
+ z-index: 2;
+}
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group .dropdown-toggle {
+ padding-left: 8px;
+ padding-right: 8px;
+ $shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05);
+ @include box-shadow($shadow);
+}
+
+// Reposition menu on open and round all corners
+.btn-group.open .dropdown-menu {
+ display: block;
+ top: 30px;
+ @include border-radius(5px);
+}
+.btn-group.open .dropdown-toggle {
+ background-image: none;
+ $shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+ @include box-shadow($shadow);
+}
+
+// Reposition the caret
+.btn .caret {
+ margin-top: 6px;
+ margin-left: 0;
+}
+
+// Account for other colors
+.primary,
+.danger,
+.info,
+.success {
+ .caret {
+ border-top-color: #fff;
+ @include opacity(75);
+ }
+}
+
View
120 lib/bootstrap/_buttons.scss
@@ -0,0 +1,120 @@
+// BUTTON STYLES
+// -------------
+
+// Shared colors for buttons and alerts
+.btn,
+.alert-message {
+ // Set text color
+ &.danger,
+ &.danger:hover,
+ &.error,
+ &.error:hover,
+ &.success,
+ &.success:hover,
+ &.info,
+ &.info:hover {
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ color: $white;
+ }
+ // Danger and error appear as red
+ &.danger,
+ &.error {
+ @include gradientBar(#ee5f5b, #c43c35);
+ }
+ // Success appears as green
+ &.success {
+ @include gradientBar(#62c462, #57a957);
+ }
+ // Info appears as a neutral blue
+ &.info {
+ @include gradientBar(#5bc0de, #339bb9);
+ }
+}
+
+// Base .btn styles
+.btn {
+ // Button Base
+ display: inline-block;
+ padding: 5px 10px 6px;
+ font-size: $baseFontSize;
+ line-height: normal;
+ color: #333;
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ @include gradient_vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+ border: 1px solid #ccc;
+ border-bottom-color: #bbb;
+ @include border-radius(4px);
+ $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+ @include box-shadow($shadow);
+ cursor: pointer;
+
+ &:hover {
+ color: $grayDark;
+ text-decoration: none;
+ background-position: 0 -15px;
+ }
+
+ // Focus state for keyboard and accessibility
+ &:focus {
+ outline: 1px dotted #666;
+ }
+
+ // Primary Button Type
+ &.primary {
+ color: $white;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ @include gradientBar($blue, $blueDark)
+ }
+
+ // Transitions
+ @include transition(.1s linear all);
+
+ // Active and Disabled states
+ &.active,
+ &:active {
+ $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
+ @include box-shadow($shadow);
+ }
+ &.disabled {
+ cursor: default;
+ background-image: none;
+ @include reset-filter;
+ @include opacity(65);
+ @include box-shadow(none);
+ }
+ &[disabled] {
+ // disabled pseudo can't be included with .disabled
+ // def because IE8 and below will drop it ;_;
+ cursor: default;
+ background-image: none;
+ @include reset-filter;
+ @include opacity(65);
+ @include box-shadow(none);
+ }
+
+ // Button Sizes
+ &.large {
+ padding: 9px 14px 9px;
+ font-size: $baseFontSize + 2px;
+ line-height: normal;
+ @include border-radius(6px);
+ }
+ &.small {
+ padding: 7px 9px 7px;
+ font-size: $baseFontSize - 2px;
+ }
+}
+// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
+:root .alert-message,
+:root .btn {
+ border-radius: 0 \0;
+}
+
+// Help Firefox not be a jerk about adding extra padding to buttons
+button.btn,
+input[type=submit].btn {
+ &::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+ }
+}
View
17 lib/bootstrap/_close.scss
@@ -0,0 +1,17 @@
+// CLOSE ICONS
+// -----------
+
+.close {
+ float: right;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: $baseLineHeight * .75;
+ color: $black;
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
+ @include opacity(20);
+ &:hover {
+ color: $black;
+ text-decoration: none;
+ @include opacity(40);
+ }
+}
View
18 lib/bootstrap/_component-animations.scss
@@ -0,0 +1,18 @@
+// COMPONENT ANIMATIONS
+// --------------------
+
+.fade {
+ @include transition(opacity .15s linear);
+ opacity: 0;
+ &.in {
+ opacity: 1;
+ }
+}
+
+.collapse {
+ @include transition(height .35s ease);
+ position:relative;
+ overflow:hidden;
+ height: 0;
+ &.in { height: auto; }
+}
View
90 lib/bootstrap/_dropdowns.scss
@@ -0,0 +1,90 @@
+// 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 arrow/caret
+.caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ text-indent: -99999px;
+ vertical-align: top;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #000;
+ @include opacity(30);
+ content: "\2193";
+}
+.dropdown .caret {
+ margin-top: 8px;
+ margin-left: 2px;
+}
+.dropdown:hover .caret {
+ @include opacity(100);
+}
+// The dropdown menu (ul)
+.dropdown-menu {
+ position: absolute;
+ top: 40px;
+ 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: 5px 0;
+ margin: 0; // override default ul
+ list-style: none;
+ background-color: $white;
+ border-color: #999;
+ border-color: rgba(0,0,0,.1);
+ border-style: solid;
+ border-width: 1px;
+ @include border-radius(0 0 5px 5px);
+ @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ zoom: 1; // do we need this?
+
+ // Dividers (basically an hr) within the dropdown
+ .divider {
+ height: 1px;
+ margin: 5px 1px;
+ overflow: hidden;
+ background-color: #e5e5e5;
+ border-bottom: 1px solid $white;
+ }
+
+ // Links within the dropdown menu
+ a {
+ display: block;
+ padding: 2px 15px;
+ clear: both;
+ font-weight: normal;
+ line-height: 18px;
+ color: $gray;
+ // Hover state
+ &:hover {
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ @include gradient_vertical($blue, $blueDark);
+ $shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
+ @include box-shadow($shadow);
+ }
+ }
+}
+
+// Open state for the dropdown
+.dropdown.open {
+ .dropdown-toggle {
+ color: $white;
+ background: #ccc;
+ background: rgba(0,0,0,.3);
+ }
+ .dropdown-menu {
+ display: block;
+ }
+}
View
197 lib/bootstrap/_forms.scss
@@ -42,10 +42,11 @@ input,
textarea,
select,
.uneditable-input {
- display: inline-block;
+ display: block;
width: 210px;
height: $baseLineHeight;
padding: 4px;
+ margin-bottom: 9px;
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $gray;
@@ -53,7 +54,8 @@ select,
@include border-radius(3px);
}
-/* Mini reset for unique input types */
+// Mini reset for unique input types
+input[type=image],
input[type=checkbox],
input[type=radio] {
width: auto;
@@ -92,29 +94,76 @@ input[type=file] {
line-height: $baseLineHeight * 1.5;
}
+// Chrome on Linux and Mobile Safari need background-color
+select {
+ width: 220px; // default input width + 10px of padding that doesn't get applied
+ padding: 0;
+ vertical-align: middle;
+ background-color: $white;
+}
+
// Make multiple select elements height not fixed
-select[multiple] {
+select[multiple],
+select[size] {
height: inherit;
- background-color: $white; // Fixes Chromium bug?
+}
+
+// Remove shadow from image inputs
+input[type=image] {
+ @include box-shadow(none);
}
textarea {
height: auto;
}
+
+// CHECKBOXES & RADIOS
+// -------------------
+
+// Indent the labels to position radios/checkboxes as hanging
+.radio,
+.checkbox {
+ padding-left: 18px;
+}
+.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: 6px; // has to be padding because margin collaspes
+}
+
+// Radios and checkboxes on same line
+.radio.inline,
+.checkbox.inline {
+ display: inline-block;
+ margin-bottom: 0;
+}
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+ margin-left: 10px; // space out consecutive inline controls
+}
+
+
+
// FOCUS STATE
// -----------
input,
textarea {
- @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.1));
$transition: border linear .2s, box-shadow linear .2s;
@include transition($transition);
}
input:focus,
textarea:focus {
border-color: rgba(82,168,236,.8);
- $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
+ $shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
@include box-shadow($shadow);
outline: 0;
}
@@ -137,22 +186,53 @@ select:focus {
.input-xxlarge { width: 530px; }
// Grid style input sizes
-// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
-@mixin formColumns($columnSpan: 1) {
- display: inline-block;
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input {
float: none;
- width: (($gridColumnWidth - 10) * $columnSpan) + (($gridColumnWidth - 10) * ($columnSpan - 1));
margin-left: 0;
}
+// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
+@mixin inputColumns($columnSpan: 1) {
+ width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
+}
+
input,
textarea,
-select,
.uneditable-input {
// Default columns
- @each $n in 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 {
- &.span#{$n} { @include formColumns($n); }
- }
+ &.span1 { @include inputColumns(1); }
+ &.span2 { @include inputColumns(2); }
+ &.span3 { @include inputColumns(3); }
+ &.span4 { @include inputColumns(4); }
+ &.span5 { @include inputColumns(5); }
+ &.span6 { @include inputColumns(6); }
+ &.span7 { @include inputColumns(7); }
+ &.span8 { @include inputColumns(8); }
+ &.span9 { @include inputColumns(9); }
+ &.span10 { @include inputColumns(10); }
+ &.span11 { @include inputColumns(11); }
+ &.span12 { @include inputColumns(12); }
+}
+
+@mixin selectColumns($columnSpan: 1) {
+ width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) + 10;
+}
+select {
+ &.span1 { @include selectColumns(1); }
+ &.span2 { @include selectColumns(2); }
+ &.span3 { @include selectColumns(3); }
+ &.span4 { @include selectColumns(4); }
+ &.span5 { @include selectColumns(5); }
+ &.span6 { @include selectColumns(6); }
+ &.span7 { @include selectColumns(7); }
+ &.span8 { @include selectColumns(8); }
+ &.span9 { @include selectColumns(9); }
+ &.span10 { @include selectColumns(10); }
+ &.span11 { @include selectColumns(11); }
+ &.span12 { @include selectColumns(12); }
}
@@ -202,18 +282,31 @@ textarea[readonly] {
}
}
// Error
-form .clearfix.error {
+.control-group.error {
@include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
}
// Warning
-form .clearfix.warning {
+.control-group.warning {
@include formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
}
// Success
-form .clearfix.success {
+.control-group.success {
@include formFieldState(#468847, #57a957, lighten(#57a957, 30%));
}
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:invalid,
+textarea:invalid,
+select:invalid {
+ color: #b94a48;
+ border-color: #ee5f5b;
+ &:focus {
+ border-color: darken(#ee5f5b, 10%);
+ @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
+ }
+}
+
// FORM ACTIONS
@@ -237,10 +330,10 @@ form .clearfix.success {
}
// Placeholder text gets special styles; can't be bundled together though for some reason
-:-moz-placeholder {
+input:-moz-placeholder {
color: $grayLight;
}
-::-webkit-input-placeholder {
+input::-webkit-input-placeholder {
color: $grayLight;
}
@@ -249,7 +342,7 @@ form .clearfix.success {
// HELP TEXT
// ---------
-.help-text {
+.help-block {
margin-top: 5px;
margin-bottom: 0;
color: $grayLight;
@@ -262,33 +355,6 @@ form .clearfix.success {
padding-left: 5px;
}
-// Big blocks of help text
-.help-block {
- display: block;
- max-width: 600px;
-}
-
-
-
-// INLINE FIELDS
-// -------------
-
-.inline-inputs {
- color: $gray;
- span, input {
- display: inline-block;
- }
- input.mini {
- width: 60px;
- }
- input.small {
- width: 90px;
- }
- span {
- padding: 0 2px 0 1px;
- }
-}
-
// INPUT GROUPS
// ------------
@@ -296,12 +362,16 @@ form .clearfix.success {
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
- input {
+ margin-bottom: 5px;
+ @include clearfix; // Clear the float to prevent wrapping
+ input,
+ .uneditable-input {
@include border-radius(0 3px 3px 0);
}
+ .uneditable-input {
+ border-left-color: #ccc;
+ }
.add-on {
- position: relative;
- z-index: 2;
float: left;
display: block;
width: auto;
@@ -329,10 +399,14 @@ form .clearfix.success {
}
}
.input-append {
- input {
+ input,
+ .uneditable-input {
float: left;
@include border-radius(3px 0 0 3px);
}
+ .uneditable-input {
+ border-right-color: #ccc;
+ }
.add-on {
margin-right: 0;
margin-left: -1px;
@@ -345,7 +419,10 @@ form .clearfix.success {
// SEARCH FORM
// -----------
-.search-form .search-query {
+.search-query {
+ padding-left: 14px;
+ padding-right: 14px;
+ margin-bottom: 0; // remove the default margin on all inputs
@include border-radius(14px);
}
@@ -357,6 +434,18 @@ form .clearfix.success {
// Common properties
// -----------------
+.search-form,
+.inline-form,
+.horizontal-form {
+ input,
+ textarea,
+ select,
+ .uneditable-input {
+ display: inline-block;
+ margin-bottom: 0;
+ }
+}
+
// Margin to space out fieldsets
.control-group {
margin-bottom: $baseLineHeight;
@@ -381,10 +470,6 @@ form .clearfix.success {
.controls {
margin-left: 150px;
}
- // Move the options list down to align with labels
- .control-list {
- padding-top: 6px; // has to be padding because margin collaspes
- }
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: 150px;
View
16 lib/bootstrap/_labels.scss
@@ -0,0 +1,16 @@
+// LABELS
+// ------
+
+.label {
+ padding: 1px 3px 2px;
+ font-size: $baseFontSize * .75;
+ font-weight: bold;
+ color: $white;
+ text-transform: uppercase;
+ background-color: $grayLight;
+ @include border-radius(3px);
+ &.important { background-color: #c43c35; }
+ &.warning { background-color: $orange; }
+ &.success { background-color: $green; }
+ &.notice { background-color: lighten($blue, 25%); }
+}
View
26 lib/bootstrap/_media-grids.scss
@@ -1,26 +0,0 @@
-// MEDIA GRIDS
-// -----------
-
-.media-grid {
- margin-left: -20px;
- margin-bottom: 0;
- @include clearfix;
- li {
- display: inline;
- }
- a {
- float: left;
- padding: 4px;
- margin: 0 0 20px 20px;
- border: 1px solid #ddd;
- @include border-radius(4px);
- @include box-shadow(0 1px 1px rgba(0,0,0,.075));
- img {
- display: block;
- }
- &:hover {
- border-color: $linkColor;
- @include box-shadow(0 1px 4px rgba(0,105,214,.25));
- }
- }
-}
View
16 lib/bootstrap/_mixins.scss
@@ -25,6 +25,12 @@
margin-right: auto;
}
+// IE7 inline-block
+@mixin ie7-inline-block {
+ *display: inline; /* IE7 inline-block hack */
+ *zoom: 1;
+}
+
// Sizing shortcuts
@mixin size($height: 5px, $width: 5px) {
width: $width;
@@ -47,7 +53,7 @@
// Font Stacks
@mixin font_family_serif() {
- font-family: "Georgia", Times New Roman, Times, serif;
+ font-family: "Georgia", "Times New Roman", Times, serif;
}
@mixin font_family_sans-serif() {
@@ -55,7 +61,7 @@
}
@mixin font_family_monospace() {
- font-family: "Menlo", Monaco, Courier New, monospace;
+ font-family: Menlo, Monaco, "Courier New", monospace;
}
@mixin font_shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
@@ -97,7 +103,6 @@
// Necessary grid styles for every column to make them appear next to each other horizontally
@mixin gridColumn {
- display: inline;
float: left;
margin-left: $gridGutterWidth;
}
@@ -211,7 +216,6 @@
// Gradient Bar Colors for buttons and alerts
@mixin gradientBar($primaryColor, $secondaryColor) {
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@include gradient_vertical($primaryColor, $secondaryColor);
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) opacify(rgba(0,0,0,.1), 0.15);
@@ -290,7 +294,7 @@
// Popover arrows
// For tipsies and popovers
-@mixin popoverArrow_above($arrowWidth: 5px) {
+@mixin popoverArrow_top($arrowWidth: 5px) {
bottom: 0;
left: 50%;
margin-left: -$arrowWidth;
@@ -306,7 +310,7 @@
border-bottom: $arrowWidth solid transparent;
border-left: $arrowWidth solid $black;
}
-@mixin popoverArrow_below($arrowWidth: 5px) {
+@mixin popoverArrow_bottom($arrowWidth: 5px) {
top: 0;
left: 50%;
margin-left: -$arrowWidth;
View
12 lib/bootstrap/_modals.scss
@@ -7,13 +7,14 @@
right: 0;
bottom: 0;
left: 0;
- z-index: 10000;
+ z-index: $zindexModalBackdrop;
background-color: $black;
// Fade for backdrop
&.fade { opacity: 0; }
}
-.modal-backdrop, .modal-backdrop.fade.in {
+.modal-backdrop,
+.modal-backdrop.fade.in {
@include opacity(80);
}
@@ -21,7 +22,9 @@
position: fixed;
top: 50%;
left: 50%;
- z-index: 11000;
+ z-index: $zindexModal;
+ max-height: 500px;
+ overflow: auto;
width: 560px;
margin: -250px 0 0 -250px;
background-color: $white;
@@ -31,7 +34,6 @@
@include border-radius(6px);
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
@include background-clip(padding-box);
- .close { margin-top: 7px; }
&.fade {
@include transition('opacity .3s linear, top .3s ease-out');
top: -25%;
@@ -41,6 +43,8 @@
.modal-header {
padding: 5px 15px;
border-bottom: 1px solid #eee;
+ // Close icon
+ .close { margin-top: 7px; }
}
.modal-body {
padding: 15px;
View
217 lib/bootstrap/_navbar.scss
@@ -0,0 +1,217 @@
+// NAVBAR (FIXED AND STATIC)
+// -------------------------
+
+// Navbar variables
+$navBarHeight: 40px;
+$navBarBgStart: #333;
+$navBarBgEnd: #222;
+
+// Common styles
+.navbar {
+ overflow: visible;
+}
+// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+.navbar-inner {
+ background-color: $navBarBgEnd;
+ @include gradient_vertical($navBarBgStart, $navBarBgEnd);
+ $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+ @include box-shadow($shadow);
+}
+// Text and links
+.navbar {
+ // Hover and active states
+ .brand:hover,
+ ul .active > a {
+ color: $white;
+ text-decoration: none;
+ background-color: $navBarBgStart;
+ background-color: rgba(255,255,255,.05);
+ }
+ // Website or project name
+ .brand {
+ float: left;
+ display: block;
+ padding: 8px 20px 12px;
+ margin-left: -20px; // negative indent to left-align the text down the page
+ font-size: 20px;
+ font-weight: 200;
+ line-height: 1;
+ color: $white;
+ }
+ // Plain text in topbar
+ p {
+ margin: 0;
+ line-height: 40px;
+ a:hover {
+ color: $white;
+ background-color: transparent;
+ }
+ }
+ // Buttons in navbar
+ .btn {
+ margin-top: 5px; // make buttons vertically centered in navbar
+ }
+}
+
+// Navbar forms
+.navbar-form {
+ margin-bottom: 0; // remove default bottom margin
+ input,
+ select {
+ display: inline-block;
+ margin-bottom: 0;
+ }
+}
+
+// Navbar search
+.navbar-search {
+ position: relative;
+ float: left;
+ margin-top: 6px;
+ margin-bottom: 0;
+ .search-query {
+ padding: 4px 9px;
+ @include font_sans-serif(13px, normal, 1);
+ color: $white;
+ color: rgba(255,255,255,.75);
+ background-color: #444;
+ background-color: rgba(255,255,255,.3);
+ border: 1px solid #111;
+ $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
+ @include box-shadow($shadow);
+ @include transition(none);
+
+ // Placeholder text gets special styles; can't be bundled together though for some reason
+ &:-moz-placeholder {
+ color: $grayLighter;
+ }
+ &::-webkit-input-placeholder {
+ color: $grayLighter;
+ }
+ // Hover states
+ &:hover {
+ color: $white;
+ background-color: $grayLight;
+ background-color: rgba(255,255,255,.5);
+ }
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
+ &:focus,
+ &.focused {
+ padding: 5px 10px;
+ color: $grayDark;
+ text-shadow: 0 1px 0 $white;
+ background-color: $white;
+ border: 0;
+ @include box-shadow(0 0 3px rgba(0,0,0,.15));
+ outline: 0;
+ }
+ }
+}
+
+
+// Static navbar
+.navbar-static {
+ margin-bottom: $baseLineHeight;
+}
+.navbar-static .navbar-inner {
+ padding-left: 20px;
+ padding-right: 20px;
+ @include border-radius(4px);
+}
+
+// Fixed navbar
+.navbar-fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: $zindexFixedNavbar;
+}
+
+
+
+// NAVIGATION
+// ----------
+
+// Nav for navbar and topbar
+// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
+.nav {
+ position: relative;
+ left: 0;
+ display: block;
+ float: left;
+ margin: 0 10px 0 0;
+ > li {
+ display: block;
+ float: left;
+ }
+ a {
+ display: block;
+ float: none;
+ padding: 10px 10px 11px;
+ line-height: 19px;
+ color: $grayLight;
+ text-decoration: none;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ &:hover {
+ color: $white;
+ text-decoration: none;
+ }
+ }
+ .active > a {
+ background-color: #222;
+ background-color: rgba(0,0,0,.5);
+ }
+ // Dividers (basically a vertical hr)
+ .vertical-divider {
+ height: 40px;
+ width: 1px;
+ margin: 0 5px;
+ overflow: hidden;
+ background-color: #222;
+ border-right: 1px solid #444;
+ }
+
+ // Secondary (floated right) nav in topbar
+ &.secondary-nav {
+ float: right;
+ margin-left: 10px;
+ margin-right: 0;
+ .dropdown-menu {
+ right: 0;
+ border: 0;
+ }
+ }
+ // Dropdowns within the .nav
+ .dropdown-toggle:hover,
+ .dropdown.open .dropdown-toggle {
+ background: #444;
+ background: rgba(255,255,255,.05);
+ }
+ .dropdown-menu {
+ background-color: #333;
+ .dropdown-toggle {
+ color: $white;
+ &.open {
+ background: #444;
+ background: rgba(255,255,255,.05);
+ }
+ }
+ li a {
+ padding: 4px 15px;
+ color: #999;
+ text-shadow: 0 1px 0 rgba(0,0,0,.5);
+ &:hover {
+ @include gradient_vertical(#292929,#191919);
+ color: $white;
+ }
+ }
+ .active a {
+ color: $white;
+ }
+ .divider {
+ background-color: #222;
+ border-color: #444;
+ }
+ }
+}
View
9 lib/bootstrap/_pagination.scss
@@ -5,7 +5,8 @@
height: $baseLineHeight * 2;
margin: $baseLineHeight 0;
ul {
- float: left;
+ display: inline-block;
+ @include ie7-inline-block;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15);
@@ -33,8 +34,14 @@
.disabled a:hover {
color: $grayLight;
background-color: transparent;
+ cursor: default;
}
.next a {
border: 0;
}
+
+ // Centered
+ &.centered {
+ text-align: center;
+ }
}
View
633 lib/bootstrap/_patterns.scss
@@ -3,304 +3,6 @@
// ----------------------------------------------------------------------------
-// NAVBAR (FIXED AND STATIC)
-// -------------------------
-
-// Navbar variables
-$navBarHeight: 40px;
-$navBarBgStart: #333;
-$navBarBgEnd: #222;
-
-// Common styles
-.navbar {
- height: $navBarHeight;
- overflow: visible;
-}
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-.navbar-inner {
- background-color: $navBarBgEnd;
- @include gradient_vertical($navBarBgStart, $navBarBgEnd);
- $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
- @include box-shadow($shadow);
-}
-// Text and links
-.navbar {
- // Links get text-shadow
- a {
- color: $grayLight;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- }
- // Hover and active states
- .brand a:hover,
- ul .active > a {
- color: $white;
- text-decoration: none;
- background-color: $navBarBgStart;
- background-color: rgba(255,255,255,.05);
- }
- // Website or project name
- .brand {
- float: left;
- display: block;
- padding: 8px 20px 12px;
- margin-left: -20px; // negative indent to left-align the text down the page
- font-size: 20px;
- font-weight: 200;
- line-height: 1;
- color: $white;
- }
-
- // Plain text in topbar
- p {
- margin: 0;
- line-height: 40px;
- a:hover {
- color: $white;
- background-color: transparent;
- }
- }
-}
-
-// Navbar search
-.navbar-search {
- position: relative;
- float: left;
- margin-top: 6px;
- margin-bottom: 0;
- .search-query {
- padding: 4px 9px;
- @include font_sans-serif(13px, normal, 1);
- color: $white;
- color: rgba(255,255,255,.75);
- background-color: #444;
- background-color: rgba(255,255,255,.3);
- border: 1px solid #111;
- $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
- @include box-shadow($shadow);
- @include transition(none);
-
- // Placeholder text gets special styles; can't be bundled together though for some reason
- &:-moz-placeholder {
- color: $grayLighter;
- }
- &::-webkit-input-placeholder {
- color: $grayLighter;
- }
- // Hover states
- &:hover {
- color: $white;
- background-color: $grayLight;
- background-color: rgba(255,255,255,.5);
- }
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
- &:focus,
- &.focused {
- padding: 5px 10px;
- color: $grayDark;
- text-shadow: 0 1px 0 $white;
- background-color: $white;
- border: 0;
- @include box-shadow(0 0 3px rgba(0,0,0,.15));
- outline: 0;
- }
- }
-}
-
-
-// Static navbar
-.navbar-static {
- margin-bottom: $baseLineHeight;
-}
-.navbar-static .navbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- @include border-radius(4px);
-}
-
-// Fixed navbar
-.navbar-fixed {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: 10000;
-}
-
-
-// NAVIGATION
-// ----------
-
-// Nav for navbar and topbar
-// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-.nav {
- position: relative;
- left: 0;
- display: block;
- float: left;
- margin: 0 10px 0 0;
- > li {
- display: block;
- float: left;
- }
- a {
- display: block;
- float: none;
- padding: 10px 10px 11px;
- line-height: 19px;
- text-decoration: none;
- &:hover {
- color: $white;
- text-decoration: none;
- }
- }
- .active > a {
- background-color: #222;
- background-color: rgba(0,0,0,.5);
- }
-
- // Secondary (floated right) nav in topbar
- &.secondary-nav {
- float: right;
- margin-left: 10px;
- margin-right: 0;
- .dropdown-menu {
- right: 0;
- border: 0;
- }
- }
- // Dropdowns within the .nav
- .dropdown-toggle:hover,
- .dropdown.open .dropdown-toggle {
- background: #444;
- background: rgba(255,255,255,.05);
- }
- .dropdown-menu {
- background-color: #333;
- .dropdown-toggle {
- color: $white;
- &.open {
- background: #444;
- background: rgba(255,255,255,.05);
- }
- }
- li a {
- color: #999;
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
- &:hover {
- @include gradient_vertical(#292929,#191919);
- color: $white;
- }
- }
- .active a {
- color: $white;
- }
- .divider {
- background-color: #222;
- border-color: #444;
- }
- }
-}
-
-.topbar ul .dropdown-menu li a {
- padding: 4px 15px;
-}
-
-// 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;
-}
-// The link that is clicked to toggle the dropdown
-.dropdown-toggle:after {
- display: inline-block;
- width: 0;
- height: 0;
- margin-top: 8px;
- margin-left: 6px;
- text-indent: -99999px;
- vertical-align: top;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid $white;
- @include opacity(30);
- content: "&darr;";
-}
-.dropdown:hover .dropdown-toggle:after {
- @include opacity(100);
-}
-// The dropdown menu (ul)
-.dropdown-menu {
- position: absolute;
- top: 40px;
- z-index: 900;
- float: left;
- display: none; // None by default, but block on "open" of the menu
- min-width: 160px;
- max-width: 220px;
- _width: 160px;
- padding: 6px 0;
- margin-left: 0; // override default ul styles
- margin-right: 0;
- background-color: $white;
- border-color: #999;
- border-color: rgba(0,0,0,.2);
- border-style: solid;
- border-width: 0 1px 1px;
- @include border-radius(0 0 6px 6px);
- @include box-shadow(0 2px 4px rgba(0,0,0,.2));
- @include background-clip(padding-box);
- zoom: 1; // do we need this?
-
- // Unfloat any li's to make them stack
- li {
- float: none;
- display: block;
- background-color: none;
- }
- // Dividers (basically an hr) within the dropdown
- .divider {
- height: 1px;
- margin: 5px 0;
- overflow: hidden;
- background-color: #eee;
- border-bottom: 1px solid $white;
- }
-}
-
-.topbar .dropdown-menu, .dropdown-menu {
- // Links within the dropdown menu
- a {
- display: block;
- padding: 4px 15px;
- clear: both;
- font-weight: normal;
- line-height: 18px;
- color: $gray;
- text-shadow: 0 1px 0 $white;
- // Hover state
- &:hover {
- color: $grayDark;
- text-decoration: none;
- @include gradient_vertical(#eeeeee, #dddddd);
- $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
- @include box-shadow($shadow);
- }
- }
-}
-
-// Open state for the dropdown
-.dropdown.open {
- .dropdown-toggle {
- color: $white;
- background: #ccc;
- background: rgba(0,0,0,.3);
- }
- .dropdown-menu {
- display: block;
- }
-}
-
-
// PAGE HEADERS
// ------------
@@ -326,338 +28,3 @@ footer {
margin-top: $baseLineHeight - 1;
border-top: 1px solid #eee;
}
-
-
-// PAGE HEADERS
-// ------------
-
-.page-header {
- margin-bottom: $baseLineHeight * 1.5;
- border-bottom: 1px solid #eee;
- @include box-shadow(0 1px 0 rgba(255,255,255,.5));
- h1 {
- margin-bottom: $baseLineHeight * .75;
- }
-}
-
-
-// BUTTON STYLES
-// -------------
-
-// Shared colors for buttons and alerts
-.btn,
-.alert-message {
- // Set text color
- &.danger,
- &.danger:hover,
- &.error,
- &.error:hover,
- &.success,
- &.success:hover,
- &.info,
- &.info:hover {
- color: $white
- }
- // Danger and error appear as red
- &.danger,
- &.error {
- @include gradientBar(#ee5f5b, #c43c35);
- }
- // Success appears as green
- &.success {
- @include gradientBar(#62c462, #57a957);
- }
- // Info appears as a neutral blue
- &.info {
- @include gradientBar(#5bc0de, #339bb9);
- }
-}
-
-// Base .btn styles
-.btn {
- // Button Base
- display: inline-block;
- padding: 5px 14px 6px;
- font-size: $baseFontSize;
- line-height: normal;
- color: #333;
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
- @include gradient_vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
- border: 1px solid #ccc;
- border-bottom-color: #bbb;
- @include border-radius(4px);
- $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
- @include box-shadow($shadow);
- cursor: pointer;
-
- &:hover {
- color: #333;
- text-decoration: none;
- background-position: 0 -15px;
- }
-
- // Focus state for keyboard and accessibility
- &:focus {
- outline: 1px dotted #666;
- }
-
- // Primary Button Type
- &.primary {
- color: $white;
- @include gradientBar($blue, $blueDark)
- }
-
- // Transitions
- @include transition(.1s linear all);
-
- // Active and Disabled states
- &.active,
- &:active {
- $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
- @include box-shadow($shadow);
- }
- &.disabled {
- cursor: default;
- background-image: none;
- @include reset-filter;
- @include opacity(65);
- @include box-shadow(none);
- }
- &[disabled] {
- // disabled pseudo can't be included with .disabled
- // def because IE8 and below will drop it ;_;
- cursor: default;
- background-image: none;
- @include reset-filter;
- @include opacity(65);
- @include box-shadow(none);
- }
-
- // Button Sizes
- &.large {
- padding: 9px 14px 9px;
- font-size: $baseFontSize + 2px;
- line-height: normal;
- @include border-radius(6px);
- }
- &.small {
- padding: 7px 9px 7px;
- font-size: $baseFontSize - 2px;
- }
-}
-// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
-:root .alert-message,
-:root .btn {
- border-radius: 0 \0;
-}
-
-// Help Firefox not be a jerk about adding extra padding to buttons
-button.btn,
-input[type=submit].btn {
- &::-moz-focus-inner {
- padding: 0;
- border: 0;
- }
-}
-
-// Button groups
-// -------------
-
-// Group multiple button groups together for a toolbar
-.btn-toolbar {
- @include clearfix;
- .btn-group {
- float: left;
- margin-right: 10px;
- }
-}
-
-// Clear the float
-.btn-group {
- @include clearfix;
-}
-// Float them, remove border radius, then re-add to first and last elements
-.btn-group .btn {
- position: relative;
- float: left;
- margin-left: -1px;
- @include border-radius(0);
- &:first-child {
- margin-left: 0;
- -webkit-border-top-left-radius: 4px;
- -moz-border-radius-topleft: 4px;
- border-top-left-radius: 4px;
- -webkit-border-bottom-left-radius: 4px;
- -moz-border-radius-bottomleft: 4px;
- border-bottom-left-radius: 4px;
- }
- &:last-child {
- -webkit-border-top-right-radius: 4px;
- -moz-border-radius-topright: 4px;
- border-top-right-radius: 4px;
- -webkit-border-bottom-right-radius: 4px;
- -moz-border-radius-bottomright: 4px;
- border-bottom-right-radius: 4px;
- }
-}
-// On hover/focus/active, bring the proper btn to front
-.btn-group .btn:hover,
-.btn-group .btn:focus,
-.btn-group .btn:active {
- z-index: 2;
-}
-
-
-
-// CLOSE ICONS
-// -----------
-.close {
- float: right;
- font-size: 20px;
- font-weight: bold;
- line-height: $baseLineHeight * .75;
- color: $black;
- text-shadow: 0 1px 0 rgba(255,255,255,1);
- @include opacity(20);
- &:hover {
- color: $black;
- text-decoration: none;
- @include opacity(40);
- }
-}
-
-
-// ERROR STYLES
-// ------------
-
-// Base alert styles
-.alert-message {
- position: relative;
- padding: 7px 15px;
- margin-bottom: $baseLineHeight;
- color: $grayDark;
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
- @include gradientBar(#fceec1, #eedc94); // warning by default
- border-width: 1px;
- border-style: solid;
- @include border-radius(4px);
- @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
-
- // Adjust close icon
- .close {
- *margin-top: 3px; /* IE7 spacing */
- }
-
- // Remove extra margin from content
- h5 {
- line-height: $baseLineHeight;
- }
- p {
- margin-bottom: 0;
- }
- div {
- margin-top: 5px;
- margin-bottom: 2px;
- line-height: 28px;
- }
- .btn {
- // Provide actions with buttons
- @include box-shadow(0 1px 0 rgba(255,255,255,.25));
- }
-
- &.block-message {
- padding: 14px;
- background-image: none;
- background-color: lighten(#fceec1, 5%);
- @include reset-filter; // undo gradient for IE9
- border-color: #fceec1;
- @include box-shadow(none);
- ul, p {
- margin-right: 30px;
- }
- ul {
- margin-bottom: 0;
- }
- li {
- color: $grayDark;
- }
- .alert-actions {
- margin-top: 5px;
- }
- &.error,
- &.success,
- &.info {
- color: $grayDark;
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
- }
- &.error {
- background-color: lighten(#f56a66, 25%);
- border-color: lighten(#f56a66, 20%);
- }
- &.success {
- background-color: lighten(#62c462, 30%);
- border-color: lighten(#62c462, 25%);
- }
- &.info {
- background-color: lighten(#6bd0ee, 25%);
- border-color: lighten(#6bd0ee, 20%);
- }
- }
-}
-
-
-// WELLS
-// -----
-
-.well {
- min-height: 20px;
- padding: 19px;
- margin-bottom: 20px;
- background-color: #f5f5f5;
- border: 1px solid #eee;
- border: 1px solid rgba(0,0,0,.05);
- @include border-radius(4px);
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
- blockquote {
- border-color: #ddd;
- border-color: rgba(0,0,0,.15);
- }
-}
-
-
-// PATTERN ANIMATIONS
-// ------------------
-
-.fade {
- @include transition(opacity .15s linear);
- opacity: 0;
- &.in {
- opacity: 1;
- }
-}
-
-.collapse {
- @include transition(height .35s ease);
- position:relative;
- overflow:hidden;
- height: 0;
- &.in { height: auto; }
-}
-
-
-// LABELS
-// ------
-
-.label {
- padding: 1px 3px 2px;
- font-size: $baseFontSize * .75;
- font-weight: bold;
- color: $white;
- text-transform: uppercase;
- background-color: $grayLight;
- @include border-radius(3px);
- &.important { background-color: #c43c35; }
- &.warning { background-color: $orange; }
- &.success { background-color: $green; }
- &.notice { background-color: lighten($blue, 25%); }
-}
View
14 lib/bootstrap/_popovers.scss
@@ -5,13 +5,17 @@
position: absolute;
top: 0;
left: 0;
- z-index: 1000;
+ z-index: $zindexPopover;
display: none;
padding: 5px;
- &.above .arrow { @include popoverArrow_above; }
- &.right .arrow { @include popoverArrow_right; }
- &.below .arrow { @include popoverArrow_below; }
- &.left .arrow { @include popoverArrow_left; }
+ &.top { margin-top: -5px; }
+ &.right { margin-left: 5px; }
+ &.bottom { margin-top: 5px; }
+ &.left { margin-left: -5px; }
+ &.top .arrow { @include popoverArrow_top; }
+ &.right .arrow { @include popoverArrow_right; }
+ &.bottom .arrow { @include popoverArrow_bottom; }
+ &.left .arrow { @include popoverArrow_left; }
.arrow {
position: absolute;
width: 0;
View
18 lib/bootstrap/_print.scss
@@ -0,0 +1,18 @@
+/*!
+ * Bootstrap @VERSION for Print
+ *
+ * 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
+ */
+
+
+// HIDE UNECESSARY COMPONENTS
+// --------------------------
+
+.navbar-fixed {
+ display: none;
+}
View
8 lib/bootstrap/_reset.scss
@@ -10,7 +10,11 @@
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
-table { border-collapse: collapse; border-spacing: 0; }
+table {
+ max-width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+}
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
@@ -93,6 +97,8 @@ sub {
// -------------------------
// Source: http://github.com/necolas/normalize.css
img {
+ max-width: 100%;
+ height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}
View
211 lib/bootstrap/_responsive.scss
@@ -3,75 +3,130 @@
// -------------------------------------------------------------
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5BP
+.hidden {
+ display: none;
+ visibility: hidden;
+}
+
+
// UP TO LANDSCAPE PHONE
// ---------------------
@media (max-width: 480px) {
- // Remove width from containers
- .container {
- width: auto;
- padding: 0 15px;
- }
- // Undo negative margin on rows
- .row {
- margin-left: 0;
- }
- // Make all columns even
- [class*="span"] {
- float: none;
- display: block;
- width: auto;
- margin: 0;
- }
// Resize modals
.modal {
width: auto;
margin: 0;
+ &.fade.in { top: auto; }
}
// Remove the horizontal form styles
- .form-horizontal .control-group > label {
+ .horizontal-form .control-group > label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
// Move over all input controls and content
- .form-horizontal .controls {
+ .horizontal-form .controls {
margin-left: 0;
}
// Move the options list down to align with labels
- .form-horizontal .control-list {
+ .horizontal-form .control-list {
padding-top: 0; // has to be padding because margin collaspes
}
// Move over buttons in .form-actions to align with .controls
- .form-horizontal .form-actions {
+ .horizontal-form .form-actions {
padding-left: 0;
}
+ // Modals
+ .modal {
+ position: fixed;
+ top: 20px;
+ left: 20px;
+ right: 20px;
+ width: auto;
+ .close {
+ padding: 10px;
+ }
+ }
}
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
-@media (min-width: 480px) and (max-width: 768px) {
+@media (max-width: 768px) {
// Remove width from containers
.container {
width: auto;
- padding: 0 10px;
+ padding: 0 20px;
}
// Undo negative margin on rows
.row {
margin-left: 0;
}
// Make all columns even
- [class*="span"] {
+ .row > [class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
+
+ // Make the nav work for small devices
+ .nav {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 180px;
+ padding-top: 40px;
+ list-style: none;
+ }
+ .nav,
+ .nav > li:last-child a {
+ @include border-radius(0 0 4px 0);
+ }
+ .nav > li {
+ float: none;
+ display: none;
+ }
+ .nav > li > a {
+ float: none;
+ background-color: #222;
+ }
+ .nav > .active {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .navbar ul .active > a {
+ background-color: transparent;
+ }
+ .nav > .active a:after {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-top: 8px;
+ margin-left: 6px;
+ text-indent: -99999px;
+ vertical-align: top;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid $white;
+ @include opacity(100);
+ content: "&darr;";
+ }
+ .nav > .active a:hover {
+ background-color: rgba(255,255,255,.05);
+ }
}
@@ -100,14 +155,32 @@
}
// Default columns
- @each $n in 1 2 3 4 5 6 7 8 9 10 11 12 {
- .span#{$n} { @include responsive_columns-768-940($n); }
- }
+ .span1 { @include responsive_columns-768-940(1); }
+ .span2 { @include responsive_columns-768-940(2); }
+ .span3 { @include responsive_columns-768-940(3); }
+ .span4 { @include responsive_columns-768-940(4); }
+ .span5 { @include responsive_columns-768-940(5); }
+ .span6 { @include responsive_columns-768-940(6); }
+ .span7 { @include responsive_columns-768-940(7); }
+ .span8 { @include responsive_columns-768-940(8); }
+ .span9 { @include responsive_columns-768-940(9); }
+ .span10 { @include responsive_columns-768-940(10); }
+ .span11 { @include responsive_columns-768-940(11); }
+ .span12 { @include responsive_columns-768-940(12); }
// Offset column options
- @each $n in 1 2 3 4 5 6 7 8 9 10 11 12 {
- .offset#{$n} { @include responsive_offset-768-940($n); }
- }
+ .offset1 { @include responsive_offset-768-940(1); }
+ .offset2 { @include responsive_offset-768-940(2); }
+ .offset3 { @include responsive_offset-768-940(3); }
+ .offset4 { @include responsive_offset-768-940(4); }
+ .offset5 { @include responsive_offset-768-940(5); }
+ .offset6 { @include responsive_offset-768-940(6); }
+ .offset7 { @include responsive_offset-768-940(7); }
+ .offset8 { @include responsive_offset-768-940(8); }
+ .offset9 { @include responsive_offset-768-940(9); }
+ .offset10 { @include responsive_offset-768-940(10); }
+ .offset11 { @include responsive_offset-768-940(11); }
+ .offset12 { @include responsive_offset-768-940(12); }
}
@@ -115,56 +188,60 @@
// LARGE DESKTOP & UP
// ------------------
+// Bring grid mixins to recalculate widths
+@mixin responsive_columns-1210($columnSpan: 1) {
+ width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
+}
+
+@mixin responsive_offset-1210($columnOffset: 1) {
+ margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $gridGutterWidth;
+}
+
@media (min-width: 1210px) {
// Reset grid variables
- @gridColumns: 12;
- @gridColumnWidth: 70px;
- @gridGutterWidth: 30px;
- @siteWidth: 1170px;
-
- // Bring grid mixins to recalculate widths
- .columns(@columnSpan: 1) {
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
- }
- .offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
- }
+ $gridColumns: 12;
+ $gridColumnWidth: 70px;
+ $gridGutterWidth: 30px;
+ $siteWidth: 1170px;
.container {
- width: @siteWidth;
+ width: $siteWidth;
+ }
+ .row {
+ margin-left: $gridGutterWidth * -1;
}
[class*="span"] {
- margin-left: @gridGutterWidth;
+ margin-left: $gridGutterWidth;
}
// Default columns
- .span1 { .columns(1); }
- .span2 { .columns(2); }
- .span3 { .columns(3); }
- .span4 { .columns(4); }
- .span5 { .columns(5); }
- .span6 { .columns(6); }
- .span7 { .columns(7); }
- .span8 { .columns(8); }
- .span9 { .columns(9); }
- .span10 { .columns(10); }
- .span11 { .columns(11); }
- .span12 { .columns(12); }
+ .span1 { @include responsive_columns-1210(1); }
+ .span2 { @include responsive_columns-1210(2); }
+ .span3 { @include responsive_columns-1210(3); }
+ .span4 { @include responsive_columns-1210(4); }
+ .span5 { @include responsive_columns-1210(5); }
+ .span6 { @include responsive_columns-1210(6); }
+ .span7 { @include responsive_columns-1210(7); }
+ .span8 { @include responsive_columns-1210(8); }
+ .span9 { @include responsive_columns-1210(9); }
+ .span10 { @include responsive_columns-1210(10); }
+ .span11 { @include responsive_columns-1210(11); }
+ .span12 { @include responsive_columns-1210(12); }
// Offset column options
- .offset1 { .offset(1); }
- .offset2 { .offset(2); }
- .offset3 { .offset(3); }
- .offset4 { .offset(4); }
- .offset5 { .offset(5); }
- .offset6 { .offset(6); }
- .offset7 { .offset(7); }
- .offset8 { .offset(8); }
- .offset9 { .offset(9); }
- .offset10 { .offset(10); }
- .offset11 { .offset(11); }
- .offset12 { .offset(12); }
+ .offset1 { @include responsive_offset-1210(1); }
+ .offset2 { @include responsive_offset-1210(2); }
+ .offset3 { @include responsive_offset-1210(3); }
+ .offset4 { @include responsive_offset-1210(4); }
+ .offset5 { @include responsive_offset-1210(5); }
+ .offset6 { @include responsive_offset-1210(6); }
+ .offset7 { @include responsive_offset-1210(7); }
+ .offset8 { @include responsive_offset-1210(8); }
+ .offset9 { @include responsive_offset-1210(9); }
+ .offset10 { @include responsive_offset-1210(10); }
+ .offset11 { @include responsive_offset-1210(11); }
+ .offset12 { @include responsive_offset-1210(12); }
}
*/
View
55 lib/bootstrap/_scaffolding.scss
@@ -12,7 +12,7 @@ body {
font-family: $baseFontFamily;
font-size: $baseFontSize;
line-height: $baseLineHeight;
- color: $grayDark;
+