compass_twitter_bootstrap 0.1.4 → 0.1.5
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.
- data/.gitignore +1 -0
- data/README.md +23 -0
- data/lib/compass_twitter_bootstrap/version.rb +1 -1
- data/lib/compass_twitter_bootstrap.rb +1 -1
- data/stylesheets/_compass_twitter_bootstrap.scss +7 -3
- data/stylesheets/compass_twitter_bootstrap/_forms.scss +135 -63
- data/stylesheets/compass_twitter_bootstrap/{_preboot.scss → _mixins.scss} +69 -109
- data/stylesheets/compass_twitter_bootstrap/_patterns.scss +277 -93
- data/stylesheets/compass_twitter_bootstrap/_reset.scss +5 -0
- data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss +88 -64
- data/stylesheets/compass_twitter_bootstrap/_tables.scss +30 -7
- data/stylesheets/compass_twitter_bootstrap/_type.scss +3 -3
- data/stylesheets/compass_twitter_bootstrap/_variables.scss +60 -0
- metadata +8 -7
|
@@ -4,92 +4,36 @@
|
|
|
4
4
|
* ------------------------------------------------------------------------------------------- */
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
// GRID SYSTEM
|
|
8
|
-
// -----------
|
|
9
|
-
|
|
10
|
-
.row {
|
|
11
|
-
@include cft();
|
|
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 columns(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:
|
|
11
|
+
background-color: $white;
|
|
67
12
|
}
|
|
68
13
|
body {
|
|
69
14
|
margin: 0;
|
|
70
15
|
@include sans-serif(normal,$basefont,$baseline);
|
|
71
|
-
color: $
|
|
16
|
+
color: $grayDark;
|
|
72
17
|
}
|
|
73
18
|
|
|
74
19
|
// Container (centered, fixed-width layouts)
|
|
75
20
|
.container {
|
|
76
|
-
|
|
77
|
-
margin: 0 auto;
|
|
78
|
-
@include cft();
|
|
21
|
+
@include fixed-container();
|
|
79
22
|
}
|
|
80
23
|
|
|
81
24
|
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
|
82
25
|
.container-fluid {
|
|
83
|
-
|
|
84
|
-
|
|
26
|
+
position: relative;
|
|
27
|
+
min-width: 940px;
|
|
28
|
+
padding-left: 20px;
|
|
29
|
+
padding-right: 20px;
|
|
30
|
+
@include clearfix();
|
|
85
31
|
> .sidebar {
|
|
86
32
|
float: left;
|
|
87
33
|
width: 220px;
|
|
88
34
|
}
|
|
89
35
|
// TODO in v2: rename this and .popover .content to be more specific
|
|
90
36
|
> .content {
|
|
91
|
-
min-width: 700px;
|
|
92
|
-
max-width: 1180px;
|
|
93
37
|
margin-left: 240px;
|
|
94
38
|
}
|
|
95
39
|
}
|
|
@@ -109,3 +53,83 @@ a {
|
|
|
109
53
|
text-decoration: underline;
|
|
110
54
|
}
|
|
111
55
|
}
|
|
56
|
+
|
|
57
|
+
// Quick floats
|
|
58
|
+
.pull-right {
|
|
59
|
+
float: right;
|
|
60
|
+
}
|
|
61
|
+
.pull-left {
|
|
62
|
+
float: left;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Toggling content
|
|
66
|
+
.hide {
|
|
67
|
+
display: none;
|
|
68
|
+
}
|
|
69
|
+
.show {
|
|
70
|
+
display: block;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
// GRID SYSTEM
|
|
75
|
+
// -----------
|
|
76
|
+
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
|
|
77
|
+
|
|
78
|
+
.row {
|
|
79
|
+
@include clearfix();
|
|
80
|
+
margin-left: -1 * $gridGutterWidth;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
|
|
84
|
+
// Credit to $dhg for the idea
|
|
85
|
+
[class*="span"] {
|
|
86
|
+
@include gridColumn();
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Default columns
|
|
90
|
+
.span1 { @include columns(1); }
|
|
91
|
+
.span2 { @include columns(2); }
|
|
92
|
+
.span3 { @include columns(3); }
|
|
93
|
+
.span4 { @include columns(4); }
|
|
94
|
+
.span5 { @include columns(5); }
|
|
95
|
+
.span6 { @include columns(6); }
|
|
96
|
+
.span7 { @include columns(7); }
|
|
97
|
+
.span8 { @include columns(8); }
|
|
98
|
+
.span9 { @include columns(9); }
|
|
99
|
+
.span10 { @include columns(10); }
|
|
100
|
+
.span11 { @include columns(11); }
|
|
101
|
+
.span12 { @include columns(12); }
|
|
102
|
+
.span13 { @include columns(13); }
|
|
103
|
+
.span14 { @include columns(14); }
|
|
104
|
+
.span15 { @include columns(15); }
|
|
105
|
+
.span16 { @include columns(16); }
|
|
106
|
+
|
|
107
|
+
// For optional 24-column grid
|
|
108
|
+
.span17 { @include columns(17); }
|
|
109
|
+
.span18 { @include columns(18); }
|
|
110
|
+
.span19 { @include columns(19); }
|
|
111
|
+
.span20 { @include columns(20); }
|
|
112
|
+
.span21 { @include columns(21); }
|
|
113
|
+
.span22 { @include columns(22); }
|
|
114
|
+
.span23 { @include columns(23); }
|
|
115
|
+
.span24 { @include columns(24); }
|
|
116
|
+
|
|
117
|
+
// Offset column options
|
|
118
|
+
.offset1 { @include offset(1); }
|
|
119
|
+
.offset2 { @include offset(2); }
|
|
120
|
+
.offset3 { @include offset(3); }
|
|
121
|
+
.offset4 { @include offset(4); }
|
|
122
|
+
.offset5 { @include offset(5); }
|
|
123
|
+
.offset6 { @include offset(6); }
|
|
124
|
+
.offset7 { @include offset(7); }
|
|
125
|
+
.offset8 { @include offset(8); }
|
|
126
|
+
.offset9 { @include offset(9); }
|
|
127
|
+
.offset10 { @include offset(10); }
|
|
128
|
+
.offset11 { @include offset(11); }
|
|
129
|
+
.offset12 { @include offset(12); }
|
|
130
|
+
|
|
131
|
+
// Unique column sizes for 16-column grid
|
|
132
|
+
.span-one-third { width: 300px; }
|
|
133
|
+
.span-two-thirds { width: 620px; }
|
|
134
|
+
.offset-one-third { margin-left: 340px; }
|
|
135
|
+
.offset-two-thirds { margin-left: 660px; }
|
|
@@ -11,19 +11,43 @@ table {
|
|
|
11
11
|
width: 100%;
|
|
12
12
|
margin-bottom: $baseline;
|
|
13
13
|
padding: 0;
|
|
14
|
-
border-collapse: separate;
|
|
15
|
-
|
|
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
|
|
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
|
-
|
|
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 {
|
|
@@ -113,7 +113,7 @@ dl {
|
|
|
113
113
|
|
|
114
114
|
// Horizontal rules
|
|
115
115
|
hr {
|
|
116
|
-
margin:
|
|
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;
|
|
@@ -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;
|
|
@@ -184,4 +183,5 @@ pre {
|
|
|
184
183
|
white-space: pre;
|
|
185
184
|
white-space: pre-wrap;
|
|
186
185
|
word-wrap: break-word;
|
|
186
|
+
|
|
187
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;
|
|
8
|
+
$linkColorHover: darken($linkColor, 15);
|
|
9
|
+
|
|
10
|
+
// Grays
|
|
11
|
+
$black: #000;
|
|
12
|
+
$grayDark: lighten($black, 25%);
|
|
13
|
+
$gray: lighten($black, 50%);
|
|
14
|
+
$grayLight: lighten($black, 75%);
|
|
15
|
+
$grayLighter: lighten($black, 90%);
|
|
16
|
+
$white: #fff;
|
|
17
|
+
|
|
18
|
+
// Accent Colors
|
|
19
|
+
$blue: #049CDB;
|
|
20
|
+
$blueDark: #0064CD;
|
|
21
|
+
$green: #46a546;
|
|
22
|
+
$red: #9d261d;
|
|
23
|
+
$yellow: #ffc40d;
|
|
24
|
+
$orange: #f89406;
|
|
25
|
+
$pink: #c3325f;
|
|
26
|
+
$purple: #7a43b6;
|
|
27
|
+
|
|
28
|
+
// Baseline grid
|
|
29
|
+
$basefont: 13px;
|
|
30
|
+
$baseline: 18px;
|
|
31
|
+
|
|
32
|
+
// Griditude
|
|
33
|
+
// Modify the grid styles in mixins.less
|
|
34
|
+
$gridColumns: 16;
|
|
35
|
+
$gridColumnWidth: 40px;
|
|
36
|
+
$gridGutterWidth: 20px;
|
|
37
|
+
$extraSpace: ($gridGutterWidth * 2); // For our grid calculations
|
|
38
|
+
$siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
|
|
39
|
+
|
|
40
|
+
// Color Scheme
|
|
41
|
+
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
|
|
42
|
+
$baseColor: $blue; // Set a base color
|
|
43
|
+
$complement: adjust-hue($baseColor, 180); // Determine a complementary color
|
|
44
|
+
$split1: adjust-hue($baseColor, 158); // Split complements
|
|
45
|
+
$split2: adjust-hue($baseColor, -158);
|
|
46
|
+
$triad1: adjust-hue($baseColor, 135); // Triads colors
|
|
47
|
+
$triad2: adjust-hue($baseColor, -135);
|
|
48
|
+
$tetra1: adjust-hue($baseColor, 90); // Tetra colors
|
|
49
|
+
$tetra2: adjust-hue($baseColor, -90);
|
|
50
|
+
$analog1: adjust-hue($baseColor, 22); // Analogs colors
|
|
51
|
+
$analog2: adjust-hue($baseColor, -22);
|
|
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
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: compass_twitter_bootstrap
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.5
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,11 +9,11 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2011-09-
|
|
12
|
+
date: 2011-09-18 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: compass
|
|
16
|
-
requirement: &
|
|
16
|
+
requirement: &70282139108620 !ruby/object:Gem::Requirement
|
|
17
17
|
none: false
|
|
18
18
|
requirements:
|
|
19
19
|
- - ! '>='
|
|
@@ -21,7 +21,7 @@ dependencies:
|
|
|
21
21
|
version: '0'
|
|
22
22
|
type: :runtime
|
|
23
23
|
prerelease: false
|
|
24
|
-
version_requirements: *
|
|
24
|
+
version_requirements: *70282139108620
|
|
25
25
|
description: Compass/SCSS version of the twitter bootstrap
|
|
26
26
|
email:
|
|
27
27
|
- vrwaller@gmail.com
|
|
@@ -38,12 +38,13 @@ files:
|
|
|
38
38
|
- lib/compass_twitter_bootstrap/version.rb
|
|
39
39
|
- stylesheets/_compass_twitter_bootstrap.scss
|
|
40
40
|
- stylesheets/compass_twitter_bootstrap/_forms.scss
|
|
41
|
+
- stylesheets/compass_twitter_bootstrap/_mixins.scss
|
|
41
42
|
- stylesheets/compass_twitter_bootstrap/_patterns.scss
|
|
42
|
-
- stylesheets/compass_twitter_bootstrap/_preboot.scss
|
|
43
43
|
- stylesheets/compass_twitter_bootstrap/_reset.scss
|
|
44
44
|
- stylesheets/compass_twitter_bootstrap/_scaffolding.scss
|
|
45
45
|
- stylesheets/compass_twitter_bootstrap/_tables.scss
|
|
46
46
|
- stylesheets/compass_twitter_bootstrap/_type.scss
|
|
47
|
+
- stylesheets/compass_twitter_bootstrap/_variables.scss
|
|
47
48
|
homepage: https://github.com/vwall/compass-twitter-bootstrap
|
|
48
49
|
licenses: []
|
|
49
50
|
post_install_message:
|
|
@@ -58,7 +59,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
58
59
|
version: '0'
|
|
59
60
|
segments:
|
|
60
61
|
- 0
|
|
61
|
-
hash:
|
|
62
|
+
hash: 2213838597307085212
|
|
62
63
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
63
64
|
none: false
|
|
64
65
|
requirements:
|
|
@@ -67,7 +68,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
67
68
|
version: '0'
|
|
68
69
|
segments:
|
|
69
70
|
- 0
|
|
70
|
-
hash:
|
|
71
|
+
hash: 2213838597307085212
|
|
71
72
|
requirements: []
|
|
72
73
|
rubyforge_project:
|
|
73
74
|
rubygems_version: 1.8.10
|