adrianss-compass-oocss-plugin 0.0.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.
@@ -0,0 +1,46 @@
1
+ // grids debug
2
+
3
+ =scaffold_grids_debug
4
+ /* grids debug
5
+ .line
6
+ background-color: #e2e2e2
7
+
8
+
9
+ .size1of1
10
+ background-color: pink
11
+
12
+
13
+ .size1of2
14
+ background-color: red
15
+
16
+
17
+ .size1of3
18
+ background-color: orange
19
+
20
+
21
+ .size2of3
22
+ background-color: yellow
23
+
24
+
25
+ .size1of4
26
+ background-color: lime
27
+
28
+
29
+ .size3of4
30
+ background-color: green
31
+
32
+
33
+ .size1of5
34
+ background-color: aqua
35
+
36
+
37
+ .size2of5
38
+ background-color: blue
39
+
40
+
41
+ .size3of5
42
+ background-color: purple
43
+
44
+
45
+ .size4of5
46
+ background-color: magenta
@@ -0,0 +1,3 @@
1
+ @import oocss/reset.sass
2
+ @import oocss/fonts.sass
3
+ +fonts
@@ -0,0 +1,110 @@
1
+
2
+
3
+ =mod_scaffold
4
+ /*
5
+ Copyright (c) 2009, Nicole Sullivan. All rights reserved.
6
+ Code licensed under the BSD License:
7
+ version: 0.2
8
+
9
+ /* **************** BLOCK STRUCTURES *****************
10
+ /* mod
11
+ .mod
12
+ margin: 10px
13
+ .inner
14
+ /*background: url(skin/transparent.png) repeat left top;
15
+
16
+ .hd, .bd, .ft
17
+ overflow: hidden
18
+ _overflow: visible
19
+ _zoom: 1
20
+
21
+ .inner
22
+ position: relative
23
+
24
+ b
25
+ display: block
26
+ background-repeat: no-repeat
27
+ font-size: 1%
28
+ position: relative
29
+ z-index: 10
30
+
31
+ .tl, .tr, .bl, .br
32
+ height: 10px
33
+ width: 10px
34
+ float: left
35
+
36
+ .tl
37
+ background-position: left top
38
+
39
+ .tr
40
+ background-position: right top
41
+
42
+ .bl
43
+ background-position: left bottom
44
+
45
+ .br
46
+ background-position: right bottom
47
+ float: right
48
+
49
+ .tr
50
+ float: right
51
+ overflow: hidden
52
+ margin-bottom: -32000px
53
+
54
+ .tl
55
+ overflow: hidden
56
+ /* margin bottom needs to be < -9px
57
+ margin-bottom: -32000px
58
+
59
+ .bl, .br
60
+ margin-top: -10px
61
+
62
+ .top
63
+ background-position: center top
64
+
65
+ .bottom
66
+ background-position: center bottom
67
+ /* this zoom required for IE5.5 only
68
+ _zoom: 1
69
+
70
+
71
+ /* complex
72
+ .complex
73
+ overflow: hidden
74
+ *position: relative
75
+ /* position/zoom required for IE7, 6, 5.5
76
+ *zoom: 1
77
+
78
+ .tl, .tr
79
+ height: 32000px
80
+ margin-bottom: -32000px
81
+ width: 10px
82
+
83
+ .bl, .br
84
+ /*margin-top:0;
85
+
86
+ .top, .bottom
87
+ height: 5px
88
+ /*margin-top:-10px;
89
+
90
+
91
+ /* pop
92
+ .pop
93
+ overflow: visible
94
+ margin: 10px 20px 20px 10px
95
+ background-position: left top
96
+
97
+ .inner
98
+ right: -10px
99
+ bottom: -10px
100
+ background-position: right bottom
101
+ padding: 0 10px 10px 0
102
+
103
+ .tl, .br
104
+ display: none
105
+
106
+ .bl
107
+ bottom: -10px
108
+
109
+ .tr
110
+ right: -10px
@@ -0,0 +1,23 @@
1
+ // debug modules
2
+
3
+ /* debug modules
4
+ .top, .bottom
5
+ background-color: #e2e2e2
6
+
7
+ .tl
8
+ background-color: red
9
+
10
+ .tr
11
+ background-color: orange
12
+
13
+ .bl
14
+ background-color: yellow
15
+
16
+ .br
17
+ background-color: lime
18
+
19
+ .mod
20
+ background-color: purple
21
+
22
+ .inner
23
+ background-color: #E20074
@@ -0,0 +1,414 @@
1
+ !skin_dir ||= "skin"
2
+ !mod_dir ||= "mod"
3
+ !skin_mod_dir ||= "#{!skin_dir}/#{!mod_dir}"
4
+
5
+
6
+ =mod_skins_scaffold
7
+ /*
8
+ **************** BLOCK SKINS *****************
9
+ ====== Contour blocks ======
10
+ remove background-image:" to default to square corners for IE
11
+
12
+ /* ----- simple (extends mod) -----
13
+ .simple
14
+ .inner
15
+ border: 1px solid #D7D7D7
16
+ /*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;
17
+
18
+ b
19
+ background-image= "url(#{!skin_mod_dir}/simple_corners.png)"
20
+
21
+ /* ----- basic (extends mod) -----
22
+ .basic
23
+ .inner
24
+ /*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;
25
+
26
+ b
27
+ background-image= "url(#{!skin_mod_dir}/round.png)"
28
+
29
+ /* ----- simpleExt (extends mod)
30
+ .simpleExt
31
+ border: 1px solid #c7c7c7
32
+ /*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;
33
+
34
+ .inner
35
+ border: 1px solid #c7c7c7
36
+ border-color: #fff
37
+ border-width: 4px
38
+ /*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;
39
+
40
+ b
41
+ background-image= "url(#{!skin_mod_dir}/simple_extended.png)"
42
+
43
+ .tl
44
+ left: -1px
45
+ top: -1px
46
+ height: 12px
47
+ width: 12px
48
+
49
+ .tr
50
+ right: -1px
51
+ top: -1px
52
+ height: 12px
53
+ width: 12px
54
+
55
+ .bl
56
+ left: -1px
57
+ bottom: -1px
58
+ height: 12px
59
+ width: 12px
60
+ margin-top: -12px
61
+
62
+ .br
63
+ right: -1px
64
+ bottom: -1px
65
+ height: 12px
66
+ width: 12px
67
+ margin-top: -12px
68
+
69
+ /* ----- me (extends mod) use for my comments -----
70
+ .me
71
+ border: 1px solid #909090
72
+ /*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
73
+
74
+ .inner
75
+ border: 1px solid #909090
76
+ border-color: #d76a84
77
+ /*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
78
+
79
+ b
80
+ background-image= "url(#{!skin_mod_dir}/me.png)"
81
+
82
+ .tl
83
+ left: -1px
84
+ top: -1px
85
+
86
+ .tr
87
+ right: -1px
88
+ top: -1px
89
+
90
+ .bl
91
+ left: -1px
92
+ bottom: -1px
93
+
94
+ .br
95
+ right: -1px
96
+ bottom: -1px
97
+
98
+
99
+ /* ----- noted (extends mod) -----
100
+ .noted
101
+ border: 1px solid #c2c2c2
102
+ /*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
103
+
104
+ .inner
105
+ border: 1px solid #c2c2c2
106
+ border-color: #eded68
107
+ /*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
108
+
109
+ b
110
+ background-image= "url(#{!skin_mod_dir}/noted.png)"
111
+
112
+ .tl
113
+ left: -1px
114
+ top: -1px
115
+
116
+ .tr
117
+ right: -1px
118
+ top: -1px
119
+
120
+ .bl
121
+ left: -1px
122
+ bottom: -1px
123
+
124
+ .br
125
+ right: -1px
126
+ bottom: -1px
127
+
128
+
129
+ /* ----- grab (extends mod) -----
130
+ .grab
131
+ /* can't be done w border radius
132
+ .inner
133
+ border: 3px solid #00477a
134
+ border-bottom-width: 10px
135
+
136
+ b
137
+ background-image= "url(#{!skin_mod_dir}/grab.png)"
138
+
139
+ .bl, .br
140
+ height: 16px
141
+ /*if height is set, margin set
142
+ margin-top: -16px
143
+
144
+ /* ----- faq (extends mod) -----
145
+ .faq
146
+ /* can't be done w border radius
147
+ .inner
148
+ border: 3px solid #b20029
149
+ border-bottom-width: 10px
150
+
151
+ b
152
+ background-image= "url(#{!skin_mod_dir}/faq.png)"
153
+
154
+ .bl, .br
155
+ height: 16px
156
+ /*if height is set, margin set
157
+ margin-top: -16px
158
+
159
+ /* ----- onlinestore (extends mod) -----
160
+ .onlinestore
161
+ .inner
162
+ border: 3px solid #9a9800
163
+ border-bottom-width: 10px
164
+
165
+ b
166
+ background-image= "url(#{!skin_mod_dir}/store.png)"
167
+
168
+ .bl, .br
169
+ height: 16px
170
+ margin-top: -16px
171
+
172
+ /* ----- about (extends mod) -----
173
+ .about
174
+ .inner
175
+ border: 3px solid #494949
176
+ border-bottom-width: 10px
177
+
178
+ b
179
+ background-image= "url(#{!skin_mod_dir}/about.png)"
180
+
181
+ .bl, .br
182
+ height: 16px
183
+ margin-top: -16px
184
+
185
+ /* ----- talk (extends mod) -----
186
+ .talk
187
+ border: 1px solid #c7c7c7
188
+ /*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
189
+
190
+ .inner
191
+ border: 1px solid #c7c7c7
192
+ border-color: #ededed
193
+ /*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
194
+
195
+ b
196
+ background-image= "url(#{!skin_mod_dir}/talk.png)"
197
+
198
+ .tl
199
+ left: -1px
200
+ top: -1px
201
+
202
+ .tr
203
+ right: -1px
204
+ top: -1px
205
+
206
+ .bl
207
+ left: -1px
208
+ bottom: -1px
209
+
210
+ .br
211
+ right: -1px
212
+ bottom: -1px
213
+
214
+ /* ----- photo (extends complex) -----
215
+ .photo
216
+ /*
217
+ muck with margins to change how the block will align with other blocks,
218
+ any value between 0-10px
219
+
220
+ .inner
221
+ border: solid 10px #fff
222
+ margin: 0 4px
223
+
224
+ b
225
+ background-image= "url(#{!skin_mod_dir}/photo.png)"
226
+
227
+ .tr, .tl
228
+ width: 20px
229
+
230
+ .top, .bottom
231
+ height: 4px
232
+ margin-top: 0px
233
+
234
+ .bl, .br
235
+ height: 16px
236
+ margin-top: -12px
237
+
238
+ /* ----- flow (extends complex) -----
239
+ .flow
240
+ margin: 6px
241
+
242
+ b
243
+ background-image= "url(#{!skin_mod_dir}/even.png)"
244
+
245
+ .inner
246
+ padding: 0 4px
247
+
248
+ .top
249
+ height: 4px
250
+
251
+ .bottom
252
+ height: 4px
253
+ margin-top: -4px
254
+
255
+ .br, .bl
256
+ margin-top: -6px
257
+
258
+ /* ----- shadow test (experimental attempt to match "flow" cross browser w no img)-----
259
+ .boo
260
+ -webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33)
261
+ -moz-box-shadow: black 2px 2px 2px 2px
262
+ /*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
263
+ border: solid 1px #949494
264
+ background: #fff
265
+
266
+ /* ----- .excerpt (extends complex) -----
267
+ .excerpt
268
+ b
269
+ background-image= "url(#{!skin_mod_dir}/excerpt.png)"
270
+
271
+ .top
272
+ height: 1px
273
+
274
+ .bottom
275
+ /* margin top equal to - height of bottom
276
+ height: 6px
277
+ margin-top: -6px
278
+
279
+ .br, .bl
280
+ /* margin top = bottom height - corner height
281
+ height: 12px
282
+ margin-top: -6px
283
+
284
+ /* ----- sommers (extends pop) -----
285
+ .sommers
286
+ /*IE6 backup no alpha transparency
287
+ background-image= "url(#{!skin_mod_dir}/glow_7px.png)"
288
+ _background-image: none
289
+ margin: 3px 20px 20px 3px
290
+
291
+ .inner
292
+ _border: 3px solid #D7D7D7
293
+ background-image= "url(#{!skin_mod_dir}/glow_7px.png)"
294
+ _background-image: none
295
+
296
+ b
297
+ background-image= "url(#{!skin_mod_dir}/glow_7px.png)"
298
+ _background-image: none
299
+
300
+ /* ----- gonzalo -----
301
+ .gonzalo
302
+ background-image= "url(#{!skin_mod_dir}/gc.png)"
303
+
304
+ .inner, b
305
+ background-image= "url(#{!skin_mod_dir}/gc.png)"
306
+
307
+
308
+ /* ====== Background blocks ======
309
+ .sale .inner
310
+ background: red none
311
+
312
+ .nicole
313
+ .inner
314
+ background: #c01c41 none
315
+ color: #fff
316
+
317
+ *
318
+ color: #fff
319
+
320
+ .login *
321
+ color: #fff
322
+
323
+ .highlight .inner
324
+ background: #e3e36f none
325
+
326
+ .universe .inner
327
+ background= "url(#{!skin_mod_dir}/universe.png) repeat left top"
328
+
329
+ .foo .inner
330
+ background= "url(#{!skin_mod_dir}/universe_gray.png) repeat left top"
331
+
332
+ .login .inner
333
+ background= "url(#{!skin_mod_dir}/universe_login.png) repeat left top"
334
+
335
+ .comment .inner
336
+ background: #e2e2e2 none
337
+
338
+
339
+ /* ====== Block headers and footers ======
340
+ .hd
341
+ h1, h2, h3, h4, h5, h6
342
+ padding: 5px 10px
343
+
344
+ .section
345
+ background= "#e9e9e9 url(#{!skin_mod_dir}/header.png) repeat-x left bottom"
346
+ color: #de2c72
347
+ font-size: 120%
348
+ padding: 5px 10px
349
+
350
+ h1, h2, h3, h4, h5, h6
351
+ font-size: 100%
352
+ color: #de2c72
353
+ padding: 0
354
+
355
+ .act
356
+ background-color: #e9e9e9
357
+
358
+ .topper
359
+ background= "#fff url(#{!skin_mod_dir}/header_gradient_light.png) repeat-x left bottom"
360
+ color: #4D4D4D
361
+ font-size: 120%
362
+ padding: 5px 10px
363
+
364
+ h1, h2, h3, h4, h5, h6
365
+ font-size: 100%
366
+ color: #4D4D4D
367
+ padding: 0
368
+
369
+ .bam
370
+ background= "#00477a url(#{!skin_mod_dir}/header_glossy.png) repeat-x left top"
371
+ color: #fff
372
+ font-size: 120%
373
+ padding: 5px 10px
374
+
375
+ h1, h2, h3, h4, h5, h6
376
+ font-size: 100%
377
+ color: #fff
378
+ padding: 0
379
+
380
+ .gonz
381
+ background= "url(#{!skin_mod_dir}/gc_header.png) no-repeat left top"
382
+
383
+ .online
384
+ background= "#9a9400 url(#{!skin_mod_dir}/online.png) repeat-x left top"
385
+ color: #000
386
+ font-size: 120%
387
+ padding: 5px 10px
388
+
389
+ h1, h2, h3, h4, h5, h6
390
+ font-size: 100%
391
+ color: #000
392
+ padding: 0
393
+
394
+ .help
395
+ background= "#b20029 url(#{!skin_mod_dir}/help.png) repeat-x left top"
396
+ color: #fff
397
+ font-size: 120%
398
+ padding: 5px 10px
399
+
400
+ h1, h2, h3, h4, h5, h6
401
+ font-size: 100%
402
+ color: #fff
403
+ padding: 0
404
+
405
+ .info
406
+ background= "#636363 url(#{!skin_mod_dir}/info.png) repeat-x left top"
407
+ color: #fff
408
+ font-size: 120%
409
+ padding: 5px 10px
410
+
411
+ h1, h2, h3, h4, h5, h6
412
+ font-size: 100%
413
+ color: #fff
414
+ padding: 0