bitters-compass 0.9.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ require 'compass'
2
+ require 'bourbon-compass'
3
+ require 'neat-compass'
4
+
5
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
6
+
7
+ Compass::Frameworks.register('bitters-compass', :path => extension_path)
@@ -0,0 +1,7 @@
1
+ @import "variables";
2
+ @import "extends/base";
3
+ @import "typography";
4
+ @import "forms";
5
+ @import "tables";
6
+ @import "lists";
7
+ @import "flashes";
@@ -0,0 +1,50 @@
1
+ /* Success, error & notice boxes for messages and errors. */
2
+ %flash {
3
+ margin-bottom: $base-line-height / 2;
4
+ padding: $base-line-height / 2;
5
+ font-weight: bold;
6
+ }
7
+
8
+ .error, #flash_failure {
9
+ @extend %flash;
10
+ background: $error-color;
11
+ color: darken($error-color, 60);
12
+
13
+ a {
14
+ color: darken($error-color, 70);
15
+
16
+ &:hover {
17
+ color: darken($error-color, 90);
18
+ }
19
+ }
20
+ }
21
+
22
+ .notice, #flash_notice {
23
+ @extend %flash;
24
+ background: $notice-color;
25
+ color: darken($notice-color, 60);
26
+
27
+ a {
28
+ color: darken($notice-color, 70);
29
+
30
+ &:hover {
31
+ color: darken($notice-color, 90);
32
+ }
33
+ }
34
+ }
35
+
36
+
37
+ .success, #flash_success {
38
+ @extend %flash;
39
+ background: $success-color;
40
+ color: darken($success-color, 60);
41
+
42
+ a {
43
+ color: darken($success-color, 70);
44
+
45
+ &:hover {
46
+ color: darken($success-color, 90);
47
+ }
48
+ }
49
+ }
50
+
@@ -0,0 +1,85 @@
1
+ $form-border-color: $base-border-color;
2
+ $form-border-color-hover: darken($base-border-color, 10);
3
+ $form-border-color-focus: $base-accent-color;
4
+ $form-border-radius: $base-border-radius;
5
+ $form-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.06);
6
+ $form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7);
7
+ $form-font-size: $base-font-size;
8
+ $form-font-family: $base-font-family;
9
+
10
+ fieldset {
11
+ background: lighten($base-border-color, 10);
12
+ border: 1px solid $base-border-color;
13
+ margin: 0 0 ($base-line-height / 2) 0;
14
+ padding: $base-line-height;
15
+ }
16
+
17
+ input,
18
+ label,
19
+ select {
20
+ display: block;
21
+ font-family: $form-font-family;
22
+ font-size: $form-font-size;
23
+ }
24
+
25
+ label {
26
+ font-weight: bold;
27
+ margin-bottom: $base-line-height / 4;
28
+
29
+ &.required:after {
30
+ content: "*";
31
+ }
32
+
33
+ abbr {
34
+ display: none;
35
+ }
36
+ }
37
+
38
+ textarea,
39
+ #{$all-text-inputs} {
40
+ @include box-sizing(border-box);
41
+ @include transition(border-color);
42
+ background-color: white;
43
+ border-radius: $form-border-radius;
44
+ border: 1px solid $form-border-color;
45
+ box-shadow: $form-box-shadow;
46
+ font-family: $form-font-family;
47
+ font-size: $form-font-size;
48
+ margin-bottom: $base-line-height / 2;
49
+ padding: ($base-line-height / 3) ($base-line-height / 3);
50
+ width: 100%;
51
+
52
+ &:hover {
53
+ border-color: $form-border-color-hover;
54
+ }
55
+
56
+ &:focus {
57
+ border-color: $form-border-color-focus;
58
+ box-shadow: $form-box-shadow-focus;
59
+ outline: none;
60
+ }
61
+ }
62
+
63
+ input[type="search"] {
64
+ @include appearance(none);
65
+ }
66
+
67
+ input[type="checkbox"], input[type="radio"] {
68
+ display: inline;
69
+ margin-right: $base-line-height / 4;
70
+ }
71
+
72
+ select {
73
+ width: auto;
74
+ margin-bottom: $base-line-height;
75
+ }
76
+
77
+ button,
78
+ input[type="submit"] {
79
+ @extend %button;
80
+ @include appearance(none);
81
+ cursor: pointer;
82
+ user-select: none;
83
+ vertical-align: middle;
84
+ white-space: nowrap;
85
+ }
@@ -0,0 +1,14 @@
1
+ @import "neat-helpers"; // or "neat/neat-helpers" when not in Rails
2
+
3
+ // Neat Overrides
4
+ ///////////////////////////////////////////////////////////////////////////////
5
+ // $column: 90px;
6
+ // $gutter: 30px;
7
+ // $grid-columns: 12;
8
+ // $max-width: em(1088);
9
+
10
+ // Neat Breakpoints
11
+ ///////////////////////////////////////////////////////////////////////////////
12
+ $small-screen: new-breakpoint(min-width em(540) 2);
13
+ $medium-screen: new-breakpoint(min-width em(760) 4);
14
+ $large-screen: new-breakpoint(min-width em(920) 8);
@@ -0,0 +1,31 @@
1
+ ul, ol {
2
+ margin: 0;
3
+ padding: 0;
4
+ list-style-type: none;
5
+
6
+ &%default-ul {
7
+ list-style-type: disc;
8
+ margin-bottom: $base-line-height / 2;
9
+ padding-left: $base-line-height;
10
+ }
11
+
12
+ &%default-ol {
13
+ list-style-type: decimal;
14
+ margin-bottom: $base-line-height / 2;
15
+ padding-left: $base-line-height;
16
+ }
17
+ }
18
+
19
+ dl {
20
+ line-height: $base-line-height;
21
+ margin-bottom: $base-line-height / 2;
22
+
23
+ dt {
24
+ font-weight: bold;
25
+ margin-top: $base-line-height / 2;
26
+ }
27
+
28
+ dd {
29
+ margin: 0;
30
+ }
31
+ }
@@ -0,0 +1,20 @@
1
+ table {
2
+ margin: ($base-line-height / 2) 0;
3
+ width: 100%;
4
+ }
5
+
6
+ th {
7
+ border-bottom: 1px solid darken($base-border-color, 15%);
8
+ font-weight: bold;
9
+ padding: ($base-line-height / 2) 0;
10
+ text-align: left;
11
+ }
12
+
13
+ td {
14
+ border-bottom: 1px solid $base-border-color;
15
+ padding: ($base-line-height / 2) 0;
16
+ }
17
+
18
+ tr, td, th {
19
+ vertical-align: middle;
20
+ }
@@ -0,0 +1,103 @@
1
+ body {
2
+ color: $base-font-color;
3
+ font-family: $base-font-family;
4
+ font-size: $base-font-size;
5
+ -webkit-font-smoothing: antialiased;
6
+ line-height: $base-line-height;
7
+ }
8
+
9
+ h1, h2, h3, h4, h5, h6 {
10
+ text-rendering: optimizeLegibility; // Fix the character spacing for headings
11
+ margin: 0;
12
+ line-height: 1.25em;
13
+ }
14
+
15
+ h1 {
16
+ font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px
17
+ }
18
+
19
+ h2 {
20
+ font-size: $base-font-size * 2; // 16 * 2 = 32px
21
+ }
22
+
23
+ h3 {
24
+ font-size: $base-font-size * 1.75; // 16 * 1.75 = 28px
25
+ }
26
+
27
+ h4 {
28
+ font-size: $base-font-size * 1.5; // 16 * 1.5 = 24px
29
+ }
30
+
31
+ h5 {
32
+ font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px
33
+ }
34
+
35
+ h6 {
36
+ font-size: $base-font-size;
37
+ }
38
+
39
+ p {
40
+ margin: 0 0 ($base-line-height * .5);
41
+ }
42
+
43
+ a {
44
+ color: $base-link-color;
45
+ text-decoration: none;
46
+ @include transition(color 0.1s linear);
47
+
48
+ &:hover {
49
+ color: $hover-link-color;
50
+ }
51
+
52
+ &:active, &:focus {
53
+ color: $hover-link-color;
54
+ outline: none;
55
+ }
56
+ }
57
+
58
+ hr {
59
+ border-bottom: 1px solid $base-border-color;
60
+ border-left: none;
61
+ border-right: none;
62
+ border-top: none;
63
+ margin: $base-line-height 0;
64
+ }
65
+
66
+ img {
67
+ margin: 0;
68
+ max-width: 100%;
69
+ }
70
+
71
+ abbr, acronym {
72
+ border-bottom: 1px dotted $base-border-color;
73
+ cursor: help;
74
+ }
75
+
76
+ address {
77
+ display: block;
78
+ margin: 0 0 ($base-line-height / 2);
79
+ }
80
+
81
+ hgroup {
82
+ margin-bottom: $base-line-height / 2;
83
+ }
84
+
85
+ del {
86
+ color: lighten($base-font-color, 15);
87
+ }
88
+
89
+ blockquote {
90
+ border-left: 2px solid $base-border-color;
91
+ color: lighten($base-font-color, 15);
92
+ margin: $base-line-height 0;
93
+ padding-left: $base-line-height / 2;
94
+ }
95
+
96
+ cite {
97
+ color: lighten($base-font-color, 25);
98
+ font-style: italic;
99
+
100
+ &:before {
101
+ content: '\2014 \00A0';
102
+ }
103
+ }
@@ -0,0 +1,40 @@
1
+ // Typography
2
+ ///////////////////////////////////////////////////////////////////////////////
3
+ $sans-serif: $helvetica;
4
+ $serif: $georgia;
5
+
6
+ $base-font-family: $sans-serif;
7
+ $header-font-family: $base-font-family;
8
+
9
+ // Sizes
10
+ ///////////////////////////////////////////////////////////////////////////////
11
+ $base-font-size: 1em;
12
+ $base-line-height: $base-font-size * 1.5;
13
+ $base-border-radius: em(3);
14
+
15
+ // Colors
16
+ ///////////////////////////////////////////////////////////////////////////////
17
+
18
+ $blue: #477DCA;
19
+ $dark-gray: #333;
20
+ $medium-gray: #999;
21
+ $light-gray: #DDD;
22
+ $light-red: #FBE3E4;
23
+ $light-yellow: #FFF6BF;
24
+ $light-green: #E6EFC2;
25
+
26
+ // Font Colors
27
+ $base-font-color: $dark-gray;
28
+ $base-accent-color: $blue;
29
+
30
+ // Text Link Colors
31
+ $base-link-color: $base-accent-color;
32
+ $hover-link-color: darken($base-accent-color, 15);
33
+
34
+ // Border color
35
+ $base-border-color: $light-gray;
36
+
37
+ // Flash Colors
38
+ $error-color: $light-red;
39
+ $notice-color: $light-yellow;
40
+ $success-color: $light-green;
@@ -0,0 +1 @@
1
+ @import "button";
@@ -0,0 +1,4 @@
1
+ %button {
2
+ @include button(simple, $base-accent-color);
3
+ font-size: $base-font-size;
4
+ }
metadata ADDED
@@ -0,0 +1,119 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: bitters-compass
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.9.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Jed Foster
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2013-10-24 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: compass
16
+ requirement: !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: '0.11'
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: '0.11'
30
+ - !ruby/object:Gem::Dependency
31
+ name: bourbon-compass
32
+ requirement: !ruby/object:Gem::Requirement
33
+ none: false
34
+ requirements:
35
+ - - ! '>='
36
+ - !ruby/object:Gem::Version
37
+ version: 3.1.3
38
+ type: :runtime
39
+ prerelease: false
40
+ version_requirements: !ruby/object:Gem::Requirement
41
+ none: false
42
+ requirements:
43
+ - - ! '>='
44
+ - !ruby/object:Gem::Version
45
+ version: 3.1.3
46
+ - !ruby/object:Gem::Dependency
47
+ name: neat-compass
48
+ requirement: !ruby/object:Gem::Requirement
49
+ none: false
50
+ requirements:
51
+ - - ! '>='
52
+ - !ruby/object:Gem::Version
53
+ version: 1.4.0
54
+ type: :runtime
55
+ prerelease: false
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ none: false
58
+ requirements:
59
+ - - ! '>='
60
+ - !ruby/object:Gem::Version
61
+ version: 1.4.0
62
+ - !ruby/object:Gem::Dependency
63
+ name: sass
64
+ requirement: !ruby/object:Gem::Requirement
65
+ none: false
66
+ requirements:
67
+ - - ! '>='
68
+ - !ruby/object:Gem::Version
69
+ version: '3.2'
70
+ type: :runtime
71
+ prerelease: false
72
+ version_requirements: !ruby/object:Gem::Requirement
73
+ none: false
74
+ requirements:
75
+ - - ! '>='
76
+ - !ruby/object:Gem::Version
77
+ version: '3.2'
78
+ description: thoughtbot's Bitters packaged as a Compass extension.
79
+ email: jed@jedfoster.com
80
+ executables: []
81
+ extensions: []
82
+ extra_rdoc_files: []
83
+ files:
84
+ - lib/bitters-compass.rb
85
+ - stylesheets/bitters/_bitters.scss
86
+ - stylesheets/bitters/_flashes.scss
87
+ - stylesheets/bitters/_forms.scss
88
+ - stylesheets/bitters/_grid-settings.scss
89
+ - stylesheets/bitters/_lists.scss
90
+ - stylesheets/bitters/_tables.scss
91
+ - stylesheets/bitters/_typography.scss
92
+ - stylesheets/bitters/_variables.scss
93
+ - stylesheets/bitters/extends/_base.scss
94
+ - stylesheets/bitters/extends/_button.scss
95
+ homepage: https://github.com/jedfoster/bitters-compass
96
+ licenses: []
97
+ post_install_message:
98
+ rdoc_options: []
99
+ require_paths:
100
+ - lib
101
+ required_ruby_version: !ruby/object:Gem::Requirement
102
+ none: false
103
+ requirements:
104
+ - - ! '>='
105
+ - !ruby/object:Gem::Version
106
+ version: '0'
107
+ required_rubygems_version: !ruby/object:Gem::Requirement
108
+ none: false
109
+ requirements:
110
+ - - ! '>='
111
+ - !ruby/object:Gem::Version
112
+ version: '0'
113
+ requirements: []
114
+ rubyforge_project:
115
+ rubygems_version: 1.8.23
116
+ signing_key:
117
+ specification_version: 3
118
+ summary: thoughtbot's Bitters packaged as a Compass extension.
119
+ test_files: []