Permalink
Browse files

update stylesheets to 2.0.3

  • Loading branch information...
1 parent 33f5b93 commit dd4ff16c77e4b5e2ba6fb70d3251c9cd0d70327a @nragaz nragaz committed May 12, 2012
View
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,10 @@
// BUTTON STYLES
// -------------
+// Updates for SASS:
+// - replace $ with $
+// - update mixin definitions
+// - pull complex shadow definitions into variables
// Base styles
// --------------------------------------------------
@@ -13,27 +17,28 @@
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
.btn:hover {
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
@@ -1,6 +1,10 @@
// CAROUSEL
// --------
+// Updates for SASS:
+// - replace @ with $
+// - update mixin definitions
+
.carousel {
position: relative;
margin-bottom: $baseLineHeight;
Oops, something went wrong.

0 comments on commit dd4ff16

Please sign in to comment.