sass_twitter_bootstrap 0.1.alpha.1

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 (42) hide show
  1. data/README.markdown +59 -0
  2. data/lib/sass_twitter_bootstrap.rb +3 -0
  3. data/stylesheets/_bootstrap.sass +67 -0
  4. data/stylesheets/sass_twitter_bootstrap/_accordion.sass +24 -0
  5. data/stylesheets/sass_twitter_bootstrap/_alerts.sass +65 -0
  6. data/stylesheets/sass_twitter_bootstrap/_bootstrap.sass +1 -0
  7. data/stylesheets/sass_twitter_bootstrap/_breadcrumbs.sass +18 -0
  8. data/stylesheets/sass_twitter_bootstrap/_button-groups.sass +129 -0
  9. data/stylesheets/sass_twitter_bootstrap/_buttons.sass +166 -0
  10. data/stylesheets/sass_twitter_bootstrap/_carousel.sass +95 -0
  11. data/stylesheets/sass_twitter_bootstrap/_close.sass +16 -0
  12. data/stylesheets/sass_twitter_bootstrap/_code.sass +51 -0
  13. data/stylesheets/sass_twitter_bootstrap/_component-animations.sass +16 -0
  14. data/stylesheets/sass_twitter_bootstrap/_dropdowns.sass +120 -0
  15. data/stylesheets/sass_twitter_bootstrap/_forms.sass +482 -0
  16. data/stylesheets/sass_twitter_bootstrap/_grid.sass +8 -0
  17. data/stylesheets/sass_twitter_bootstrap/_hero-unit.sass +17 -0
  18. data/stylesheets/sass_twitter_bootstrap/_labels.sass +42 -0
  19. data/stylesheets/sass_twitter_bootstrap/_layouts.sass +14 -0
  20. data/stylesheets/sass_twitter_bootstrap/_mixins.sass +487 -0
  21. data/stylesheets/sass_twitter_bootstrap/_modals.sass +84 -0
  22. data/stylesheets/sass_twitter_bootstrap/_navbar.sass +268 -0
  23. data/stylesheets/sass_twitter_bootstrap/_navs.sass +326 -0
  24. data/stylesheets/sass_twitter_bootstrap/_pager.sass +29 -0
  25. data/stylesheets/sass_twitter_bootstrap/_pagination.sass +53 -0
  26. data/stylesheets/sass_twitter_bootstrap/_popovers.sass +55 -0
  27. data/stylesheets/sass_twitter_bootstrap/_print.sass +15 -0
  28. data/stylesheets/sass_twitter_bootstrap/_progress-bars.sass +89 -0
  29. data/stylesheets/sass_twitter_bootstrap/_reset.sass +130 -0
  30. data/stylesheets/sass_twitter_bootstrap/_scaffolding.sass +25 -0
  31. data/stylesheets/sass_twitter_bootstrap/_sprites.sass +394 -0
  32. data/stylesheets/sass_twitter_bootstrap/_tables.sass +134 -0
  33. data/stylesheets/sass_twitter_bootstrap/_thumbnails.sass +34 -0
  34. data/stylesheets/sass_twitter_bootstrap/_tooltip.sass +43 -0
  35. data/stylesheets/sass_twitter_bootstrap/_type.sass +193 -0
  36. data/stylesheets/sass_twitter_bootstrap/_utilities.sass +20 -0
  37. data/stylesheets/sass_twitter_bootstrap/_variables.sass +101 -0
  38. data/stylesheets/sass_twitter_bootstrap/_wells.sass +15 -0
  39. data/templates/project/bootstrap.sass +67 -0
  40. data/templates/project/manifest.rb +20 -0
  41. data/templates/project/responsive.sass +255 -0
  42. metadata +110 -0
@@ -0,0 +1,134 @@
1
+ // TABLES
2
+ // Tables for, you guessed it, tabular data
3
+ // ----------------------------------------
4
+
5
+ // BASE TABLES
6
+ // -----------------
7
+
8
+ table
9
+ max-width: 100%
10
+ border-collapse: collapse
11
+ border-spacing: 0
12
+
13
+ // BASELINE STYLES
14
+ // ---------------
15
+
16
+ .table
17
+ width: 100%
18
+ margin-bottom: $baseLineHeight
19
+ // Cells
20
+ th,
21
+ td
22
+ padding: 8px
23
+ line-height: $baseLineHeight
24
+ text-align: left
25
+ vertical-align: top
26
+ border-top: 1px solid #ddd
27
+ th
28
+ font-weight: bold
29
+ // Bottom align for column headings
30
+ thead th
31
+ vertical-align: bottom
32
+ // Remove top border from thead by default
33
+ thead:first-child tr th,
34
+ thead:first-child tr td
35
+ border-top: 0
36
+ // Account for multiple tbody instances
37
+ tbody + tbody
38
+ border-top: 2px solid #ddd
39
+
40
+ // CONDENSED TABLE W/ HALF PADDING
41
+ // -------------------------------
42
+
43
+ .table-condensed
44
+ th,
45
+ td
46
+ padding: 4px 5px
47
+
48
+ // BORDERED VERSION
49
+ // ----------------
50
+
51
+ .table-bordered
52
+ border: 1px solid #ddd
53
+ border-collapse: separate
54
+ // Done so we can round those corners!
55
+ *border-collapse: collapsed
56
+ // IE7 can't round corners anyway
57
+ +border-radius(4px)
58
+ th + th,
59
+ td + td,
60
+ th + td,
61
+ td + th
62
+ border-left: 1px solid #ddd
63
+ // Prevent a double border
64
+ thead:first-child tr:first-child th,
65
+ tbody:first-child tr:first-child th,
66
+ tbody:first-child tr:first-child td
67
+ border-top: 0
68
+ // For first th or td in the first row in the first thead or tbody
69
+ thead:first-child tr:first-child th:first-child,
70
+ tbody:first-child tr:first-child td:first-child
71
+ +border-radius(4px 0 0 0)
72
+ thead:first-child tr:first-child th:last-child,
73
+ tbody:first-child tr:first-child td:last-child
74
+ +border-radius(0 4px 0 0)
75
+ // For first th or td in the first row in the first thead or tbody
76
+ thead:last-child tr:last-child th:first-child,
77
+ tbody:last-child tr:last-child td:first-child
78
+ +border-radius(0 0 0 4px)
79
+ thead:last-child tr:last-child th:last-child,
80
+ tbody:last-child tr:last-child td:last-child
81
+ +border-radius(0 0 4px 0)
82
+
83
+ // ZEBRA-STRIPING
84
+ // --------------
85
+
86
+ // Default zebra-stripe styles (alternating gray and transparent backgrounds)
87
+ .table-striped
88
+ tbody
89
+ tr:nth-child(odd) td,
90
+ tr:nth-child(odd) th
91
+ background-color: #f9f9f9
92
+
93
+ // HOVER EFFECT
94
+ // ------------
95
+ // Placed here since it has to come after the potential zebra striping
96
+ .table
97
+ tbody tr:hover td,
98
+ tbody tr:hover th
99
+ background-color: #f5f5f5
100
+
101
+ // TABLE CELL SIZING
102
+ // -----------------
103
+
104
+ // Change the columns
105
+ =tableColumns($columnSpan: 1)
106
+ float: none
107
+ width: $gridColumnWidth * $columnSpan + $gridGutterWidth * ($columnSpan - 1) - 16
108
+ margin-left: 0
109
+
110
+ table
111
+ .span1
112
+ +tableColumns(1)
113
+ .span2
114
+ +tableColumns(2)
115
+ .span3
116
+ +tableColumns(3)
117
+ .span4
118
+ +tableColumns(4)
119
+ .span5
120
+ +tableColumns(5)
121
+ .span6
122
+ +tableColumns(6)
123
+ .span7
124
+ +tableColumns(7)
125
+ .span8
126
+ +tableColumns(8)
127
+ .span9
128
+ +tableColumns(9)
129
+ .span10
130
+ +tableColumns(10)
131
+ .span11
132
+ +tableColumns(11)
133
+ .span12
134
+ +tableColumns(12)
@@ -0,0 +1,34 @@
1
+ // THUMBNAILS
2
+ // ----------
3
+
4
+ .thumbnails
5
+ margin-left: -$gridGutterWidth
6
+ list-style: none
7
+ +clearfix
8
+
9
+ .thumbnails > li
10
+ float: left
11
+ margin: 0 0 $baseLineHeight $gridGutterWidth
12
+
13
+ .thumbnail
14
+ display: block
15
+ padding: 4px
16
+ line-height: 1
17
+ border: 1px solid #ddd
18
+ +border-radius(4px)
19
+ +box-shadow(0 1px 1px rgba(0, 0, 0, 0.075))
20
+
21
+ // Add a hover state for linked versions only
22
+ a.thumbnail:hover
23
+ border-color: $linkColor
24
+ +box-shadow(0 1px 4px rgba(0, 105, 214, 0.25))
25
+
26
+ // Images and captions
27
+ .thumbnail > img
28
+ display: block
29
+ max-width: 100%
30
+ margin-left: auto
31
+ margin-right: auto
32
+
33
+ .thumbnail .caption
34
+ padding: 9px
@@ -0,0 +1,43 @@
1
+ // TOOLTIP
2
+ // -------
3
+
4
+ .tooltip
5
+ position: absolute
6
+ z-index: $zindexTooltip
7
+ display: block
8
+ visibility: visible
9
+ padding: 5px
10
+ font-size: 11px
11
+ +opacity(0)
12
+ &.in
13
+ +opacity(80)
14
+ &.top
15
+ margin-top: -2px
16
+ &.right
17
+ margin-left: 2px
18
+ &.bottom
19
+ margin-top: 2px
20
+ &.left
21
+ margin-left: -2px
22
+ &.top .tooltip-arrow
23
+ +popoverArrow-top
24
+ &.left .tooltip-arrow
25
+ +popoverArrow-left
26
+ &.bottom .tooltip-arrow
27
+ +popoverArrow-bottom
28
+ &.right .tooltip-arrow
29
+ +popoverArrow-right
30
+
31
+ .tooltip-inner
32
+ max-width: 200px
33
+ padding: 3px 8px
34
+ color: $white
35
+ text-align: center
36
+ text-decoration: none
37
+ background-color: $black
38
+ +border-radius(4px)
39
+
40
+ .tooltip-arrow
41
+ position: absolute
42
+ width: 0
43
+ height: 0
@@ -0,0 +1,193 @@
1
+ // TYPOGRAPHY
2
+ // Headings, body text, lists, code, and more for a versatile and durable typography system
3
+ // ----------------------------------------------------------------------------------------
4
+
5
+ // BODY TEXT
6
+ // ---------
7
+
8
+ p
9
+ margin: 0 0 $baseLineHeight / 2
10
+ font-family: $baseFontFamily
11
+ font-size: $baseFontSize
12
+ line-height: $baseLineHeight
13
+ small
14
+ font-size: $baseFontSize - 2
15
+ color: $grayLight
16
+
17
+ .lead
18
+ margin-bottom: $baseLineHeight
19
+ font-size: 20px
20
+ font-weight: 200
21
+ line-height: $baseLineHeight * 1.5
22
+
23
+ // HEADINGS
24
+ // --------
25
+
26
+ h1, h2, h3, h4, h5, h6
27
+ margin: 0
28
+ font-weight: bold
29
+ color: $grayDark
30
+ text-rendering: optimizelegibility
31
+ // Fix the character spacing for headings
32
+ small
33
+ font-weight: normal
34
+ color: $grayLight
35
+
36
+ h1
37
+ font-size: 30px
38
+ line-height: $baseLineHeight * 2
39
+ small
40
+ font-size: 18px
41
+
42
+ h2
43
+ font-size: 24px
44
+ line-height: $baseLineHeight * 2
45
+ small
46
+ font-size: 18px
47
+
48
+ h3
49
+ line-height: $baseLineHeight * 1.5
50
+ font-size: 18px
51
+ small
52
+ font-size: 14px
53
+
54
+ h4, h5, h6
55
+ line-height: $baseLineHeight
56
+
57
+ h4
58
+ font-size: 14px
59
+ small
60
+ font-size: 12px
61
+
62
+ h5
63
+ font-size: 12px
64
+
65
+ h6
66
+ font-size: 11px
67
+ color: $grayLight
68
+ text-transform: uppercase
69
+
70
+ // Page header
71
+ .page-header
72
+ padding-bottom: $baseLineHeight - 1
73
+ margin: $baseLineHeight 0
74
+ border-bottom: 1px solid $grayLighter
75
+
76
+ .page-header h1
77
+ line-height: 1
78
+
79
+ // LISTS
80
+ // -----
81
+
82
+ // Unordered and Ordered lists
83
+ ul, ol
84
+ padding: 0
85
+ margin: 0 0 $baseLineHeight / 2 25px
86
+
87
+ ul ul,
88
+ ul ol,
89
+ ol ol,
90
+ ol ul
91
+ margin-bottom: 0
92
+
93
+ ul
94
+ list-style: disc
95
+
96
+ ol
97
+ list-style: decimal
98
+
99
+ li
100
+ line-height: $baseLineHeight
101
+
102
+ ul.unstyled,
103
+ ol.unstyled
104
+ margin-left: 0
105
+ list-style: none
106
+
107
+ // Description Lists
108
+ dl
109
+ margin-bottom: $baseLineHeight
110
+
111
+ dt,
112
+ dd
113
+ line-height: $baseLineHeight
114
+
115
+ dt
116
+ font-weight: bold
117
+
118
+ dd
119
+ margin-left: $baseLineHeight / 2
120
+
121
+ // MISC
122
+ // ----
123
+
124
+ // Horizontal rules
125
+ hr
126
+ margin: $baseLineHeight 0
127
+ border: 0
128
+ border-top: 1px solid $hrBorder
129
+ border-bottom: 1px solid $white
130
+
131
+ // Emphasis
132
+ strong
133
+ font-weight: bold
134
+
135
+ em
136
+ font-style: italic
137
+
138
+ .muted
139
+ color: $grayLight
140
+
141
+ // Abbreviations and acronyms
142
+ abbr
143
+ font-size: 90%
144
+ text-transform: uppercase
145
+ border-bottom: 1px dotted #ddd
146
+ cursor: help
147
+
148
+ // Blockquotes
149
+ blockquote
150
+ padding: 0 0 0 15px
151
+ margin: 0 0 $baseLineHeight
152
+ border-left: 5px solid $grayLighter
153
+ p
154
+ margin-bottom: 0
155
+ +font-shorthand(16px, 300, $baseLineHeight * 1.25)
156
+ small
157
+ display: block
158
+ line-height: $baseLineHeight
159
+ color: $grayLight
160
+ &:before
161
+ content: '\2014 \00A0'
162
+ // Float right with text-align: right
163
+ &.pull-right
164
+ float: right
165
+ padding-left: 0
166
+ padding-right: 15px
167
+ border-left: 0
168
+ border-right: 5px solid $grayLighter
169
+ p,
170
+ small
171
+ text-align: right
172
+
173
+ // Quotes
174
+
175
+ q:before,
176
+ q:after,
177
+ blockquote:before,
178
+ blockquote:after
179
+ content: ""
180
+
181
+ // Addresses
182
+ address
183
+ display: block
184
+ margin-bottom: $baseLineHeight
185
+ line-height: $baseLineHeight
186
+ font-style: normal
187
+
188
+ // Misc
189
+ small
190
+ font-size: 100%
191
+
192
+ cite
193
+ font-style: normal
@@ -0,0 +1,20 @@
1
+ // UTILITY CLASSES
2
+ // ---------------
3
+
4
+ // Quick floats
5
+ .pull-right
6
+ float: right
7
+
8
+ .pull-left
9
+ float: left
10
+
11
+ // Toggling content
12
+ .hide
13
+ display: none
14
+
15
+ .show
16
+ display: block
17
+
18
+ // Visibility
19
+ .invisible
20
+ visibility: hidden
@@ -0,0 +1,101 @@
1
+ // VARIABLES
2
+ // Variables to customize the look and feel of Bootstrap
3
+ // -----------------------------------------------------
4
+
5
+ // GLOBAL VALUES
6
+ // --------------------------------------------------
7
+
8
+ // Links
9
+ $linkColor: #0088cc !default
10
+ $linkColorHover: darken($linkColor, 15) !default
11
+
12
+ // Grays
13
+ $black: black !default
14
+ $grayDarker: #222222 !default
15
+ $grayDark: #333333 !default
16
+ $gray: #555555 !default
17
+ $grayLight: #999999 !default
18
+ $grayLighter: #eeeeee !default
19
+ $white: white !default
20
+
21
+ // Accent colors
22
+ $blue: #049cdb !default
23
+ $blueDark: #0064cd !default
24
+ $green: #46a546 !default
25
+ $red: #9d261d !default
26
+ $yellow: #ffc40d !default
27
+ $orange: #f89406 !default
28
+ $pink: #c3325f !default
29
+ $purple: #7a43b6 !default
30
+
31
+ // Typography
32
+ $baseFontSize: 13px !default
33
+ $baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default
34
+ $baseLineHeight: 18px !default
35
+ $textColor: $grayDark !default
36
+
37
+ // Buttons
38
+ $primaryButtonBackground: $linkColor !default
39
+
40
+ // COMPONENT VARIABLES
41
+ // --------------------------------------------------
42
+
43
+ // Z-index master list
44
+ // Used for a bird's eye view of components dependent on the z-axis
45
+ // Try to avoid customizing these :)
46
+ $zindexDropdown: 1000 !default
47
+ $zindexPopover: 1010 !default
48
+ $zindexTooltip: 1020 !default
49
+ $zindexFixedNavbar: 1030 !default
50
+ $zindexModalBackdrop: 1040 !default
51
+ $zindexModal: 1050 !default
52
+
53
+ // Sprite icons path
54
+ $iconSpritePath: "../img/glyphicons-halflings.png"
55
+ $iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"
56
+
57
+ // Input placeholder text color
58
+ $placeholderText: $grayLight !default
59
+
60
+ // Hr border color
61
+ $hrBorder: $grayLighter
62
+
63
+ // Navbar
64
+ $navbarHeight: 40px !default
65
+ $navbarBackground: $grayDarker !default
66
+ $navbarBackgroundHighlight: $grayDark !default
67
+ $navbarLinkBackgroundHover: transparent
68
+
69
+ $navbarText: $grayLight !default
70
+ $navbarLinkColor: $grayLight !default
71
+ $navbarLinkColorHover: $white !default
72
+
73
+ // Form states and alerts
74
+ $warningText: #c09853 !default
75
+ $warningBackground: #fcf8e3 !default
76
+ $warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default
77
+
78
+ $errorText: #b94a48 !default
79
+ $errorBackground: #f2dede !default
80
+ $errorBorder: darken(adjust-hue($errorBackground, -10), 3%) !default
81
+
82
+ $successText: #468847 !default
83
+ $successBackground: #dff0d8 !default
84
+ $successBorder: darken(adjust-hue($successBackground, -10), 5%) !default
85
+
86
+ $infoText: #3a87ad !default
87
+ $infoBackground: #d9edf7 !default
88
+ $infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default
89
+
90
+ // GRID
91
+ // ----
92
+
93
+ // Default 940px grid
94
+ $gridColumns: 12 !default
95
+ $gridColumnWidth: 60px !default
96
+ $gridGutterWidth: 20px !default
97
+ $gridRowWidth: $gridColumns * $gridColumnWidth + $gridGutterWidth * ($gridColumns - 1)
98
+
99
+ // Fluid grid
100
+ $fluidGridColumnWidth: 6.383% !default
101
+ $fluidGridGutterWidth: 2.128% !default
@@ -0,0 +1,15 @@
1
+ // WELLS
2
+ // -----
3
+
4
+ .well
5
+ min-height: 20px
6
+ padding: 19px
7
+ margin-bottom: 20px
8
+ background-color: #f5f5f5
9
+ border: 1px solid #eee
10
+ border: 1px solid rgba(0, 0, 0, 0.05)
11
+ +border-radius(4px)
12
+ +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05))
13
+ blockquote
14
+ border-color: #ddd
15
+ border-color: rgba(0, 0, 0, 0.15)
@@ -0,0 +1,67 @@
1
+ /*!
2
+ * Bootstrap v2.0.1
3
+ *
4
+ * Copyright 2012 Twitter, Inc
5
+ * Licensed under the Apache License v2.0
6
+ * http://www.apache.org/licenses/LICENSE-2.0
7
+ *
8
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
9
+
10
+ // Core variables and mixins
11
+ @import variables
12
+
13
+ // Modify this for custom colors, font-sizes, etc
14
+ @import mixins
15
+
16
+ // CSS Reset
17
+ @import reset
18
+
19
+ // Grid system and page structure
20
+ @import scaffolding
21
+ @import grid
22
+ @import layouts
23
+
24
+ // Base CSS
25
+ @import type
26
+ @import code
27
+ @import forms
28
+ @import tables
29
+
30
+ // Components: common
31
+ @import sprites
32
+ @import dropdowns
33
+ @import wells
34
+ @import component-animations
35
+ @import close
36
+
37
+ // Components: Buttons & Alerts
38
+ @import buttons
39
+ @import button-groups
40
+ @import alerts
41
+
42
+ // Note: alerts share common CSS with buttons and thus have styles in buttons
43
+
44
+ // Components: Nav
45
+ @import navs
46
+ @import navbar
47
+ @import breadcrumbs
48
+ @import pagination
49
+ @import pager
50
+
51
+ // Components: Popovers
52
+ @import modals
53
+ @import tooltip
54
+ @import popovers
55
+
56
+ // Components: Misc
57
+ @import thumbnails
58
+ @import labels
59
+ @import progress-bars
60
+ @import accordion
61
+ @import carousel
62
+ @import hero-unit
63
+
64
+ // Utility classes
65
+ @import utilities
66
+
67
+ // Has to be last to override when necessary
@@ -0,0 +1,20 @@
1
+ description "Twitter Bootstrap Plugin for Compass Framework."
2
+
3
+ # Make sure you list all the project template files here in the manifest.
4
+ stylesheet 'bootstrap.sass', :media => 'screen, projection'
5
+ stylesheet 'responsive.sass', :media => 'handheld,only screen and (max-device-width:480px)'
6
+
7
+ file 'README'
8
+
9
+ help %Q{
10
+ This is a message that users will see if they type
11
+
12
+ compass help my_extension
13
+
14
+ You can use it to help them learn how to use your extension.
15
+ }
16
+
17
+ welcome_message %Q{
18
+ This is a message that users will see after they install this pattern.
19
+ Use this to tell users what to do next.
20
+ }