compass-bootstrap 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. data/.gitignore +4 -0
  2. data/README.mkdn +112 -21
  3. data/lib/compass-bootstrap.rb +6 -1
  4. data/lib/compass-bootstrap/rails.rb +7 -0
  5. data/lib/compass-bootstrap/rails/engine.rb +7 -0
  6. data/lib/compass-bootstrap/version.rb +1 -1
  7. data/stylesheets/compass-bootstrap/_compass_bootstrap.scss +5 -2
  8. data/stylesheets/compass-bootstrap/_forms.scss +139 -67
  9. data/stylesheets/compass-bootstrap/_mixins.scss +210 -0
  10. data/stylesheets/compass-bootstrap/_patterns.scss +331 -146
  11. data/stylesheets/compass-bootstrap/_reset.scss +6 -2
  12. data/stylesheets/compass-bootstrap/_scaffolding.scss +89 -62
  13. data/stylesheets/compass-bootstrap/_tables.scss +35 -12
  14. data/stylesheets/compass-bootstrap/_type.scss +7 -8
  15. data/stylesheets/compass-bootstrap/_variables.scss +60 -0
  16. data/vendor/assets/javascripts/bootstrap-alerts.js +104 -0
  17. data/vendor/assets/javascripts/bootstrap-dropdown.js +50 -0
  18. data/vendor/assets/javascripts/bootstrap-modal.js +227 -0
  19. data/vendor/assets/javascripts/bootstrap-popover.js +77 -0
  20. data/vendor/assets/javascripts/bootstrap-scrollspy.js +105 -0
  21. data/vendor/assets/javascripts/bootstrap-tabs.js +62 -0
  22. data/vendor/assets/javascripts/bootstrap-twipsy.js +307 -0
  23. data/vendor/assets/stylesheets/compass-bootstrap/_compass_bootstrap.scss +29 -0
  24. data/{templates → vendor/assets/stylesheets}/compass-bootstrap/_forms.scss +139 -67
  25. data/vendor/assets/stylesheets/compass-bootstrap/_mixins.scss +210 -0
  26. data/{templates → vendor/assets/stylesheets}/compass-bootstrap/_patterns.scss +331 -146
  27. data/{templates → vendor/assets/stylesheets}/compass-bootstrap/_reset.scss +6 -2
  28. data/vendor/assets/stylesheets/compass-bootstrap/_scaffolding.scss +137 -0
  29. data/{templates → vendor/assets/stylesheets}/compass-bootstrap/_tables.scss +35 -12
  30. data/{templates → vendor/assets/stylesheets}/compass-bootstrap/_type.scss +7 -8
  31. data/vendor/assets/stylesheets/compass-bootstrap/_variables.scss +60 -0
  32. data/{templates → vendor/assets/stylesheets}/compass-bootstrap/compass_bootstrap.scss +5 -2
  33. data/vendor/assets/stylesheets/compass-bootstrap/manifest.rb +20 -0
  34. metadata +50 -61
  35. data/stylesheets/compass-bootstrap/_preboot.scss +0 -276
  36. data/templates/compass-bootstrap/_preboot.scss +0 -292
  37. data/templates/compass-bootstrap/_scaffolding.scss +0 -110
  38. data/templates/compass-bootstrap/manifest.rb +0 -12
@@ -1,5 +1,4 @@
1
- /* Reset.scss
2
-
1
+ /* Reset.less
3
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).
4
3
  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
5
4
 
@@ -31,6 +30,11 @@ html {
31
30
  a:focus {
32
31
  outline: thin dotted;
33
32
  }
33
+ // Hover & Active
34
+ a:hover,
35
+ a:active {
36
+ outline: 0;
37
+ }
34
38
 
35
39
  // Display in IE6-9 and FF3
36
40
  // -------------------------
@@ -4,82 +4,28 @@
4
4
  * ------------------------------------------------------------------------------------------- */
5
5
 
6
6
 
7
- // GRID SYSTEM
8
- // -----------
9
-
10
- .row {
11
- @include clearfix();
12
- margin-left: -1 * $gridGutterWidth;
13
-
14
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
15
- // Credit to $dhg for the idea
16
- [class*="span"] {
17
- display: inline;
18
- float: left;
19
- margin-left: $gridGutterWidth;
20
- }
21
-
22
- // Default columns
23
- .span1 { @include columns(1); }
24
- .span2 { @include columns(2); }
25
- .span3 { @include columns(3); }
26
- .span4 { @include columns(4); }
27
- .span5 { @include columns(5); }
28
- .span6 { @include columns(6); }
29
- .span7 { @include columns(7); }
30
- .span8 { @include columns(8); }
31
- .span9 { @include columns(9); }
32
- .span10 { @include columns(10); }
33
- .span11 { @include columns(11); }
34
- .span12 { @include columns(12); }
35
- .span13 { @include columns(13); }
36
- .span14 { @include columns(14); }
37
- .span15 { @include columns(15); }
38
- .span16 { @include offset(16); }
39
-
40
- // Offset column options
41
- .offset1 { @include offset(1); }
42
- .offset2 { @include offset(2); }
43
- .offset3 { @include offset(3); }
44
- .offset4 { @include offset(4); }
45
- .offset5 { @include offset(5); }
46
- .offset6 { @include offset(6); }
47
- .offset7 { @include offset(7); }
48
- .offset8 { @include offset(8); }
49
- .offset9 { @include offset(9); }
50
- .offset10 { @include offset(10); }
51
- .offset11 { @include offset(11); }
52
- .offset12 { @include offset(12); }
53
-
54
- // Unique column sizes for 16-column grid
55
- .span-one-third { width: 300px; }
56
- .span-two-thirds { width: 620px; }
57
- .offset-one-third { margin-left: 340px; }
58
- .offset-two-thirds { margin-left: 660px; }
59
- }
60
-
61
-
62
7
  // STRUCTURAL LAYOUT
63
8
  // -----------------
64
9
 
65
10
  html, body {
66
- background-color: #fff;
11
+ background-color: $white;
67
12
  }
68
13
  body {
69
14
  margin: 0;
70
- @include sans-serif(normal,$basefont,$baseline);
71
- color: $gray;
15
+ @include font-sans-serif(normal,$basefont,$baseline);
16
+ color: $grayDark;
72
17
  }
73
18
 
74
19
  // Container (centered, fixed-width layouts)
75
20
  .container {
76
- width: 940px;
77
- margin: 0 auto;
21
+ @include fixed-container();
78
22
  }
79
23
 
80
24
  // Fluid layouts (left aligned, with sidebar, min- & max-width content)
81
25
  .container-fluid {
82
- padding: 0 20px;
26
+ position: relative;
27
+ padding-left: 20px;
28
+ padding-right: 20px;
83
29
  @include clearfix();
84
30
  > .sidebar {
85
31
  float: left;
@@ -87,12 +33,21 @@ body {
87
33
  }
88
34
  // TODO in v2: rename this and .popover .content to be more specific
89
35
  > .content {
36
+ float: left;
90
37
  min-width: 700px;
91
38
  max-width: 1180px;
92
- margin-left: 240px;
39
+ margin-left: 20px;
93
40
  }
94
41
  }
95
42
 
43
+ // Toggling content
44
+ .hide {
45
+ display: none;
46
+ }
47
+ .show {
48
+ display: block;
49
+ }
50
+
96
51
 
97
52
  // BASE STYLES
98
53
  // -----------
@@ -108,3 +63,75 @@ a {
108
63
  text-decoration: underline;
109
64
  }
110
65
  }
66
+
67
+ // Quick floats
68
+ .pull-right {
69
+ float: right;
70
+ }
71
+ .pull-left {
72
+ float: left;
73
+ }
74
+
75
+
76
+ // GRID SYSTEM
77
+ // -----------
78
+ // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
79
+
80
+ .row {
81
+ @include clearfix();
82
+ margin-left: -1 * $gridGutterWidth;
83
+ }
84
+
85
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
86
+ // Credit to $dhg for the idea
87
+ [class*="span"] {
88
+ @include gridColumn();
89
+ }
90
+
91
+ // Default columns
92
+ .span1 { @include columns(1); }
93
+ .span2 { @include columns(2); }
94
+ .span3 { @include columns(3); }
95
+ .span4 { @include columns(4); }
96
+ .span5 { @include columns(5); }
97
+ .span6 { @include columns(6); }
98
+ .span7 { @include columns(7); }
99
+ .span8 { @include columns(8); }
100
+ .span9 { @include columns(9); }
101
+ .span10 { @include columns(10); }
102
+ .span11 { @include columns(11); }
103
+ .span12 { @include columns(12); }
104
+ .span13 { @include columns(13); }
105
+ .span14 { @include columns(14); }
106
+ .span15 { @include columns(15); }
107
+ .span16 { @include columns(16); }
108
+
109
+ // For optional 24-column grid
110
+ .span17 { @include columns(17); }
111
+ .span18 { @include columns(18); }
112
+ .span19 { @include columns(19); }
113
+ .span20 { @include columns(20); }
114
+ .span21 { @include columns(21); }
115
+ .span22 { @include columns(22); }
116
+ .span23 { @include columns(23); }
117
+ .span24 { @include columns(24); }
118
+
119
+ // Offset column options
120
+ .offset1 { @include offset(1); }
121
+ .offset2 { @include offset(2); }
122
+ .offset3 { @include offset(3); }
123
+ .offset4 { @include offset(4); }
124
+ .offset5 { @include offset(5); }
125
+ .offset6 { @include offset(6); }
126
+ .offset7 { @include offset(7); }
127
+ .offset8 { @include offset(8); }
128
+ .offset9 { @include offset(9); }
129
+ .offset10 { @include offset(10); }
130
+ .offset11 { @include offset(11); }
131
+ .offset12 { @include offset(12); }
132
+
133
+ // Unique column sizes for 16-column grid
134
+ .span-one-third { width: 300px; }
135
+ .span-two-thirds { width: 620px; }
136
+ .offset-one-third { margin-left: 340px; }
137
+ .offset-two-thirds { margin-left: 660px; }
@@ -1,5 +1,5 @@
1
1
  /*
2
- * Tables.scss
2
+ * Tables.less
3
3
  * Tables for, you guessed it, tabular data
4
4
  * ---------------------------------------- */
5
5
 
@@ -11,19 +11,43 @@ table {
11
11
  width: 100%;
12
12
  margin-bottom: $baseline;
13
13
  padding: 0;
14
- border-collapse: separate;
15
- font-size: 13px;
14
+ border-collapse: separate; // Done so we can round those corners!
15
+ *border-collapse: collapse; /* IE7, collapse table to remove spacing */
16
+ font-size: $basefont;
17
+ border: 1px solid #ddd;
18
+ @include border-radius(4px);
16
19
  th, td {
17
20
  padding: 10px 10px 9px;
18
- line-height: $baseline * .75;
21
+ line-height: $baseline;
19
22
  text-align: left;
20
- vertical-align: middle;
21
- border-bottom: 1px solid #ddd;
22
23
  }
23
24
  th {
24
25
  padding-top: 9px;
25
26
  font-weight: bold;
26
- border-bottom-width: 2px;
27
+ vertical-align: middle;
28
+ border-bottom: 1px solid #ddd;
29
+ }
30
+ td {
31
+ vertical-align: top;
32
+ }
33
+ th + th,
34
+ td + td {
35
+ border-left: 1px solid #ddd;
36
+ }
37
+ tr + tr td {
38
+ border-top: 1px solid #ddd;
39
+ }
40
+ tbody tr:first-child td:first-child {
41
+ @include border-radius(4px 0 0 0);
42
+ }
43
+ tbody tr:first-child td:last-child {
44
+ @include border-radius(0 4px 0 0);
45
+ }
46
+ tbody tr:last-child td:first-child {
47
+ @include border-radius(0 0 0 4px);
48
+ }
49
+ tbody tr:last-child td:last-child {
50
+ @include border-radius(0 0 4px 0);
27
51
  }
28
52
  }
29
53
 
@@ -60,7 +84,6 @@ table {
60
84
  .headerSortDown {
61
85
  background-color: rgba(141,192,219,.25);
62
86
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
63
- @include border-radius(3px 3px 0 0);
64
87
  }
65
88
  // Style the ascending (reverse alphabetical) column header
66
89
  .header:hover {
@@ -73,7 +96,7 @@ table {
73
96
  .headerSortDown:hover {
74
97
  &:after {
75
98
  visibility:visible;
76
- @include bt-opacity(60);
99
+ @include opacity(60);
77
100
  }
78
101
  }
79
102
  // Style the ascending (reverse alphabetical) column header
@@ -84,8 +107,8 @@ table {
84
107
  border-right: 4px solid transparent;
85
108
  border-top: 4px solid #000;
86
109
  visibility:visible;
87
- @include bt-box-shadow(none); //can't add boxshadow to downward facing arrow :(
88
- @include bt-opacity(60);
110
+ @include box-shadow(none); //can't add boxshadow to downward facing arrow :(
111
+ @include opacity(60);
89
112
  }
90
113
  }
91
114
  }
@@ -145,4 +168,4 @@ table {
145
168
  .headerSortDown.purple {
146
169
  background-color: lighten($purple, 40%);
147
170
  }
148
- }
171
+ }
@@ -1,4 +1,4 @@
1
- /* Typography.scss
1
+ /* Typography.less
2
2
  * Headings, body text, lists, code, and more for a versatile and durable typography system
3
3
  * ---------------------------------------------------------------------------------------- */
4
4
 
@@ -7,7 +7,7 @@
7
7
  // ---------
8
8
 
9
9
  p {
10
- @include shorthand(normal,$basefont,$baseline);
10
+ @include font-shorthand(normal,$basefont,$baseline);
11
11
  margin-bottom: $baseline / 2;
12
12
  small {
13
13
  font-size: $basefont - 2;
@@ -113,7 +113,7 @@ dl {
113
113
 
114
114
  // Horizontal rules
115
115
  hr {
116
- margin: 0 0 19px;
116
+ margin: 20px 0 19px;
117
117
  border: 0;
118
118
  border-bottom: 1px solid #eee;
119
119
  }
@@ -122,7 +122,6 @@ hr {
122
122
  strong {
123
123
  font-style: inherit;
124
124
  font-weight: bold;
125
- line-height: inherit;
126
125
  }
127
126
  em {
128
127
  font-style: italic;
@@ -139,12 +138,12 @@ blockquote {
139
138
  border-left: 5px solid #eee;
140
139
  padding-left: 15px;
141
140
  p {
142
- @include shorthand(300,14px,$baseline);
141
+ @include font-shorthand(300,14px,$baseline);
143
142
  margin-bottom: 0;
144
143
  }
145
144
  small {
146
145
  display: block;
147
- @include shorthand(300,12px,$baseline);
146
+ @include font-shorthand(300,12px,$baseline);
148
147
  color: $grayLight;
149
148
  &:before {
150
149
  content: '\2014 \00A0';
@@ -174,7 +173,7 @@ code {
174
173
  pre {
175
174
  background-color: #f5f5f5;
176
175
  display: block;
177
- padding: $baseline - 1;
176
+ padding: ($baseline - 1) / 2;
178
177
  margin: 0 0 $baseline;
179
178
  line-height: $baseline;
180
179
  font-size: 12px;
@@ -185,4 +184,4 @@ pre {
185
184
  white-space: pre-wrap;
186
185
  word-wrap: break-word;
187
186
 
188
- }
187
+ }
@@ -0,0 +1,60 @@
1
+ /* Variables.less
2
+ * Variables to customize the look and feel of Bootstrap
3
+ * ----------------------------------------------------- */
4
+
5
+
6
+ // Links
7
+ $linkColor: #0069d6 !default;
8
+ $linkColorHover: darken($linkColor, 15) !default;
9
+
10
+ // Grays
11
+ $black: #000 !default;
12
+ $grayDark: lighten($black, 25%) !default;
13
+ $gray: lighten($black, 50%) !default;
14
+ $grayLight: lighten($black, 75%) !default;
15
+ $grayLighter: lighten($black, 90%) !default;
16
+ $white: #fff !default;
17
+
18
+ // Accent Colors
19
+ $blue: #049CDB !default;
20
+ $blueDark: #0064CD !default;
21
+ $green: #46a546 !default;
22
+ $red: #9d261d !default;
23
+ $yellow: #ffc40d !default;
24
+ $orange: #f89406 !default;
25
+ $pink: #c3325f !default;
26
+ $purple: #7a43b6 !default;
27
+
28
+ // Baseline grid
29
+ $basefont: 13px !default;
30
+ $baseline: 18px !default;
31
+
32
+ // Griditude
33
+ // Modify the grid styles in mixins.less
34
+ $gridColumns: 16 !default;
35
+ $gridColumnWidth: 40px !default;
36
+ $gridGutterWidth: 20px !default;
37
+ $extraSpace: ($gridGutterWidth * 2) !default; // For our grid calculations
38
+ $siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
39
+
40
+ // Color Scheme
41
+ // Use this to roll your own color schemes if you like (unused by Bootstrap by default)
42
+ $baseColor: $blue !default; // Set a base color
43
+ $complement: spin($baseColor, 180) !default; // Determine a complementary color
44
+ $split1: spin($baseColor, 158) !default; // Split complements
45
+ $split2: spin($baseColor, -158) !default;
46
+ $triad1: spin($baseColor, 135) !default; // Triads colors
47
+ $triad2: spin($baseColor, -135) !default;
48
+ $tetra1: spin($baseColor, 90) !default; // Tetra colors
49
+ $tetra2: spin($baseColor, -90) !default;
50
+ $analog1: spin($baseColor, 22) !default; // Analogs colors
51
+ $analog2: spin($baseColor, -22) !default;
52
+
53
+
54
+
55
+ // More variables coming soon:
56
+ // - $basefont to $baseFontSize
57
+ // - $baseline to $baseLineHeight
58
+ // - $baseFontFamily
59
+ // - $primaryButtonColor
60
+ // - anything else? File an issue on GitHub
@@ -0,0 +1,104 @@
1
+ /* ==========================================================
2
+ * bootstrap-alerts.js v1.3.0
3
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
4
+ * ==========================================================
5
+ * Copyright 2011 Twitter, Inc.
6
+ *
7
+ * Licensed under the Apache License, Version 2.0 (the "License");
8
+ * you may not use this file except in compliance with the License.
9
+ * You may obtain a copy of the License at
10
+ *
11
+ * http://www.apache.org/licenses/LICENSE-2.0
12
+ *
13
+ * Unless required by applicable law or agreed to in writing, software
14
+ * distributed under the License is distributed on an "AS IS" BASIS,
15
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
+ * See the License for the specific language governing permissions and
17
+ * limitations under the License.
18
+ * ========================================================== */
19
+
20
+
21
+ (function( $ ){
22
+
23
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
24
+ * ======================================================= */
25
+
26
+ var transitionEnd
27
+
28
+ $(document).ready(function () {
29
+
30
+ $.support.transition = (function () {
31
+ var thisBody = document.body || document.documentElement
32
+ , thisStyle = thisBody.style
33
+ , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
34
+ return support
35
+ })()
36
+
37
+ // set CSS transition event type
38
+ if ( $.support.transition ) {
39
+ transitionEnd = "TransitionEnd"
40
+ if ( $.browser.webkit ) {
41
+ transitionEnd = "webkitTransitionEnd"
42
+ } else if ( $.browser.mozilla ) {
43
+ transitionEnd = "transitionend"
44
+ } else if ( $.browser.opera ) {
45
+ transitionEnd = "oTransitionEnd"
46
+ }
47
+ }
48
+
49
+ })
50
+
51
+ /* ALERT CLASS DEFINITION
52
+ * ====================== */
53
+
54
+ var Alert = function ( content, selector ) {
55
+ this.$element = $(content)
56
+ .delegate(selector || '.close', 'click', this.close)
57
+ }
58
+
59
+ Alert.prototype = {
60
+
61
+ close: function (e) {
62
+ var $element = $(this).parent('.alert-message')
63
+
64
+ e && e.preventDefault()
65
+ $element.removeClass('in')
66
+
67
+ function removeElement () {
68
+ $element.remove()
69
+ }
70
+
71
+ $.support.transition && $element.hasClass('fade') ?
72
+ $element.bind(transitionEnd, removeElement) :
73
+ removeElement()
74
+ }
75
+
76
+ }
77
+
78
+
79
+ /* ALERT PLUGIN DEFINITION
80
+ * ======================= */
81
+
82
+ $.fn.alert = function ( options ) {
83
+
84
+ if ( options === true ) {
85
+ return this.data('alert')
86
+ }
87
+
88
+ return this.each(function () {
89
+ var $this = $(this)
90
+
91
+ if ( typeof options == 'string' ) {
92
+ return $this.data('alert')[options]()
93
+ }
94
+
95
+ $(this).data('alert', new Alert( this ))
96
+
97
+ })
98
+ }
99
+
100
+ $(document).ready(function () {
101
+ new Alert($('body'), '.alert-message[data-alert] .close')
102
+ })
103
+
104
+ })( window.jQuery || window.ender )