crimagify 0.0.3.9 → 0.0.4.0
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/README.rdoc +1 -2
- data/app/helpers/crimagify/application_helper.rb +8 -2
- data/app/views/crimagify/crop_partials/_fields_cropper.html.erb +18 -9
- data/app/views/crimagify/crop_partials/_nested_cropper.html.erb +18 -10
- data/lib/crimagify/version.rb +1 -1
- data/lib/generators/crimagify/install/templates/cropify_cropper.css.scss +30 -8
- data/test/dummy/app/assets/stylesheets/application.css +0 -1
- data/test/dummy/app/assets/stylesheets/cropify_cropper.css.scss +30 -8
- data/test/dummy/app/views/products/_form.html.erb +2 -2
- data/test/dummy/app/views/users/_product_fields.html.erb +1 -1
- metadata +1 -4
- data/app/assets/stylesheets/crimagify/cropify_cropper.css.scss +0 -71
- data/app/assets/stylesheets/crimagify/cropify_mixin.css.scss +0 -85
- data/app/assets/stylesheets/crimagify/jquery.cropify.Jcrop.css +0 -165
data/README.rdoc
CHANGED
@@ -42,7 +42,6 @@ Add to your controller:
|
|
42
42
|
|
43
43
|
Add to application.js:<tt>//= require crimagify/application</tt>
|
44
44
|
|
45
|
-
Add to application.css:<tt>*= require crimagify/application</tt>
|
46
45
|
|
47
46
|
Edit the file generated for the gem: config/crimagify_versions.yml, with the specific format mantaining the same ratio for all versions in each blocks, adding models that use images:
|
48
47
|
|
@@ -77,4 +76,4 @@ Add to your form view:
|
|
77
76
|
<%= image_cropper(@object, { image_name: "imgA", ratio: :big}) %> #The attributes "imgA" and :big or :small are defined
|
78
77
|
<%= image_cropper(@object, { image_name: "imgB", ratio: :small}) %> #into file config/crimagify_versions.yml generated for the gem
|
79
78
|
...
|
80
|
-
<% end %>
|
79
|
+
<% end %>
|
@@ -8,6 +8,9 @@ module Crimagify
|
|
8
8
|
if options[:label_title].nil?
|
9
9
|
options[:label_title] == "Image"
|
10
10
|
end
|
11
|
+
if options[:choose_text].nil?
|
12
|
+
options[:choose_text] == "Choose image"
|
13
|
+
end
|
11
14
|
if img == []
|
12
15
|
url_image = "crimagify/no_selected_image.jpg"
|
13
16
|
else
|
@@ -20,7 +23,7 @@ module Crimagify
|
|
20
23
|
url_image = ENV['DEFAULT_IMAGE'].to_s
|
21
24
|
end
|
22
25
|
end
|
23
|
-
render(:partial => "crimagify/crop_partials/fields_cropper", :locals => { id_image: options[:image_name], url_image: url_image, image_options: image_options, version_name: version_name, label_title: options[:label_title] })
|
26
|
+
render(:partial => "crimagify/crop_partials/fields_cropper", :locals => { id_image: options[:image_name], url_image: url_image, image_options: image_options, version_name: version_name, label_title: options[:label_title], choose_text: options[:choose_text] })
|
24
27
|
end
|
25
28
|
|
26
29
|
def images_id(object)
|
@@ -38,6 +41,9 @@ module Crimagify
|
|
38
41
|
if options[:label_title].nil?
|
39
42
|
options[:label_title] == "Image"
|
40
43
|
end
|
44
|
+
if options[:choose_text].nil?
|
45
|
+
options[:choose_text] == "Choose image"
|
46
|
+
end
|
41
47
|
if img == []
|
42
48
|
if ENV['DEFAULT_IMAGE'].nil?
|
43
49
|
url_image = "crimagify/no_selected_image.jpg"
|
@@ -54,7 +60,7 @@ module Crimagify
|
|
54
60
|
url_image = ENV['DEFAULT_IMAGE'].to_s
|
55
61
|
end
|
56
62
|
end
|
57
|
-
render(:partial => "crimagify/crop_partials/nested_cropper", :locals => { id_image: options[:image_name], url_image: url_image, image_options: image_options, version_name: version_name, label_title: options[:label_title] })
|
63
|
+
render(:partial => "crimagify/crop_partials/nested_cropper", :locals => { id_image: options[:image_name], url_image: url_image, image_options: image_options, version_name: version_name, label_title: options[:label_title], choose_text: options[:choose_text] })
|
58
64
|
end
|
59
65
|
|
60
66
|
def nested_images_id(object)
|
@@ -4,19 +4,28 @@
|
|
4
4
|
image_options ||= {}
|
5
5
|
version_name ||= {}
|
6
6
|
label_title ||= "Image"
|
7
|
+
choose_text ||= "Choose image"
|
7
8
|
%>
|
8
9
|
<div class="crimagify_item">
|
9
10
|
<div id="<%= id_image %>" class="global_parent" name="<%= version_name %>">
|
10
11
|
<%= hidden_field_tag "image_temporal_#{id_image}", {}, :class => "image_temporal", :value => "" %>
|
11
|
-
<
|
12
|
-
|
13
|
-
<div id="parent_image" class="parent_image" style="display:block;float:left"></div>
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
12
|
+
<label class="crimagify_label"><%= label_title %></label>
|
13
|
+
<div class="crimagify_container">
|
14
|
+
<div id="parent_image" class="parent_image crimagify_parent_image" style="display:block;float:left"></div>
|
15
|
+
<div class="crimagify_default_image">
|
16
|
+
<span>
|
17
|
+
<%= image_tag url_image, image_options %>
|
18
|
+
</span>
|
19
|
+
</div>
|
20
|
+
<div class="crimagify_clear"></div>
|
21
|
+
<div class="crimagify_otions">
|
22
|
+
<label class="crimagify_otions">
|
23
|
+
<%= choose_text %>
|
24
|
+
</label>
|
25
|
+
<%= file_field_tag :image, :id => "uploader", :class => "uploader" %>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<div class="crimagify_clear"></div>
|
20
29
|
</div>
|
21
30
|
</div>
|
22
31
|
</div>
|
@@ -4,19 +4,27 @@
|
|
4
4
|
image_options ||= {}
|
5
5
|
version_name ||= {}
|
6
6
|
label_title ||= "Image"
|
7
|
+
choose_text ||= "Choose image"
|
7
8
|
%>
|
8
9
|
<div class="crimagify_item">
|
9
10
|
<div data-img="<%= id_image %>" class="global_parent <%= id_image %>" name="<%= version_name %>">
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
<div class="parent_image"></div>
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
11
|
+
<%= hidden_field_tag "image_temporal_#{id_image}", {}, :value => "", :name => "image_temporal_#{id_image}", :class => "image_temporal image_temporal_#{id_image}" %>
|
12
|
+
<label class="crimagify_label"><%= label_title %></label>
|
13
|
+
<div class="crimagify_container">
|
14
|
+
<div class="parent_image crimagify_parent_image"></div>
|
15
|
+
<div class="crimagify_default_image">
|
16
|
+
<span>
|
17
|
+
<%= image_tag url_image, image_options %>
|
18
|
+
</span>
|
19
|
+
</div>
|
20
|
+
<div class="crimagify_clear"></div>
|
21
|
+
<div class="crimagify_otions">
|
22
|
+
<label class="crimagify_otions">
|
23
|
+
<%= choose_text %>
|
24
|
+
</label>
|
25
|
+
<%= file_field_tag :image, :class => "nested_uploader crimagify_nested_uploader" %>
|
26
|
+
</div>
|
27
|
+
<div class="crimagify_clear"></div>
|
20
28
|
</div>
|
21
29
|
</div>
|
22
30
|
</div>
|
data/lib/crimagify/version.rb
CHANGED
@@ -1,13 +1,37 @@
|
|
1
1
|
@import 'cropify_mixin.css.scss';
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
2
|
+
|
3
|
+
div.crimagify_item{
|
4
|
+
display:block;
|
5
|
+
label{
|
6
|
+
display:block;
|
7
|
+
}
|
8
|
+
label.crimagify_label{
|
9
|
+
font-size:14px;
|
10
|
+
font-weight:bold;
|
11
|
+
line-height:25px;
|
12
|
+
}
|
13
|
+
div.crimagify_clear{
|
14
|
+
clear:both;
|
15
|
+
}
|
16
|
+
div.crimagify_parent_image{
|
17
|
+
position:relative;
|
18
|
+
}
|
19
|
+
div.crimagify_container{
|
20
|
+
div.crimagify_parent_image{
|
21
|
+
|
22
|
+
}
|
23
|
+
div.crimagify_default_image{
|
24
|
+
|
25
|
+
}
|
26
|
+
div.crimagify_otions{
|
27
|
+
|
28
|
+
}
|
29
|
+
}//div.crimagify_container
|
30
|
+
}//div.crimagify_item
|
6
31
|
div#cropper_div{
|
7
32
|
position: absolute !important;
|
8
33
|
top: 0 !important;
|
9
34
|
left: 0 !important;
|
10
|
-
//display: none !important;
|
11
35
|
padding:0 0 85px 0 !important;
|
12
36
|
z-index:500 !important;
|
13
37
|
div.cropper_container{
|
@@ -28,12 +52,10 @@ div#cropper_div{
|
|
28
52
|
background:#FFF !important;
|
29
53
|
padding:10px !important;
|
30
54
|
margin-top:0 !important;
|
31
|
-
border:1px solid #777 !important;
|
32
|
-
border-top:none !important;
|
33
55
|
@include rounded(0 0 3px 3px);
|
34
56
|
//@include boxShadow(1px 4px 6px,#666) !important;
|
35
57
|
position:absolute !important;
|
36
|
-
right
|
58
|
+
right:0px !important;
|
37
59
|
bottom:-57px !important;
|
38
60
|
z-index:15 !important;
|
39
61
|
a{
|
@@ -1,13 +1,37 @@
|
|
1
1
|
@import 'cropify_mixin.css.scss';
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
2
|
+
|
3
|
+
div.crimagify_item{
|
4
|
+
display:block;
|
5
|
+
label{
|
6
|
+
display:block;
|
7
|
+
}
|
8
|
+
label.crimagify_label{
|
9
|
+
font-size:14px;
|
10
|
+
font-weight:bold;
|
11
|
+
line-height:25px;
|
12
|
+
}
|
13
|
+
div.crimagify_clear{
|
14
|
+
clear:both;
|
15
|
+
}
|
16
|
+
div.crimagify_parent_image{
|
17
|
+
position:relative;
|
18
|
+
}
|
19
|
+
div.crimagify_container{
|
20
|
+
div.crimagify_parent_image{
|
21
|
+
|
22
|
+
}
|
23
|
+
div.crimagify_default_image{
|
24
|
+
|
25
|
+
}
|
26
|
+
div.crimagify_otions{
|
27
|
+
|
28
|
+
}
|
29
|
+
}//div.crimagify_container
|
30
|
+
}//div.crimagify_item
|
6
31
|
div#cropper_div{
|
7
32
|
position: absolute !important;
|
8
33
|
top: 0 !important;
|
9
34
|
left: 0 !important;
|
10
|
-
//display: none !important;
|
11
35
|
padding:0 0 85px 0 !important;
|
12
36
|
z-index:500 !important;
|
13
37
|
div.cropper_container{
|
@@ -28,12 +52,10 @@ div#cropper_div{
|
|
28
52
|
background:#FFF !important;
|
29
53
|
padding:10px !important;
|
30
54
|
margin-top:0 !important;
|
31
|
-
border:1px solid #777 !important;
|
32
|
-
border-top:none !important;
|
33
55
|
@include rounded(0 0 3px 3px);
|
34
56
|
//@include boxShadow(1px 4px 6px,#666) !important;
|
35
57
|
position:absolute !important;
|
36
|
-
right
|
58
|
+
right:0px !important;
|
37
59
|
bottom:-57px !important;
|
38
60
|
z-index:15 !important;
|
39
61
|
a{
|
@@ -21,8 +21,8 @@
|
|
21
21
|
</div>
|
22
22
|
<!--StartCropperImagesSection-->
|
23
23
|
<%= images_id(@product) %>
|
24
|
-
<%= image_cropper(@product, { image_name: "imgA", ratio: :user , :label_title => "tralalal"}) %><br/>
|
25
|
-
<%= image_cropper(@product, { image_name: "imgB", ratio: :big }) %><br/>
|
24
|
+
<%= image_cropper(@product, { image_name: "imgA", ratio: :user , :label_title => "tralalal", :choose_text => "Elegir Imagen"}) %><br/>
|
25
|
+
<%= image_cropper(@product, { image_name: "imgB", ratio: :big , :choose_text => "Cambiar Imagen"}) %><br/>
|
26
26
|
<%#= image_cropper(@product, { image_name: "imgC", ratio: :gigant }) %><br/>
|
27
27
|
<%#= image_tag @product.imgA.user %>
|
28
28
|
<!--StartCropperImagesSection-->
|
@@ -22,7 +22,7 @@
|
|
22
22
|
</div>
|
23
23
|
</fieldset>
|
24
24
|
<%= nested_images_id(f.object) %>
|
25
|
-
<%= nested_image_cropper(f.object, { image_name: "imgA", ratio: :user ,:label_title => "tralalal"}, { :class => "img_start" }) %>
|
25
|
+
<%= nested_image_cropper(f.object, { image_name: "imgA", ratio: :user ,:label_title => "tralalal", :choose_text => "Elegir Imagen"}, { :class => "img_start" }) %>
|
26
26
|
<%= nested_image_cropper(f.object, { image_name: "imgB", ratio: :user }, { :class => "img_start" }) %>
|
27
27
|
<hr>
|
28
28
|
</div>
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: crimagify
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.4.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -106,9 +106,6 @@ files:
|
|
106
106
|
- app/assets/javascripts/crimagify/jquery.Jcrop.js
|
107
107
|
- app/assets/javascripts/crimagify/nested_forms.js
|
108
108
|
- app/assets/stylesheets/crimagify/application.css
|
109
|
-
- app/assets/stylesheets/crimagify/cropify_cropper.css.scss
|
110
|
-
- app/assets/stylesheets/crimagify/cropify_mixin.css.scss
|
111
|
-
- app/assets/stylesheets/crimagify/jquery.cropify.Jcrop.css
|
112
109
|
- app/controllers/crimagify/application_controller.rb
|
113
110
|
- app/controllers/crimagify/cropper_controller.rb
|
114
111
|
- app/helpers/crimagify/application_helper.rb
|
@@ -1,71 +0,0 @@
|
|
1
|
-
@import 'cropify_mixin.css.scss';
|
2
|
-
div.parent_image,
|
3
|
-
div#parent_image{
|
4
|
-
position:relative !important;
|
5
|
-
z-index:500 !important;
|
6
|
-
float:left;
|
7
|
-
display:block;
|
8
|
-
}
|
9
|
-
div#cropper_div{
|
10
|
-
position: absolute !important;
|
11
|
-
top: 0 !important;
|
12
|
-
left: 0 !important;
|
13
|
-
//display: none !important;
|
14
|
-
padding:0 0 85px 0 !important;
|
15
|
-
z-index:500 !important;
|
16
|
-
div.cropper_container{
|
17
|
-
position:relative !important;
|
18
|
-
div.image_cropper{
|
19
|
-
@include rounded(3px 3px 0 3px);
|
20
|
-
background:#FFF !important;
|
21
|
-
//@include boxShadow(0px 0px 6px,#222) !important;
|
22
|
-
z-index: 1000 !important;
|
23
|
-
@include dropShadow();
|
24
|
-
//border:1px solid #777 !important;
|
25
|
-
padding:10px !important;
|
26
|
-
z-index:10 !important;
|
27
|
-
position:relative !important;
|
28
|
-
}
|
29
|
-
div.actions{
|
30
|
-
padding:8px 0 !important;
|
31
|
-
background:#FFF !important;
|
32
|
-
padding:10px !important;
|
33
|
-
margin-top:0 !important;
|
34
|
-
//border:1px solid #777 !important;
|
35
|
-
//border-top:none !important;
|
36
|
-
@include rounded(0 0 3px 3px);
|
37
|
-
//@include boxShadow(1px 4px 6px,#666) !important;
|
38
|
-
position:absolute !important;
|
39
|
-
right:0px !important;
|
40
|
-
bottom:-61px !important;
|
41
|
-
z-index:15 !important;
|
42
|
-
a{
|
43
|
-
text-decoration:none !important;
|
44
|
-
font-size:12px !important;
|
45
|
-
font-weight:bold !important;
|
46
|
-
@include rounded(5px);
|
47
|
-
margin:0 10px 0 0 !important;
|
48
|
-
float:right !important;
|
49
|
-
}
|
50
|
-
a#crop_image{
|
51
|
-
color:#FFFFFF !important;
|
52
|
-
padding:7px 10px !important;
|
53
|
-
@include blue_skye_to_blue_hard_vert;
|
54
|
-
@include boxShadow(1px 1px 4px,#000);
|
55
|
-
}
|
56
|
-
a#cancel_crop{
|
57
|
-
color:#FFFFFF !important;
|
58
|
-
padding:7px 10px !important;
|
59
|
-
@include black_easy_to_black_dark;
|
60
|
-
@include boxShadow(1px 1px 4px,#000);
|
61
|
-
margin:0 !important;
|
62
|
-
}
|
63
|
-
}
|
64
|
-
}
|
65
|
-
}
|
66
|
-
.cropper_element{
|
67
|
-
position: relative !important;
|
68
|
-
}
|
69
|
-
.refresh_image{
|
70
|
-
position: relative !important;
|
71
|
-
}
|
@@ -1,85 +0,0 @@
|
|
1
|
-
@mixin opacity($n:1,$ie:100){
|
2
|
-
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity="$n")";
|
3
|
-
moz-opacity:$n;
|
4
|
-
filter: alpha(opacity=$ie);
|
5
|
-
opacity:$n;
|
6
|
-
}
|
7
|
-
@mixin textShadow($px:2px 1px 1px,$color:#000000){
|
8
|
-
text-shadow: $px $color;
|
9
|
-
filter: dropshadow(color=$color, offx=2, offy=2);
|
10
|
-
}
|
11
|
-
@mixin rounded($rounded:5px){
|
12
|
-
-webkit-border-radius:$rounded;
|
13
|
-
-khtml-border-radius:$rounded;
|
14
|
-
-moz-border-radius:$rounded;
|
15
|
-
-o-border-radius:$rounded;
|
16
|
-
border-radius:$rounded;
|
17
|
-
}
|
18
|
-
@mixin spriteImages($padding:10px,$position:-10px -10px,$color:transparent){
|
19
|
-
padding:$padding;
|
20
|
-
background:$color url('/assets/sprite.png') $position no-repeat;
|
21
|
-
}
|
22
|
-
|
23
|
-
@mixin sampleSprite($x){
|
24
|
-
background:transparent image-url('/assets/sprite.png') $x no-repeat;
|
25
|
-
}
|
26
|
-
|
27
|
-
/**/
|
28
|
-
@mixin backgroundImage($imageName:no-logo,$format:png, $repeat:no-repeat,$color:transparent){
|
29
|
-
background:$color url(/assets/system/$imageName$format) $repeat !important;
|
30
|
-
}
|
31
|
-
/*store.scc.scss*/
|
32
|
-
@mixin tableCell(){
|
33
|
-
display:table-cell;
|
34
|
-
vertical-align:middle;
|
35
|
-
text-align:center;
|
36
|
-
}
|
37
|
-
@mixin animation($position:all, $time:0.5s, $move:ease-in-out){
|
38
|
-
-webkit-transition: $position $time $move;
|
39
|
-
-moz-transition: $position $time $move;
|
40
|
-
-o-transition: $position $time $move;
|
41
|
-
-ms-transition: $position $time $move;
|
42
|
-
transition: $position $time $move;
|
43
|
-
}
|
44
|
-
@mixin transformAnimation($scale:1.2){
|
45
|
-
-webkit-transform: scale($scale);
|
46
|
-
-moz-transform: scale($scale);
|
47
|
-
-o-transform: scale($scale);
|
48
|
-
-ms-transform: scale($scale);
|
49
|
-
transform: scale($scale);
|
50
|
-
}
|
51
|
-
@mixin animationdelay($time:0.1s){
|
52
|
-
-webkit-transition-delay: $time;
|
53
|
-
-moz-transition-delay: $time;
|
54
|
-
-o-transition-delay: $time;
|
55
|
-
-ms-transition-delay: $time;
|
56
|
-
transition-delay: $time;
|
57
|
-
|
58
|
-
}
|
59
|
-
@mixin boxShadow($size:1px 1px 1px, $color:#333){
|
60
|
-
-webkit-box-shadow: $size $color;
|
61
|
-
-moz-box-shadow: $size $color;
|
62
|
-
box-shadow: $size $color;
|
63
|
-
}
|
64
|
-
@mixin rotate($rotate:-180deg){
|
65
|
-
-webkit-transform:rotate($rotate);
|
66
|
-
-moz-transform:rotate($rotate);
|
67
|
-
-o-transform:rotate($rotate);
|
68
|
-
-ms-transform:rotate($rotate);
|
69
|
-
transform:rotate($rotate);
|
70
|
-
}
|
71
|
-
@mixin boderRadius($rad){
|
72
|
-
-webkit-border-radius:$rad;
|
73
|
-
-moz-border-radius:$rad;
|
74
|
-
border-radius:$rad;
|
75
|
-
}
|
76
|
-
@mixin dropShadow($size:2px 2px 12px,$op:0.8){
|
77
|
-
filter: drop-shadow($size rgba(0,0,0,$op));
|
78
|
-
-webkit-filter: drop-shadow($size rgba(0,0,0,$op));
|
79
|
-
-moz-filter: drop-shadow($size rgba(0,0,0,$op));
|
80
|
-
-o-filter: drop-shadow($size rgba(0,0,0,$op));
|
81
|
-
ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,"$op")')";
|
82
|
-
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=135,Color='rgba(0,0,0,$op)');
|
83
|
-
//filter: url(#drop-shadow);
|
84
|
-
}
|
85
|
-
/*Degradiants*/
|
@@ -1,165 +0,0 @@
|
|
1
|
-
/* jquery.Jcrop.css v0.9.12 - MIT License */
|
2
|
-
/*
|
3
|
-
The outer-most container in a typical Jcrop instance
|
4
|
-
If you are having difficulty with formatting related to styles
|
5
|
-
on a parent element, place any fixes here or in a like selector
|
6
|
-
|
7
|
-
You can also style this element if you want to add a border, etc
|
8
|
-
A better method for styling can be seen below with .jcrop-light
|
9
|
-
(Add a class to the holder and style elements for that extended class)
|
10
|
-
*/
|
11
|
-
.jcrop-holder {
|
12
|
-
direction: ltr;
|
13
|
-
text-align: left;
|
14
|
-
}
|
15
|
-
/* Selection Border */
|
16
|
-
.jcrop-vline,
|
17
|
-
.jcrop-hline {
|
18
|
-
background: #ffffff url("Jcrop.gif");
|
19
|
-
font-size: 0;
|
20
|
-
position: absolute;
|
21
|
-
}
|
22
|
-
.jcrop-vline {
|
23
|
-
height: 100%;
|
24
|
-
width: 1px !important;
|
25
|
-
}
|
26
|
-
.jcrop-vline.right {
|
27
|
-
right: 0;
|
28
|
-
}
|
29
|
-
.jcrop-hline {
|
30
|
-
height: 1px !important;
|
31
|
-
width: 100%;
|
32
|
-
}
|
33
|
-
.jcrop-hline.bottom {
|
34
|
-
bottom: 0;
|
35
|
-
}
|
36
|
-
/* Invisible click targets */
|
37
|
-
.jcrop-tracker {
|
38
|
-
height: 100%;
|
39
|
-
width: 100%;
|
40
|
-
/* "turn off" link highlight */
|
41
|
-
-webkit-tap-highlight-color: transparent;
|
42
|
-
/* disable callout, image save panel */
|
43
|
-
-webkit-touch-callout: none;
|
44
|
-
/* disable cut copy paste */
|
45
|
-
-webkit-user-select: none;
|
46
|
-
}
|
47
|
-
/* Selection Handles */
|
48
|
-
.jcrop-handle {
|
49
|
-
background-color: #333333;
|
50
|
-
border: 1px #eeeeee solid;
|
51
|
-
width: 7px;
|
52
|
-
height: 7px;
|
53
|
-
font-size: 1px;
|
54
|
-
}
|
55
|
-
.jcrop-handle.ord-n {
|
56
|
-
left: 50%;
|
57
|
-
margin-left: -4px;
|
58
|
-
margin-top: -4px;
|
59
|
-
top: 0;
|
60
|
-
}
|
61
|
-
.jcrop-handle.ord-s {
|
62
|
-
bottom: 0;
|
63
|
-
left: 50%;
|
64
|
-
margin-bottom: -4px;
|
65
|
-
margin-left: -4px;
|
66
|
-
}
|
67
|
-
.jcrop-handle.ord-e {
|
68
|
-
margin-right: -4px;
|
69
|
-
margin-top: -4px;
|
70
|
-
right: 0;
|
71
|
-
top: 50%;
|
72
|
-
}
|
73
|
-
.jcrop-handle.ord-w {
|
74
|
-
left: 0;
|
75
|
-
margin-left: -4px;
|
76
|
-
margin-top: -4px;
|
77
|
-
top: 50%;
|
78
|
-
}
|
79
|
-
.jcrop-handle.ord-nw {
|
80
|
-
left: 0;
|
81
|
-
margin-left: -4px;
|
82
|
-
margin-top: -4px;
|
83
|
-
top: 0;
|
84
|
-
}
|
85
|
-
.jcrop-handle.ord-ne {
|
86
|
-
margin-right: -4px;
|
87
|
-
margin-top: -4px;
|
88
|
-
right: 0;
|
89
|
-
top: 0;
|
90
|
-
}
|
91
|
-
.jcrop-handle.ord-se {
|
92
|
-
bottom: 0;
|
93
|
-
margin-bottom: -4px;
|
94
|
-
margin-right: -4px;
|
95
|
-
right: 0;
|
96
|
-
}
|
97
|
-
.jcrop-handle.ord-sw {
|
98
|
-
bottom: 0;
|
99
|
-
left: 0;
|
100
|
-
margin-bottom: -4px;
|
101
|
-
margin-left: -4px;
|
102
|
-
}
|
103
|
-
/* Dragbars */
|
104
|
-
.jcrop-dragbar.ord-n,
|
105
|
-
.jcrop-dragbar.ord-s {
|
106
|
-
height: 7px;
|
107
|
-
width: 100%;
|
108
|
-
}
|
109
|
-
.jcrop-dragbar.ord-e,
|
110
|
-
.jcrop-dragbar.ord-w {
|
111
|
-
height: 100%;
|
112
|
-
width: 7px;
|
113
|
-
}
|
114
|
-
.jcrop-dragbar.ord-n {
|
115
|
-
margin-top: -4px;
|
116
|
-
}
|
117
|
-
.jcrop-dragbar.ord-s {
|
118
|
-
bottom: 0;
|
119
|
-
margin-bottom: -4px;
|
120
|
-
}
|
121
|
-
.jcrop-dragbar.ord-e {
|
122
|
-
margin-right: -4px;
|
123
|
-
right: 0;
|
124
|
-
}
|
125
|
-
.jcrop-dragbar.ord-w {
|
126
|
-
margin-left: -4px;
|
127
|
-
}
|
128
|
-
/* The "jcrop-light" class/extension */
|
129
|
-
.jcrop-light .jcrop-vline,
|
130
|
-
.jcrop-light .jcrop-hline {
|
131
|
-
background: #ffffff;
|
132
|
-
filter: alpha(opacity=70) !important;
|
133
|
-
opacity: .70!important;
|
134
|
-
}
|
135
|
-
.jcrop-light .jcrop-handle {
|
136
|
-
-moz-border-radius: 3px;
|
137
|
-
-webkit-border-radius: 3px;
|
138
|
-
background-color: #000000;
|
139
|
-
border-color: #ffffff;
|
140
|
-
border-radius: 3px;
|
141
|
-
}
|
142
|
-
/* The "jcrop-dark" class/extension */
|
143
|
-
.jcrop-dark .jcrop-vline,
|
144
|
-
.jcrop-dark .jcrop-hline {
|
145
|
-
background: #000000;
|
146
|
-
filter: alpha(opacity=70) !important;
|
147
|
-
opacity: 0.7 !important;
|
148
|
-
}
|
149
|
-
.jcrop-dark .jcrop-handle {
|
150
|
-
-moz-border-radius: 3px;
|
151
|
-
-webkit-border-radius: 3px;
|
152
|
-
background-color: #ffffff;
|
153
|
-
border-color: #000000;
|
154
|
-
border-radius: 3px;
|
155
|
-
}
|
156
|
-
/* Simple macro to turn off the antlines */
|
157
|
-
.solid-line .jcrop-vline,
|
158
|
-
.solid-line .jcrop-hline {
|
159
|
-
background: #ffffff;
|
160
|
-
}
|
161
|
-
/* Fix for twitter bootstrap et al. */
|
162
|
-
.jcrop-holder img,
|
163
|
-
img.jcrop-preview {
|
164
|
-
max-width: none;
|
165
|
-
}
|