pixarea-compass-themes 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. data/.gitignore +6 -0
  2. data/.livereload +21 -0
  3. data/Gemfile +4 -0
  4. data/README +23 -0
  5. data/README.markdown +23 -0
  6. data/Rakefile +2 -0
  7. data/lib/pixarea-compass-themes.rb +10 -0
  8. data/lib/pixarea-compass-themes/version.rb +7 -0
  9. data/pixarea-compass-themes.gemspec +25 -0
  10. data/sass/_lib.sass +8 -0
  11. data/sass/_modules.sass +4 -0
  12. data/sass/_themes.sass +2 -0
  13. data/sass/home.sass +1 -0
  14. data/sass/lib/_font-stacks.scss +63 -0
  15. data/sass/lib/_formatting.sass +23 -0
  16. data/sass/lib/_palettes.sass +38 -0
  17. data/sass/lib/_pie.sass +12 -0
  18. data/sass/lib/_structure.sass +12 -0
  19. data/sass/lib/_tones.sass +5 -0
  20. data/sass/lib/_typo.sass +10 -0
  21. data/sass/modules/_forms.sass +1 -0
  22. data/sass/modules/_menus.sass +1 -0
  23. data/sass/modules/forms/_basic.sass +27 -0
  24. data/sass/modules/menus/_inline-blocks.sass +15 -0
  25. data/sass/theme.sass +5 -0
  26. data/sass/themes/_minipane.sass +32 -0
  27. data/sass/themes/_shapy.sass +32 -0
  28. data/sass/themes/minipane/_formatting.sass +4 -0
  29. data/sass/themes/minipane/_shadows.sass +1 -0
  30. data/sass/themes/minipane/_shapes.sass +6 -0
  31. data/sass/themes/minipane/_structure.sass +50 -0
  32. data/sass/themes/minipane/_tones.sass +57 -0
  33. data/sass/themes/minipane/tones/_burma.sass +26 -0
  34. data/sass/themes/minipane/tones/_dark.sass +73 -0
  35. data/sass/themes/shapy/_formatting.sass +4 -0
  36. data/sass/themes/shapy/_shadows.sass +16 -0
  37. data/sass/themes/shapy/_shapes.sass +32 -0
  38. data/sass/themes/shapy/_structure.sass +49 -0
  39. data/sass/themes/shapy/_tones.sass +59 -0
  40. data/sass/themes/shapy/tones/_burma.sass +29 -0
  41. data/sass/themes/shapy/tones/_circus.sass +34 -0
  42. data/sass/themes/shapy/tones/_dark.sass +69 -0
  43. data/sass/themes/shapy/tones/_firen.sass +25 -0
  44. data/sass/themes/shapy/tones/_rusty.sass +30 -0
  45. data/stylesheets/PIE.htc +77 -0
  46. data/stylesheets/home.css +0 -0
  47. data/stylesheets/theme.css +413 -0
  48. data/stylesheets/themes/shapy.css +62 -0
  49. data/templates/project/manifest.rb +2 -0
  50. data/templates/project/theme.sass +5 -0
  51. data/views/layouts/application.html.erb +21 -0
  52. metadata +117 -0
@@ -0,0 +1,4 @@
1
+ //@import /stylesheets/refinery/formatting.css
2
+
3
+ =minipane-formatting
4
+ +formatting-base
@@ -0,0 +1 @@
1
+ =minipane-shadows
@@ -0,0 +1,6 @@
1
+ =minipane-shapes
2
+ #menu a,
3
+ #body_content_left,
4
+ #body_content_right
5
+ +pie
6
+ +border-radius
@@ -0,0 +1,50 @@
1
+ =minipane-structure
2
+
3
+ $blueprint-grid-columns : 24
4
+ $blueprint-container-size : 950px
5
+ $blueprint-grid-margin : 10px
6
+
7
+ // Use this to calculate the width based on the total width.
8
+ // Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
9
+ $blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin
10
+
11
+ #body_content_title
12
+ +visually-hide
13
+
14
+ .inner
15
+ +box
16
+
17
+ #page_container
18
+ +container-alt
19
+
20
+ #header
21
+ padding-top: 20px
22
+ margin-bottom: 5px
23
+
24
+ #footer
25
+ margin-top: 10px
26
+ padding-left: 20px
27
+
28
+ #body_content
29
+ +clearfix
30
+ position: relative
31
+
32
+ #body_content_left
33
+ +column(16)
34
+ .no_body_content_right &
35
+ +column(22)
36
+ @import compass/layout/stretching
37
+ #body_content_right
38
+ +column(8)
39
+ +last
40
+ +stretch-y
41
+ right: 0
42
+
43
+ #menu
44
+ +menu-inline-blocks(4)
45
+
46
+ /* FORMS ------------------------------*/
47
+
48
+ .inquiries
49
+ form
50
+ +form-basic
@@ -0,0 +1,57 @@
1
+
2
+
3
+ // DEFAULT BP VALUES:
4
+
5
+ // $font_color: #333333 !default
6
+ // $quiet_color: $font_color + #333333 !default
7
+ // $loud_color: $font_color - #222222 !default
8
+ // $header_color: $font_color - #111111 !default
9
+ // $alt_text_color: #666666 !default
10
+ // $blueprint_background_color: #eeeeee !default
11
+ //
12
+ // $link_color: #000099 !default
13
+ // $link_hover_color: black !default
14
+ // $link_focus_color: $link_hover_color !default
15
+ // $link_active_color: $link_color + #cc0000 !default
16
+ // $link_visited_color: $link_color - #333333 !default
17
+ //
18
+ // $feedback_border_color: #dddddd !default
19
+ // $success_color: #264409 !default
20
+ // $success_bg_color: #e6efc2 !default
21
+ // $success_border_color: #c6d880 !default
22
+ // $notice_color: #514721 !default
23
+ // $notice_bg_color: #fff6bf !default
24
+ // $notice_border_color: #ffd324 !default
25
+ // $error_color: #8a1f11 !default
26
+ // $error_bg_color: #fbe3e4 !default
27
+ // $error_border_color: #fbc2c4 !default
28
+ //
29
+ // $highlight_color: yellow !default
30
+ // $added_color: white !default
31
+ // $added_bg_color: #006600 !default
32
+ // $removed_color: white !default
33
+ // $removed_bg_color: #990000 !default
34
+ //
35
+ // $blueprint_table_header_color: #c3d9ff !default
36
+ // $blueprint_table_stripe_color: #e5ecf9 !default
37
+
38
+ @import lib
39
+
40
+ //@import themes/minipane/tones/circus
41
+ @import themes/minipane/tones/burma
42
+ @import themes/minipane/tones/dark
43
+ //@import themes/minipane/tones/firen
44
+ //@import themes/minipane/tones/rusty
45
+
46
+ =minipane-tones($tones: burma)
47
+ @if $tones == circus
48
+ +minipane-tones-circus
49
+ @if $tones == burma
50
+ +minipane-tones-burma
51
+ @if $tones == dark
52
+ +minipane-tones-dark
53
+ @if $tones == firen
54
+ +minipane-tones-firen
55
+ @if $tones == rusty
56
+ +minipane-tones-rusty
57
+
@@ -0,0 +1,26 @@
1
+ =minipane-tones-burma
2
+
3
+ $darkblue: $burma-darkblue
4
+ $clearblue: $burma-clearblue
5
+ $sable: $burma-sable
6
+ $palegreen: $burma-palegreen
7
+ $deepgreen: $burma-deepgreen
8
+ $lightsable: $burma-lightsable
9
+
10
+ html, body
11
+ height: 100%
12
+ body
13
+ +linear-gradient-pie(#333 0%, #999 100%)
14
+ #header
15
+ h1
16
+ background: $darkblue
17
+ #body_content_left
18
+ background: $lightsable
19
+ #menu li
20
+ background: $lightsable
21
+ +linear-gradient-pie($palegreen 0%, $deepgreen 100%)
22
+ #body_content_right .inner
23
+ $framb: #A83438
24
+ background: $framb
25
+ border: 1px solid $framb - #222222
26
+
@@ -0,0 +1,73 @@
1
+ =minipane-tones-dark
2
+
3
+ // PALETTE
4
+
5
+ $neutral: (blue/9) + (gray) + 70
6
+ $dark: $neutral / 8
7
+ $light: $neutral * 1.5
8
+ $lighter: $neutral * 2
9
+
10
+ $bg: $dark
11
+ $text: $neutral
12
+
13
+ // ASSIGNEMENTS
14
+
15
+ body
16
+ background: $bg
17
+ color: $text
18
+
19
+ a
20
+ +link-colors($lighter, $lighter + 30, $lighter, $lighter, $lighter)
21
+ +hover-link
22
+
23
+ #header
24
+ h1
25
+ color: $neutral
26
+
27
+ #menu li
28
+ a
29
+ +link-colors(inherit, inherit)
30
+ text-decoration: none
31
+ background: $bg + 20
32
+ &.selected a,
33
+ a:hover
34
+ background: $bg + 30
35
+ color: $light
36
+
37
+ #footer
38
+ color: ($bg / 2) + ($neutral / 2.5)
39
+
40
+ #body_content_left
41
+ background: $dark + 30
42
+
43
+ #body_content_right
44
+ background: $dark + 10
45
+ color: $neutral - 50
46
+ //border: 2px solid $dark - 10
47
+
48
+ #{headers()}
49
+ color: $light - 40
50
+
51
+
52
+ //FORMS
53
+
54
+ input[type=text],
55
+ input[type=submit],
56
+ textarea
57
+ background: $dark + 20
58
+ &:focus
59
+ background: $dark + 60
60
+ border: none
61
+ outline: none
62
+
63
+ input[type=submit]
64
+ color: $neutral
65
+ font-weight: bold
66
+ cursor: pointer
67
+ &:hover
68
+ background: $dark + 60
69
+ color: $lighter
70
+
71
+
72
+
73
+
@@ -0,0 +1,4 @@
1
+ //@import /stylesheets/refinery/formatting.css
2
+
3
+ =shapy-formatting
4
+ +formatting-base
@@ -0,0 +1,16 @@
1
+ $shadow-color: black !default
2
+
3
+ =shapy-shadows
4
+
5
+ $default-box-shadow-color: $shadow-color
6
+ $default-box-shadow-blur: 15px
7
+ #body_content_left,
8
+ #menu a,
9
+ #header h1,
10
+ #header h1 a
11
+ +single-box-shadow
12
+ #header h1 a
13
+ +text-shadow(0,0,4px,transparentize($shadow-color, 0.7))
14
+ //filter: Shadow(Color=$shadow-color, Direction=135, Strength=5)
15
+ #body_content_right .inner
16
+ +box-shadow(transparentize(black, 0.6), -6px, 6px, 14px, 0)
@@ -0,0 +1,32 @@
1
+ =shapy-shapes-form
2
+ form
3
+ input[type=text],
4
+ input[type=submit],
5
+ textarea
6
+ +pie
7
+ +border-radius
8
+
9
+ =shapy-shapes-
10
+ $default-border-radius: 10px
11
+ +shapy-shapes-form
12
+ #header h1,
13
+ #header h1 a,
14
+ #menu a,
15
+ #body_content_left
16
+ +pie
17
+ +border-radius
18
+
19
+
20
+ =shapy-shapes
21
+ $b: 10px
22
+ +shapy-shapes-form
23
+ h1
24
+ +border-radius-pie(50px $b)
25
+ a
26
+ +border-radius-pie(50px $b)
27
+ #body_content_right .inner
28
+ +border-radius-pie($b $b*4 $b*4 $b)
29
+ #body_content_left
30
+ +border-radius-pie($b)
31
+ #menu a
32
+ +border-radius-pie($b $b 0 0)
@@ -0,0 +1,49 @@
1
+ =shapy-structure
2
+ #body_content_title
3
+ +visually-hide
4
+
5
+ .inner
6
+ +box
7
+
8
+ #page
9
+ #header
10
+ +container-alt
11
+ padding-top: 20px
12
+ #body
13
+ +container-alt
14
+ #body_content_left
15
+ +column(17)
16
+ .inner
17
+ padding-right: 100px
18
+ .no_body_content_right #body_content_left
19
+ +column(22)
20
+ #body_content_right
21
+ +column(8)
22
+ +last
23
+ +pull(1.5)
24
+ +prepend-top(40px)
25
+
26
+ #menu
27
+ +menu-inline-blocks(4)
28
+ padding-left: 10px
29
+
30
+ #header
31
+ h1
32
+ padding: 20px 10px
33
+ a
34
+ +unstyled-link
35
+ +inline-block
36
+ padding: 20px 30px
37
+ position: relative
38
+ margin-left: -40px
39
+
40
+ #footer
41
+ +container-alt
42
+ padding-top: 10px
43
+ padding-left: 40px
44
+
45
+ /* FORMS ------------------------------*/
46
+ .inquiries
47
+ form
48
+ +form-basic
49
+
@@ -0,0 +1,59 @@
1
+
2
+
3
+ // DEFAULT BP VALUES:
4
+
5
+ // $font_color: #333333 !default
6
+ // $quiet_color: $font_color + #333333 !default
7
+ // $loud_color: $font_color - #222222 !default
8
+ // $header_color: $font_color - #111111 !default
9
+ // $alt_text_color: #666666 !default
10
+ // $blueprint_background_color: #eeeeee !default
11
+ //
12
+ // $link_color: #000099 !default
13
+ // $link_hover_color: black !default
14
+ // $link_focus_color: $link_hover_color !default
15
+ // $link_active_color: $link_color + #cc0000 !default
16
+ // $link_visited_color: $link_color - #333333 !default
17
+ //
18
+ // $feedback_border_color: #dddddd !default
19
+ // $success_color: #264409 !default
20
+ // $success_bg_color: #e6efc2 !default
21
+ // $success_border_color: #c6d880 !default
22
+ // $notice_color: #514721 !default
23
+ // $notice_bg_color: #fff6bf !default
24
+ // $notice_border_color: #ffd324 !default
25
+ // $error_color: #8a1f11 !default
26
+ // $error_bg_color: #fbe3e4 !default
27
+ // $error_border_color: #fbc2c4 !default
28
+ //
29
+ // $highlight_color: yellow !default
30
+ // $added_color: white !default
31
+ // $added_bg_color: #006600 !default
32
+ // $removed_color: white !default
33
+ // $removed_bg_color: #990000 !default
34
+ //
35
+ // $blueprint_table_header_color: #c3d9ff !default
36
+ // $blueprint_table_stripe_color: #e5ecf9 !default
37
+
38
+ @import lib
39
+
40
+ @import themes/shapy/tones/circus
41
+ @import themes/shapy/tones/burma
42
+ @import themes/shapy/tones/dark
43
+ @import themes/shapy/tones/firen
44
+ @import themes/shapy/tones/rusty
45
+
46
+ =shapy-tones($tones: dark)
47
+ @if $tones == circus
48
+ +shapy-tones-circus
49
+ @if $tones == burma
50
+ +shapy-tones-burma
51
+ @if $tones == dark
52
+ +shapy-tones-dark
53
+ @if $tones == firen
54
+ +shapy-tones-firen
55
+ @if $tones == rusty
56
+ +shapy-tones-rusty
57
+
58
+ #menu a
59
+ +unstyled-link
@@ -0,0 +1,29 @@
1
+ =shapy-tones-burma
2
+
3
+ $darkblue: $burma-darkblue
4
+ $clearblue: $burma-clearblue
5
+ $sable: $burma-sable
6
+ $palegreen: $burma-palegreen
7
+ $deepgreen: $burma-deepgreen
8
+ $lightsable:$burma-lightsable
9
+
10
+ html, body
11
+ height: 100%
12
+ body
13
+ +linear-gradient-pie(#333 0%, #999 100%)
14
+ #header
15
+ h1
16
+ background: $darkblue
17
+ a
18
+ +linear-gradient-pie($palegreen 0%, $deepgreen 100%)
19
+ #body_content_left
20
+ background: $lightsable
21
+ #menu a
22
+ background: $lightsable - 30
23
+ #body_content_right .inner
24
+ $framb: #A83438
25
+ $bg-sub: $framb
26
+ background: $bg-sub
27
+ color: $bg-sub / 4
28
+ border: ($bg-sub / 1.5) 2px solid
29
+
@@ -0,0 +1,34 @@
1
+ =shapy-tones-circus
2
+
3
+ $brown: $circ-brown
4
+ $red: $circ-red
5
+ $yellow: $circ-yellow
6
+ $green: $circ-green
7
+ $white: $circ-white
8
+
9
+ html, body
10
+ height: 100%
11
+ body
12
+ +linear-gradient-pie(#222 0%, #777 100%)
13
+ #header
14
+ h1
15
+ $mix: mix($yellow, $white, 50)
16
+ +linear-gradient-pie($mix 0%, $yellow 100%)
17
+ a
18
+ +linear-gradient-pie($green +#222 0%, $green -#222 100%)
19
+ #body_content_left
20
+ $mix: mix($brown, $white, 50)
21
+ +linear-gradient-pie($mix 50px, $white 300px)
22
+ #menu li
23
+ $mix: mix($brown, $white, 80)
24
+ +linear-gradient-pie($mix 70%, $mix - #222 100%)
25
+ color: $white !important
26
+ #body_content_right .box
27
+ background: $red
28
+ border: 5px solid mix($red,$brown - #333 ,50)
29
+
30
+
31
+
32
+
33
+
34
+