twitter-bootstrap-rails 0.0.3

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of twitter-bootstrap-rails might be problematic. Click here for more details.

@@ -0,0 +1,270 @@
1
+ /* Preboot.less
2
+ * Variables and mixins to pre-ignite any new web development project
3
+ * ------------------------------------------------------------------ */
4
+
5
+
6
+ // VARIABLES
7
+ // ---------
8
+
9
+ // Links
10
+ @linkColor: #0069d6;
11
+ @linkColorHover: darken(@linkColor, 10);
12
+
13
+ // Grays
14
+ @black: #000;
15
+ @grayDark: lighten(@black, 25%);
16
+ @gray: lighten(@black, 50%);
17
+ @grayLight: lighten(@black, 75%);
18
+ @grayLighter: lighten(@black, 90%);
19
+ @white: #fff;
20
+
21
+ // Accent Colors
22
+ @blue: #049CDB;
23
+ @blueDark: #0064CD;
24
+ @green: #46a546;
25
+ @red: #9d261d;
26
+ @yellow: #ffc40d;
27
+ @orange: #f89406;
28
+ @pink: #c3325f;
29
+ @purple: #7a43b6;
30
+
31
+ // Baseline grid
32
+ @basefont: 13px;
33
+ @baseline: 18px;
34
+
35
+ // Griditude
36
+ @gridColumns: 16;
37
+ @gridColumnWidth: 40px;
38
+ @gridGutterWidth: 20px;
39
+ @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
40
+
41
+ // Color Scheme
42
+ @baseColor: @blue; // Set a base color
43
+ @complement: spin(@baseColor, 180); // Determine a complementary color
44
+ @split1: spin(@baseColor, 158); // Split complements
45
+ @split2: spin(@baseColor, -158);
46
+ @triad1: spin(@baseColor, 135); // Triads colors
47
+ @triad2: spin(@baseColor, -135);
48
+ @tetra1: spin(@baseColor, 90); // Tetra colors
49
+ @tetra2: spin(@baseColor, -90);
50
+ @analog1: spin(@baseColor, 22); // Analogs colors
51
+ @analog2: spin(@baseColor, -22);
52
+
53
+
54
+ // MIXINS
55
+ // ------
56
+
57
+ // Clearfix for clearing floats like a boss h5bp.com/q
58
+ .clearfix {
59
+ zoom: 1;
60
+ &:before, &:after {
61
+ display: table;
62
+ content: "";
63
+ }
64
+ &:after {
65
+ clear: both;
66
+ }
67
+ }
68
+
69
+ // Center-align a block level element
70
+ .center-block {
71
+ display: block;
72
+ margin: 0 auto;
73
+ }
74
+
75
+ // Sizing shortcuts
76
+ .size(@height: 5px, @width: 5px) {
77
+ height: @height;
78
+ width: @width;
79
+ }
80
+ .square(@size: 5px) {
81
+ .size(@size, @size);
82
+ }
83
+
84
+ // Input placeholder text
85
+ .placeholder(@color: @grayLight) {
86
+ :-moz-placeholder {
87
+ color: @color;
88
+ }
89
+ ::-webkit-input-placeholder {
90
+ color: @color;
91
+ }
92
+ }
93
+
94
+ // Font Stacks
95
+ #font {
96
+ .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
97
+ font-size: @size;
98
+ font-weight: @weight;
99
+ line-height: @lineHeight;
100
+ }
101
+ .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
102
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
103
+ font-size: @size;
104
+ font-weight: @weight;
105
+ line-height: @lineHeight;
106
+ }
107
+ .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
108
+ font-family: "Georgia", Times New Roman, Times, serif;
109
+ font-size: @size;
110
+ font-weight: @weight;
111
+ line-height: @lineHeight;
112
+ }
113
+ .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
114
+ font-family: "Monaco", Courier New, monospace;
115
+ font-size: @size;
116
+ font-weight: @weight;
117
+ line-height: @lineHeight;
118
+ }
119
+ }
120
+
121
+ // Grid System
122
+ .container {
123
+ width: @siteWidth;
124
+ margin: 0 auto;
125
+ .clearfix();
126
+ }
127
+ .columns(@columnSpan: 1) {
128
+ float: left;
129
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
130
+ margin-left: @gridGutterWidth;
131
+ &:first-child {
132
+ margin-left: 0;
133
+ }
134
+ }
135
+ .offsetMath(@extraSpace: 40px) {
136
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace !important;
137
+ }
138
+ .offset(@columnOffset: 1) {
139
+ .offsetMath(40px);
140
+ &:first-child {
141
+ .offsetMath(20px);
142
+ }
143
+ }
144
+
145
+ // Border Radius
146
+ .border-radius(@radius: 5px) {
147
+ -webkit-border-radius: @radius;
148
+ -moz-border-radius: @radius;
149
+ border-radius: @radius;
150
+ }
151
+
152
+ // Drop shadows
153
+ .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
154
+ -webkit-box-shadow: @shadow;
155
+ -moz-box-shadow: @shadow;
156
+ box-shadow: @shadow;
157
+ }
158
+
159
+ // Transitions
160
+ .transition(@transition) {
161
+ -webkit-transition: @transition;
162
+ -moz-transition: @transition;
163
+ transition: @transition;
164
+ }
165
+
166
+ // Background clipping
167
+ .background-clip(@clip) {
168
+ -webkit-background-clip: @clip;
169
+ -moz-background-clip: @clip;
170
+ background-clip: @clip;
171
+ }
172
+
173
+ // CSS3 Content Columns
174
+ .content-columns(@columnCount, @columnGap: 20px) {
175
+ -webkit-column-count: @columnCount;
176
+ -webkit-column-gap: @columnGap;
177
+ -moz-column-count: @columnCount;
178
+ -moz-column-gap: @columnGap;
179
+ column-count: @columnCount;
180
+ column-gap: @columnGap;
181
+ }
182
+
183
+ // Buttons
184
+ .button(@color: #fff, @padding: 4px 14px, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @borderColor: rgba(0,0,0,.1), @borderRadius: 4px) {
185
+ display: inline-block;
186
+ #gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%));
187
+ padding: @padding;
188
+ text-shadow: @textShadow;
189
+ color: @textColor;
190
+ font-size: @fontSize;
191
+ line-height: @baseline;
192
+ border: 1px solid @borderColor;
193
+ border-bottom-color: fadein(@borderColor, 15%);
194
+ .border-radius(@borderRadius);
195
+ @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
196
+ .box-shadow(@shadow);
197
+ &:hover {
198
+ background-position: 0 -15px;
199
+ color: @textColor;
200
+ text-decoration: none;
201
+ }
202
+ }
203
+
204
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
205
+ #translucent {
206
+ .background(@color: @white, @alpha: 1) {
207
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
208
+ }
209
+ .border(@color: @white, @alpha: 1) {
210
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
211
+ background-clip: padding-box;
212
+ }
213
+ }
214
+
215
+ // Gradients
216
+ #gradient {
217
+ .horizontal (@startColor: #555, @endColor: #333) {
218
+ background-color: @endColor;
219
+ background-repeat: repeat-x;
220
+ background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
221
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
222
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
223
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
224
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
225
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
226
+ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
227
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
228
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
229
+ }
230
+ .vertical (@startColor: #555, @endColor: #333) {
231
+ background-color: @endColor;
232
+ background-repeat: repeat-x;
233
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
234
+ background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
235
+ background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
236
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
237
+ background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
238
+ background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
239
+ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
240
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
241
+ background-image: linear-gradient(@startColor, @endColor); // The standard
242
+ }
243
+ .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
244
+ background-color: @endColor;
245
+ background-repeat: repeat-x;
246
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
247
+ background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
248
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
249
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
250
+ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
251
+ }
252
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
253
+ background-color: @endColor;
254
+ background-repeat: no-repeat;
255
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
256
+ background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
257
+ background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
258
+ background-image: -ms-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
259
+ background-image: -o-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
260
+ background-image: linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
261
+ }
262
+ }
263
+
264
+ // Opacity
265
+ .opacity(@opacity: 100) {
266
+ filter: e(%("alpha(opacity=%d)", @opacity));
267
+ -khtml-opacity: @opacity / 100;
268
+ -moz-opacity: @opacity / 100;
269
+ opacity: @opacity / 100;
270
+ }
@@ -0,0 +1,21 @@
1
+ /* Reset.less
2
+ * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
3
+ * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
4
+
5
+
6
+ // ERIC MEYER RESET
7
+ // ----------------
8
+
9
+ html, body { margin: 0; padding: 0; }
10
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
11
+ table { border-collapse: collapse; border-spacing: 0; }
12
+ ol, ul { list-style: none; }
13
+ q:before, q:after, blockquote:before, blockquote:after { content: ""; }
14
+
15
+
16
+ // HTML5
17
+ // -----
18
+
19
+ header, section, footer, article, aside {
20
+ display: block;
21
+ }
@@ -0,0 +1,137 @@
1
+ /*
2
+ * Scaffolding
3
+ * Basic and global styles for generating a grid system, structural layout, and page templates
4
+ * ------------------------------------------------------------------------------------------- */
5
+
6
+
7
+ // GRID SYSTEM
8
+ // -----------
9
+
10
+ .row {
11
+ .clearfix();
12
+
13
+ // Default columns
14
+ .span1 { .columns(1); }
15
+ .span2 { .columns(2); }
16
+ .span3 { .columns(3); }
17
+ .span4 { .columns(4); }
18
+ .span5 { .columns(5); }
19
+ .span6 { .columns(6); }
20
+ .span7 { .columns(7); }
21
+ .span8 { .columns(8); }
22
+ .span9 { .columns(9); }
23
+ .span10 { .columns(10); }
24
+ .span11 { .columns(11); }
25
+ .span12 { .columns(12); }
26
+ .span13 { .columns(13); }
27
+ .span14 { .columns(14); }
28
+ .span15 { .columns(15); }
29
+ .span16 { .columns(16); }
30
+
31
+ // Offset column options
32
+ .offset1 { .offset(1); }
33
+ .offset2 { .offset(2); }
34
+ .offset3 { .offset(3); }
35
+ .offset4 { .offset(4); }
36
+ .offset5 { .offset(5); }
37
+ .offset6 { .offset(6); }
38
+ .offset7 { .offset(7); }
39
+ .offset8 { .offset(8); }
40
+ .offset9 { .offset(8); }
41
+ .offset10 { .offset(10); }
42
+ .offset11 { .offset(11); }
43
+ .offset12 { .offset(12); }
44
+ }
45
+
46
+
47
+ // STRUCTURAL LAYOUT
48
+ // -----------------
49
+
50
+ html, body {
51
+ background-color: #fff;
52
+ }
53
+ body {
54
+ margin: 0;
55
+ #font > .sans-serif(normal,@basefont,@baseline);
56
+ color: @gray;
57
+ text-rendering: optimizeLegibility;
58
+ }
59
+
60
+ // Container (centered, fixed-width layouts)
61
+ div.container {
62
+ width: 940px;
63
+ margin: 0 auto;
64
+ }
65
+
66
+ // Fluid layouts (left aligned, with sidebar, min- & max-width content)
67
+ div.container-fluid {
68
+ padding: 20px;
69
+ .clearfix();
70
+ div.sidebar {
71
+ float: left;
72
+ width: 220px;
73
+ }
74
+ div.content {
75
+ min-width: 700px;
76
+ max-width: 1180px;
77
+ margin-left: 240px;
78
+ }
79
+ }
80
+
81
+
82
+ // BASE STYLES
83
+ // -----------
84
+
85
+ // Links
86
+ a {
87
+ color: @linkColor;
88
+ text-decoration: none;
89
+ line-height: inherit;
90
+ &:hover {
91
+ color: @linkColorHover;
92
+ text-decoration: underline;
93
+ }
94
+ }
95
+
96
+ // Buttons
97
+ .btn {
98
+ .button();
99
+ .transition(.1s linear all);
100
+ &.primary {
101
+ #gradient > .vertical(@blue, @blueDark);
102
+ color: #fff;
103
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
104
+ &:hover {
105
+ color: #fff;
106
+ }
107
+ }
108
+ &.large {
109
+ font-size: 16px;
110
+ line-height: 28px;
111
+ .border-radius(6px);
112
+ }
113
+ &.small {
114
+ padding-right: 9px;
115
+ padding-left: 9px;
116
+ font-size: 11px;
117
+ }
118
+ &:disabled,
119
+ &.disabled {
120
+ background-image: none;
121
+ .opacity(65);
122
+ cursor: default;
123
+ }
124
+ &:active {
125
+ @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
126
+ .box-shadow(@shadow);
127
+ }
128
+ }
129
+
130
+ // Help Firefox not be a jerk about adding extra padding to buttons
131
+ button.btn,
132
+ input[type=submit].btn {
133
+ &::-moz-focus-inner {
134
+ padding: 0;
135
+ border: 0;
136
+ }
137
+ }
@@ -0,0 +1,152 @@
1
+ /*
2
+ * Tables.less
3
+ * Tables for, you guessed it, tabular data
4
+ * ---------------------------------------- */
5
+
6
+
7
+ // BASELINE STYLES
8
+ // ---------------
9
+
10
+ table {
11
+ width: 100%;
12
+ margin-bottom: @baseline;
13
+ padding: 0;
14
+ text-align: left;
15
+ border-collapse: separate;
16
+ font-size: 13px;
17
+ th, td {
18
+ padding: 10px 10px 9px;
19
+ line-height: @baseline * .75;
20
+ vertical-align: middle;
21
+ border-bottom: 1px solid #ddd;
22
+ }
23
+ th {
24
+ padding-top: 9px;
25
+ font-weight: bold;
26
+ border-bottom-width: 2px;
27
+ }
28
+ }
29
+
30
+
31
+ // ZEBRA-STRIPING
32
+ // --------------
33
+
34
+ // Default zebra-stripe styles (alternating gray and transparent backgrounds)
35
+ table.zebra-striped {
36
+ tbody {
37
+ tr:nth-child(odd) td {
38
+ background-color: #f9f9f9;
39
+ }
40
+ tr:hover td {
41
+ background-color: #f5f5f5;
42
+ }
43
+ }
44
+
45
+ // Tablesorting styles w/ jQuery plugin
46
+ th.header {
47
+ cursor: pointer;
48
+ &:after {
49
+ content: "";
50
+ float: right;
51
+ margin-top: 7px;
52
+ border-width: 0 4px 4px;
53
+ border-style: solid;
54
+ border-color: #000 transparent;
55
+ visibility: hidden;
56
+ }
57
+ }
58
+
59
+ // Style the sorted column headers (THs)
60
+ th.headerSortUp,
61
+ th.headerSortDown {
62
+ background-color: rgba(141,192,219,.25);
63
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
64
+ .border-radius(3px 3px 0 0);
65
+ }
66
+
67
+ // Style the ascending (reverse alphabetical) column header
68
+ th.header:hover {
69
+ &:after {
70
+ visibility:visible;
71
+ }
72
+ }
73
+ th.actions:hover {
74
+ background-image: none;
75
+ }
76
+
77
+ // Style the descending (alphabetical) column header
78
+ th.headerSortDown,
79
+ th.headerSortDown:hover {
80
+ &:after {
81
+ visibility:visible;
82
+ .opacity(60);
83
+ }
84
+ }
85
+
86
+ // Style the ascending (reverse alphabetical) column header
87
+ th.headerSortUp {
88
+ &:after {
89
+ border-bottom: none;
90
+ border-left: 4px solid transparent;
91
+ border-right: 4px solid transparent;
92
+ border-top: 4px solid #000;
93
+ visibility:visible;
94
+ .box-shadow(none); //can't add boxshadow to downward facing arrow :(
95
+ .opacity(60);
96
+ }
97
+ }
98
+
99
+ // Blue Table Headings
100
+ th.blue {
101
+ color: @blue;
102
+ border-bottom-color: @blue;
103
+ }
104
+ th.headerSortUp.blue, th.headerSortDown.blue {
105
+ background-color: lighten(@blue, 40%);
106
+ }
107
+
108
+ // Green Table Headings
109
+ th.green {
110
+ color: @green;
111
+ border-bottom-color: @green;
112
+ }
113
+ th.headerSortUp.green, th.headerSortDown.green { // backround color is 20% of border color
114
+ background-color: lighten(@green, 40%);
115
+ }
116
+
117
+ // Red Table Headings
118
+ th.red {
119
+ color: @red;
120
+ border-bottom-color: @red;
121
+ }
122
+ th.headerSortUp.red, th.headerSortDown.red {
123
+ background-color: lighten(@red, 50%);
124
+ }
125
+
126
+ // Yellow Table Headings
127
+ th.yellow {
128
+ color: @yellow;
129
+ border-bottom-color: @yellow;
130
+ }
131
+ th.headerSortUp.yellow, th.headerSortDown.yellow {
132
+ background-color: lighten(@yellow, 40%);
133
+ }
134
+
135
+ // Orange Table Headings
136
+ th.orange {
137
+ color: @orange;
138
+ border-bottom-color: @orange;
139
+ }
140
+ th.headerSortUp.orange, th.headerSortDown.orange {
141
+ background-color: lighten(@orange, 40%);
142
+ }
143
+
144
+ // Purple Table Headings
145
+ th.purple {
146
+ color: @purple;
147
+ border-bottom-color: @purple;
148
+ }
149
+ th.headerSortUp.purple, th.headerSortDown.purple {
150
+ background-color: lighten(@purple, 40%);
151
+ }
152
+ }