Skip to content
Browse files

update to bootstrap 2.2.2 without a custom style

  • Loading branch information...
1 parent 50fa632 commit d427dd1a8ae43b65018114c062ef2fce62eb65ab @lukeman lukeman committed Dec 20, 2012
Showing with 7,604 additions and 2,711 deletions.
  1. +4 −3 symposion_project/static/bootstrap/less/accordion.less
  2. +31 −10 symposion_project/static/bootstrap/less/alerts.less
  3. +2 −1 symposion_project/static/bootstrap/less/bootstrap.less
  4. +13 −13 symposion_project/static/bootstrap/less/breadcrumbs.less
  5. +88 −52 symposion_project/static/bootstrap/less/button-groups.less
  6. +114 −75 symposion_project/static/bootstrap/less/buttons.less
  7. +28 −18 symposion_project/static/bootstrap/less/carousel.less
  8. +4 −2 symposion_project/static/bootstrap/less/close.less
  9. +10 −6 symposion_project/static/bootstrap/less/code.less
  10. +4 −2 symposion_project/static/bootstrap/less/component-animations.less
  11. +108 −18 symposion_project/static/bootstrap/less/dropdowns.less
  12. +171 −67 symposion_project/static/bootstrap/less/forms.less
  13. +17 −1 symposion_project/static/bootstrap/less/grid.less
  14. +10 −7 symposion_project/static/bootstrap/less/hero-unit.less
  15. +31 −4 symposion_project/static/bootstrap/less/labels-badges.less
  16. +1 −2 symposion_project/static/bootstrap/less/layouts.less
  17. +55 −0 symposion_project/static/bootstrap/less/media.less
  18. +116 −76 symposion_project/static/bootstrap/less/mixins.less
  19. +19 −14 symposion_project/static/bootstrap/less/modals.less
  20. +260 −128 symposion_project/static/bootstrap/less/navbar.less
  21. +47 −19 symposion_project/static/bootstrap/less/navs.less
  22. +15 −10 symposion_project/static/bootstrap/less/pager.less
  23. +90 −25 symposion_project/static/bootstrap/less/pagination.less
  24. +115 −35 symposion_project/static/bootstrap/less/popovers.less
  25. +19 −14 symposion_project/static/bootstrap/less/progress-bars.less
  26. +96 −11 symposion_project/static/bootstrap/less/reset.less
  27. +9 −7 symposion_project/static/bootstrap/less/responsive-1200px-min.less
  28. +114 −70 symposion_project/static/bootstrap/less/responsive-767px-max.less
  29. +7 −5 symposion_project/static/bootstrap/less/responsive-768px-979px.less
  30. +40 −8 symposion_project/static/bootstrap/less/responsive-navbar.less
  31. +17 −15 symposion_project/static/bootstrap/less/responsive-utilities.less
  32. +14 −5 symposion_project/static/bootstrap/less/responsive.less
  33. +27 −4 symposion_project/static/bootstrap/less/scaffolding.less
  34. +21 −19 symposion_project/static/bootstrap/less/sprites.less
  35. +122 −61 symposion_project/static/bootstrap/less/tables.less
  36. +0 −52 symposion_project/static/bootstrap/less/tests/css-tests.css
  37. +0 −917 symposion_project/static/bootstrap/less/tests/css-tests.html
  38. +0 −179 symposion_project/static/bootstrap/less/tests/forms.html
  39. +0 −108 symposion_project/static/bootstrap/less/tests/navbar.html
  40. +10 −5 symposion_project/static/bootstrap/less/thumbnails.less
  41. +48 −13 symposion_project/static/bootstrap/less/tooltip.less
  42. +90 −87 symposion_project/static/bootstrap/less/type.less
  43. +9 −2 symposion_project/static/bootstrap/less/utilities.less
  44. +126 −31 symposion_project/static/bootstrap/less/variables.less
  45. +10 −8 symposion_project/static/bootstrap/less/wells.less
  46. +5,374 −2 symposion_project/static/symposion/css/symposion.css
  47. BIN symposion_project/static/symposion/img/glyphicons-halflings-white.png
  48. BIN symposion_project/static/symposion/img/glyphicons-halflings.png
  49. +0 −191 symposion_project/static/symposion/less/bootswatch.less
  50. +2 −6 symposion_project/static/symposion/less/site.less
  51. +0 −97 symposion_project/static/symposion/less/symposion-components.less
  52. +96 −0 symposion_project/static/symposion/less/symposion-dashboard.less
  53. +0 −206 symposion_project/static/symposion/less/variables.less
View
7 symposion_project/static/bootstrap/less/accordion.less
@@ -1,5 +1,6 @@
-// ACCORDION
-// ---------
+//
+// Accordion
+// --------------------------------------------------
// Parent container
@@ -11,7 +12,7 @@
.accordion-group {
margin-bottom: 2px;
border: 1px solid #e5e5e5;
- .border-radius(4px);
+ .border-radius(@baseBorderRadius);
}
.accordion-heading {
border-bottom: 0;
View
41 symposion_project/static/bootstrap/less/alerts.less
@@ -1,34 +1,46 @@
-// ALERT STYLES
-// ------------
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
-// Base alert styles
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @baseLineHeight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground;
border: 1px solid @warningBorder;
- .border-radius(4px);
+ .border-radius(@baseBorderRadius);
+}
+.alert,
+.alert h4 {
+ // Specified for the h4 to prevent conflicts of changing @headingsColor
color: @warningText;
}
-.alert-heading {
- color: inherit;
+.alert h4 {
+ margin: 0;
}
// Adjust close link position
.alert .close {
position: relative;
top: -2px;
right: -21px;
- line-height: 18px;
+ line-height: @baseLineHeight;
}
+
// Alternate styles
-// ----------------
+// -------------------------
.alert-success {
background-color: @successBackground;
- border-color: @successBorder;
+ border-color: @successBorder;
+ color: @successText;
+}
+.alert-success h4 {
color: @successText;
}
.alert-danger,
@@ -37,14 +49,23 @@
border-color: @errorBorder;
color: @errorText;
}
+.alert-danger h4,
+.alert-error h4 {
+ color: @errorText;
+}
.alert-info {
background-color: @infoBackground;
border-color: @infoBorder;
color: @infoText;
}
+.alert-info h4 {
+ color: @infoText;
+}
+
// Block alerts
-// ------------------------
+// -------------------------
+
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
View
3 symposion_project/static/bootstrap/less/bootstrap.less
@@ -1,5 +1,5 @@
/*!
- * Bootstrap v2.0.4
+ * Bootstrap v2.2.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
@@ -52,6 +52,7 @@
// Components: Misc
@import "thumbnails.less";
+@import "media.less";
@import "labels-badges.less";
@import "progress-bars.less";
@import "accordion.less";
View
26 symposion_project/static/bootstrap/less/breadcrumbs.less
@@ -1,24 +1,24 @@
-// BREADCRUMBS
-// -----------
+//
+// Breadcrumbs
+// --------------------------------------------------
+
.breadcrumb {
- padding: 7px 14px;
+ padding: 8px 15px;
margin: 0 0 @baseLineHeight;
list-style: none;
- #gradient > .vertical(@white, #f5f5f5);
- border: 1px solid #ddd;
- .border-radius(3px);
- .box-shadow(inset 0 1px 0 @white);
- li {
+ background-color: #f5f5f5;
+ .border-radius(@baseBorderRadius);
+ > li {
display: inline-block;
.ie7-inline-block();
text-shadow: 0 1px 0 @white;
+ > .divider {
+ padding: 0 5px;
+ color: #ccc;
+ }
}
- .divider {
- padding: 0 5px;
+ > .active {
color: @grayLight;
}
- .active a {
- color: @grayDark;
- }
}
View
140 symposion_project/static/bootstrap/less/button-groups.less
@@ -1,11 +1,16 @@
-// BUTTON GROUPS
-// -------------
+//
+// Button groups
+// --------------------------------------------------
// Make the div behave like a button
.btn-group {
position: relative;
- .clearfix(); // clears the floated buttons
+ display: inline-block;
+ .ie7-inline-block();
+ font-size: 0; // remove as part 1 of font-size inline-block hack
+ vertical-align: middle; // match .btn alignment given font-size hack above
+ white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
.ie7-restore-left-whitespace();
}
@@ -16,59 +21,63 @@
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
+ font-size: 0; // Hack to remove whitespace that results from using inline-block
margin-top: @baseLineHeight / 2;
margin-bottom: @baseLineHeight / 2;
- .btn-group {
- display: inline-block;
- .ie7-inline-block();
+ > .btn + .btn,
+ > .btn-group + .btn,
+ > .btn + .btn-group {
+ margin-left: 5px;
}
}
// Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn {
position: relative;
- float: left;
- margin-left: -1px;
.border-radius(0);
}
+.btn-group > .btn + .btn {
+ margin-left: -1px;
+}
+.btn-group > .btn,
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
+ font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
+}
+
+// Reset fonts for other sizes
+.btn-group > .btn-mini {
+ font-size: @fontSizeMini;
+}
+.btn-group > .btn-small {
+ font-size: @fontSizeSmall;
+}
+.btn-group > .btn-large {
+ font-size: @fontSizeLarge;
+}
+
// 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;
+ .border-top-left-radius(@baseBorderRadius);
+ .border-bottom-left-radius(@baseBorderRadius);
}
// 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;
- -webkit-border-bottom-right-radius: 4px;
- -moz-border-radius-bottomright: 4px;
- border-bottom-right-radius: 4px;
+ .border-top-right-radius(@baseBorderRadius);
+ .border-bottom-right-radius(@baseBorderRadius);
}
// 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;
+ .border-top-left-radius(@borderRadiusLarge);
+ .border-bottom-left-radius(@borderRadiusLarge);
}
.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;
+ .border-top-right-radius(@borderRadiusLarge);
+ .border-bottom-right-radius(@borderRadiusLarge);
}
// On hover/focus/active, bring the proper btn to front
@@ -91,24 +100,28 @@
// ----------------------
// Give the line between buttons some depth
-.btn-group > .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
.box-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)");
- *padding-top: 4px;
- *padding-bottom: 4px;
+ *padding-top: 5px;
+ *padding-bottom: 5px;
}
-.btn-group > .btn-mini.dropdown-toggle {
+.btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
+ *padding-top: 2px;
+ *padding-bottom: 2px;
}
-.btn-group > .btn-small.dropdown-toggle {
- *padding-top: 4px;
+.btn-group > .btn-small + .dropdown-toggle {
+ *padding-top: 5px;
*padding-bottom: 4px;
}
-.btn-group > .btn-large.dropdown-toggle {
+.btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
+ *padding-top: 7px;
+ *padding-bottom: 7px;
}
.btn-group.open {
@@ -147,30 +160,23 @@
// Reposition the caret
.btn .caret {
- margin-top: 7px;
+ margin-top: 8px;
margin-left: 0;
}
-.btn:hover .caret,
-.open.btn-group .caret {
- .opacity(100);
-}
// Carets in other button sizes
-.btn-mini .caret {
- margin-top: 5px;
-}
-.btn-small .caret {
+.btn-mini .caret,
+.btn-small .caret,
+.btn-large .caret {
margin-top: 6px;
}
.btn-large .caret {
- margin-top: 6px;
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;
+ border-bottom-width: 5px;
}
@@ -185,7 +191,37 @@
.caret {
border-top-color: @white;
border-bottom-color: @white;
- .opacity(75);
}
}
+
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+ display: inline-block; // makes buttons only take up the width they need
+ .ie7-inline-block();
+}
+.btn-group-vertical > .btn {
+ display: block;
+ float: none;
+ max-width: 100%;
+ .border-radius(0);
+}
+.btn-group-vertical > .btn + .btn {
+ margin-left: 0;
+ margin-top: -1px;
+}
+.btn-group-vertical > .btn:first-child {
+ .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
+}
+.btn-group-vertical > .btn:last-child {
+ .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
+}
+.btn-group-vertical > .btn-large:first-child {
+ .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
+}
+.btn-group-vertical > .btn-large:last-child {
+ .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
+}
View
189 symposion_project/static/bootstrap/less/buttons.less
@@ -1,5 +1,6 @@
-// BUTTON STYLES
-// -------------
+//
+// Buttons
+// --------------------------------------------------
// Base styles
@@ -9,116 +10,125 @@
.btn {
display: inline-block;
.ie7-inline-block();
- padding: 4px 10px 4px;
+ padding: 4px 12px;
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;
- .buttonBackground(@btnBackground, @btnBackgroundHighlight);
+ .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%);
- .border-radius(4px);
+ .border-radius(@baseBorderRadius);
.ie7-restore-left-whitespace(); // Give IE7 some love
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
-}
-// 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;
+ // Hover state
+ &:hover {
+ color: @grayDark;
+ text-decoration: none;
+ background-position: 0 -15px;
- // transition is only when going to hover, otherwise the background
- // behind the gradient (there for IE<=9 fallback) gets mismatched
- .transition(background-position .1s linear);
-}
+ // transition is only when going to hover, otherwise the background
+ // behind the gradient (there for IE<=9 fallback) gets mismatched
+ .transition(background-position .1s linear);
+ }
-// Focus state for keyboard and accessibility
-.btn:focus {
- .tab-focus();
-}
+ // Focus state for keyboard and accessibility
+ &:focus {
+ .tab-focus();
+ }
-// Active state
-.btn.active,
-.btn:active {
- background-color: darken(@white, 10%);
- background-color: darken(@white, 15%) e("\9");
- background-image: none;
- outline: 0;
- .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
-}
+ // Active state
+ &.active,
+ &:active {
+ background-image: none;
+ outline: 0;
+ .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+ }
+
+ // Disabled state
+ &.disabled,
+ &[disabled] {
+ cursor: default;
+ background-image: none;
+ .opacity(65);
+ .box-shadow(none);
+ }
-// Disabled state
-.btn.disabled,
-.btn[disabled] {
- cursor: default;
- background-color: darken(@white, 10%);
- background-image: none;
- .opacity(65);
- .box-shadow(none);
}
+
// Button Sizes
// --------------------------------------------------
// Large
.btn-large {
- padding: 9px 14px;
- font-size: @baseFontSize + 2px;
- line-height: normal;
- .border-radius(5px);
+ padding: @paddingLarge;
+ font-size: @fontSizeLarge;
+ .border-radius(@borderRadiusLarge);
}
-.btn-large [class^="icon-"] {
- margin-top: 1px;
+.btn-large [class^="icon-"],
+.btn-large [class*=" icon-"] {
+ margin-top: 4px;
}
// Small
.btn-small {
- padding: 5px 9px;
- font-size: @baseFontSize - 2px;
- line-height: @baseLineHeight - 2px;
+ padding: @paddingSmall;
+ font-size: @fontSizeSmall;
+ .border-radius(@borderRadiusSmall);
+}
+.btn-small [class^="icon-"],
+.btn-small [class*=" icon-"] {
+ margin-top: 0;
}
-.btn-small [class^="icon-"] {
+.btn-mini [class^="icon-"],
+.btn-mini [class*=" icon-"] {
margin-top: -1px;
}
// Mini
.btn-mini {
- padding: 2px 6px;
- font-size: @baseFontSize - 2px;
- line-height: @baseLineHeight - 4px;
+ padding: @paddingMini;
+ font-size: @fontSizeMini;
+ .border-radius(@borderRadiusSmall);
}
+// Block button
+// -------------------------
+
+.btn-block {
+ display: block;
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ .box-sizing(border-box);
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+ margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ &.btn-block {
+ width: 100%;
+ }
+}
+
+
+
// Alternate buttons
// --------------------------------------------------
-// Set text color
-// -------------------------
-.btn-primary,
-.btn-primary:hover,
-.btn-warning,
-.btn-warning:hover,
-.btn-danger,
-.btn-danger:hover,
-.btn-success,
-.btn-success:hover,
-.btn-info,
-.btn-info:hover,
-.btn-inverse,
-.btn-inverse:hover {
- 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,
.btn-warning.active,
@@ -133,8 +143,8 @@
// -------------------------
.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);
+ border-color: #c5c5c5;
+ border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
}
.btn-primary {
.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
@@ -174,8 +184,9 @@ input[type="submit"].btn {
}
// IE7 has some default padding on button controls
- *padding-top: 2px;
- *padding-bottom: 2px;
+ *padding-top: 3px;
+ *padding-bottom: 3px;
+
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
@@ -189,3 +200,31 @@ input[type="submit"].btn {
*padding-bottom: 1px;
}
}
+
+
+// Link buttons
+// --------------------------------------------------
+
+// Make a button look and behave like a link
+.btn-link,
+.btn-link:active,
+.btn-link[disabled] {
+ background-color: transparent;
+ background-image: none;
+ .box-shadow(none);
+}
+.btn-link {
+ border-color: transparent;
+ cursor: pointer;
+ color: @linkColor;
+ .border-radius(0);
+}
+.btn-link:hover {
+ color: @linkColorHover;
+ text-decoration: underline;
+ background-color: transparent;
+}
+.btn-link[disabled]:hover {
+ color: @grayDark;
+ text-decoration: none;
+}
View
46 symposion_project/static/bootstrap/less/carousel.less
@@ -1,5 +1,7 @@
-// CAROUSEL
-// --------
+//
+// Carousel
+// --------------------------------------------------
+
.carousel {
position: relative;
@@ -13,50 +15,50 @@
position: relative;
}
-.carousel {
+.carousel-inner {
- .item {
+ > .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
}
// Account for jankitude on images
- .item > img {
+ > .item > img {
display: block;
line-height: 1;
}
- .active,
- .next,
- .prev { display: block; }
+ > .active,
+ > .next,
+ > .prev { display: block; }
- .active {
+ > .active {
left: 0;
}
- .next,
- .prev {
+ > .next,
+ > .prev {
position: absolute;
top: 0;
width: 100%;
}
- .next {
+ > .next {
left: 100%;
}
- .prev {
+ > .prev {
left: -100%;
}
- .next.left,
- .prev.right {
+ > .next.left,
+ > .prev.right {
left: 0;
}
- .active.left {
+ > .active.left {
left: -100%;
}
- .active.right {
+ > .active.right {
left: 100%;
}
@@ -103,6 +105,7 @@
}
}
+
// Caption for text below images
// -----------------------------
@@ -111,11 +114,18 @@
left: 0;
right: 0;
bottom: 0;
- padding: 10px 15px 5px;
+ padding: 15px;
background: @grayDark;
background: rgba(0,0,0,.75);
}
.carousel-caption h4,
.carousel-caption p {
color: @white;
+ line-height: @baseLineHeight;
+}
+.carousel-caption h4 {
+ margin: 0 0 5px;
+}
+.carousel-caption p {
+ margin-bottom: 0;
}
View
6 symposion_project/static/bootstrap/less/close.less
@@ -1,5 +1,7 @@
-// CLOSE ICONS
-// -----------
+//
+// Close icons
+// --------------------------------------------------
+
.close {
float: right;
View
16 symposion_project/static/bootstrap/less/code.less
@@ -1,13 +1,14 @@
-// Code.less
-// Code typography styles for the <code> and <pre> elements
-// --------------------------------------------------------
+//
+// Code (inline and blocK)
+// --------------------------------------------------
+
// Inline and block code styles
code,
pre {
padding: 0 3px 2px;
#font > #family > .monospace;
- font-size: @baseFontSize - 1;
+ font-size: @baseFontSize - 2;
color: @grayDark;
.border-radius(3px);
}
@@ -18,14 +19,15 @@ code {
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
+ white-space: nowrap;
}
// Blocks of code
pre {
display: block;
padding: (@baseLineHeight - 1) / 2;
margin: 0 0 @baseLineHeight / 2;
- font-size: @baseFontSize * .925; // 13px to 12px
+ font-size: @baseFontSize - 1; // 14px to 13px
line-height: @baseLineHeight;
word-break: break-all;
word-wrap: break-word;
@@ -34,7 +36,7 @@ pre {
background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8
border: 1px solid rgba(0,0,0,.15);
- .border-radius(4px);
+ .border-radius(@baseBorderRadius);
// Make prettyprint styles more spaced out for readability
&.prettyprint {
@@ -45,6 +47,8 @@ pre {
code {
padding: 0;
color: inherit;
+ white-space: pre;
+ white-space: pre-wrap;
background-color: transparent;
border: 0;
}
View
6 symposion_project/static/bootstrap/less/component-animations.less
@@ -1,5 +1,7 @@
-// COMPONENT ANIMATIONS
-// --------------------
+//
+// Component animations
+// --------------------------------------------------
+
.fade {
opacity: 0;
View
126 symposion_project/static/bootstrap/less/dropdowns.less
@@ -1,5 +1,7 @@
-// DROPDOWN MENUS
-// --------------
+//
+// Dropdown menus
+// --------------------------------------------------
+
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
@@ -26,18 +28,13 @@
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
- .opacity(30);
}
// Place the caret
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
}
-.dropdown:hover .caret,
-.open .caret {
- .opacity(100);
-}
// The dropdown menu (ul)
// ----------------------
@@ -49,15 +46,15 @@
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
- padding: 4px 0;
- margin: 1px 0 0; // override default ul
+ padding: 5px 0;
+ margin: 2px 0 0; // override default ul
list-style: none;
background-color: @dropdownBackground;
- border: 1px solid #ccc;
- border: 1px solid rgba(0,0,0,.2);
+ border: 1px solid #ccc; // Fallback for IE7-8
+ border: 1px solid @dropdownBorder;
*border-right-width: 2px;
*border-bottom-width: 2px;
- .border-radius(5px);
+ .border-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
@@ -75,9 +72,9 @@
}
// Links within the dropdown menu
- a {
+ li > a {
display: block;
- padding: 3px 15px;
+ padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @baseLineHeight;
@@ -89,11 +86,37 @@
// Hover state
// -----------
.dropdown-menu li > a:hover,
+.dropdown-menu li > a:focus,
+.dropdown-submenu:hover > a {
+ text-decoration: none;
+ color: @dropdownLinkColorHover;
+ #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
+}
+
+// Active state
+// ------------
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
- color: @dropdownLinkColorHover;
+ color: @dropdownLinkColorActive;
text-decoration: none;
- background-color: @dropdownLinkBackgroundHover;
+ outline: 0;
+ #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
+}
+
+// Disabled state
+// --------------
+// Gray out text and ensure the hover state remains gray
+.dropdown-menu .disabled > a,
+.dropdown-menu .disabled > a:hover {
+ color: @grayLight;
+}
+// Nuke hover effects
+.dropdown-menu .disabled > a:hover {
+ text-decoration: none;
+ background-color: transparent;
+ background-image: none; // Remove CSS gradient
+ .reset-filter();
+ cursor: default;
}
// Open state for the dropdown
@@ -125,7 +148,7 @@
.caret {
border-top: 0;
border-bottom: 4px solid @black;
- content: "\2191";
+ content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
@@ -135,9 +158,76 @@
}
}
+// Sub menus
+// ---------------------------
+.dropdown-submenu {
+ position: relative;
+}
+// Default dropdowns
+.dropdown-submenu > .dropdown-menu {
+ top: 0;
+ left: 100%;
+ margin-top: -6px;
+ margin-left: -1px;
+ .border-radius(0 6px 6px 6px);
+}
+.dropdown-submenu:hover > .dropdown-menu {
+ display: block;
+}
+
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+ top: auto;
+ bottom: 0;
+ margin-top: 0;
+ margin-bottom: -2px;
+ .border-radius(5px 5px 5px 0);
+}
+
+// Caret to indicate there is a submenu
+.dropdown-submenu > a:after {
+ display: block;
+ content: " ";
+ float: right;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ border-left-color: darken(@dropdownBackground, 20%);
+ margin-top: 5px;
+ margin-right: -10px;
+}
+.dropdown-submenu:hover > a:after {
+ border-left-color: @dropdownLinkColorHover;
+}
+
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+ // Undo the float
+ // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+ float: none;
+
+ // Positioning the submenu
+ > .dropdown-menu {
+ left: -100%;
+ margin-left: 10px;
+ .border-radius(6px 0 6px 6px);
+ }
+}
+
+// Tweak nav headers
+// -----------------
+// Increase padding from 15px to 20px on sides
+.dropdown .dropdown-menu .nav-header {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
// Typeahead
// ---------
.typeahead {
+ z-index: 1051;
margin-top: 2px; // give it some space to breathe
- .border-radius(4px);
+ .border-radius(@baseBorderRadius);
}
View
238 symposion_project/static/bootstrap/less/forms.less
@@ -1,6 +1,6 @@
-// Forms.less
-// Base styles for various input types, form layouts, and states
-// -------------------------------------------------------------
+//
+// Forms
+// --------------------------------------------------
// GENERAL STYLES
@@ -22,7 +22,7 @@ legend {
display: block;
width: 100%;
padding: 0;
- margin-bottom: @baseLineHeight * 1.5;
+ margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
@@ -80,18 +80,21 @@ input[type="color"],
.uneditable-input {
display: inline-block;
height: @baseLineHeight;
- padding: 4px;
- margin-bottom: 9px;
+ padding: 4px 6px;
+ margin-bottom: @baseLineHeight / 2;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray;
+ .border-radius(@inputBorderRadius);
+ vertical-align: middle;
}
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
-textarea {
- width: 210px;
+textarea,
+.uneditable-input {
+ width: 206px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows
textarea {
@@ -116,10 +119,8 @@ input[type="color"],
.uneditable-input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
- .border-radius(@inputBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
- @transition: border linear .2s, box-shadow linear .2s;
- .transition(@transition);
+ .transition(~"border linear .2s, box-shadow linear .2s");
// Focus state
&:focus {
@@ -133,13 +134,15 @@ input[type="color"],
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
- margin: 3px 0;
+ margin: 4px 0 0;
*margin-top: 0; /* IE7 */
+ margin-top: 1px \9; /* IE8-9 */
line-height: normal;
- cursor: pointer;
}
-// Reset width of input buttons, radios, checkboxes
+// Reset width of input images, buttons, radios, checkboxes
+input[type="file"],
+input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
@@ -148,24 +151,19 @@ input[type="checkbox"] {
width: auto; // Override of generic input selector
}
-// Make uneditable textareas behave like a textarea
-.uneditable-textarea {
- width: auto;
- height: auto;
-}
-
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
- height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+ height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
- line-height: 28px;
+ line-height: @inputHeight;
}
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
- border: 1px solid #bbb;
+ border: 1px solid @inputBorder;
+ background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
// Make multiple select elements height not fixed
@@ -183,20 +181,55 @@ input[type="checkbox"]:focus {
}
+// Uneditable inputs
+// -------------------------
+
+// Make uneditable inputs look inactive
+.uneditable-input,
+.uneditable-textarea {
+ color: @grayLight;
+ background-color: darken(@inputBackground, 1%);
+ border-color: @inputBorder;
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+ cursor: not-allowed;
+}
+
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+ white-space: nowrap;
+}
+
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea {
+ width: auto;
+ height: auto;
+}
+
+
+// Placeholder
+// -------------------------
+
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
+input,
+textarea {
+ .placeholder();
+}
+
// CHECKBOXES & RADIOS
// -------------------
// 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;
+ min-height: @baseLineHeight; // clear the floating input if there is no label text
+ padding-left: 20px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
- margin-left: -18px;
+ margin-left: -20px;
}
// Move the options list down to align with labels
@@ -250,6 +283,10 @@ textarea[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
display: inline-block;
@@ -260,8 +297,27 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
+// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);
+// Control row for multiple inputs per line
+.controls-row {
+ .clearfix(); // Clear the float from controls
+}
+
+// Float to collapse white-space for proper grid alignment
+.controls-row [class*="span"],
+// Redeclare the fluid grid collapse since we undo the float for inputs
+.row-fluid .controls-row [class*="span"] {
+ float: left;
+}
+// Explicity set top padding on all checkboxes/radios, not just first-child
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"] {
+ padding-top: 5px;
+}
+
+
// DISABLED STATE
@@ -276,7 +332,6 @@ select[readonly],
textarea[readonly] {
cursor: not-allowed;
background-color: @inputDisabledBackground;
- border-color: #ddd;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
@@ -304,17 +359,22 @@ input[type="checkbox"][readonly] {
.control-group.success {
.formFieldState(@successText, @successText, @successBackground);
}
+// Success
+.control-group.info {
+ .formFieldState(@infoText, @infoText, @infoBackground);
+}
// HTML5 invalid states
// Shares styles with the .control-group.error above
-input:focus:required:invalid,
-textarea:focus:required:invalid,
-select:focus:required:invalid {
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
- .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
+ @shadow: 0 0 6px lighten(#ee5f5b, 20%);
+ .box-shadow(@shadow);
}
}
@@ -332,27 +392,14 @@ select:focus:required:invalid {
.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 {
- 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;
- .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
-}
-
-// Placeholder text gets special styles; can't be bundled together though for some reason
-.placeholder();
-
// HELP TEXT
// ---------
.help-block,
.help-inline {
- color: @gray; // lighten the text some for contrast
+ color: lighten(@textColor, 15%); // lighten the text some for contrast
}
.help-block {
@@ -373,80 +420,101 @@ select:focus:required:invalid {
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
-.input-prepend,
-.input-append {
+.input-append,
+.input-prepend {
margin-bottom: 5px;
+ font-size: 0; // white space collapse hack
+ white-space: nowrap; // Prevent span and input from separating
+
+ // Reset the white space collapse hack
+ input,
+ select,
+ .uneditable-input,
+ .dropdown-menu {
+ font-size: @baseFontSize;
+ }
+
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;
- vertical-align: middle;
+ vertical-align: top;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
// Make input on top when focused so blue border and shadow always show
&:focus {
z-index: 2;
}
}
- .uneditable-input {
- border-left-color: #ccc;
- }
.add-on {
display: inline-block;
width: auto;
height: @baseLineHeight;
min-width: 16px;
padding: 4px 5px;
+ font-size: @baseFontSize;
font-weight: normal;
line-height: @baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 @white;
- vertical-align: middle;
background-color: @grayLighter;
border: 1px solid #ccc;
}
.add-on,
- .btn {
- margin-left: -1px;
+ .btn,
+ .btn-group > .dropdown-toggle {
+ vertical-align: top;
.border-radius(0);
}
.active {
background-color: lighten(@green, 30);
border-color: @green;
}
}
+
.input-prepend {
.add-on,
.btn {
margin-right: -1px;
}
.add-on:first-child,
.btn:first-child {
+ // FYI, `.btn:first-child` accounts for a button group that's prepended
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
}
+
.input-append {
input,
select,
.uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
+ + .btn-group .btn:last-child {
+ .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
+ }
}
- .uneditable-input {
- border-right-color: #ccc;
- border-left-color: #eee;
+ .add-on,
+ .btn,
+ .btn-group {
+ margin-left: -1px;
}
.add-on:last-child,
- .btn:last-child {
+ .btn:last-child,
+ .btn-group:last-child > .dropdown-toggle {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
+
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
input,
select,
.uneditable-input {
.border-radius(0);
+ + .btn-group .btn {
+ .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
+ }
}
.add-on:first-child,
.btn:first-child {
@@ -458,21 +526,44 @@ select:focus:required:invalid {
margin-left: -1px;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
+ .btn-group:first-child {
+ margin-left: 0;
+ }
}
+
// SEARCH FORM
// -----------
-.search-query {
+input.search-query {
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
- .border-radius(14px);
+ margin-bottom: 0; // Remove the default margin on all inputs
+ .border-radius(15px);
+}
+
+/* Allow for input prepend/append in search forms */
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+ .border-radius(0); // Override due to specificity
+}
+.form-search .input-append .search-query {
+ .border-radius(14px 0 0 14px);
}
+.form-search .input-append .btn {
+ .border-radius(0 14px 14px 0);
+}
+.form-search .input-prepend .search-query {
+ .border-radius(0 14px 14px 0);
+}
+.form-search .input-prepend .btn {
+ .border-radius(14px 0 0 14px);
+}
+
@@ -495,14 +586,17 @@ select:focus:required:invalid {
display: inline-block;
.ie7-inline-block();
margin-bottom: 0;
+ vertical-align: middle;
}
// Re-hide hidden elements due to specifity
.hide {
display: none;
}
}
.form-search label,
-.form-inline label {
+.form-inline label,
+.form-search .btn-group,
+.form-inline .btn-group {
display: inline-block;
}
// Remove margin for input-prepend/-append
@@ -555,7 +649,7 @@ legend + .control-group {
// Float the labels left
.control-label {
float: left;
- width: 140px;
+ width: @horizontalComponentOffset - 20;
padding-top: 5px;
text-align: right;
}
@@ -565,19 +659,29 @@ legend + .control-group {
// don't inherit the margin of the parent, in this case .controls
*display: inline-block;
*padding-left: 20px;
- margin-left: 160px;
+ margin-left: @horizontalComponentOffset;
*margin-left: 0;
&:first-child {
- *padding-left: 160px;
+ *padding-left: @horizontalComponentOffset;
}
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
- margin-top: @baseLineHeight / 2;
margin-bottom: 0;
}
+ // And apply it only to .help-block instances that follow a form control
+ input,
+ select,
+ textarea,
+ .uneditable-input,
+ .input-prepend,
+ .input-append {
+ + .help-block {
+ margin-top: @baseLineHeight / 2;
+ }
+ }
// Move over buttons in .form-actions to align with .controls
.form-actions {
- padding-left: 160px;
+ padding-left: @horizontalComponentOffset;
}
}
View
18 symposion_project/static/bootstrap/less/grid.less
@@ -1,5 +1,21 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
// Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth);
// Fluid (940px)
-#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
+#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
+
+// Reset utility classes due to specificity
+[class*="span"].hide,
+.row-fluid [class*="span"].hide {
+ display: none;
+}
+
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+ float: right;
+}
View
17 symposion_project/static/bootstrap/less/hero-unit.less
@@ -1,9 +1,15 @@
-// HERO UNIT
-// ---------
+//
+// Hero unit
+// --------------------------------------------------
+
.hero-unit {
padding: 60px;
margin-bottom: 30px;
+ font-size: 18px;
+ font-weight: 200;
+ line-height: @baseLineHeight * 1.5;
+ color: @heroUnitLeadColor;
background-color: @heroUnitBackground;
.border-radius(6px);
h1 {
@@ -13,10 +19,7 @@
color: @heroUnitHeadingColor;
letter-spacing: -1px;
}
- p {
- font-size: 18px;
- font-weight: 200;
- line-height: @baseLineHeight * 1.5;
- color: @heroUnitLeadColor;
+ li {
+ line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less
}
}
View
35 symposion_project/static/bootstrap/less/labels-badges.less
@@ -1,9 +1,13 @@
-// LABELS & BADGES
-// ---------------
+//
+// Labels and badges
+// --------------------------------------------------
+
// Base classes
.label,
.badge {
+ display: inline-block;
+ padding: 2px 4px;
font-size: @baseFontSize * .846;
font-weight: bold;
line-height: 14px; // ensure proper line-height if floated
@@ -15,14 +19,22 @@
}
// Set unique padding and border-radii
.label {
- padding: 1px 4px 2px;
.border-radius(3px);
}
.badge {
- padding: 1px 9px 2px;
+ padding-left: 9px;
+ padding-right: 9px;
.border-radius(9px);
}
+// Empty labels/badges collapse
+.label,
+.badge {
+ &:empty {
+ display: none;
+ }
+}
+
// Hover state, but only for links
a {
&.label:hover,
@@ -53,3 +65,18 @@ a {
&-inverse { background-color: @grayDark; }
&-inverse[href] { background-color: darken(@grayDark, 10%); }
}
+
+// Quick fix for labels/badges in buttons
+.btn {
+ .label,
+ .badge {
+ position: relative;
+ top: -1px;
+ }
+}
+.btn-mini {
+ .label,
+ .badge {
+ top: 0;
+ }
+}
View
3 symposion_project/static/bootstrap/less/layouts.less
@@ -1,7 +1,6 @@
//
// Layouts
-// Fixed-width and fluid (with sidebar) layouts
-// --------------------------------------------
+// --------------------------------------------------
// Container (centered, fixed-width layouts)
View
55 symposion_project/static/bootstrap/less/media.less
@@ -0,0 +1,55 @@
+// Media objects
+// Source: http://stubbornella.org/content/?p=497
+// --------------------------------------------------
+
+
+// Common styles
+// -------------------------
+
+// Clear the floats
+.media,
+.media-body {
+ overflow: hidden;
+ *overflow: visible;
+ zoom: 1;
+}
+
+// Proper spacing between instances of .media
+.media,
+.media .media {
+ margin-top: 15px;
+}
+.media:first-child {
+ margin-top: 0;
+}
+
+// For images and videos, set to block
+.media-object {
+ display: block;
+}
+
+// Reset margins on headings for tighter default spacing
+.media-heading {
+ margin: 0 0 5px;
+}
+
+
+// Media image alignment
+// -------------------------
+
+.media .pull-left {
+ margin-right: 10px;
+}
+.media .pull-right {
+ margin-left: 10px;
+}
+
+
+// Media list variation
+// -------------------------
+
+// Undo default ul/ol styles
+.media-list {
+ margin-left: 0;
+ list-style: none;
+}
View
192 symposion_project/static/bootstrap/less/mixins.less
@@ -1,6 +1,6 @@
-// Mixins.less
-// Snippets of reusable CSS to develop faster and keep code readable
-// -----------------------------------------------------------------
+//
+// Mixins
+// --------------------------------------------------
// UTILITY MIXINS
@@ -15,6 +15,9 @@
&:after {
display: table;
content: "";
+ // Fixes Opera/contenteditable bug:
+ // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+ line-height: 0;
}
&:after {
clear: both;
@@ -62,10 +65,6 @@
.ie7-restore-right-whitespace() {
*margin-right: .3em;
-
- &:last-child {
- *margin-left: 0;
- }
}
// Sizing shortcuts
@@ -155,15 +154,16 @@
.input-block-level {
display: block;
width: 100%;
- min-height: 28px; // Make inputs at least the height of their button counterpart
+ min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
+
// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color
- > label,
+ .control-label,
.help-block,
.help-inline {
color: @textColor;
@@ -175,10 +175,16 @@
select,
textarea {
color: @textColor;
+ }
+ input,
+ select,
+ textarea {
border-color: @borderColor;
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@borderColor, 10%);
- .box-shadow(0 0 6px lighten(@borderColor, 20%));
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
+ .box-shadow(@shadow);
}
}
// Give a small background color for input-prepend/-append
@@ -202,6 +208,46 @@
border-radius: @radius;
}
+// Single Corner Border Radius
+.border-top-left-radius(@radius) {
+ -webkit-border-top-left-radius: @radius;
+ -moz-border-radius-topleft: @radius;
+ border-top-left-radius: @radius;
+}
+.border-top-right-radius(@radius) {
+ -webkit-border-top-right-radius: @radius;
+ -moz-border-radius-topright: @radius;
+ border-top-right-radius: @radius;
+}
+.border-bottom-right-radius(@radius) {
+ -webkit-border-bottom-right-radius: @radius;
+ -moz-border-radius-bottomright: @radius;
+ border-bottom-right-radius: @radius;
+}
+.border-bottom-left-radius(@radius) {
+ -webkit-border-bottom-left-radius: @radius;
+ -moz-border-radius-bottomleft: @radius;
+ border-bottom-left-radius: @radius;
+}
+
+// Single Side Border Radius
+.border-top-radius(@radius) {
+ .border-top-right-radius(@radius);
+ .border-top-left-radius(@radius);
+}
+.border-right-radius(@radius) {
+ .border-top-right-radius(@radius);
+ .border-bottom-right-radius(@radius);
+}
+.border-bottom-radius(@radius) {
+ .border-bottom-right-radius(@radius);
+ .border-bottom-left-radius(@radius);
+}
+.border-left-radius(@radius) {
+ .border-top-left-radius(@radius);
+ .border-bottom-left-radius(@radius);
+}
+
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
@@ -213,10 +259,15 @@
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
- -ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
+.transition-delay(@transition-delay) {
+ -webkit-transition-delay: @transition-delay;
+ -moz-transition-delay: @transition-delay;
+ -o-transition-delay: @transition-delay;
+ transition-delay: @transition-delay;
+}
// Transformations
.rotate(@degrees) {
@@ -243,16 +294,16 @@
.skew(@x, @y) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
- -ms-transform: skew(@x, @y);
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
+ -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
.translate3d(@x, @y, @z) {
- -webkit-transform: translate(@x, @y, @z);
- -moz-transform: translate(@x, @y, @z);
- -ms-transform: translate(@x, @y, @z);
- -o-transform: translate(@x, @y, @z);
- transform: translate(@x, @y, @z);
+ -webkit-transform: translate3d(@x, @y, @z);
+ -moz-transform: translate3d(@x, @y, @z);
+ -o-transform: translate3d(@x, @y, @z);
+ transform: translate3d(@x, @y, @z);
}
// Backface visibility
@@ -262,7 +313,6 @@
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
- -ms-backface-visibility: @visibility;
backface-visibility: @visibility;
}
@@ -275,7 +325,7 @@
}
// Background sizing
-.background-size(@size){
+.background-size(@size) {
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
@@ -287,7 +337,6 @@
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
- -ms-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
@@ -350,7 +399,9 @@
}
// Gradient Bar Colors for buttons and alerts
-.gradientBar(@primaryColor, @secondaryColor) {
+.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+ color: @textColor;
+ text-shadow: @textShadow;
#gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
@@ -361,60 +412,54 @@
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+ background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(top, @startColor, @endColor); // The standard
+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
+ background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
- background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
- .radial(@innerColor: #555, @outerColor: #333) {
+ .radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
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;
}
- .striped(@color, @angle: -45deg) {
+ .striped(@color: #555, @angle: 45deg) {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-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: -moz-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: -ms-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: -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);
}
@@ -448,14 +493,15 @@
// Button backgrounds
// ------------------
-.buttonBackground(@startColor, @endColor) {
+.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
- .gradientBar(@startColor, @endColor);
+ .gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter();
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {
+ color: @textColor;
background-color: @endColor;
*background-color: darken(@endColor, 5%);
}
@@ -475,43 +521,7 @@
margin-top: (@navbarHeight - @elementHeight) / 2;
}
-// Popover arrows
-// -------------------------
-// For tipsies and popovers
-#popoverArrow {
- .top(@arrowWidth: 5px, @color: @black) {
- bottom: 0;
- left: 50%;
- margin-left: -@arrowWidth;
- border-left: @arrowWidth solid transparent;
- border-right: @arrowWidth solid transparent;
- border-top: @arrowWidth solid @color;
- }
- .left(@arrowWidth: 5px, @color: @black) {
- top: 50%;
- right: 0;
- margin-top: -@arrowWidth;
- border-top: @arrowWidth solid transparent;
- border-bottom: @arrowWidth solid transparent;
- border-left: @arrowWidth solid @color;
- }
- .bottom(@arrowWidth: 5px, @color: @black) {
- top: 0;
- left: 50%;
- margin-left: -@arrowWidth;
- border-left: @arrowWidth solid transparent;
- border-right: @arrowWidth solid transparent;
- border-bottom: @arrowWidth solid @color;
- }
- .right(@arrowWidth: 5px, @color: @black) {
- top: 50%;
- left: 0;
- margin-top: -@arrowWidth;
- border-top: @arrowWidth solid transparent;
- border-bottom: @arrowWidth solid transparent;
- border-right: @arrowWidth solid @color;
- }
-}
+
// Grid System
// -----------
@@ -574,11 +584,13 @@