less-rails-bootstrap 1.3.3 → 1.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -77,7 +77,12 @@ select,
77
77
  .border-radius(3px);
78
78
  }
79
79
 
80
- /* mini reset for non-html5 file types */
80
+ // remove padding from select
81
+ select {
82
+ padding: initial;
83
+ }
84
+
85
+ // mini reset for non-html5 file types
81
86
  input[type=checkbox],
82
87
  input[type=radio] {
83
88
  width: auto;
@@ -107,6 +112,7 @@ input[type=submit] {
107
112
  select,
108
113
  input[type=file] {
109
114
  height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
115
+ *height: auto; // Reset for IE7
110
116
  line-height: @baseline * 1.5;
111
117
  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
112
118
  }
@@ -114,6 +120,7 @@ input[type=file] {
114
120
  // Make multiple select elements height not fixed
115
121
  select[multiple] {
116
122
  height: inherit;
123
+ background-color: @white; // Fixes Chromium bug of unreadable items
117
124
  }
118
125
 
119
126
  textarea {
@@ -158,36 +165,49 @@ select:focus {
158
165
  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
159
166
  }
160
167
 
161
- // Error styles
162
- form div.clearfix.error {
163
- background: lighten(@red, 57%);
164
- padding: 10px 0;
165
- margin: -10px 0 10px;
166
- .border-radius(4px);
167
- @error-text: desaturate(lighten(@red, 25%), 25%);
168
+
169
+ // FORM FIELD FEEDBACK STATES
170
+ // --------------------------
171
+
172
+ // Mixin for form field states
173
+ .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
174
+ // Set the text color
168
175
  > label,
169
- span.help-inline,
170
- span.help-block {
171
- color: @red;
176
+ .help-block,
177
+ .help-inline {
178
+ color: @textColor;
172
179
  }
180
+ // Style inputs accordingly
173
181
  input,
174
182
  textarea {
175
- border-color: @error-text;
176
- .box-shadow(0 0 3px rgba(171,41,32,.25));
183
+ color: @textColor;
184
+ border-color: @borderColor;
177
185
  &:focus {
178
- border-color: darken(@error-text, 10%);
179
- .box-shadow(0 0 6px rgba(171,41,32,.5));
186
+ border-color: darken(@borderColor, 10%);
187
+ .box-shadow(0 0 6px lighten(@borderColor, 20%);
180
188
  }
181
189
  }
182
- .input-prepend,
183
- .input-append {
184
- span.add-on {
185
- background: lighten(@red, 50%);
186
- border-color: @error-text;
187
- color: darken(@error-text, 10%);
188
- }
190
+ // Give a small background color for input-prepend/-append
191
+ .input-prepend .add-on,
192
+ .input-append .add-on {
193
+ color: @textColor;
194
+ background-color: @backgroundColor;
195
+ border-color: @textColor;
189
196
  }
190
197
  }
198
+ // Error
199
+ form .clearfix.error {
200
+ .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
201
+ }
202
+ // Warning
203
+ form .clearfix.warning {
204
+ .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
205
+ }
206
+ // Success
207
+ form .clearfix.success {
208
+ .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
209
+ }
210
+
191
211
 
192
212
  // Form element sizes
193
213
  // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
@@ -236,12 +256,11 @@ textarea.xxlarge {
236
256
  .formColumns(@columnSpan: 1) {
237
257
  display: inline-block;
238
258
  float: none;
239
- width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
259
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
240
260
  margin-left: 0;
241
261
  }
242
262
  input,
243
- textarea,
244
- select {
263
+ textarea {
245
264
  // Default columns
246
265
  &.span1 { .formColumns(1); }
247
266
  &.span2 { .formColumns(2); }
@@ -293,9 +312,10 @@ textarea[readonly] {
293
312
  }
294
313
 
295
314
  // Help Text
315
+ // TODO: Do we need to set basefont and baseline here?
296
316
  .help-inline,
297
317
  .help-block {
298
- font-size: @basefont - 2;
318
+ font-size: @basefont;
299
319
  line-height: @baseline;
300
320
  color: @grayLight;
301
321
  }
@@ -314,15 +334,6 @@ textarea[readonly] {
314
334
  // Inline Fields (input fields that appear as inline objects
315
335
  .inline-inputs {
316
336
  color: @gray;
317
- span, input {
318
- display: inline-block;
319
- }
320
- input.mini {
321
- width: 60px;
322
- }
323
- input.small {
324
- width: 90px;
325
- }
326
337
  span {
327
338
  padding: 0 2px 0 1px;
328
339
  }
@@ -389,6 +400,7 @@ textarea[readonly] {
389
400
  float: none;
390
401
  width: auto;
391
402
  padding: 0;
403
+ margin-left: 20px;
392
404
  line-height: @baseline;
393
405
  text-align: left;
394
406
  white-space: normal;
@@ -414,6 +426,8 @@ textarea[readonly] {
414
426
  input[type=radio],
415
427
  input[type=checkbox] {
416
428
  margin-bottom: 0;
429
+ margin-left: -20px;
430
+ float: left;
417
431
  }
418
432
  }
419
433
 
@@ -1,4 +1,4 @@
1
- /* Variables.less
1
+ /* Mixins.less
2
2
  * Snippets of reusable CSS to develop faster and keep code readable
3
3
  * ----------------------------------------------------------------- */
4
4
 
@@ -6,32 +6,31 @@
6
6
  // Clearfix for clearing floats like a boss h5bp.com/q
7
7
  .clearfix() {
8
8
  zoom: 1;
9
- &:before,
9
+ &:before,
10
10
  &:after {
11
11
  display: table;
12
12
  content: "";
13
13
  zoom: 1;
14
- *display: inline;
15
- }
16
- &:after {
14
+ }
15
+ &:after {
17
16
  clear: both;
18
- }
17
+ }
19
18
  }
20
19
 
21
20
  // Center-align a block level element
22
21
  .center-block() {
23
- display: block;
22
+ display: block;
24
23
  margin-left: auto;
25
24
  margin-right: auto;
26
25
  }
27
26
 
28
27
  // Sizing shortcuts
29
28
  .size(@height: 5px, @width: 5px) {
30
- height: @height;
31
- width: @width;
29
+ height: @height;
30
+ width: @width;
32
31
  }
33
32
  .square(@size: 5px) {
34
- .size(@size, @size);
33
+ .size(@size, @size);
35
34
  }
36
35
 
37
36
  // Input placeholder text
@@ -112,39 +111,45 @@
112
111
 
113
112
  // Transitions
114
113
  .transition(@transition) {
115
- -webkit-transition: @transition;
116
- -moz-transition: @transition;
117
- -ms-transition: @transition;
118
- -o-transition: @transition;
119
- transition: @transition;
114
+ -webkit-transition: @transition;
115
+ -moz-transition: @transition;
116
+ -ms-transition: @transition;
117
+ -o-transition: @transition;
118
+ transition: @transition;
120
119
  }
121
120
 
122
121
  // Background clipping
123
122
  .background-clip(@clip) {
124
- -webkit-background-clip: @clip;
125
- -moz-background-clip: @clip;
126
- background-clip: @clip;
123
+ -webkit-background-clip: @clip;
124
+ -moz-background-clip: @clip;
125
+ background-clip: @clip;
127
126
  }
128
127
 
129
128
  // CSS3 Content Columns
130
129
  .content-columns(@columnCount, @columnGap: 20px) {
131
- -webkit-column-count: @columnCount;
132
- -moz-column-count: @columnCount;
130
+ -webkit-column-count: @columnCount;
131
+ -moz-column-count: @columnCount;
133
132
  column-count: @columnCount;
134
133
  -webkit-column-gap: @columnGap;
135
- -moz-column-gap: @columnGap;
134
+ -moz-column-gap: @columnGap;
136
135
  column-gap: @columnGap;
137
136
  }
138
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
+
139
144
  // Add an alphatransparency value to any background or border color (via Elyse Holladay)
140
145
  #translucent {
141
146
  .background(@color: @white, @alpha: 1) {
142
147
  background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
143
- }
144
- .border(@color: @white, @alpha: 1) {
145
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
146
- background-clip: padding-box;
147
- }
148
+ }
149
+ .border(@color: @white, @alpha: 1) {
150
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
151
+ background-clip: padding-box;
152
+ }
148
153
  }
149
154
 
150
155
  // Gradient Bar Colors for buttons and allerts
@@ -210,8 +215,8 @@
210
215
 
211
216
  // Opacity
212
217
  .opacity(@opacity: 100) {
213
- filter: e(%("alpha(opacity=%d)", @opacity));
214
- -khtml-opacity: @opacity / 100;
215
- -moz-opacity: @opacity / 100;
216
- opacity: @opacity / 100;
218
+ filter: e(%("alpha(opacity=%d)", @opacity));
219
+ -khtml-opacity: @opacity / 100;
220
+ -moz-opacity: @opacity / 100;
221
+ opacity: @opacity / 100;
217
222
  }
@@ -25,7 +25,7 @@
25
25
  // Hover and active states
26
26
  // h3 for backwards compatibility
27
27
  h3 a:hover,
28
- .brand a:hover,
28
+ .brand:hover,
29
29
  ul .active > a {
30
30
  background-color: #333;
31
31
  background-color: rgba(255,255,255,.05);
@@ -278,7 +278,8 @@ a.menu:after,
278
278
  }
279
279
  }
280
280
 
281
- .topbar .dropdown-menu, .dropdown-menu {
281
+ .topbar .dropdown-menu,
282
+ .dropdown-menu {
282
283
  // Links within the dropdown menu
283
284
  a {
284
285
  display: block;
@@ -289,7 +290,8 @@ a.menu:after,
289
290
  color: @gray;
290
291
  text-shadow: 0 1px 0 @white;
291
292
  // Hover state
292
- &:hover {
293
+ &:hover,
294
+ &.hover {
293
295
  #gradient > .vertical(#eeeeee, #dddddd);
294
296
  color: @grayDark;
295
297
  text-decoration: none;
@@ -318,10 +320,13 @@ a.menu:after,
318
320
  }
319
321
 
320
322
 
321
- // Tabs and Pills
323
+ // TABS AND PILLS
324
+ // --------------
325
+
326
+ // Common styles
322
327
  .tabs,
323
328
  .pills {
324
- margin: 0 0 20px;
329
+ margin: 0 0 @baseline;
325
330
  padding: 0;
326
331
  list-style: none;
327
332
  .clearfix();
@@ -333,18 +338,18 @@ a.menu:after,
333
338
  }
334
339
  }
335
340
 
336
- // Basic Tabs
341
+ // Tabs
337
342
  .tabs {
338
- float: left;
339
- width: 100%;
340
- border-bottom: 1px solid #ddd;
343
+ border-color: #ddd;
344
+ border-style: solid;
345
+ border-width: 0 0 1px;
341
346
  > li {
342
347
  position: relative; // For the dropdowns mostly
343
- top: 1px;
348
+ margin-bottom: -1px;
344
349
  > a {
345
350
  padding: 0 15px;
346
351
  margin-right: 2px;
347
- line-height: @baseline * 2;
352
+ line-height: (@baseline * 2) - 2;
348
353
  border: 1px solid transparent;
349
354
  .border-radius(4px 4px 0 0);
350
355
  &:hover {
@@ -353,13 +358,20 @@ a.menu:after,
353
358
  border-color: #eee #eee #ddd;
354
359
  }
355
360
  }
356
- &.active > a {
357
- color: @gray;
358
- background-color: @white;
359
- border: 1px solid #ddd;
360
- border-bottom-color: transparent;
361
- }
362
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 {
363
375
  // first one for backwards compatibility
364
376
  .menu-dropdown,
365
377
  .dropdown-menu {
@@ -385,40 +397,47 @@ a.menu:after,
385
397
  border-top-color: #555;
386
398
  }
387
399
  }
388
- .tab-content {
389
- clear: both;
390
- }
391
400
 
392
- // Basic pill nav
401
+ // Pills
393
402
  .pills {
394
403
  a {
395
- margin: 5px 3px 5px 0;
404
+ margin: 5px 3px 5px 0;
396
405
  padding: 0 15px;
397
- text-shadow: 0 1px 1px @white;
398
406
  line-height: 30px;
407
+ text-shadow: 0 1px 1px @white;
399
408
  .border-radius(15px);
400
409
  &:hover {
401
- background: @linkColorHover;
402
410
  color: @white;
403
411
  text-decoration: none;
404
412
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
413
+ background-color: @linkColorHover;
405
414
  }
406
415
  }
407
416
  .active a {
408
- background: @linkColor;
409
417
  color: @white;
410
418
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
419
+ background-color: @linkColor;
411
420
  }
412
421
  }
413
422
 
414
- .tab-content > *,
415
- .pill-content > * {
416
- display: none;
423
+ // Stacked pills
424
+ .pills-vertical > li {
425
+ float: none;
417
426
  }
418
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
+ }
419
438
  .tab-content > .active,
420
439
  .pill-content > .active {
421
- display:block;
440
+ display: block;
422
441
  }
423
442
 
424
443
 
@@ -426,8 +445,8 @@ a.menu:after,
426
445
  // -----------
427
446
 
428
447
  .breadcrumb {
429
- margin: 0 0 @baseline;
430
448
  padding: 7px 14px;
449
+ margin: 0 0 @baseline;
431
450
  #gradient > .vertical(#ffffff, #f5f5f5);
432
451
  border: 1px solid #ddd;
433
452
  .border-radius(3px);
@@ -440,8 +459,6 @@ a.menu:after,
440
459
  padding: 0 5px;
441
460
  color: @grayLight;
442
461
  }
443
- a {
444
- }
445
462
  .active a {
446
463
  color: @grayDark;
447
464
  }
@@ -505,6 +522,11 @@ footer {
505
522
  &.info:hover {
506
523
  color: @white
507
524
  }
525
+ // Sets the close button to the middle of message
526
+ .close{
527
+ font-family: Arial, sans-serif;
528
+ line-height: 18px;
529
+ }
508
530
  // Danger and error appear as red
509
531
  &.danger,
510
532
  &.error {
@@ -558,7 +580,8 @@ footer {
558
580
  .transition(.1s linear all);
559
581
 
560
582
  // Active and Disabled states
561
- &:active {
583
+ &.active,
584
+ :active {
562
585
  @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
563
586
  .box-shadow(@shadow);
564
587
  }
@@ -616,7 +639,7 @@ input[type=submit].btn {
616
639
  font-weight: bold;
617
640
  line-height: @baseline * .75;
618
641
  text-shadow: 0 1px 0 rgba(255,255,255,1);
619
- .opacity(20);
642
+ .opacity(25);
620
643
  &:hover {
621
644
  color: @black;
622
645
  text-decoration: none;
@@ -643,7 +666,20 @@ input[type=submit].btn {
643
666
 
644
667
  // Adjust close icon
645
668
  .close {
646
- *margin-top: 3px; /* IE7 spacing */
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;
647
683
  }
648
684
 
649
685
  // Remove extra margin from content
@@ -700,6 +736,14 @@ input[type=submit].btn {
700
736
  background-color: lighten(#6bd0ee, 25%);
701
737
  border-color: lighten(#6bd0ee, 20%);
702
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
+
703
747
  }
704
748
  }
705
749
 
@@ -780,7 +824,8 @@ input[type=submit].btn {
780
824
  &.fade { opacity: 0; }
781
825
  }
782
826
 
783
- .modal-backdrop, .modal-backdrop.fade.in {
827
+ .modal-backdrop,
828
+ .modal-backdrop.fade.in {
784
829
  .opacity(80);
785
830
  }
786
831
 
@@ -790,7 +835,7 @@ input[type=submit].btn {
790
835
  left: 50%;
791
836
  z-index: 11000;
792
837
  width: 560px;
793
- margin: -250px 0 0 -250px;
838
+ margin: -250px 0 0 -280px;
794
839
  background-color: @white;
795
840
  border: 1px solid #999;
796
841
  border: 1px solid rgba(0,0,0,.3);
@@ -812,6 +857,9 @@ input[type=submit].btn {
812
857
  .modal-body {
813
858
  padding: 15px;
814
859
  }
860
+ .modal-body form {
861
+ margin-bottom: 0;
862
+ }
815
863
  .modal-footer {
816
864
  background-color: #f5f5f5;
817
865
  padding: 14px 15px 15px;
@@ -826,6 +874,12 @@ input[type=submit].btn {
826
874
  }
827
875
  }
828
876
 
877
+ // Fix the stacking of these components when in modals
878
+ .modal .popover,
879
+ .modal .twipsy {
880
+ z-index: 12000;
881
+ }
882
+
829
883
 
830
884
  // POPOVER ARROWS
831
885
  // --------------
@@ -920,8 +974,8 @@ input[type=submit].btn {
920
974
  height: 0;
921
975
  }
922
976
  .inner {
923
- background-color: @black;
924
- background-color: rgba(0,0,0,.8);
977
+ background: @black;
978
+ background: rgba(0,0,0,.8);
925
979
  padding: 3px;
926
980
  overflow: hidden;
927
981
  width: 280px;
@@ -964,11 +1018,12 @@ input[type=submit].btn {
964
1018
 
965
1019
  .label {
966
1020
  padding: 1px 3px 2px;
967
- background-color: @grayLight;
968
1021
  font-size: @basefont * .75;
969
1022
  font-weight: bold;
970
1023
  color: @white;
971
1024
  text-transform: uppercase;
1025
+ white-space: nowrap;
1026
+ background-color: @grayLight;
972
1027
  .border-radius(3px);
973
1028
  &.important { background-color: #c43c35; }
974
1029
  &.warning { background-color: @orange; }
@@ -981,7 +1036,7 @@ input[type=submit].btn {
981
1036
  // -----------
982
1037
 
983
1038
  .media-grid {
984
- margin-left: -20px;
1039
+ margin-left: -@gridGutterWidth;
985
1040
  margin-bottom: 0;
986
1041
  .clearfix();
987
1042
  li {
@@ -990,7 +1045,7 @@ input[type=submit].btn {
990
1045
  a {
991
1046
  float: left;
992
1047
  padding: 4px;
993
- margin: 0 0 20px 20px;
1048
+ margin: 0 0 @baseline @gridGutterWidth;
994
1049
  border: 1px solid #ddd;
995
1050
  .border-radius(4px);
996
1051
  .box-shadow(0 1px 1px rgba(0,0,0,.075));
@@ -7,10 +7,8 @@
7
7
  // STRUCTURAL LAYOUT
8
8
  // -----------------
9
9
 
10
- html, body {
11
- background-color: @white;
12
- }
13
10
  body {
11
+ background-color: @white;
14
12
  margin: 0;
15
13
  #font > .sans-serif(normal,@basefont,@baseline);
16
14
  color: @grayDark;
@@ -29,7 +27,9 @@ body {
29
27
  padding-right: 20px;
30
28
  .clearfix();
31
29
  > .sidebar {
32
- float: left;
30
+ position: absolute;
31
+ top: 0;
32
+ left: 20px;
33
33
  width: 220px;
34
34
  }
35
35
  // TODO in v2: rename this and .popover .content to be more specific
@@ -77,12 +77,12 @@ a {
77
77
 
78
78
  .row {
79
79
  .clearfix();
80
- margin-left: -1 * @gridGutterWidth;
80
+ margin-left: -@gridGutterWidth;
81
81
  }
82
82
 
83
83
  // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
84
84
  // Credit to @dhg for the idea
85
- [class*="span"] {
85
+ .row > [class*="span"] {
86
86
  .gridColumn();
87
87
  }
88
88
 
@@ -115,18 +115,20 @@ a {
115
115
  .span24 { .columns(24); }
116
116
 
117
117
  // Offset column options
118
- .offset1 { .offset(1); }
119
- .offset2 { .offset(2); }
120
- .offset3 { .offset(3); }
121
- .offset4 { .offset(4); }
122
- .offset5 { .offset(5); }
123
- .offset6 { .offset(6); }
124
- .offset7 { .offset(7); }
125
- .offset8 { .offset(8); }
126
- .offset9 { .offset(9); }
127
- .offset10 { .offset(10); }
128
- .offset11 { .offset(11); }
129
- .offset12 { .offset(12); }
118
+ .row {
119
+ > .offset1 { .offset(1); }
120
+ > .offset2 { .offset(2); }
121
+ > .offset3 { .offset(3); }
122
+ > .offset4 { .offset(4); }
123
+ > .offset5 { .offset(5); }
124
+ > .offset6 { .offset(6); }
125
+ > .offset7 { .offset(7); }
126
+ > .offset8 { .offset(8); }
127
+ > .offset9 { .offset(9); }
128
+ > .offset10 { .offset(10); }
129
+ > .offset11 { .offset(11); }
130
+ > .offset12 { .offset(12); }
131
+ }
130
132
 
131
133
  // Unique column sizes for 16-column grid
132
134
  .span-one-third { width: 300px; }