Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

demo for bootstrap v2.0 in LESS version

  • Loading branch information...
commit 7b0b9973ec2409b8537c79d7a06cc2c1f3bdd708 1 parent af8ccdb
Marc Sygrove authored

Showing 74 changed files with 6,706 additions and 5 deletions. Show diff stats Hide diff stats

  1. +4 5 README.md
  2. +28 0 css/less2/bootstrap/accordion.less
  3. +70 0 css/less2/bootstrap/alerts.less
  4. +62 0 css/less2/bootstrap/bootstrap.less
  5. +22 0 css/less2/bootstrap/breadcrumbs.less
  6. +147 0 css/less2/bootstrap/button-groups.less
  7. +165 0 css/less2/bootstrap/buttons.less
  8. +121 0 css/less2/bootstrap/carousel.less
  9. +18 0 css/less2/bootstrap/close.less
  10. +44 0 css/less2/bootstrap/code.less
  11. +18 0 css/less2/bootstrap/component-animations.less
  12. +131 0 css/less2/bootstrap/dropdowns.less
  13. +515 0 css/less2/bootstrap/forms.less
  14. +8 0 css/less2/bootstrap/grid.less
  15. +20 0 css/less2/bootstrap/hero-unit.less
  16. +16 0 css/less2/bootstrap/labels.less
  17. +17 0 css/less2/bootstrap/layouts.less
  18. +537 0 css/less2/bootstrap/mixins.less
  19. +72 0 css/less2/bootstrap/modals.less
  20. +292 0 css/less2/bootstrap/navbar.less
  21. +344 0 css/less2/bootstrap/navs.less
  22. +30 0 css/less2/bootstrap/pager.less
  23. +55 0 css/less2/bootstrap/pagination.less
  24. +49 0 css/less2/bootstrap/popovers.less
  25. +95 0 css/less2/bootstrap/progress-bars.less
  26. +126 0 css/less2/bootstrap/reset.less
  27. +323 0 css/less2/bootstrap/responsive.less
  28. +29 0 css/less2/bootstrap/scaffolding.less
  29. +156 0 css/less2/bootstrap/sprites.less
  30. +139 0 css/less2/bootstrap/tables.less
  31. +35 0 css/less2/bootstrap/thumbnails.less
  32. +35 0 css/less2/bootstrap/tooltip.less
  33. +217 0 css/less2/bootstrap/type.less
  34. +23 0 css/less2/bootstrap/utilities.less
  35. +99 0 css/less2/bootstrap/variables.less
  36. +17 0 css/less2/bootstrap/wells.less
  37. +9 0 css/less2/custom.less
  38. +56 0 css/less2/jquery-ui-bootstrap/accordion.less
  39. +16 0 css/less2/jquery-ui-bootstrap/autocomplete.less
  40. +130 0 css/less2/jquery-ui-bootstrap/button.less
  41. +285 0 css/less2/jquery-ui-bootstrap/core.less
  42. +234 0 css/less2/jquery-ui-bootstrap/datepicker.less
  43. +122 0 css/less2/jquery-ui-bootstrap/dialog.less
  44. +194 0 css/less2/jquery-ui-bootstrap/icons.less
  45. BIN  css/less2/jquery-ui-bootstrap/images/ui-bg_flat_0_aaaaaa_40x100.png
  46. BIN  css/less2/jquery-ui-bootstrap/images/ui-bg_glass_55_fbf9ee_1x400.png
  47. BIN  css/less2/jquery-ui-bootstrap/images/ui-bg_glass_65_ffffff_1x400.png
  48. BIN  css/less2/jquery-ui-bootstrap/images/ui-bg_glass_75_dadada_1x400.png
  49. BIN  css/less2/jquery-ui-bootstrap/images/ui-bg_glass_75_e6e6e6_1x400.png
  50. BIN  css/less2/jquery-ui-bootstrap/images/ui-bg_glass_75_ffffff_1x400.png
  51. BIN  css/less2/jquery-ui-bootstrap/images/ui-bg_highlight-soft_75_cccccc_1x100.png
  52. BIN  css/less2/jquery-ui-bootstrap/images/ui-bg_inset-soft_95_fef1ec_1x100.png
  53. BIN  css/less2/jquery-ui-bootstrap/images/ui-icons_222222_256x240.png
  54. BIN  css/less2/jquery-ui-bootstrap/images/ui-icons_2e83ff_256x240.png
  55. BIN  css/less2/jquery-ui-bootstrap/images/ui-icons_454545_256x240.png
  56. BIN  css/less2/jquery-ui-bootstrap/images/ui-icons_888888_256x240.png
  57. BIN  css/less2/jquery-ui-bootstrap/images/ui-icons_cd0a0a_256x240.png
  58. BIN  css/less2/jquery-ui-bootstrap/images/ui-icons_f6cf3b_256x240.png
  59. +27 0 css/less2/jquery-ui-bootstrap/jquery-ui-bootstrap.less
  60. +40 0 css/less2/jquery-ui-bootstrap/menu.less
  61. +58 0 css/less2/jquery-ui-bootstrap/mixins.less
  62. +13 0 css/less2/jquery-ui-bootstrap/overlays.less
  63. +24 0 css/less2/jquery-ui-bootstrap/progressbar.less
  64. +77 0 css/less2/jquery-ui-bootstrap/resizable.less
  65. +14 0 css/less2/jquery-ui-bootstrap/selectable.less
  66. +65 0 css/less2/jquery-ui-bootstrap/slider.less
  67. +97 0 css/less2/jquery-ui-bootstrap/tabs.less
  68. +10 0 css/less2/jquery-ui-bootstrap/toolbar.less
  69. +29 0 css/less2/jquery-ui-bootstrap/variables.less
  70. +25 0 css/less2/style.less
  71. +83 0 css/less2/thirdParty/enhanced.less
  72. +135 0 css/less2/thirdParty/ui.daterangepicker.less
  73. +146 0 css/less2/thirdParty/wijmo-theming.less
  74. +738 0 index-less2.html
9 README.md
Source Rendered
@@ -10,13 +10,11 @@ Twitter's Bootstrap was one of my favorite projects to come out of 2011, but hav
10 10 * The ability to theme jQuery UI widgets using Bootstrap styles. Whilst I love jQuery UI, I (like others) find some of the current themes to look a little dated. My hope is that this theme provides a decent alternative for others that feel the same.
11 11
12 12 To clarify, this project doesn't aim or intend to replace Twitter Bootstrap. It merely provides a jQuery UI-compatible theme inspired by Bootstrap's design. It also provides a version of Bootstrap CSS with a few (minor) sections commented out which enable the theme to work along-side it.
13   -
14 13 I welcome any and all feedback as I'd very much like this theme to be as solid as possible.
15 14
16 15 ##Browser-support
17 16
18 17 All modern browsers are targeted by this theme with 'lo-res' experiences (i.e no gradients, border-radius etc.) provided for users using older browsers.
19   -
20 18 There *are* some minor known issues lingering that I'm working on, but the hope is that in time those will all get ironed out.
21 19
22 20 ##jQuery UI support
@@ -27,14 +25,15 @@ This theme targets jQuery UI 1.8.16 and the default version of jQuery included i
27 25 ##Demo
28 26
29 27 For a live preview of the theme, see [http://addyosmani.github.com/jquery-ui-bootstrap](http://addyosmani.github.com/jquery-ui-bootstrap).
30   -
31 28 A [blog post](http://addyosmani.com/blog/jquery-ui-bootstrap/) with some more details about the project is also available.
32 29
33 30 ##LESS
34 31
35 32 LESS version added into the "jquery-ui-bootstrap/css/less" folder, compile the "style.less"
36   -
37 33 "style.less" makes it easier to change the "bootstrap.less" and "jquery-ui-bootstrap"
38   -
39 34 Broke down the jquery ui bootstrap LESS files
40 35
  36 +## Bootstrap 2.0
  37 +in css/less2 contains the less files for bootstrap 2.0
  38 +variables.less contains all the extra colours for jQuery UI Bootstrap
  39 +Try the demo "index-less2.html" still work in progress
28 css/less2/bootstrap/accordion.less
... ... @@ -0,0 +1,28 @@
  1 +// ACCORDION
  2 +// ---------
  3 +
  4 +
  5 +// Parent container
  6 +.accordion {
  7 + margin-bottom: @baseLineHeight;
  8 +}
  9 +
  10 +// Group == heading + body
  11 +.accordion-group {
  12 + margin-bottom: 2px;
  13 + border: 1px solid #e5e5e5;
  14 + .border-radius(4px);
  15 +}
  16 +.accordion-heading {
  17 + border-bottom: 0;
  18 +}
  19 +.accordion-heading .accordion-toggle {
  20 + display: block;
  21 + padding: 8px 15px;
  22 +}
  23 +
  24 +// Inner needs the styles because you can't animate properly with any styles on the element
  25 +.accordion-inner {
  26 + padding: 9px 15px;
  27 + border-top: 1px solid #e5e5e5;
  28 +}
70 css/less2/bootstrap/alerts.less
... ... @@ -0,0 +1,70 @@
  1 +// ALERT STYLES
  2 +// ------------
  3 +
  4 +// Base alert styles
  5 +.alert {
  6 + padding: 8px 35px 8px 14px;
  7 + margin-bottom: @baseLineHeight;
  8 + text-shadow: 0 1px 0 rgba(255,255,255,.5);
  9 + background-color: @warningBackground;
  10 + border: 1px solid @warningBorder;
  11 + .border-radius(4px);
  12 +}
  13 +.alert,
  14 +.alert-heading {
  15 + color: @warningText;
  16 +}
  17 +
  18 +// Adjust close link position
  19 +.alert .close {
  20 + position: relative;
  21 + top: -2px;
  22 + right: -21px;
  23 + line-height: 18px;
  24 +}
  25 +
  26 +// Alternate styles
  27 +// ----------------
  28 +
  29 +.alert-success {
  30 + background-color: @successBackground;
  31 + border-color: @successBorder;
  32 +}
  33 +.alert-success,
  34 +.alert-success .alert-heading {
  35 + color: @successText;
  36 +}
  37 +.alert-danger,
  38 +.alert-error {
  39 + background-color: @errorBackground;
  40 + border-color: @errorBorder;
  41 +}
  42 +.alert-danger,
  43 +.alert-error,
  44 +.alert-danger .alert-heading,
  45 +.alert-error .alert-heading {
  46 + color: @errorText;
  47 +}
  48 +.alert-info {
  49 + background-color: @infoBackground;
  50 + border-color: @infoBorder;
  51 +}
  52 +.alert-info,
  53 +.alert-info .alert-heading {
  54 + color: @infoText;
  55 +}
  56 +
  57 +
  58 +// Block alerts
  59 +// ------------------------
  60 +.alert-block {
  61 + padding-top: 14px;
  62 + padding-bottom: 14px;
  63 +}
  64 +.alert-block > p,
  65 +.alert-block > ul {
  66 + margin-bottom: 0;
  67 +}
  68 +.alert-block p + p {
  69 + margin-top: 5px;
  70 +}
62 css/less2/bootstrap/bootstrap.less
... ... @@ -0,0 +1,62 @@
  1 +/*!
  2 + * Bootstrap v2.0.0
  3 + *
  4 + * Copyright 2012 Twitter, Inc
  5 + * Licensed under the Apache License v2.0
  6 + * http://www.apache.org/licenses/LICENSE-2.0
  7 + *
  8 + * Designed and built with all the love in the world @twitter by @mdo and @fat.
  9 + */
  10 +
  11 +// CSS Reset
  12 +@import "reset.less";
  13 +
  14 +// Core variables and mixins
  15 +@import "variables.less"; // Modify this for custom colors, font-sizes, etc
  16 +@import "mixins.less";
  17 +
  18 +// Grid system and page structure
  19 +@import "scaffolding.less";
  20 +@import "grid.less";
  21 +@import "layouts.less";
  22 +
  23 +// Base CSS
  24 +@import "type.less";
  25 +@import "code.less";
  26 +@import "forms.less";
  27 +@import "tables.less";
  28 +
  29 +// Components: common
  30 +@import "sprites.less";
  31 +@import "dropdowns.less";
  32 +@import "wells.less";
  33 +@import "component-animations.less";
  34 +@import "close.less";
  35 +
  36 +// Components: Buttons & Alerts
  37 +@import "buttons.less";
  38 +@import "button-groups.less";
  39 +@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
  40 +
  41 +// Components: Nav
  42 +@import "navs.less";
  43 +@import "navbar.less";
  44 +@import "breadcrumbs.less";
  45 +@import "pagination.less";
  46 +@import "pager.less";
  47 +
  48 +// Components: Popovers
  49 +@import "modals.less";
  50 +@import "tooltip.less";
  51 +@import "popovers.less";
  52 +
  53 +// Components: Misc
  54 +@import "thumbnails.less";
  55 +@import "labels.less";
  56 +@import "progress-bars.less";
  57 +@import "accordion.less";
  58 +@import "carousel.less";
  59 +@import "hero-unit.less";
  60 +
  61 +// Utility classes
  62 +@import "utilities.less"; // Has to be last to override when necessary
22 css/less2/bootstrap/breadcrumbs.less
... ... @@ -0,0 +1,22 @@
  1 +// BREADCRUMBS
  2 +// -----------
  3 +
  4 +.breadcrumb {
  5 + padding: 7px 14px;
  6 + margin: 0 0 @baseLineHeight;
  7 + #gradient > .vertical(@white, #f5f5f5);
  8 + border: 1px solid #ddd;
  9 + .border-radius(3px);
  10 + .box-shadow(inset 0 1px 0 @white);
  11 + li {
  12 + display: inline;
  13 + text-shadow: 0 1px 0 @white;
  14 + }
  15 + .divider {
  16 + padding: 0 5px;
  17 + color: @grayLight;
  18 + }
  19 + .active a {
  20 + color: @grayDark;
  21 + }
  22 +}
147 css/less2/bootstrap/button-groups.less
... ... @@ -0,0 +1,147 @@
  1 +// BUTTON GROUPS
  2 +// -------------
  3 +
  4 +
  5 +// Make the div behave like a button
  6 +.btn-group {
  7 + position: relative;
  8 + .clearfix(); // clears the floated buttons
  9 + .ie7-restore-left-whitespace();
  10 +}
  11 +
  12 +// Space out series of button groups
  13 +.btn-group + .btn-group {
  14 + margin-left: 5px;
  15 +}
  16 +
  17 +// Optional: Group multiple button groups together for a toolbar
  18 +.btn-toolbar {
  19 + margin-top: @baseLineHeight / 2;
  20 + margin-bottom: @baseLineHeight / 2;
  21 + .btn-group {
  22 + display: inline-block;
  23 + .ie7-inline-block();
  24 + }
  25 +}
  26 +
  27 +// Float them, remove border radius, then re-add to first and last elements
  28 +.btn-group .btn {
  29 + position: relative;
  30 + float: left;
  31 + margin-left: -1px;
  32 + .border-radius(0);
  33 +}
  34 +// 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
  35 +.btn-group .btn:first-child {
  36 + margin-left: 0;
  37 + -webkit-border-top-left-radius: 4px;
  38 + -moz-border-radius-topleft: 4px;
  39 + border-top-left-radius: 4px;
  40 + -webkit-border-bottom-left-radius: 4px;
  41 + -moz-border-radius-bottomleft: 4px;
  42 + border-bottom-left-radius: 4px;
  43 +}
  44 +.btn-group .btn:last-child,
  45 +.btn-group .dropdown-toggle {
  46 + -webkit-border-top-right-radius: 4px;
  47 + -moz-border-radius-topright: 4px;
  48 + border-top-right-radius: 4px;
  49 + -webkit-border-bottom-right-radius: 4px;
  50 + -moz-border-radius-bottomright: 4px;
  51 + border-bottom-right-radius: 4px;
  52 +}
  53 +// Reset corners for large buttons
  54 +.btn-group .btn.large:first-child {
  55 + margin-left: 0;
  56 + -webkit-border-top-left-radius: 6px;
  57 + -moz-border-radius-topleft: 6px;
  58 + border-top-left-radius: 6px;
  59 + -webkit-border-bottom-left-radius: 6px;
  60 + -moz-border-radius-bottomleft: 6px;
  61 + border-bottom-left-radius: 6px;
  62 +}
  63 +.btn-group .btn.large:last-child,
  64 +.btn-group .large.dropdown-toggle {
  65 + -webkit-border-top-right-radius: 6px;
  66 + -moz-border-radius-topright: 6px;
  67 + border-top-right-radius: 6px;
  68 + -webkit-border-bottom-right-radius: 6px;
  69 + -moz-border-radius-bottomright: 6px;
  70 + border-bottom-right-radius: 6px;
  71 +}
  72 +
  73 +// On hover/focus/active, bring the proper btn to front
  74 +.btn-group .btn:hover,
  75 +.btn-group .btn:focus,
  76 +.btn-group .btn:active,
  77 +.btn-group .btn.active {
  78 + z-index: 2;
  79 +}
  80 +
  81 +// On active and open, don't show outline
  82 +.btn-group .dropdown-toggle:active,
  83 +.btn-group.open .dropdown-toggle {
  84 + outline: 0;
  85 +}
  86 +
  87 +
  88 +
  89 +// Split button dropdowns
  90 +// ----------------------
  91 +
  92 +// Give the line between buttons some depth
  93 +.btn-group .dropdown-toggle {
  94 + padding-left: 8px;
  95 + padding-right: 8px;
  96 + @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);
  97 + .box-shadow(@shadow);
  98 + *padding-top: 5px;
  99 + *padding-bottom: 5px;
  100 +}
  101 +
  102 +.btn-group.open {
  103 + // IE7's z-index only goes to the nearest positioned ancestor, which would
  104 + // make the menu appear below buttons that appeared later on the page
  105 + *z-index: @zindexDropdown;
  106 +
  107 + // Reposition menu on open and round all corners
  108 + .dropdown-menu {
  109 + display: block;
  110 + margin-top: 1px;
  111 + .border-radius(5px);
  112 + }
  113 +
  114 + .dropdown-toggle {
  115 + background-image: none;
  116 + @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  117 + .box-shadow(@shadow);
  118 + }
  119 +}
  120 +
  121 +// Reposition the caret
  122 +.btn .caret {
  123 + margin-top: 7px;
  124 + margin-left: 0;
  125 +}
  126 +.btn:hover .caret,
  127 +.open.btn-group .caret {
  128 + .opacity(100);
  129 +}
  130 +
  131 +
  132 +// Account for other colors
  133 +.btn-primary,
  134 +.btn-danger,
  135 +.btn-info,
  136 +.btn-success {
  137 + .caret {
  138 + border-top-color: @white;
  139 + .opacity(75);
  140 + }
  141 +}
  142 +
  143 +// Small button dropdowns
  144 +.btn-small .caret {
  145 + margin-top: 4px;
  146 +}
  147 +
165 css/less2/bootstrap/buttons.less
... ... @@ -0,0 +1,165 @@
  1 +// BUTTON STYLES
  2 +// -------------
  3 +
  4 +
  5 +// Base styles
  6 +// --------------------------------------------------
  7 +
  8 +// Core
  9 +.btn {
  10 + display: inline-block;
  11 + padding: 4px 10px 4px;
  12 + font-size: @baseFontSize;
  13 + line-height: @baseLineHeight;
  14 + color: @grayDark;
  15 + text-align: center;
  16 + text-shadow: 0 1px 1px rgba(255,255,255,.75);
  17 + #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
  18 + border: 1px solid #ccc;
  19 + border-bottom-color: #bbb;
  20 + .border-radius(4px);
  21 + @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  22 + .box-shadow(@shadow);
  23 + cursor: pointer;
  24 +
  25 + // Give IE7 some love
  26 + .ie7-restore-left-whitespace();
  27 +}
  28 +
  29 +// Hover state
  30 +.btn:hover {
  31 + color: @grayDark;
  32 + text-decoration: none;
  33 + background-color: darken(@white, 10%);
  34 + background-position: 0 -15px;
  35 +
  36 + // transition is only when going to hover, otherwise the background
  37 + // behind the gradient (there for IE<=9 fallback) gets mismatched
  38 + .transition(background-position .1s linear);
  39 +}
  40 +
  41 +// Focus state for keyboard and accessibility
  42 +.btn:focus {
  43 + .tab-focus();
  44 +}
  45 +
  46 +// Active state
  47 +.btn.active,
  48 +.btn:active {
  49 + background-image: none;
  50 + @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  51 + .box-shadow(@shadow);
  52 + background-color: darken(@white, 10%);
  53 + background-color: darken(@white, 15%) e("\9");
  54 + color: rgba(0,0,0,.5);
  55 + outline: 0;
  56 +}
  57 +
  58 +// Disabled state
  59 +.btn.disabled,
  60 +.btn[disabled] {
  61 + cursor: default;
  62 + background-image: none;
  63 + background-color: darken(@white, 10%);
  64 + .opacity(65);
  65 + .box-shadow(none);
  66 +}
  67 +
  68 +
  69 +// Button Sizes
  70 +// --------------------------------------------------
  71 +
  72 +// Large
  73 +.btn-large {
  74 + padding: 9px 14px;
  75 + font-size: @baseFontSize + 2px;
  76 + line-height: normal;
  77 + .border-radius(5px);
  78 +}
  79 +.btn-large .icon {
  80 + margin-top: 1px;
  81 +}
  82 +
  83 +// Small
  84 +.btn-small {
  85 + padding: 5px 9px;
  86 + font-size: @baseFontSize - 2px;
  87 + line-height: @baseLineHeight - 2px;
  88 +}
  89 +.btn-small .icon {
  90 + margin-top: -1px;
  91 +}
  92 +
  93 +
  94 +// Alternate buttons
  95 +// --------------------------------------------------
  96 +
  97 +// Set text color
  98 +// -------------------------
  99 +.btn-primary,
  100 +.btn-primary:hover,
  101 +.btn-warning,
  102 +.btn-warning:hover,
  103 +.btn-danger,
  104 +.btn-danger:hover,
  105 +.btn-success,
  106 +.btn-success:hover,
  107 +.btn-info,
  108 +.btn-info:hover {
  109 + text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  110 + color: @white;
  111 +}
  112 +// Provide *some* extra contrast for those who can get it
  113 +.btn-primary.active,
  114 +.btn-warning.active,
  115 +.btn-danger.active,
  116 +.btn-success.active,
  117 +.btn-info.active {
  118 + color: rgba(255,255,255,.75);
  119 +}
  120 +
  121 +// Set the backgrounds
  122 +// -------------------------
  123 +.btn-primary {
  124 + .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
  125 +}
  126 +// Warning appears are orange
  127 +.btn-warning {
  128 + .buttonBackground(lighten(@orange, 15%), @orange);
  129 +}
  130 +// Danger and error appear as red
  131 +.btn-danger {
  132 + .buttonBackground(#ee5f5b, #bd362f);
  133 +}
  134 +// Success appears as green
  135 +.btn-success {
  136 + .buttonBackground(#62c462, #51a351);
  137 +}
  138 +// Info appears as a neutral blue
  139 +.btn-info {
  140 + .buttonBackground(#5bc0de, #2f96b4);
  141 +}
  142 +
  143 +
  144 +// Cross-browser Jank
  145 +// --------------------------------------------------
  146 +
  147 +button.btn,
  148 +input[type="submit"].btn {
  149 + &::-moz-focus-inner {
  150 + padding: 0;
  151 + border: 0;
  152 + }
  153 +
  154 + // IE7 has some default padding on button controls
  155 + *padding-top: 2px;
  156 + *padding-bottom: 2px;
  157 + &.large {
  158 + *padding-top: 7px;
  159 + *padding-bottom: 7px;
  160 + }
  161 + &.small {
  162 + *padding-top: 3px;
  163 + *padding-bottom: 3px;
  164 + }
  165 +}
121 css/less2/bootstrap/carousel.less
... ... @@ -0,0 +1,121 @@
18 css/less2/bootstrap/close.less
... ... @@ -0,0 +1,18 @@
  1 +// CLOSE ICONS
  2 +// -----------
  3 +
  4 +.close {
  5 + float: right;
  6 + font-size: 20px;
  7 + font-weight: bold;
  8 + line-height: @baseLineHeight;
  9 + color: @black;
  10 + text-shadow: 0 1px 0 rgba(255,255,255,1);
  11 + .opacity(20);
  12 + &:hover {
  13 + color: @black;
  14 + text-decoration: none;
  15 + .opacity(40);
  16 + cursor: pointer;
  17 + }
  18 +}
44 css/less2/bootstrap/code.less
... ... @@ -0,0 +1,44 @@
  1 +// Code.less
  2 +// Code typography styles for the <code> and <pre> elements
  3 +// --------------------------------------------------------
  4 +
  5 +// Inline and block code styles
  6 +code,
  7 +pre {
  8 + padding: 0 3px 2px;
  9 + #font > #family > .monospace;
  10 + font-size: @baseFontSize - 1;
  11 + color: @grayDark;
  12 + .border-radius(3px);
  13 +}
  14 +code {
  15 + padding: 3px 4px;
  16 + color: #d14;
  17 + background-color: #f7f7f9;
  18 + border: 1px solid #e1e1e8;
  19 +}
  20 +pre {
  21 + display: block;
  22 + padding: (@baseLineHeight - 1) / 2;
  23 + margin: 0 0 @baseLineHeight / 2;
  24 + font-size: 12px;
  25 + line-height: @baseLineHeight;
  26 + background-color: #f5f5f5;
  27 + border: 1px solid #ccc; // fallback for IE7-8
  28 + border: 1px solid rgba(0,0,0,.15);
  29 + .border-radius(4px);
  30 + white-space: pre;
  31 + white-space: pre-wrap;
  32 + word-break: break-all;
  33 +
  34 + // Make prettyprint styles more spaced out for readability
  35 + &.prettyprint {
  36 + margin-bottom: @baseLineHeight;
  37 + }
  38 +
  39 + // Account for some code outputs that place code tags in pre tags
  40 + code {
  41 + padding: 0;
  42 + background-color: transparent;
  43 + }
  44 +}
18 css/less2/bootstrap/component-animations.less
... ... @@ -0,0 +1,18 @@
  1 +// COMPONENT ANIMATIONS
  2 +// --------------------
  3 +
  4 +.fade {
  5 + .transition(opacity .15s linear);
  6 + opacity: 0;
  7 + &.in {
  8 + opacity: 1;
  9 + }
  10 +}
  11 +
  12 +.collapse {
  13 + .transition(height .35s ease);
  14 + position:relative;
  15 + overflow:hidden;
  16 + height: 0;
  17 + &.in { height: auto; }
  18 +}
131 css/less2/bootstrap/dropdowns.less
... ... @@ -0,0 +1,131 @@
  1 +// DROPDOWN MENUS
  2 +// --------------
  3 +
  4 +// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
  5 +.dropdown {
  6 + position: relative;
  7 +}
  8 +.dropdown-toggle {
  9 + // The caret makes the toggle a bit too tall in IE7
  10 + *margin-bottom: -3px;
  11 +}
  12 +.dropdown-toggle:active,
  13 +.open .dropdown-toggle {
  14 + outline: 0;
  15 +}
  16 +// Dropdown arrow/caret
  17 +.caret {
  18 + display: inline-block;
  19 + width: 0;
  20 + height: 0;
  21 + text-indent: -99999px;
  22 + // IE7 won't do the border trick if there's a text indent, but it doesn't
  23 + // do the content that text-indent is hiding, either, so we're ok.
  24 + *text-indent: 0;
  25 + vertical-align: top;
  26 + border-left: 4px solid transparent;
  27 + border-right: 4px solid transparent;
  28 + border-top: 4px solid @black;
  29 + .opacity(30);
  30 + content: "\2193";
  31 +}
  32 +.dropdown .caret {
  33 + margin-top: 8px;
  34 + margin-left: 2px;
  35 +}
  36 +.dropdown:hover .caret,
  37 +.open.dropdown .caret {
  38 + .opacity(100);
  39 +}
  40 +// The dropdown menu (ul)
  41 +.dropdown-menu {
  42 + position: absolute;
  43 + top: 100%;
  44 + left: 0;
  45 + z-index: @zindexDropdown;
  46 + float: left;
  47 + display: none; // none by default, but block on "open" of the menu
  48 + min-width: 160px;
  49 + max-width: 220px;
  50 + _width: 160px;
  51 + padding: 4px 0;
  52 + margin: 0; // override default ul
  53 + list-style: none;
  54 + background-color: @white;
  55 + border-color: #ccc;
  56 + border-color: rgba(0,0,0,.2);
  57 + border-style: solid;
  58 + border-width: 1px;
  59 + .border-radius(0 0 5px 5px);
  60 + .box-shadow(0 5px 10px rgba(0,0,0,.2));
  61 + -webkit-background-clip: padding-box;
  62 + -moz-background-clip: padding;
  63 + background-clip: padding-box;
  64 + *border-right-width: 2px;
  65 + *border-bottom-width: 2px;
  66 +
  67 + // Allow for dropdowns to go bottom up (aka, dropup-menu)
  68 + &.bottom-up {
  69 + top: auto;
  70 + bottom: 100%;
  71 + margin-bottom: 2px;
  72 + }
  73 +
  74 + // Dividers (basically an hr) within the dropdown
  75 + .divider {
  76 + height: 1px;
  77 + margin: 5px 1px;
  78 + overflow: hidden;
  79 + background-color: #e5e5e5;
  80 + border-bottom: 1px solid @white;
  81 +
  82 + // IE7 needs a set width since we gave a height. Restricting just
  83 + // to IE7 to keep the 1px left/right space in other browsers.
  84 + // It is unclear where IE is getting the extra space that we need
  85 + // to negative-margin away, but so it goes.
  86 + *width: 100%;
  87 + *margin: -5px 0 5px;
  88 + }
  89 +
  90 + // Links within the dropdown menu
  91 + a {
  92 + display: block;
  93 + padding: 3px 15px;
  94 + clear: both;
  95 + font-weight: normal;
  96 + line-height: 18px;
  97 + color: @gray;
  98 + white-space: nowrap;
  99 + }
  100 +}
  101 +
  102 +// Hover state
  103 +.dropdown-menu li > a:hover,
  104 +.dropdown-menu .active > a,
  105 +.dropdown-menu .active > a:hover {
  106 + color: @white;
  107 + text-decoration: none;
  108 + background-color: @linkColor;
  109 +}
  110 +
  111 +// Open state for the dropdown
  112 +.dropdown.open {
  113 + // IE7's z-index only goes to the nearest positioned ancestor, which would
  114 + // make the menu appear below buttons that appeared later on the page
  115 + *z-index: @zindexDropdown;
  116 +
  117 + .dropdown-toggle {
  118 + color: @white;
  119 + background: #ccc;
  120 + background: rgba(0,0,0,.3);
  121 + }
  122 + .dropdown-menu {
  123 + display: block;
  124 + }
  125 +}
  126 +
  127 +// Typeahead
  128 +.typeahead {
  129 + margin-top: 2px; // give it some space to breathe
  130 + .border-radius(4px);
  131 +}
515 css/less2/bootstrap/forms.less
... ... @@ -0,0 +1,515 @@
  1 +// Forms.less
  2 +// Base styles for various input types, form layouts, and states
  3 +// -------------------------------------------------------------
  4 +
  5 +
  6 +// GENERAL STYLES
  7 +// --------------
  8 +
  9 +// Make all forms have space below them
  10 +form {
  11 + margin: 0 0 @baseLineHeight;
  12 +}
  13 +
  14 +fieldset {
  15 + padding: 0;
  16 + margin: 0;
  17 + border: 0;
  18 +}
  19 +
  20 +// Groups of fields with labels on top (legends)
  21 +legend {
  22 + display: block;
  23 + width: 100%;
  24 + padding: 0;
  25 + margin-bottom: @baseLineHeight * 1.5;
  26 + font-size: @baseFontSize * 1.5;
  27 + line-height: @baseLineHeight * 2;
  28 + color: @grayDark;
  29 + border: 0;
  30 + border-bottom: 1px solid #eee;
  31 +}
  32 +
  33 +// Set font for forms
  34 +label,
  35 +input,
  36 +button,
  37 +select,
  38 +textarea {
  39 + #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
  40 +}
  41 +
  42 +// Identify controls by their labels
  43 +label {
  44 + display: block;
  45 + margin-bottom: 5px;
  46 + color: @grayDark;
  47 +}
  48 +
  49 +// Inputs, Textareas, Selects
  50 +input,
  51 +textarea,
  52 +select,
  53 +.uneditable-input {
  54 + display: inline-block;
  55 + width: 210px;
  56 + height: @baseLineHeight;
  57 + padding: 4px;
  58 + margin-bottom: 9px;
  59 + font-size: @baseFontSize;
  60 + line-height: @baseLineHeight;
  61 + color: @gray;
  62 + border: 1px solid #ccc;
  63 + .border-radius(3px);
  64 +}
  65 +.uneditable-textarea {
  66 + width: auto;
  67 + height: auto;
  68 +}
  69 +
  70 +// Inputs within a label
  71 +label input,
  72 +label textarea,
  73 +label select {
  74 + display: block;
  75 +}
  76 +
  77 +// Mini reset for unique input types
  78 +input[type="image"],
  79 +input[type="checkbox"],
  80 +input[type="radio"] {
  81 + width: auto;
  82 + height: auto;
  83 + padding: 0;
  84 + margin: 3px 0;
  85 + *margin-top: 0; /* IE7 */
  86 + line-height: normal;
  87 + border: 0;
  88 + cursor: pointer;
  89 + .border-radius(0);
  90 +}
  91 +
  92 +// Reset the file input to browser defaults
  93 +input[type="file"] {
  94 + padding: initial;
  95 + line-height: initial;
  96 + border: initial;
  97 + background-color: @white;
  98 + background-color: initial;
  99 + .box-shadow(none);
  100 +}
  101 +
  102 +// Help out input buttons
  103 +input[type="button"],
  104 +input[type="reset"],
  105 +input[type="submit"] {
  106 + width: auto;
  107 + height: auto;
  108 +}
  109 +
  110 +// Set the height of select and file controls to match text inputs
  111 +select,
  112 +input[type="file"] {
  113 + height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
  114 + *margin-top: 4px; /* For IE7, add top margin to align select with labels */
  115 + line-height: 28px;
  116 +}
  117 +
  118 +// Chrome on Linux and Mobile Safari need background-color
  119 +select {
  120 + width: 220px; // default input width + 10px of padding that doesn't get applied
  121 + background-color: @white;
  122 +}
  123 +
  124 +// Make multiple select elements height not fixed
  125 +select[multiple],
  126 +select[size] {
  127 + height: auto;
  128 +}
  129 +
  130 +// Remove shadow from image inputs
  131 +input[type="image"] {
  132 + .box-shadow(none);
  133 +}
  134 +
  135 +// Make textarea height behave
  136 +textarea {
  137 + height: auto;
  138 +}
  139 +
  140 +// Hidden inputs
  141 +input[type="hidden"] {
  142 + display: none;
  143 +}
  144 +
  145 +
  146 +
  147 +// CHECKBOXES & RADIOS
  148 +// -------------------
  149 +
  150 +// Indent the labels to position radios/checkboxes as hanging
  151 +.radio,
  152 +.checkbox {
  153 + padding-left: 18px;
  154 +}
  155 +.radio input[type="radio"],
  156 +.checkbox input[type="checkbox"] {
  157 + float: left;
  158 + margin-left: -18px;
  159 +}
  160 +
  161 +// Move the options list down to align with labels
  162 +.controls > .radio:first-child,
  163 +.controls > .checkbox:first-child {
  164 + padding-top: 5px; // has to be padding because margin collaspes
  165 +}
  166 +
  167 +// Radios and checkboxes on same line
  168 +.radio.inline,
  169 +.checkbox.inline {
  170 + display: inline-block;
  171 + margin-bottom: 0;
  172 + vertical-align: middle;
  173 +}
  174 +.radio.inline + .radio.inline,
  175 +.checkbox.inline + .checkbox.inline {
  176 + margin-left: 10px; // space out consecutive inline controls
  177 +}
  178 +// But don't forget to remove their padding on first-child
  179 +.controls > .radio.inline:first-child,
  180 +.controls > .checkbox.inline:first-child {
  181 + padding-top: 0;
  182 +}
  183 +
  184 +
  185 +
  186 +// FOCUS STATE
  187 +// -----------
  188 +
  189 +input,
  190 +textarea {
  191 + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  192 + @transition: border linear .2s, box-shadow linear .2s;
  193 + .transition(@transition);
  194 +}
  195 +input:focus,
  196 +textarea:focus {
  197 + border-color: rgba(82,168,236,.8);
  198 + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  199 + .box-shadow(@shadow);
  200 + outline: 0;
  201 + outline: thin dotted \9; /* IE6-8 */
  202 +}
  203 +input[type="file"]:focus,
  204 +input[type="checkbox"]:focus,
  205 +select:focus {
  206 + .box-shadow(none); // override for file inputs
  207 + .tab-focus();
  208 +}
  209 +
  210 +
  211 +
  212 +// INPUT SIZES
  213 +// -----------
  214 +
  215 +// General classes for quick sizes
  216 +.input-mini { width: 60px; }
  217 +.input-small { width: 90px; }
  218 +.input-medium { width: 150px; }
  219 +.input-large { width: 210px; }
  220 +.input-xlarge { width: 270px; }
  221 +.input-xxlarge { width: 530px; }
  222 +
  223 +// Grid style input sizes
  224 +input[class*="span"],
  225 +select[class*="span"],
  226 +textarea[class*="span"],
  227 +.uneditable-input {
  228 + float: none;
  229 + margin-left: 0;
  230 +}
  231 +
  232 +
  233 +
  234 +// GRID SIZING FOR INPUTS
  235 +// ----------------------
  236 +
  237 +#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
  238 +
  239 +
  240 +
  241 +
  242 +// DISABLED STATE