Permalink
Browse files

Synced with twbs/bootstrap@b81b0e2

  • Loading branch information...
1 parent fada738 commit 7a6b5f21fd55370d39635d2eaa1ea411b1b127a0 @ixti committed Jan 7, 2012
View
@@ -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
@@ -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%);
+ }
+ }
+}
@@ -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
@@ -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
@@ -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);
+ }
+}
Oops, something went wrong.

0 comments on commit 7a6b5f2

Please sign in to comment.