weui-rails 0.2.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.
Files changed (54) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +28 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE +22 -0
  5. data/README.md +89 -0
  6. data/Rakefile +2 -0
  7. data/assets/stylesheets/_weui.scss +32 -0
  8. data/assets/stylesheets/base/fn.scss +13 -0
  9. data/assets/stylesheets/base/mixin/_mobile.scss +20 -0
  10. data/assets/stylesheets/base/mixin/_setArrow.scss +97 -0
  11. data/assets/stylesheets/base/mixin/_setChecked.scss +21 -0
  12. data/assets/stylesheets/base/mixin/_setOnepx.scss +47 -0
  13. data/assets/stylesheets/base/mixin/_text.scss +15 -0
  14. data/assets/stylesheets/base/reset.scss +24 -0
  15. data/assets/stylesheets/base/variable/_global.scss +32 -0
  16. data/assets/stylesheets/base/variable/_monokai.scss +11 -0
  17. data/assets/stylesheets/base/variable/_weui_button.scss +21 -0
  18. data/assets/stylesheets/base/variable/_weui_cell.scss +12 -0
  19. data/assets/stylesheets/base/variable/_weui_msg.scss +7 -0
  20. data/assets/stylesheets/base/variable/weui_progress.scss +5 -0
  21. data/assets/stylesheets/icon/weui_font.scss +62 -0
  22. data/assets/stylesheets/icon/weui_icon_font.scss +73 -0
  23. data/assets/stylesheets/widget/weui_button/weui_btn_default.scss +13 -0
  24. data/assets/stylesheets/widget/weui_button/weui_btn_disabled.scss +9 -0
  25. data/assets/stylesheets/widget/weui_button/weui_btn_global.scss +36 -0
  26. data/assets/stylesheets/widget/weui_button/weui_btn_plain.scss +30 -0
  27. data/assets/stylesheets/widget/weui_button/weui_btn_primary.scss +12 -0
  28. data/assets/stylesheets/widget/weui_button/weui_btn_warn.scss +12 -0
  29. data/assets/stylesheets/widget/weui_button/weui_button.scss +58 -0
  30. data/assets/stylesheets/widget/weui_cell/weui_access.scss +22 -0
  31. data/assets/stylesheets/widget/weui_cell/weui_cell_global.scss +68 -0
  32. data/assets/stylesheets/widget/weui_cell/weui_check.scss +4 -0
  33. data/assets/stylesheets/widget/weui_cell/weui_check/weui_check_common.scss +10 -0
  34. data/assets/stylesheets/widget/weui_cell/weui_check/weui_checkbox.scss +35 -0
  35. data/assets/stylesheets/widget/weui_cell/weui_check/weui_radio.scss +27 -0
  36. data/assets/stylesheets/widget/weui_cell/weui_form.scss +6 -0
  37. data/assets/stylesheets/widget/weui_cell/weui_form/weui_form_common.scss +64 -0
  38. data/assets/stylesheets/widget/weui_cell/weui_form/weui_select.scss +38 -0
  39. data/assets/stylesheets/widget/weui_cell/weui_form/weui_select_after.scss +6 -0
  40. data/assets/stylesheets/widget/weui_cell/weui_form/weui_select_before.scss +30 -0
  41. data/assets/stylesheets/widget/weui_cell/weui_form/weui_vcode.scss +14 -0
  42. data/assets/stylesheets/widget/weui_cell/weui_switch.scss +51 -0
  43. data/assets/stylesheets/widget/weui_page/weui_article.scss +23 -0
  44. data/assets/stylesheets/widget/weui_page/weui_msg.scss +48 -0
  45. data/assets/stylesheets/widget/weui_progress/weui_progress.scss +23 -0
  46. data/assets/stylesheets/widget/weui_tips/weui_actionsheet.scss +43 -0
  47. data/assets/stylesheets/widget/weui_tips/weui_dialog.scss +93 -0
  48. data/assets/stylesheets/widget/weui_tips/weui_mask.scss +35 -0
  49. data/assets/stylesheets/widget/weui_tips/weui_toast.scss +349 -0
  50. data/lib/weui-rails.rb +13 -0
  51. data/lib/weui-rails/version.rb +5 -0
  52. data/weui-rails.gemspec +18 -0
  53. data/weui-rails.sublime-project +16 -0
  54. metadata +96 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 5d6fc87109c99480dc920d3b6d9fca959e20e6c9
4
+ data.tar.gz: 4ab0267872a0f116bdb7cd62812cb82b6ec9f3cd
5
+ SHA512:
6
+ metadata.gz: cf8e365baf93f263966caac6cbee9aa648b006aa91b590b6991c8b8a28741cd1f9fbc3348360fd20cb3f940824753435d02fddba0dd10b4b0f182f487e5693b9
7
+ data.tar.gz: 0f45188d3a1da0fac7d0d6699f45e506b578e4ef29536735e25f9052b32a8248f489df4cc40430249636092d68e3e652a86a5ca20c7cbbf20a97210933f262a4
data/.gitignore ADDED
@@ -0,0 +1,28 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
18
+
19
+ # OS generated files #
20
+ ######################
21
+ .DS_Store
22
+ .DS_Store?
23
+ ._*
24
+ .Spotlight-V100
25
+ .Trashes
26
+ ehthumbs.db
27
+ Thumbs.db
28
+ *.sublime-workspace
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in jquery-hoverIntent-rails.gemspec
4
+ gemspec
data/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2015 Eric Guo
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,89 @@
1
+ Weui-Rails [![Gem Version][version-badge]][rubygems]
2
+ ==========
3
+
4
+ ## Installation
5
+
6
+ Add this line to your application's Gemfile:
7
+
8
+ gem 'weui-rails'
9
+
10
+ And then execute:
11
+
12
+ $ bundle
13
+
14
+ ## Usage
15
+
16
+ app/assets/stylesheets/weui-rails.css.scss
17
+
18
+ ```scss
19
+ @import "weui";
20
+ ```
21
+
22
+ config/initializers/assets.rb
23
+
24
+ ```ruby
25
+ Rails.application.config.assets.precompile += %w( weui-rails.css )
26
+ ```
27
+
28
+ app/views/layouts/wechat.html.erb
29
+
30
+ ```erb
31
+ <!DOCTYPE html>
32
+ <html lang="en">
33
+ <head>
34
+ <meta charset="UTF-8">
35
+ <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
36
+ <title>WeUI</title>
37
+ <%= stylesheet_link_tag 'weui-rails', media: 'all' %>
38
+ </head>
39
+ <body ontouchstart>
40
+ <%= yield %>
41
+ <script src="http://cdnjs.gtimg.com/cdnjs/libs/zepto/1.1.4/zepto.min.js"></script>
42
+ </body>
43
+ </html>
44
+ ```
45
+
46
+ config/routes.rb
47
+
48
+ ```ruby
49
+ resource :wechat, only: [:show, :create] do
50
+ collection do
51
+ get :buttons
52
+ end
53
+ end
54
+ ```
55
+
56
+ app/controllers/wechats_controller.rb
57
+
58
+ ```ruby
59
+ class WechatsController < ActionController::Base
60
+ layout 'wechat'
61
+ end
62
+ ```
63
+
64
+ app/views/wechats/buttons.html.erb
65
+
66
+ ```erb
67
+ <div class="page">
68
+ <div class="hd">
69
+ <h1 class="page_title">Button</h1>
70
+ </div>
71
+ <div class="bd spacing">
72
+ <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
73
+ <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
74
+ <a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
75
+ <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
76
+ <a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
77
+ <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
78
+ <div class="button_sp_area">
79
+ <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
80
+ <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
81
+
82
+ <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
83
+ <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ ```
88
+
89
+ [version-badge]: https://badge.fury.io/rb/weui-rails.svg
data/Rakefile ADDED
@@ -0,0 +1,2 @@
1
+ #!/usr/bin/env rake
2
+ require "bundler/gem_tasks"
data/assets/stylesheets/_weui.scss ADDED
@@ -0,0 +1,32 @@
1
+ @import "./base/reset";
2
+
3
+ // icon font
4
+ @import "./icon/weui_icon_font";
5
+
6
+ // button
7
+ @import "./widget/weui_button/weui_button";
8
+
9
+ // cell
10
+ @import "./widget/weui_cell/weui_cell_global";
11
+
12
+ @import "./widget/weui_cell/weui_access";
13
+ @import "./widget/weui_cell/weui_check";
14
+ @import "./widget/weui_cell/weui_form";
15
+ @import "./widget/weui_cell/weui_switch";
16
+
17
+ // msg
18
+ @import "./widget/weui_page/weui_msg";
19
+
20
+ // article
21
+ @import "./widget/weui_page/weui_article";
22
+
23
+ //progress
24
+ @import "./widget/weui_progress/weui_progress";
25
+
26
+ // tips
27
+ @import "./widget/weui_tips/weui_dialog";
28
+ @import "./widget/weui_tips/weui_toast";
29
+ @import "./widget/weui_tips/weui_mask";
30
+
31
+ //action sheet
32
+ @import "./widget/weui_tips/weui_actionsheet";
data/assets/stylesheets/base/fn.scss ADDED
@@ -0,0 +1,13 @@
1
+ // mixin
2
+ @import "./mixin/mobile";
3
+ @import "./mixin/setOnepx";
4
+ @import "./mixin/setArrow";
5
+
6
+ // variable
7
+ @import "./variable/global";
8
+ @import "./variable/monokai";
9
+
10
+ @import "./variable/weui_cell";
11
+ @import "./variable/weui_button";
12
+ @import "./variable/weui_msg";
13
+ @import "./variable/weui_progress";
data/assets/stylesheets/base/mixin/_mobile.scss ADDED
@@ -0,0 +1,20 @@
1
+ // tapcolor
2
+ @mixin setTapColor($c:rgba(0,0,0,0)) {
3
+ -webkit-tap-highlight-color: $c;
4
+ }
5
+
6
+ //user action
7
+ @mixin no_select() {
8
+ user-select: none;
9
+ }
10
+
11
+ // opacity
12
+ @mixin opacity($opacity) {
13
+ @if $opacity == 1 {
14
+ filter: "progid:DXImageTransform.Microsoft.Alpha(enabled=false)";
15
+ }
16
+ @else {
17
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})";
18
+ }
19
+ opacity: $opacity;
20
+ }
data/assets/stylesheets/base/mixin/_setArrow.scss ADDED
@@ -0,0 +1,97 @@
1
+ // css2 arrow
2
+ @mixin arrow($borderWidth, $borderColor) {
3
+ @include setArrowWidth($borderWidth);
4
+ @include setArrowColor($borderColor);
5
+ }
6
+
7
+ @mixin setArrowColor($borderColor) {
8
+ &.arrow_t {
9
+ border-bottom-color: $borderColor;
10
+ }
11
+ &.arrow_r {
12
+ border-left-color: $borderColor;
13
+ }
14
+ &.arrow_b {
15
+ border-top-color: $borderColor;
16
+ }
17
+ &.arrow_l {
18
+ border-right-color: $borderColor;
19
+ }
20
+ }
21
+
22
+ @mixin setArrowWidth($borderWidth) {
23
+ border-width: $borderWidth;
24
+ }
25
+
26
+ @mixin setArrow($direction, $borderWidth, $borderColor) {
27
+ display: inline-block;
28
+ width: 0;
29
+ height: 0;
30
+ border: $borderWidth dashed transparent;
31
+ @if $direction == top {
32
+ @include arrow_t($borderColor);
33
+ } @else if $direction == right {
34
+ @include arrow_r($borderColor);
35
+ } @else if $direction == bottom {
36
+ @include arrow_b($borderColor);
37
+ } @else if $direction == left {
38
+ @include arrow_l($borderColor);
39
+ }
40
+ }
41
+
42
+ @mixin arrow_t($c) {
43
+ border-top-width: 0;
44
+ border-bottom-color: $c;
45
+ border-bottom-style: solid;
46
+ }
47
+
48
+ @mixin arrow_r($c) {
49
+ border-right-width: 0;
50
+ border-left-color: $c;
51
+ border-left-style: solid;
52
+ }
53
+
54
+ @mixin arrow_b($c) {
55
+ border-bottom-width: 0;
56
+ border-top-color: $c;
57
+ border-top-style: solid;
58
+ }
59
+
60
+ @mixin arrow_l($c) {
61
+ border-left-width: 0;
62
+ border-right-color: $c;
63
+ border-right-style: solid;
64
+ }
65
+
66
+ // css3 arrow
67
+ @mixin setArrowWidth_Wap($borderWidth) {
68
+ border-width: $borderWidth $borderWidth 0 0;
69
+ }
70
+
71
+ @mixin setArrowSize_Wap($arrowsize) {
72
+ height: $arrowsize;
73
+ width: $arrowsize;
74
+ }
75
+
76
+ @mixin setArrow_Wap($direction, $arrowsize, $borderColor, $borderWidth) {
77
+ display: inline-block;
78
+ @include setArrowSize_Wap($arrowsize);
79
+ @include setArrowWidth_Wap($borderWidth);
80
+ border-color: $borderColor;
81
+ border-style: solid;
82
+ @if $direction == top {
83
+ transform: translate(0, 0) rotate(-45deg);
84
+ } @else if $direction == right {
85
+ transform: rotate(45deg);
86
+ position: relative;
87
+ top: -2px;
88
+ } @else if $direction == down {
89
+ transform: rotate(135deg);
90
+ position: relative;
91
+ top: -3px;
92
+ } @else if $direction == bottom {
93
+ transform: rotate(-135deg);
94
+ position: relative;
95
+ top: -2px;
96
+ }
97
+ }
data/assets/stylesheets/base/mixin/_setChecked.scss ADDED
@@ -0,0 +1,21 @@
1
+ @mixin setChecked($c:#FFFFFF) {
2
+ display: inline-block;
3
+ content: '';
4
+ width: 4px;
5
+ height: 8px;
6
+ border-bottom: 2px solid $c;
7
+ border-right: 2px solid $c;
8
+ transform: translate(0, 0) rotate(45deg);
9
+ }
10
+
11
+ @mixin setCheckedAbs($c:#FFFFFF) {
12
+ position: absolute;
13
+ top: 50%;
14
+ left: 50%;
15
+ content: '';
16
+ width: 4px;
17
+ height: 8px;
18
+ border-bottom: 2px solid $c;
19
+ border-right: 2px solid $c;
20
+ transform: translate(-50%, -65%) rotate(45deg);
21
+ }
data/assets/stylesheets/base/mixin/_setOnepx.scss ADDED
@@ -0,0 +1,47 @@
1
+ @mixin setTopLine($c: #C7C7C7) {
2
+ content: " ";
3
+ position: absolute;
4
+ left: 0;
5
+ top: 0;
6
+ width: 100%;
7
+ height: 1px;
8
+ border-top: 1px solid $c;
9
+ transform-origin: 0 0;
10
+ transform: scaleY(0.5);
11
+ }
12
+
13
+ @mixin setBottomLine($c: #C7C7C7) {
14
+ content: " ";
15
+ position: absolute;
16
+ left: 0;
17
+ bottom: 0;
18
+ width: 100%;
19
+ height: 1px;
20
+ border-bottom: 1px solid $c;
21
+ transform-origin: 0 100%;
22
+ transform: scaleY(0.5);
23
+ }
24
+
25
+ @mixin setLeftLine($c: #C7C7C7) {
26
+ content: " ";
27
+ position: absolute;
28
+ left: 0;
29
+ top: 0;
30
+ width: 1px;
31
+ height: 100%;
32
+ border-left: 1px solid $c;
33
+ transform-origin: 0 0;
34
+ transform: scaleX(0.5);
35
+ }
36
+
37
+ @mixin setRightLine($c: #C7C7C7) {
38
+ content: " ";
39
+ position: absolute;
40
+ right: 0;
41
+ top: 0;
42
+ width: 1px;
43
+ height: 100%;
44
+ border-right: 1px solid $c;
45
+ transform-origin: 0 100%;
46
+ transform: scaleX(0.5);
47
+ }
data/assets/stylesheets/base/mixin/_text.scss ADDED
@@ -0,0 +1,15 @@
1
+ @mixin ellipsis($w:auto) {
2
+ width: $w;
3
+ overflow: hidden;
4
+ text-overflow: ellipsis;
5
+ white-space: nowrap;
6
+ word-wrap: normal;
7
+ }
8
+
9
+ @mixin ellipsis($type, $line) {
10
+ overflow: hidden;
11
+ text-overflow: ellipsis;
12
+ display: -webkit-box;
13
+ -webkit-box-orient: vertical;
14
+ -webkit-line-clamp: $line;
15
+ }
data/assets/stylesheets/base/reset.scss ADDED
@@ -0,0 +1,24 @@
1
+ @import "./fn";
2
+
3
+ html {
4
+ -ms-text-size-adjust: 100%;
5
+ -webkit-text-size-adjust: 100%;
6
+ }
7
+
8
+ body {
9
+ line-height: 1.6;
10
+ font-family: $sansFont;
11
+ }
12
+
13
+ * {
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+
18
+ a img {
19
+ border: 0;
20
+ }
21
+
22
+ a {
23
+ text-decoration: none;
24
+ }