simple_form_scss 0.0.1

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.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 495c3f26aa5eec7ab3cf96ad1c962f338ebab895
4
+ data.tar.gz: cf286f2a133d245f3a116e3851309ddfd8f2d5bb
5
+ SHA512:
6
+ metadata.gz: ed366d972b189c41978c36bf0ad32230e5f303cc06d8671006fad3dd726356c1c2b1f5e2aedd7203570ad82ad2061703e348e9ebd67b5a8bfc2747be5666ca0e
7
+ data.tar.gz: 5afdf2eb4ac3a245af37abdd165e25cd2ae6e4115a3d16167a3001843786d4b84cb6684f7483015b4596be6a83f70cc315ec59f1fa0e2b42cd9e8164cdb961e5
data/.gitignore ADDED
File without changes
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in character.gemspec
4
+ gemspec
data/README.md ADDED
@@ -0,0 +1,72 @@
1
+ # Simple Form SCSS
2
+
3
+ CSS styling helpers for [Simple Form](https://github.com/plataformatec/simple_form).
4
+
5
+ ## Setup
6
+
7
+ Add gem to ```Gemfile```:
8
+
9
+ gem 'simple_form_scss'
10
+
11
+ Include and configure form styles in ```application.scss```:
12
+
13
+ @import "simple_form_scss";
14
+
15
+ .simple_form {
16
+ $font_size: 12px;
17
+ $color: #474a4c;
18
+ $max_width: 58em;
19
+ $label_color: #a1a7b2;
20
+ $error_color: #bc3737;
21
+ $input_border_color: #e6e9f0;
22
+ $input_focus_color: #6dd2f2;
23
+ $button_color: #9ca1ab;
24
+ $button_border_color: #d1d6e0;
25
+ $button_hover_color: #1fc776;
26
+
27
+ @include simple_form( $font_size,
28
+ $color,
29
+ $max_width,
30
+ $label_color,
31
+ $error_color,
32
+ $input_border_color,
33
+ $input_focus_color,
34
+ $button_color,
35
+ $button_border_color,
36
+ $button_hover_color );
37
+ }
38
+
39
+ ## Custom Types
40
+
41
+ ### Image
42
+
43
+ <% if @object.has_avatar? %>
44
+ <div class='input image'>
45
+ <%= f.input :avatar %>
46
+ <%= f.input :remove_avatar, as: :boolean, label: 'Remove avatar' %>
47
+ <%= image_tag @object.avatar.thumb.url %>
48
+ </div>
49
+ <% else %>
50
+ <%= f.input :avatar, as: :file %>
51
+ <% end %>
52
+
53
+ ### File Link
54
+
55
+ <div class='input file-link'>
56
+ <label class='file optional'>File Link</label>
57
+ <%= link_to f.object.file.url, f.object.file.url, target: '_blank' %>
58
+ <%= f.input :file, as: :file, label: false %>
59
+ </div>
60
+
61
+ ### Nested Images
62
+
63
+ <div class='nested_form sortable images'>
64
+ <%= f.fields_for :images do |ff| %>
65
+ <%= ff.link_to_remove "Remove" %>
66
+ <%= image_tag ff.object.image.chr_list_thumbnail.url %>
67
+ <%= ff.input :title, placeholder: 'Image title' %>
68
+ <%= ff.input :image %>
69
+ <%= ff.input :_position, as: :hidden %>
70
+ <% end %>
71
+ <%= f.link_to_add "Add an Image", :images %>
72
+ </div>
data/Rakefile ADDED
@@ -0,0 +1,5 @@
1
+ require 'rubygems/package_task'
2
+
3
+ spec = Gem::Specification.load(Dir['*.gemspec'].first)
4
+ gem = Gem::PackageTask.new(spec)
5
+ gem.define()
@@ -0,0 +1,186 @@
1
+ /*
2
+ CSS styling helpers for Simple Form
3
+ */
4
+
5
+ @mixin no-focus-border { &:focus { outline: none; } }
6
+ @mixin hide-text { line-height: 0; font-size: 0; color: transparent; }
7
+
8
+ @mixin simple_form_button( $color: #9ca1ab,
9
+ $border_color: #d1d6e0,
10
+ $border_width: 2px,
11
+ $hover_color: #1fc776)
12
+ { display: inline-block;
13
+ text-align: center;
14
+ font-weight: 600;
15
+ color: $color;
16
+ border: $border_width solid $border_color;
17
+ border-radius: $border_width * 2;
18
+ width: 12em;
19
+ line-height: 2.4em;
20
+ padding: 1px 0;
21
+ &:hover { color: $hover_color;
22
+ border: ($border_width + 1px) solid $hover_color;
23
+ padding: 0;
24
+
25
+ }
26
+ }
27
+
28
+ @mixin simple_form_input($border_color, $focus_color) {
29
+ border-radius: .3em;
30
+ border: 1px solid $border_color;
31
+ box-shadow: 0px 0px .4em 0px $border_color;
32
+ padding: .5em .3em;
33
+ width: 100%;
34
+ &:focus { border-color: $focus_color;
35
+ }
36
+ }
37
+
38
+ @mixin simple_form_label($color) { display: block;
39
+ margin-bottom: .3em;
40
+ font-weight: 600;
41
+ color: $color;
42
+ }
43
+
44
+ @mixin nested_form($bg_color, $border_color) {
45
+ & > .fields { background-color: $bg_color;
46
+ border: 1px solid $border_color;
47
+ margin-bottom: 1.5em;
48
+ padding: 1.5em 2em 0;
49
+ }
50
+ }
51
+
52
+ @mixin simple_form( $font_size: 12px,
53
+ $color: #474a4c,
54
+ $max_width: 58em,
55
+ $label_color: #a1a7b2,
56
+ $error_color: #bc3737,
57
+ $input_border_color: #e6e9f0,
58
+ $input_focus_color: #6dd2f2,
59
+ $nested_form_bg: #fafbfc,
60
+ $nested_form_border_color: #d1d6e0,
61
+ $button_color: #9ca1ab,
62
+ $button_border_color: #d1d6e0,
63
+ $button_hover_color: #1fc776) {
64
+ font-size: 12px;
65
+ line-height: 1.5;
66
+ max-width: $max_width;
67
+ color: $color;
68
+
69
+ a { text-decoration: none; }
70
+ p { margin-top: 0; }
71
+
72
+ textarea,
73
+ input { @include no-focus-border; }
74
+ .input:not(.hidden) { margin-bottom: 1.5em;
75
+
76
+ &.string, &.email, &.url, &.tel, &.password, &.search, &.text, &.integer, &.float, &.decimal, &.range, &.datetime, &.date, &.time, &.select, &.radio_buttons, &.check_boxes, &.country, &.time_zone {
77
+ & > textarea,
78
+ & > input { @include simple_form_input($input_border_color, $input_focus_color); }
79
+ & > label { @include simple_form_label($label_color); }
80
+ }
81
+ &.file > label { @include simple_form_label($label_color); }
82
+ &.boolean > label { padding-left: .5em; }
83
+ &.text > textarea { min-height: 4em; }
84
+
85
+ // TODO: add radio buttons
86
+
87
+ // ERRORS
88
+ .error { display: block;
89
+ margin-top: .3em;
90
+ color: $error_color;
91
+ }
92
+ &.field_with_errors {
93
+ &.string, &.email, &.url, &.tel, &.password, &.search, &.text, &.integer, &.float, &.decimal, &.range, &.datetime, &.date, &.time, &.select, &.radio_buttons, &.check_boxes, &.country, &.time_zone {
94
+ & > textarea,
95
+ & > input { border-color: $error_color; }
96
+ & > label { color: $error_color; }
97
+ }
98
+ }
99
+
100
+ // CUSTOM types and preferences
101
+
102
+ // IMAGE
103
+ &.image { height: 78px;
104
+ & > img { position: absolute;
105
+ margin-top: -5.5em;
106
+ border-radius: .3em;
107
+ width: 56px;
108
+ height: 56px;
109
+ }
110
+ & > label { @include simple_form_label($label_color); }
111
+ & > .input.file { margin-bottom: .5em; }
112
+ & > .input.file input { padding-left: 64px; margin-top: .5em; }
113
+ & > .boolean { padding-left: 64px; }
114
+ }
115
+
116
+ // FILE LINK
117
+ &.file-link {
118
+ & > label { @include simple_form_label($label_color); }
119
+ a { display: block; margin-bottom: .5em; }
120
+ }
121
+ }
122
+
123
+ // BUTTONS
124
+ .button,
125
+ .nested_form .add_nested_fields { @include simple_form_button( $button_color,
126
+ $button_border_color,
127
+ 2px,
128
+ $button_hover_color );
129
+ }
130
+
131
+ // NESTED FORM
132
+ .nested_form { @include nested_form($nested_form_bg, $nested_form_border_color);
133
+
134
+ // SORTABLE
135
+ &.sortable {
136
+ & > .fields:before { font-family: FontAwesome; content: "\f142";
137
+ float: left;
138
+ font-size: 2em;
139
+ margin: -.5em 0 0 -.6em;
140
+ opacity: .2;
141
+ }
142
+ & > .fields:hover {
143
+ &:before { opacity: .5; }
144
+ }
145
+ }
146
+
147
+ // IMAGES
148
+ &.images {
149
+ .input { padding-left: 5.5em;
150
+ margin-right: 4em;
151
+ }
152
+ .input > label { display: none; }
153
+ .input.string { margin-bottom: 0; }
154
+ .input.string > input { font-size: 1.166em;
155
+ padding: 0 0 .3em 0;
156
+ margin-bottom: .5em;
157
+ font-weight: 600;
158
+ background: transparent;
159
+ border: none;
160
+ border-bottom: 1px dashed $list_border_color;
161
+ box-shadow: none;
162
+ }
163
+ img { position: absolute;
164
+ border-radius: .3em;
165
+ width: 4.666em;
166
+ height: 4.666em;
167
+ margin-top: -.2em;
168
+ }
169
+ .remove_nested_fields { @include hide-text();
170
+ display: block;
171
+ float: right;
172
+ width: $font_size * 2;
173
+ height: $font_size * 2;
174
+ margin-top: $font_size + 1;
175
+ &:before { font-family: FontAwesome; content: "\f00d";
176
+ display: block;
177
+ font-size: $font_size * 2;
178
+ margin: .45em 0 0 .1em;
179
+ color: $color; opacity: .5;
180
+ }
181
+ &:hover { &:before { opacity: .75; } }
182
+ }
183
+ &.sortable > .fields:before { margin-top: .3em; }
184
+ }
185
+ }
186
+ }
@@ -0,0 +1,2 @@
1
+ require 'simple_form_scss/engine'
2
+ require 'simple_form_scss/version'
@@ -0,0 +1,7 @@
1
+ module SimpleFormScss
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ isolate_namespace SimpleFormScss::Rails
5
+ end
6
+ end
7
+ end
@@ -0,0 +1,5 @@
1
+ module SimpleFormScss
2
+ module Rails
3
+ VERSION = "0.0.1"
4
+ end
5
+ end
@@ -0,0 +1,20 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'simple_form_scss/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "simple_form_scss"
8
+ spec.version = SimpleFormScss::Rails::VERSION
9
+ spec.authors = ["Alexander Kravets"]
10
+ spec.email = ["alex@slatestudio.com"]
11
+ spec.description = %q{CSS styling helpers for Simple Form}
12
+ spec.summary = %q{CSS styling helpers for Simple Form}
13
+ spec.homepage = "https://github.com/slate-studio/simple_form_scss"
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files`.split($/)
17
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
18
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
19
+ spec.require_paths = ["lib"]
20
+ end
metadata ADDED
@@ -0,0 +1,53 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: simple_form_scss
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ platform: ruby
6
+ authors:
7
+ - Alexander Kravets
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2014-05-20 00:00:00.000000000 Z
12
+ dependencies: []
13
+ description: CSS styling helpers for Simple Form
14
+ email:
15
+ - alex@slatestudio.com
16
+ executables: []
17
+ extensions: []
18
+ extra_rdoc_files: []
19
+ files:
20
+ - ".gitignore"
21
+ - Gemfile
22
+ - README.md
23
+ - Rakefile
24
+ - app/assets/stylesheets/simple_form_scss.scss
25
+ - lib/simple_form_scss.rb
26
+ - lib/simple_form_scss/engine.rb
27
+ - lib/simple_form_scss/version.rb
28
+ - simple_form_scss.gemspec
29
+ homepage: https://github.com/slate-studio/simple_form_scss
30
+ licenses:
31
+ - MIT
32
+ metadata: {}
33
+ post_install_message:
34
+ rdoc_options: []
35
+ require_paths:
36
+ - lib
37
+ required_ruby_version: !ruby/object:Gem::Requirement
38
+ requirements:
39
+ - - ">="
40
+ - !ruby/object:Gem::Version
41
+ version: '0'
42
+ required_rubygems_version: !ruby/object:Gem::Requirement
43
+ requirements:
44
+ - - ">="
45
+ - !ruby/object:Gem::Version
46
+ version: '0'
47
+ requirements: []
48
+ rubyforge_project:
49
+ rubygems_version: 2.2.1
50
+ signing_key:
51
+ specification_version: 4
52
+ summary: CSS styling helpers for Simple Form
53
+ test_files: []