diff --git a/ctf-frontend/.babelrc b/ctf-frontend/.babelrc new file mode 100644 index 0000000..7cda411 --- /dev/null +++ b/ctf-frontend/.babelrc @@ -0,0 +1,13 @@ +{ + "presets": [ + ["env", { + "modules": false + }], + "stage-2" + ], + "plugins": ["transform-runtime"], + "env": { + "test": { + "presets": ["env", "stage-2"] } + } +} diff --git a/ctf-frontend/.editorconfig b/ctf-frontend/.editorconfig new file mode 100644 index 0000000..9d08a1a --- /dev/null +++ b/ctf-frontend/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/ctf-frontend/.gitignore b/ctf-frontend/.gitignore new file mode 100644 index 0000000..541a820 --- /dev/null +++ b/ctf-frontend/.gitignore @@ -0,0 +1,14 @@ +.DS_Store +node_modules/ +/dist/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln diff --git a/ctf-frontend/.postcssrc.js b/ctf-frontend/.postcssrc.js new file mode 100644 index 0000000..249472d --- /dev/null +++ b/ctf-frontend/.postcssrc.js @@ -0,0 +1,9 @@ +// https://github.com/michael-ciniawsky/postcss-load-config + +module.exports = { + "plugins": { + // to edit target browsers: use "browserslist" field in package.json + "postcss-import": {}, + "autoprefixer": {} + } +} diff --git a/ctf-frontend/README.md b/ctf-frontend/README.md new file mode 100644 index 0000000..87c927c --- /dev/null +++ b/ctf-frontend/README.md @@ -0,0 +1,21 @@ +# ctf-frontend + +> UFML ctf cources frontend + +## Build Setup + +``` bash +# install dependencies with Yarn (yarnpkg.com) +yarn + +# serve with hot reload at localhost:8080 +npm run dev + +# build for production with minification +npm run build + +# build for production and view the bundle analyzer report +npm run build --report +``` + +For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). diff --git a/ctf-frontend/build/build.js b/ctf-frontend/build/build.js new file mode 100644 index 0000000..30f036a --- /dev/null +++ b/ctf-frontend/build/build.js @@ -0,0 +1,41 @@ +'use strict' +require('./check-versions')() + +process.env.NODE_ENV = 'production' + +const ora = require('ora') +const rm = require('rimraf') +const path = require('path') +const chalk = require('chalk') +const webpack = require('webpack') +const config = require('../config') +const webpackConfig = require('./webpack.prod.conf') + +const spinner = ora('building for production...') +spinner.start() + +rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { + if (err) throw err + webpack(webpackConfig, function (err, stats) { + spinner.stop() + if (err) throw err + process.stdout.write(stats.toString({ + colors: true, + modules: false, + children: false, + chunks: false, + chunkModules: false + }) + '\n\n') + + if (stats.hasErrors()) { + console.log(chalk.red(' Build failed with errors.\n')) + process.exit(1) + } + + console.log(chalk.cyan(' Build complete.\n')) + console.log(chalk.yellow( + ' Tip: built files are meant to be served over an HTTP server.\n' + + ' Opening index.html over file:// won\'t work.\n' + )) + }) +}) diff --git a/ctf-frontend/build/check-versions.js b/ctf-frontend/build/check-versions.js new file mode 100644 index 0000000..ca407bb --- /dev/null +++ b/ctf-frontend/build/check-versions.js @@ -0,0 +1,49 @@ +'use strict' +const chalk = require('chalk') +const semver = require('semver') +const packageConfig = require('../package.json') +const shell = require('shelljs') +function exec (cmd) { + return require('child_process').execSync(cmd).toString().trim() +} + +const versionRequirements = [ + { + name: 'node', + currentVersion: semver.clean(process.version), + versionRequirement: packageConfig.engines.node + } +] + +if (shell.which('npm')) { + versionRequirements.push({ + name: 'npm', + currentVersion: exec('npm --version'), + versionRequirement: packageConfig.engines.npm + }) +} + +module.exports = function () { + const warnings = [] + for (let i = 0; i < versionRequirements.length; i++) { + const mod = versionRequirements[i] + if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { + warnings.push(mod.name + ': ' + + chalk.red(mod.currentVersion) + ' should be ' + + chalk.green(mod.versionRequirement) + ) + } + } + + if (warnings.length) { + console.log('') + console.log(chalk.yellow('To use this template, you must update following to modules:')) + console.log() + for (let i = 0; i < warnings.length; i++) { + const warning = warnings[i] + console.log(' ' + warning) + } + console.log() + process.exit(1) + } +} diff --git a/ctf-frontend/build/logo.png b/ctf-frontend/build/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/ctf-frontend/build/logo.png differ diff --git a/ctf-frontend/build/utils.js b/ctf-frontend/build/utils.js new file mode 100644 index 0000000..27f4bea --- /dev/null +++ b/ctf-frontend/build/utils.js @@ -0,0 +1,98 @@ +'use strict' +const path = require('path') +const config = require('../config') +const ExtractTextPlugin = require('extract-text-webpack-plugin') +const pkg = require('../package.json') + +exports.assetsPath = function (_path) { + const assetsSubDirectory = process.env.NODE_ENV === 'production' + ? config.build.assetsSubDirectory + : config.dev.assetsSubDirectory + return path.posix.join(assetsSubDirectory, _path) +} + +exports.cssLoaders = function (options) { + options = options || {} + + const cssLoader = { + loader: 'css-loader', + options: { + sourceMap: options.sourceMap + } + } + + var postcssLoader = { + loader: 'postcss-loader', + options: { + sourceMap: options.sourceMap + } + } + + // generate loader string to be used with extract text plugin + function generateLoaders (loader, loaderOptions) { + const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] + if (loader) { + loaders.push({ + loader: loader + '-loader', + options: Object.assign({}, loaderOptions, { + sourceMap: options.sourceMap + }) + }) + } + + // Extract CSS when that option is specified + // (which is the case during production build) + if (options.extract) { + return ExtractTextPlugin.extract({ + use: loaders, + fallback: 'vue-style-loader' + }) + } else { + return ['vue-style-loader'].concat(loaders) + } + } + + // https://vue-loader.vuejs.org/en/configurations/extract-css.html + return { + css: generateLoaders(), + postcss: generateLoaders(), + less: generateLoaders('less'), + sass: generateLoaders('sass', { indentedSyntax: true }), + scss: generateLoaders('sass'), + stylus: generateLoaders('stylus'), + styl: generateLoaders('stylus') + } +} + +// Generate loaders for standalone style files (outside of .vue) +exports.styleLoaders = function (options) { + const output = [] + const loaders = exports.cssLoaders(options) + for (const extension in loaders) { + const loader = loaders[extension] + output.push({ + test: new RegExp('\\.' + extension + '$'), + use: loader + }) + } + return output +} + +exports.createNotifierCallback = function () { + const notifier = require('node-notifier') + + return (severity, errors) => { + if (severity !== 'error') { + return + } + const error = errors[0] + + const filename = error.file.split('!').pop() + notifier.notify({ + title: pkg.name, + message: severity + ': ' + error.name, + subtitle: filename || '', + icon: path.join(__dirname, 'logo.png') + }) + } +} diff --git a/ctf-frontend/build/vue-loader.conf.js b/ctf-frontend/build/vue-loader.conf.js new file mode 100644 index 0000000..d2ece8f --- /dev/null +++ b/ctf-frontend/build/vue-loader.conf.js @@ -0,0 +1,22 @@ +'use strict' +const utils = require('./utils') +const config = require('../config') +const isProduction = process.env.NODE_ENV === 'production' +const sourceMapEnabled = isProduction + ? config.build.productionSourceMap + : config.dev.cssSourceMap + + +module.exports = { + loaders: utils.cssLoaders({ + sourceMap: sourceMapEnabled, + extract: isProduction + }), + cssSourceMap: sourceMapEnabled, + transformToRequire: { + video: 'src', + source: 'src', + img: 'src', + image: 'xlink:href' + } +} diff --git a/ctf-frontend/build/webpack.base.conf.js b/ctf-frontend/build/webpack.base.conf.js new file mode 100644 index 0000000..4d25261 --- /dev/null +++ b/ctf-frontend/build/webpack.base.conf.js @@ -0,0 +1,68 @@ +'use strict' +const path = require('path') +const utils = require('./utils') +const config = require('../config') +const vueLoaderConfig = require('./vue-loader.conf') + +function resolve (dir) { + return path.join(__dirname, '..', dir) +} + +module.exports = { + context: path.resolve(__dirname, '../'), + entry: { + app: './src/main.js' + }, + output: { + path: config.build.assetsRoot, + filename: '[name].js', + publicPath: process.env.NODE_ENV === 'production' + ? config.build.assetsPublicPath + : config.dev.assetsPublicPath + }, + resolve: { + extensions: ['.js', '.vue', '.json'], + alias: { + 'vue$': 'vue/dist/vue.esm.js', + '@': resolve('src'), + } + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: vueLoaderConfig + }, + { + test: /\.js$/, + loader: 'babel-loader', + include: [resolve('src'), resolve('test')] + }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('img/[name].[hash:7].[ext]') + } + }, + { + test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('media/[name].[hash:7].[ext]') + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + } + } + ] + } +} diff --git a/ctf-frontend/build/webpack.dev.conf.js b/ctf-frontend/build/webpack.dev.conf.js new file mode 100644 index 0000000..d344b96 --- /dev/null +++ b/ctf-frontend/build/webpack.dev.conf.js @@ -0,0 +1,77 @@ +'use strict' +const utils = require('./utils') +const webpack = require('webpack') +const config = require('../config') +const merge = require('webpack-merge') +const baseWebpackConfig = require('./webpack.base.conf') +const HtmlWebpackPlugin = require('html-webpack-plugin') +const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') +const portfinder = require('portfinder') + +const devWebpackConfig = merge(baseWebpackConfig, { + module: { + rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) + }, + // cheap-module-eval-source-map is faster for development + devtool: config.dev.devtool, + + // these devServer options should be customized in /config/index.js + devServer: { + clientLogLevel: 'warning', + historyApiFallback: true, + hot: true, + host: process.env.HOST || config.dev.host, + port: process.env.PORT || config.dev.port, + open: config.dev.autoOpenBrowser, + overlay: config.dev.errorOverlay ? { + warnings: false, + errors: true, + } : false, + publicPath: config.dev.assetsPublicPath, + proxy: config.dev.proxyTable, + quiet: true, // necessary for FriendlyErrorsPlugin + watchOptions: { + poll: config.dev.poll, + } + }, + plugins: [ + new webpack.DefinePlugin({ + 'process.env': require('../config/dev.env') + }), + new webpack.HotModuleReplacementPlugin(), + new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. + new webpack.NoEmitOnErrorsPlugin(), + // https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: 'index.html', + template: 'index.html', + inject: true + }), + ] +}) + +module.exports = new Promise((resolve, reject) => { + portfinder.basePort = process.env.PORT || config.dev.port + portfinder.getPort((err, port) => { + if (err) { + reject(err) + } else { + // publish the new Port, necessary for e2e tests + process.env.PORT = port + // add port to devServer config + devWebpackConfig.devServer.port = port + + // Add FriendlyErrorsPlugin + devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ + compilationSuccessInfo: { + messages: [`Your application is running here: http://${config.dev.host}:${port}`], + }, + onErrors: config.dev.notifyOnErrors + ? utils.createNotifierCallback() + : undefined + })) + + resolve(devWebpackConfig) + } + }) +}) diff --git a/ctf-frontend/build/webpack.prod.conf.js b/ctf-frontend/build/webpack.prod.conf.js new file mode 100644 index 0000000..712868c --- /dev/null +++ b/ctf-frontend/build/webpack.prod.conf.js @@ -0,0 +1,142 @@ +'use strict' +const path = require('path') +const utils = require('./utils') +const webpack = require('webpack') +const config = require('../config') +const merge = require('webpack-merge') +const baseWebpackConfig = require('./webpack.base.conf') +const CopyWebpackPlugin = require('copy-webpack-plugin') +const HtmlWebpackPlugin = require('html-webpack-plugin') +const ExtractTextPlugin = require('extract-text-webpack-plugin') +const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') + +const env = require('../config/prod.env') + +const webpackConfig = merge(baseWebpackConfig, { + module: { + rules: utils.styleLoaders({ + sourceMap: config.build.productionSourceMap, + extract: true, + usePostCSS: true + }) + }, + devtool: config.build.productionSourceMap ? config.build.devtool : false, + output: { + path: config.build.assetsRoot, + filename: utils.assetsPath('js/[name].[chunkhash].js'), + chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') + }, + plugins: [ + // http://vuejs.github.io/vue-loader/en/workflow/production.html + new webpack.DefinePlugin({ + 'process.env': env + }), + // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false + }, + sourceMap: config.build.productionSourceMap, + parallel: true + }), + // extract css into its own file + new ExtractTextPlugin({ + filename: utils.assetsPath('css/[name].[contenthash].css'), + // set the following option to `true` if you want to extract CSS from + // codesplit chunks into this main css file as well. + // This will result in *all* of your app's CSS being loaded upfront. + allChunks: false, + }), + // Compress extracted CSS. We are using this plugin so that possible + // duplicated CSS from different components can be deduped. + new OptimizeCSSPlugin({ + cssProcessorOptions: config.build.productionSourceMap + ? { safe: true, map: { inline: false } } + : { safe: true } + }), + // generate dist index.html with correct asset hash for caching. + // you can customize output by editing /index.html + // see https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: config.build.index, + template: 'index.html', + inject: true, + minify: { + removeComments: true, + collapseWhitespace: true, + removeAttributeQuotes: true + // more options: + // https://github.com/kangax/html-minifier#options-quick-reference + }, + // necessary to consistently work with multiple chunks via CommonsChunkPlugin + chunksSortMode: 'dependency' + }), + // keep module.id stable when vender modules does not change + new webpack.HashedModuleIdsPlugin(), + // enable scope hoisting + new webpack.optimize.ModuleConcatenationPlugin(), + // split vendor js into its own file + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: function (module) { + // any required modules inside node_modules are extracted to vendor + return ( + module.resource && + /\.js$/.test(module.resource) && + module.resource.indexOf( + path.join(__dirname, '../node_modules') + ) === 0 + ) + } + }), + // extract webpack runtime and module manifest to its own file in order to + // prevent vendor hash from being updated whenever app bundle is updated + new webpack.optimize.CommonsChunkPlugin({ + name: 'manifest', + minChunks: Infinity + }), + // This instance extracts shared chunks from code splitted chunks and bundles them + // in a separate chunk, similar to the vendor chunk + // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk + new webpack.optimize.CommonsChunkPlugin({ + name: 'app', + async: 'vendor-async', + children: true, + minChunks: 3 + }), + + // copy custom static assets + new CopyWebpackPlugin([ + { + from: path.resolve(__dirname, '../static'), + to: config.build.assetsSubDirectory, + ignore: ['.*'] + } + ]) + ] +}) + +if (config.build.productionGzip) { + const CompressionWebpackPlugin = require('compression-webpack-plugin') + + webpackConfig.plugins.push( + new CompressionWebpackPlugin({ + asset: '[path].gz[query]', + algorithm: 'gzip', + test: new RegExp( + '\\.(' + + config.build.productionGzipExtensions.join('|') + + ')$' + ), + threshold: 10240, + minRatio: 0.8 + }) + ) +} + +if (config.build.bundleAnalyzerReport) { + const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin + webpackConfig.plugins.push(new BundleAnalyzerPlugin()) +} + +module.exports = webpackConfig diff --git a/ctf-frontend/config/dev.env.js b/ctf-frontend/config/dev.env.js new file mode 100644 index 0000000..1e22973 --- /dev/null +++ b/ctf-frontend/config/dev.env.js @@ -0,0 +1,7 @@ +'use strict' +const merge = require('webpack-merge') +const prodEnv = require('./prod.env') + +module.exports = merge(prodEnv, { + NODE_ENV: '"development"' +}) diff --git a/ctf-frontend/config/index.js b/ctf-frontend/config/index.js new file mode 100644 index 0000000..cb24cb8 --- /dev/null +++ b/ctf-frontend/config/index.js @@ -0,0 +1,81 @@ +'use strict' +// Template version: 1.2.3 +// see http://vuejs-templates.github.io/webpack for documentation. + +const path = require('path') + +module.exports = { + dev: { + + // Paths + assetsSubDirectory: 'static', + assetsPublicPath: '/', + proxyTable: {}, + + // Various Dev Server settings + host: 'localhost', // can be overwritten by process.env.HOST + port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined + autoOpenBrowser: false, + errorOverlay: true, + notifyOnErrors: true, + poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- + + // Use Eslint Loader? + // If true, your code will be linted during bundling and + // linting errors and warnings will be shown in the console. + useEslint: true, + // If true, eslint errors and warnings will also be shown in the error overlay + // in the browser. + showEslintErrorsInOverlay: false, + + /** + * Source Maps + */ + + // https://webpack.js.org/configuration/devtool/#development + devtool: 'eval-source-map', + + // If you have problems debugging vue-files in devtools, + // set this to false - it *may* help + // https://vue-loader.vuejs.org/en/options.html#cachebusting + cacheBusting: true, + + // CSS Sourcemaps off by default because relative paths are "buggy" + // with this option, according to the CSS-Loader README + // (https://github.com/webpack/css-loader#sourcemaps) + // In our experience, they generally work as expected, + // just be aware of this issue when enabling this option. + cssSourceMap: false, + }, + + build: { + // Template for index.html + index: path.resolve(__dirname, '../dist/index.html'), + + // Paths + assetsRoot: path.resolve(__dirname, '../dist'), + assetsSubDirectory: 'static', + assetsPublicPath: '/', + + /** + * Source Maps + */ + + productionSourceMap: true, + // https://webpack.js.org/configuration/devtool/#production + devtool: '#source-map', + + // Gzip off by default as many popular static hosts such as + // Surge or Netlify already gzip all static assets for you. + // Before setting to `true`, make sure to: + // npm install --save-dev compression-webpack-plugin + productionGzip: false, + productionGzipExtensions: ['js', 'css'], + + // Run the build command with an extra argument to + // View the bundle analyzer report after build finishes: + // `npm run build --report` + // Set to `true` or `false` to always turn it on or off + bundleAnalyzerReport: process.env.npm_config_report + } +} diff --git a/ctf-frontend/config/prod.env.js b/ctf-frontend/config/prod.env.js new file mode 100644 index 0000000..a6f9976 --- /dev/null +++ b/ctf-frontend/config/prod.env.js @@ -0,0 +1,4 @@ +'use strict' +module.exports = { + NODE_ENV: '"production"' +} diff --git a/ctf-frontend/element-variables.scss b/ctf-frontend/element-variables.scss new file mode 100644 index 0000000..0bcc381 --- /dev/null +++ b/ctf-frontend/element-variables.scss @@ -0,0 +1,710 @@ +/* Element Chalk Variables */ + +/* Transition +-------------------------- */ +$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default; +$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; +$--fade-linear-transition: opacity 200ms linear !default; +$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms !default; +$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default; +$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; + +/* Colors +-------------------------- */ +$--color-white: #fff !default; +$--color-black: #000 !default; + +$--color-primary: #409EFF !default; +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ + +$--color-success: #67c23a !default; +$--color-warning: #eb9e05 !default; +$--color-danger: #fa5555 !default; +$--color-info: #878d99 !default; + +$--color-success-light: mix($--color-white, $--color-success, 80%) !default; +$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; +$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; +$--color-info-light: mix($--color-white, $--color-info, 80%) !default; + +$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; +$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; +$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; +$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; + +$--color-text-primary: #2d2f33 !default; +$--color-text-regular: #5a5e66 !default; +$--color-text-secondary: #878d99 !default; +$--color-text-placeholder: #b4bccc !default; + +/* Link +-------------------------- */ +$--link-color: $--color-primary-light-2 !default; +$--link-hover-color: $--color-primary !default; + +/* Background +-------------------------- */ +$--background-color-base: #f5f7fa !default; + +/* Border +-------------------------- */ +$--border-width-base: 1px !default; +$--border-style-base: solid !default; +$--border-color-base: #d8dce5 !default; +$--border-color-light: #dfe4ed !default; +$--border-color-lighter: #e6ebf5 !default; +$--border-color-extra-light: #edf2fc !default; +$--border-color-hover: $--color-text-placeholder !default; +$--border-base: $--border-width-base $--border-style-base $--border-color-base !default; +$--border-radius-base: 4px !default; +$--border-radius-small: 2px !default; +$--border-radius-circle: 100% !default; + +/* Box-shadow +-------------------------- */ +$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; +$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default; +$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; + +/* Fill +-------------------------- */ +$--fill-base: $--color-white !default; + +/* Font +-------------------------- */ +$--font-path: 'fonts' !default; +$--font-size-base: 14px !default; +$--font-size-small: 13px !default; +$--font-size-large: 18px !default; +$--font-color-disabled-base: #bbb !default; +$--font-weight-primary: 500 !default; +$--font-line-height-primary: 24px !default; + +/* Size +-------------------------- */ +$--size-base: 14px !default; + +/* z-index +-------------------------- */ +$--index-normal: 1 !default; +$--index-top: 1000 !default; +$--index-popper: 2000 !default; + +/* Disable base +-------------------------- */ +$--disabled-fill-base: $--background-color-base !default; +$--disabled-color-base: $--color-text-placeholder !default; +$--disabled-border-base: $--border-color-light !default; + +/* Icon +-------------------------- */ +$--icon-color: #666 !default; +$--icon-color-base: $--color-info !default; + +/* Checkbox +-------------------------- */ +$--checkbox-font-size: 14px !default; +$--checkbox-font-weight: $--font-weight-primary !default; +$--checkbox-color: $--color-text-regular !default; +$--checkbox-input-height: 14px !default; +$--checkbox-input-width: 14px !default; +$--checkbox-input-border-radius: $--border-radius-small !default; +$--checkbox-input-fill: $--color-white !default; +$--checkbox-input-border: $--border-base !default; +$--checkbox-input-border-color: $--border-color-base !default; +$--checkbox-icon-color: $--color-white !default; + +$--checkbox-disabled-input-border-color: $--border-color-base !default; +$--checkbox-disabled-input-fill: #edf2fc !default; +$--checkbox-disabled-icon-color: $--color-text-placeholder !default; + +$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default; +$--checkbox-disabled-checked-input-border-color: $--border-color-base !default; +$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default; + +$--checkbox-checked-text-color: $--color-primary !default; +$--checkbox-checked-input-border-color: $--color-primary !default; +$--checkbox-checked-input-fill: $--color-primary !default; +$--checkbox-checked-icon-color: $--fill-base !default; + +$--checkbox-input-border-color-hover: $--color-primary !default; + +$--checkbox-bordered-height: 40px !default; +$--checkbox-bordered-padding: 9px 20px 9px 10px !default; +$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; +$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default; +$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default; +$--checkbox-bordered-medium-input-height: 14px !default; +$--checkbox-bordered-medium-input-width: 14px !default; +$--checkbox-bordered-medium-height: 36px !default; +$--checkbox-bordered-small-input-height: 12px !default; +$--checkbox-bordered-small-input-width: 12px !default; +$--checkbox-bordered-small-height: 32px !default; +$--checkbox-bordered-mini-input-height: 12px !default; +$--checkbox-bordered-mini-input-width: 12px !default; +$--checkbox-bordered-mini-height: 28px !default; + +$--checkbox-button-font-size: $--font-size-base !default; +$--checkbox-button-checked-fill: $--color-primary !default; +$--checkbox-button-checked-color: $--color-white !default; +$--checkbox-button-checked-border-color: $--color-primary !default; + + + +/* Radio +-------------------------- */ +$--radio-font-size: 14px !default; +$--radio-font-weight: $--font-weight-primary !default; +$--radio-color: $--color-text-regular !default; +$--radio-input-height: 14px !default; +$--radio-input-width: 14px !default; +$--radio-input-border-radius: $--border-radius-circle !default; +$--radio-input-fill: $--color-white !default; +$--radio-input-border: $--border-base !default; +$--radio-input-border-color: $--border-color-base !default; +$--radio-icon-color: $--color-white !default; + +$--radio-disabled-input-border-color: $--disabled-border-base !default; +$--radio-disabled-input-fill: $--disabled-fill-base !default; +$--radio-disabled-icon-color: $--disabled-fill-base !default; + +$--radio-disabled-checked-input-border-color: $--disabled-border-base !default; +$--radio-disabled-checked-input-fill: $--disabled-fill-base !default; +$--radio-disabled-checked-icon-color: $--color-text-placeholder !default; + +$--radio-checked-text-color: $--color-primary !default; +$--radio-checked-input-border-color: $--color-primary !default; +$--radio-checked-input-fill: $--color-white !default; +$--radio-checked-icon-color: $--color-primary !default; + +$--radio-input-border-color-hover: $--color-primary !default; + +$--radio-bordered-height: 40px !default; +$--radio-bordered-padding: 12px 20px 0 10px !default; +$--radio-bordered-medium-padding: 10px 20px 0 10px !default; +$--radio-bordered-small-padding: 8px 15px 0 10px !default; +$--radio-bordered-mini-padding: 6px 15px 0 10px !default; +$--radio-bordered-medium-input-height: 14px !default; +$--radio-bordered-medium-input-width: 14px !default; +$--radio-bordered-medium-height: 36px !default; +$--radio-bordered-small-input-height: 12px !default; +$--radio-bordered-small-input-width: 12px !default; +$--radio-bordered-small-height: 32px !default; +$--radio-bordered-mini-input-height: 12px !default; +$--radio-bordered-mini-input-width: 12px !default; +$--radio-bordered-mini-height: 28px !default; + +$--radio-button-font-size: $--font-size-base !default; +$--radio-button-checked-fill: $--color-primary !default; +$--radio-button-checked-color: $--color-white !default; +$--radio-button-checked-border-color: $--color-primary !default; +$--radio-button-disabled-checked-fill: $--border-color-extra-light !default; + +/* Select +-------------------------- */ +$--select-border-color-hover: $--border-color-hover !default; +$--select-disabled-border: $--disabled-border-base !default; +$--select-font-size: $--font-size-base !default; +$--select-close-hover-color: $--color-text-secondary !default; + +$--select-input-color: $--color-text-placeholder !default; +$--select-multiple-input-color: #666 !default; +$--select-input-focus-background: $--color-primary !default; +$--select-input-font-size: 14px !default; + +$--select-option-color: $--color-text-regular !default; +$--select-option-disabled-color: $--color-text-placeholder !default; +$--select-option-disabled-background: $--color-white !default; +$--select-option-height: 34px !default; +$--select-option-hover-background: $--background-color-base !default; +$--select-option-selected: $--color-primary !default; +$--select-option-selected-hover: $--background-color-base !default; + +$--select-group-color: $--color-info !default; +$--select-group-height: 30px !default; +$--select-group-font-size: 12px !default; + +$--select-dropdown-background: $--color-white !default; +$--select-dropdown-shadow: $--box-shadow-light !default; +$--select-dropdown-empty-color: #999 !default; +$--select-dropdown-max-height: 274px !default; +$--select-dropdown-padding: 6px 0 !default; +$--select-dropdown-empty-padding: 10px 0 !default; +$--select-dropdown-border: solid 1px $--border-color-light !default; + +/* Alert +-------------------------- */ +$--alert-padding: 8px 16px !default; +$--alert-border-radius: $--border-radius-base !default; +$--alert-title-font-size: 13px !default; +$--alert-description-font-size: 12px !default; +$--alert-close-font-size: 12px !default; +$--alert-close-customed-font-size: 13px !default; + +$--alert-success-color: $--color-success-lighter !default; +$--alert-info-color: $--color-info-lighter !default; +$--alert-warning-color: $--color-warning-lighter !default; +$--alert-danger-color: $--color-danger-lighter !default; + +$--alert-icon-size: 16px !default; +$--alert-icon-large-size: 28px !default; + +/* Message Box +-------------------------- */ +$--msgbox-width: 420px !default; +$--msgbox-border-radius: 4px !default; +$--msgbox-font-size: $--font-size-large !default; +$--msgbox-content-font-size: $--font-size-base !default; +$--msgbox-content-color: $--color-text-regular !default; +$--msgbox-error-font-size: 12px !default; +$--msgbox-padding-primary: 15px !default; + +$--msgbox-success-color: $--color-success !default; +$--msgbox-info-color: $--color-info !default; +$--msgbox-warning-color: $--color-warning !default; +$--msgbox-danger-color: $--color-danger !default; + +/* Message +-------------------------- */ +$--message-shadow: $--box-shadow-base !default; +$--message-min-width: 380px !default; +$--message-background-color: #edf2fc !default; +$--message-padding: 15px 15px 15px 20px !default; +$--message-content-color: $--color-text-regular !default; +$--message-close-color: $--color-text-placeholder !default; +$--message-close-size: 16px !default; +$--message-close-hover-color: $--color-text-secondary !default; + +$--message-success-color: $--color-success !default; +$--message-info-color: $--color-info !default; +$--message-warning-color: $--color-warning !default; +$--message-danger-color: $--color-danger !default; + +/* Notification +-------------------------- */ +$--notification-width: 330px !default; +$--notification-padding: 14px 26px 14px 13px !default; +$--notification-raduis: 8px !default; +$--notification-shadow: $--box-shadow-light !default; +$--notification-border-color: $--border-color-lighter !default; +$--notification-icon-size: 24px !default; +$--notification-close-font-size: $--message-close-size !default; +$--notification-group-margin: 13px !default; +$--notification-font-size: $--font-size-base !default; +$--notification-color: $--color-text-regular !default; +$--notification-title-font-size: 16px !default; +$--notification-title-color: $--color-text-primary !default; + +$--notification-close-color: $--color-text-secondary !default; +$--notification-close-hover-color: $--color-text-regular !default; + +$--notification-success-color: $--color-success !default; +$--notification-info-color: $--color-info !default; +$--notification-warning-color: $--color-warning !default; +$--notification-danger-color: $--color-danger !default; + +/* Input +-------------------------- */ +$--input-font-size: $--font-size-base !default; +$--input-color: $--color-text-regular !default; +$--input-width: 140px !default; +$--input-height: 40px !default; +$--input-border: $--border-base !default; +$--input-border-color: $--border-color-base !default; +$--input-border-radius: $--border-radius-base !default; +$--input-border-color-hover: $--border-color-hover !default; +$--input-fill: $--color-white !default; +$--input-fill-disabled: $--disabled-fill-base !default; +$--input-color-disabled: $--font-color-disabled-base !default; +$--input-icon-color: $--color-text-placeholder !default; +$--input-placeholder-color: $--color-text-placeholder !default; +$--input-max-width: 314px !default; + +$--input-hover-border: $--border-color-hover !default; + +$--input-focus-border: $--color-primary !default; +$--input-focus-fill: $--color-white !default; + +$--input-disabled-fill: $--disabled-fill-base !default; +$--input-disabled-border: $--disabled-border-base !default; +$--input-disabled-color: $--disabled-color-base !default; +$--input-disabled-placeholder-color: $--color-text-placeholder !default; + +$--input-medium-font-size: 14px !default; +$--input-medium-height: 36px !default; + +$--input-small-font-size: 13px !default; +$--input-small-height: 32px !default; + +$--input-mini-font-size: 12px !default; +$--input-mini-height: 28px !default; + +/* Cascader +-------------------------- */ +$--cascader-menu-fill: $--fill-base !default; +$--cascader-menu-font-size: $--font-size-base !default; +$--cascader-menu-radius: $--border-radius-base !default; +$--cascader-menu-border: $--border-base !default; +$--cascader-menu-border-color: $--border-color-base !default; +$--cascader-menu-border-width: $--border-width-base !default; +$--cascader-menu-color: $--color-text-regular !default; +$--cascader-menu-option-color-active: $--color-text-secondary !default; +$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default; +$--cascader-menu-option-color-hover: $--color-text-regular !default; +$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default; +$--cascader-menu-option-color-disabled: #999 !default; +$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default; +$--cascader-menu-option-empty-color: #666 !default; +$--cascader-menu-group-color: #999 !default; +$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default; +$--cascader-menu-option-pinyin-color: #999 !default; +$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default; + +/* Group +-------------------------- */ +$--group-option-flex: 0 0 (1/5) * 100% !default; +$--group-option-offset-bottom: 12px !default; +$--group-option-fill-hover: rgba($--color-black, 0.06) !default; +$--group-title-color: $--color-black !default; +$--group-title-font-size: $--font-size-base !default; +$--group-title-width: 66px !default; + +/* Tab +-------------------------- */ +$--tab-font-size: $--font-size-base !default; +$--tab-border-line: 1px solid #e4e4e4 !default; +$--tab-header-color-active: $--color-text-secondary !default; +$--tab-header-color-hover: $--color-text-regular !default; +$--tab-header-color: $--color-text-regular !default; +$--tab-header-fill-active: rgba($--color-black, 0.06) !default; +$--tab-header-fill-hover: rgba($--color-black, 0.06) !default; +$--tab-vertical-header-width: 90px !default; +$--tab-vertical-header-count-color: $--color-white !default; +$--tab-vertical-header-count-fill: $--color-text-secondary !default; + +/* Button +-------------------------- */ +$--button-font-size: 14px !default; +$--button-font-weight: $--font-weight-primary !default; +$--button-border-radius: $--border-radius-base !default; +$--button-padding-vertical: 12px !default; +$--button-padding-horizontal: 20px !default; + +$--button-medium-font-size: 14px !default; +$--button-medium-border-radius: $--border-radius-base !default; +$--button-medium-padding-vertical: 10px !default; +$--button-medium-padding-horizontal: 20px !default; + +$--button-small-font-size: 12px !default; +$--button-small-border-radius: #{$--border-radius-base - 1} !default; +$--button-small-padding-vertical: 9px !default; +$--button-small-padding-horizontal: 15px !default; + +$--button-mini-font-size: 12px !default; +$--button-mini-border-radius: #{$--border-radius-base - 1} !default; +$--button-mini-padding-vertical: 7px !default; +$--button-mini-padding-horizontal: 15px !default; + +$--button-default-color: $--color-text-regular !default; +$--button-default-fill: $--color-white !default; +$--button-default-border: $--border-color-base !default; + +$--button-disabled-color: $--color-text-placeholder !default; +$--button-disabled-fill: $--color-white !default; +$--button-disabled-border: $--border-color-lighter !default; + +$--button-primary-border: $--color-primary !default; +$--button-primary-color: $--color-white !default; +$--button-primary-fill: $--color-primary !default; + +$--button-success-border: $--color-success !default; +$--button-success-color: $--color-white !default; +$--button-success-fill: $--color-success !default; + +$--button-warning-border: $--color-warning !default; +$--button-warning-color: $--color-white !default; +$--button-warning-fill: $--color-warning !default; + +$--button-danger-border: $--color-danger !default; +$--button-danger-color: $--color-white !default; +$--button-danger-fill: $--color-danger !default; + +$--button-info-border: $--color-info !default; +$--button-info-color: $--color-white !default; +$--button-info-fill: $--color-info !default; + +$--button-hover-tint-percent: 20% !default; +$--button-active-shade-percent: 10% !default; + + +/* cascader +-------------------------- */ +$--cascader-height: 200px !default; + +/* Switch +-------------------------- */ +$--switch-on-color: $--color-primary !default; +$--switch-off-color: $--border-color-base !default; +$--switch-disabled-color: $--border-color-lighter !default; +$--switch-disabled-text-color: $--color-text-placeholder !default; + +$--switch-font-size: $--font-size-base !default; +$--switch-core-border-radius: 10px !default; +$--switch-width: 40px !default; +$--switch-height: 20px !default; +$--switch-button-size: 16px !default; + +/* Dialog +-------------------------- */ +$--dialog-background-color: $--color-primary-light-4 !default; +$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; +$--dialog-close-hover-color: $--color-primary !default; +$--dialog-title-font-size: $--font-size-large !default; +$--dialog-font-size: 14px !default; +$--dialog-line-height: $--font-line-height-primary !default; +$--dialog-padding-primary: 15px !default; + +/* Table +-------------------------- */ +$--table-border: 1px solid $--border-color-lighter !default; +$--table-text-color: $--color-text-regular !default; +$--table-header-color: $--color-text-secondary !default; +$--table-row-hover-background: $--background-color-base !default; +$--table-current-row-background: $--color-primary-light-9 !default; +$--table-header-background: $--color-text-secondary !default; +$--table-footer-background: $--color-text-placeholder !default; +$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default; + +/* Pagination +-------------------------- */ +$--pagination-font-size: 13px !default; +$--pagination-fill: $--color-white !default; +$--pagination-color: $--color-text-primary !default; +$--pagination-border-radius: 3px !default; +$--pagination-button-color: $--color-text-primary !default; +$--pagination-button-width: 35.5px !default; +$--pagination-button-height: 28px !default; +$--pagination-button-disabled-color: $--color-text-placeholder !default; +$--pagination-button-disabled-fill: $--color-white !default; +$--pagination-hover-fill: $--color-primary !default; +$--pagination-hover-color: $--color-white !default; + +/* Popover +-------------------------- */ +$--popover-fill: $--color-white !default; +$--popover-font-size: $--font-size-base !default; +$--popover-border-color: $--border-color-lighter !default; +$--popover-arrow-size: 6px !default; +$--popover-padding: 12px !default; +$--popover-padding-large: 18px 20px !default; +$--popover-title-font-size: 16px !default; +$--popover-title-color: $--color-text-primary !default; + +/* Tooltip +-------------------------- */ +$--tooltip-fill: $--color-text-primary !default; +$--tooltip-color: $--color-white !default; +$--tooltip-font-size: 12px !default; +$--tooltip-border-color: $--color-text-primary !default; +$--tooltip-arrow-size: 6px !default; +$--tooltip-padding: 10px !default; + +/* Tag +-------------------------- */ +$--tag-padding: 0 10px !default; +$--tag-fill: rgba($--color-primary, 0.10) !default; +$--tag-color: $--color-primary !default; +$--tag-border: rgba($--color-primary, 0.20) !default; +$--tag-font-size: 12px !default; +$--tag-border-radius: 4px !default; + +$--tag-info-fill: rgba($--color-info, 0.10) !default; +$--tag-info-border: rgba($--color-info, 0.20) !default; +$--tag-info-color: $--color-info !default; + +$--tag-primary-fill: rgba($--color-primary, 0.10) !default; +$--tag-primary-border: rgba($--color-primary, 0.20) !default; +$--tag-primary-color: $--color-primary !default; + +$--tag-success-fill: rgba($--color-success, 0.10) !default; +$--tag-success-border: rgba($--color-success, 0.20) !default; +$--tag-success-color: $--color-success !default; + +$--tag-warning-fill: rgba($--color-warning, 0.10) !default; +$--tag-warning-border: rgba($--color-warning, 0.20) !default; +$--tag-warning-color: $--color-warning !default; + +$--tag-danger-fill: rgba($--color-danger, 0.10) !default; +$--tag-danger-border: rgba($--color-danger, 0.20) !default; +$--tag-danger-color: $--color-danger !default; + +/* Tree +-------------------------- */ +$--tree-node-hover-color: $--background-color-base !default; +$--tree-text-color: $--color-text-regular !default; +$--tree-expand-icon-color: $--color-text-placeholder !default; + +/* Dropdown +-------------------------- */ +$--dropdown-menu-box-shadow: $--box-shadow-light !default; +$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default; +$--dropdown-menuItem-hover-color: $--link-color !default; + +/* Badge +-------------------------- */ +$--badge-fill: $--color-danger !default; +$--badge-radius: 10px !default; +$--badge-font-size: 12px !default; +$--badge-padding: 6px !default; +$--badge-size: 18px !default; + +/* Card +--------------------------*/ +$--card-border-color: $--border-color-lighter !default; +$--card-border-radius: 4px !default; +$--card-padding: 20px !default; + +/* Slider +--------------------------*/ +$--slider-main-background-color: $--color-primary !default; +$--slider-runway-background-color: $--border-color-light !default; +$--slider-button-hover-color: mix($--color-primary, black, 97%) !default; +$--slider-stop-background-color: $--color-white !default; +$--slider-disable-color: $--color-text-placeholder !default; + +$--slider-margin: 16px 0 !default; +$--slider-border-radius: 3px !default; +$--slider-height: 6px !default; +$--slider-button-size: 16px !default; +$--slider-button-wrapper-size: 36px !default; +$--slider-button-wrapper-offset: -15px !default; + +/* Steps +--------------------------*/ +$--steps-border-color: $--disabled-border-base !default; +$--steps-border-radius: 4px !default; +$--steps-padding: 20px !default; + +/* Menu +--------------------------*/ +$--menu-item-color: $--color-text-primary !default; +$--menu-item-fill: $--color-white !default; +$--menu-item-hover-fill: $--color-primary-light-9 !default; + +/* Rate +--------------------------*/ +$--rate-height: 20px !default; +$--rate-font-size: $--font-size-base !default; +$--rate-icon-size: 18px !default; +$--rate-icon-margin: 6px !default; +$--rate-icon-color: $--color-text-placeholder !default; + +/* DatePicker +--------------------------*/ +$--datepicker-color: $--color-text-regular !default; +$--datepicker-off-color: $--color-text-placeholder !default; +$--datepicker-header-color: $--color-text-regular !default; +$--datepicker-icon-color: $--color-text-primary !default; +$--datepicker-border-color: $--disabled-border-base !default; +$--datepicker-inner-border-color: #e4e4e4 !default; +$--datepicker-inrange-color: $--border-color-extra-light !default; +$--datepicker-inrange-hover-color: $--border-color-extra-light !default; +$--datepicker-active-color: $--color-primary !default; +$--datepicker-text-hover-color: $--color-primary !default; +$--datepicker-cell-hover-color: #fff !default; + +/* Loading +--------------------------*/ +$--loading-spinner-size: 42px !default; +$--loading-fullscreen-spinner-size: 50px !default; + +/* Scrollbar +--------------------------*/ +$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default; +$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default; + +/* Carousel +--------------------------*/ +$--carousel-arrow-font-size: 12px !default; +$--carousel-arrow-size: 36px !default; +$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default; +$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default; +$--carousel-indicator-width: 30px !default; +$--carousel-indicator-height: 2px !default; +$--carousel-indicator-padding-horizontal: 4px !default; +$--carousel-indicator-padding-vertical: 12px !default; +$--carousel-indicator-out-color: $--border-color-hover !default; + +/* Collapse +--------------------------*/ +$--collapse-border-color: $--border-color-lighter !default; +$--collapse-header-height: 48px !default; +$--collapse-header-padding: 20px !default; +$--collapse-header-fill: $--color-white !default; +$--collapse-header-color: $--color-text-primary !default; +$--collapse-header-size: 13px !default; +$--collapse-content-fill: $--color-white !default; +$--collapse-content-size: 13px !default; +$--collapse-content-color: $--color-text-primary !default; + +/* Transfer +--------------------------*/ +$--transfer-border-color: $--border-color-lighter !default; +$--transfer-border-radius: $--border-radius-base !default; +$--transfer-panel-width: 200px !default; +$--transfer-panel-header-height: 40px !default; +$--transfer-panel-header-background: $--background-color-base !default; +$--transfer-panel-footer-height: 40px !default; +$--transfer-panel-body-height: 246px !default; +$--transfer-item-height: 30px !default; +$--transfer-item-hover-background: $--color-text-secondary !default; +$--transfer-filter-height: 32px !default; + +/* Header + --------------------------*/ +$--header-padding: 0 20px !default; + +/* Footer +--------------------------*/ +$--footer-padding: 0 20px !default; + +/* Main +--------------------------*/ +$--main-padding: 20px !default; + +/* Break-point +--------------------------*/ +$--sm: 768px !default; +$--md: 992px !default; +$--lg: 1200px !default; +$--xl: 1920px !default; + +$--breakpoints: ( + 'xs' : (max-width: $--sm), + 'sm' : (min-width: $--sm), + 'md' : (min-width: $--md), + 'lg' : (min-width: $--lg), + 'xl' : (min-width: $--xl) +); + +$--breakpoints-spec: ( + 'xs-only' : (max-width: $--sm - 1), + 'sm-and-up' : (min-width: $--sm), + 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)", + 'sm-and-down': (max-width: $--md - 1), + 'md-and-up' : (min-width: $--md), + 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)", + 'md-and-down': (max-width: $--lg - 1), + 'lg-and-up' : (min-width: $--lg), + 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)", + 'lg-and-down': (max-width: $--xl - 1), + 'xl-only' : (min-width: $--xl), +); diff --git a/ctf-frontend/index.html b/ctf-frontend/index.html new file mode 100644 index 0000000..54f3bbf --- /dev/null +++ b/ctf-frontend/index.html @@ -0,0 +1,12 @@ + + + + + + ctf-frontend + + +
+ + + diff --git a/ctf-frontend/package.json b/ctf-frontend/package.json new file mode 100644 index 0000000..a9514a7 --- /dev/null +++ b/ctf-frontend/package.json @@ -0,0 +1,63 @@ +{ + "name": "ctf-frontend", + "version": "1.0.0", + "description": "UFML ctf cources frontend", + "author": "Dm1tr1y147 ", + "private": true, + "scripts": { + "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", + "start": "npm run dev", + + "build": "node build/build.js" + }, + "dependencies": { + "vue": "^2.5.2", + "vue-router": "^3.0.1" + }, + "devDependencies": { + "autoprefixer": "^7.1.2", + "babel-core": "^6.22.1", + "babel-loader": "^7.1.1", + "babel-plugin-transform-runtime": "^6.22.0", + "babel-preset-env": "^1.3.2", + "babel-preset-stage-2": "^6.22.0", + "babel-register": "^6.22.0", + "chalk": "^2.0.1", + "copy-webpack-plugin": "^4.0.1", + "css-loader": "^0.28.0", + "eventsource-polyfill": "^0.9.6", + "extract-text-webpack-plugin": "^3.0.0", + "file-loader": "^1.1.4", + "friendly-errors-webpack-plugin": "^1.6.1", + "html-webpack-plugin": "^2.30.1", + "webpack-bundle-analyzer": "^2.9.0", + "node-notifier": "^5.1.2", + "pug": "^2.0.0-beta6", + "node-sass": "^4.5.3", + "sass-loader": "^6.0.6", + "postcss-import": "^11.0.0", + "postcss-loader": "^2.0.8", + "semver": "^5.3.0", + "shelljs": "^0.7.6", + "optimize-css-assets-webpack-plugin": "^3.2.0", + "ora": "^1.2.0", + "rimraf": "^2.6.0", + "url-loader": "^0.5.8", + "vue-loader": "^13.3.0", + "vue-style-loader": "^3.0.1", + "vue-template-compiler": "^2.5.2", + "portfinder": "^1.0.13", + "webpack": "^3.6.0", + "webpack-dev-server": "^2.9.1", + "webpack-merge": "^4.1.0" + }, + "engines": { + "node": ">= 4.0.0", + "npm": ">= 3.0.0" + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 8" + ] +} diff --git a/ctf-frontend/src/App.vue b/ctf-frontend/src/App.vue new file mode 100644 index 0000000..029fb96 --- /dev/null +++ b/ctf-frontend/src/App.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/ctf-frontend/src/assets/logo.png b/ctf-frontend/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/ctf-frontend/src/assets/logo.png differ diff --git a/ctf-frontend/src/components/HelloWorld.vue b/ctf-frontend/src/components/HelloWorld.vue new file mode 100644 index 0000000..7c17dd6 --- /dev/null +++ b/ctf-frontend/src/components/HelloWorld.vue @@ -0,0 +1,50 @@ + + + + + + diff --git a/ctf-frontend/src/main.js b/ctf-frontend/src/main.js new file mode 100644 index 0000000..ec10971 --- /dev/null +++ b/ctf-frontend/src/main.js @@ -0,0 +1,15 @@ +// The Vue build version to load with the `import` command +// (runtime-only or standalone) has been set in webpack.base.conf with an alias. +import Vue from 'vue' +import App from './App' +import router from './router' + +Vue.config.productionTip = false + +/* eslint-disable no-new */ +new Vue({ + el: '#app', + router, + template: '', + components: { App } +}) diff --git a/ctf-frontend/src/router/index.js b/ctf-frontend/src/router/index.js new file mode 100644 index 0000000..5fa7f9d --- /dev/null +++ b/ctf-frontend/src/router/index.js @@ -0,0 +1,15 @@ +import Vue from 'vue' +import Router from 'vue-router' +import HelloWorld from '@/components/HelloWorld' + +Vue.use(Router) + +export default new Router({ + routes: [ + { + path: '/', + name: 'HelloWorld', + component: HelloWorld + } + ] +}) diff --git a/ctf-frontend/static/.gitkeep b/ctf-frontend/static/.gitkeep new file mode 100644 index 0000000..e69de29