pwnstyles_rails 0.1.24 → 0.1.25

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.
data/Gemfile CHANGED
@@ -1,12 +1,13 @@
1
1
  source :rubygems
2
2
 
3
+ gem 'compass-rails', '>= 1.0.3'
3
4
  gem 'rails', '>= 3.2.3'
4
5
  gem 'sass-rails', '>= 3.2.5'
5
6
 
6
7
  group :development do
7
- gem 'minitest', '>= 3.0.0'
8
- gem 'bundler', '>= 1.1.0'
9
- gem 'jeweler', '>= 1.8.3'
8
+ gem 'minitest', '>= 3.4.0'
9
+ gem 'bundler', '>= 1.2.0'
10
+ gem 'jeweler', '>= 1.8.4'
10
11
  gem 'rcov', '>= 0', :platform => :mri_18
11
12
  gem 'simplecov', '>= 0', :platform => :mri_19
12
13
  end
data/Gemfile.lock CHANGED
@@ -29,8 +29,16 @@ GEM
29
29
  i18n (~> 0.6)
30
30
  multi_json (~> 1.0)
31
31
  arel (3.0.2)
32
- builder (3.0.1)
32
+ builder (3.0.3)
33
+ chunky_png (1.2.6)
34
+ compass (0.12.2)
35
+ chunky_png (~> 1.2)
36
+ fssm (>= 0.2.7)
37
+ sass (~> 3.1)
38
+ compass-rails (1.0.3)
39
+ compass (>= 0.12.2, < 0.14)
33
40
  erubis (2.7.0)
41
+ fssm (0.2.9)
34
42
  git (1.2.5)
35
43
  hike (1.2.1)
36
44
  i18n (0.6.1)
@@ -99,9 +107,10 @@ PLATFORMS
99
107
  ruby
100
108
 
101
109
  DEPENDENCIES
102
- bundler (>= 1.1.0)
103
- jeweler (>= 1.8.3)
104
- minitest (>= 3.0.0)
110
+ bundler (>= 1.2.0)
111
+ compass-rails (>= 1.0.3)
112
+ jeweler (>= 1.8.4)
113
+ minitest (>= 3.4.0)
105
114
  rails (>= 3.2.3)
106
115
  rcov
107
116
  sass-rails (>= 3.2.5)
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.1.24
1
+ 0.1.25
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
2
+ <polygon points="25,42 75,42 50,66" fill="#595959" stroke="none"/>
3
+ </svg>
@@ -1,3 +1,3 @@
1
- <svg viewBox="0 0 100 100" width="0.5em" height="0.5em" version="1.1" xmlns="http://www.w3.org/2000/svg">
2
- <polygon points="35,42 85,42 60,66" fill="#8C8C8C"/>
1
+ <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
2
+ <polygon points="25,42 75,42 50,66" fill="#8C8C8C" stroke="none"/>
3
3
  </svg>
@@ -4,16 +4,18 @@
4
4
  @import 'vars/fonts.css.scss';
5
5
  @import 'vars/layout_sizes.css.scss';
6
6
 
7
+ @import 'generic/compass.css.scss';
7
8
  @import 'generic/reset.css.scss';
8
- @import 'generic/buttons.css.scss';
9
- @import 'generic/figures.css.scss';
10
- @import 'generic/forms.css.scss';
11
- @import 'generic/images.css.scss';
12
- @import 'generic/inputs.css.scss';
13
- @import 'generic/links.css.scss';
14
9
  @import 'generic/pwnfx.css.scss';
15
- @import 'generic/tables.css.scss';
16
- @import 'generic/text.css.scss';
10
+
11
+ @import 'elements/buttons.css.scss';
12
+ @import 'elements/figures.css.scss';
13
+ @import 'elements/forms.css.scss';
14
+ @import 'elements/images.css.scss';
15
+ @import 'elements/inputs.css.scss';
16
+ @import 'elements/links.css.scss';
17
+ @import 'elements/tables.css.scss';
18
+ @import 'elements/text.css.scss';
17
19
 
18
20
  @import 'modules/body.css.scss';
19
21
  @import 'modules/footer.css.scss';
@@ -3,30 +3,41 @@ form {
3
3
  display: table;
4
4
  border-collapse: collapse;
5
5
  width: 100%;
6
-
6
+
7
7
  &.hidden {
8
8
  display: none;
9
9
  }
10
-
10
+
11
11
  .field {
12
12
  display: table-row;
13
13
  margin: 0;
14
- padding: 0 0 0.2em 0;
14
+ padding: 0 0 0.25em 0;
15
+ vertical-align: top;
15
16
  &.hidden {
16
17
  display: none;
17
18
  }
18
-
19
+
19
20
  > * {
20
21
  display: table-cell;
21
- vertical-align: middle;
22
+ // When browsers implement inline-box-align, use it.
23
+ // inline-box-align: initial;
24
+ // vertical-align: baseline;
25
+ vertical-align: top;
22
26
  margin: 0;
23
27
  }
24
- > label {
25
- padding: 0 0.4em 0 0;
28
+ > label, > .label, > .field_with_errors {
29
+ display: block; // gets wrapped by table-cell
30
+ padding-right: 0.375em;
26
31
  text-align: right;
27
32
  }
28
33
  > .value {
29
- padding: 0 0 0.25em 0;
34
+ padding-bottom: 0.25em;
35
+ > input, select, textarea {
36
+ vertical-align: top;
37
+ }
38
+ > input[type=checkbox], > input[type=radio] {
39
+ vertical-align: middle;
40
+ }
30
41
  > .field_with_errors {
31
42
  display: block;
32
43
  }
@@ -34,27 +45,26 @@ form {
34
45
  > .comment {
35
46
  padding: 0 0 0 0.5em;
36
47
  }
37
-
48
+
38
49
  input, select, textarea {
39
50
  font-size: inherit;
40
51
  }
41
- input, select:first-child:last-child, textarea {
52
+ input, select:first-child:last-child, textarea {
42
53
  width: 100%;
43
- -webkit-box-sizing: border-box;
44
- -moz-box-sizing: border-box;
45
- box-sizing: border-box;
54
+ @include box-sizing(border-box);
46
55
  }
47
56
  input[type=radio], input[type=checkbox] {
48
- width: auto;
57
+ width: 1.2em;
58
+ @include box-sizing(content-box);
49
59
  }
50
60
  }
51
61
  }
52
-
62
+
53
63
  .action {
54
64
  margin: 0;
55
65
  padding: 0;
56
66
  text-align: center;
57
-
67
+
58
68
  input[type=submit], input[type=button], button {
59
69
  min-width: 7em;
60
70
  }
@@ -0,0 +1,25 @@
1
+ input, textarea {
2
+ @include pwnplus-text-field($input-border-color);
3
+ }
4
+ textarea {
5
+ height: 5.25em;
6
+ }
7
+
8
+ input[type=radio], input[type=checkbox] {
9
+ @include pwnplus-box-field($input-border-color);
10
+ }
11
+
12
+ select {
13
+ @include pwnplus-select-field($input-border-color);
14
+ }
15
+
16
+ label, .label {
17
+ @include pwnplus-label;
18
+ }
19
+
20
+ .field_with_errors {
21
+ input[type=text], select, textarea {
22
+ @include pwnplus-field-error-highlighting;
23
+ }
24
+ }
25
+
@@ -1,5 +1,5 @@
1
1
  th, td {
2
- padding: 0.1em 0.3em 0.2em 0;
2
+ padding: 0.125em 0.375em 0.25em 0;
3
3
  }
4
4
  tr, th, td {
5
5
  vertical-align: middle;
@@ -11,13 +11,13 @@ html, body {
11
11
  }
12
12
 
13
13
  p {
14
- margin: 0.1em 0 0.2em 0;
14
+ margin: 0.125em 0 0.25em 0;
15
15
  }
16
16
 
17
17
  h1, h2, h3, h4, h5, h6 {
18
18
  font-family: $heading-font;
19
19
  font-weight: bold;
20
- margin: 0.25em 0 0.2em 0;
20
+ margin: 0.25em 0 0.1875em 0;
21
21
  text-rendering: geometricPrecision;
22
22
 
23
23
  // This patch makes buttons in headings look less weird.
@@ -0,0 +1,19 @@
1
+ $experimental-support-for-mozilla: true;
2
+ $experimental-support-for-webkit: true;
3
+ $experimental-support-for-microsoft: true;
4
+ $experimental-support-for-pie: false;
5
+ $experimental-support-for-opera: false;
6
+ $experimental-support-for-khtml: false;
7
+ $legacy-support-for-ie: false;
8
+ $legacy-support-for-ie6: false;
9
+ $legacy-support-for-ie7: false;
10
+ $legacy-support-for-ie8: false;
11
+ $legacy-support-for-mozilla: false;
12
+ $support-for-original-webkit-gradients: false;
13
+
14
+ @import "compass";
15
+ @import "compass/typography";
16
+ @import "compass/utilities";
17
+ @import "compass/reset/utilities";
18
+ @import "compass/layout";
19
+
@@ -1,36 +1,45 @@
1
- html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
2
- pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
3
- strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
4
- legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
5
- canvas, details, dialog, figcaption, figure, footer, header, hgroup, menu,
6
- nav, section, summary, time, mark, audio, video {
7
- margin: 0;
8
- padding: 0;
9
- border: 0;
10
- outline: 0;
11
- font-size: inherit;
12
- line-height: inherit;
13
- font: inherit;
14
- vertical-align: baseline;
15
- background: transparent;
16
- }
17
-
18
- article, aside, details, figcaption, figure, dialog, footer, header, hgroup,
19
- menu, nav, section {
20
- display: block;
1
+ @each $tag in html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
2
+ blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
3
+ samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form,
4
+ label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
5
+ aside, canvas, details, dialog, figcaption, figure, footer, header,
6
+ hgroup, menu, nav, section, summary, time, mark, audio, video {
7
+ #{$tag} {
8
+ margin: 0;
9
+ padding: 0;
10
+ border: 0;
11
+ outline: 0;
12
+ font-size: inherit;
13
+ line-height: inherit;
14
+ font: inherit;
15
+ vertical-align: baseline;
16
+ background: transparent;
17
+ }
21
18
  }
22
19
 
23
- dl, ul, ol {
24
- list-style: none;
20
+ @each $html5_tag in article, aside, details, figcaption, figure, dialog,
21
+ footer, header, hgroup, menu, nav, section {
22
+ #{$html5_tag} {
23
+ display: block;
24
+ }
25
25
  }
26
26
 
27
- blockquote, q {
28
- quotes: none;
27
+ @each $list_tag in dl, ul, ol {
28
+ #{$list_tag} {
29
+ list-style: none;
30
+ }
29
31
  }
30
32
 
31
- blockquote:before, blockquote:after, q:before, q:after {
32
- content: '';
33
- content: none;
33
+ @each $tag in blockquote, q {
34
+ #{$tag} {
35
+ quotes: none;
36
+ @each $side in before, after {
37
+ &:#{$side} {
38
+ content: '';
39
+ content: none;
40
+ }
41
+ }
42
+ }
34
43
  }
35
44
 
36
45
  a {
@@ -62,9 +71,13 @@ del {
62
71
  text-decoration: line-through;
63
72
  }
64
73
 
65
- abbr[title], dfn[title] {
66
- border-bottom: 1px dotted;
67
- cursor: help;
74
+ @each $tag in abbr, dfn {
75
+ #{$tag} {
76
+ &[title] {
77
+ border-bottom: 1px dotted;
78
+ cursor: help;
79
+ }
80
+ }
68
81
  }
69
82
 
70
83
  table {
@@ -84,6 +97,8 @@ hr {
84
97
  padding: 0;
85
98
  }
86
99
 
87
- input, select {
88
- vertical-align: middle;
100
+ @each $tag in input, select {
101
+ #{$tag} {
102
+ vertical-align: middle;
103
+ }
89
104
  }
@@ -18,6 +18,8 @@ body {
18
18
  }
19
19
 
20
20
  #real-body {
21
+ position: absolute;
22
+ width: 100%;
21
23
  background-color: #ffffff;
22
24
  -moz-box-flex: 1;
23
25
  -webkit-box-flex: 1;
@@ -10,46 +10,37 @@
10
10
  $active-border-color: $hover-border-color,
11
11
  $subdued: true
12
12
  ) {
13
- display: inline-block;
13
+ @include inline-block;
14
14
 
15
15
  margin: 0;
16
16
  padding: 0.1em 1ex;
17
17
  border: 1px solid $border-color;
18
-
19
- -moz-border-radius: 2px;
20
- -webkit-border-radius: 2px;
21
- border-radius: 2px;
18
+ @include border-radius(2px);
22
19
 
23
20
  color: $text-color;
24
21
  @if not $subdued {
25
- text-shadow: 0 1px rgba(0, 0, 0, 0.1);
22
+ @include text-shadow(0 1px rgba(0, 0, 0, 0.1));
26
23
  }
27
- font-size: 1.21em;
28
- line-height: 1.35em;
24
+ font-size: 1.25em;
25
+ line-height: 1.375em;
29
26
  font-weight: $font-weight;
30
27
  text-decoration: none;
31
28
  text-overflow: ellipsis;
32
29
 
33
30
  background-color: $color;
34
- background: -webkit-linear-gradient(top, lighten($color, 1%),
35
- darken($color, 2%));
36
- background: -moz-linear-gradient(top, lighten($color, 1%),
37
- darken($color, 2%));
38
- background: linear-gradient(to bottom, lighten($color, 1%) 0%,
39
- darken($color, 2%) 100%);
31
+ @include background(linear-gradient(lighten($color, 1%),
32
+ darken($color, 2%)));
40
33
 
41
- -webkit-transition: all .218s;
42
- -moz-transition: all .218s;
43
- transition: all .218s;
34
+ @include transition(all .218s);
44
35
 
45
36
  @if $subdued {
46
37
  img {
47
- -webkit-filter: grayscale(0.4);
38
+ @include filter(grayscale(0.4));
48
39
  }
49
40
  }
50
41
  @if not $subdued {
51
42
  img {
52
- -webkit-filter: brightness(-0.05);
43
+ @include filter(brightness(-0.05));
53
44
  }
54
45
  }
55
46
 
@@ -61,25 +52,19 @@
61
52
  color: $hover-text-color;
62
53
  border-color: $hover-border-color;
63
54
  @if not $subdued {
64
- text-shadow: 0 1px rgba(0, 0, 0, 0.3);
55
+ @include text-shadow(0 1px rgba(0, 0, 0, 0.3));
65
56
  }
66
57
 
67
58
  @if $subdued {
68
- -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
69
- -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
70
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
71
-
59
+ @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
72
60
  img {
73
- -webkit-filter: grayscale(0);
61
+ @include filter(grayscale(0));
74
62
  }
75
63
  }
76
64
  @if not $subdued {
77
- -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
78
- -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
79
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
80
-
65
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
81
66
  img {
82
- -webkit-filter: brightness(0.05);
67
+ @include filter(brightness(0.05));
83
68
  }
84
69
  }
85
70
  }
@@ -87,31 +72,20 @@
87
72
  color: $active-text-color;
88
73
  border-color: $active-border-color;
89
74
 
90
- background: -webkit-linear-gradient(top, darken($color, 2%),
91
- lighten($color, 2%));
92
- background: -moz-linear-gradient(top, darken($color, 2%),
93
- lighten($color, 2%));
94
- background: linear-gradient(to bottom, darken($color, 2%) 0%,
95
- lighten($color, 2%) 100%);
75
+ @include background(linear-gradient(lighten($color, 2%),
76
+ darken($color, 2%)));
96
77
 
97
78
  @if $subdued {
98
- -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
99
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
100
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
101
-
79
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
102
80
  img {
103
81
  -webkit-filter: grayscale(0);
104
82
  }
105
83
  }
106
84
  @if not $subdued {
107
- text-shadow: 0 1px rgba(0, 0, 0, 0.3);
108
-
109
- -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
110
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
111
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
112
-
85
+ @include text-shadow(0 1px rgba(0, 0, 0, 0.3));
86
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
113
87
  img {
114
- -webkit-filter: brightness(0.05);
88
+ @include filter(brightness(0.05));
115
89
  }
116
90
  }
117
91
  }
@@ -1,52 +1,43 @@
1
1
  // Make form fields look like Google Plus fields.
2
- @mixin pwnplus-text-input(
2
+ @mixin pwnplus-text-field(
3
3
  $border-color,
4
4
  $text-color: inherit,
5
5
  $background-color: inherit,
6
6
  $hover-border-color: darken($border-color, 19%),
7
- $hover-shadow-color: lighten($hover-border-color, 3%),
7
+ $hover-shadow-color: lighten($hover-border-color, 22%),
8
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%)
9
+ $focus-shadow-color: desaturate(lighten($focus-border-color, 44%), 33%),
10
+ $placeholder-text-color: change-color($border-color, $saturation: 5%,
11
+ $lightness: 68%)
12
12
  ) {
13
13
  margin: 0;
14
- padding: 0.1em 0.5ex;
14
+ padding: 0.125em 0.5ex;
15
15
  border: 1px solid $border-color;
16
16
  border-top-color: darken($border-color, 10%);
17
17
 
18
- -webkit-border-radius: 2px;
19
- -moz-border-radius: 2px;
20
- border-radius: 2px;
18
+ @include border-radius(2px);
21
19
 
22
20
  color: $text-color;
23
- font-size: inherit;
21
+ font: inherit;
24
22
  line-height: inherit;
25
23
  text-decoration: none;
26
24
 
27
25
  background-color: $background-color;
28
26
 
29
- -webkit-transition: all .218s;
30
- -moz-transition: all .218s;
31
- transition: all .218s;
27
+ @include transition(all .218s);
32
28
 
33
29
  &:hover {
34
30
  border-color: $hover-border-color;
35
31
  border-top-color: darken($hover-border-color, 10%);
36
32
 
37
-
38
- -moz-box-shadow: inset 0 1px 2px $hover-shadow-color;
39
- -webkit-box-shadow: inset 0 1px 2px $hover-shadow-color;
40
- box-shadow: inset 0 1px 2px $hover-shadow-color;
33
+ @include box-shadow(inset 0 1px 2px $hover-shadow-color);
41
34
  }
42
35
  &:focus {
43
36
  border-color: $focus-border-color;
44
37
  border-top-color: darken($focus-border-color, 10%);
45
38
  outline: none;
46
39
 
47
- -moz-box-shadow: inset 0 1px 2px $focus-shadow-color;
48
- -webkit-box-shadow: inset 0 1px 2px $focus-shadow-color;
49
- box-shadow: inset 0 1px 2px $input-focus-shadow-color;
40
+ @include box-shadow(inset 0 1px 2px $focus-shadow-color);
50
41
  }
51
42
 
52
43
  &::-webkit-input-placeholder {
@@ -62,78 +53,86 @@
62
53
  }
63
54
 
64
55
  // Google Plus-like stylng for box-like form fields (radio, checkbox).
65
- @mixin gplus-box-form-field(
56
+ @mixin pwnplus-box-field(
66
57
  $border-color,
67
58
  $background-color: inherit,
68
59
  $hover-border-color: darken($border-color, 19%),
69
- $hover-shadow-color: lighten($hover-border-color, 3%),
60
+ $hover-shadow-color: lighten($hover-border-color, 22%),
70
61
  $focus-border-color: saturate(darken($border-color, 55%), 100%),
71
- $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%)
62
+ $focus-shadow-color: desaturate(lighten($focus-border-color, 44%), 33%)
72
63
  ) {
73
64
  border: 1px solid $border-color;
74
65
  background-color: $background-color;
66
+ width: 1.2em;
67
+ height: 1.2em;
75
68
 
76
- -webkit-transition: all .218s;
77
- -moz-transition: all .218s;
78
- transition: all .218s;
69
+ @include transition(all .218s);
79
70
 
80
71
  &:hover {
81
72
  border-color: $hover-border-color;
82
73
 
83
- box-shadow: inset 0 1px 2px $hover-shadow-color;
84
- -moz-box-shadow: inset 0 1px 2px $hover-shadow-color;
85
- -webkit-box-shadow: inset 0 1px 2px $hover-shadow-color;
74
+ @include box-shadow(inset 0 1px 2px $hover-shadow-color);
86
75
  }
87
76
  &:focus {
88
77
  border-color: $focus-border-color;
89
78
  outline: none;
90
79
 
91
- -moz-box-shadow: inset 0 1px 2px $focus-shadow-color;
92
- -webkit-box-shadow: inset 0 1px 2px $focus-shadow-color;
93
- box-shadow: inset 0 1px 2px $focus-shadow-color;
80
+ @include box-shadow(inset 0 1px 2px $focus-shadow-color);
94
81
  }
95
82
  }
96
83
 
97
- @mixin gplus-form-select(
84
+ // Google Plus-like styling for drop-downs.
85
+ @mixin pwnplus-select-field(
98
86
  $border-color,
99
87
  $text-color: inherit,
100
88
  $background-color: inherit,
101
89
  $hover-border-color: darken($border-color, 19%),
102
- $hover-shadow-color: lighten($hover-border-color, 3%),
90
+ $hover-shadow-color: lighten($hover-border-color, 22%),
103
91
  $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%)
92
+ $focus-shadow-color: desaturate(lighten($focus-border-color, 44%), 33%)
107
93
  ) {
108
- @include gplus-text-input(
94
+ @include pwnplus-text-field(
109
95
  $border-color: $border-color,
110
96
  $text-color: $text-color,
111
97
  $background-color: $background-color,
112
98
  $hover-border-color: $hover-border-color,
113
99
  $hover-shadow-color: $hover-shadow-color,
114
100
  $focus-border-color: $focus-border-color,
115
- $focus-shadow-color: $focus-shadow-color,
116
- $placeholder-text-color: $placeholder-text-color
101
+ $focus-shadow-color: $focus-shadow-color
117
102
  );
118
- padding: 0.1em 2ex 0.1em 0.5ex;
103
+ padding: 0.125em 2ex 0.125em 0.5ex;
119
104
  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;
105
+ @include appearance(textfield);
106
+ background-image: asset_data_url("pwnstyles/select-arrow.svg");
107
+ background-repeat: no-repeat;
108
+ background-position: center right;
109
+ background-size: auto 1em;
110
+ &:hover, &:focus {
111
+ background-image: asset_data_url("pwnstyles/select-arrow-emph.svg");
112
+ }
113
+ // Animating the arrow SVG is glitchy on Chrome.
114
+ @include transition(all .218s, background-image 0s);
125
115
  }
126
116
 
127
117
  // Import to highlight a form field to indicate errors in the input.
128
- @mixin gplus-form-field-error-highlighting(
118
+ @mixin pwnplus-field-error-highlighting(
129
119
  $highlight-border: hsl(0deg, 100%, 50%),
130
120
  $highlight-background: change-color($highlight-border, $lightness: 97%),
131
121
  $highlight-shadow: lighten($highlight-border, 27%)
132
122
  ) {
133
- border-color: $highlight-color;
123
+ border-color: $highlight-border;
134
124
  background-color: $highlight-background;
135
125
 
136
- box-shadow: inset 0 1px 2px $highlight-shadow;
137
- -moz-box-shadow: inset 0 1px 2px $highlight-shadow;
138
- -webkit-box-shadow: inset 0 1px 2px $highlight-shadow;
126
+ @include box-shadow(inset 0 1px 2px $highlight-shadow);
139
127
  }
128
+
129
+ // Add the same padding to labels, so they align nicely with text fields.
130
+ @mixin pwnplus-label {
131
+ display: inline-block;
132
+ margin: 0;
133
+ font-size: inherit;
134
+ line-height: inherit;
135
+ border: 1px solid rgba(255, 255, 255, 0);
136
+ padding: 0.125em 0;
137
+ }
138
+
@@ -25,12 +25,12 @@
25
25
 
26
26
  vertical-align: bottom;
27
27
  > li {
28
- display: inline-block;
28
+ @include inline-block;
29
29
  background-color: $bar-color;
30
30
  vertical-align: bottom;
31
31
 
32
32
  > a {
33
- display: inline-block;
33
+ @include inline-block;
34
34
  }
35
35
 
36
36
  > ol {
@@ -43,9 +43,7 @@
43
43
  position: absolute;
44
44
  z-index: $z-index;
45
45
 
46
- -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
47
- -moz-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
48
- box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
46
+ @include box-shadow(0 1px 1px 1px rgba(0, 0, 0, 0.1));
49
47
 
50
48
  a {
51
49
  padding: 0 2.5em 0 0.5em;
@@ -61,7 +59,7 @@
61
59
  background-color: $hover-bar-color;
62
60
  color: $hover-text-color;
63
61
  img {
64
- -webkit-filter: grayscale(0);
62
+ @include filter(grayscale(0));
65
63
  }
66
64
  }
67
65
 
@@ -71,7 +69,7 @@
71
69
  text-decoration: none;
72
70
  color: inherit;
73
71
  img {
74
- -webkit-filter: grayscale(0.33);
72
+ @include filter(grayscale(0.33));
75
73
  }
76
74
  }
77
75
  a:visited {
@@ -99,7 +97,7 @@
99
97
  padding: 0 1px 0 0.5em;
100
98
  }
101
99
  > li:last-child a span {
102
- display: inline-block;
100
+ @include inline-block;
103
101
  }
104
102
  }
105
103
  }
@@ -1,3 +1,6 @@
1
1
  if defined? Rails
2
+ # Load up Compass, so we can use its CSS helpers.
3
+ require 'compass-rails'
4
+
2
5
  require 'pwnstyles_rails/engine.rb'
3
6
  end
@@ -5,11 +5,11 @@
5
5
 
6
6
  Gem::Specification.new do |s|
7
7
  s.name = "pwnstyles_rails"
8
- s.version = "0.1.24"
8
+ s.version = "0.1.25"
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-09-07"
12
+ s.date = "2012-09-17"
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 = [
@@ -25,21 +25,23 @@ Gem::Specification.new do |s|
25
25
  "README.rdoc",
26
26
  "Rakefile",
27
27
  "VERSION",
28
+ "app/assets/images/pwnstyles/select-arrow-emph.svg",
28
29
  "app/assets/images/pwnstyles/select-arrow.svg",
29
30
  "app/assets/javascripts/pwn-fx.js.coffee",
30
31
  "app/assets/stylesheets/_pwnplus.css.scss",
31
32
  "app/assets/stylesheets/_pwnstyles.css.scss",
32
- "app/assets/stylesheets/generic/_buttons.css.scss",
33
- "app/assets/stylesheets/generic/_figures.css.scss",
34
- "app/assets/stylesheets/generic/_forms.css.scss",
35
- "app/assets/stylesheets/generic/_images.css.scss",
36
- "app/assets/stylesheets/generic/_inputs.css.scss",
37
- "app/assets/stylesheets/generic/_links.css.scss",
38
- "app/assets/stylesheets/generic/_lists.css.scss",
33
+ "app/assets/stylesheets/elements/_buttons.css.scss",
34
+ "app/assets/stylesheets/elements/_figures.css.scss",
35
+ "app/assets/stylesheets/elements/_forms.css.scss",
36
+ "app/assets/stylesheets/elements/_images.css.scss",
37
+ "app/assets/stylesheets/elements/_inputs.css.scss",
38
+ "app/assets/stylesheets/elements/_links.css.scss",
39
+ "app/assets/stylesheets/elements/_lists.css.scss",
40
+ "app/assets/stylesheets/elements/_tables.css.scss",
41
+ "app/assets/stylesheets/elements/_text.css.scss",
42
+ "app/assets/stylesheets/generic/_compass.css.scss",
39
43
  "app/assets/stylesheets/generic/_pwnfx.css.scss",
40
44
  "app/assets/stylesheets/generic/_reset.css.scss",
41
- "app/assets/stylesheets/generic/_tables.css.scss",
42
- "app/assets/stylesheets/generic/_text.css.scss",
43
45
  "app/assets/stylesheets/modules/_body.css.scss",
44
46
  "app/assets/stylesheets/modules/_footer.css.scss",
45
47
  "app/assets/stylesheets/modules/_header.css.scss",
@@ -76,28 +78,31 @@ Gem::Specification.new do |s|
76
78
  s.specification_version = 3
77
79
 
78
80
  if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
81
+ s.add_runtime_dependency(%q<compass-rails>, [">= 1.0.3"])
79
82
  s.add_runtime_dependency(%q<rails>, [">= 3.2.3"])
80
83
  s.add_runtime_dependency(%q<sass-rails>, [">= 3.2.5"])
81
- s.add_development_dependency(%q<minitest>, [">= 3.0.0"])
82
- s.add_development_dependency(%q<bundler>, [">= 1.1.0"])
83
- s.add_development_dependency(%q<jeweler>, [">= 1.8.3"])
84
+ s.add_development_dependency(%q<minitest>, [">= 3.4.0"])
85
+ s.add_development_dependency(%q<bundler>, [">= 1.2.0"])
86
+ s.add_development_dependency(%q<jeweler>, [">= 1.8.4"])
84
87
  s.add_development_dependency(%q<rcov>, [">= 0"])
85
88
  s.add_development_dependency(%q<simplecov>, [">= 0"])
86
89
  else
90
+ s.add_dependency(%q<compass-rails>, [">= 1.0.3"])
87
91
  s.add_dependency(%q<rails>, [">= 3.2.3"])
88
92
  s.add_dependency(%q<sass-rails>, [">= 3.2.5"])
89
- s.add_dependency(%q<minitest>, [">= 3.0.0"])
90
- s.add_dependency(%q<bundler>, [">= 1.1.0"])
91
- s.add_dependency(%q<jeweler>, [">= 1.8.3"])
93
+ s.add_dependency(%q<minitest>, [">= 3.4.0"])
94
+ s.add_dependency(%q<bundler>, [">= 1.2.0"])
95
+ s.add_dependency(%q<jeweler>, [">= 1.8.4"])
92
96
  s.add_dependency(%q<rcov>, [">= 0"])
93
97
  s.add_dependency(%q<simplecov>, [">= 0"])
94
98
  end
95
99
  else
100
+ s.add_dependency(%q<compass-rails>, [">= 1.0.3"])
96
101
  s.add_dependency(%q<rails>, [">= 3.2.3"])
97
102
  s.add_dependency(%q<sass-rails>, [">= 3.2.5"])
98
- s.add_dependency(%q<minitest>, [">= 3.0.0"])
99
- s.add_dependency(%q<bundler>, [">= 1.1.0"])
100
- s.add_dependency(%q<jeweler>, [">= 1.8.3"])
103
+ s.add_dependency(%q<minitest>, [">= 3.4.0"])
104
+ s.add_dependency(%q<bundler>, [">= 1.2.0"])
105
+ s.add_dependency(%q<jeweler>, [">= 1.8.4"])
101
106
  s.add_dependency(%q<rcov>, [">= 0"])
102
107
  s.add_dependency(%q<simplecov>, [">= 0"])
103
108
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: pwnstyles_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.24
4
+ version: 0.1.25
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,8 +9,24 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-09-07 00:00:00.000000000 Z
12
+ date: 2012-09-17 00:00:00.000000000 Z
13
13
  dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: compass-rails
16
+ requirement: !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: 1.0.3
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: 1.0.3
14
30
  - !ruby/object:Gem::Dependency
15
31
  name: rails
16
32
  requirement: !ruby/object:Gem::Requirement
@@ -50,7 +66,7 @@ dependencies:
50
66
  requirements:
51
67
  - - ! '>='
52
68
  - !ruby/object:Gem::Version
53
- version: 3.0.0
69
+ version: 3.4.0
54
70
  type: :development
55
71
  prerelease: false
56
72
  version_requirements: !ruby/object:Gem::Requirement
@@ -58,7 +74,7 @@ dependencies:
58
74
  requirements:
59
75
  - - ! '>='
60
76
  - !ruby/object:Gem::Version
61
- version: 3.0.0
77
+ version: 3.4.0
62
78
  - !ruby/object:Gem::Dependency
63
79
  name: bundler
64
80
  requirement: !ruby/object:Gem::Requirement
@@ -66,7 +82,7 @@ dependencies:
66
82
  requirements:
67
83
  - - ! '>='
68
84
  - !ruby/object:Gem::Version
69
- version: 1.1.0
85
+ version: 1.2.0
70
86
  type: :development
71
87
  prerelease: false
72
88
  version_requirements: !ruby/object:Gem::Requirement
@@ -74,7 +90,7 @@ dependencies:
74
90
  requirements:
75
91
  - - ! '>='
76
92
  - !ruby/object:Gem::Version
77
- version: 1.1.0
93
+ version: 1.2.0
78
94
  - !ruby/object:Gem::Dependency
79
95
  name: jeweler
80
96
  requirement: !ruby/object:Gem::Requirement
@@ -82,7 +98,7 @@ dependencies:
82
98
  requirements:
83
99
  - - ! '>='
84
100
  - !ruby/object:Gem::Version
85
- version: 1.8.3
101
+ version: 1.8.4
86
102
  type: :development
87
103
  prerelease: false
88
104
  version_requirements: !ruby/object:Gem::Requirement
@@ -90,7 +106,7 @@ dependencies:
90
106
  requirements:
91
107
  - - ! '>='
92
108
  - !ruby/object:Gem::Version
93
- version: 1.8.3
109
+ version: 1.8.4
94
110
  - !ruby/object:Gem::Dependency
95
111
  name: rcov
96
112
  requirement: !ruby/object:Gem::Requirement
@@ -139,21 +155,23 @@ files:
139
155
  - README.rdoc
140
156
  - Rakefile
141
157
  - VERSION
158
+ - app/assets/images/pwnstyles/select-arrow-emph.svg
142
159
  - app/assets/images/pwnstyles/select-arrow.svg
143
160
  - app/assets/javascripts/pwn-fx.js.coffee
144
161
  - app/assets/stylesheets/_pwnplus.css.scss
145
162
  - app/assets/stylesheets/_pwnstyles.css.scss
146
- - app/assets/stylesheets/generic/_buttons.css.scss
147
- - app/assets/stylesheets/generic/_figures.css.scss
148
- - app/assets/stylesheets/generic/_forms.css.scss
149
- - app/assets/stylesheets/generic/_images.css.scss
150
- - app/assets/stylesheets/generic/_inputs.css.scss
151
- - app/assets/stylesheets/generic/_links.css.scss
152
- - app/assets/stylesheets/generic/_lists.css.scss
163
+ - app/assets/stylesheets/elements/_buttons.css.scss
164
+ - app/assets/stylesheets/elements/_figures.css.scss
165
+ - app/assets/stylesheets/elements/_forms.css.scss
166
+ - app/assets/stylesheets/elements/_images.css.scss
167
+ - app/assets/stylesheets/elements/_inputs.css.scss
168
+ - app/assets/stylesheets/elements/_links.css.scss
169
+ - app/assets/stylesheets/elements/_lists.css.scss
170
+ - app/assets/stylesheets/elements/_tables.css.scss
171
+ - app/assets/stylesheets/elements/_text.css.scss
172
+ - app/assets/stylesheets/generic/_compass.css.scss
153
173
  - app/assets/stylesheets/generic/_pwnfx.css.scss
154
174
  - app/assets/stylesheets/generic/_reset.css.scss
155
- - app/assets/stylesheets/generic/_tables.css.scss
156
- - app/assets/stylesheets/generic/_text.css.scss
157
175
  - app/assets/stylesheets/modules/_body.css.scss
158
176
  - app/assets/stylesheets/modules/_footer.css.scss
159
177
  - app/assets/stylesheets/modules/_header.css.scss
@@ -194,7 +212,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
194
212
  version: '0'
195
213
  segments:
196
214
  - 0
197
- hash: 1394846384795810116
215
+ hash: 420375135802959521
198
216
  required_rubygems_version: !ruby/object:Gem::Requirement
199
217
  none: false
200
218
  requirements:
@@ -1,105 +0,0 @@
1
- // Text fields.
2
- input[type=text], input[type=email], input[type=tel], input[type=password],
3
- input[type=search], input[type=number], textarea, select {
4
- margin: 0;
5
- padding: 0.1em 0.5ex;
6
- border: 1px solid $input-border-color;
7
- border-top-color: $input-border-top-color;
8
-
9
- -webkit-border-radius: 2px;
10
- -moz-border-radius: 2px;
11
- border-radius: 2px;
12
-
13
- color: $input-text-color;
14
- font: inherit;
15
- line-height: inherit;
16
- text-decoration: none;
17
-
18
- background-color: $input-background-color;
19
-
20
- -webkit-transition: all .218s;
21
- -moz-transition: all .218s;
22
- transition: all .218s;
23
-
24
- &:hover {
25
- border-color: $input-hover-border-color;
26
-
27
- -moz-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
28
- -webkit-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
29
- box-shadow: inset 0 1px 2px $input-hover-shadow-color;
30
- }
31
- &:focus {
32
- border-color: $input-focus-border-color;
33
- outline: none;
34
-
35
- -moz-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
36
- -webkit-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
37
- box-shadow: inset 0 1px 2px $input-focus-shadow-color;
38
- }
39
- }
40
- textarea {
41
- height: 5.25em;
42
- }
43
- ::-webkit-input-placeholder {
44
- font: inherit;
45
- text-shadow: none;
46
- color: $input-placeholder-text-color;
47
- }
48
- :-moz-placeholder {
49
- font: inherit;
50
- text-shadow: none;
51
- color: $input-placeholder-text-color;
52
- }
53
-
54
- // Multiple-choice fields.
55
- input[type=radio], input[type=checkbox] {
56
- border: 1px solid $input-border-color;
57
- background-color: $input-background-color;
58
-
59
- &:hover {
60
- border-color: $input-hover-border-color;
61
-
62
- box-shadow: inset 0 1px 2px $input-hover-shadow-color;
63
- -moz-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
64
- -webkit-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
65
- }
66
- &:focus {
67
- border-color: $input-focus-border-color;
68
- outline: none;
69
-
70
- -moz-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
71
- -webkit-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
72
- box-shadow: inset 0 1px 2px $input-focus-shadow-color;
73
- }
74
- }
75
-
76
- // Drop-downs.
77
- select {
78
- padding: 0.1em 2ex 0.1em 0.5ex;
79
- text-overflow: ellipsis;
80
- -webkit-appearance: textfield;
81
- -moz-appearance: textfield;
82
- appearance: textfield;
83
- background: asset_data_url("pwnstyles/select-arrow.svg") no-repeat center
84
- right;
85
- }
86
-
87
- // Error highlighting.
88
- .field_with_errors {
89
- input[type=text], input[type=email], input[type=tel], input[type=password],
90
- input[type=search], input[type=number], select, textarea {
91
- border: 1px solid #FF0000;
92
- box-shadow: inset 0 1px 2px #FF8888;
93
- -moz-box-shadow: inset 0 1px 2px #FF8888;
94
- -webkit-box-shadow: inset 0 1px 2px #FF8888;
95
- background-color: #FFEEEE;
96
- }
97
-
98
- input[type=radio], input[type=checkbox] {
99
- border: 1px solid #FF0000;
100
- box-shadow: inset 0 1px 2px #FF8888;
101
- -moz-box-shadow: inset 0 1px 2px #FF8888;
102
- -webkit-box-shadow: inset 0 1px 2px #FF8888;
103
- background-color: #FFEEEE;
104
- }
105
- }