pwnstyles_rails 0.1.20 → 0.1.21

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,139 @@
1
+ // Make form fields look like Google Plus fields.
2
+ @mixin pwnplus-text-input(
3
+ $border-color,
4
+ $text-color: inherit,
5
+ $background-color: inherit,
6
+ $hover-border-color: darken($border-color, 19%),
7
+ $hover-shadow-color: lighten($hover-border-color, 3%),
8
+ $focus-border-color: saturate(darken($border-color, 55%), 100%),
9
+ $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%),
10
+ $placeholder-text-color: change-color($border-color, $saturation: 95%,
11
+ $lightness: 55%)
12
+ ) {
13
+ margin: 0;
14
+ padding: 0.1em 0.5ex;
15
+ border: 1px solid $border-color;
16
+ border-top-color: darken($border-color, 10%);
17
+
18
+ -webkit-border-radius: 2px;
19
+ -moz-border-radius: 2px;
20
+ border-radius: 2px;
21
+
22
+ color: $text-color;
23
+ font-size: inherit;
24
+ line-height: inherit;
25
+ text-decoration: none;
26
+
27
+ background-color: $background-color;
28
+
29
+ -webkit-transition: all .218s;
30
+ -moz-transition: all .218s;
31
+ transition: all .218s;
32
+
33
+ &:hover {
34
+ border-color: $hover-border-color;
35
+ border-top-color: darken($hover-border-color, 10%);
36
+
37
+
38
+ -moz-box-shadow: inset 0px 1px 2px $hover-shadow-color;
39
+ -webkit-box-shadow: inset 0px 1px 2px $hover-shadow-color;
40
+ box-shadow: inset 0px 1px 2px $hover-shadow-color;
41
+ }
42
+ &:focus {
43
+ border-color: $focus-border-color;
44
+ border-top-color: darken($focus-border-color, 10%);
45
+ outline: none;
46
+
47
+ -moz-box-shadow: inset 0px 1px 2px $focus-shadow-color;
48
+ -webkit-box-shadow: inset 0px 1px 2px $focus-shadow-color;
49
+ box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
50
+ }
51
+
52
+ &::-webkit-input-placeholder {
53
+ font: inherit;
54
+ text-shadow: none;
55
+ color: $placeholder-text-color;
56
+ }
57
+ &:-moz-placeholder {
58
+ font: inherit;
59
+ text-shadow: none;
60
+ color: $placeholder-text-color;
61
+ }
62
+ }
63
+
64
+ // Google Plus-like stylng for box-like form fields (radio, checkbox).
65
+ @mixin gplus-box-form-field(
66
+ $border-color,
67
+ $background-color: inherit,
68
+ $hover-border-color: darken($border-color, 19%),
69
+ $hover-shadow-color: lighten($hover-border-color, 3%),
70
+ $focus-border-color: saturate(darken($border-color, 55%), 100%),
71
+ $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%)
72
+ ) {
73
+ border: 1px solid $border-color;
74
+ background-color: $background-color;
75
+
76
+ -webkit-transition: all .218s;
77
+ -moz-transition: all .218s;
78
+ transition: all .218s;
79
+
80
+ &:hover {
81
+ border-color: $hover-border-color;
82
+
83
+ box-shadow: inset 0px 1px 2px $hover-shadow-color;
84
+ -moz-box-shadow: inset 0px 1px 2px $hover-shadow-color;
85
+ -webkit-box-shadow: inset 0px 1px 2px $hover-shadow-color;
86
+ }
87
+ &:focus {
88
+ border-color: $focus-border-color;
89
+ outline: none;
90
+
91
+ -moz-box-shadow: inset 0px 1px 2px $focus-shadow-color;
92
+ -webkit-box-shadow: inset 0px 1px 2px $focus-shadow-color;
93
+ box-shadow: inset 0px 1px 2px $focus-shadow-color;
94
+ }
95
+ }
96
+
97
+ @mixin gplus-form-select(
98
+ $border-color,
99
+ $text-color: inherit,
100
+ $background-color: inherit,
101
+ $hover-border-color: darken($border-color, 19%),
102
+ $hover-shadow-color: lighten($hover-border-color, 3%),
103
+ $focus-border-color: saturate(darken($border-color, 55%), 100%),
104
+ $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%),
105
+ $placeholder-text-color: change-color($border-color, $saturation: 95%,
106
+ $lightness: 55%)
107
+ ) {
108
+ @include gplus-text-input(
109
+ $border-color: $border-color,
110
+ $text-color: $text-color,
111
+ $background-color: $background-color,
112
+ $hover-border-color: $hover-border-color,
113
+ $hover-shadow-color: $hover-shadow-color,
114
+ $focus-border-color: $focus-border-color,
115
+ $focus-shadow-color: $focus-shadow-color,
116
+ $placeholder-text-color: $placeholder-text-color
117
+ );
118
+ padding: 0.1em 2ex 0.1em 0.5ex;
119
+ text-overflow: ellipsis;
120
+ -webkit-appearance: textfield;
121
+ -moz-appearance: textfield;
122
+ appearance: textfield;
123
+ background: asset_data_url("pwnstyles/select-arrow.svg") no-repeat center
124
+ right;
125
+ }
126
+
127
+ // Import to highlight a form field to indicate errors in the input.
128
+ @mixin gplus-form-field-error-highlighting(
129
+ $highlight-border: hsl(0deg, 100%, 50%),
130
+ $highlight-background: change-color($highlight-border, $lightness: 97%),
131
+ $highlight-shadow: lighten($highlight-border, 27%)
132
+ ) {
133
+ border-color: $highlight-color;
134
+ background-color: $highlight-background;
135
+
136
+ box-shadow: inset 0px 1px 2px $highlight-shadow;
137
+ -moz-box-shadow: inset 0px 1px 2px $highlight-shadow;
138
+ -webkit-box-shadow: inset 0px 1px 2px $highlight-shadow;
139
+ }
@@ -0,0 +1,7 @@
1
+ @mixin pwnplus-clearfix {
2
+ &:after {
3
+ content: "";
4
+ display: table;
5
+ clear: both;
6
+ }
7
+ }
@@ -0,0 +1,104 @@
1
+ // Turns an ol into a Google-style two-level menu bar.
2
+ @mixin pwnplus-menu-bar(
3
+ $bar-color,
4
+ $text-color,
5
+ $border-color: $bar-color,
6
+ $hover-bar-color: $text-color,
7
+ $hover-text-color: $bar-color,
8
+ $z-index: 5,
9
+ $last-item-right: false) {
10
+ display: block;
11
+ background-color: $bar-color;
12
+ color: $text-color;
13
+ margin: 0;
14
+ padding: 0;
15
+
16
+ @if $last-item-right {
17
+ position: relative;
18
+ }
19
+ @include pwnplus-clearfix;
20
+
21
+ li {
22
+ margin: 0;
23
+ padding: 0;
24
+ }
25
+
26
+ > li {
27
+ display: inline-block;
28
+ background-color: $bar-color;
29
+
30
+ > a {
31
+ display: inline-block;
32
+ }
33
+
34
+ > ol {
35
+ list-style: none;
36
+ display: none;
37
+ background-color: $bar-color;
38
+ margin: 0;
39
+ padding: 0;
40
+ border: 1px solid $border-color;
41
+ position: absolute;
42
+ z-index: $z-index;
43
+
44
+ -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
45
+ -moz-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
46
+ box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
47
+
48
+ a {
49
+ padding: 0 2.5em 0 0.5em;
50
+ }
51
+ }
52
+ }
53
+ > li:hover {
54
+ > ol {
55
+ display: block;
56
+ }
57
+ }
58
+ li:hover > a {
59
+ background-color: $hover-bar-color;
60
+ color: $hover-text-color;
61
+ img {
62
+ -webkit-filter: grayscale(0);
63
+ }
64
+ }
65
+
66
+ a {
67
+ display: block;
68
+ padding: 0 0.5em;
69
+ text-decoration: none;
70
+ color: inherit;
71
+ img {
72
+ -webkit-filter: grayscale(0.33);
73
+ vertical-align: baseline;
74
+ }
75
+ }
76
+ a:visited {
77
+ color: inherit;
78
+ }
79
+
80
+ >li:first-child > a {
81
+ padding-left: 1px;
82
+ }
83
+
84
+ @if $last-item-right == true {
85
+ > li:last-child {
86
+ position: absolute;
87
+ right: 0;
88
+ bottom: 0;
89
+ }
90
+ > li:last-child > ol {
91
+ right: 0;
92
+ max-width: 500%;
93
+ }
94
+ > li:last-child a {
95
+ vertical-align: bottom;
96
+ }
97
+ > li:last-child > a {
98
+ padding: 0 1px 0 0.5em;
99
+ }
100
+ > li:last-child a span {
101
+ display: inline-block;
102
+ }
103
+ }
104
+ }
@@ -33,34 +33,8 @@ $footer-text-color: change-color($main-color1,
33
33
  $saturation: 54%, $lightness: 16%) !default;
34
34
 
35
35
  // Buttons.
36
- $button-base-color: change-color($main-color1, $saturation: 5%) !default;
37
- $button-color: change-color($button-base-color, $lightness: 95%) !default;
38
- $button-text-color: change-color($button-base-color, $lightness: 43%) !default;
39
- $button-border-color: change-color($button-base-color, $lightness: 86%)
40
- !default;
41
- $button-hover-text-color: change-color($button-base-color, $lightness: 20%)
42
- !default;
43
- $button-hover-border-color: change-color($button-base-color, $lightness: 78%)
44
- !default;
45
- $button-active-text-color: change-color($button-base-color, $lightness: 0%)
46
- !default;
47
- $button-active-border-color: change-color($button-base-color, $lightness: 78%)
48
- !default;
49
-
36
+ $button-base-color: $main-color1 !default;
50
37
  $color-button-base-color: $main-color1 !default;
51
- $color-button-color: change-color($color-button-base-color,
52
- $lightness: 36%) !default;
53
- $color-button-text-color: change-color($color-button-base-color,
54
- $saturation: 0%, $lightness: 100%) !default;
55
- $color-button-border-color: change-color($color-button-base-color,
56
- $saturation: 57%, $lightness: 32%) !default;
57
- $color-button-hover-text-color: $color-button-text-color !default;
58
- $color-button-hover-border-color: change-color($color-button-base-color,
59
- $lightness: 22%) !default;
60
- $color-button-active-text-color: $color-button-text-color !default;
61
- $color-button-active-border-color: change-color($color-button-base-color,
62
- $lightness: 22%) !default;
63
-
64
38
 
65
39
  // Input fields.
66
40
  $input-base-color: $main-color1 !default;
@@ -7,7 +7,7 @@
7
7
  // Standard text
8
8
  $main-font: Georgia, serif !default;
9
9
  $main-font-size: 11pt !default;
10
- $main-line-height: 1.2em !default;
10
+ $main-line-height: 1.2 !default;
11
11
 
12
12
  // Headings.
13
13
  $heading-font: Helvetica, sans-serif !default;
@@ -26,5 +26,5 @@ $h6-font-size: $main-font-size * 1 !default;
26
26
  $h6-line-height: $main-line-height !default;
27
27
 
28
28
  // Header.
29
- $header-menu-font-size: 18px !default;
30
- $header-menu-line-height: 24px !default;
29
+ $header-menu-font-size: 14pt !default;
30
+ $header-menu-line-height: 1.5 !default;
@@ -1,18 +1,20 @@
1
- <nav>
2
- <ul>
3
- <li>
4
- <a href="#">Footer Link</a>
5
- <a href="#">Footer Link</a>
6
- <a href="#">Footer Link</a>
7
- </li>
8
- </ul>
9
- <p class="copyright">
10
- <%= link_to image_tag('cc_by_nd.png', :alt => 'Creative Commons License'),
11
- 'http://creativecommons.org/licenses/by-nd/3.0/us/' %>
12
- &copy; Copyright 2011
13
- <a href="#">someone</a>
14
- </p>
15
- <p class="design">
16
- Designed by <a href="http://www.costan.us">Victor Costan</a>
17
- </p>
18
- </nav>
1
+ <footer id="footer">
2
+ <nav>
3
+ <ul>
4
+ <li>
5
+ <a href="#">Footer Link</a>
6
+ <a href="#">Footer Link</a>
7
+ <a href="#">Footer Link</a>
8
+ </li>
9
+ </ul>
10
+ <p class="copyright">
11
+ <%= link_to image_tag('cc_by_nd.png', :alt => 'Creative Commons License'),
12
+ 'http://creativecommons.org/licenses/by-nd/3.0/us/' %>
13
+ &copy; Copyright 2011
14
+ <a href="#">someone</a>
15
+ </p>
16
+ <p class="design">
17
+ Designed by <a href="http://www.costan.us">Victor Costan</a>
18
+ </p>
19
+ </nav>
20
+ </footer>
@@ -1,12 +1,21 @@
1
- <hgroup>
2
- <h1>
3
- <%= image_tag 'logo.png', :alt => '' %>
4
- <span class="app-name">
5
- App Name
6
- </span>
7
- </h1>
8
-
9
- <% if current_user %>
10
- <%= render 'layouts/menu' %>
11
- <% end %>
12
- </hgroup>
1
+ <header id="header">
2
+ <nav id="main-menu">
3
+ <ol>
4
+ <li>
5
+ <%= link_to root_path do %>
6
+ <h1>
7
+ <%= image_tag 'logo.png', :alt => '' %>
8
+ <span class="app-name">
9
+ App Name
10
+ </span>
11
+ </h1>
12
+ <% end %>
13
+ </li>
14
+ <% if current_user %>
15
+ <%= render 'layouts/menu' %>
16
+ <% else %>
17
+ <li> </li>
18
+ <% end %>
19
+ </ol>
20
+ </nav>
21
+ </header>
@@ -1,22 +1,18 @@
1
- <nav>
1
+ <li>
2
+ <%= link_to 'Submenu', '#' %>
2
3
  <ol>
3
- <li>
4
- <%= link_to 'Submenu', '#' %>
5
- <ol>
6
- <li><%= link_to 'Item 1', '#' %></li>
7
- <li><%= link_to 'Item 2', '#' %></li>
8
- <li><%= link_to 'Item 3', '#' %></li>
9
- </ol>
10
- </li>
11
- <li>
12
- <%= link_to 'Action', '#' %>
13
- </li>
14
- <li>
15
- <%= link_to 'username', '#' %>
16
- <ol>
17
- <li><%= link_to 'Sign out', '#' %></li>
18
- <li><%= link_to 'Settings', '#' %></li>
19
- </ol>
20
- </li>
4
+ <li><%= link_to 'Item 1', '#' %></li>
5
+ <li><%= link_to 'Item 2', '#' %></li>
6
+ <li><%= link_to 'Item 3', '#' %></li>
21
7
  </ol>
22
- </nav>
8
+ </li>
9
+ <li>
10
+ <%= link_to 'Action', '#' %>
11
+ </li>
12
+ <li>
13
+ <%= link_to 'username', '#' %>
14
+ <ol>
15
+ <li><%= link_to 'Sign out', '#' %></li>
16
+ <li><%= link_to 'Settings', '#' %></li>
17
+ </ol>
18
+ </li>
@@ -8,9 +8,7 @@
8
8
  <%= javascript_include_tag 'application' %>
9
9
  </head>
10
10
  <body>
11
- <header>
12
11
  <%= render 'layouts/header' %>
13
- </header>
14
12
 
15
13
  <div id="real-body">
16
14
  <%= render 'layouts/status_bar' %>
@@ -21,8 +19,6 @@
21
19
  </div>
22
20
  </div>
23
21
 
24
- <footer>
25
22
  <%= render 'layouts/footer' %>
26
- </footer>
27
23
  </body>
28
24
  </html>
@@ -5,11 +5,11 @@
5
5
 
6
6
  Gem::Specification.new do |s|
7
7
  s.name = "pwnstyles_rails"
8
- s.version = "0.1.20"
8
+ s.version = "0.1.21"
9
9
 
10
10
  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
11
11
  s.authors = ["Victor Costan"]
12
- s.date = "2012-03-16"
12
+ s.date = "2012-04-18"
13
13
  s.description = "Included CSS was designed for reuse across pwnb.us apps."
14
14
  s.email = "victor@costan.us"
15
15
  s.extra_rdoc_files = [
@@ -27,6 +27,7 @@ Gem::Specification.new do |s|
27
27
  "VERSION",
28
28
  "app/assets/images/pwnstyles/select-arrow.svg",
29
29
  "app/assets/javascripts/pwn-fx.js.coffee",
30
+ "app/assets/stylesheets/_pwnplus.css.scss",
30
31
  "app/assets/stylesheets/_pwnstyles.css.scss",
31
32
  "app/assets/stylesheets/generic/_buttons.css.scss",
32
33
  "app/assets/stylesheets/generic/_figures.css.scss",
@@ -35,7 +36,6 @@ Gem::Specification.new do |s|
35
36
  "app/assets/stylesheets/generic/_inputs.css.scss",
36
37
  "app/assets/stylesheets/generic/_links.css.scss",
37
38
  "app/assets/stylesheets/generic/_lists.css.scss",
38
- "app/assets/stylesheets/generic/_menu.css.scss",
39
39
  "app/assets/stylesheets/generic/_pwnfx.css.scss",
40
40
  "app/assets/stylesheets/generic/_reset.css.scss",
41
41
  "app/assets/stylesheets/generic/_tables.css.scss",
@@ -44,6 +44,10 @@ Gem::Specification.new do |s|
44
44
  "app/assets/stylesheets/modules/_footer.css.scss",
45
45
  "app/assets/stylesheets/modules/_header.css.scss",
46
46
  "app/assets/stylesheets/modules/_status_bar.css.scss",
47
+ "app/assets/stylesheets/pwnplus/_buttons.css.scss",
48
+ "app/assets/stylesheets/pwnplus/_form_fields.css.scss",
49
+ "app/assets/stylesheets/pwnplus/_hacks.css.scss",
50
+ "app/assets/stylesheets/pwnplus/_menu_bar.css.scss",
47
51
  "app/assets/stylesheets/vars/_color_scheme.css.scss",
48
52
  "app/assets/stylesheets/vars/_fonts.css.scss",
49
53
  "app/assets/stylesheets/vars/_layout_sizes.css.scss",
@@ -65,35 +69,35 @@ Gem::Specification.new do |s|
65
69
  s.homepage = "http://github.com/pwnall/pwnstyles_rails"
66
70
  s.licenses = ["MIT"]
67
71
  s.require_paths = ["lib"]
68
- s.rubygems_version = "1.8.17"
72
+ s.rubygems_version = "1.8.22"
69
73
  s.summary = "Rails 3 SCSS integration and non-trivial default style."
70
74
 
71
75
  if s.respond_to? :specification_version then
72
76
  s.specification_version = 3
73
77
 
74
78
  if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
75
- s.add_runtime_dependency(%q<rails>, [">= 3.2.0"])
76
- s.add_runtime_dependency(%q<sass-rails>, [">= 3.2.4"])
79
+ s.add_runtime_dependency(%q<rails>, [">= 3.2.3"])
80
+ s.add_runtime_dependency(%q<sass-rails>, [">= 3.2.5"])
77
81
  s.add_development_dependency(%q<shoulda>, [">= 0"])
78
- s.add_development_dependency(%q<bundler>, ["~> 1.0.0"])
79
- s.add_development_dependency(%q<jeweler>, [">= 1.8.0"])
82
+ s.add_development_dependency(%q<bundler>, [">= 1.1.0"])
83
+ s.add_development_dependency(%q<jeweler>, [">= 1.8.3"])
80
84
  s.add_development_dependency(%q<rcov>, [">= 0"])
81
85
  s.add_development_dependency(%q<simplecov>, [">= 0"])
82
86
  else
83
- s.add_dependency(%q<rails>, [">= 3.2.0"])
84
- s.add_dependency(%q<sass-rails>, [">= 3.2.4"])
87
+ s.add_dependency(%q<rails>, [">= 3.2.3"])
88
+ s.add_dependency(%q<sass-rails>, [">= 3.2.5"])
85
89
  s.add_dependency(%q<shoulda>, [">= 0"])
86
- s.add_dependency(%q<bundler>, ["~> 1.0.0"])
87
- s.add_dependency(%q<jeweler>, [">= 1.8.0"])
90
+ s.add_dependency(%q<bundler>, [">= 1.1.0"])
91
+ s.add_dependency(%q<jeweler>, [">= 1.8.3"])
88
92
  s.add_dependency(%q<rcov>, [">= 0"])
89
93
  s.add_dependency(%q<simplecov>, [">= 0"])
90
94
  end
91
95
  else
92
- s.add_dependency(%q<rails>, [">= 3.2.0"])
93
- s.add_dependency(%q<sass-rails>, [">= 3.2.4"])
96
+ s.add_dependency(%q<rails>, [">= 3.2.3"])
97
+ s.add_dependency(%q<sass-rails>, [">= 3.2.5"])
94
98
  s.add_dependency(%q<shoulda>, [">= 0"])
95
- s.add_dependency(%q<bundler>, ["~> 1.0.0"])
96
- s.add_dependency(%q<jeweler>, [">= 1.8.0"])
99
+ s.add_dependency(%q<bundler>, [">= 1.1.0"])
100
+ s.add_dependency(%q<jeweler>, [">= 1.8.3"])
97
101
  s.add_dependency(%q<rcov>, [">= 0"])
98
102
  s.add_dependency(%q<simplecov>, [">= 0"])
99
103
  end