QMUI_Sass 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.editorconfig +20 -0
- data/.gitignore +66 -0
- data/.npmignore +2 -0
- data/.travis.yml +14 -0
- data/Gemfile +6 -0
- data/LICENSE +38 -0
- data/QMUI_Sass.gemspec +30 -0
- data/README.md +55 -0
- data/Rakefile +9 -0
- data/_var.scss +120 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/lib/QMUI_Sass.rb +6 -0
- data/lib/QMUI_Sass/version.rb +3 -0
- data/package.json +26 -0
- data/qmui/_function.scss +54 -0
- data/qmui/_qmui.scss +32 -0
- data/qmui/_reset.scss +84 -0
- data/qmui/mixin/_adaptation.scss +236 -0
- data/qmui/mixin/_mixin.scss +13 -0
- data/qmui/mixin/tool/_calculate.scss +232 -0
- data/qmui/mixin/tool/_effect.scss +189 -0
- data/qmui/mixin/tool/_enhance.scss +44 -0
- data/qmui/mixin/tool/_tool.scss +16 -0
- data/stylelint.config.js +133 -0
- data/yarn.lock +3546 -0
- metadata +99 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 4873954b429b698ac306a145103f8d2ac97ff4ef
|
4
|
+
data.tar.gz: b85e275d44c3846009ae0161d057f36b263be9dd
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 2a13a790fe00729801a00a6897e77716a656959e4fb971fd1ff2f4172fbc5575eea9cdfbc7f1933d1063571435cc202f738a295674126d4624546ba34f788456
|
7
|
+
data.tar.gz: 0add30eb78d36e81cf1c72c1471fe1e39066b68bf12889f9031eb05ad8a36a3b73874ef08a7f01bae4a3b197a68bac5aa6a6798def04305140cbb2b561ade54e
|
data/.editorconfig
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
# EditorConfig is awesome: http://EditorConfig.org
|
2
|
+
|
3
|
+
# top-most EditorConfig file
|
4
|
+
root = true
|
5
|
+
|
6
|
+
# Unix-style newlines with a newline ending every file
|
7
|
+
[*]
|
8
|
+
end_of_line = lf
|
9
|
+
insert_final_newline = false
|
10
|
+
|
11
|
+
# Matches multiple files with brace expansion notation
|
12
|
+
# Set default charset
|
13
|
+
charset = utf-8
|
14
|
+
|
15
|
+
# Tab indentation (no size specified)
|
16
|
+
indent_style = space
|
17
|
+
indent_size = 4
|
18
|
+
|
19
|
+
# Others
|
20
|
+
trim_trailing_whitespace = true
|
data/.gitignore
ADDED
@@ -0,0 +1,66 @@
|
|
1
|
+
*.gem
|
2
|
+
*.rbc
|
3
|
+
/.config
|
4
|
+
/coverage/
|
5
|
+
/InstalledFiles
|
6
|
+
/pkg/
|
7
|
+
/spec/reports/
|
8
|
+
/spec/examples.txt
|
9
|
+
/test/tmp/
|
10
|
+
/test/version_tmp/
|
11
|
+
/tmp/
|
12
|
+
|
13
|
+
# Runtime data
|
14
|
+
.sass-cache/
|
15
|
+
*.css.map
|
16
|
+
*.sass.map
|
17
|
+
*.scss.map
|
18
|
+
|
19
|
+
# Used by dotenv library to load environment variables.
|
20
|
+
# .env
|
21
|
+
|
22
|
+
## Specific to RubyMotion:
|
23
|
+
.dat*
|
24
|
+
.repl_history
|
25
|
+
build/
|
26
|
+
*.bridgesupport
|
27
|
+
build-iPhoneOS/
|
28
|
+
build-iPhoneSimulator/
|
29
|
+
|
30
|
+
## Specific to RubyMotion (use of CocoaPods):
|
31
|
+
#
|
32
|
+
# We recommend against adding the Pods directory to your .gitignore. However
|
33
|
+
# you should judge for yourself, the pros and cons are mentioned at:
|
34
|
+
# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control
|
35
|
+
#
|
36
|
+
# vendor/Pods/
|
37
|
+
|
38
|
+
## Documentation cache and generated files:
|
39
|
+
/.yardoc/
|
40
|
+
/_yardoc/
|
41
|
+
/doc/
|
42
|
+
/rdoc/
|
43
|
+
|
44
|
+
## Environment normalization:
|
45
|
+
/.bundle/
|
46
|
+
/vendor/bundle
|
47
|
+
/lib/bundler/man/
|
48
|
+
|
49
|
+
# for a library or gem, you might want to ignore these files since the code is
|
50
|
+
# intended to run in multiple environments; otherwise, check them in:
|
51
|
+
# Gemfile.lock
|
52
|
+
# .ruby-version
|
53
|
+
# .ruby-gemset
|
54
|
+
|
55
|
+
# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
|
56
|
+
.rvmrc
|
57
|
+
|
58
|
+
# Dependency directories
|
59
|
+
node_modules
|
60
|
+
|
61
|
+
# Optional npm cache directory
|
62
|
+
.npm
|
63
|
+
|
64
|
+
# Others
|
65
|
+
.DS_Store
|
66
|
+
.idea
|
data/.npmignore
ADDED
data/.travis.yml
ADDED
data/Gemfile
ADDED
data/LICENSE
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
(The MIT License)
|
2
|
+
|
3
|
+
Copyright (c) 2018 QMUI Team (http://qmuiteam.com)
|
4
|
+
|
5
|
+
|
6
|
+
Terms of the MIT License:
|
7
|
+
--------------------------------------------------------------------
|
8
|
+
|
9
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
|
10
|
+
associated documentation files (the "Software"), to deal in the Software without restriction,
|
11
|
+
including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
|
12
|
+
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
13
|
+
|
14
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
17
|
+
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
18
|
+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
19
|
+
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
20
|
+
|
21
|
+
Other dependencies and licenses:
|
22
|
+
|
23
|
+
Open Source Software Licensed Under Apache -2.0:
|
24
|
+
----------------------------------------------------------------------------------------
|
25
|
+
1. browser-sync v. 2.18.12
|
26
|
+
Copyright (c) 2015 Shane Osbourne
|
27
|
+
|
28
|
+
Terms of the Apache -2.0 License:
|
29
|
+
--------------------------------------------------------------------
|
30
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
31
|
+
You may not use this file except in compliance with the License.
|
32
|
+
You may obtain a copy of the License at
|
33
|
+
|
34
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
35
|
+
|
36
|
+
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS,
|
37
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
38
|
+
See the License for the specific language governing permissions and limitations under the License.
|
data/QMUI_Sass.gemspec
ADDED
@@ -0,0 +1,30 @@
|
|
1
|
+
|
2
|
+
lib = File.expand_path("../lib", __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require "QMUI_Sass/version"
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "QMUI_Sass"
|
8
|
+
spec.version = QMUISass::VERSION
|
9
|
+
spec.authors = ["kayo5994"]
|
10
|
+
spec.email = ["qmuiteam@qq.com"]
|
11
|
+
|
12
|
+
spec.summary = "Sass helper of QMUI Web, dealing with layout, appearance, device adaptation, math calculation and other SASS enhancement.
|
13
|
+
"
|
14
|
+
spec.homepage = "https://qmuiteam.com/web/page/tools.html"
|
15
|
+
spec.license = "MIT"
|
16
|
+
|
17
|
+
# Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
|
18
|
+
|
19
|
+
# Specify which files should be added to the gem when it is released.
|
20
|
+
# The `git ls-files -z` loads the files in the RubyGem that have been added into git.
|
21
|
+
spec.files = Dir.chdir(File.expand_path('..', __FILE__)) do
|
22
|
+
`git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
|
23
|
+
end
|
24
|
+
spec.bindir = "exe"
|
25
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
26
|
+
spec.require_paths = ["lib"]
|
27
|
+
|
28
|
+
spec.add_development_dependency "bundler", "~> 1.17"
|
29
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
30
|
+
end
|
data/README.md
ADDED
@@ -0,0 +1,55 @@
|
|
1
|
+
<p align="center">
|
2
|
+
<img src="https://raw.githubusercontent.com/QMUI/QMUIDemo_Web/master/public/style/images/independent/BannerForGithub_2x.png" width="220" alt="Banner" />
|
3
|
+
</p>
|
4
|
+
|
5
|
+
# QMUI Sass [![Version Number](https://img.shields.io/npm/v/qmui-sass.svg?style=flat)](https://github.com/QMUI/QMUI_Sass/ "Version Number")
|
6
|
+
> Sass helper of QMUI Web, dealing with layout, appearance, device adaptation, math calculation and other SASS enhancement.
|
7
|
+
>
|
8
|
+
> Document:[http://qmuiteam.com/web/page/tools.html](http://qmuiteam.com/web/page/tools.html)
|
9
|
+
|
10
|
+
[![Build Status](https://travis-ci.org/QMUI/QMUI_Sass.svg?branch=master)](https://travis-ci.org/QMUI/QMUI_Sass "Build Status")
|
11
|
+
[![devDependencies](https://img.shields.io/david/dev/QMUI/QMUI_Sass.svg?style=flat)](https://ci.appveyor.com/project/QMUI/QMUI_Sass "devDependencies")
|
12
|
+
[![QMUI Team Name](https://img.shields.io/badge/Team-QMUI-brightgreen.svg?style=flat)](https://github.com/QMUI "QMUI Team")
|
13
|
+
[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](http://opensource.org/licenses/MIT "Feel free to contribute.")
|
14
|
+
|
15
|
+
QMUI Sass is the sass helper of [QMUI Web](https://github.com/Tencent/QMUI_Web). It ships with more than 70 SASS Mixin, Function and Extend, dealing with layout, appearance, animation, device adaptation, math calculation and other SASS enhancement, which will make your development faster and easier.
|
16
|
+
|
17
|
+
## Installation
|
18
|
+
|
19
|
+
* [Ruby on Rails](#ruby-on-rails).
|
20
|
+
* [npm / Node.js](#npm--nodejs).
|
21
|
+
|
22
|
+
### Ruby on Rails.
|
23
|
+
Add this line to your application's Gemfile:
|
24
|
+
|
25
|
+
```ruby
|
26
|
+
gem 'QMUI_Sass'
|
27
|
+
```
|
28
|
+
|
29
|
+
And then execute:
|
30
|
+
|
31
|
+
$ bundle
|
32
|
+
|
33
|
+
Or install it yourself as:
|
34
|
+
|
35
|
+
$ gem install QMUI_Sass
|
36
|
+
|
37
|
+
### d. npm / Node.js
|
38
|
+
|
39
|
+
```bash
|
40
|
+
$ npm install bootstrap-sass
|
41
|
+
```
|
42
|
+
|
43
|
+
If you use webpack, you can import QMUI Sass like so:
|
44
|
+
|
45
|
+
```sass
|
46
|
+
@import '~qmui-sass/var';
|
47
|
+
@import '~qmui-sass/qmui/qmui';
|
48
|
+
```
|
49
|
+
|
50
|
+
## Development
|
51
|
+
|
52
|
+
After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
53
|
+
|
54
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
55
|
+
|
data/Rakefile
ADDED
data/_var.scss
ADDED
@@ -0,0 +1,120 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
/**
|
3
|
+
* var.scss 变量
|
4
|
+
* @author Kayo&Clearwu
|
5
|
+
* @date 2014-11-14
|
6
|
+
*
|
7
|
+
* --- function ----
|
8
|
+
* #function QMUI 功能相关
|
9
|
+
*
|
10
|
+
* --- common ----
|
11
|
+
* #common 通用
|
12
|
+
|
13
|
+
* --- component ----
|
14
|
+
* #button 按钮组件
|
15
|
+
* #dialog 对话框组件
|
16
|
+
* #mask 遮罩层组件
|
17
|
+
* #dropdownMenu 下拉菜单组件
|
18
|
+
* #tab 选项卡组件
|
19
|
+
* #inputText、#textarea 文本输入组件
|
20
|
+
*
|
21
|
+
*/
|
22
|
+
// 计算的工具方法
|
23
|
+
@import "qmui/mixin/tool/_calculate";
|
24
|
+
|
25
|
+
// #common 通用
|
26
|
+
$common_fontFamily: "Helvetica Neue", Helvetica, Verdana, san-serif;
|
27
|
+
$common_fontSize: 14px;
|
28
|
+
$common_body_background: #FFF;
|
29
|
+
$common_body_color: #000;
|
30
|
+
$common_color_link: #2685D2;
|
31
|
+
$common_color_linkTapHighlight: rgba(105, 186, 255, .13);
|
32
|
+
$common_color_separator: #CCCCCE;
|
33
|
+
$common_color_border: $common_color_separator;
|
34
|
+
$common_color_placeholder: #ADB4BE;
|
35
|
+
$common_color_placeholderFocus: $common_color_placeholder;
|
36
|
+
$common_zIndex_1: 10;
|
37
|
+
$common_zIndex_2: 20;
|
38
|
+
$common_zIndex_3: 30;
|
39
|
+
$common_zIndex_4: 40;
|
40
|
+
$common_zIndex_5: 50;
|
41
|
+
$common_zIndex_6: 60;
|
42
|
+
$common_zIndex_7: 70;
|
43
|
+
$common_zIndex_8: 80;
|
44
|
+
$common_zIndex_9: 90;
|
45
|
+
$common_zIndex_10: 100;
|
46
|
+
|
47
|
+
// #button 按钮组件
|
48
|
+
$btn_minWidth: 46px;
|
49
|
+
$btn_height: 30px;
|
50
|
+
$btn_lineHeight: $btn_height;
|
51
|
+
$btn_padding: 0 12px;
|
52
|
+
$btn_background: #04C9E8;
|
53
|
+
$btn_border: 1px solid transparent;
|
54
|
+
$btn_fontSize: 13px;
|
55
|
+
$btn_color: #FFF;
|
56
|
+
|
57
|
+
// #dialog 对话框组件
|
58
|
+
$dialog_zIndex: $common_zIndex_10;
|
59
|
+
$dialog_minWidth: 420px; // 对话框的最小宽度
|
60
|
+
$dialog_background: #fff;
|
61
|
+
$dialog_border: none;
|
62
|
+
$dialog_radius: 5px;
|
63
|
+
|
64
|
+
$dialog_head_background: #00C0E1;
|
65
|
+
$dialog_head_borderBottom: none; // 对话框头部的下边线
|
66
|
+
|
67
|
+
$dialog_title_height: 40px;
|
68
|
+
$dialog_title_fontSize: 14px;
|
69
|
+
$dialog_title_fontWeight: bold;
|
70
|
+
$dialog_title_color: #FFF;
|
71
|
+
$dialog_title_lineHeight: $dialog_title_height;
|
72
|
+
|
73
|
+
$dialog_close_top: 5px;
|
74
|
+
$dialog_close_right: 6px;
|
75
|
+
|
76
|
+
$dialog_body_background: #fff;
|
77
|
+
|
78
|
+
$dialog_foot_background: $dialog_background; // 对话框底部的背景,默认与对话框的背景一样
|
79
|
+
$dialog_foot_borderTop: $dialog_head_borderBottom; // 对话框底部的上边线,样式默认与对话框边线一样
|
80
|
+
|
81
|
+
// #mask 遮罩层组件
|
82
|
+
$mask_zIndex: $common_zIndex_9;
|
83
|
+
$maskWrap_zIndex: $mask_zIndex;
|
84
|
+
$mask_background: #000;
|
85
|
+
$mask_opacity: .5;
|
86
|
+
|
87
|
+
// #dropdownMenu 下拉菜单组件
|
88
|
+
$dropdownMenu_zIndex: $common_zIndex_3;
|
89
|
+
$dropdownMenu_background: #fff;
|
90
|
+
$dropdownMenu_border: 1px solid $common_color_border;
|
91
|
+
$dropdownMenu_ulPadding: 12px 0;
|
92
|
+
$dropdownMenu_itemLink_height: 32px;
|
93
|
+
$dropdownMenu_itemLink_lineHeight: $dropdownMenu_itemLink_height;
|
94
|
+
$dropdownMenu_itemLink_padding: 0 15px;
|
95
|
+
$dropdownMenu_itemLink_color: #000;
|
96
|
+
$dropdownMenu_split_margin: 5px 0;
|
97
|
+
$dropdownMenu_split_borderTop: 1px solid #ccc;
|
98
|
+
|
99
|
+
// #tab 选项卡组件
|
100
|
+
$tab_background: #fff;
|
101
|
+
$tab_head_background: $tab_background;
|
102
|
+
$tabNav_padding: 0 16px;
|
103
|
+
$tabNav_item_margin: 0 24px -1px 0;
|
104
|
+
$tabNav_itemLink_height: 43px;
|
105
|
+
$tabNav_itemLink_lineHeight: $tabNav_itemLink_height;
|
106
|
+
$tabNav_itemLink_padding: 0;
|
107
|
+
$tabNav_itemLink_background: transparent;
|
108
|
+
$tabNav_itemLink_color: #858C96;
|
109
|
+
|
110
|
+
// #inputText、#textarea 文本输入组件
|
111
|
+
$textField_width: 270px;
|
112
|
+
$textField_lineHeight: 22px;
|
113
|
+
$textField_padding: 12px 16px;
|
114
|
+
$textField_background: #fff;
|
115
|
+
$textField_border: 1px solid $common_color_border;
|
116
|
+
$textField_borderRadius: 5px;
|
117
|
+
|
118
|
+
$inputText_height: $textField_lineHeight;
|
119
|
+
|
120
|
+
$textarea_height: $textField_lineHeight * 3;
|
data/bin/console
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
|
3
|
+
require "bundler/setup"
|
4
|
+
require "QMUI_Sass"
|
5
|
+
|
6
|
+
# You can add fixtures and/or initialization code here to make experimenting
|
7
|
+
# with your gem easier. You can also use a different console, if you like.
|
8
|
+
|
9
|
+
# (If you use this, don't forget to add pry to your Gemfile!)
|
10
|
+
# require "pry"
|
11
|
+
# Pry.start
|
12
|
+
|
13
|
+
require "irb"
|
14
|
+
IRB.start(__FILE__)
|
data/bin/setup
ADDED
data/lib/QMUI_Sass.rb
ADDED
data/package.json
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
{
|
2
|
+
"name": "qmui-sass",
|
3
|
+
"version": "1.1.0",
|
4
|
+
"description": "Sass helper of QMUI Web, dealing with layout, appearance, device adaptation, math calculation and other SASS enhancement.",
|
5
|
+
"repository": {
|
6
|
+
"type": "git",
|
7
|
+
"url": "git+https://github.com/QMUI/QMUI_Sass.git"
|
8
|
+
},
|
9
|
+
"style": "qmui/_qmui.scss",
|
10
|
+
"sass": "qmui/_qmui.scss",
|
11
|
+
"devDependencies": {
|
12
|
+
"node-sass": "^4.10.0",
|
13
|
+
"stylelint-wechat-work-css": "^0.4.1"
|
14
|
+
},
|
15
|
+
"keywords": [
|
16
|
+
"QMUI",
|
17
|
+
"Sass",
|
18
|
+
"Mixin"
|
19
|
+
],
|
20
|
+
"author": "QMUI Team",
|
21
|
+
"license": "MIT",
|
22
|
+
"bugs": {
|
23
|
+
"url": "https://github.com/QMUI/QMUI_Sass/issues"
|
24
|
+
},
|
25
|
+
"homepage": "http://qmuiteam.com/web/tools.html"
|
26
|
+
}
|