wd_sinatra 1.0.6 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. checksums.yaml +7 -0
  2. data/.travis.yml +1 -4
  3. data/CHANGELOG.md +20 -0
  4. data/Gemfile +0 -2
  5. data/LICENSE +4 -2
  6. data/README.md +28 -19
  7. data/bin/wd_sinatra +7 -25
  8. data/lib/wd_sinatra/app_loader.rb +12 -20
  9. data/lib/wd_sinatra/sinatra_ext.rb +8 -7
  10. data/lib/wd_sinatra/test_helpers.rb +1 -1
  11. data/lib/wd_sinatra/version.rb +2 -4
  12. data/templates/Gemfile +16 -11
  13. data/templates/{Rakefile → Rakefile.tt} +4 -4
  14. data/templates/Thorfile +14 -8
  15. data/templates/api/hello_world.rb +17 -10
  16. data/templates/bin/console +1 -1
  17. data/templates/config.ru.tt +6 -0
  18. data/templates/config/sinatra_config.rb.tt +50 -0
  19. data/templates/lib/{app.rb → app.rb.tt} +4 -1
  20. data/templates/lib/hooks.rb +25 -15
  21. data/templates/test/{test_helpers.rb → test_helpers.rb.tt} +8 -6
  22. data/test/test_helper.rb +0 -4
  23. data/test/ws_list_ext_test.rb +6 -6
  24. data/wd-sinatra.gemspec +11 -7
  25. metadata +72 -104
  26. data/templates/config.ru +0 -5
  27. data/templates/config/middleware.rb +0 -16
  28. data/templates/config/sinatra_config.rb +0 -18
  29. data/templates/lib/body_parser.rb +0 -24
  30. data/templates/lib/tasks/doc.rake +0 -39
  31. data/templates/lib/tasks/doc_generator/bootstrap/.gitignore +0 -4
  32. data/templates/lib/tasks/doc_generator/bootstrap/LICENSE +0 -176
  33. data/templates/lib/tasks/doc_generator/bootstrap/Makefile +0 -47
  34. data/templates/lib/tasks/doc_generator/bootstrap/README.md +0 -105
  35. data/templates/lib/tasks/doc_generator/bootstrap/bootstrap.css +0 -2467
  36. data/templates/lib/tasks/doc_generator/bootstrap/bootstrap.min.css +0 -356
  37. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/css/docs.css +0 -317
  38. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/ico/bootstrap-apple-114x114.png +0 -0
  39. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/ico/bootstrap-apple-57x57.png +0 -0
  40. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/ico/bootstrap-apple-72x72.png +0 -0
  41. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/ico/favicon.ico +0 -0
  42. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/img/bird.png +0 -0
  43. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/img/browsers.png +0 -0
  44. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/img/example-diagram-01.png +0 -0
  45. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/img/example-diagram-02.png +0 -0
  46. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/img/example-diagram-03.png +0 -0
  47. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/img/grid-18px.png +0 -0
  48. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/img/twitter-logo-no-bird.png +0 -0
  49. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/js/application.js +0 -52
  50. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/js/google-code-prettify/prettify.css +0 -94
  51. data/templates/lib/tasks/doc_generator/bootstrap/docs/assets/js/google-code-prettify/prettify.js +0 -28
  52. data/templates/lib/tasks/doc_generator/bootstrap/docs/index.html +0 -2037
  53. data/templates/lib/tasks/doc_generator/bootstrap/docs/javascript.html +0 -798
  54. data/templates/lib/tasks/doc_generator/bootstrap/examples/container-app.html +0 -119
  55. data/templates/lib/tasks/doc_generator/bootstrap/examples/fluid.html +0 -122
  56. data/templates/lib/tasks/doc_generator/bootstrap/examples/hero.html +0 -79
  57. data/templates/lib/tasks/doc_generator/bootstrap/js/bootstrap-alerts.js +0 -124
  58. data/templates/lib/tasks/doc_generator/bootstrap/js/bootstrap-buttons.js +0 -64
  59. data/templates/lib/tasks/doc_generator/bootstrap/js/bootstrap-dropdown.js +0 -55
  60. data/templates/lib/tasks/doc_generator/bootstrap/js/bootstrap-modal.js +0 -260
  61. data/templates/lib/tasks/doc_generator/bootstrap/js/bootstrap-popover.js +0 -90
  62. data/templates/lib/tasks/doc_generator/bootstrap/js/bootstrap-scrollspy.js +0 -107
  63. data/templates/lib/tasks/doc_generator/bootstrap/js/bootstrap-tabs.js +0 -80
  64. data/templates/lib/tasks/doc_generator/bootstrap/js/bootstrap-twipsy.js +0 -321
  65. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/index.html +0 -40
  66. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/unit/bootstrap-alerts.js +0 -41
  67. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/unit/bootstrap-buttons.js +0 -42
  68. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/unit/bootstrap-dropdown.js +0 -52
  69. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/unit/bootstrap-modal.js +0 -151
  70. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/unit/bootstrap-popover.js +0 -76
  71. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/unit/bootstrap-scrollspy.js +0 -31
  72. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/unit/bootstrap-tabs.js +0 -77
  73. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/unit/bootstrap-twipsy.js +0 -81
  74. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/vendor/qunit.css +0 -232
  75. data/templates/lib/tasks/doc_generator/bootstrap/js/tests/vendor/qunit.js +0 -1510
  76. data/templates/lib/tasks/doc_generator/bootstrap/lib/bootstrap.less +0 -26
  77. data/templates/lib/tasks/doc_generator/bootstrap/lib/forms.less +0 -479
  78. data/templates/lib/tasks/doc_generator/bootstrap/lib/mixins.less +0 -222
  79. data/templates/lib/tasks/doc_generator/bootstrap/lib/patterns.less +0 -1060
  80. data/templates/lib/tasks/doc_generator/bootstrap/lib/reset.less +0 -141
  81. data/templates/lib/tasks/doc_generator/bootstrap/lib/scaffolding.less +0 -139
  82. data/templates/lib/tasks/doc_generator/bootstrap/lib/tables.less +0 -224
  83. data/templates/lib/tasks/doc_generator/bootstrap/lib/type.less +0 -187
  84. data/templates/lib/tasks/doc_generator/bootstrap/lib/variables.less +0 -60
  85. data/templates/lib/tasks/doc_generator/template.erb +0 -156
@@ -1,222 +0,0 @@
1
- /* Mixins.less
2
- * Snippets of reusable CSS to develop faster and keep code readable
3
- * ----------------------------------------------------------------- */
4
-
5
-
6
- // Clearfix for clearing floats like a boss h5bp.com/q
7
- .clearfix() {
8
- zoom: 1;
9
- &:before,
10
- &:after {
11
- display: table;
12
- content: "";
13
- zoom: 1;
14
- }
15
- &:after {
16
- clear: both;
17
- }
18
- }
19
-
20
- // Center-align a block level element
21
- .center-block() {
22
- display: block;
23
- margin-left: auto;
24
- margin-right: auto;
25
- }
26
-
27
- // Sizing shortcuts
28
- .size(@height: 5px, @width: 5px) {
29
- height: @height;
30
- width: @width;
31
- }
32
- .square(@size: 5px) {
33
- .size(@size, @size);
34
- }
35
-
36
- // Input placeholder text
37
- .placeholder(@color: @grayLight) {
38
- :-moz-placeholder {
39
- color: @color;
40
- }
41
- ::-webkit-input-placeholder {
42
- color: @color;
43
- }
44
- }
45
-
46
- // Font Stacks
47
- #font {
48
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
49
- font-size: @size;
50
- font-weight: @weight;
51
- line-height: @lineHeight;
52
- }
53
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
54
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
55
- font-size: @size;
56
- font-weight: @weight;
57
- line-height: @lineHeight;
58
- }
59
- .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
60
- font-family: "Georgia", Times New Roman, Times, serif;
61
- font-size: @size;
62
- font-weight: @weight;
63
- line-height: @lineHeight;
64
- }
65
- .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
66
- font-family: "Monaco", Courier New, monospace;
67
- font-size: @size;
68
- font-weight: @weight;
69
- line-height: @lineHeight;
70
- }
71
- }
72
-
73
- // Grid System
74
- .fixed-container() {
75
- width: @siteWidth;
76
- margin-left: auto;
77
- margin-right: auto;
78
- .clearfix();
79
- }
80
- .columns(@columnSpan: 1) {
81
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
82
- }
83
- .offset(@columnOffset: 1) {
84
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
85
- }
86
- // Necessary grid styles for every column to make them appear next to each other horizontally
87
- .gridColumn() {
88
- display: inline;
89
- float: left;
90
- margin-left: @gridGutterWidth;
91
- }
92
- // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
93
- .makeColumn(@columnSpan: 1) {
94
- .gridColumn();
95
- .columns(@columnSpan);
96
- }
97
-
98
- // Border Radius
99
- .border-radius(@radius: 5px) {
100
- -webkit-border-radius: @radius;
101
- -moz-border-radius: @radius;
102
- border-radius: @radius;
103
- }
104
-
105
- // Drop shadows
106
- .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
107
- -webkit-box-shadow: @shadow;
108
- -moz-box-shadow: @shadow;
109
- box-shadow: @shadow;
110
- }
111
-
112
- // Transitions
113
- .transition(@transition) {
114
- -webkit-transition: @transition;
115
- -moz-transition: @transition;
116
- -ms-transition: @transition;
117
- -o-transition: @transition;
118
- transition: @transition;
119
- }
120
-
121
- // Background clipping
122
- .background-clip(@clip) {
123
- -webkit-background-clip: @clip;
124
- -moz-background-clip: @clip;
125
- background-clip: @clip;
126
- }
127
-
128
- // CSS3 Content Columns
129
- .content-columns(@columnCount, @columnGap: 20px) {
130
- -webkit-column-count: @columnCount;
131
- -moz-column-count: @columnCount;
132
- column-count: @columnCount;
133
- -webkit-column-gap: @columnGap;
134
- -moz-column-gap: @columnGap;
135
- column-gap: @columnGap;
136
- }
137
-
138
- // Make any element resizable for prototyping
139
- .resizable(@direction: both) {
140
- resize: @direction; // Options are horizontal, vertical, both
141
- overflow: auto; // Safari fix
142
- }
143
-
144
- // Add an alphatransparency value to any background or border color (via Elyse Holladay)
145
- #translucent {
146
- .background(@color: @white, @alpha: 1) {
147
- background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
148
- }
149
- .border(@color: @white, @alpha: 1) {
150
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
151
- background-clip: padding-box;
152
- }
153
- }
154
-
155
- // Gradient Bar Colors for buttons and allerts
156
- .gradientBar(@primaryColor, @secondaryColor) {
157
- #gradient > .vertical(@primaryColor, @secondaryColor);
158
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
159
- border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
160
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
161
- }
162
-
163
- // Gradients
164
- #gradient {
165
- .horizontal (@startColor: #555, @endColor: #333) {
166
- background-color: @endColor;
167
- background-repeat: repeat-x;
168
- background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
169
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
170
- background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
171
- background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
172
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
173
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
174
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
175
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
176
- }
177
- .vertical (@startColor: #555, @endColor: #333) {
178
- background-color: @endColor;
179
- background-repeat: repeat-x;
180
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
181
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
182
- background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
183
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
184
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
185
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
186
- background-image: linear-gradient(top, @startColor, @endColor); // The standard
187
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
188
- }
189
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
190
- background-color: @endColor;
191
- background-repeat: repeat-x;
192
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
193
- background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
194
- background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
195
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
196
- background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
197
- }
198
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
199
- background-color: @endColor;
200
- background-repeat: no-repeat;
201
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
202
- background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
203
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
204
- background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
205
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
206
- background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
207
- 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
208
- }
209
- }
210
-
211
- // Reset filters for IE
212
- .reset-filter() {
213
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
214
- }
215
-
216
- // Opacity
217
- .opacity(@opacity: 100) {
218
- filter: e(%("alpha(opacity=%d)", @opacity));
219
- -khtml-opacity: @opacity / 100;
220
- -moz-opacity: @opacity / 100;
221
- opacity: @opacity / 100;
222
- }
@@ -1,1060 +0,0 @@
1
- /* Patterns.less
2
- * Repeatable UI elements outside the base styles provided from the scaffolding
3
- * ---------------------------------------------------------------------------- */
4
-
5
-
6
- // TOPBAR
7
- // ------
8
-
9
- // Topbar for Branding and Nav
10
- .topbar {
11
- height: 40px;
12
- position: fixed;
13
- top: 0;
14
- left: 0;
15
- right: 0;
16
- z-index: 10000;
17
- overflow: visible;
18
-
19
- // Links get text shadow
20
- a {
21
- color: @grayLight;
22
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
- }
24
-
25
- // Hover and active states
26
- // h3 for backwards compatibility
27
- h3 a:hover,
28
- .brand:hover,
29
- ul .active > a {
30
- background-color: #333;
31
- background-color: rgba(255,255,255,.05);
32
- color: @white;
33
- text-decoration: none;
34
- }
35
-
36
- // Website name
37
- // h3 left for backwards compatibility
38
- h3 {
39
- position: relative;
40
- }
41
- h3 a,
42
- .brand {
43
- float: left;
44
- display: block;
45
- padding: 8px 20px 12px;
46
- margin-left: -20px; // negative indent to left-align the text down the page
47
- color: @white;
48
- font-size: 20px;
49
- font-weight: 200;
50
- line-height: 1;
51
- }
52
-
53
- // Plain text in topbar
54
- p {
55
- margin: 0;
56
- line-height: 40px;
57
- a:hover {
58
- background-color: transparent;
59
- color: @white;
60
- }
61
- }
62
-
63
- // Search Form
64
- form {
65
- float: left;
66
- margin: 5px 0 0 0;
67
- position: relative;
68
- .opacity(100);
69
- }
70
- // Todo: remove from v2.0 when ready, added for legacy
71
- form.pull-right {
72
- float: right;
73
- }
74
- input {
75
- background-color: #444;
76
- background-color: rgba(255,255,255,.3);
77
- #font > .sans-serif(13px, normal, 1);
78
- padding: 4px 9px;
79
- color: @white;
80
- color: rgba(255,255,255,.75);
81
- border: 1px solid #111;
82
- .border-radius(4px);
83
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
- .box-shadow(@shadow);
85
- .transition(none);
86
-
87
- // Placeholder text gets special styles; can't be bundled together though for some reason
88
- &:-moz-placeholder {
89
- color: @grayLighter;
90
- }
91
- &::-webkit-input-placeholder {
92
- color: @grayLighter;
93
- }
94
- // Hover states
95
- &:hover {
96
- background-color: @grayLight;
97
- background-color: rgba(255,255,255,.5);
98
- color: @white;
99
- }
100
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
- &:focus,
102
- &.focused {
103
- outline: 0;
104
- background-color: @white;
105
- color: @grayDark;
106
- text-shadow: 0 1px 0 @white;
107
- border: 0;
108
- padding: 5px 10px;
109
- .box-shadow(0 0 3px rgba(0,0,0,.15));
110
- }
111
- }
112
- }
113
-
114
- // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
- // For backwards compatibility, include .topbar .fill
116
- .topbar-inner,
117
- .topbar .fill {
118
- background-color: #222;
119
- #gradient > .vertical(#333, #222);
120
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
- .box-shadow(@shadow);
122
- }
123
-
124
-
125
- // NAVIGATION
126
- // ----------
127
-
128
- // Topbar Nav
129
- // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
- // For backwards compatibility, leave in .topbar div > ul
131
- .topbar div > ul,
132
- .nav {
133
- display: block;
134
- float: left;
135
- margin: 0 10px 0 0;
136
- position: relative;
137
- left: 0;
138
- > li {
139
- display: block;
140
- float: left;
141
- }
142
- a {
143
- display: block;
144
- float: none;
145
- padding: 10px 10px 11px;
146
- line-height: 19px;
147
- text-decoration: none;
148
- &:hover {
149
- color: @white;
150
- text-decoration: none;
151
- }
152
- }
153
- .active > a {
154
- background-color: #222;
155
- background-color: rgba(0,0,0,.5);
156
- }
157
-
158
- // Secondary (floated right) nav in topbar
159
- &.secondary-nav {
160
- float: right;
161
- margin-left: 10px;
162
- margin-right: 0;
163
- // backwards compatibility
164
- .menu-dropdown,
165
- .dropdown-menu {
166
- right: 0;
167
- border: 0;
168
- }
169
- }
170
- // Dropdowns within the .nav
171
- // a.menu:hover and li.open .menu for backwards compatibility
172
- a.menu:hover,
173
- li.open .menu,
174
- .dropdown-toggle:hover,
175
- .dropdown.open .dropdown-toggle {
176
- background: #444;
177
- background: rgba(255,255,255,.05);
178
- }
179
- // .menu-dropdown for backwards compatibility
180
- .menu-dropdown,
181
- .dropdown-menu {
182
- background-color: #333;
183
- // a.menu for backwards compatibility
184
- a.menu,
185
- .dropdown-toggle {
186
- color: @white;
187
- &.open {
188
- background: #444;
189
- background: rgba(255,255,255,.05);
190
- }
191
- }
192
- li a {
193
- color: #999;
194
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
- &:hover {
196
- #gradient > .vertical(#292929,#191919);
197
- color: @white;
198
- }
199
- }
200
- .active a {
201
- color: @white;
202
- }
203
- .divider {
204
- background-color: #222;
205
- border-color: #444;
206
- }
207
- }
208
- }
209
-
210
- // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
- .topbar ul .menu-dropdown li a,
212
- .topbar ul .dropdown-menu li a {
213
- padding: 4px 15px;
214
- }
215
-
216
- // Dropdown Menus
217
- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
- // li.menu for backwards compatibility
219
- li.menu,
220
- .dropdown {
221
- position: relative;
222
- }
223
- // The link that is clicked to toggle the dropdown
224
- // a.menu for backwards compatibility
225
- a.menu:after,
226
- .dropdown-toggle:after {
227
- width: 0;
228
- height: 0;
229
- display: inline-block;
230
- content: "&darr;";
231
- text-indent: -99999px;
232
- vertical-align: top;
233
- margin-top: 8px;
234
- margin-left: 4px;
235
- border-left: 4px solid transparent;
236
- border-right: 4px solid transparent;
237
- border-top: 4px solid @white;
238
- .opacity(50);
239
- }
240
- // The dropdown menu (ul)
241
- // .menu-dropdown for backwards compatibility
242
- .menu-dropdown,
243
- .dropdown-menu {
244
- background-color: @white;
245
- float: left;
246
- display: none; // None by default, but block on "open" of the menu
247
- position: absolute;
248
- top: 40px;
249
- z-index: 900;
250
- min-width: 160px;
251
- max-width: 220px;
252
- _width: 160px;
253
- margin-left: 0; // override default ul styles
254
- margin-right: 0;
255
- padding: 6px 0;
256
- zoom: 1; // do we need this?
257
- border-color: #999;
258
- border-color: rgba(0,0,0,.2);
259
- border-style: solid;
260
- border-width: 0 1px 1px;
261
- .border-radius(0 0 6px 6px);
262
- .box-shadow(0 2px 4px rgba(0,0,0,.2));
263
- .background-clip(padding-box);
264
-
265
- // Unfloat any li's to make them stack
266
- li {
267
- float: none;
268
- display: block;
269
- background-color: none;
270
- }
271
- // Dividers (basically an hr) within the dropdown
272
- .divider {
273
- height: 1px;
274
- margin: 5px 0;
275
- overflow: hidden;
276
- background-color: #eee;
277
- border-bottom: 1px solid @white;
278
- }
279
- }
280
-
281
- .topbar .dropdown-menu,
282
- .dropdown-menu {
283
- // Links within the dropdown menu
284
- a {
285
- display: block;
286
- padding: 4px 15px;
287
- clear: both;
288
- font-weight: normal;
289
- line-height: 18px;
290
- color: @gray;
291
- text-shadow: 0 1px 0 @white;
292
- // Hover state
293
- &:hover,
294
- &.hover {
295
- #gradient > .vertical(#eeeeee, #dddddd);
296
- color: @grayDark;
297
- text-decoration: none;
298
- @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
299
- .box-shadow(@shadow);
300
- }
301
- }
302
- }
303
-
304
- // Open state for the dropdown
305
- // .open for backwards compatibility
306
- .open,
307
- .dropdown.open {
308
- // .menu for backwards compatibility
309
- .menu,
310
- .dropdown-toggle {
311
- color: @white;
312
- background: #ccc;
313
- background: rgba(0,0,0,.3);
314
- }
315
- // .menu-dropdown for backwards compatibility
316
- .menu-dropdown,
317
- .dropdown-menu {
318
- display: block;
319
- }
320
- }
321
-
322
-
323
- // TABS AND PILLS
324
- // --------------
325
-
326
- // Common styles
327
- .tabs,
328
- .pills {
329
- margin: 0 0 @baseline;
330
- padding: 0;
331
- list-style: none;
332
- .clearfix();
333
- > li {
334
- float: left;
335
- > a {
336
- display: block;
337
- }
338
- }
339
- }
340
-
341
- // Tabs
342
- .tabs {
343
- border-color: #ddd;
344
- border-style: solid;
345
- border-width: 0 0 1px;
346
- > li {
347
- position: relative; // For the dropdowns mostly
348
- margin-bottom: -1px;
349
- > a {
350
- padding: 0 15px;
351
- margin-right: 2px;
352
- line-height: (@baseline * 2) - 2;
353
- border: 1px solid transparent;
354
- .border-radius(4px 4px 0 0);
355
- &:hover {
356
- text-decoration: none;
357
- background-color: #eee;
358
- border-color: #eee #eee #ddd;
359
- }
360
- }
361
- }
362
- // Active state, and it's :hover to override normal :hover
363
- .active > a,
364
- .active > a:hover {
365
- color: @gray;
366
- background-color: @white;
367
- border: 1px solid #ddd;
368
- border-bottom-color: transparent;
369
- cursor: default;
370
- }
371
- }
372
-
373
- // Dropdowns in tabs
374
- .tabs {
375
- // first one for backwards compatibility
376
- .menu-dropdown,
377
- .dropdown-menu {
378
- top: 35px;
379
- border-width: 1px;
380
- .border-radius(0 6px 6px 6px);
381
- }
382
- // first one for backwards compatibility
383
- a.menu:after,
384
- .dropdown-toggle:after {
385
- border-top-color: #999;
386
- margin-top: 15px;
387
- margin-left: 5px;
388
- }
389
- // first one for backwards compatibility
390
- li.open.menu .menu,
391
- .open.dropdown .dropdown-toggle {
392
- border-color: #999;
393
- }
394
- // first one for backwards compatibility
395
- li.open a.menu:after,
396
- .dropdown.open .dropdown-toggle:after {
397
- border-top-color: #555;
398
- }
399
- }
400
-
401
- // Pills
402
- .pills {
403
- a {
404
- margin: 5px 3px 5px 0;
405
- padding: 0 15px;
406
- line-height: 30px;
407
- text-shadow: 0 1px 1px @white;
408
- .border-radius(15px);
409
- &:hover {
410
- color: @white;
411
- text-decoration: none;
412
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
413
- background-color: @linkColorHover;
414
- }
415
- }
416
- .active a {
417
- color: @white;
418
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
419
- background-color: @linkColor;
420
- }
421
- }
422
-
423
- // Stacked pills
424
- .pills-vertical > li {
425
- float: none;
426
- }
427
-
428
- // Tabbable areas
429
- .tab-content,
430
- .pill-content {
431
- }
432
- .tab-content > .tab-pane,
433
- .pill-content > .pill-pane,
434
- .tab-content > div,
435
- .pill-content > div {
436
- display: none;
437
- }
438
- .tab-content > .active,
439
- .pill-content > .active {
440
- display: block;
441
- }
442
-
443
-
444
- // BREADCRUMBS
445
- // -----------
446
-
447
- .breadcrumb {
448
- padding: 7px 14px;
449
- margin: 0 0 @baseline;
450
- #gradient > .vertical(#ffffff, #f5f5f5);
451
- border: 1px solid #ddd;
452
- .border-radius(3px);
453
- .box-shadow(inset 0 1px 0 @white);
454
- li {
455
- display: inline;
456
- text-shadow: 0 1px 0 @white;
457
- }
458
- .divider {
459
- padding: 0 5px;
460
- color: @grayLight;
461
- }
462
- .active a {
463
- color: @grayDark;
464
- }
465
- }
466
-
467
-
468
- // PAGE HEADERS
469
- // ------------
470
-
471
- .hero-unit {
472
- background-color: #f5f5f5;
473
- margin-bottom: 30px;
474
- padding: 60px;
475
- .border-radius(6px);
476
- h1 {
477
- margin-bottom: 0;
478
- font-size: 60px;
479
- line-height: 1;
480
- letter-spacing: -1px;
481
- }
482
- p {
483
- font-size: 18px;
484
- font-weight: 200;
485
- line-height: @baseline * 1.5;
486
- }
487
- }
488
- footer {
489
- margin-top: @baseline - 1;
490
- padding-top: @baseline - 1;
491
- border-top: 1px solid #eee;
492
- }
493
-
494
-
495
- // PAGE HEADERS
496
- // ------------
497
-
498
- .page-header {
499
- margin-bottom: @baseline - 1;
500
- border-bottom: 1px solid #ddd;
501
- .box-shadow(0 1px 0 rgba(255,255,255,.5));
502
- h1 {
503
- margin-bottom: (@baseline / 2) - 1px;
504
- }
505
- }
506
-
507
-
508
- // BUTTON STYLES
509
- // -------------
510
-
511
- // Shared colors for buttons and alerts
512
- .btn,
513
- .alert-message {
514
- // Set text color
515
- &.danger,
516
- &.danger:hover,
517
- &.error,
518
- &.error:hover,
519
- &.success,
520
- &.success:hover,
521
- &.info,
522
- &.info:hover {
523
- color: @white
524
- }
525
- // Sets the close button to the middle of message
526
- .close{
527
- font-family: Arial, sans-serif;
528
- line-height: 18px;
529
- }
530
- // Danger and error appear as red
531
- &.danger,
532
- &.error {
533
- .gradientBar(#ee5f5b, #c43c35);
534
- }
535
- // Success appears as green
536
- &.success {
537
- .gradientBar(#62c462, #57a957);
538
- }
539
- // Info appears as a neutral blue
540
- &.info {
541
- .gradientBar(#5bc0de, #339bb9);
542
- }
543
- }
544
-
545
- // Base .btn styles
546
- .btn {
547
- // Button Base
548
- cursor: pointer;
549
- display: inline-block;
550
- #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
551
- padding: 5px 14px 6px;
552
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
553
- color: #333;
554
- font-size: @basefont;
555
- line-height: normal;
556
- border: 1px solid #ccc;
557
- border-bottom-color: #bbb;
558
- .border-radius(4px);
559
- @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
560
- .box-shadow(@shadow);
561
-
562
- &:hover {
563
- background-position: 0 -15px;
564
- color: #333;
565
- text-decoration: none;
566
- }
567
-
568
- // Focus state for keyboard and accessibility
569
- &:focus {
570
- outline: 1px dotted #666;
571
- }
572
-
573
- // Primary Button Type
574
- &.primary {
575
- color: @white;
576
- .gradientBar(@blue, @blueDark)
577
- }
578
-
579
- // Transitions
580
- .transition(.1s linear all);
581
-
582
- // Active and Disabled states
583
- &.active,
584
- &:active {
585
- @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
586
- .box-shadow(@shadow);
587
- }
588
- &.disabled {
589
- cursor: default;
590
- background-image: none;
591
- .reset-filter();
592
- .opacity(65);
593
- .box-shadow(none);
594
- }
595
- &[disabled] {
596
- // disabled pseudo can't be included with .disabled
597
- // def because IE8 and below will drop it ;_;
598
- cursor: default;
599
- background-image: none;
600
- .reset-filter();
601
- .opacity(65);
602
- .box-shadow(none);
603
- }
604
-
605
- // Button Sizes
606
- &.large {
607
- font-size: @basefont + 2px;
608
- line-height: normal;
609
- padding: 9px 14px 9px;
610
- .border-radius(6px);
611
- }
612
- &.small {
613
- padding: 7px 9px 7px;
614
- font-size: @basefont - 2px;
615
- }
616
- }
617
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
618
- :root .alert-message,
619
- :root .btn {
620
- border-radius: 0 \0;
621
- }
622
-
623
- // Help Firefox not be a jerk about adding extra padding to buttons
624
- button.btn,
625
- input[type=submit].btn {
626
- &::-moz-focus-inner {
627
- padding: 0;
628
- border: 0;
629
- }
630
- }
631
-
632
-
633
- // CLOSE ICONS
634
- // -----------
635
- .close {
636
- float: right;
637
- color: @black;
638
- font-size: 20px;
639
- font-weight: bold;
640
- line-height: @baseline * .75;
641
- text-shadow: 0 1px 0 rgba(255,255,255,1);
642
- .opacity(25);
643
- &:hover {
644
- color: @black;
645
- text-decoration: none;
646
- .opacity(40);
647
- }
648
- }
649
-
650
-
651
- // ERROR STYLES
652
- // ------------
653
-
654
- // Base alert styles
655
- .alert-message {
656
- position: relative;
657
- padding: 7px 15px;
658
- margin-bottom: @baseline;
659
- color: @grayDark;
660
- .gradientBar(#fceec1, #eedc94); // warning by default
661
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
662
- border-width: 1px;
663
- border-style: solid;
664
- .border-radius(4px);
665
- .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
666
-
667
- // Adjust close icon
668
- .close {
669
- margin-top: 1px;
670
- *margin-top: 0; // For IE7
671
- }
672
-
673
- // Make links same color as text and stand out more
674
- a {
675
- font-weight: bold;
676
- color: @grayDark;
677
- }
678
- &.danger p a,
679
- &.error p a,
680
- &.success p a,
681
- &.info p a {
682
- color: @white;
683
- }
684
-
685
- // Remove extra margin from content
686
- h5 {
687
- line-height: @baseline;
688
- }
689
- p {
690
- margin-bottom: 0;
691
- }
692
- div {
693
- margin-top: 5px;
694
- margin-bottom: 2px;
695
- line-height: 28px;
696
- }
697
- .btn {
698
- // Provide actions with buttons
699
- .box-shadow(0 1px 0 rgba(255,255,255,.25));
700
- }
701
-
702
- &.block-message {
703
- background-image: none;
704
- background-color: lighten(#fceec1, 5%);
705
- .reset-filter();
706
- padding: 14px;
707
- border-color: #fceec1;
708
- .box-shadow(none);
709
- ul, p {
710
- margin-right: 30px;
711
- }
712
- ul {
713
- margin-bottom: 0;
714
- }
715
- li {
716
- color: @grayDark;
717
- }
718
- .alert-actions {
719
- margin-top: 5px;
720
- }
721
- &.error,
722
- &.success,
723
- &.info {
724
- color: @grayDark;
725
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
726
- }
727
- &.error {
728
- background-color: lighten(#f56a66, 25%);
729
- border-color: lighten(#f56a66, 20%);
730
- }
731
- &.success {
732
- background-color: lighten(#62c462, 30%);
733
- border-color: lighten(#62c462, 25%);
734
- }
735
- &.info {
736
- background-color: lighten(#6bd0ee, 25%);
737
- border-color: lighten(#6bd0ee, 20%);
738
- }
739
- // Change link color back
740
- &.danger p a,
741
- &.error p a,
742
- &.success p a,
743
- &.info p a {
744
- color: @grayDark;
745
- }
746
-
747
- }
748
- }
749
-
750
-
751
- // PAGINATION
752
- // ----------
753
-
754
- .pagination {
755
- height: @baseline * 2;
756
- margin: @baseline 0;
757
- ul {
758
- float: left;
759
- margin: 0;
760
- border: 1px solid #ddd;
761
- border: 1px solid rgba(0,0,0,.15);
762
- .border-radius(3px);
763
- .box-shadow(0 1px 2px rgba(0,0,0,.05));
764
- }
765
- li {
766
- display: inline;
767
- }
768
- a {
769
- float: left;
770
- padding: 0 14px;
771
- line-height: (@baseline * 2) - 2;
772
- border-right: 1px solid;
773
- border-right-color: #ddd;
774
- border-right-color: rgba(0,0,0,.15);
775
- *border-right-color: #ddd; /* IE6-7 */
776
- text-decoration: none;
777
- }
778
- a:hover,
779
- .active a {
780
- background-color: lighten(@blue, 45%);
781
- }
782
- .disabled a,
783
- .disabled a:hover {
784
- background-color: transparent;
785
- color: @grayLight;
786
- }
787
- .next a {
788
- border: 0;
789
- }
790
- }
791
-
792
-
793
- // WELLS
794
- // -----
795
-
796
- .well {
797
- background-color: #f5f5f5;
798
- margin-bottom: 20px;
799
- padding: 19px;
800
- min-height: 20px;
801
- border: 1px solid #eee;
802
- border: 1px solid rgba(0,0,0,.05);
803
- .border-radius(4px);
804
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
805
- blockquote {
806
- border-color: #ddd;
807
- border-color: rgba(0,0,0,.15);
808
- }
809
- }
810
-
811
-
812
- // MODALS
813
- // ------
814
-
815
- .modal-backdrop {
816
- background-color: @black;
817
- position: fixed;
818
- top: 0;
819
- left: 0;
820
- right: 0;
821
- bottom: 0;
822
- z-index: 10000;
823
- // Fade for backdrop
824
- &.fade { opacity: 0; }
825
- }
826
-
827
- .modal-backdrop,
828
- .modal-backdrop.fade.in {
829
- .opacity(80);
830
- }
831
-
832
- .modal {
833
- position: fixed;
834
- top: 50%;
835
- left: 50%;
836
- z-index: 11000;
837
- width: 560px;
838
- margin: -250px 0 0 -280px;
839
- background-color: @white;
840
- border: 1px solid #999;
841
- border: 1px solid rgba(0,0,0,.3);
842
- *border: 1px solid #999; /* IE6-7 */
843
- .border-radius(6px);
844
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
845
- .background-clip(padding-box);
846
- .close { margin-top: 7px; }
847
- &.fade {
848
- .transition(e('opacity .3s linear, top .3s ease-out'));
849
- top: -25%;
850
- }
851
- &.fade.in { top: 50%; }
852
- }
853
- .modal-header {
854
- border-bottom: 1px solid #eee;
855
- padding: 5px 15px;
856
- }
857
- .modal-body {
858
- padding: 15px;
859
- }
860
- .modal-body form {
861
- margin-bottom: 0;
862
- }
863
- .modal-footer {
864
- background-color: #f5f5f5;
865
- padding: 14px 15px 15px;
866
- border-top: 1px solid #ddd;
867
- .border-radius(0 0 6px 6px);
868
- .box-shadow(inset 0 1px 0 @white);
869
- .clearfix();
870
- margin-bottom: 0;
871
- .btn {
872
- float: right;
873
- margin-left: 5px;
874
- }
875
- }
876
-
877
- // Fix the stacking of these components when in modals
878
- .modal .popover,
879
- .modal .twipsy {
880
- z-index: 12000;
881
- }
882
-
883
-
884
- // POPOVER ARROWS
885
- // --------------
886
-
887
- #popoverArrow {
888
- .above(@arrowWidth: 5px) {
889
- bottom: 0;
890
- left: 50%;
891
- margin-left: -@arrowWidth;
892
- border-left: @arrowWidth solid transparent;
893
- border-right: @arrowWidth solid transparent;
894
- border-top: @arrowWidth solid @black;
895
- }
896
- .left(@arrowWidth: 5px) {
897
- top: 50%;
898
- right: 0;
899
- margin-top: -@arrowWidth;
900
- border-top: @arrowWidth solid transparent;
901
- border-bottom: @arrowWidth solid transparent;
902
- border-left: @arrowWidth solid @black;
903
- }
904
- .below(@arrowWidth: 5px) {
905
- top: 0;
906
- left: 50%;
907
- margin-left: -@arrowWidth;
908
- border-left: @arrowWidth solid transparent;
909
- border-right: @arrowWidth solid transparent;
910
- border-bottom: @arrowWidth solid @black;
911
- }
912
- .right(@arrowWidth: 5px) {
913
- top: 50%;
914
- left: 0;
915
- margin-top: -@arrowWidth;
916
- border-top: @arrowWidth solid transparent;
917
- border-bottom: @arrowWidth solid transparent;
918
- border-right: @arrowWidth solid @black;
919
- }
920
- }
921
-
922
- // TWIPSY
923
- // ------
924
-
925
- .twipsy {
926
- display: block;
927
- position: absolute;
928
- visibility: visible;
929
- padding: 5px;
930
- font-size: 11px;
931
- z-index: 1000;
932
- .opacity(80);
933
- &.fade.in {
934
- .opacity(80);
935
- }
936
- &.above .twipsy-arrow { #popoverArrow > .above(); }
937
- &.left .twipsy-arrow { #popoverArrow > .left(); }
938
- &.below .twipsy-arrow { #popoverArrow > .below(); }
939
- &.right .twipsy-arrow { #popoverArrow > .right(); }
940
- }
941
- .twipsy-inner {
942
- padding: 3px 8px;
943
- background-color: @black;
944
- color: white;
945
- text-align: center;
946
- max-width: 200px;
947
- text-decoration: none;
948
- .border-radius(4px);
949
- }
950
- .twipsy-arrow {
951
- position: absolute;
952
- width: 0;
953
- height: 0;
954
- }
955
-
956
-
957
- // POPOVERS
958
- // --------
959
-
960
- .popover {
961
- position: absolute;
962
- top: 0;
963
- left: 0;
964
- z-index: 1000;
965
- padding: 5px;
966
- display: none;
967
- &.above .arrow { #popoverArrow > .above(); }
968
- &.right .arrow { #popoverArrow > .right(); }
969
- &.below .arrow { #popoverArrow > .below(); }
970
- &.left .arrow { #popoverArrow > .left(); }
971
- .arrow {
972
- position: absolute;
973
- width: 0;
974
- height: 0;
975
- }
976
- .inner {
977
- background: @black;
978
- background: rgba(0,0,0,.8);
979
- padding: 3px;
980
- overflow: hidden;
981
- width: 280px;
982
- .border-radius(6px);
983
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
984
- }
985
- .title {
986
- background-color: #f5f5f5;
987
- padding: 9px 15px;
988
- line-height: 1;
989
- .border-radius(3px 3px 0 0);
990
- border-bottom:1px solid #eee;
991
- }
992
- .content {
993
- background-color: @white;
994
- padding: 14px;
995
- .border-radius(0 0 3px 3px);
996
- .background-clip(padding-box);
997
- p, ul, ol {
998
- margin-bottom: 0;
999
- }
1000
- }
1001
- }
1002
-
1003
-
1004
- // PATTERN ANIMATIONS
1005
- // ------------------
1006
-
1007
- .fade {
1008
- .transition(opacity .15s linear);
1009
- opacity: 0;
1010
- &.in {
1011
- opacity: 1;
1012
- }
1013
- }
1014
-
1015
-
1016
- // LABELS
1017
- // ------
1018
-
1019
- .label {
1020
- padding: 1px 3px 2px;
1021
- font-size: @basefont * .75;
1022
- font-weight: bold;
1023
- color: @white;
1024
- text-transform: uppercase;
1025
- white-space: nowrap;
1026
- background-color: @grayLight;
1027
- .border-radius(3px);
1028
- &.important { background-color: #c43c35; }
1029
- &.warning { background-color: @orange; }
1030
- &.success { background-color: @green; }
1031
- &.notice { background-color: lighten(@blue, 25%); }
1032
- }
1033
-
1034
-
1035
- // MEDIA GRIDS
1036
- // -----------
1037
-
1038
- .media-grid {
1039
- margin-left: -@gridGutterWidth;
1040
- margin-bottom: 0;
1041
- .clearfix();
1042
- li {
1043
- display: inline;
1044
- }
1045
- a {
1046
- float: left;
1047
- padding: 4px;
1048
- margin: 0 0 @baseline @gridGutterWidth;
1049
- border: 1px solid #ddd;
1050
- .border-radius(4px);
1051
- .box-shadow(0 1px 1px rgba(0,0,0,.075));
1052
- img {
1053
- display: block;
1054
- }
1055
- &:hover {
1056
- border-color: @linkColor;
1057
- .box-shadow(0 1px 4px rgba(0,105,214,.25));
1058
- }
1059
- }
1060
- }