jquery-ui-sass-rails 4.0.2.beta1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +3 -0
- data/.gitmodules +3 -0
- data/.travis.yml +3 -0
- data/Gemfile +3 -0
- data/History.md +5 -0
- data/License.txt +2 -0
- data/README.md +62 -0
- data/Rakefile +75 -0
- data/app/assets/stylesheets/_jquery.ui.variables.css.scss +78 -0
- data/app/assets/stylesheets/jquery.ui.accordion.css.scss +39 -0
- data/app/assets/stylesheets/jquery.ui.all.css.scss +11 -0
- data/app/assets/stylesheets/jquery.ui.autocomplete.css.scss +17 -0
- data/app/assets/stylesheets/jquery.ui.base.css.scss +11 -0
- data/app/assets/stylesheets/jquery.ui.button.css.scss +115 -0
- data/app/assets/stylesheets/jquery.ui.core.css.scss +92 -0
- data/app/assets/stylesheets/jquery.ui.datepicker.css.scss +179 -0
- data/app/assets/stylesheets/jquery.ui.dialog.css.scss +70 -0
- data/app/assets/stylesheets/jquery.ui.menu.css.scss +78 -0
- data/app/assets/stylesheets/jquery.ui.progressbar.css.scss +29 -0
- data/app/assets/stylesheets/jquery.ui.resizable.css.scss +79 -0
- data/app/assets/stylesheets/jquery.ui.selectable.css.scss +16 -0
- data/app/assets/stylesheets/jquery.ui.slider.css.scss +74 -0
- data/app/assets/stylesheets/jquery.ui.spinner.css.scss +66 -0
- data/app/assets/stylesheets/jquery.ui.tabs.css.scss +53 -0
- data/app/assets/stylesheets/jquery.ui.theme.css.scss +408 -0
- data/app/assets/stylesheets/jquery.ui.tooltip.css.scss +20 -0
- data/lib/jquery-ui-sass-rails.rb +1 -0
- data/lib/jquery/ui/sass/rails.rb +2 -0
- data/lib/jquery/ui/sass/rails/engine.rb +10 -0
- data/lib/jquery/ui/sass/rails/version.rb +10 -0
- metadata +140 -0
data/.gitignore
ADDED
data/.gitmodules
ADDED
data/.travis.yml
ADDED
data/Gemfile
ADDED
data/History.md
ADDED
data/License.txt
ADDED
data/README.md
ADDED
@@ -0,0 +1,62 @@
|
|
1
|
+
# jquery-ui-sass-rails
|
2
|
+
|
3
|
+
[![Build Status](https://secure.travis-ci.org/joliss/jquery-ui-rails.png?branch=master)](http://travis-ci.org/joliss/jquery-ui-rails) [![Dependency Status](https://gemnasium.com/joliss/jquery-ui-rails.png)](https://gemnasium.com/joliss/jquery-ui-rails)
|
4
|
+
|
5
|
+
This gem packages the jQuery UI 1.10.0 stylesheets in **Sass format (SCSS syntax)** for the Rails 3.1+ [asset
|
6
|
+
pipeline](http://guides.rubyonrails.org/asset_pipeline.html).
|
7
|
+
|
8
|
+
It complements the [jquery-ui-rails](https://github.com/joliss/jquery-ui-rails), which already packages all the plain jQuery UI assets (javascript, css, images) by providing the stylesheets in Sass format allowing much easier customization through Sass variables. It overwrites the plain CSS stylesheets from `jquery-ui-rails`.
|
9
|
+
|
10
|
+
## Installation
|
11
|
+
|
12
|
+
This gem already has `jquery-ui-rails` as a dependency, so it's enough to include only it in your Gemfile:
|
13
|
+
|
14
|
+
```ruby
|
15
|
+
gem 'jquery-ui-sass-rails'
|
16
|
+
```
|
17
|
+
|
18
|
+
## JavaScript
|
19
|
+
|
20
|
+
For the JavaScript part you should refer to the [jquery-ui-rails documentation](https://github.com/joliss/jquery-ui-rails) and do something like this:
|
21
|
+
|
22
|
+
```javascript
|
23
|
+
//= require jquery.ui.all
|
24
|
+
```
|
25
|
+
|
26
|
+
or this:
|
27
|
+
|
28
|
+
```javascript
|
29
|
+
//= require jquery.ui.datepicker
|
30
|
+
```
|
31
|
+
|
32
|
+
## Sass Stylesheets
|
33
|
+
|
34
|
+
For the stylesheets you should use Sass's `@import` instead of Sprocket's `= require`, just as the official `sass-rails` gem [recommends it](https://github.com/rails/sass-rails#important-note).
|
35
|
+
|
36
|
+
They way you import the stylesheets would be something like this:
|
37
|
+
|
38
|
+
```sass
|
39
|
+
// app/assets/stylesheets/application.css.sass
|
40
|
+
|
41
|
+
@import jquery.ui.core // you always want that stylesheet
|
42
|
+
@import jquery.ui.theme // import this when you want to build on jQuer UI's themeing
|
43
|
+
@import jquery.ui.datepicker // import all the modules you need
|
44
|
+
```
|
45
|
+
|
46
|
+
The big advantage that the jQuery UI stylesheets have been converted to Sass in this gem are that you have a super easy way to customize the themes using simple Sass variables. You only need to specify your own values **before** you import the jQuery UI stylesheets:
|
47
|
+
|
48
|
+
```sass
|
49
|
+
// app/assets/stylesheets/application.css.sass
|
50
|
+
|
51
|
+
$bgColorContent: purple // set custom value for jQueryUI variable
|
52
|
+
|
53
|
+
@import jquery.ui.core
|
54
|
+
@import jquery.ui.theme // your custom variables will be used here
|
55
|
+
@import jquery.ui.datepicker
|
56
|
+
```
|
57
|
+
|
58
|
+
## Credits
|
59
|
+
|
60
|
+
This gem is only a complement to the `jquery-ui-rails` gem and wouldn't be possible without it's author [Jo Liss](https://github.com/joliss) and the other [contributors](https://github.com/joliss/jquery-ui-rails/contributors).
|
61
|
+
|
62
|
+
Since this is only a gem repackaging the jQuery UI library, the biggest thanks obviously goes out to the [jQueryUI team](http://jqueryui.com/about/).
|
data/Rakefile
ADDED
@@ -0,0 +1,75 @@
|
|
1
|
+
require 'json'
|
2
|
+
require 'bundler/gem_tasks'
|
3
|
+
|
4
|
+
desc 'remove SCSS files'
|
5
|
+
task :clean_scss do
|
6
|
+
rm_rf 'app/assets/stylesheets/*.scss'
|
7
|
+
puts "cleaned old SCSS files"
|
8
|
+
puts "-----"
|
9
|
+
end
|
10
|
+
|
11
|
+
desc 'move jquery-ui-rails stylesheets'
|
12
|
+
task :move_stylesheets do
|
13
|
+
target_dir = 'jquery-ui-rails/stylesheets'
|
14
|
+
mkdir_p target_dir
|
15
|
+
system("mv app/assets/stylesheets/*.erb #{target_dir}")
|
16
|
+
puts "move stylesheets to #{target_dir} (if necesarry)"
|
17
|
+
puts "-----"
|
18
|
+
end
|
19
|
+
|
20
|
+
desc "Convert stylesheets to SCSS"
|
21
|
+
task :convert_to_scss do
|
22
|
+
source_dir = 'jquery-ui-rails/stylesheets'
|
23
|
+
target_dir = 'app/assets/stylesheets'
|
24
|
+
variables_hash = {}
|
25
|
+
|
26
|
+
# convert css files to scss
|
27
|
+
Dir.glob("#{source_dir}/*.erb").each do |source_file|
|
28
|
+
puts source_file
|
29
|
+
stylesheet_content = File.read(source_file)
|
30
|
+
|
31
|
+
# replace image_path ERB with image-url Sass
|
32
|
+
stylesheet_content.gsub!(/<%= image_path\((\S+)\) %>/) { "image-path(#{$1})" }
|
33
|
+
|
34
|
+
# remove comment blocks with sprockets require directives, because they don't work well with Sass variables
|
35
|
+
stylesheet_content.gsub!(/\/\*[^\/]+require[^\/]+\*\//) do
|
36
|
+
if source_file.end_with?('jquery.ui.theme.css.erb')
|
37
|
+
"@import 'jquery.ui.variables';\n"
|
38
|
+
else
|
39
|
+
''
|
40
|
+
end
|
41
|
+
end
|
42
|
+
|
43
|
+
# extract vars
|
44
|
+
regex = /(url\(<%= image_path\([\S]+\) %>\)|[\S]+)\/\*{([a-z]+)}\*\//i
|
45
|
+
vars = stylesheet_content.scan regex
|
46
|
+
|
47
|
+
# write variables to gobal hash
|
48
|
+
vars.each do |var|
|
49
|
+
value = var[0]
|
50
|
+
name = var[1]
|
51
|
+
variables_hash[name] ||= value
|
52
|
+
end
|
53
|
+
|
54
|
+
# write SCSS file
|
55
|
+
destination_file_name = File.basename(source_file).gsub(".css.erb", ".css.scss")
|
56
|
+
destination_file = File.open "#{target_dir}/#{destination_file_name}", 'w'
|
57
|
+
destination_file << stylesheet_content.gsub(regex) { "$#{$2}" }
|
58
|
+
destination_file.close
|
59
|
+
puts "> .css.scss"
|
60
|
+
puts "--"
|
61
|
+
end
|
62
|
+
|
63
|
+
# write _jquery.ui.variables.css.scss
|
64
|
+
variables_stylesheet = File.open "#{target_dir}/_jquery.ui.variables.css.scss", 'w'
|
65
|
+
variables_hash.each do |name, value|
|
66
|
+
variables_stylesheet << "$#{name}: #{value} !default;\n"
|
67
|
+
end
|
68
|
+
variables_stylesheet.close
|
69
|
+
puts "wrote _jquery.ui.variables.css.scss"
|
70
|
+
puts "-----"
|
71
|
+
end
|
72
|
+
|
73
|
+
task :scss_process => [:clean_scss, :move_stylesheets, :convert_to_scss]
|
74
|
+
|
75
|
+
task :default => :scss_process
|
@@ -0,0 +1,78 @@
|
|
1
|
+
$ffDefault: Verdana,Arial,sans-serif !default;
|
2
|
+
$fsDefault: 1.1em !default;
|
3
|
+
$borderColorContent: #aaaaaa !default;
|
4
|
+
$bgColorContent: #ffffff !default;
|
5
|
+
$bgImgUrlContent: url(image-path("jquery-ui/ui-bg_flat_75_ffffff_40x100.png")) !default;
|
6
|
+
$bgContentXPos: 50% !default;
|
7
|
+
$bgContentYPos: 50% !default;
|
8
|
+
$bgContentRepeat: repeat-x !default;
|
9
|
+
$fcContent: #222222 !default;
|
10
|
+
$borderColorHeader: #aaaaaa !default;
|
11
|
+
$bgColorHeader: #cccccc !default;
|
12
|
+
$bgImgUrlHeader: url(image-path("jquery-ui/ui-bg_highlight-soft_75_cccccc_1x100.png")) !default;
|
13
|
+
$bgHeaderXPos: 50% !default;
|
14
|
+
$bgHeaderYPos: 50% !default;
|
15
|
+
$bgHeaderRepeat: repeat-x !default;
|
16
|
+
$fcHeader: #222222 !default;
|
17
|
+
$borderColorDefault: #d3d3d3 !default;
|
18
|
+
$bgColorDefault: #e6e6e6 !default;
|
19
|
+
$bgImgUrlDefault: url(image-path("jquery-ui/ui-bg_glass_75_e6e6e6_1x400.png")) !default;
|
20
|
+
$bgDefaultXPos: 50% !default;
|
21
|
+
$bgDefaultYPos: 50% !default;
|
22
|
+
$bgDefaultRepeat: repeat-x !default;
|
23
|
+
$fwDefault: normal !default;
|
24
|
+
$fcDefault: #555555 !default;
|
25
|
+
$borderColorHover: #999999 !default;
|
26
|
+
$bgColorHover: #dadada !default;
|
27
|
+
$bgImgUrlHover: url(image-path("jquery-ui/ui-bg_glass_75_dadada_1x400.png")) !default;
|
28
|
+
$bgHoverXPos: 50% !default;
|
29
|
+
$bgHoverYPos: 50% !default;
|
30
|
+
$bgHoverRepeat: repeat-x !default;
|
31
|
+
$fcHover: #212121 !default;
|
32
|
+
$borderColorActive: #aaaaaa !default;
|
33
|
+
$bgColorActive: #ffffff !default;
|
34
|
+
$bgImgUrlActive: url(image-path("jquery-ui/ui-bg_glass_65_ffffff_1x400.png")) !default;
|
35
|
+
$bgActiveXPos: 50% !default;
|
36
|
+
$bgActiveYPos: 50% !default;
|
37
|
+
$bgActiveRepeat: repeat-x !default;
|
38
|
+
$fcActive: #212121 !default;
|
39
|
+
$borderColorHighlight: #fcefa1 !default;
|
40
|
+
$bgColorHighlight: #fbf9ee !default;
|
41
|
+
$bgImgUrlHighlight: url(image-path("jquery-ui/ui-bg_glass_55_fbf9ee_1x400.png")) !default;
|
42
|
+
$bgHighlightXPos: 50% !default;
|
43
|
+
$bgHighlightYPos: 50% !default;
|
44
|
+
$bgHighlightRepeat: repeat-x !default;
|
45
|
+
$fcHighlight: #363636 !default;
|
46
|
+
$borderColorError: #cd0a0a !default;
|
47
|
+
$bgColorError: #fef1ec !default;
|
48
|
+
$bgImgUrlError: url(image-path("jquery-ui/ui-bg_glass_95_fef1ec_1x400.png")) !default;
|
49
|
+
$bgErrorXPos: 50% !default;
|
50
|
+
$bgErrorYPos: 50% !default;
|
51
|
+
$bgErrorRepeat: repeat-x !default;
|
52
|
+
$fcError: #cd0a0a !default;
|
53
|
+
$iconsContent: url(image-path("jquery-ui/ui-icons_222222_256x240.png")) !default;
|
54
|
+
$iconsHeader: url(image-path("jquery-ui/ui-icons_222222_256x240.png")) !default;
|
55
|
+
$iconsDefault: url(image-path("jquery-ui/ui-icons_888888_256x240.png")) !default;
|
56
|
+
$iconsHover: url(image-path("jquery-ui/ui-icons_454545_256x240.png")) !default;
|
57
|
+
$iconsActive: url(image-path("jquery-ui/ui-icons_454545_256x240.png")) !default;
|
58
|
+
$iconsHighlight: url(image-path("jquery-ui/ui-icons_2e83ff_256x240.png")) !default;
|
59
|
+
$iconsError: url(image-path("jquery-ui/ui-icons_cd0a0a_256x240.png")) !default;
|
60
|
+
$cornerRadius: 4px !default;
|
61
|
+
$bgColorOverlay: #aaaaaa !default;
|
62
|
+
$bgImgUrlOverlay: url(image-path("jquery-ui/ui-bg_flat_0_aaaaaa_40x100.png")) !default;
|
63
|
+
$bgOverlayXPos: 50% !default;
|
64
|
+
$bgOverlayYPos: 50% !default;
|
65
|
+
$bgOverlayRepeat: repeat-x !default;
|
66
|
+
$opacityOverlay: .3 !default;
|
67
|
+
$opacityFilterOverlay: Alpha(Opacity=30) !default;
|
68
|
+
$offsetTopShadow: -8px !default;
|
69
|
+
$offsetLeftShadow: -8px !default;
|
70
|
+
$thicknessShadow: 8px !default;
|
71
|
+
$bgColorShadow: #aaaaaa !default;
|
72
|
+
$bgImgUrlShadow: url(image-path("jquery-ui/ui-bg_flat_0_aaaaaa_40x100.png")) !default;
|
73
|
+
$bgShadowXPos: 50% !default;
|
74
|
+
$bgShadowYPos: 50% !default;
|
75
|
+
$bgShadowRepeat: repeat-x !default;
|
76
|
+
$opacityShadow: .3 !default;
|
77
|
+
$opacityFilterShadow: Alpha(Opacity=30) !default;
|
78
|
+
$cornerRadiusShadow: 8px !default;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
/*!
|
2
|
+
* jQuery UI Accordion 1.10.0
|
3
|
+
* http://jqueryui.com
|
4
|
+
*
|
5
|
+
* Copyright 2013 jQuery Foundation and other contributors
|
6
|
+
* Released under the MIT license.
|
7
|
+
* http://jquery.org/license
|
8
|
+
*
|
9
|
+
* http://docs.jquery.com/UI/Accordion#theming
|
10
|
+
*/
|
11
|
+
|
12
|
+
.ui-accordion .ui-accordion-header {
|
13
|
+
display: block;
|
14
|
+
cursor: pointer;
|
15
|
+
position: relative;
|
16
|
+
margin-top: 2px;
|
17
|
+
padding: .5em .5em .5em .7em;
|
18
|
+
min-height: 0; /* support: IE7 */
|
19
|
+
}
|
20
|
+
.ui-accordion .ui-accordion-icons {
|
21
|
+
padding-left: 2.2em;
|
22
|
+
}
|
23
|
+
.ui-accordion .ui-accordion-noicons {
|
24
|
+
padding-left: .7em;
|
25
|
+
}
|
26
|
+
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
|
27
|
+
padding-left: 2.2em;
|
28
|
+
}
|
29
|
+
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
|
30
|
+
position: absolute;
|
31
|
+
left: .5em;
|
32
|
+
top: 50%;
|
33
|
+
margin-top: -8px;
|
34
|
+
}
|
35
|
+
.ui-accordion .ui-accordion-content {
|
36
|
+
padding: 1em 2.2em;
|
37
|
+
border-top: 0;
|
38
|
+
overflow: auto;
|
39
|
+
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
/*!
|
2
|
+
* jQuery UI Autocomplete 1.10.0
|
3
|
+
* http://jqueryui.com
|
4
|
+
*
|
5
|
+
* Copyright 2013 jQuery Foundation and other contributors
|
6
|
+
* Released under the MIT license.
|
7
|
+
* http://jquery.org/license
|
8
|
+
*
|
9
|
+
* http://docs.jquery.com/UI/Autocomplete#theming
|
10
|
+
*/
|
11
|
+
|
12
|
+
.ui-autocomplete {
|
13
|
+
position: absolute;
|
14
|
+
top: 0;
|
15
|
+
left: 0;
|
16
|
+
cursor: default;
|
17
|
+
}
|
@@ -0,0 +1,115 @@
|
|
1
|
+
/*!
|
2
|
+
* jQuery UI Button 1.10.0
|
3
|
+
* http://jqueryui.com
|
4
|
+
*
|
5
|
+
* Copyright 2013 jQuery Foundation and other contributors
|
6
|
+
* Released under the MIT license.
|
7
|
+
* http://jquery.org/license
|
8
|
+
*
|
9
|
+
* http://docs.jquery.com/UI/Button#theming
|
10
|
+
*/
|
11
|
+
|
12
|
+
.ui-button {
|
13
|
+
display: inline-block;
|
14
|
+
position: relative;
|
15
|
+
padding: 0;
|
16
|
+
line-height: normal;
|
17
|
+
margin-right: .1em;
|
18
|
+
cursor: pointer;
|
19
|
+
vertical-align: middle;
|
20
|
+
text-align: center;
|
21
|
+
overflow: visible; /* removes extra width in IE */
|
22
|
+
}
|
23
|
+
.ui-button,
|
24
|
+
.ui-button:link,
|
25
|
+
.ui-button:visited,
|
26
|
+
.ui-button:hover,
|
27
|
+
.ui-button:active {
|
28
|
+
text-decoration: none;
|
29
|
+
}
|
30
|
+
/* to make room for the icon, a width needs to be set here */
|
31
|
+
.ui-button-icon-only {
|
32
|
+
width: 2.2em;
|
33
|
+
}
|
34
|
+
/* button elements seem to need a little more width */
|
35
|
+
button.ui-button-icon-only {
|
36
|
+
width: 2.4em;
|
37
|
+
}
|
38
|
+
.ui-button-icons-only {
|
39
|
+
width: 3.4em;
|
40
|
+
}
|
41
|
+
button.ui-button-icons-only {
|
42
|
+
width: 3.7em;
|
43
|
+
}
|
44
|
+
|
45
|
+
/* button text element */
|
46
|
+
.ui-button .ui-button-text {
|
47
|
+
display: block;
|
48
|
+
line-height: normal;
|
49
|
+
}
|
50
|
+
.ui-button-text-only .ui-button-text {
|
51
|
+
padding: .4em 1em;
|
52
|
+
}
|
53
|
+
.ui-button-icon-only .ui-button-text,
|
54
|
+
.ui-button-icons-only .ui-button-text {
|
55
|
+
padding: .4em;
|
56
|
+
text-indent: -9999999px;
|
57
|
+
}
|
58
|
+
.ui-button-text-icon-primary .ui-button-text,
|
59
|
+
.ui-button-text-icons .ui-button-text {
|
60
|
+
padding: .4em 1em .4em 2.1em;
|
61
|
+
}
|
62
|
+
.ui-button-text-icon-secondary .ui-button-text,
|
63
|
+
.ui-button-text-icons .ui-button-text {
|
64
|
+
padding: .4em 2.1em .4em 1em;
|
65
|
+
}
|
66
|
+
.ui-button-text-icons .ui-button-text {
|
67
|
+
padding-left: 2.1em;
|
68
|
+
padding-right: 2.1em;
|
69
|
+
}
|
70
|
+
/* no icon support for input elements, provide padding by default */
|
71
|
+
input.ui-button {
|
72
|
+
padding: .4em 1em;
|
73
|
+
}
|
74
|
+
|
75
|
+
/* button icon element(s) */
|
76
|
+
.ui-button-icon-only .ui-icon,
|
77
|
+
.ui-button-text-icon-primary .ui-icon,
|
78
|
+
.ui-button-text-icon-secondary .ui-icon,
|
79
|
+
.ui-button-text-icons .ui-icon,
|
80
|
+
.ui-button-icons-only .ui-icon {
|
81
|
+
position: absolute;
|
82
|
+
top: 50%;
|
83
|
+
margin-top: -8px;
|
84
|
+
}
|
85
|
+
.ui-button-icon-only .ui-icon {
|
86
|
+
left: 50%;
|
87
|
+
margin-left: -8px;
|
88
|
+
}
|
89
|
+
.ui-button-text-icon-primary .ui-button-icon-primary,
|
90
|
+
.ui-button-text-icons .ui-button-icon-primary,
|
91
|
+
.ui-button-icons-only .ui-button-icon-primary {
|
92
|
+
left: .5em;
|
93
|
+
}
|
94
|
+
.ui-button-text-icon-secondary .ui-button-icon-secondary,
|
95
|
+
.ui-button-text-icons .ui-button-icon-secondary,
|
96
|
+
.ui-button-icons-only .ui-button-icon-secondary {
|
97
|
+
right: .5em;
|
98
|
+
}
|
99
|
+
|
100
|
+
/* button sets */
|
101
|
+
.ui-buttonset {
|
102
|
+
margin-right: 7px;
|
103
|
+
}
|
104
|
+
.ui-buttonset .ui-button {
|
105
|
+
margin-left: 0;
|
106
|
+
margin-right: -.3em;
|
107
|
+
}
|
108
|
+
|
109
|
+
/* workarounds */
|
110
|
+
/* reset extra padding in Firefox, see h5bp.com/l */
|
111
|
+
input.ui-button::-moz-focus-inner,
|
112
|
+
button.ui-button::-moz-focus-inner {
|
113
|
+
border: 0;
|
114
|
+
padding: 0;
|
115
|
+
}
|