张小泉
12 |
13 |
73 |
83 | ...
84 | ```
85 |
86 | * 界面说明
87 | 
88 |
89 | ## Change Log
90 | - 20160820
91 | - 新增表单示例
92 | - 20160812
93 | - list示例新增项目的新增，编辑case
94 | - 20160811
95 | - 更新README.md
96 | - 20160810
97 | - 新增翻页组件
98 | - 新增表格示例
99 | - 20160808
100 | - 菜单支持折叠与隐藏
101 | - 20160805
102 | - 菜单隐藏使用动画
103 | - 页面加载支持进度条
104 | - 20161012
105 | - 整合vue-echarts
106 | - 整合百度echarts3
107 | - 实现基本图形示例
108 | - 页面F5刷新时，菜单展开错误问题修复
109 | - 20161014
110 | - 生产打包js文件生成6位数的hash
111 | - 添加运行效果
112 |
113 | ## To Do List
114 | - 报表实例：地图示例
115 |
116 | ## UI截图
117 | - 登录界面
118 | 
119 |
120 | - 表格示例
121 | 
122 |
123 | - 表单
124 | 
125 |
126 | - 基本图形
127 | 
128 |
--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
1 | // https://github.com/shelljs/shelljs
2 | require('shelljs/global')
3 | env.NODE_ENV = 'production'
4 |
5 | var path = require('path')
6 | var config = require('../config')
7 | var ora = require('ora')
8 | var webpack = require('webpack')
9 | var webpackConfig = require('./webpack.prod.conf')
10 |
11 | console.log(
12 | ' Tip:\n' +
13 | ' Built files are meant to be served over an HTTP server.\n' +
14 | ' Opening index.html over file:// won\'t work.\n'
15 | )
16 |
17 | var spinner = ora('building for production...')
18 | spinner.start()
19 |
20 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
21 | rm('-rf', assetsPath)
22 | mkdir('-p', assetsPath)
23 | cp('-R', 'static/', assetsPath)
24 |
25 | webpack(webpackConfig, function (err, stats) {
26 | spinner.stop()
27 | if (err) throw err
28 | process.stdout.write(stats.toString({
29 | colors: true,
30 | modules: false,
31 | children: false,
32 | chunks: false,
33 | chunkModules: false
34 | }) + '\n')
35 | })
36 |
--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | require('eventsource-polyfill')
3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
4 |
5 | hotClient.subscribe(function (event) {
6 | if (event.action === 'reload') {
7 | window.location.reload()
8 | }
9 | })
10 |
--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var express = require('express')
3 | var webpack = require('webpack')
4 | var config = require('../config')
5 | var proxyMiddleware = require('http-proxy-middleware')
6 | var webpackConfig = process.env.NODE_ENV === 'testing'
7 | ? require('./webpack.prod.conf')
8 | : require('./webpack.dev.conf')
9 |
10 | // default port where dev server listens for incoming traffic
11 | var port = process.env.PORT || config.dev.port
12 | // Define HTTP proxies to your custom API backend
13 | // https://github.com/chimurai/http-proxy-middleware
14 | var proxyTable = config.dev.proxyTable
15 |
16 | var app = express()
17 | var compiler = webpack(webpackConfig)
18 |
19 | var devMiddleware = require('webpack-dev-middleware')(compiler, {
20 | publicPath: webpackConfig.output.publicPath,
21 | stats: {
22 | colors: true,
23 | chunks: false
24 | }
25 | })
26 |
27 | var hotMiddleware = require('webpack-hot-middleware')(compiler)
28 | // force page reload when html-webpack-plugin template changes
29 | compiler.plugin('compilation', function (compilation) {
30 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
31 | hotMiddleware.publish({ action: 'reload' })
32 | cb()
33 | })
34 | })
35 |
36 | // proxy api requests
37 | Object.keys(proxyTable).forEach(function (context) {
38 | var options = proxyTable[context]
39 | if (typeof options === 'string') {
40 | options = { target: options }
41 | }
42 | app.use(proxyMiddleware(context, options))
43 | })
44 |
45 | // handle fallback for HTML5 history API
46 | app.use(require('connect-history-api-fallback')())
47 |
48 | // serve webpack bundle output
49 | app.use(devMiddleware)
50 |
51 | // enable hot-reload and state-preserving
52 | // compilation error display
53 | app.use(hotMiddleware)
54 |
55 | // serve pure static assets
56 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
57 | app.use(staticPath, express.static('./static'))
58 |
59 | module.exports = app.listen(port, function (err) {
60 | if (err) {
61 | console.log(err)
62 | return
63 | }
64 | console.log('Listening at http://localhost:' + port + '\n')
65 | })
66 |
--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var config = require('../config')
3 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
4 |
5 | exports.assetsPath = function (_path) {
6 | return path.posix.join(config.build.assetsSubDirectory, _path)
7 | }
8 |
9 | exports.cssLoaders = function (options) {
10 | options = options || {}
11 | // generate loader string to be used with extract text plugin
12 | function generateLoaders (loaders) {
13 | var sourceLoader = loaders.map(function (loader) {
14 | var extraParamChar
15 | if (/\?/.test(loader)) {
16 | loader = loader.replace(/\?/, '-loader?')
17 | extraParamChar = '&'
18 | } else {
19 | loader = loader + '-loader'
20 | extraParamChar = '?'
21 | }
22 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
23 | }).join('!')
24 |
25 | if (options.extract) {
26 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
27 | } else {
28 | return ['vue-style-loader', sourceLoader].join('!')
29 | }
30 | }
31 |
32 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html
33 | return {
34 | css: generateLoaders(['css']),
35 | postcss: generateLoaders(['css']),
36 | less: generateLoaders(['css', 'less']),
37 | sass: generateLoaders(['css', 'sass?indentedSyntax']),
38 | scss: generateLoaders(['css', 'sass']),
39 | stylus: generateLoaders(['css', 'stylus']),
40 | styl: generateLoaders(['css', 'stylus'])
41 | }
42 | }
43 |
44 | // Generate loaders for standalone style files (outside of .vue)
45 | exports.styleLoaders = function (options) {
46 | var output = []
47 | var loaders = exports.cssLoaders(options)
48 | for (var extension in loaders) {
49 | var loader = loaders[extension]
50 | output.push({
51 | test: new RegExp('\\.' + extension + '$'),
52 | loader: loader
53 | })
54 | }
55 | return output
56 | }
57 |
--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack')
2 | var path = require('path')
3 | var config = require('../config')
4 | var utils = require('./utils')
5 | var projectRoot = path.resolve(__dirname, '../')
6 |
7 | module.exports = {
8 | entry: {
9 | app: './src/main.js'
10 | },
11 | output: {
12 | path: config.build.assetsRoot,
13 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
14 | filename: '[name].js'
15 | },
16 | resolve: {
17 | extensions: ['', '.js', '.vue'],
18 | fallback: [path.join(__dirname, '../node_modules')],
19 | alias: {
20 | 'src': path.resolve(__dirname, '../src'),
21 | 'assets': path.resolve(__dirname, '../src/assets'),
22 | 'components': path.resolve(__dirname, '../src/components'),
23 | // 'jquery': "jquery/dist/jquery.min",
24 | 'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
25 | }
26 | },
27 | resolveLoader: {
28 | fallback: [path.join(__dirname, '../node_modules')]
29 | },
30 | module: {
31 | loaders: [
32 | {
33 | test: /\.vue$/,
34 | loader: 'vue'
35 | },
36 | {
37 | test: /\.js$/,
38 | loader: 'babel',
39 | include: projectRoot,
40 | exclude: /node_modules/
41 | },
42 | {
43 | test: /\.json$/,
44 | loader: 'json'
45 | },
46 | {
47 | test: /\.html$/,
48 | loader: 'vue-html'
49 | },
50 | {
51 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
52 | loader: 'url',
53 | query: {
54 | limit: 10000,
55 | name: utils.assetsPath('img/[name].[hash:7].[ext]')
56 | }
57 | },
58 | {
59 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
60 | loader: 'url',
61 | query: {
62 | limit: 10000,
63 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
64 | }
65 | }
66 | ]
67 | },
68 | plugins:[
69 | new webpack.ProvidePlugin({
70 | $: "jquery",
71 | jQuery: "jquery",
72 | "window.jQuery": "jquery",
73 | semantic: 'semantic-ui-css',
74 | Semantic: 'semantic-ui-css',
75 | 'semantic-ui': 'semantic-ui-css'
76 | })
77 | ],
78 | vue: {
79 | loaders: utils.cssLoaders()
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
1 | var config = require('../config')
2 | var webpack = require('webpack')
3 | var merge = require('webpack-merge')
4 | var utils = require('./utils')
5 | var baseWebpackConfig = require('./webpack.base.conf')
6 | var HtmlWebpackPlugin = require('html-webpack-plugin')
7 |
8 | // add hot-reload related code to entry chunks
9 | Object.keys(baseWebpackConfig.entry).forEach(function (name) {
10 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
11 | })
12 |
13 | module.exports = merge(baseWebpackConfig, {
14 | module: {
15 | loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
16 | },
17 | // eval-source-map is faster for development
18 | devtool: '#eval-source-map',
19 | plugins: [
20 | new webpack.DefinePlugin({
21 | 'process.env': config.dev.env
22 | }),
23 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
24 | new webpack.optimize.OccurenceOrderPlugin(),
25 | new webpack.HotModuleReplacementPlugin(),
26 | new webpack.NoErrorsPlugin(),
27 | // https://github.com/ampedandwired/html-webpack-plugin
28 | new HtmlWebpackPlugin({
29 | filename: 'index.html',
30 | template: 'index.html',
31 | inject: true
32 | })
33 | ]
34 | })
35 |
--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var config = require('../config')
3 | var utils = require('./utils')
4 | var webpack = require('webpack')
5 | var merge = require('webpack-merge')
6 | var baseWebpackConfig = require('./webpack.base.conf')
7 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
8 | var HtmlWebpackPlugin = require('html-webpack-plugin')
9 | var env = process.env.NODE_ENV === 'testing'
10 | ? require('../config/test.env')
11 | : config.build.env
12 |
13 | var webpackConfig = merge(baseWebpackConfig, {
14 | module: {
15 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
16 | },
17 | devtool: config.build.productionSourceMap ? '#source-map' : false,
18 | output: {
19 | path: config.build.assetsRoot,
20 | filename: utils.assetsPath('js/[name].[chunkhash:6].js'),
21 | chunkFilename: utils.assetsPath('js/[id].[chunkhash:6].js')
22 | },
23 | vue: {
24 | loaders: utils.cssLoaders({
25 | sourceMap: config.build.productionSourceMap,
26 | extract: true
27 | })
28 | },
29 | plugins: [
30 | // http://vuejs.github.io/vue-loader/workflow/production.html
31 | new webpack.DefinePlugin({
32 | 'process.env': env
33 | }),
34 | new webpack.optimize.UglifyJsPlugin({
35 | compress: {
36 | warnings: false
37 | }
38 | }),
39 | new webpack.optimize.OccurenceOrderPlugin(),
40 | // extract css into its own file
41 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
42 | // generate dist index.html with correct asset hash for caching.
43 | // you can customize output by editing /index.html
44 | // see https://github.com/ampedandwired/html-webpack-plugin
45 | new HtmlWebpackPlugin({
46 | filename: process.env.NODE_ENV === 'testing'
47 | ? 'index.html'
48 | : config.build.index,
49 | template: 'index.html',
50 | inject: true,
51 | minify: {
52 | removeComments: true,
53 | collapseWhitespace: true,
54 | removeAttributeQuotes: true
55 | // more options:
56 | // https://github.com/kangax/html-minifier#options-quick-reference
57 | },
58 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin
59 | chunksSortMode: 'dependency'
60 | }),
61 | // split vendor js into its own file
62 | new webpack.optimize.CommonsChunkPlugin({
63 | name: 'vendor',
64 | minChunks: function (module, count) {
65 | // any required modules inside node_modules are extracted to vendor
66 | return (
67 | module.resource &&
68 | /\.js$/.test(module.resource) &&
69 | module.resource.indexOf(
70 | path.join(__dirname, '../node_modules')
71 | ) === 0
72 | )
73 | }
74 | }),
75 | // extract webpack runtime and module manifest to its own file in order to
76 | // prevent vendor hash from being updated whenever app bundle is updated
77 | new webpack.optimize.CommonsChunkPlugin({
78 | name: 'manifest',
79 | chunks: ['vendor']
80 | })
81 | ]
82 | })
83 |
84 | if (config.build.productionGzip) {
85 | var CompressionWebpackPlugin = require('compression-webpack-plugin')
86 |
87 | webpackConfig.plugins.push(
88 | new CompressionWebpackPlugin({
89 | asset: '[path].gz[query]',
90 | algorithm: 'gzip',
91 | test: new RegExp(
92 | '\\.(' +
93 | config.build.productionGzipExtensions.join('|') +
94 | ')$'
95 | ),
96 | threshold: 10240,
97 | minRatio: 0.8
98 | })
99 | )
100 | }
101 |
102 | module.exports = webpackConfig
103 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vueadmin/vue-admin",
3 | "description": "A background manager scaffolding base Vue.js",
4 | "keywords": ["vue demo", "semantic ui", "vuex demo", "scaffolding base Vue.js"],
5 | "homepage": "https://github.com/rootsli/vueadmin",
6 | "type": "project",
7 | "license": "BSD-3-Clause",
8 | "minimum-stability": "stable",
9 | "require": {
10 | "babel-runtime": "^6.0.0",
11 | "jquery": "^2.2.3",
12 | "react-cookie": "^0.4.7",
13 | "semantic-ui-css": "^2.2.2",
14 | "vue": "^1.0.21",
15 | "vue-resource": "^0.9.3",
16 | "vue-router": "^0.7.13",
17 | "vue-validator": "^2.1.4",
18 | "vuex": "^0.8.2",
19 | "vuex-router-sync": "^1.0.1"
20 | },
21 | "require-dev": {
22 | "babel-core": "^6.0.0",
23 | "babel-loader": "^6.0.0",
24 | "babel-plugin-transform-runtime": "^6.0.0",
25 | "babel-preset-es2015": "^6.0.0",
26 | "babel-preset-stage-2": "^6.0.0",
27 | "connect-history-api-fallback": "^1.1.0",
28 | "css-loader": "^0.23.0",
29 | "eventsource-polyfill": "^0.9.6",
30 | "express": "^4.13.3",
31 | "extract-text-webpack-plugin": "^1.0.1",
32 | "file-loader": "^0.8.4",
33 | "function-bind": "^1.0.2",
34 | "html-webpack-plugin": "^2.8.1",
35 | "http-proxy-middleware": "^0.12.0",
36 | "json-loader": "^0.5.4",
37 | "karma": "^0.13.15",
38 | "karma-coverage": "^0.5.5",
39 | "karma-mocha": "^0.2.2",
40 | "karma-phantomjs-launcher": "^1.0.0",
41 | "karma-sinon-chai": "^1.2.0",
42 | "karma-sourcemap-loader": "^0.3.7",
43 | "karma-spec-reporter": "0.0.24",
44 | "karma-webpack": "^1.7.0",
45 | "lolex": "^1.4.0",
46 | "mocha": "^2.4.5",
47 | "chai": "^3.5.0",
48 | "sinon": "^1.17.3",
49 | "sinon-chai": "^2.8.0",
50 | "inject-loader": "^2.0.1",
51 | "isparta-loader": "^2.0.0",
52 | "phantomjs-prebuilt": "^2.1.3",
53 | "chromedriver": "^2.21.2",
54 | "cross-spawn": "^2.1.5",
55 | "nightwatch": "^0.8.18",
56 | "selenium-server": "2.53.0",
57 | "ora": "^0.2.0",
58 | "shelljs": "^0.6.0",
59 | "url-loader": "^0.5.7",
60 | "vue-hot-reload-api": "^1.2.0",
61 | "vue-html-loader": "^1.0.0",
62 | "vue-loader": "^8.3.0",
63 | "vue-style-loader": "^1.0.0",
64 | "webpack": "^1.12.2",
65 | "webpack-dev-middleware": "^1.4.0",
66 | "webpack-hot-middleware": "^2.6.0",
67 | "webpack-merge": "^0.8.3"
68 | },
69 | "config": {
70 | "process-timeout": 1800
71 | },
72 | "extra": {
73 | "asset-installer-paths": {
74 | "npm-asset-library": "vendor/npm",
75 | "bower-asset-library": "vendor/bower"
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 |
4 | module.exports = merge(prodEnv, {
5 | NODE_ENV: '"development"'
6 | })
7 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | // see http://vuejs-templates.github.io/webpack for documentation.
2 | var path = require('path')
3 |
4 | module.exports = {
5 | build: {
6 | env: require('./prod.env'),
7 | index: path.resolve(__dirname, '../dist/index.html'),
8 | assetsRoot: path.resolve(__dirname, '../dist'),
9 | assetsSubDirectory: 'static',
10 | assetsPublicPath: '/',
11 | productionSourceMap: true,
12 | // Gzip off by default as many popular static hosts such as
13 | // Surge or Netlify already gzip all static assets for you.
14 | // Before setting to `true`, make sure to:
15 | // npm install --save-dev compression-webpack-plugin
16 | productionGzip: false,
17 | productionGzipExtensions: ['js', 'css']
18 | },
19 | dev: {
20 | env: require('./dev.env'),
21 | port: 8080,
22 | assetsSubDirectory: 'static',
23 | assetsPublicPath: '/',
24 | proxyTable: {},
25 | // CSS Sourcemaps off by default because relative paths are "buggy"
26 | // with this option, according to the CSS-Loader README
27 | // (https://github.com/webpack/css-loader#sourcemaps)
28 | // In our experience, they generally work as expected,
29 | // just be aware of this issue when enabling this option.
30 | cssSourceMap: false,
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | NODE_ENV: '"production"'
3 | }
4 |
--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var devEnv = require('./dev.env')
3 |
4 | module.exports = merge(devEnv, {
5 | NODE_ENV: '"testing"'
6 | })
7 |
--------------------------------------------------------------------------------
/doc/img/basecharts.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/basecharts.jpg
--------------------------------------------------------------------------------
/doc/img/container-layout.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/container-layout.jpg
--------------------------------------------------------------------------------
/doc/img/custom1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/custom1.jpg
--------------------------------------------------------------------------------
/doc/img/custom2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/custom2.jpg
--------------------------------------------------------------------------------
/doc/img/custom3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/custom3.jpg
--------------------------------------------------------------------------------
/doc/img/custom4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/custom4.jpg
--------------------------------------------------------------------------------
/doc/img/form.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/form.jpg
--------------------------------------------------------------------------------
/doc/img/login.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/login.jpg
--------------------------------------------------------------------------------
/doc/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/logo.png
--------------------------------------------------------------------------------
/doc/img/main.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/img/main.jpg
--------------------------------------------------------------------------------
/doc/semantic-ui-custom.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rootsli/vueadmin/bf1f350d264fcbed681ddb4864f15d9f43813dde/doc/semantic-ui-custom.rar
--------------------------------------------------------------------------------
/doc/site.variables:
--------------------------------------------------------------------------------
1 | /*******************************
2 | Site Settings
3 | *******************************/
4 |
5 | /*-------------------
6 | Fonts
7 | --------------------*/
8 |
9 | @fontName : 'Microsoft YaHei';
10 | @fontSmoothing : antialiased;
11 |
12 | @headerFont : @fontName, STXihei, sans-serif;
13 | @pageFont : @fontName, STXihei, sans-serif;
14 |
15 | @googleFontName : @fontName;
16 | @importGoogleFonts : false;
17 | @googleFontSizes : '400,700,400italic,700italic';
18 | @googleSubset : 'latin';
19 |
20 | @googleProtocol : 'https://';
21 | @googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';
22 |
23 | /*-------------------
24 | Base Sizes
25 | --------------------*/
26 |
27 | /* This is the single variable that controls them all */
28 | @emSize : 14px;
29 |
30 | /* The size of page text */
31 | @fontSize : 14px;
32 |
33 |
34 | /*-------------------
35 | Border Radius
36 | --------------------*/
37 |
38 | /* See Power-user section below
39 | for explanation of @px variables
40 | */
41 | @relativeBorderRadius: @relative4px;
42 | @absoluteBorderRadius: @4px;
43 |
44 | @defaultBorderRadius: @absoluteBorderRadius;
45 |
46 | /*-------------------
47 | Brand Colors
48 | --------------------*/
49 |
50 | @primaryColor : @teal;
51 | @secondaryColor : @blue;
52 |
53 | @lightPrimaryColor : @lightTeal;
54 | @lightSecondaryColor : @lightBlue;
55 |
56 | /*--------------
57 | Page Heading
58 | ---------------*/
59 |
60 | @headerFontWeight : bold;
61 | @headerLineHeight : 1.2857em;
62 |
63 | @h1 : 2rem;
64 | @h2 : 1.714rem;
65 | @h3 : 1.28rem;
66 | @h4 : 1.071rem;
67 | @h5 : 1rem;
68 |
69 | /*--------------
70 | Form Input
71 | ---------------*/
72 |
73 | /* This adjusts the default form input across all elements */
74 | @inputBackground : @white;
75 | @inputVerticalPadding : @relative11px;
76 | @inputHorizontalPadding : @relative14px;
77 | @inputPadding : @inputVerticalPadding @inputHorizontalPadding;
78 |
79 | /* Input Text Color */
80 | @inputColor: @textColor;
81 | @inputPlaceholderColor: lighten(@inputColor, 75);
82 | @inputPlaceholderFocusColor: lighten(@inputColor, 45);
83 |
84 | /* Line Height Default For Inputs in Browser */
85 | @inputLineHeight: 1.2142em;
86 |
87 | /*-------------------
88 | Focused Input
89 | --------------------*/
90 |
91 | /* Used on inputs, textarea etc */
92 | @focusedFormBorderColor: #85B7D9;
93 |
94 | /* Used on dropdowns, other larger blocks */
95 | @focusedFormMutedBorderColor: #96C8DA;
96 |
97 | /*-------------------
98 | Sizes
99 | --------------------*/
100 |
101 | /*
102 | Sizes are all expressed in terms of 14px/em (default em)
103 | This ensures these "ratios" remain constant despite changes in EM
104 | */
105 |
106 | @miniSize : (11 / 14);
107 | @tinySize : (12 / 14);
108 | @smallSize : (13 / 14);
109 | @mediumSize : (14 / 14);
110 | @largeSize : (16 / 14);
111 | @bigSize : (18 / 14);
112 | @hugeSize : (20 / 14);
113 | @massiveSize : (24 / 14);
114 |
115 |
116 | /*-------------------
117 | Page
118 | --------------------*/
119 |
120 | @pageBackground : #e7eaeb;
121 | @pageOverflowX : auto;
122 |
123 | @lineHeight : 1.4285em;
124 | @textColor : #606e75;
125 |
126 | /*-------------------
127 | Paragraph
128 | --------------------*/
129 |
130 | @paragraphMargin : 0em 0em 1em;
131 | @paragraphLineHeight : @lineHeight;
132 |
133 | /*-------------------
134 | Links
135 | --------------------*/
136 |
137 | @linkColor : #4183C4;
138 | @linkUnderline : none;
139 | @linkHoverColor : darken(saturate(@linkColor, 20), 15, relative);
140 | @linkHoverUnderline : @linkUnderline;
141 |
142 | /*-------------------
143 | Highlighted Text
144 | --------------------*/
145 |
146 | @highlightBackground : #CCE2FF;
147 | @highlightColor : @textColor;
148 |
149 | @inputHighlightBackground : rgba(100, 100, 100, 0.4);
150 | @inputHighlightColor : @textColor;
151 |
152 |
153 | /*-------------------
154 | Loader
155 | --------------------*/
156 |
157 | @loaderSize : @relativeBig;
158 | @loaderSpeed : 0.6s;
159 | @loaderLineWidth : 0.2em;
160 | @loaderFillColor : rgba(0, 0, 0, 0.1);
161 | @loaderLineColor : @grey;
162 |
163 | @invertedLoaderFillColor : rgba(255, 255, 255, 0.15);
164 | @invertedLoaderLineColor : @white;
165 |
166 | /*-------------------
167 | Grid
168 | --------------------*/
169 |
170 | @columnCount: 16;
171 |
172 | /*-------------------
173 | Transitions
174 | --------------------*/
175 |
176 | @defaultDuration : 0.1s;
177 | @defaultEasing : ease;
178 |
179 | /*-------------------
180 | Breakpoints
181 | --------------------*/
182 |
183 | @mobileBreakpoint : 320px;
184 | @tabletBreakpoint : 768px;
185 | @computerBreakpoint : 992px;
186 | @largeMonitorBreakpoint : 1200px;
187 | @widescreenMonitorBreakpoint : 1920px;
188 |
189 | /*-------------------
190 | Site Colors
191 | --------------------*/
192 |
193 | /*--- Colors ---*/
194 | @red : #DB2828;
195 | @orange : #F2711C;
196 | @yellow : #FBBD08;
197 | @olive : #B5CC18;
198 | @green : #21BA45;
199 | @teal : #00B5AD;
200 | @blue : #2185D0;
201 | @violet : #6435C9;
202 | @purple : #A333C8;
203 | @pink : #E03997;
204 | @brown : #A5673F;
205 | @grey : #767676;
206 | @black : #1B1C1D;
207 |
208 | /*--- Light Colors ---*/
209 | @lightRed : #FF695E;
210 | @lightOrange : #FF851B;
211 | @lightYellow : #FFE21F;
212 | @lightOlive : #D9E778;
213 | @lightGreen : #2ECC40;
214 | @lightTeal : #6DFFFF;
215 | @lightBlue : #54C8FF;
216 | @lightViolet : #A291FB;
217 | @lightPurple : #DC73FF;
218 | @lightPink : #FF8EDF;
219 | @lightBrown : #D67C1C;
220 | @lightGrey : #DCDDDE;
221 | @lightBlack : #545454;
222 |
223 | /*--- Neutrals ---*/
224 | @fullBlack : #000000;
225 | @offWhite : #F9FAFB;
226 | @darkWhite : #F3F4F5;
227 | @midWhite : #DCDDDE;
228 | @white : #FFFFFF;
229 |
230 | /*--- Colored Backgrounds ---*/
231 | @redBackground : #FFE8E6;
232 | @orangeBackground : #FFEDDE;
233 | @yellowBackground : #FFF8DB;
234 | @oliveBackground : #FBFDEF;
235 | @greenBackground : #E5F9E7;
236 | @tealBackground : #E1F7F7;
237 | @blueBackground : #DFF0FF;
238 | @violetBackground : #EAE7FF;
239 | @purpleBackground : #F6E7FF;
240 | @pinkBackground : #FFE3FB;
241 | @brownBackground : #F1E2D3;
242 |
243 | /*--- Colored Headers ---*/
244 | @redHeaderColor : darken(@redTextColor, 5);
245 | @oliveHeaderColor : darken(@oliveTextColor, 5);
246 | @greenHeaderColor : darken(@greenTextColor, 5);
247 | @yellowHeaderColor : darken(@yellowTextColor, 5);
248 | @blueHeaderColor : darken(@blueTextColor, 5);
249 | @tealHeaderColor : darken(@tealTextColor, 5);
250 | @pinkHeaderColor : darken(@pinkTextColor, 5);
251 | @violetHeaderColor : darken(@violetTextColor, 5);
252 | @purpleHeaderColor : darken(@purpleTextColor, 5);
253 | @orangeHeaderColor : darken(@orangeTextColor, 5);
254 | @brownHeaderColor : darken(@brownTextColor, 5);
255 |
256 | /*--- Colored Text ---*/
257 | @redTextColor : @red;
258 | @orangeTextColor : @orange;
259 | @yellowTextColor : #B58105; // Yellow text is difficult to read
260 | @oliveTextColor : #8ABC1E; // Olive is difficult to read
261 | @greenTextColor : #1EBC30; // Green is difficult to read
262 | @tealTextColor : #10A3A3; // Teal text is difficult to read
263 | @blueTextColor : @blue;
264 | @violetTextColor : @violet;
265 | @purpleTextColor : @purple;
266 | @pinkTextColor : @pink;
267 | @brownTextColor : @brown;
268 |
269 | /*--- Colored Border ---*/
270 | @redBorderColor : @redTextColor;
271 | @orangeBorderColor : @orangeTextColor;
272 | @yellowBorderColor : @yellowTextColor;
273 | @oliveBorderColor : @oliveTextColor;
274 | @greenBorderColor : @greenTextColor;
275 | @tealBorderColor : @tealTextColor;
276 | @blueBorderColor : @blueTextColor;
277 | @violetBorderColor : @violetTextColor;
278 | @purpleBorderColor : @purpleTextColor;
279 | @pinkBorderColor : @pinkTextColor;
280 | @brownBorderColor : @brownTextColor;
281 |
282 | /*-------------------
283 | Alpha Colors
284 | --------------------*/
285 |
286 | @subtleTransparentBlack : rgba(0, 0, 0, 0.03);
287 | @transparentBlack : rgba(0, 0, 0, 0.05);
288 | @strongTransparentBlack : rgba(0, 0, 0, 0.10);
289 | @veryStrongTransparentBlack : rgba(0, 0, 0, 0.15);
290 |
291 | @subtleTransparentWhite : rgba(255, 255, 255, 0.02);
292 | @transparentWhite : rgba(255, 255, 255, 0.08);
293 | @strongTransparentWhite : rgba(255, 255, 255, 0.15);
294 |
295 | /*-------------------
296 | Accents
297 | --------------------*/
298 |
299 | /* Differentiating Neutrals */
300 | @subtleGradient: linear-gradient(transparent, @transparentBlack);
301 |
302 | /* Differentiating Layers */
303 | @subtleShadow:
304 | 0px 1px 2px 0 @borderColor
305 | ;
306 | @floatingShadow:
307 | 0px 2px 4px 0px rgba(34, 36, 38, 0.12),
308 | 0px 2px 10px 0px rgba(34, 36, 38, 0.15)
309 | ;
310 |
311 | /*******************************
312 | Power-User
313 | *******************************/
314 |
315 |
316 | /*-------------------
317 | Emotive Colors
318 | --------------------*/
319 |
320 | /* Positive */
321 | @positiveColor : @green;
322 | @positiveBackgroundColor : #FCFFF5;
323 | @positiveBorderColor : #A3C293;
324 | @positiveHeaderColor : #1A531B;
325 | @positiveTextColor : #2C662D;
326 |
327 | /* Negative */
328 | @negativeColor : @red;
329 | @negativeBackgroundColor : #FFF6F6;
330 | @negativeBorderColor : #E0B4B4;
331 | @negativeHeaderColor : #912D2B;
332 | @negativeTextColor : #9F3A38;
333 |
334 | /* Info */
335 | @infoColor : #31CCEC;
336 | @infoBackgroundColor : #F8FFFF;
337 | @infoBorderColor : #A9D5DE;
338 | @infoHeaderColor : #0E566C;
339 | @infoTextColor : #276F86;
340 |
341 | /* Warning */
342 | @warningColor : #F2C037;
343 | @warningBorderColor : #C9BA9B;
344 | @warningBackgroundColor : #FFFAF3;
345 | @warningHeaderColor : #794B02;
346 | @warningTextColor : #573A08;
347 |
348 | /*-------------------
349 | Paths
350 | --------------------*/
351 |
352 | /* For source only. Modified in gulp for dist */
353 | @imagePath : '../../themes/default/assets/images';
354 | @fontPath : '../../themes/default/assets/fonts';
355 |
356 | /*-------------------
357 | Em Sizes
358 | --------------------*/
359 |
360 | /*
361 | This rounds @size values to the closest pixel then expresses that value in (r)em.
362 | This ensures all size values round to exact pixels
363 | */
364 | @mini : unit( round(@miniSize * @emSize) / @emSize, rem);
365 | @tiny : unit( round(@tinySize * @emSize) / @emSize, rem);
366 | @small : unit( round(@smallSize * @emSize) / @emSize, rem);
367 | @medium : unit( round(@mediumSize * @emSize) / @emSize, rem);
368 | @large : unit( round(@largeSize * @emSize) / @emSize, rem);
369 | @big : unit( round(@bigSize * @emSize) / @emSize, rem);
370 | @huge : unit( round(@hugeSize * @emSize) / @emSize, rem);
371 | @massive : unit( round(@massiveSize * @emSize) / @emSize, rem);
372 |
373 | /* em */
374 | @relativeMini : unit( round(@miniSize * @emSize) / @emSize, em);
375 | @relativeTiny : unit( round(@tinySize * @emSize) / @emSize, em);
376 | @relativeSmall : unit( round(@smallSize * @emSize) / @emSize, em);
377 | @relativeMedium : unit( round(@mediumSize * @emSize) / @emSize, em);
378 | @relativeLarge : unit( round(@largeSize * @emSize) / @emSize, em);
379 | @relativeBig : unit( round(@bigSize * @emSize) / @emSize, em);
380 | @relativeHuge : unit( round(@hugeSize * @emSize) / @emSize, em);
381 | @relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em);
382 |
383 | /* rem */
384 | @absoluteMini : unit( round(@miniSize * @emSize) / @emSize, rem);
385 | @absoluteTiny : unit( round(@tinySize * @emSize) / @emSize, rem);
386 | @absoluteSmall : unit( round(@smallSize * @emSize) / @emSize, rem);
387 | @absoluteMedium : unit( round(@mediumSize * @emSize) / @emSize, rem);
388 | @absoluteLarge : unit( round(@largeSize * @emSize) / @emSize, rem);
389 | @absoluteBig : unit( round(@bigSize * @emSize) / @emSize, rem);
390 | @absoluteHuge : unit( round(@hugeSize * @emSize) / @emSize, rem);
391 | @absoluteMassive : unit( round(@massiveSize * @emSize) / @emSize, rem);
392 |
393 | /*-------------------
394 | Icons
395 | --------------------*/
396 |
397 | /* Maximum Glyph Width of Icon */
398 | @iconWidth : 1.18em;
399 |
400 | /*-------------------
401 | Neutral Text
402 | --------------------*/
403 |
404 | @darkTextColor : rgba(0, 0, 0, 0.85);
405 | @mutedTextColor : rgba(0, 0, 0, 0.6);
406 | @lightTextColor : rgba(0, 0, 0, 0.4);
407 |
408 | @unselectedTextColor : rgba(0, 0, 0, 0.4);
409 | @hoveredTextColor : rgba(0, 0, 0, 0.8);
410 | @pressedTextColor : rgba(0, 0, 0, 0.9);
411 | @selectedTextColor : rgba(0, 0, 0, 0.95);
412 | @disabledTextColor : rgba(0, 0, 0, 0.2);
413 |
414 | @invertedTextColor : rgba(255, 255, 255, 0.9);
415 | @invertedMutedTextColor : rgba(255, 255, 255, 0.8);
416 | @invertedLightTextColor : rgba(255, 255, 255, 0.7);
417 | @invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
418 | @invertedHoveredTextColor : rgba(255, 255, 255, 1);
419 | @invertedPressedTextColor : rgba(255, 255, 255, 1);
420 | @invertedSelectedTextColor : rgba(255, 255, 255, 1);
421 | @invertedDisabledTextColor : rgba(255, 255, 255, 0.2);
422 |
423 | /*-------------------
424 | Brand Colors
425 | --------------------*/
426 |
427 | @facebookColor : #3B5998;
428 | @twitterColor : #0084B4;
429 | @googlePlusColor : #DC4A38;
430 | @linkedInColor : #1F88BE;
431 | @youtubeColor : #CC181E;
432 | @instagramColor : #49769C;
433 | @pinterestColor : #00ACED;
434 | @vkColor : #4D7198;
435 |
436 | /*-------------------
437 | Borders
438 | --------------------*/
439 |
440 | @circularRadius : 500rem;
441 |
442 | @borderColor : rgba(34, 36, 38, 0.15);
443 | @strongBorderColor : rgba(34, 36, 38, 0.22);
444 | @internalBorderColor : rgba(34, 36, 38, 0.1);
445 | @selectedBorderColor : rgba(34, 36, 38, 0.35);
446 | @strongSelectedBorderColor : rgba(34, 36, 38, 0.5);
447 | @disabledBorderColor : rgba(34, 36, 38, 0.5);
448 |
449 | @solidInternalBorderColor : #FAFAFA;
450 | @solidBorderColor : #D4D4D5;
451 | @solidSelectedBorderColor : #BCBDBD;
452 |
453 | @whiteBorderColor : rgba(255, 255, 255, 0.1);
454 | @selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
455 |
456 | @solidWhiteBorderColor : #555555;
457 | @selectedSolidWhiteBorderColor : #999999;
458 |
459 |
460 | /*-------------------
461 | Derived Values
462 | --------------------*/
463 |
464 | /* Loaders Position Offset */
465 | @loaderOffset : -(@loaderSize / 2);
466 | @loaderMargin : @loaderOffset 0em 0em @loaderOffset;
467 |
468 | /* Rendered Scrollbar Width */
469 | @scrollbarWidth: 17px;
470 |
471 | /* Maximum Single Character Glyph Width, aka Capital "W" */
472 | @glyphWidth: 1.1em;
473 |
474 | /* Used to match floats with text */
475 | @lineHeightOffset : ((@lineHeight - 1em) / 2);
476 | @headerLineHeightOffset : (@headerLineHeight - 1em) / 2;
477 |
478 | /* Header Spacing */
479 | @headerTopMargin : ~"calc(2rem - "@headerLineHeightOffset~")";
480 | @headerBottomMargin : 1rem;
481 | @headerMargin : @headerTopMargin 0em @headerBottomMargin;
482 |
483 | /* Minimum Mobile Width */
484 | @pageMinWidth : 320px;
485 |
486 | /* Positive / Negative Dupes */
487 | @successBackgroundColor : @positiveBackgroundColor;
488 | @successColor : @positiveColor;
489 | @successBorderColor : @positiveBorderColor;
490 | @successHeaderColor : @positiveHeaderColor;
491 | @successTextColor : @positiveTextColor;
492 |
493 | @errorBackgroundColor : @negativeBackgroundColor;
494 | @errorColor : @negativeColor;
495 | @errorBorderColor : @negativeBorderColor;
496 | @errorHeaderColor : @negativeHeaderColor;
497 | @errorTextColor : @negativeTextColor;
498 |
499 |
500 | /* Responsive */
501 | @largestMobileScreen : (@tabletBreakpoint - 1px);
502 | @largestTabletScreen : (@computerBreakpoint - 1px);
503 | @largestSmallMonitor : (@largeMonitorBreakpoint - 1px);
504 | @largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);
505 |
506 |
507 | /*-------------------
508 | Exact Pixel Values
509 | --------------------*/
510 | /*
511 | These are used to specify exact pixel values in em
512 | for things like borders that remain constantly
513 | sized as emSize adjusts
514 |
515 | Since there are many more sizes than names for sizes,
516 | these are named by their original pixel values.
517 |
518 | */
519 |
520 | @1px : unit( (1 / @emSize), rem);
521 | @2px : unit( (2 / @emSize), rem);
522 | @3px : unit( (3 / @emSize), rem);
523 | @4px : unit( (4 / @emSize), rem);
524 | @5px : unit( (5 / @emSize), rem);
525 | @6px : unit( (6 / @emSize), rem);
526 | @7px : unit( (7 / @emSize), rem);
527 | @8px : unit( (8 / @emSize), rem);
528 | @9px : unit( (9 / @emSize), rem);
529 | @10px : unit( (10 / @emSize), rem);
530 | @11px : unit( (11 / @emSize), rem);
531 | @12px : unit( (12 / @emSize), rem);
532 | @13px : unit( (13 / @emSize), rem);
533 | @14px : unit( (14 / @emSize), rem);
534 | @15px : unit( (15 / @emSize), rem);
535 | @16px : unit( (16 / @emSize), rem);
536 | @17px : unit( (17 / @emSize), rem);
537 | @18px : unit( (18 / @emSize), rem);
538 | @19px : unit( (19 / @emSize), rem);
539 | @20px : unit( (20 / @emSize), rem);
540 | @21px : unit( (21 / @emSize), rem);
541 | @22px : unit( (22 / @emSize), rem);
542 | @23px : unit( (23 / @emSize), rem);
543 | @24px : unit( (24 / @emSize), rem);
544 | @25px : unit( (25 / @emSize), rem);
545 | @26px : unit( (26 / @emSize), rem);
546 | @27px : unit( (27 / @emSize), rem);
547 | @28px : unit( (28 / @emSize), rem);
548 | @29px : unit( (29 / @emSize), rem);
549 | @30px : unit( (30 / @emSize), rem);
550 | @31px : unit( (31 / @emSize), rem);
551 | @32px : unit( (32 / @emSize), rem);
552 | @33px : unit( (33 / @emSize), rem);
553 | @34px : unit( (34 / @emSize), rem);
554 | @35px : unit( (35 / @emSize), rem);
555 | @36px : unit( (36 / @emSize), rem);
556 | @37px : unit( (37 / @emSize), rem);
557 | @38px : unit( (38 / @emSize), rem);
558 | @39px : unit( (39 / @emSize), rem);
559 | @40px : unit( (40 / @emSize), rem);
560 | @41px : unit( (41 / @emSize), rem);
561 | @42px : unit( (42 / @emSize), rem);
562 | @43px : unit( (43 / @emSize), rem);
563 | @44px : unit( (44 / @emSize), rem);
564 | @45px : unit( (45 / @emSize), rem);
565 | @46px : unit( (46 / @emSize), rem);
566 | @47px : unit( (47 / @emSize), rem);
567 | @48px : unit( (48 / @emSize), rem);
568 | @49px : unit( (49 / @emSize), rem);
569 | @50px : unit( (50 / @emSize), rem);
570 | @51px : unit( (51 / @emSize), rem);
571 | @52px : unit( (52 / @emSize), rem);
572 | @53px : unit( (53 / @emSize), rem);
573 | @54px : unit( (54 / @emSize), rem);
574 | @55px : unit( (55 / @emSize), rem);
575 | @56px : unit( (56 / @emSize), rem);
576 | @57px : unit( (57 / @emSize), rem);
577 | @58px : unit( (58 / @emSize), rem);
578 | @59px : unit( (59 / @emSize), rem);
579 | @60px : unit( (60 / @emSize), rem);
580 | @61px : unit( (61 / @emSize), rem);
581 | @62px : unit( (62 / @emSize), rem);
582 | @63px : unit( (63 / @emSize), rem);
583 | @64px : unit( (64 / @emSize), rem);
584 |
585 | @relative1px : unit( (1 / @emSize), em);
586 | @relative2px : unit( (2 / @emSize), em);
587 | @relative3px : unit( (3 / @emSize), em);
588 | @relative4px : unit( (4 / @emSize), em);
589 | @relative5px : unit( (5 / @emSize), em);
590 | @relative6px : unit( (6 / @emSize), em);
591 | @relative7px : unit( (7 / @emSize), em);
592 | @relative8px : unit( (8 / @emSize), em);
593 | @relative9px : unit( (9 / @emSize), em);
594 | @relative10px : unit( (10 / @emSize), em);
595 | @relative11px : unit( (11 / @emSize), em);
596 | @relative12px : unit( (12 / @emSize), em);
597 | @relative13px : unit( (13 / @emSize), em);
598 | @relative14px : unit( (14 / @emSize), em);
599 | @relative15px : unit( (15 / @emSize), em);
600 | @relative16px : unit( (16 / @emSize), em);
601 | @relative17px : unit( (17 / @emSize), em);
602 | @relative18px : unit( (18 / @emSize), em);
603 | @relative19px : unit( (19 / @emSize), em);
604 | @relative20px : unit( (20 / @emSize), em);
605 | @relative21px : unit( (21 / @emSize), em);
606 | @relative22px : unit( (22 / @emSize), em);
607 | @relative23px : unit( (23 / @emSize), em);
608 | @relative24px : unit( (24 / @emSize), em);
609 | @relative25px : unit( (25 / @emSize), em);
610 | @relative26px : unit( (26 / @emSize), em);
611 | @relative27px : unit( (27 / @emSize), em);
612 | @relative28px : unit( (28 / @emSize), em);
613 | @relative29px : unit( (29 / @emSize), em);
614 | @relative30px : unit( (30 / @emSize), em);
615 | @relative31px : unit( (31 / @emSize), em);
616 | @relative32px : unit( (32 / @emSize), em);
617 | @relative33px : unit( (33 / @emSize), em);
618 | @relative34px : unit( (34 / @emSize), em);
619 | @relative35px : unit( (35 / @emSize), em);
620 | @relative36px : unit( (36 / @emSize), em);
621 | @relative37px : unit( (37 / @emSize), em);
622 | @relative38px : unit( (38 / @emSize), em);
623 | @relative39px : unit( (39 / @emSize), em);
624 | @relative40px : unit( (40 / @emSize), em);
625 | @relative41px : unit( (41 / @emSize), em);
626 | @relative42px : unit( (42 / @emSize), em);
627 | @relative43px : unit( (43 / @emSize), em);
628 | @relative44px : unit( (44 / @emSize), em);
629 | @relative45px : unit( (45 / @emSize), em);
630 | @relative46px : unit( (46 / @emSize), em);
631 | @relative47px : unit( (47 / @emSize), em);
632 | @relative48px : unit( (48 / @emSize), em);
633 | @relative49px : unit( (49 / @emSize), em);
634 | @relative50px : unit( (50 / @emSize), em);
635 | @relative51px : unit( (51 / @emSize), em);
636 | @relative52px : unit( (52 / @emSize), em);
637 | @relative53px : unit( (53 / @emSize), em);
638 | @relative54px : unit( (54 / @emSize), em);
639 | @relative55px : unit( (55 / @emSize), em);
640 | @relative56px : unit( (56 / @emSize), em);
641 | @relative57px : unit( (57 / @emSize), em);
642 | @relative58px : unit( (58 / @emSize), em);
643 | @relative59px : unit( (59 / @emSize), em);
644 | @relative60px : unit( (60 / @emSize), em);
645 | @relative61px : unit( (61 / @emSize), em);
646 | @relative62px : unit( (62 / @emSize), em);
647 | @relative63px : unit( (63 / @emSize), em);
648 | @relative64px : unit( (64 / @emSize), em);
649 |
650 | /* Columns */
651 | @oneWide : (1 / @columnCount * 100%);
652 | @twoWide : (2 / @columnCount * 100%);
653 | @threeWide : (3 / @columnCount * 100%);
654 | @fourWide : (4 / @columnCount * 100%);
655 | @fiveWide : (5 / @columnCount * 100%);
656 | @sixWide : (6 / @columnCount * 100%);
657 | @sevenWide : (7 / @columnCount * 100%);
658 | @eightWide : (8 / @columnCount * 100%);
659 | @nineWide : (9 / @columnCount * 100%);
660 | @tenWide : (10 / @columnCount * 100%);
661 | @elevenWide : (11 / @columnCount * 100%);
662 | @twelveWide : (12 / @columnCount * 100%);
663 | @thirteenWide : (13 / @columnCount * 100%);
664 | @fourteenWide : (14 / @columnCount * 100%);
665 | @fifteenWide : (15 / @columnCount * 100%);
666 | @sixteenWide : (16 / @columnCount * 100%);
667 |
668 | @oneColumn : (1 / 1 * 100%);
669 | @twoColumn : (1 / 2 * 100%);
670 | @threeColumn : (1 / 3 * 100%);
671 | @fourColumn : (1 / 4 * 100%);
672 | @fiveColumn : (1 / 5 * 100%);
673 | @sixColumn : (1 / 6 * 100%);
674 | @sevenColumn : (1 / 7 * 100%);
675 | @eightColumn : (1 / 8 * 100%);
676 | @nineColumn : (1 / 9 * 100%);
677 | @tenColumn : (1 / 10 * 100%);
678 | @elevenColumn : (1 / 11 * 100%);
679 | @twelveColumn : (1 / 12 * 100%);
680 | @thirteenColumn : (1 / 13 * 100%);
681 | @fourteenColumn : (1 / 14 * 100%);
682 | @fifteenColumn : (1 / 15 * 100%);
683 | @sixteenColumn : (1 / 16 * 100%);
684 |
685 |
686 | /*******************************
687 | States
688 | *******************************/
689 |
690 | /*-------------------
691 | Disabled
692 | --------------------*/
693 |
694 | @disabledOpacity: 0.45;
695 | @disabledTextColor: rgba(40, 40, 40, 0.3);
696 | @invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
697 |
698 | /*-------------------
699 | Hover
700 | --------------------*/
701 |
702 | /*--- Shadows ---*/
703 | @floatingShadowHover:
704 | 0px 2px 4px 0px rgba(34, 36, 38, 0.15),
705 | 0px 2px 10px 0px rgba(34, 36, 38, 0.25)
706 | ;
707 |
708 | /*--- Colors ---*/
709 | @primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative);
710 | @secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative);
711 |
712 | @redHover : saturate(darken(@red, 5), 10, relative);
713 | @orangeHover : saturate(darken(@orange, 5), 10, relative);
714 | @yellowHover : saturate(darken(@yellow, 5), 10, relative);
715 | @oliveHover : saturate(darken(@olive, 5), 10, relative);
716 | @greenHover : saturate(darken(@green, 5), 10, relative);
717 | @tealHover : saturate(darken(@teal, 5), 10, relative);
718 | @blueHover : saturate(darken(@blue, 5), 10, relative);
719 | @violetHover : saturate(darken(@violet, 5), 10, relative);
720 | @purpleHover : saturate(darken(@purple, 5), 10, relative);
721 | @pinkHover : saturate(darken(@pink, 5), 10, relative);
722 | @brownHover : saturate(darken(@brown, 5), 10, relative);
723 |
724 | @lightRedHover : saturate(darken(@lightRed, 5), 10, relative);
725 | @lightOrangeHover : saturate(darken(@lightOrange, 5), 10, relative);
726 | @lightYellowHover : saturate(darken(@lightYellow, 5), 10, relative);
727 | @lightOliveHover : saturate(darken(@lightOlive, 5), 10, relative);
728 | @lightGreenHover : saturate(darken(@lightGreen, 5), 10, relative);
729 | @lightTealHover : saturate(darken(@lightTeal, 5), 10, relative);
730 | @lightBlueHover : saturate(darken(@lightBlue, 5), 10, relative);
731 | @lightVioletHover : saturate(darken(@lightViolet, 5), 10, relative);
732 | @lightPurpleHover : saturate(darken(@lightPurple, 5), 10, relative);
733 | @lightPinkHover : saturate(darken(@lightPink, 5), 10, relative);
734 | @lightBrownHover : saturate(darken(@lightBrown, 5), 10, relative);
735 | @lightGreyHover : saturate(darken(@lightGrey, 5), 10, relative);
736 | @lightBlackHover : saturate(darken(@fullBlack, 5), 10, relative);
737 |
738 | /*--- Emotive ---*/
739 | @positiveColorHover : saturate(darken(@positiveColor, 5), 10, relative);
740 | @negativeColorHover : saturate(darken(@negativeColor, 5), 10, relative);
741 |
742 | /*--- Brand ---*/
743 | @facebookHoverColor : saturate(darken(@facebookColor, 5), 10, relative);
744 | @twitterHoverColor : saturate(darken(@twitterColor, 5), 10, relative);
745 | @googlePlusHoverColor : saturate(darken(@googlePlusColor, 5), 10, relative);
746 | @linkedInHoverColor : saturate(darken(@linkedInColor, 5), 10, relative);
747 | @youtubeHoverColor : saturate(darken(@youtubeColor, 5), 10, relative);
748 | @instagramHoverColor : saturate(darken(@instagramColor, 5), 10, relative);
749 | @pinterestHoverColor : saturate(darken(@pinterestColor, 5), 10, relative);
750 | @vkHoverColor : saturate(darken(@vkColor, 5), 10, relative);
751 |
752 | /*--- Dark Tones ---*/
753 | @fullBlackHover : lighten(@fullBlack, 5);
754 | @blackHover : lighten(@black, 5);
755 | @greyHover : lighten(@grey, 5);
756 |
757 | /*--- Light Tones ---*/
758 | @whiteHover : darken(@white, 5);
759 | @offWhiteHover : darken(@offWhite, 5);
760 | @darkWhiteHover : darken(@darkWhite, 5);
761 |
762 | /*-------------------
763 | Focus
764 | --------------------*/
765 |
766 | /*--- Colors ---*/
767 | @primaryColorFocus : saturate(darken(@primaryColor, 8), 20, relative);
768 | @secondaryColorFocus : saturate(lighten(@secondaryColor, 8), 20, relative);
769 |
770 | @redFocus : saturate(darken(@red, 8), 20, relative);
771 | @orangeFocus : saturate(darken(@orange, 8), 20, relative);
772 | @yellowFocus : saturate(darken(@yellow, 8), 20, relative);
773 | @oliveFocus : saturate(darken(@olive, 8), 20, relative);
774 | @greenFocus : saturate(darken(@green, 8), 20, relative);
775 | @tealFocus : saturate(darken(@teal, 8), 20, relative);
776 | @blueFocus : saturate(darken(@blue, 8), 20, relative);
777 | @violetFocus : saturate(darken(@violet, 8), 20, relative);
778 | @purpleFocus : saturate(darken(@purple, 8), 20, relative);
779 | @pinkFocus : saturate(darken(@pink, 8), 20, relative);
780 | @brownFocus : saturate(darken(@brown, 8), 20, relative);
781 |
782 | @lightRedFocus : saturate(darken(@lightRed, 8), 20, relative);
783 | @lightOrangeFocus : saturate(darken(@lightOrange, 8), 20, relative);
784 | @lightYellowFocus : saturate(darken(@lightYellow, 8), 20, relative);
785 | @lightOliveFocus : saturate(darken(@lightOlive, 8), 20, relative);
786 | @lightGreenFocus : saturate(darken(@lightGreen, 8), 20, relative);
787 | @lightTealFocus : saturate(darken(@lightTeal, 8), 20, relative);
788 | @lightBlueFocus : saturate(darken(@lightBlue, 8), 20, relative);
789 | @lightVioletFocus : saturate(darken(@lightViolet, 8), 20, relative);
790 | @lightPurpleFocus : saturate(darken(@lightPurple, 8), 20, relative);
791 | @lightPinkFocus : saturate(darken(@lightPink, 8), 20, relative);
792 | @lightBrownFocus : saturate(darken(@lightBrown, 8), 20, relative);
793 | @lightGreyFocus : saturate(darken(@lightGrey, 8), 20, relative);
794 | @lightBlackFocus : saturate(darken(@fullBlack, 8), 20, relative);
795 |
796 | /*--- Emotive ---*/
797 | @positiveColorFocus : saturate(darken(@positiveColor, 8), 20, relative);
798 | @negativeColorFocus : saturate(darken(@negativeColor, 8), 20, relative);
799 |
800 | /*--- Brand ---*/
801 | @facebookFocusColor : saturate(darken(@facebookColor, 8), 20, relative);
802 | @twitterFocusColor : saturate(darken(@twitterColor, 8), 20, relative);
803 | @googlePlusFocusColor : saturate(darken(@googlePlusColor, 8), 20, relative);
804 | @linkedInFocusColor : saturate(darken(@linkedInColor, 8), 20, relative);
805 | @youtubeFocusColor : saturate(darken(@youtubeColor, 8), 20, relative);
806 | @instagramFocusColor : saturate(darken(@instagramColor, 8), 20, relative);
807 | @pinterestFocusColor : saturate(darken(@pinterestColor, 8), 20, relative);
808 | @vkFocusColor : saturate(darken(@vkColor, 8), 20, relative);
809 |
810 | /*--- Dark Tones ---*/
811 | @fullBlackFocus : lighten(@fullBlack, 8);
812 | @blackFocus : lighten(@black, 8);
813 | @greyFocus : lighten(@grey, 8);
814 |
815 | /*--- Light Tones ---*/
816 | @whiteFocus : darken(@white, 8);
817 | @offWhiteFocus : darken(@offWhite, 8);
818 | @darkWhiteFocus : darken(@darkWhite, 8);
819 |
820 |
821 | /*-------------------
822 | Down (:active)
823 | --------------------*/
824 |
825 | /*--- Colors ---*/
826 | @primaryColorDown : darken(@primaryColor, 10);
827 | @secondaryColorDown : lighten(@secondaryColor, 10);
828 |
829 | @redDown : darken(@red, 10);
830 | @orangeDown : darken(@orange, 10);
831 | @yellowDown : darken(@yellow, 10);
832 | @oliveDown : darken(@olive, 10);
833 | @greenDown : darken(@green, 10);
834 | @tealDown : darken(@teal, 10);
835 | @blueDown : darken(@blue, 10);
836 | @violetDown : darken(@violet, 10);
837 | @purpleDown : darken(@purple, 10);
838 | @pinkDown : darken(@pink, 10);
839 | @brownDown : darken(@brown, 10);
840 |
841 | @lightRedDown : darken(@lightRed, 10);
842 | @lightOrangeDown : darken(@lightOrange, 10);
843 | @lightYellowDown : darken(@lightYellow, 10);
844 | @lightOliveDown : darken(@lightOlive, 10);
845 | @lightGreenDown : darken(@lightGreen, 10);
846 | @lightTealDown : darken(@lightTeal, 10);
847 | @lightBlueDown : darken(@lightBlue, 10);
848 | @lightVioletDown : darken(@lightViolet, 10);
849 | @lightPurpleDown : darken(@lightPurple, 10);
850 | @lightPinkDown : darken(@lightPink, 10);
851 | @lightBrownDown : darken(@lightBrown, 10);
852 | @lightGreyDown : darken(@lightGrey, 10);
853 | @lightBlackDown : darken(@fullBlack, 10);
854 |
855 | /*--- Emotive ---*/
856 | @positiveColorDown : darken(@positiveColor, 10);
857 | @negativeColorDown : darken(@negativeColor, 10);
858 |
859 | /*--- Brand ---*/
860 | @facebookDownColor : darken(@facebookColor, 10);
861 | @twitterDownColor : darken(@twitterColor, 10);
862 | @googlePlusDownColor : darken(@googlePlusColor, 10);
863 | @linkedInDownColor : darken(@linkedInColor, 10);
864 | @youtubeDownColor : darken(@youtubeColor, 10);
865 | @instagramDownColor : darken(@instagramColor, 10);
866 | @pinterestDownColor : darken(@pinterestColor, 10);
867 | @vkDownColor : darken(@vkColor, 10);
868 |
869 | /*--- Dark Tones ---*/
870 | @fullBlackDown : lighten(@fullBlack, 10);
871 | @blackDown : lighten(@black, 10);
872 | @greyDown : lighten(@grey, 10);
873 |
874 | /*--- Light Tones ---*/
875 | @whiteDown : darken(@white, 10);
876 | @offWhiteDown : darken(@offWhite, 10);
877 | @darkWhiteDown : darken(@darkWhite, 10);
878 |
879 |
880 | /*-------------------
881 | Active
882 | --------------------*/
883 |
884 | /*--- Colors ---*/
885 | @primaryColorActive : saturate(darken(@primaryColor, 5), 15, relative);
886 | @secondaryColorActive : saturate(lighten(@secondaryColor, 5), 15, relative);
887 |
888 | @redActive : saturate(darken(@red, 5), 15, relative);
889 | @orangeActive : saturate(darken(@orange, 5), 15, relative);
890 | @yellowActive : saturate(darken(@yellow, 5), 15, relative);
891 | @oliveActive : saturate(darken(@olive, 5), 15, relative);
892 | @greenActive : saturate(darken(@green, 5), 15, relative);
893 | @tealActive : saturate(darken(@teal, 5), 15, relative);
894 | @blueActive : saturate(darken(@blue, 5), 15, relative);
895 | @violetActive : saturate(darken(@violet, 5), 15, relative);
896 | @purpleActive : saturate(darken(@purple, 5), 15, relative);
897 | @pinkActive : saturate(darken(@pink, 5), 15, relative);
898 | @brownActive : saturate(darken(@brown, 5), 15, relative);
899 |
900 | @lightRedActive : saturate(darken(@lightRed, 5), 15, relative);
901 | @lightOrangeActive : saturate(darken(@lightOrange, 5), 15, relative);
902 | @lightYellowActive : saturate(darken(@lightYellow, 5), 15, relative);
903 | @lightOliveActive : saturate(darken(@lightOlive, 5), 15, relative);
904 | @lightGreenActive : saturate(darken(@lightGreen, 5), 15, relative);
905 | @lightTealActive : saturate(darken(@lightTeal, 5), 15, relative);
906 | @lightBlueActive : saturate(darken(@lightBlue, 5), 15, relative);
907 | @lightVioletActive : saturate(darken(@lightViolet, 5), 15, relative);
908 | @lightPurpleActive : saturate(darken(@lightPurple, 5), 15, relative);
909 | @lightPinkActive : saturate(darken(@lightPink, 5), 15, relative);
910 | @lightBrownActive : saturate(darken(@lightBrown, 5), 15, relative);
911 | @lightGreyActive : saturate(darken(@lightGrey, 5), 15, relative);
912 | @lightBlackActive : saturate(darken(@fullBlack, 5), 15, relative);
913 |
914 | /*--- Emotive ---*/
915 | @positiveColorActive : saturate(darken(@positiveColor, 5), 15, relative);
916 | @negativeColorActive : saturate(darken(@negativeColor, 5), 15, relative);
917 |
918 | /*--- Brand ---*/
919 | @facebookActiveColor : saturate(darken(@facebookColor, 5), 15, relative);
920 | @twitterActiveColor : saturate(darken(@twitterColor, 5), 15, relative);
921 | @googlePlusActiveColor : saturate(darken(@googlePlusColor, 5), 15, relative);
922 | @linkedInActiveColor : saturate(darken(@linkedInColor, 5), 15, relative);
923 | @youtubeActiveColor : saturate(darken(@youtubeColor, 5), 15, relative);
924 | @instagramActiveColor : saturate(darken(@instagramColor, 5), 15, relative);
925 | @pinterestActiveColor : saturate(darken(@pinterestColor, 5), 15, relative);
926 | @vkActiveColor : saturate(darken(@vkColor, 5), 15, relative);
927 |
928 | /*--- Dark Tones ---*/
929 | @fullBlackActive : darken(@fullBlack, 5);
930 | @blackActive : darken(@black, 5);
931 | @greyActive : darken(@grey, 5);
932 |
933 | /*--- Light Tones ---*/
934 | @whiteActive : darken(@white, 5);
935 | @offWhiteActive : darken(@offWhite, 5);
936 | @darkWhiteActive : darken(@darkWhite, 5);
937 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 标题
74 |
75 |
82 |
76 |
77 |
78 |
79 |
80 |
81 |
5 |
64 |
65 |
94 |
--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
1 |
2 | 表单示例
6 |
7 |
62 |
63 |
3 |
4 |
5 |
6 |
7 | 
8 |
9 |
20 |
8 |
9 |
10 |
19 |
11 | 张小泉
12 |
13 |
14 |
18 | 张小泉
12 |
13 |
21 |
22 |
25 |
31 |
32 |
101 |
197 |
207 |
--------------------------------------------------------------------------------
/src/components/List.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
26 |
27 |
28 |
30 |
5 |
67 | 表格示例
6 |
7 |
20 |
21 |
65 |
66 |
8 |
10 | 数据加载中，请稍后...
9 |
11 |
19 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | | 标题 | 23 |标题 | 24 |标题 | 25 |操作 | 26 |
|---|---|---|---|
| Cell | 31 |Cell | 32 |Cell | 33 |34 | 修改 35 | 删除 36 | | 37 |
| Cell | 40 |Cell | 41 |Cell | 42 |43 | 修改 44 | 删除 45 | | 46 |
| Cell | 49 |Cell | 50 |Cell | 51 |52 | 修改 53 | 删除 54 | | 55 |
|
60 | |
62 | |||
3 |
42 |
43 |
71 |
80 |
--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
1 |
2 | {{isEdit?'修改项目':'新增项目'}}
4 |
5 |
36 |
37 |
38 |
39 |
40 |
41 |
3 |
30 |
31 |
66 |
83 |
--------------------------------------------------------------------------------
/src/components/Page1.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
27 |
28 |
29 |
5 | 
6 | 登录
7 |
8 |
5 |
18 |
19 |
47 |
--------------------------------------------------------------------------------
/src/components/Page2.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Page1 Semantic UI demo
6 |
7 |
9 |
10 | this is Page1
8 |
11 |
17 | 屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试屏幕边界测试
12 |
13 |
14 |
15 |
16 |
5 |
8 |
9 |
31 |
--------------------------------------------------------------------------------
/src/components/Pagination.vue:
--------------------------------------------------------------------------------
1 |
2 | this is Page2
6 | 跳转到页面1
7 | 共{{totalItem}}条数据，每页显示
3 |
8 | 条数据
9 |
10 |
17 |
18 |
115 |
--------------------------------------------------------------------------------
/src/components/charts/Bar.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
35 |
36 |
41 |
69 |
--------------------------------------------------------------------------------
/src/components/charts/Bubble.vue:
--------------------------------------------------------------------------------
1 |
2 | 基本图形（更多图形请参考vue-echarts及百度echarts）
6 |
7 |
34 |
8 |
33 |
9 |
20 |
10 |
14 |
11 |
13 |
15 |
19 |
16 |
18 |
21 |
32 |
22 |
26 |
23 |
25 |
27 |
31 |
28 |
30 |