bootswatch-rails 0.3.0 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
data/HISTORY.md CHANGED
@@ -1,3 +1,8 @@
1
+ ## 0.3.1 (2013-01-14)
2
+
3
+ * Add !default to all bootswatch variables, making them overridable
4
+
5
+
1
6
  ## 0.3.0 (2013-01-13)
2
7
 
3
8
  * Add a converter script for most of the repetitive less/sass conversion work
data/README.md CHANGED
@@ -48,6 +48,18 @@ considering that you're using
48
48
  // Whatever application styles you have go last
49
49
  @import "base";
50
50
 
51
+ ### Overriding bootswatch variables
52
+
53
+ Since version 3.1 it's possible to override variables.
54
+
55
+ // First set or import your overrides
56
+ $textColor: #000;
57
+
58
+ // Then load variables
59
+ @import "bootswatch/journal/variables";
60
+
61
+ // Then the rest as shown above...
62
+
51
63
  ## Bootswatches
52
64
 
53
65
  Included bootswatches
data/converter CHANGED
@@ -1,6 +1,7 @@
1
1
  #!/usr/bin/env ruby
2
2
 
3
3
  src_file_path, dst_file_path = *ARGV
4
+ dst_file_path ||= src_file_path
4
5
  lines = File.readlines(src_file_path)
5
6
 
6
7
  indent_size_calc = lambda do |line|
@@ -78,10 +79,18 @@ resolve_ampersand_dash = lambda do |line, index|
78
79
  end
79
80
  end
80
81
 
81
- clear_out_escapes = lambda do |line, index|
82
+ clear_out_escapes = lambda do |line, _|
82
83
  line.gsub(/~"([^"]+)"/) { $1 }
83
84
  end
84
85
 
86
+ mark_variables_default = lambda do |line, _|
87
+ if line =~ /^\s*\$/ && line.include?(':')
88
+ line.sub(';', ' !default;')
89
+ else
90
+ line
91
+ end
92
+ end
93
+
85
94
  line_processors = [
86
95
  swap_variable_prefix,
87
96
  # turn_percentages_into_percentiles,
@@ -93,6 +102,10 @@ line_processors = [
93
102
  clear_out_escapes
94
103
  ]
95
104
 
105
+ if File.basename(src_file_path) =~ /variables/
106
+ line_processors << mark_variables_default
107
+ end
108
+
96
109
  comment_line = /^\s*\/\//
97
110
 
98
111
  processed_lines = lines.map.with_index do |line, index|
@@ -1,5 +1,5 @@
1
1
  module Bootswatch
2
2
  module Rails
3
- VERSION = "0.3.0"
3
+ VERSION = "0.3.1"
4
4
  end
5
5
  end
@@ -9,167 +9,167 @@
9
9
 
10
10
  // Grays
11
11
  // -------------------------
12
- $black: #000;
13
- $grayDarker: #111;
14
- $grayDark: #444;
15
- $gray: #555;
16
- $grayLight: #aaa;
17
- $grayLighter: #ddd;
18
- $white: #fff;
12
+ $black: #000 !default;
13
+ $grayDarker: #111 !default;
14
+ $grayDark: #444 !default;
15
+ $gray: #555 !default;
16
+ $grayLight: #aaa !default;
17
+ $grayLighter: #ddd !default;
18
+ $white: #fff !default;
19
19
 
20
20
 
21
21
  // Accent colors
22
22
  // -------------------------
23
- $blue: #00BCE1;
24
- $blueDark: #1269B0;
25
- $green: #48CA3B;
26
- $red: #AD1D28;
27
- $yellow: #DEBB27;
28
- $orange: #DF6E1E;
29
- $pink: #FFBCB9;
30
- $purple: #4D3A7D;
23
+ $blue: #00BCE1 !default;
24
+ $blueDark: #1269B0 !default;
25
+ $green: #48CA3B !default;
26
+ $red: #AD1D28 !default;
27
+ $yellow: #DEBB27 !default;
28
+ $orange: #DF6E1E !default;
29
+ $pink: #FFBCB9 !default;
30
+ $purple: #4D3A7D !default;
31
31
 
32
32
 
33
33
  // Scaffolding
34
34
  // -------------------------
35
- $bodyBackground: #003F4D;
36
- $textColor: rgba(255, 255, 255, 0.9);
35
+ $bodyBackground: #003F4D !default;
36
+ $textColor: rgba(255, 255, 255, 0.9) !default;
37
37
 
38
38
 
39
39
  // Links
40
40
  // -------------------------
41
- $linkColor: lighten($yellow, 15%);
42
- $linkColorHover: $linkColor;
41
+ $linkColor: lighten($yellow, 15%) !default;
42
+ $linkColorHover: $linkColor !default;
43
43
 
44
44
 
45
45
  // Typography
46
46
  // -------------------------
47
- $sansFontFamily: 'Cabin', Verdana, sans-serif;
48
- $serifFontFamily: Georgia, "Times New Roman", Times, serif;
49
- $monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
47
+ $sansFontFamily: 'Cabin', Verdana, sans-serif !default;
48
+ $serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
49
+ $monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace !default;
50
50
 
51
- $baseFontSize: 14px;
52
- $baseFontFamily: $sansFontFamily;
53
- $baseLineHeight: 20px;
54
- $altFontFamily: $serifFontFamily;
51
+ $baseFontSize: 14px !default;
52
+ $baseFontFamily: $sansFontFamily !default;
53
+ $baseLineHeight: 20px !default;
54
+ $altFontFamily: $serifFontFamily !default;
55
55
 
56
- $headingsFontFamily: 'Lobster', cursive; // empty to use BS default, $baseFontFamily
57
- $headingsFontWeight: normal; // instead of browser default, bold
58
- $headingsColor: inherit; // empty to use BS default, $textColor
56
+ $headingsFontFamily: 'Lobster', cursive !default; // empty to use BS default, $baseFontFamily
57
+ $headingsFontWeight: normal !default; // instead of browser default, bold
58
+ $headingsColor: inherit !default; // empty to use BS default, $textColor
59
59
 
60
60
 
61
61
  // Component sizing
62
62
  // -------------------------
63
63
  // Based on 14px font-size and 20px line-height
64
64
 
65
- $fontSizeLarge: $baseFontSize * 1.25; // ~18px
66
- $fontSizeSmall: $baseFontSize * 0.85; // ~12px
67
- $fontSizeMini: $baseFontSize * 0.75; // ~11px
65
+ $fontSizeLarge: $baseFontSize * 1.25 !default; // ~18px
66
+ $fontSizeSmall: $baseFontSize * 0.85 !default; // ~12px
67
+ $fontSizeMini: $baseFontSize * 0.75 !default; // ~11px
68
68
 
69
- $paddingLarge: 20px 24px; // 58px
70
- $paddingSmall: 8px 12px; // 34px
71
- $paddingMini: 4px 8px; // 28px
69
+ $paddingLarge: 20px 24px !default; // 58px
70
+ $paddingSmall: 8px 12px !default; // 34px
71
+ $paddingMini: 4px 8px !default; // 28px
72
72
 
73
- $baseBorderRadius: 0;
74
- $borderRadiusLarge: 6px;
75
- $borderRadiusSmall: 3px;
73
+ $baseBorderRadius: 0 !default;
74
+ $borderRadiusLarge: 6px !default;
75
+ $borderRadiusSmall: 3px !default;
76
76
 
77
77
 
78
78
  // Tables
79
79
  // -------------------------
80
- $tableBackground: lighten(#147E88, 10%); // overall background-color
81
- $tableBackgroundAccent: lighten(#147E88, 15%); // for striping
82
- $tableBackgroundHover: rgba(255, 255, 255, 0.4); // for hover
83
- $tableBorder: lighten(#147E88, 12%); // table and cell border
80
+ $tableBackground: lighten(#147E88, 10%) !default; // overall background-color
81
+ $tableBackgroundAccent: lighten(#147E88, 15%) !default; // for striping
82
+ $tableBackgroundHover: rgba(255, 255, 255, 0.4) !default; // for hover
83
+ $tableBorder: lighten(#147E88, 12%) !default; // table and cell border
84
84
 
85
85
 
86
86
  // Navbar
87
87
  // -------------------------
88
- $navbarCollapseWidth: 979px;
89
- $navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
88
+ $navbarCollapseWidth: 979px !default;
89
+ $navbarCollapseDesktopWidth: $navbarCollapseWidth + 1 !default;
90
90
 
91
- $navbarHeight: 50px;
92
- $navbarBackgroundHighlight: $red;
93
- $navbarBackground: $red;
94
- $navbarBorder: darken($navbarBackground, 12%);
91
+ $navbarHeight: 50px !default;
92
+ $navbarBackgroundHighlight: $red !default;
93
+ $navbarBackground: $red !default;
94
+ $navbarBorder: darken($navbarBackground, 12%) !default;
95
95
 
96
- $navbarText: $white;
97
- $navbarLinkColor: $white;
98
- $navbarLinkColorHover: $white;
99
- $navbarLinkColorActive: $navbarLinkColorHover;
100
- $navbarLinkBackgroundHover: lighten($navbarBackground, 10%);
101
- $navbarLinkBackgroundActive: lighten($navbarBackground, 10%);
96
+ $navbarText: $white !default;
97
+ $navbarLinkColor: $white !default;
98
+ $navbarLinkColorHover: $white !default;
99
+ $navbarLinkColorActive: $navbarLinkColorHover !default;
100
+ $navbarLinkBackgroundHover: lighten($navbarBackground, 10%) !default;
101
+ $navbarLinkBackgroundActive: lighten($navbarBackground, 10%) !default;
102
102
 
103
- $navbarBrandColor: $navbarLinkColor;
103
+ $navbarBrandColor: $navbarLinkColor !default;
104
104
 
105
105
  // Inverted navbar
106
- $navbarInverseBackground: $yellow;
107
- $navbarInverseBackgroundHighlight: $yellow;
108
- $navbarInverseBorder: rgba(0, 0, 0, 0.1);
106
+ $navbarInverseBackground: $yellow !default;
107
+ $navbarInverseBackgroundHighlight: $yellow !default;
108
+ $navbarInverseBorder: rgba(0, 0, 0, 0.1) !default;
109
109
 
110
- $navbarInverseText: $white;
111
- $navbarInverseLinkColor: $white;
112
- $navbarInverseLinkColorHover: $white;
113
- $navbarInverseLinkColorActive: $white;
114
- $navbarInverseLinkBackgroundHover: rgba(255, 255, 255, 0.2);
115
- $navbarInverseLinkBackgroundActive: rgba(255, 255, 255, 0.2);
110
+ $navbarInverseText: $white !default;
111
+ $navbarInverseLinkColor: $white !default;
112
+ $navbarInverseLinkColorHover: $white !default;
113
+ $navbarInverseLinkColorActive: $white !default;
114
+ $navbarInverseLinkBackgroundHover: rgba(255, 255, 255, 0.2) !default;
115
+ $navbarInverseLinkBackgroundActive: rgba(255, 255, 255, 0.2) !default;
116
116
 
117
- $navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%);
118
- $navbarInverseSearchBackgroundFocus: $white;
119
- $navbarInverseSearchBorder: $navbarInverseBackground;
120
- $navbarInverseSearchPlaceholderColor: $white;
117
+ $navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%) !default;
118
+ $navbarInverseSearchBackgroundFocus: $white !default;
119
+ $navbarInverseSearchBorder: $navbarInverseBackground !default;
120
+ $navbarInverseSearchPlaceholderColor: $white !default;
121
121
 
122
- $navbarInverseBrandColor: $navbarInverseLinkColor;
122
+ $navbarInverseBrandColor: $navbarInverseLinkColor !default;
123
123
 
124
124
 
125
125
  // Buttons
126
126
  // -------------------------
127
- $btnBackground: $grayLighter;
128
- $btnBackgroundHighlight: $grayLighter;
129
- $btnBorder: rgba(0, 0, 0, 0);
127
+ $btnBackground: $grayLighter !default;
128
+ $btnBackgroundHighlight: $grayLighter !default;
129
+ $btnBorder: rgba(0, 0, 0, 0) !default;
130
130
 
131
- $btnPrimaryBackground: $navbarBackground;
132
- $btnPrimaryBackgroundHighlight: $navbarBackground;
131
+ $btnPrimaryBackground: $navbarBackground !default;
132
+ $btnPrimaryBackgroundHighlight: $navbarBackground !default;
133
133
 
134
- $btnInfoBackground: $purple;
135
- $btnInfoBackgroundHighlight: $purple;
134
+ $btnInfoBackground: $purple !default;
135
+ $btnInfoBackgroundHighlight: $purple !default;
136
136
 
137
- $btnSuccessBackground: $green;
138
- $btnSuccessBackgroundHighlight: $green;
137
+ $btnSuccessBackground: $green !default;
138
+ $btnSuccessBackgroundHighlight: $green !default;
139
139
 
140
- $btnWarningBackground: $orange;
141
- $btnWarningBackgroundHighlight: $orange;
140
+ $btnWarningBackground: $orange !default;
141
+ $btnWarningBackgroundHighlight: $orange !default;
142
142
 
143
- $btnDangerBackground: $yellow;
144
- $btnDangerBackgroundHighlight: $yellow;
143
+ $btnDangerBackground: $yellow !default;
144
+ $btnDangerBackgroundHighlight: $yellow !default;
145
145
 
146
- $btnInverseBackground: #27666D;
147
- $btnInverseBackgroundHighlight: #27666D;
146
+ $btnInverseBackground: #27666D !default;
147
+ $btnInverseBackgroundHighlight: #27666D !default;
148
148
 
149
149
 
150
150
  // Forms
151
151
  // -------------------------
152
- $inputBackground: $white;
153
- $inputBorder: transparent;
154
- $inputBorderRadius: $baseBorderRadius;
155
- $inputDisabledBackground: $grayLighter;
156
- $formActionsBackground: transparent;
157
- $inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
152
+ $inputBackground: $white !default;
153
+ $inputBorder: transparent !default;
154
+ $inputBorderRadius: $baseBorderRadius !default;
155
+ $inputDisabledBackground: $grayLighter !default;
156
+ $formActionsBackground: transparent !default;
157
+ $inputHeight: $baseLineHeight + 10px !default; // base line-height + 8px vertical padding + 2px top/bottom border
158
158
 
159
159
 
160
160
  // Dropdowns
161
161
  // -------------------------
162
- $dropdownBackground: $white;
163
- $dropdownBorder: rgba(0,0,0,.2);
164
- $dropdownDividerTop: #e5e5e5;
165
- $dropdownDividerBottom: $white;
162
+ $dropdownBackground: $white !default;
163
+ $dropdownBorder: rgba(0,0,0,.2) !default;
164
+ $dropdownDividerTop: #e5e5e5 !default;
165
+ $dropdownDividerBottom: $white !default;
166
166
 
167
- $dropdownLinkColor: $grayDark;
168
- $dropdownLinkColorHover: $white;
169
- $dropdownLinkColorActive: $white;
167
+ $dropdownLinkColor: $grayDark !default;
168
+ $dropdownLinkColorHover: $white !default;
169
+ $dropdownLinkColorActive: $white !default;
170
170
 
171
- $dropdownLinkBackgroundActive: $red;
172
- $dropdownLinkBackgroundHover: $red;
171
+ $dropdownLinkBackgroundActive: $red !default;
172
+ $dropdownLinkBackgroundHover: $red !default;
173
173
 
174
174
 
175
175
 
@@ -181,88 +181,88 @@ $dropdownLinkBackgroundHover: $red;
181
181
  // -------------------------
182
182
  // Used for a bird's eye view of components dependent on the z-axis
183
183
  // Try to avoid customizing these :)
184
- $zindexDropdown: 1000;
185
- $zindexPopover: 1010;
186
- $zindexTooltip: 1020;
187
- $zindexFixedNavbar: 1030;
188
- $zindexModalBackdrop: 1040;
189
- $zindexModal: 1050;
184
+ $zindexDropdown: 1000 !default;
185
+ $zindexPopover: 1010 !default;
186
+ $zindexTooltip: 1020 !default;
187
+ $zindexFixedNavbar: 1030 !default;
188
+ $zindexModalBackdrop: 1040 !default;
189
+ $zindexModal: 1050 !default;
190
190
 
191
191
 
192
192
  // Sprite icons path
193
193
  // -------------------------
194
- $iconSpritePath: "../img/glyphicons-halflings.png";
195
- $iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
194
+ $iconSpritePath: "../img/glyphicons-halflings.png" !default;
195
+ $iconWhiteSpritePath: "../img/glyphicons-halflings-white.png" !default;
196
196
 
197
197
 
198
198
  // Input placeholder text color
199
199
  // -------------------------
200
- $placeholderText: $grayLight;
200
+ $placeholderText: $grayLight !default;
201
201
 
202
202
 
203
203
  // Hr border color
204
204
  // -------------------------
205
- $hrBorder: transparent;
205
+ $hrBorder: transparent !default;
206
206
 
207
207
 
208
208
  // Horizontal forms & lists
209
209
  // -------------------------
210
- $horizontalComponentOffset: 180px;
210
+ $horizontalComponentOffset: 180px !default;
211
211
 
212
212
 
213
213
  // Wells
214
214
  // -------------------------
215
- $wellBackground: #3CB9C6;
215
+ $wellBackground: #3CB9C6 !default;
216
216
 
217
217
 
218
218
  // Pagination
219
219
  // -------------------------
220
- $paginationBackground: #3CB9C6;
221
- $paginationBorder: transparent;
222
- $paginationActiveBackground: rgba(255, 255, 255, 0.4);
220
+ $paginationBackground: #3CB9C6 !default;
221
+ $paginationBorder: transparent !default;
222
+ $paginationActiveBackground: rgba(255, 255, 255, 0.4) !default;
223
223
 
224
224
 
225
225
  // Hero unit
226
226
  // -------------------------
227
- $heroUnitBackground: #3CB9C6;
228
- $heroUnitHeadingColor: inherit;
229
- $heroUnitLeadColor: inherit;
227
+ $heroUnitBackground: #3CB9C6 !default;
228
+ $heroUnitHeadingColor: inherit !default;
229
+ $heroUnitLeadColor: inherit !default;
230
230
 
231
231
 
232
232
  // Form states and alerts
233
233
  // -------------------------
234
- $warningText: #c09853;
235
- $warningBackground: #fcf8e3;
236
- $warningBorder: darken(adjust-hue($warningBackground, -10), 3%);
234
+ $warningText: #c09853 !default;
235
+ $warningBackground: #fcf8e3 !default;
236
+ $warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default;
237
237
 
238
- $errorText: #b94a48;
239
- $errorBackground: #f2dede;
240
- $errorBorder: darken(adjust-hue($errorBackground, -10), 3%);
238
+ $errorText: #b94a48 !default;
239
+ $errorBackground: #f2dede !default;
240
+ $errorBorder: darken(adjust-hue($errorBackground, -10), 3%) !default;
241
241
 
242
- $successText: #468847;
243
- $successBackground: #dff0d8;
244
- $successBorder: darken(adjust-hue($successBackground, -10), 5%);
242
+ $successText: #468847 !default;
243
+ $successBackground: #dff0d8 !default;
244
+ $successBorder: darken(adjust-hue($successBackground, -10), 5%) !default;
245
245
 
246
- $infoText: #3a87ad;
247
- $infoBackground: #d9edf7;
248
- $infoBorder: darken(adjust-hue($infoBackground, -10), 7%);
246
+ $infoText: #3a87ad !default;
247
+ $infoBackground: #d9edf7 !default;
248
+ $infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default;
249
249
 
250
250
 
251
251
  // Tooltips and popovers
252
252
  // -------------------------
253
- $tooltipColor: #fff;
254
- $tooltipBackground: #000;
255
- $tooltipArrowWidth: 5px;
256
- $tooltipArrowColor: $tooltipBackground;
253
+ $tooltipColor: #fff !default;
254
+ $tooltipBackground: #000 !default;
255
+ $tooltipArrowWidth: 5px !default;
256
+ $tooltipArrowColor: $tooltipBackground !default;
257
257
 
258
- $popoverBackground: #fff;
259
- $popoverArrowWidth: 10px;
260
- $popoverArrowColor: #fff;
261
- $popoverTitleBackground: $navbarBackground;
258
+ $popoverBackground: #fff !default;
259
+ $popoverArrowWidth: 10px !default;
260
+ $popoverArrowColor: #fff !default;
261
+ $popoverTitleBackground: $navbarBackground !default;
262
262
 
263
263
  // Special enhancement for popovers
264
- $popoverArrowOuterWidth: $popoverArrowWidth + 1;
265
- $popoverArrowOuterColor: rgba(0,0,0,.25);
264
+ $popoverArrowOuterWidth: $popoverArrowWidth + 1 !default;
265
+ $popoverArrowOuterColor: rgba(0,0,0,.25) !default;
266
266
 
267
267
 
268
268
 
@@ -272,31 +272,31 @@ $popoverArrowOuterColor: rgba(0,0,0,.25);
272
272
 
273
273
  // Default 940px grid
274
274
  // -------------------------
275
- $gridColumns: 12;
276
- $gridColumnWidth: 60px;
277
- $gridGutterWidth: 20px;
278
- $gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
275
+ $gridColumns: 12 !default;
276
+ $gridColumnWidth: 60px !default;
277
+ $gridGutterWidth: 20px !default;
278
+ $gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
279
279
 
280
280
  // 1200px min
281
- $gridColumnWidth1200: 70px;
282
- $gridGutterWidth1200: 30px;
283
- $gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
281
+ $gridColumnWidth1200: 70px !default;
282
+ $gridGutterWidth1200: 30px !default;
283
+ $gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
284
284
 
285
285
  // 768px-979px
286
- $gridColumnWidth768: 42px;
287
- $gridGutterWidth768: 20px;
288
- $gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
286
+ $gridColumnWidth768: 42px !default;
287
+ $gridGutterWidth768: 20px !default;
288
+ $gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
289
289
 
290
290
 
291
291
  // Fluid grid
292
292
  // -------------------------
293
- $fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
294
- $fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
293
+ $fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
294
+ $fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
295
295
 
296
296
  // 1200px min
297
- $fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
298
- $fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
297
+ $fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
298
+ $fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
299
299
 
300
300
  // 768px-979px
301
- $fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
302
- $fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
301
+ $fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
302
+ $fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;