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 +7 -0
- data/.gitignore +0 -0
- data/Gemfile +4 -0
- data/README.md +72 -0
- data/Rakefile +5 -0
- data/app/assets/stylesheets/simple_form_scss.scss +186 -0
- data/lib/simple_form_scss.rb +2 -0
- data/lib/simple_form_scss/engine.rb +7 -0
- data/lib/simple_form_scss/version.rb +5 -0
- data/simple_form_scss.gemspec +20 -0
- 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
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,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,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: []
|