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.
Files changed (31) hide show
  1. data/.gitignore +3 -0
  2. data/.gitmodules +3 -0
  3. data/.travis.yml +3 -0
  4. data/Gemfile +3 -0
  5. data/History.md +5 -0
  6. data/License.txt +2 -0
  7. data/README.md +62 -0
  8. data/Rakefile +75 -0
  9. data/app/assets/stylesheets/_jquery.ui.variables.css.scss +78 -0
  10. data/app/assets/stylesheets/jquery.ui.accordion.css.scss +39 -0
  11. data/app/assets/stylesheets/jquery.ui.all.css.scss +11 -0
  12. data/app/assets/stylesheets/jquery.ui.autocomplete.css.scss +17 -0
  13. data/app/assets/stylesheets/jquery.ui.base.css.scss +11 -0
  14. data/app/assets/stylesheets/jquery.ui.button.css.scss +115 -0
  15. data/app/assets/stylesheets/jquery.ui.core.css.scss +92 -0
  16. data/app/assets/stylesheets/jquery.ui.datepicker.css.scss +179 -0
  17. data/app/assets/stylesheets/jquery.ui.dialog.css.scss +70 -0
  18. data/app/assets/stylesheets/jquery.ui.menu.css.scss +78 -0
  19. data/app/assets/stylesheets/jquery.ui.progressbar.css.scss +29 -0
  20. data/app/assets/stylesheets/jquery.ui.resizable.css.scss +79 -0
  21. data/app/assets/stylesheets/jquery.ui.selectable.css.scss +16 -0
  22. data/app/assets/stylesheets/jquery.ui.slider.css.scss +74 -0
  23. data/app/assets/stylesheets/jquery.ui.spinner.css.scss +66 -0
  24. data/app/assets/stylesheets/jquery.ui.tabs.css.scss +53 -0
  25. data/app/assets/stylesheets/jquery.ui.theme.css.scss +408 -0
  26. data/app/assets/stylesheets/jquery.ui.tooltip.css.scss +20 -0
  27. data/lib/jquery-ui-sass-rails.rb +1 -0
  28. data/lib/jquery/ui/sass/rails.rb +2 -0
  29. data/lib/jquery/ui/sass/rails/engine.rb +10 -0
  30. data/lib/jquery/ui/sass/rails/version.rb +10 -0
  31. metadata +140 -0
@@ -0,0 +1,3 @@
1
+ *.gem
2
+ Gemfile.lock
3
+ .rvmrc
@@ -0,0 +1,3 @@
1
+ [submodule "jquery-ui"]
2
+ path = jquery-ui
3
+ url = git://github.com/jquery/jquery-ui.git
@@ -0,0 +1,3 @@
1
+ rvm:
2
+ - 1.9.2
3
+ - 1.9.3
data/Gemfile ADDED
@@ -0,0 +1,3 @@
1
+ source 'https://rubygems.org'
2
+
3
+ gemspec
@@ -0,0 +1,5 @@
1
+ # master
2
+
3
+ # 4.0.2
4
+
5
+ * Initials `jquery-ui-sass-rails` release
@@ -0,0 +1,2 @@
1
+ jQuery UI as well as this gem are licensed under the MIT license (see
2
+ jquery-ui/MIT-LICENSE.txt).
@@ -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/).
@@ -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,11 @@
1
+ /*!
2
+ * jQuery UI CSS Framework 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/Theming
10
+ */
11
+
@@ -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,11 @@
1
+ /*!
2
+ * jQuery UI CSS Framework 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/Theming
10
+ */
11
+
@@ -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
+ }