pixarea-compass-themes 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +6 -0
- data/.livereload +21 -0
- data/Gemfile +4 -0
- data/README +23 -0
- data/README.markdown +23 -0
- data/Rakefile +2 -0
- data/lib/pixarea-compass-themes.rb +10 -0
- data/lib/pixarea-compass-themes/version.rb +7 -0
- data/pixarea-compass-themes.gemspec +25 -0
- data/sass/_lib.sass +8 -0
- data/sass/_modules.sass +4 -0
- data/sass/_themes.sass +2 -0
- data/sass/home.sass +1 -0
- data/sass/lib/_font-stacks.scss +63 -0
- data/sass/lib/_formatting.sass +23 -0
- data/sass/lib/_palettes.sass +38 -0
- data/sass/lib/_pie.sass +12 -0
- data/sass/lib/_structure.sass +12 -0
- data/sass/lib/_tones.sass +5 -0
- data/sass/lib/_typo.sass +10 -0
- data/sass/modules/_forms.sass +1 -0
- data/sass/modules/_menus.sass +1 -0
- data/sass/modules/forms/_basic.sass +27 -0
- data/sass/modules/menus/_inline-blocks.sass +15 -0
- data/sass/theme.sass +5 -0
- data/sass/themes/_minipane.sass +32 -0
- data/sass/themes/_shapy.sass +32 -0
- data/sass/themes/minipane/_formatting.sass +4 -0
- data/sass/themes/minipane/_shadows.sass +1 -0
- data/sass/themes/minipane/_shapes.sass +6 -0
- data/sass/themes/minipane/_structure.sass +50 -0
- data/sass/themes/minipane/_tones.sass +57 -0
- data/sass/themes/minipane/tones/_burma.sass +26 -0
- data/sass/themes/minipane/tones/_dark.sass +73 -0
- data/sass/themes/shapy/_formatting.sass +4 -0
- data/sass/themes/shapy/_shadows.sass +16 -0
- data/sass/themes/shapy/_shapes.sass +32 -0
- data/sass/themes/shapy/_structure.sass +49 -0
- data/sass/themes/shapy/_tones.sass +59 -0
- data/sass/themes/shapy/tones/_burma.sass +29 -0
- data/sass/themes/shapy/tones/_circus.sass +34 -0
- data/sass/themes/shapy/tones/_dark.sass +69 -0
- data/sass/themes/shapy/tones/_firen.sass +25 -0
- data/sass/themes/shapy/tones/_rusty.sass +30 -0
- data/stylesheets/PIE.htc +77 -0
- data/stylesheets/home.css +0 -0
- data/stylesheets/theme.css +413 -0
- data/stylesheets/themes/shapy.css +62 -0
- data/templates/project/manifest.rb +2 -0
- data/templates/project/theme.sass +5 -0
- data/views/layouts/application.html.erb +21 -0
- metadata +117 -0
@@ -0,0 +1 @@
|
|
1
|
+
=minipane-shadows
|
@@ -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,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
|
+
|