weui-rails 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
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
+ }