Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update stylesheets to 2.0.3

  • Loading branch information...
commit dd4ff16c77e4b5e2ba6fb70d3251c9cd0d70327a 1 parent 33f5b93
@nragaz nragaz authored
Showing with 1,989 additions and 794 deletions.
  1. +8 −0 lib/_accordion.scss
  2. +5 −1 lib/_alerts.scss
  3. +0 −39 lib/_badges.scss
  4. +5 −0 lib/_breadcrumbs.scss
  5. +59 −33 lib/_button-groups.scss
  6. +19 −9 lib/_buttons.scss
  7. +4 −0 lib/_carousel.scss
  8. +16 −1 lib/_close.scss
  9. +11 −6 lib/_code.scss
  10. +9 −6 lib/_component-animations.scss
  11. +19 −20 lib/_dropdowns.scss
  12. +65 −31 lib/_forms.scss
  13. +7 −2 lib/_grid.scss
  14. +4 −0 lib/_hero-unit.scss
  15. +60 −0 lib/_labels-badges.scss
  16. +0 −38 lib/_labels.scss
  17. +5 −2 lib/_layouts.scss
  18. +109 −91 lib/_mixins.scss
  19. +9 −4 lib/_modals.scss
  20. +71 −40 lib/_navbar.scss
  21. +46 −46 lib/_navs.scss
  22. +5 −1 lib/_pager.scss
  23. +4 −0 lib/_pagination.scss
  24. +4 −0 lib/_popovers.scss
  25. +17 −6 lib/_progress-bars.scss
  26. +7 −4 lib/_reset.scss
  27. +29 −0 lib/_responsive-1200px-min.scss
  28. +153 −0 lib/_responsive-767px-max.scss
  29. +20 −0 lib/_responsive-768px-979px.scss
  30. +151 −0 lib/_responsive-navbar.scss
  31. +44 −0 lib/_responsive-utilities.scss
  32. +5 −3 lib/_scaffolding.scss
  33. +21 −6 lib/_sprites.scss
  34. +30 −30 lib/_tables.scss
  35. +18 −2 lib/_thumbnails.scss
  36. +5 −1 lib/_tooltip.scss
  37. +13 −8 lib/_type.scss
  38. +3 −0  lib/_utilities.scss
  39. +24 −14 lib/_variables.scss
  40. +3 −0  lib/_wells.scss
  41. +7 −8 lib/bootstrap.scss
  42. +17 −342 lib/responsive.scss
  43. +51 −0 lib/tests/css-tests.css
  44. +827 −0 lib/tests/css-tests.html
View
8 lib/_accordion.scss
@@ -1,6 +1,9 @@
// ACCORDION
// ---------
+// Updated for SASS:
+// - replace @ with $
+// - replace .border-radius with @include border-radius
// Parent container
.accordion {
@@ -21,6 +24,11 @@
padding: 8px 15px;
}
+// General toggle styles
+.accordion-toggle {
+ cursor: pointer;
+}
+
// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
padding: 9px 15px;
View
6 lib/_alerts.scss
@@ -1,6 +1,10 @@
// ALERT STYLES
// ------------
+// Updates for SASS:
+// - replace $ with $
+// - replace .border-radius with $include border-radius
+
// Base alert styles
.alert {
padding: 8px 35px 8px 14px;
@@ -28,7 +32,7 @@
.alert-success {
background-color: $successBackground;
- border-color: $successBorder;
+ border-color: $successBorder;
color: $successText;
}
.alert-danger,
View
39 lib/_badges.scss
@@ -1,39 +0,0 @@
-// BADGES
-// ------
-
-// Base
-.badge {
- padding: 1px 9px 2px;
- font-size: $baseFontSize * .925;
- font-weight: bold;
- white-space: nowrap;
- color: $white;
- background-color: $grayLight;
- @include border-radius(9px);
-}
-
-// Hover state
-.badge:hover {
- color: $white;
- text-decoration: none;
- cursor: pointer;
-}
-
-// Colors
-.badge-important { background-color: $errorText; }
-.badge-important:hover { background-color: darken($errorText, 10%); }
-
-.badge-error { background-color: $errorText; }
-.badge-error:hover { background-color: darken($errorText, 10%); }
-
-.badge-warning { background-color: $orange; }
-.badge-warning:hover { background-color: darken($orange, 10%); }
-
-.badge-success { background-color: $successText; }
-.badge-success:hover { background-color: darken($successText, 10%); }
-
-.badge-info { background-color: $infoText; }
-.badge-info:hover { background-color: darken($infoText, 10%); }
-
-.badge-inverse { background-color: $grayDark; }
-.badge-inverse:hover { background-color: darken($grayDark, 10%); }
View
5 lib/_breadcrumbs.scss
@@ -1,6 +1,11 @@
// BREADCRUMBS
// -----------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+// - replace #gradient > .vertical with @include gradient-vertical
+
.breadcrumb {
padding: 7px 14px;
margin: 0 0 $baseLineHeight;
View
92 lib/_button-groups.scss
@@ -1,6 +1,10 @@
// BUTTON GROUPS
// -------------
+// Updates for SASS:
+// - replace $ with $
+// - update mixin definitions
+// - pull complex shadow definitions into variables
// Make the div behave like a button
.btn-group {
@@ -25,14 +29,14 @@
}
// Float them, remove border radius, then re-add to first and last elements
-.btn-group .btn {
+.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 {
+.btn-group > .btn:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
@@ -41,8 +45,9 @@
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
-.btn-group .btn:last-child,
-.btn-group .dropdown-toggle {
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.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;
@@ -51,7 +56,7 @@
border-bottom-right-radius: 4px;
}
// Reset corners for large buttons
-.btn-group .btn.large:first-child {
+.btn-group > .btn.large:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
@@ -60,8 +65,8 @@
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
-.btn-group .btn.large:last-child,
-.btn-group .large.dropdown-toggle {
+.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;
@@ -71,10 +76,10 @@
}
// On hover/focus/active, bring the proper btn to front
-.btn-group .btn:hover,
-.btn-group .btn:focus,
-.btn-group .btn:active,
-.btn-group .btn.active {
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active {
z-index: 2;
}
@@ -90,48 +95,62 @@
// ----------------------
// Give the line between buttons some depth
-.btn-group .dropdown-toggle {
+.btn-group > .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
$shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
- *padding-top: 3px;
- *padding-bottom: 3px;
+ *padding-top: 4px;
+ *padding-bottom: 4px;
}
-.btn-group .btn-mini.dropdown-toggle {
+.btn-group > .btn-mini.dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
- *padding-top: 1px;
- *padding-bottom: 1px;
}
-.btn-group .btn-small.dropdown-toggle {
+.btn-group > .btn-small.dropdown-toggle {
*padding-top: 4px;
*padding-bottom: 4px;
}
-.btn-group .btn-large.dropdown-toggle {
+.btn-group > .btn-large.dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
.btn-group.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;
-
- // Reposition menu on open and round all corners
- .dropdown-menu {
- display: block;
- margin-top: 1px;
- @include border-radius(5px);
- }
+ // The clickable button for toggling the menu
+ // Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle {
background-image: none;
- $shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+ $shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
}
+
+ // Keep the hover's background when dropdown is open
+ .btn.dropdown-toggle {
+ background-color: $btnBackgroundHighlight;
+ }
+ .btn-primary.dropdown-toggle {
+ background-color: $btnPrimaryBackgroundHighlight;
+ }
+ .btn-warning.dropdown-toggle {
+ background-color: $btnWarningBackgroundHighlight;
+ }
+ .btn-danger.dropdown-toggle {
+ background-color: $btnDangerBackgroundHighlight;
+ }
+ .btn-success.dropdown-toggle {
+ background-color: $btnSuccessBackgroundHighlight;
+ }
+ .btn-info.dropdown-toggle {
+ background-color: $btnInfoBackgroundHighlight;
+ }
+ .btn-inverse.dropdown-toggle {
+ background-color: $btnInverseBackgroundHighlight;
+ }
}
+
// Reposition the caret
.btn .caret {
margin-top: 7px;
@@ -150,10 +169,16 @@
}
.btn-large .caret {
margin-top: 6px;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid $black;
+ border-left-width: 5px;
+ border-right-width: 5px;
+ border-top-width: 5px;
}
+// Upside down carets for .dropup
+.dropup .btn-large .caret {
+ border-bottom: 5px solid $black;
+ border-top: 0;
+}
+
// Account for other colors
@@ -169,3 +194,4 @@
@include opacity(75);
}
}
+
View
28 lib/_buttons.scss
@@ -1,6 +1,10 @@
// BUTTON STYLES
// -------------
+// Updates for SASS:
+// - replace $ with $
+// - update mixin definitions
+// - pull complex shadow definitions into variables
// Base styles
// --------------------------------------------------
@@ -13,20 +17,20 @@
margin-bottom: 0; // For input.btn
font-size: $baseFontSize;
line-height: $baseLineHeight;
+ *line-height: 20px;
color: $grayDark;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle;
+ cursor: pointer;
@include buttonBackground($btnBackground, $btnBackgroundHighlight);
border: 1px solid $btnBorder;
+ *border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken($btnBorder, 10%);
@include border-radius(4px);
+ @include ie7-restore-left-whitespace(); // Give IE7 some love
$shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
- cursor: pointer;
-
- // Give IE7 some love
- @include ie7-restore-left-whitespace();
}
// Hover state
@@ -34,6 +38,7 @@
color: $grayDark;
text-decoration: none;
background-color: darken($white, 10%);
+ *background-color: darken($white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
background-position: 0 -15px;
// transition is only when going to hover, otherwise the background
@@ -49,20 +54,20 @@
// Active state
.btn.active,
.btn:active {
+ background-color: darken($white, 10%);
+ background-color: darken($white, 15%) e("\9");
background-image: none;
+ outline: 0;
$shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
- background-color: darken($white, 10%);
- background-color: darken($white, 15%) #{"\9"};
- outline: 0;
}
// Disabled state
.btn.disabled,
.btn[disabled] {
cursor: default;
- background-image: none;
background-color: darken($white, 10%);
+ background-image: none;
@include opacity(65);
@include box-shadow(none);
}
@@ -117,8 +122,8 @@
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
color: $white;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
@@ -132,6 +137,11 @@
// Set the backgrounds
// -------------------------
+.btn {
+ // reset here as of 2.0.3 due to Recess property order
+ border-color: #ccc;
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
+}
.btn-primary {
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
}
View
4 lib/_carousel.scss
@@ -1,6 +1,10 @@
// CAROUSEL
// --------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+
.carousel {
position: relative;
margin-bottom: $baseLineHeight;
View
17 lib/_close.scss
@@ -1,6 +1,10 @@
// CLOSE ICONS
// -----------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+
.close {
float: right;
font-size: 20px;
@@ -12,7 +16,18 @@
&:hover {
color: $black;
text-decoration: none;
- @include opacity(40);
cursor: pointer;
+ @include opacity(40);
}
}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ -webkit-appearance: none;
+}
View
17 lib/_code.scss
@@ -1,7 +1,12 @@
-// Code.scss
+// Code.less
// Code typography styles for the <code> and <pre> elements
// --------------------------------------------------------
+// Updates for SASS:
+// - replace $ with $
+// - update mixin definitions
+// - replace font definition with mixin
+
// Inline and block code styles
code,
pre {
@@ -27,14 +32,14 @@ pre {
margin: 0 0 $baseLineHeight / 2;
font-size: $baseFontSize * .925; // 13px to 12px
line-height: $baseLineHeight;
+ word-break: break-all;
+ word-wrap: break-word;
+ white-space: pre;
+ white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8
border: 1px solid rgba(0,0,0,.15);
@include border-radius(4px);
- white-space: pre;
- white-space: pre-wrap;
- word-break: break-all;
- word-wrap: break-word;
// Make prettyprint styles more spaced out for readability
&.prettyprint {
@@ -54,4 +59,4 @@ pre {
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
-}
+}
View
15 lib/_component-animations.scss
@@ -1,20 +1,23 @@
// COMPONENT ANIMATIONS
// --------------------
+// Updates for SASS:
+// - update mixin definitions
+
.fade {
+ @include opacity(0);
@include transition(opacity .15s linear);
- opacity: 0;
&.in {
- opacity: 1;
+ @include opacity(100);
}
}
.collapse {
- @include transition(height .35s ease);
- position:relative;
- overflow:hidden;
+ position: relative;
height: 0;
+ overflow: hidden;
+ @include transition(height .35s ease);
&.in {
height: auto;
}
-}
+}
View
39 lib/_dropdowns.scss
@@ -1,7 +1,12 @@
// DROPDOWN MENUS
// --------------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropup,
.dropdown {
position: relative;
}
@@ -21,11 +26,11 @@
width: 0;
height: 0;
vertical-align: top;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
border-top: 4px solid $black;
- @include opacity(30);
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
content: "";
+ @include opacity(30);
}
// Place the caret
@@ -34,7 +39,7 @@
margin-left: 2px;
}
.dropdown:hover .caret,
-.open.dropdown .caret {
+.open .caret {
@include opacity(100);
}
@@ -45,24 +50,22 @@
top: 100%;
left: 0;
z-index: $zindexDropdown;
- float: left;
display: none; // none by default, but block on "open" of the menu
+ float: left;
min-width: 160px;
padding: 4px 0;
- margin: 0; // override default ul
+ margin: 1px 0 0; // override default ul
list-style: none;
background-color: $dropdownBackground;
- border-color: #ccc;
- border-color: rgba(0,0,0,.2);
- border-style: solid;
- border-width: 1px;
- @include border-radius(0 0 5px 5px);
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0,0,0,.2);
+ *border-right-width: 2px;
+ *border-bottom-width: 2px;
+ @include border-radius(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;
- *border-right-width: 2px;
- *border-bottom-width: 2px;
// Aligns the dropdown menu to right
&.pull-right {
@@ -99,25 +102,21 @@
// Open state for the dropdown
// ---------------------------
-.dropdown.open {
+.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,.3);
- }
.dropdown-menu {
display: block;
}
}
// Right aligned dropdowns
+// ---------------------------
.pull-right .dropdown-menu {
- left: auto;
right: 0;
+ left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
View
96 lib/_forms.scss
@@ -1,7 +1,11 @@
-// Forms.scss
+// Forms.less
// Base styles for various input types, form layouts, and states
// -------------------------------------------------------------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+// - use grid generator mixin
// GENERAL STYLES
// --------------
@@ -42,7 +46,7 @@ input,
button,
select,
textarea {
- @include font-shorthand(); // Set size, weight, line-height here
+ @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
}
input,
button,
@@ -71,8 +75,9 @@ select,
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $gray;
+ background-color: $inputBackground;
border: 1px solid $inputBorder;
- @include border-radius(3px);
+ @include border-radius($inputBorderRadius);
}
.uneditable-textarea {
width: auto;
@@ -97,8 +102,9 @@ input[type="radio"] {
*margin-top: 0; /* IE7 */
line-height: normal;
cursor: pointer;
- @include border-radius(0);
+ background-color: transparent;
border: 0 \9; /* IE9 and down */
+ @include border-radius(0);
}
input[type="image"] {
border: 0;
@@ -109,9 +115,9 @@ input[type="file"] {
width: auto;
padding: initial;
line-height: initial;
- border: initial;
background-color: $inputBackground;
background-color: initial;
+ border: initial;
@include box-shadow(none);
}
@@ -171,6 +177,7 @@ input[type="hidden"] {
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
+ min-height: 18px; // clear the floating input if there is no label text
padding-left: 18px;
}
.radio input[type="radio"],
@@ -213,17 +220,17 @@ textarea {
input:focus,
textarea:focus {
border-color: rgba(82,168,236,.8);
- $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
- @include box-shadow($shadow);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
+ $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+ @include box-shadow($shadow);
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
- @include box-shadow(none); // override for file inputs
@include tab-focus();
+ @include box-shadow(none); // override for file inputs
}
@@ -243,7 +250,12 @@ select:focus {
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
-.uneditable-input {
+.uneditable-input[class*="span"],
+// Redeclare since the fluid row class is more specific
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"] {
float: none;
margin-left: 0;
}
@@ -253,7 +265,7 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
-@include grid-input-generate($gridColumnWidth, $gridGutterWidth);
+@include grid-input($gridColumnWidth, $gridGutterWidth);
@@ -268,9 +280,16 @@ textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
+ cursor: not-allowed;
background-color: $inputDisabledBackground;
border-color: #ddd;
- cursor: not-allowed;
+}
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+ background-color: transparent;
}
@@ -314,18 +333,19 @@ select:focus:required:invalid {
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
margin-top: $baseLineHeight;
margin-bottom: $baseLineHeight;
- background-color: $grayLighter;
+ background-color: $formActionsBackground;
border-top: 1px solid #ddd;
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
- display: block;
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+ white-space: nowrap;
+ cursor: not-allowed;
background-color: $inputBackground;
border-color: #eee;
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
- cursor: not-allowed;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
@@ -365,10 +385,13 @@ select:focus:required:invalid {
input,
select,
.uneditable-input {
+ position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
+ margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
*margin-left: 0;
- @include border-radius(0 3px 3px 0);
+ vertical-align: middle;
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+ // Make input on top when focused so blue border and shadow always show
&:focus {
- position: relative;
z-index: 2;
}
}
@@ -378,8 +401,8 @@ select:focus:required:invalid {
.add-on {
display: inline-block;
width: auto;
- min-width: 16px;
height: $baseLineHeight;
+ min-width: 16px;
padding: 4px 5px;
font-weight: normal;
line-height: $baseLineHeight;
@@ -391,7 +414,8 @@ select:focus:required:invalid {
}
.add-on,
.btn {
- @include border-radius(3px 0 0 3px);
+ margin-left: -1px;
+ @include border-radius(0);
}
.active {
background-color: lighten($green, 30);
@@ -403,21 +427,24 @@ select:focus:required:invalid {
.btn {
margin-right: -1px;
}
+ .add-on:first-child,
+ .btn:first-child {
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+ }
}
.input-append {
input,
select,
.uneditable-input {
- @include border-radius(3px 0 0 3px);
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
}
.uneditable-input {
- border-left-color: #eee;
border-right-color: #ccc;
+ border-left-color: #eee;
}
- .add-on,
- .btn {
- margin-left: -1px;
- @include border-radius(0 3px 3px 0);
+ .add-on:last-child,
+ .btn:last-child {
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
}
}
// Remove all border-radius for inputs with both prepend and append
@@ -430,12 +457,12 @@ select:focus:required:invalid {
.add-on:first-child,
.btn:first-child {
margin-right: -1px;
- @include border-radius(3px 0 0 3px);
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
}
.add-on:last-child,
.btn:last-child {
margin-left: -1px;
- @include border-radius(0 3px 3px 0);
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
}
}
@@ -445,8 +472,10 @@ select:focus:required:invalid {
// -----------
.search-query {
- padding-left: 14px;
padding-right: 14px;
+ padding-right: 4px \9;
+ padding-left: 14px;
+ padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0; // remove the default margin on all inputs
@include border-radius(14px);
}
@@ -470,6 +499,7 @@ select:focus:required:invalid {
.input-prepend,
.input-append {
display: inline-block;
+ @include ie7-inline-block();
margin-bottom: 0;
}
// Re-hide hidden elements due to specifity
@@ -503,8 +533,8 @@ select:focus:required:invalid {
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
- margin-left: 0;
margin-right: 3px;
+ margin-left: 0;
}
@@ -537,11 +567,15 @@ legend + .control-group {
}
// Move over all input controls and content
.controls {
- margin-left: 160px;
- /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
+ // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
+ // don't inherit the margin of the parent, in this case .controls
*display: inline-block;
- *margin-left: 0;
*padding-left: 20px;
+ margin-left: 160px;
+ *margin-left: 0;
+ &:first-child {
+ *padding-left: 160px;
+ }
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
View
9 lib/_grid.scss
@@ -1,5 +1,10 @@
+// Updates for SASS:
+// - replace @ with $
+// - use grid-core and grid-fluid mixins instead of #grid > .core and
+// #grid > .fluid
+
// Fixed (940px)
-@include grid-core-generate($gridColumnWidth, $gridGutterWidth);
+@include grid-core($gridColumnWidth, $gridGutterWidth);
// Fluid (940px)
-@include grid-fluid-generate($fluidGridColumnWidth, $fluidGridGutterWidth);
+@include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
View
4 lib/_hero-unit.scss
@@ -1,6 +1,10 @@
// HERO UNIT
// ---------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+
.hero-unit {
padding: 60px;
margin-bottom: 30px;
View
60 lib/_labels-badges.scss
@@ -0,0 +1,60 @@
+// LABELS & BADGES
+// ---------------
+
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+// - manually set up .label- and .badge- classes
+
+// Base classes
+.label,
+.badge {
+ font-size: $baseFontSize * .846;
+ font-weight: bold;
+ line-height: 14px; // ensure proper line-height if floated
+ color: $white;
+ vertical-align: baseline;
+ white-space: nowrap;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ background-color: $grayLight;
+}
+// Set unique padding and border-radii
+.label {
+ padding: 1px 4px 2px;
+ @include border-radius(3px);
+}
+.badge {
+ padding: 1px 9px 2px;
+ @include border-radius(9px);
+}
+
+// Hover state, but only for links
+a {
+ &.label:hover,
+ &.badge:hover {
+ color: $white;
+ text-decoration: none;
+ cursor: pointer;
+ }
+}
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualify with `a` but [href] attribute)
+.label,
+.badge {
+ // Important (red)
+ .label-important, .badge-important { background-color: $errorText; }
+ .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
+ // Warnings (orange)
+ .label-warning, .badge-warning { background-color: $orange; }
+ .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
+ // Success (green)
+ .label-success, .badge-success { background-color: $successText; }
+ .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
+ // Info (turquoise)
+ .label-info, .badge-info { background-color: $infoText; }
+ .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
+ // Inverse (black)
+ .label-inverse, .badge-inverse { background-color: $grayDark; }
+ .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
+}
View
38 lib/_labels.scss
@@ -1,38 +0,0 @@
-// LABELS
-// ------
-
-// Base
-.label {
- padding: 1px 4px 2px;
- font-size: $baseFontSize * .846;
- font-weight: bold;
- line-height: 13px; // ensure proper line-height if floated
- color: $white;
- vertical-align: middle;
- white-space: nowrap;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- background-color: $grayLight;
- @include border-radius(3px);
-}
-
-// Hover state
-.label:hover {
- color: $white;
- text-decoration: none;
-}
-
-// Colors
-.label-important { background-color: $errorText; }
-.label-important:hover { background-color: darken($errorText, 10%); }
-
-.label-warning { background-color: $orange; }
-.label-warning:hover { background-color: darken($orange, 10%); }
-
-.label-success { background-color: $successText; }
-.label-success:hover { background-color: darken($successText, 10%); }
-
-.label-info { background-color: $infoText; }
-.label-info:hover { background-color: darken($infoText, 10%); }
-
-.label-inverse { background-color: $grayDark; }
-.label-inverse:hover { background-color: darken($grayDark, 10%); }
View
7 lib/_layouts.scss
@@ -3,6 +3,9 @@
// Fixed-width and fluid (with sidebar) layouts
// --------------------------------------------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
// Container (centered, fixed-width layouts)
.container {
@@ -11,7 +14,7 @@
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
- padding-left: $gridGutterWidth;
padding-right: $gridGutterWidth;
+ padding-left: $gridGutterWidth;
@include clearfix();
-}
+}
View
200 lib/_mixins.scss
@@ -1,7 +1,13 @@
-// Mixins.scss
+// Mixins.less
// Snippets of reusable CSS to develop faster and keep code readable
// -----------------------------------------------------------------
+// Updates for SASS:
+// - use @mixin instead of class definitions
+// - replace @ with $ for variables
+// - add default of 5px for @size and @square mixins
+// - add baseFontWeight variable
+// - replace grid generation loops with for $i from 1 to $gridColumns
// UTILITY MIXINS
// --------------------------------------------------
@@ -9,7 +15,7 @@
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
-@mixin clearfix() {
+@mixin clearfix {
*zoom: 1;
&:before,
&:after {
@@ -98,44 +104,49 @@
white-space: nowrap;
}
-// New image replacement
+// CSS image replacement
// -------------------------
-// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
-@mixin hide-text() {
- overflow: hidden;
- text-indent: 100%;
- white-space: nowrap;
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+@mixin hide-text {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
}
// FONTS
// --------------------------------------------------
-// Font Stacks
@mixin font-family-serif {
- font-family: Georgia, "Times New Roman", Times, serif;
+ font-family: $serifFontFamily;
}
+
@mixin font-family-sans-serif {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-family: $sansFontFamily;
}
+
@mixin font-family-monospace {
- font-family: Menlo, Monaco, "Courier New", monospace;
+ font-family: $monoFontFamily;
}
-@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+
+@mixin font-shorthand ($size: $baseFontSize, $weight: $baseFontWeight, $lineHeight: $baseLineHeight) {
font-size: $size;
font-weight: $weight;
line-height: $lineHeight;
}
-@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-serif;
+
+@mixin font-serif($size: $baseFontSize, $weight: $baseFontWeight, $lineHeight: $baseLineHeight) {
+ @include font-family-serif();
@include font-shorthand($size, $weight, $lineHeight);
}
-@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-sans-serif;
+@mixin font-sans-serif($size: $baseFontSize, $weight: $baseFontWeight, $lineHeight: $baseLineHeight) {
+ @include font-family-sans-serif();
@include font-shorthand($size, $weight, $lineHeight);
}
-@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
- @include font-family-monospace;
+@mixin font-monospace($size: $baseFontSize, $weight: $baseFontWeight, $lineHeight: $baseLineHeight) {
+ @include font-family-monospace();
@include font-shorthand($size, $weight, $lineHeight);
}
@@ -144,12 +155,11 @@
// --------------------------------------------------
// Block level inputs
-@mixin input-block-level() {
+@mixin input-block-level {
display: block;
width: 100%;
- min-height: 28px; /* Make inputs at least the height of their button counterpart */
- /* Makes inputs behave like true block-level elements */
- @include box-sizing(border-box);
+ min-height: 28px; // Make inputs at least the height of their button counterpart
+ @include box-sizing(border-box); // Makes inputs behave like true block-level elements
}
@@ -224,21 +234,21 @@
-o-transform: scale($ratio);
transform: scale($ratio);
}
-@mixin translate($x: 0, $y: 0) {
+@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-moz-transform: translate($x, $y);
-ms-transform: translate($x, $y);
-o-transform: translate($x, $y);
transform: translate($x, $y);
}
-@mixin skew($x: 0, $y: 0) {
+@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
-moz-transform: skew($x, $y);
-ms-transform: skew($x, $y);
-o-transform: skew($x, $y);
transform: skew($x, $y);
}
-@mixin translate3d($x: 0, $y: 0, $z: 0) {
+@mixin translate3d($x, $y, $z) {
-webkit-transform: translate($x, $y, $z);
-moz-transform: translate($x, $y, $z);
-ms-transform: translate($x, $y, $z);
@@ -246,6 +256,17 @@
transform: translate($x, $y, $z);
}
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+@mixin backface-visibility($visibility){
+ -webkit-backface-visibility: $visibility;
+ -moz-backface-visibility: $visibility;
+ -ms-backface-visibility: $visibility;
+ backface-visibility: $visibility;
+}
+
// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@mixin background-clip($clip) {
@@ -255,7 +276,7 @@
}
// Background sizing
-@mixin background-size($size){
+@mixin background-size($size) {
-webkit-background-size: $size;
-moz-background-size: $size;
-o-background-size: $size;
@@ -276,18 +297,19 @@
@mixin user-select($select) {
-webkit-user-select: $select;
-moz-user-select: $select;
+ -ms-user-select: $select;
-o-user-select: $select;
user-select: $select;
}
// Resize anything
-@mixin resizable($direction: both) {
+@mixin resizable($direction) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// CSS3 Content Columns
-@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
+@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
-webkit-column-count: $columnCount;
-moz-column-count: $columnCount;
column-count: $columnCount;
@@ -297,9 +319,9 @@
}
// Opacity
-@mixin opacity($opacity: 100) {
+@mixin opacity($opacity) {
opacity: $opacity / 100;
- filter: alpha(opacity=$opacity);
+ filter: alpha(opacity=$opacity);
}
@@ -309,8 +331,9 @@
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
@mixin translucent-background($color: $white, $alpha: 1) {
- background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
}
+
@mixin translucent-border($color: $white, $alpha: 1) {
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
@include background-clip(padding-box);
@@ -320,7 +343,7 @@
@mixin gradientBar($primaryColor, $secondaryColor) {
@include gradient-vertical($primaryColor, $secondaryColor);
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Gradients
@@ -333,7 +356,7 @@
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); // IE9 and down
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
}
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
background-color: mix($startColor, $endColor, 60%);
@@ -344,7 +367,7 @@
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); // IE9 and down
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
}
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
background-color: $endColor;
@@ -364,7 +387,7 @@
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); // IE9 and down, gets no color-stop at all for proper fallback
+ 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
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
background-color: $outerColor;
@@ -372,8 +395,8 @@
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
+ background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
background-repeat: no-repeat;
- // Opera cannot do radial gradients yet
}
@mixin gradient-striped($color, $angle: -45deg) {
background-color: $color;
@@ -384,8 +407,9 @@
background-image: -o-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);
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);
}
+
// Reset filters for IE
-@mixin reset-filter() {
+@mixin gradient-reset-filter() {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
@@ -397,19 +421,18 @@
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
-@mixin nav-divider() {
- height: 1px;
- margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
- overflow: hidden;
- background-color: #e5e5e5;
- border-bottom: 1px solid $white;
-
+@mixin nav-divider {
// 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%;
+ height: 1px;
+ margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
*margin: -5px 0 5px;
+ overflow: hidden;
+ background-color: #e5e5e5;
+ border-bottom: 1px solid $white;
}
// Button backgrounds
@@ -417,17 +440,19 @@
@mixin buttonBackground($startColor, $endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
@include gradientBar($startColor, $endColor);
- @include reset-filter();
+ *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+ @include gradient-reset-filter();
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {
background-color: $endColor;
+ *background-color: darken($endColor, 5%);
}
// 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"};
+ background-color: darken($endColor, 10%) e("\9");
}
}
@@ -439,7 +464,7 @@
margin-top: ($navbarHeight - $elementHeight) / 2;
}
-// POPOVER ARROWS
+// Popover arrows
// -------------------------
// For tipsies and popovers
@mixin popoverArrow-top($arrowWidth: 5px, $color: $black) {
@@ -475,14 +500,13 @@
border-right: $arrowWidth solid $color;
}
-
// Grid System
// -----------
// Centered container element
@mixin container-fixed() {
- margin-left: auto;
margin-right: auto;
+ margin-left: auto;
@include clearfix();
}
@@ -494,28 +518,27 @@
}
// Make a Grid
-// -------------------------
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
@mixin makeRow() {
margin-left: $gridGutterWidth * -1;
@include clearfix();
}
-@mixin makeColumn($columns: 1) {
+@mixin makeColumn($columns: 1, $offset: 0) {
float: left;
- margin-left: $gridGutterWidth;
+ margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}
// The Grid
-// --------
-@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+@mixin core-offset($columns) {
+ margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
}
-@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
- margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
+
+@mixin core-span($columns) {
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}
-@mixin grid-core-generate($gridColumnWidth, $gridGutterWidth) {
+@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
.row {
margin-left: $gridGutterWidth * -1;
@include clearfix();
@@ -529,64 +552,59 @@
// Set the container width, and override it for fixed navbars in media queries
.container,
.navbar-fixed-top .container,
- .navbar-fixed-bottom .container {
- @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)
- }
+ .navbar-fixed-bottom .container { @include core-span($gridColumns); }
+ // generate .spanX and .offsetX
@for $i from 1 through $gridColumns {
- .span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth) }
- }
-
- @for $i from 1 through $gridColumns - 1 {
- .offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth) }
+ .span#{$i} { @include core-span($i); }
+ .offset#{$i} { @include core-offset($i); }
}
}
-
-// Fluid grid system
-// -----------------
-@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
+@mixin fluid-span($columns) {
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
+ *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
+}
+
+.gridTest {
+ width: 1px;
+ *width: 1px;
}
-@mixin grid-fluid-generate($fluidGridColumnWidth, $fluidGridGutterWidth) {
+
+@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
.row-fluid {
width: 100%;
@include clearfix();
- > [class*="span"] {
+ [class*="span"] {
+ @include input-block-level();
float: left;
margin-left: $fluidGridGutterWidth;
+ *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
}
- > [class*="span"]:first-child {
+ [class*="span"]:first-child {
margin-left: 0;
}
+ // generate .spanX
@for $i from 1 through $gridColumns {
- > .span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
+ .span#{$i} { @include fluid-span($i); }
}
}
}
-
-// Input grid system
-// -----------------
-@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
+@mixin input-span($columns) {
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
}
-@mixin grid-input-generate($gridColumnWidth, $gridGutterWidth) {
+
+@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
input,
textarea,
.uneditable-input {
margin-left: 0; // override margin-left from core grid system
-
- @for $i from 1 through $gridColumns {
- &.span#{$i} { @include grid-input-span($i, $gridColumnWidth, $gridGutterWidth); }
- }
}
-}
-
-// Mixins Output
-// -------------
-.clearfix { @include clearfix(); }
-.hide-text { @include hide-text(); }
-.input-block-level { @include input-block-level(); }
+ // generate .spanX
+ @for $i from 1 through $gridColumns {
+ input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include input-span($i); }
+ }
+}
View
13 lib/_modals.scss
@@ -1,6 +1,11 @@
// MODALS
// ------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+// - pull transition definition into variable
+
// Recalculate z-index where appropriate
.modal-open {
.dropdown-menu { z-index: $zindexDropdown + $zindexModal; }
@@ -44,8 +49,8 @@
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
@include background-clip(padding-box);
&.fade {
- $transition: opacity .3s linear, top .3s ease-out;
- @include transition($transition);
+ @include transition(opacity .3s linear);
+ @include transition(top .3s ease-out);
top: -25%;
}
&.fade.in { top: 50%; }
@@ -57,14 +62,14 @@
.close { margin-top: 2px; }
}
-// Body (where all modal content resises)
+// Body (where all modal content resides)
.modal-body {
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
// Remove bottom margin if need be
-.modal-body .modal-form {
+.modal-form {
margin-bottom: 0;
}
View
111 lib/_navbar.scss
@@ -1,6 +1,9 @@
// NAVBAR (FIXED AND STATIC)
// -------------------------
+// Updates for SASS:
+// - replace @ with $ for variables
+// - update mixin definitions
// COMMON STYLES
// -------------
@@ -16,6 +19,7 @@
// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
.navbar-inner {
+ min-height: $navbarHeight;
padding-left: 20px;
padding-right: 20px;
@include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
@@ -30,28 +34,6 @@
width: auto;
}
-// Navbar button for toggling navbar items in responsive layouts
-.btn-navbar {
- display: none;
- float: right;
- padding: 7px 10px;
- margin-left: 5px;
- margin-right: 5px;
- @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
- $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
- @include box-shadow($shadow);
-}
-.btn-navbar .icon-bar {
- display: block;
- width: 18px;
- height: 2px;
- background-color: #f5f5f5;
- @include border-radius(1px);
- @include box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-.btn-navbar .icon-bar + .icon-bar {
- margin-top: 3px;
-}
// Override the default collapsed state
.nav-collapse.collapse {
height: auto;
@@ -69,25 +51,34 @@
.brand {
float: left;
display: block;
- padding: 8px 20px 12px;
+ // Vertically center the text given $navbarHeight
+ $elementHeight: 20px;
+ padding: (($navbarHeight - $elementHeight) / 2 - 2) 20px (($navbarHeight - $elementHeight) / 2 + 2);
margin-left: -20px; // negative indent to left-align the text down the page
font-size: 20px;
font-weight: 200;
line-height: 1;
- color: $white;
+ color: $navbarBrandColor;
}
// Plain text in topbar
.navbar-text {
margin-bottom: 0;
line-height: $navbarHeight;
}
+ // Janky solution for now to account for links outside the .nav
+ .navbar-link {
+ color: $navbarLinkColor;
+ &:hover {
+ color: $navbarLinkColorHover;
+ }
+ }
// Buttons in navbar
.btn,
.btn-group {
@include navbarVerticalAlign(30px); // Vertically center in navbar
}
.btn-group .btn {
- margin-top: 0; // then undo the margin here so we don't accidentally double it
+ margin: 0; // then undo the margin here so we don't accidentally double it
}
}
@@ -133,7 +124,7 @@
color: $white;
background-color: $navbarSearchBackground;
border: 1px solid $navbarSearchBorder;
- $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
+ $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
@include box-shadow($shadow);
@include transition(none);
@@ -182,7 +173,7 @@
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
- @include grid-core-span($gridColumns);
+ @include core-span($gridColumns);
}
// Fixed to top
@@ -218,12 +209,31 @@
// Links
.navbar .nav > li > a {
float: none;
- padding: 10px 10px 11px;
+ // Vertically center the text given $navbarHeight
+ $elementHeight: 20px;
+ padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
line-height: 19px;
color: $navbarLinkColor;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
+// Buttons
+.navbar .btn {
+ display: inline-block;
+ padding: 4px 10px 4px;
+ // Vertically center the button given @navbarHeight
+ $elementHeight: 28px;
+ $topMargin: ($navbarHeight - $elementHeight) / 2 - 1;
+ $bottomMargin: ($navbarHeight - $elementHeight) / 2;
+ margin: $topMargin 5px $bottomMargin;
+ line-height: $baseLineHeight;
+}
+.navbar .btn-group {
+ margin: 0;
+ // Vertically center the button given @navbarHeight
+ $elementHeight: 28px;
+ padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
+}
// Hover
.navbar .nav > li > a:hover {
background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
@@ -255,6 +265,29 @@
margin-right: 0;
}
+// Navbar button for toggling navbar items in responsive layouts
+// These definitions need to come after '.navbar .btn'
+.navbar .btn-navbar {
+ display: none;
+ float: right;
+ padding: 7px 10px;
+ margin-left: 5px;
+ margin-right: 5px;
+ @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
+ $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
+ @include box-shadow($shadow);
+}
+.navbar .btn-navbar .icon-bar {
+ display: block;
+ width: 18px;
+ height: 2px;
+ background-color: #f5f5f5;
+ @include border-radius(1px);
+ @include box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .icon-bar + .icon-bar {
+ margin-top: 3px;
+}
// Dropdown menus
@@ -262,8 +295,6 @@
// Menu position and menu carets
.navbar .dropdown-menu {
- margin-top: 1px;
- @include border-radius(4px);
&:before {
content: '';
display: inline-block;
@@ -303,31 +334,31 @@
}
}
// Dropdown toggle caret
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
+.navbar .nav li.dropdown .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open .caret {
border-top-color: $white;
border-bottom-color: $white;
}
-.navbar .nav .active .caret {
+.navbar .nav li.dropdown.active .caret {
@include opacity(100);
}
// Remove background color from open dropdown
-.navbar .nav .open > .dropdown-toggle,
-.navbar .nav .active > .dropdown-toggle,
-.navbar .nav .open.active > .dropdown-toggle {
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: transparent;
}
// Dropdown link on hover
-.navbar .nav .active > .dropdown-toggle:hover {
+.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
color: $white;
}
// Right aligned menus need alt position
// TODO: rejigger this at some point to simplify the selectors
-.navbar .nav.pull-right .dropdown-menu,
-.navbar .nav .dropdown-menu.pull-right {
+.navbar .pull-right .dropdown-menu,
+.navbar .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {
@@ -338,4 +369,4 @@
left: auto;
right: 13px;
}
-}
+}
View
92 lib/_navs.scss
@@ -1,7 +1,9 @@
// NAVIGATIONS
// -----------
-
+// Updates for SASS:
+// - replace @ with $ for variables
+// - update mixin definitions
// BASE CLASS
// ----------
@@ -21,6 +23,11 @@
background-color: $grayLighter;
}
+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+ float: right;
+}
+
// Nav headers (for dropdowns and lists)
.nav .nav-header {
display: block;
@@ -98,12 +105,10 @@
.nav-tabs {
border-bottom: 1px solid #ddd;
}
-
// Make the list-items overlay the bottom border
.nav-tabs > li {
margin-bottom: -1px;
}
-
// Actual tabs (as links)
.nav-tabs > li > a {
padding-top: 8px;
@@ -116,17 +121,16 @@
}
}
// Active state, and it's :hover to override normal :hover
-.nav-tabs > .active {
- & > a,
- & > a:hover {
- color: $gray;
- background-color: $white;
- border: 1px solid #ddd;
- border-bottom-color: transparent;
- cursor: default;
- }
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover {
+ color: $gray;
+ background-color: $white;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ cursor: default;
}
+
// PILLS
// -----
@@ -191,14 +195,11 @@
// DROPDOWNS
// ---------
-// Position the menu
-.nav-tabs .dropdown-menu,
-.nav-pills .dropdown-menu {
- margin-top: 1px;
- border-width: 1px;
+.nav-tabs .dropdown-menu {
+ @include border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
}
.nav-pills .dropdown-menu {
- @include border-radius(4px);
+ @include border-radius(4px); // make rounded corners match the pills
}
// Default dropdown links
@@ -235,14 +236,14 @@
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
-.nav > .open.active > a:hover {
+.nav > li.dropdown.open.active > a:hover {
color: $white;
background-color: $grayLight;
border-color: $grayLight;
}
-.nav .open .caret,
-.nav .open.active .caret,
-.nav .open a:hover .caret {
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret {
border-top-color: $white;
border-bottom-color: $white;
@include opacity(100);
@@ -267,14 +268,13 @@
@include clearfix();
}
.tab-content {
- display: table; // prevent content from running below tabs
- width: 100%;
+ overflow: auto; // prevent content from running below tabs
}
// Remove border on bottom, left, right
-.tabs-below .nav-tabs,
-.tabs-right .nav-tabs,
-.tabs-left .nav-tabs {
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
border-bottom: 0;
}
@@ -292,22 +292,22 @@
// BOTTOM
// ------
-.tabs-below .nav-tabs {
+.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}
-.tabs-below .nav-tabs > li {
+.tabs-below > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
-.tabs-below .nav-tabs > li > a {
+.tabs-below > .nav-tabs > li > a {
@include border-radius(0 0 4px 4px);
&:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
-.tabs-below .nav-tabs .active > a,
-.tabs-below .nav-tabs .active > a:hover {
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
@@ -315,51 +315,51 @@
// ------------
// Common styles
-.tabs-left .nav-tabs > li,
-.tabs-right .nav-tabs > li {
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
float: none;
}
-.tabs-left .nav-tabs > li > a,
-.tabs-right .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
// Tabs on the left
-.tabs-left .nav-tabs {
+.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
-.tabs-left .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
@include border-radius(4px 0 0 4px);
}
-.tabs-left .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover {
border-color: $grayLighter #ddd $grayLighter $grayLighter;
}
-.tabs-left .nav-tabs .active > a,
-.tabs-left .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: $white;
}
// Tabs on the right
-.tabs-right .nav-tabs {
+.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
-.tabs-right .nav-tabs > li > a {
+.tabs-right > .nav-tabs > li > a {
margin-left: -1px;
@include border-radius(0 4px 4px 0);
}
-.tabs-right .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover {
border-color: $grayLighter $grayLighter $grayLighter #ddd;
}
-.tabs-right .nav-tabs .active > a,
-.tabs-right .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: $white;
}
View
6 lib/_pager.scss
@@ -1,6 +1,10 @@
// PAGER
// -----
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+
.pager {
margin-left: 0;
margin-bottom: $baseLineHeight;
@@ -33,4 +37,4 @@
color: $grayLight;