simple_form_scss 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +0 -0
  3. data/Gemfile +4 -0
  4. data/README.md +72 -0
  5. data/Rakefile +5 -0
  6. data/app/assets/stylesheets/simple_form_scss.scss +186 -0
  7. data/lib/simple_form_scss.rb +2 -0
  8. data/lib/simple_form_scss/engine.rb +7 -0
  9. data/lib/simple_form_scss/version.rb +5 -0
  10. data/simple_form_scss.gemspec +20 -0
  11. metadata +53 -0
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()
data/app/assets/stylesheets/simple_form_scss.scss ADDED
@@ -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
+ }
data/lib/simple_form_scss.rb ADDED
@@ -0,0 +1,2 @@
1
+ require 'simple_form_scss/engine'
2
+ require 'simple_form_scss/version'
data/lib/simple_form_scss/engine.rb ADDED
@@ -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
data/lib/simple_form_scss/version.rb ADDED
@@ -0,0 +1,5 @@
1
+ module SimpleFormScss
2
+ module Rails
3
+ VERSION = "0.0.1"
4
+ end
5
+ end
data/simple_form_scss.gemspec ADDED
@@ -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: []