mirror of
https://github.com/papercss/papercss
synced 2024-05-06 15:56:42 +02:00
Merge branch 'develop' for version 1.8.0
This commit is contained in:
Rhyne Vlaservich
commit
759e5a1584
|
|
@ -7,3 +7,4 @@ trim_trailing_whitespace = true
|
|||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
quote_type = single
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -8,4 +8,3 @@ npm-debug.log
|
|||
# Ignore compiled CSS
|
||||
/docs/static/assets/paper.css
|
||||
/docs/static/assets/paper.min.css
|
||||
/dist
|
||||
20
.npmignore
20
.npmignore
|
|
@ -1,9 +1,15 @@
|
|||
/node_modules
|
||||
npm-debug.log
|
||||
index.html
|
||||
demo.css
|
||||
yarn.lock
|
||||
/img
|
||||
/.github
|
||||
/build
|
||||
/docs
|
||||
/img
|
||||
/node_modules
|
||||
/public
|
||||
/tests
|
||||
/src
|
||||
.browserslistrc
|
||||
.editorconfig
|
||||
.stylelintrc.json
|
||||
CODE_OF_CONDUCT.md
|
||||
CONTRIBUTING.md
|
||||
netlify.toml
|
||||
npm-debug.log
|
||||
yarn.lock
|
||||
|
|
|
|||
33
.travis.yml
33
.travis.yml
|
|
@ -1,33 +0,0 @@
|
|||
language: node_js
|
||||
node_js: "8.8.1"
|
||||
|
||||
notifications:
|
||||
slack:
|
||||
rooms:
|
||||
- papercss:1MrmPTVH6FLA95Oa5IfXl7xQ#travis
|
||||
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable fluxbox
|
||||
|
||||
before_install:
|
||||
- npm install -g npm@5.10.0
|
||||
|
||||
install:
|
||||
- npm ci
|
||||
|
||||
before_script:
|
||||
- npm run stylelint
|
||||
- "sh -e /etc/init.d/xvfb start"
|
||||
- sleep 3
|
||||
- fluxbox >/dev/null 2>&1 &
|
||||
- chmod +x ./jake.sh
|
||||
- chmod +x ./tests/build/scripts/run_jake.sh
|
||||
- export DISPLAY=:99.0
|
||||
- gulp build
|
||||
|
||||
script: "./jake.sh loose=true capture=Firefox"
|
||||
117
Jakefile.js
117
Jakefile.js
|
|
@ -1,117 +0,0 @@
|
|||
// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
|
||||
|
||||
// Main build file. Contains all tasks needed for normal development.
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var startTime = Date.now();
|
||||
|
||||
var shell = require("shelljs");
|
||||
var karma = require("simplebuild-karma");
|
||||
var browserify = require("./tests/build/util/browserify_runner.js");
|
||||
|
||||
var browsers = require("./tests/build/config/tested_browsers.js");
|
||||
var paths = require("./tests/build/config/paths.js");
|
||||
|
||||
var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
|
||||
|
||||
var strict = !process.env.loose;
|
||||
|
||||
|
||||
//*** GENERAL
|
||||
|
||||
desc("Lint and test");
|
||||
task("default", [ "lint", "test" ], function() {
|
||||
var elapsedSeconds = (Date.now() - startTime) / 1000;
|
||||
console.log("\n\nBUILD OK (" + elapsedSeconds.toFixed(2) + "s)");
|
||||
});
|
||||
|
||||
desc("Start server (for manual testing)");
|
||||
task("run", [ "build" ], function() {
|
||||
jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
|
||||
}, { async: true });
|
||||
|
||||
desc("Delete generated files");
|
||||
task("clean", function() {
|
||||
shell.rm("-rf", paths.generatedDir);
|
||||
});
|
||||
|
||||
|
||||
//*** LINT
|
||||
/** */
|
||||
desc("Lint everything");
|
||||
task("lint", ["lintNode", "lintClient"]);
|
||||
|
||||
task("lintNode", function() {
|
||||
process.stdout.write("Linting Node.js code: ");
|
||||
|
||||
}, { async: false });
|
||||
|
||||
task("lintClient", function() {
|
||||
process.stdout.write("Linting browser code: ");
|
||||
|
||||
}, { async: false });
|
||||
|
||||
//*** TEST
|
||||
|
||||
desc("Start Karma server -- run this first");
|
||||
task("karma", function() {
|
||||
karma.start({
|
||||
configFile: KARMA_CONFIG
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
desc("Run tests");
|
||||
task("test", function() {
|
||||
console.log("Testing browser code: ");
|
||||
|
||||
var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
|
||||
karma.run({
|
||||
configFile: KARMA_CONFIG,
|
||||
expectedBrowsers: browsers,
|
||||
strict: strict,
|
||||
capture: browsersToCapture
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
|
||||
//*** BUILD
|
||||
|
||||
desc("Build distribution package");
|
||||
task("build", [ "prepDistDir", "buildClient" ]);
|
||||
|
||||
task("prepDistDir", function() {
|
||||
shell.rm("-rf", paths.distDir);
|
||||
});
|
||||
|
||||
task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
|
||||
console.log("Copying client code: .");
|
||||
shell.cp(
|
||||
paths.clientDir + "/*.html",
|
||||
paths.clientDir + "/*.css",
|
||||
paths.clientDir + "/*.svg",
|
||||
paths.clientDistDir
|
||||
);
|
||||
});
|
||||
|
||||
task("bundleClientJs", [ paths.clientDistDir ], function() {
|
||||
console.log("Bundling browser code with Browserify: .");
|
||||
browserify.bundle({
|
||||
entry: paths.clientEntryPoint,
|
||||
outfile: paths.clientDistBundle,
|
||||
options: {
|
||||
standalone: "toggle",
|
||||
debug: true
|
||||
}
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
|
||||
//*** CREATE DIRECTORIES
|
||||
|
||||
directory(paths.testDir);
|
||||
directory(paths.clientDistDir);
|
||||
|
||||
}());
|
||||
51
build/build.js
Normal file
51
build/build.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const sass = require('sass');
|
||||
const chalk = require('chalk');
|
||||
const write = require('write');
|
||||
const rimraf = require('rimraf');
|
||||
const postcss = require('postcss');
|
||||
const cssnano = require('cssnano');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
function log(...args) {
|
||||
return console.log('📦', chalk.cyan(...args));
|
||||
}
|
||||
|
||||
async function build() {
|
||||
const entrypoint = path.resolve(__dirname, '../src/styles.scss');
|
||||
const paperDocsPath = path.resolve(__dirname, '../docs/static/assets/paper.css');
|
||||
|
||||
log('Starting PaperCSS build...');
|
||||
log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
|
||||
|
||||
rimraf.sync('dist', { disableGlob: true });
|
||||
if (fs.existsSync(paperDocsPath)) {
|
||||
fs.unlinkSync(paperDocsPath);
|
||||
}
|
||||
|
||||
log('Compiling SCSS to CSS, entrypoint:', entrypoint);
|
||||
|
||||
const compiledCSS = sass.renderSync({ file: entrypoint });
|
||||
|
||||
log('Processing CSS: autoprefixer...');
|
||||
|
||||
const autoprefixedCSS = await postcss([autoprefixer]).process(compiledCSS.css, { from: undefined });
|
||||
|
||||
log('Processing CSS: cssnano...');
|
||||
|
||||
const minifiedCSS = await postcss([cssnano]).process(autoprefixedCSS.css, { from: undefined });
|
||||
|
||||
const paperPath = path.resolve(__dirname, '../dist/paper.css');
|
||||
const paperminpath = path.resolve(__dirname, '../dist/paper.min.css');
|
||||
|
||||
log('Writing paper.css and paper.min.css files to dist/ and docs/ folders...');
|
||||
|
||||
write(paperPath, autoprefixedCSS.css);
|
||||
write(paperminpath, minifiedCSS.css);
|
||||
write(paperDocsPath, autoprefixedCSS.css);
|
||||
|
||||
log('Build done!');
|
||||
}
|
||||
|
||||
build();
|
||||
3306
dist/paper.css
vendored
Normal file
3306
dist/paper.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
2
dist/paper.min.css
vendored
Normal file
2
dist/paper.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,7 @@ publishDir = "../public"
|
|||
# Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ )
|
||||
pygmentsCodefences = true
|
||||
pygmentsStyle = "emacs"
|
||||
pygmentsUseClasses=true
|
||||
|
||||
[params.info]
|
||||
description = "the less formal CSS framework"
|
||||
|
|
@ -16,5 +17,7 @@ title404 = "Nothing's here!"
|
|||
# Title Separator: - – — · • * ⋆ | ~ « » < >
|
||||
titleSeparator = "•"
|
||||
|
||||
[blackfriday]
|
||||
hrefTargetBlank = true
|
||||
[markup]
|
||||
defaultMarkdownHandler = "blackfriday"
|
||||
[markup.blackFriday]
|
||||
hrefTargetBlank = true
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@ weight: -270
|
|||
|
||||
#### Download
|
||||
|
||||
Download the latest version (1.7.0) using either of the links below. Or
|
||||
Download the latest version (1.8.0) using either of the links below. Or
|
||||
download an older release via GitHub.
|
||||
|
||||
<div class="row flex-spaces text-center">
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.7.0/paper.css">CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.7.0/paper.min.css">Minified CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.8.0/paper.css">CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.8.0/paper.min.css">Minified CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">GitHub Releases</a>
|
||||
</div>
|
||||
|
||||
#### NPM
|
||||
|
||||
PaperCSS is available on NPM, current version 1.7.0. Install with <code>npm install papercss --save</code> and find the CSS in:
|
||||
PaperCSS is available on NPM, current version 1.8.0. Install with <code>npm install papercss --save</code> and find the CSS in:
|
||||
|
||||
* node_modules/papercss/dist/paper.css
|
||||
* node_modules/papercss/dist/paper.min.css
|
||||
|
|
@ -27,8 +27,8 @@ PaperCSS is available on NPM, current version 1.7.0. Install with <code>npm inst
|
|||
Don't want to download it? That's cool. You can just link to PaperCSS via
|
||||
[unpkg's CDN](https://unpkg.com/#/). You can use either:
|
||||
|
||||
* [https://unpkg.com/papercss@1.7.0/dist/paper.css](https://unpkg.com/papercss@1.7.0/dist/paper.css)
|
||||
* [https://unpkg.com/papercss@1.7.0/dist/paper.min.css](https://unpkg.com/papercss@1.7.0/dist/paper.min.css)
|
||||
* [https://unpkg.com/papercss@1.8.0/dist/paper.css](https://unpkg.com/papercss@1.8.0/dist/paper.css)
|
||||
* [https://unpkg.com/papercss@1.8.0/dist/paper.min.css](https://unpkg.com/papercss@1.8.0/dist/paper.min.css)
|
||||
|
||||
Here's a quick snippet to get started with PaperCSS:
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ Here's a quick snippet to get started with PaperCSS:
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.7.0/dist/paper.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.8.0/dist/paper.min.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -161,6 +161,18 @@ description: PaperCSS Forms
|
|||
</div>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Sliders</legend>
|
||||
<div class="form-group">
|
||||
<label for="input-range">Note /10 :</label>
|
||||
<input type="range" name="note" id="input-range" min="0" max="10">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
|
||||
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
|
||||
<output id="output" for="percentage">50%</output>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
#### Code:
|
||||
|
||||
|
|
@ -320,4 +332,16 @@ description: PaperCSS Forms
|
|||
</div>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Sliders</legend>
|
||||
<div class="form-group">
|
||||
<label for="input-range">Note /10 :</label>
|
||||
<input type="range" name="note" id="input-range" min="0" max="10">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
|
||||
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
|
||||
<output id="output" for="percentage">50%</output>
|
||||
</div>
|
||||
</fieldset>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ description: PaperCSS Borders & Shadows
|
|||
<div class="sm-2 col border border-success">Border success</div>
|
||||
<div class="sm-2 col border border-warning">Border warning</div>
|
||||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
<div class="sm-2 col border border-white">Border white</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
|
@ -51,7 +51,7 @@ description: PaperCSS Borders & Shadows
|
|||
<div class="sm-2 col border border-success">Border success</div>
|
||||
<div class="sm-2 col border border-warning">Border warning</div>
|
||||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
<div class="sm-2 col border border-white">Border white</div>
|
||||
</div>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
|
|
@ -59,7 +59,7 @@ description: PaperCSS Borders & Shadows
|
|||
<div class="sm-2 col border border-success">Border success</div>
|
||||
<div class="sm-2 col border border-warning">Border warning</div>
|
||||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
<div class="sm-2 col border border-white">Border white</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
|
|
|||
67
docs/content/docs/utilities/dark-mode.md
Normal file
67
docs/content/docs/utilities/dark-mode.md
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
title: Dark Mode
|
||||
description: PaperCSS Dark Mode
|
||||
---
|
||||
|
||||
As of version `1.8.0`, PaperCSS supports a dark mode of the framework. Just add the `.dark` class to your `html` tag!
|
||||
|
||||
#### Examples
|
||||
|
||||
Here's what some of the components look like:
|
||||
|
||||
<div class="form-group">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
</div>
|
||||
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
|
||||
<div class="progress margin-bottom">
|
||||
<div class="bar w-25"></div>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Bob Dylan</td>
|
||||
<td>Musician</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Eric Clapton</td>
|
||||
<td>Musician</td>
|
||||
<td>Ohio, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Daniel Kahneman</td>
|
||||
<td>Psychologist</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
var html = document.documentElement;
|
||||
html.className += 'dark';
|
||||
</script>
|
||||
|
||||
#### Code
|
||||
|
||||
```html
|
||||
<html class='dark'>
|
||||
Dark mode styles are automatically applied with the dark class!
|
||||
</html>
|
||||
```
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- Styles -->
|
||||
<link rel='stylesheet' href='/assets/paper.css'>
|
||||
<link rel='stylesheet' href='/assets/demo.css'>
|
||||
<link rel='stylesheet' href='/assets/syntax.css'>
|
||||
|
|
|
|||
6
docs/static/assets/demo.css
vendored
6
docs/static/assets/demo.css
vendored
|
|
@ -1,5 +1,8 @@
|
|||
body {
|
||||
background-image: url("/img/geometry2.png")
|
||||
background-image: url("/img/geometry2.png")
|
||||
}
|
||||
html.dark body {
|
||||
background: #41403e;
|
||||
}
|
||||
#top {
|
||||
max-width: 1440px;
|
||||
|
|
@ -31,7 +34,6 @@ img.no-responsive {
|
|||
}
|
||||
.to-top .paper-btn {
|
||||
padding: .6em 1em;
|
||||
background: #fff;
|
||||
border-top-left-radius: 185px 160px;
|
||||
border-top-right-radius: 200px 195px;
|
||||
border-bottom-right-radius: 160px 195px;
|
||||
|
|
|
|||
365
docs/static/assets/syntax.css
vendored
Normal file
365
docs/static/assets/syntax.css
vendored
Normal file
|
|
@ -0,0 +1,365 @@
|
|||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
border: 0;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
background-color: #ffc;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {color: #7f7f7f;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
|
||||
/* LineNumbers */
|
||||
.chroma .ln {color: #7f7f7f;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #a2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #a2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #a2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #a2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #a2f;
|
||||
}
|
||||
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #a2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #0b0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: #a2f;
|
||||
}
|
||||
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #00f;
|
||||
}
|
||||
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #800;
|
||||
}
|
||||
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #a2f;
|
||||
}
|
||||
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #d2413a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #00a000;
|
||||
}
|
||||
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: #a0a000;
|
||||
}
|
||||
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
color: #00f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #008000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: #b8860b;
|
||||
}
|
||||
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #b44;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #b62;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #b68;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #b68;
|
||||
}
|
||||
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #b44;
|
||||
}
|
||||
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #b8860b;
|
||||
}
|
||||
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #a2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #080;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #080;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #080;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #080;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #080;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #080;
|
||||
}
|
||||
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #080;
|
||||
}
|
||||
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #a00000;
|
||||
}
|
||||
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
color: #000080;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #00a000;
|
||||
}
|
||||
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
color: #000080;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #800080;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
color: #04d;
|
||||
}
|
||||
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
69
gulpfile.js
69
gulpfile.js
|
|
@ -1,69 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp'),
|
||||
sass = require('gulp-sass'),
|
||||
cleanCSS = require('gulp-clean-css'),
|
||||
rename = require('gulp-rename'),
|
||||
exec = require('child_process').execFile,
|
||||
optional = require('optional'),
|
||||
hugo = optional('hugo-bin'),
|
||||
gulpStylelint = optional('gulp-stylelint'),
|
||||
autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
gulp.task('sass', function() {
|
||||
return gulp.src('src/**/*.scss')
|
||||
.pipe(sass.sync().on('error', sass.logError))
|
||||
.pipe(autoprefixer())
|
||||
.pipe(cleanCSS({format: 'beautify'}))
|
||||
.pipe(rename('paper.css'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(gulp.dest('docs/static/assets'));
|
||||
});
|
||||
|
||||
gulp.task('watch', function () {
|
||||
gulp.watch('src/**/*.scss', gulp.series('sass'));
|
||||
});
|
||||
|
||||
gulp.task('hugo-server', function (cb) {
|
||||
const flags = ['server', '--source=docs', '--disableFastRender'];
|
||||
let hugo_process = exec(hugo, flags, function (err, stdout, stderr) {
|
||||
console.log(stderr);
|
||||
return err ? cb(err) : cb();
|
||||
});
|
||||
|
||||
hugo_process.stdout.pipe(process.stdout);
|
||||
return hugo_process;
|
||||
})
|
||||
|
||||
gulp.task('hugo-build', function (cb) {
|
||||
const flags = ['--source=docs'];
|
||||
let hugo_process = exec(hugo, flags, function (err, stdout, stderr) {
|
||||
console.log(stderr);
|
||||
return err ? cb(err) : cb();
|
||||
});
|
||||
|
||||
hugo_process.stdout.pipe(process.stdout);
|
||||
return hugo_process;
|
||||
})
|
||||
|
||||
gulp.task('minify-css', () => {
|
||||
return gulp.src('src/**/*.scss')
|
||||
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
|
||||
.pipe(autoprefixer())
|
||||
.pipe(rename('paper.min.css'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(gulp.dest('docs/static/assets'));
|
||||
});
|
||||
|
||||
gulp.task('lint-css', function() {
|
||||
return gulp.src('src/**/*.scss')
|
||||
.pipe(gulpStylelint({
|
||||
reporters: [
|
||||
{ formatter: 'string', console: true },
|
||||
],
|
||||
}));
|
||||
})
|
||||
|
||||
gulp.task('default', gulp.series('sass', 'minify-css', 'hugo-server'));
|
||||
gulp.task('build', gulp.series('sass', 'minify-css', 'hugo-build'));
|
||||
gulp.task('postinstall', gulp.series('sass', 'minify-css'));
|
||||
1
jake.bat
1
jake.bat
|
|
@ -1 +0,0 @@
|
|||
@call tests\build\scripts\run_jake -f tests\build\scripts\build.Jakefile.js %*
|
||||
2
jake.sh
2
jake.sh
|
|
@ -1,2 +0,0 @@
|
|||
#!/bin/sh
|
||||
. tests/build/scripts/run_jake.sh -f tests/build/scripts/build.Jakefile.js $*
|
||||
14764
package-lock.json
generated
14764
package-lock.json
generated
File diff suppressed because it is too large
Load diff
68
package.json
68
package.json
|
|
@ -1,14 +1,15 @@
|
|||
{
|
||||
"name": "papercss",
|
||||
"version": "1.7.0",
|
||||
"version": "1.8.0",
|
||||
"description": "The less formal CSS framework.",
|
||||
"main": "index.js",
|
||||
"main": "dist/paper.css",
|
||||
"scripts": {
|
||||
"start": "node node_modules/gulp/bin/gulp.js",
|
||||
"build": "node node_modules/gulp/bin/gulp.js build",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"postinstall": "gulp postinstall",
|
||||
"stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
|
||||
"build": "node ./build/build.js",
|
||||
"hugo:build": "hugo -D --source=docs",
|
||||
"hugo:serve": "hugo server --source=docs --disableFastRender",
|
||||
"lint": "npm run stylelint",
|
||||
"start": "npm run hugo:serve",
|
||||
"stylelint": "stylelint 'src/**/*.scss'"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -20,58 +21,23 @@
|
|||
"url": "https://github.com/papercss/papercss/issues"
|
||||
},
|
||||
"homepage": "https://www.getpapercss.com",
|
||||
"dependencies": {
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-autoprefixer": "^6.0.0",
|
||||
"gulp-clean-css": "^3.9.3",
|
||||
"gulp-connect": "^5.6.1",
|
||||
"gulp-plumber": "1.1.0",
|
||||
"gulp-rename": "1.2.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"optional": "^0.1.4"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"browserify": "^14.1.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"chai": "^4.1.2",
|
||||
"gulp-less": "^4.0.1",
|
||||
"gulp-plumber": "1.1.0",
|
||||
"gulp-rename": "1.2.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-stylelint": "6.0.0",
|
||||
"gulp-watch-less": "1.0.1",
|
||||
"http-server": "^0.11.1",
|
||||
"hugo-bin": "^0.37.0",
|
||||
"install": "0.10.1",
|
||||
"jake": "^8.0.15",
|
||||
"jshint": "^2.9.6",
|
||||
"karma": "^3.1.1",
|
||||
"karma-chai": "^0.1.0",
|
||||
"karma-commonjs": "1.0.0",
|
||||
"karma-firefox-launcher": "^1.0.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-node-modules-middleware": "^1.0.1",
|
||||
"karma-quixote": "^1.0.0",
|
||||
"karma-requirejs": "^1.1.0",
|
||||
"mocha": "^4.0.1",
|
||||
"nodemon": "^1.11.0",
|
||||
"npm": "^6.4.1",
|
||||
"object-merge": "^2.5.1",
|
||||
"os": "^0.1.1",
|
||||
"chalk": "^4.1.0",
|
||||
"cssnano": "^4.1.10",
|
||||
"hugo-bin": "^0.62.3",
|
||||
"postcss": "^7.0.32",
|
||||
"pre-commit": "^1.2.2",
|
||||
"procfile": "^0.1.1",
|
||||
"quixote": "^0.14.0",
|
||||
"request": "^2.83.0",
|
||||
"requirejs": "^2.3.5",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"simplebuild-jshint": "^1.3.0",
|
||||
"simplebuild-karma": "^1.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.26.10",
|
||||
"stylelint": "8.4.0",
|
||||
"stylelint-config-sass-guidelines": "4.0.1",
|
||||
"stylelint-config-standard": "18.0.0",
|
||||
"stylelint-order": "0.8.0",
|
||||
"stylelint-scss": "2.2.0",
|
||||
"webpack-dev-server": "^3.1.10"
|
||||
"write": "^2.0.0"
|
||||
},
|
||||
"pre-commit": [
|
||||
"stylelint"
|
||||
|
|
|
|||
|
|
@ -3,13 +3,17 @@
|
|||
flex-direction: column;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
border-top: 1px solid $muted-light;
|
||||
@include color('border-top-color', 'muted-light');
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.collapsible-body {
|
||||
@include color('border-bottom-color', 'muted-light');
|
||||
@include color('background-color', 'white-dark-light-80');
|
||||
@include transition;
|
||||
background-color: lighten($white-dark, 80%);
|
||||
border-bottom: 1px solid $muted-light;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
margin: 0;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
|
|
@ -21,7 +25,7 @@
|
|||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
color: $primary;
|
||||
@include color('color', 'primary');
|
||||
}
|
||||
|
||||
&[id^='collapsible']:checked~div.collapsible-body {
|
||||
|
|
@ -33,8 +37,10 @@
|
|||
}
|
||||
|
||||
label {
|
||||
border-bottom: 1px solid $muted-light;
|
||||
color: $primary;
|
||||
@include color('color', 'primary');
|
||||
@include color('border-bottom-color', 'muted-light');
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin: 0 0 -1px;
|
||||
|
|
@ -42,7 +48,7 @@
|
|||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $muted;
|
||||
@include color('color', 'muted');
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
@mixin btn-close-color($base-color) {
|
||||
color: lighten($base-color, 10%);
|
||||
@mixin btn-close-color($base-color-name) {
|
||||
@include color('color', #{$base-color-name}-light-10);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: darken($base-color, 10%);
|
||||
@include color('color', #{$base-color-name}-dark-10);
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
@include color('border-color', 'primary');
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
|
|
@ -33,9 +35,9 @@
|
|||
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.alert-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
@include color('color', #{$colorName}-text);
|
||||
@include color('background-color', #{$colorName}-light);
|
||||
@include color('border-color', #{$colorName});
|
||||
|
||||
.btn-close {
|
||||
@include btn-close-color($color);
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@ article {
|
|||
}
|
||||
|
||||
.article-meta {
|
||||
color: $muted;
|
||||
@include color(color, 'muted-text');
|
||||
font-size: 15px;
|
||||
|
||||
a {
|
||||
@include color(color, 'muted-text');
|
||||
background-image: none;
|
||||
color: $muted-text;
|
||||
|
||||
&:hover {
|
||||
color: $light-dark;
|
||||
@include color(color, 'light-dark');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.badge {
|
||||
@include border-style();
|
||||
background-color: $muted;
|
||||
border: 2px solid $primary;
|
||||
@include color('color', 'white');
|
||||
@include color('background-color', 'muted');
|
||||
@include color('border-color', 'primary');
|
||||
border: 2px solid;
|
||||
border-color: transparent;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
|
|
@ -16,6 +17,6 @@
|
|||
|
||||
@each $colorName, $color in $colors {
|
||||
.badge.#{$colorName} {
|
||||
background-color: $color;
|
||||
@include color('background-color', #{$colorName});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ ul.breadcrumb {
|
|||
}
|
||||
|
||||
a {
|
||||
@include color('color', 'secondary');
|
||||
background-image: none;
|
||||
color: $secondary;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,13 @@ button,
|
|||
@include border-style();
|
||||
@include shadow();
|
||||
@include transition();
|
||||
@include color('color', 'primary');
|
||||
@include color('border-color', 'primary');
|
||||
@include color('background-color', 'main-background');
|
||||
align-self: center;
|
||||
background: transparent;
|
||||
border: 2px solid $primary;
|
||||
color: $primary;
|
||||
background-image: none;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
|
|
@ -43,7 +46,9 @@ button,
|
|||
}
|
||||
|
||||
&:focus {
|
||||
border: 2px solid $secondary;
|
||||
@include color('border-color', 'secondary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
||||
}
|
||||
|
||||
|
|
@ -60,6 +65,7 @@ button,
|
|||
}
|
||||
|
||||
a {
|
||||
@include color('color', 'secondary');
|
||||
background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
|
||||
background-position: 0 90%;
|
||||
background-repeat: repeat-x;
|
||||
|
|
@ -67,24 +73,18 @@ a {
|
|||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
color: $primary;
|
||||
@include color('color', 'primary');
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@each $colorName, $color, $color-light, $color-text in $colors {
|
||||
.alert-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
button.btn-#{$colorName},
|
||||
.paper-btn.btn-#{$colorName},
|
||||
[type='button'].btn-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
border-color: $color;
|
||||
color: $color-text;
|
||||
@include color('color', #{$colorName}-text);
|
||||
@include color('background-color', #{$colorName}-light);
|
||||
@include color('border-color', #{$colorName});
|
||||
|
||||
&:hover {
|
||||
&:active {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
.card {
|
||||
@include shadow;
|
||||
@include color('border-color', 'muted-light');
|
||||
backface-visibility: hidden;
|
||||
border: 2px solid $muted-light;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
|
@ -14,16 +16,19 @@
|
|||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
background-color: $white-dark;
|
||||
@include color('background-color', 'white-dark');
|
||||
@include color('border-color', 'muted-light');
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 2px solid $muted-light;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 2px solid $muted-light;
|
||||
border-top-style: solid;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,24 @@
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
@include color('color', 'primary');
|
||||
@include color('border-color', 'primary');
|
||||
background: transparent;
|
||||
border: 2px solid $primary;
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
color: $primary;
|
||||
border-width: 2px;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
padding: 0.5rem;
|
||||
|
||||
&:focus {
|
||||
border: 2px solid $secondary;
|
||||
@include color('border-color', 'secondary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
|
|
@ -76,7 +80,9 @@ select {
|
|||
display: block;
|
||||
|
||||
&::before {
|
||||
border: 2px solid $primary;
|
||||
@include color('border-color', 'primary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
|
|
@ -140,14 +146,14 @@ select {
|
|||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
position: relative;
|
||||
|
||||
|
||||
input {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
|
||||
&:checked + .paper-switch-slider {
|
||||
background-color: $success-light;
|
||||
@include color('background-color', 'success-light');
|
||||
}
|
||||
|
||||
&:checked + .paper-switch-slider::before {
|
||||
|
|
@ -161,11 +167,13 @@ select {
|
|||
}
|
||||
|
||||
.paper-switch-slider {
|
||||
border: 2px solid $primary;
|
||||
@include color('border-color', 'primary');
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-width: 2px;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
|
|
@ -175,7 +183,7 @@ select {
|
|||
transition: 0.4s;
|
||||
|
||||
&::before {
|
||||
background: $secondary;
|
||||
@include color('background', 'secondary');
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
|
|
@ -189,11 +197,13 @@ select {
|
|||
}
|
||||
|
||||
.paper-switch-slider.round {
|
||||
border: 2px solid $primary;
|
||||
@include color('border-color', 'primary');
|
||||
border-bottom-left-radius: 0.7rem 1rem;
|
||||
border-bottom-right-radius: 1rem 0.9rem;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem 0.6rem;
|
||||
border-width: 2px;
|
||||
|
||||
&::before {
|
||||
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
|
||||
|
|
@ -284,7 +294,7 @@ select {
|
|||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
|
||||
&:checked + .paper-switch-tile-card {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
|
@ -301,7 +311,7 @@ select {
|
|||
transform-style: preserve-3d;
|
||||
transition: all 600ms;
|
||||
width: 100%;
|
||||
|
||||
|
||||
div {
|
||||
backface-visibility: hidden;
|
||||
box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -318,6 +328,113 @@ select {
|
|||
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
appearance: none;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
|
||||
/* For Chromium */
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include color('background', 'secondary');
|
||||
@include color('border-color', 'primary');
|
||||
|
||||
border-radius: 18px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
cursor: pointer;
|
||||
height: 8px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include color('background', 'white');
|
||||
@include color('border-color', 'primary');
|
||||
|
||||
appearance: none;
|
||||
border-bottom-left-radius: 0.7rem 1rem;
|
||||
border-bottom-right-radius: 1rem 0.9rem;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem 0.6rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
cursor: pointer;
|
||||
height: 36px;
|
||||
margin-top: -14px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* For Mozilla Firefox */
|
||||
&::-moz-range-track {
|
||||
@include color('background', 'secondary');
|
||||
@include color('border-color', 'primary');
|
||||
|
||||
border-radius: 18px;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
cursor: pointer;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include color('background', 'white');
|
||||
@include color('border-color', 'primary');
|
||||
|
||||
border-bottom-left-radius: 0.7rem 1rem;
|
||||
border-bottom-right-radius: 1rem 0.9rem;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem 0.6rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
cursor: pointer;
|
||||
height: 36px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* For IE */
|
||||
&::-ms-track {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower,
|
||||
&::-ms-fill-upper {
|
||||
@include color('background', 'secondary');
|
||||
@include color('border-color', 'primary');
|
||||
|
||||
border-radius: 18px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include color('background', 'white');
|
||||
@include color('border-color', 'primary');
|
||||
|
||||
border: 1px solid $primary;
|
||||
border-bottom-left-radius: 0.7rem 1rem;
|
||||
border-bottom-right-radius: 1rem 0.9rem;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem 0.6rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
cursor: pointer;
|
||||
height: 36px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
fieldset.form-group {
|
||||
|
|
|
|||
|
|
@ -24,10 +24,13 @@
|
|||
}
|
||||
|
||||
.modal-body {
|
||||
@include color('color', 'primary');
|
||||
@include color('background', 'main-background');
|
||||
@include color('border-color', 'muted-light');
|
||||
@include transition;
|
||||
backface-visibility: hidden;
|
||||
background: $white;
|
||||
border: 2px solid $muted-light;
|
||||
|
||||
border: 2px solid;
|
||||
left: 50%;
|
||||
padding: 1.25rem;
|
||||
position: absolute;
|
||||
|
|
@ -41,8 +44,8 @@
|
|||
}
|
||||
|
||||
.btn-close {
|
||||
@include color('color', 'primary-light');
|
||||
@include transition;
|
||||
color: $primary-light;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
height: 1.1rem;
|
||||
|
|
@ -55,7 +58,7 @@
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $primary;
|
||||
@include color('color', 'primary');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +70,7 @@
|
|||
|
||||
h5,
|
||||
.modal-subtitle {
|
||||
color: $secondary;
|
||||
@include color('color', 'secondary');
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -84,7 +87,7 @@
|
|||
}
|
||||
|
||||
.paper-btn {
|
||||
background: $white;
|
||||
@include color('background', 'main-background');
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -101,7 +104,7 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:visited {
|
||||
color: $primary;
|
||||
@include color('color', 'primary');
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
nav {
|
||||
background-color: $main-background;
|
||||
@include color('background-color', 'main-background');
|
||||
display: flex;
|
||||
padding: 0.3rem;
|
||||
position: relative;
|
||||
|
|
@ -13,11 +13,11 @@ nav {
|
|||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
background-color: $primary;
|
||||
border-bottom: 5px solid $primary;
|
||||
@include color('background-color', 'primary');
|
||||
@include color('border-color', 'primary');
|
||||
@include color('color', 'primary');
|
||||
border-bottom-left-radius: 15px 5px;
|
||||
border-bottom-right-radius: 15px 3px;
|
||||
color: $primary;
|
||||
margin: 6px 0;
|
||||
transition: 0.4s;
|
||||
width: 2rem;
|
||||
|
|
@ -70,16 +70,20 @@ nav {
|
|||
}
|
||||
|
||||
a {
|
||||
@include color('color', 'primary');
|
||||
@include color('border-bottom-color', 'primary');
|
||||
background-image: none;
|
||||
border-bottom: 5px solid $primary;
|
||||
border-bottom-left-radius: 15px 3px;
|
||||
border-bottom-right-radius: 15px 5px;
|
||||
color: $primary;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 5px;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 5px solid $primary-light;
|
||||
@include color('border-color', 'primary-light');
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 5px;
|
||||
}
|
||||
|
||||
ul.inline li a {
|
||||
|
|
@ -135,20 +139,24 @@ nav {
|
|||
}
|
||||
|
||||
.collapsible label {
|
||||
border: 2px solid #41403e;
|
||||
@include color('border-color', 'primary');
|
||||
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.collapsible > button { // Leaving for backwards compatibility. See docs for proper usage
|
||||
.collapsible > button {
|
||||
// Leaving for backwards compatibility. See docs for proper usage
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.collapsible > button, // Leaving for backwards compatibility. See docs for proper usage
|
||||
.collapsible > label {
|
||||
background-color: $main-background;
|
||||
@include color('background-color', 'main-background');
|
||||
display: none;
|
||||
font-size: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
|
|
|
|||
|
|
@ -18,8 +18,10 @@
|
|||
&::after {
|
||||
@include border-style();
|
||||
@include transition(opacity);
|
||||
background: $light-dark;
|
||||
border: 2px solid $primary;
|
||||
@include color('background-color', 'light-dark');
|
||||
@include color('border-color', 'primary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
color: $white;
|
||||
font-size: 0.7em;
|
||||
left: 50%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.progress {
|
||||
@include border-style(5);
|
||||
border: 2px solid $primary;
|
||||
@include color('border-color', 'primary');
|
||||
border: 2px solid;
|
||||
box-shadow: $shadow-hover;
|
||||
height: 1.2rem;
|
||||
overflow: hidden;
|
||||
|
|
@ -9,8 +10,9 @@
|
|||
.bar {
|
||||
@include border-style(5);
|
||||
@include transition;
|
||||
background-color: $primary-light;
|
||||
border-right: 2px solid $primary;
|
||||
@include color('background-color', 'primary-light');
|
||||
@include color('border-color', 'primary');
|
||||
border-right: 2px solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.6rem;
|
||||
|
|
@ -25,7 +27,7 @@
|
|||
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
&.#{$colorName} {
|
||||
background-color: $color-light;
|
||||
@include color('background-color', #{$colorName}-light);
|
||||
|
||||
&.striped {
|
||||
@include striped-background($color-light);
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@
|
|||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+label {
|
||||
border-bottom: solid 3px $secondary;
|
||||
color: $primary;
|
||||
&:checked + label {
|
||||
@include color(color, 'primary');
|
||||
@include color('border-bottom-color', 'secondary');
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
|
||||
@for $num from 1 through 5 {
|
||||
|
|
@ -21,7 +23,7 @@
|
|||
}
|
||||
|
||||
label {
|
||||
color: $primary-light;
|
||||
@include color('color', primary-light);
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin: 0 0 -1px;
|
||||
|
|
@ -29,7 +31,7 @@
|
|||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $muted;
|
||||
@include color('color', muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,27 @@
|
|||
code {
|
||||
background-color: lighten($primary, 70%);
|
||||
@include color('color', 'secondary');
|
||||
@include color('background-color', 'primary-shaded-70');
|
||||
border-radius: 3px;
|
||||
color: $secondary;
|
||||
font-size: 80%;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: $primary;
|
||||
@include color('color', 'primary-inverse');
|
||||
@include color('background-color', 'primary');
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
font-size: 80%;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: lighten($primary, 73%);
|
||||
border: 1px solid lighten($primary, 50%);
|
||||
@include color('color', 'inverse-primary');
|
||||
@include color('background-color', 'primary-shaded-70');
|
||||
@include color('border-color', 'primary-shaded-50');
|
||||
|
||||
border-radius: 3px;
|
||||
color: $primary;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
|
|
@ -29,8 +32,8 @@ pre {
|
|||
word-wrap: break-word;
|
||||
|
||||
code {
|
||||
@include color('color', 'inverse-primary');
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
padding: initial;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
html {
|
||||
color: $font-color;
|
||||
@include color('color', 'primary');
|
||||
font-family: $body-font, sans-serif;
|
||||
font-size: $global-font-size;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
img {
|
||||
@include border-style();
|
||||
border: 2px solid $primary;
|
||||
@include color('border-color', 'primary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ table {
|
|||
}
|
||||
|
||||
&.table-hover tbody tr:hover {
|
||||
color: $secondary;
|
||||
@include color('color', 'secondary');
|
||||
}
|
||||
|
||||
&.table-alternating tbody tr:nth-of-type(even) {
|
||||
|
|
|
|||
|
|
@ -21,21 +21,236 @@ $warning-light: lighten($warning, 30%) !default;
|
|||
$danger-light: lighten($danger, 45%) !default;
|
||||
$muted-light: lighten($muted, 35%) !default;
|
||||
|
||||
$primary-dark: darken($primary, 50%) !default;
|
||||
$secondary-dark: darken($secondary, 50%) !default;
|
||||
$success-dark: darken($success, 30%) !default;
|
||||
$warning-dark: darken($warning, 30%) !default;
|
||||
$danger-dark: darken($danger, 45%) !default;
|
||||
$muted-dark: darken($muted, 35%) !default;
|
||||
|
||||
$primary-light-10: lighten($primary, 10%) !default;
|
||||
$secondary-light-10: lighten($secondary, 10%) !default;
|
||||
$success-light-10: lighten($success, 10%) !default;
|
||||
$warning-light-10: lighten($warning, 10%) !default;
|
||||
$danger-light-10: lighten($danger, 10%) !default;
|
||||
$muted-light-10: lighten($muted, 10%) !default;
|
||||
|
||||
$primary-dark-10: darken($primary, 10%) !default;
|
||||
$secondary-dark-10: darken($secondary, 10%) !default;
|
||||
$success-dark-10: darken($success, 10%) !default;
|
||||
$warning-dark-10: darken($warning, 10%) !default;
|
||||
$danger-dark-10: darken($danger, 10%) !default;
|
||||
$muted-dark-10: darken($muted, 10%) !default;
|
||||
|
||||
$primary-shaded-70: lighten($primary, 70%) !default;
|
||||
$primary-shaded-50: lighten($primary, 50%) !default;
|
||||
|
||||
$white-dark: rgba(#000, 0.03) !default;
|
||||
$white-dark-light-80: lighten($white-dark, 80%) !default;
|
||||
$light-dark: rgba(#000, 0.7) !default;
|
||||
$white: rgba(#fff, 1) !default;
|
||||
$main-background: rgba(#fff, 1) !default;
|
||||
$black: rgba(#000, 1) !default;
|
||||
$main-background-light: lighten($main-background, 50%) !default;
|
||||
|
||||
$primary-text: #fff !default;
|
||||
$secondary-text: $primary !default;
|
||||
$success-text: $primary !default;
|
||||
$warning-text: $primary !default;
|
||||
$danger-text: $primary !default;
|
||||
$muted-text: $primary !default;
|
||||
$primary-text: $primary-dark-10 !default;
|
||||
$secondary-text: $secondary-dark-10 !default;
|
||||
$success-text: $success-dark-10 !default;
|
||||
$warning-text: $warning-dark-10 !default;
|
||||
$danger-text: $danger-dark-10 !default;
|
||||
$muted-text: $muted-dark-10 !default;
|
||||
|
||||
$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
|
||||
$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
|
||||
|
||||
$primary-inverse: #fff !default;
|
||||
|
||||
|
||||
// Set dark theme colors
|
||||
|
||||
$dark-primary: #fff !default;
|
||||
$dark-secondary: #0071de !default;
|
||||
|
||||
$dark-success: #189418 !default;
|
||||
$dark-warning: #ddcd45 !default;
|
||||
$dark-danger: #ff8c86 !default;
|
||||
$dark-muted: #868e96 !default;
|
||||
|
||||
$dark-primary-light: lighten($dark-primary, 5%) !default;
|
||||
$dark-secondary-light: lighten($dark-secondary, 5%) !default;
|
||||
$dark-success-light: lighten($dark-success, 5%) !default;
|
||||
$dark-warning-light: lighten($dark-warning, 5%) !default;
|
||||
$dark-danger-light: lighten($dark-danger, 5%) !default;
|
||||
$dark-muted-light: lighten($dark-muted, 5%) !default;
|
||||
|
||||
$dark-primary-dark: darken($dark-primary, 50%) !default;
|
||||
$dark-secondary-dark: darken($dark-secondary, 50%) !default;
|
||||
$dark-success-dark: darken($dark-success, 30%) !default;
|
||||
$dark-warning-dark: darken($dark-warning, 30%) !default;
|
||||
$dark-danger-dark: darken($dark-danger, 45%) !default;
|
||||
$dark-muted-dark: darken($dark-muted, 35%) !default;
|
||||
|
||||
$dark-primary-light-10: lighten($dark-primary, 10%) !default;
|
||||
$dark-secondary-light-10: lighten($dark-secondary, 10%) !default;
|
||||
$dark-success-light-10: lighten($dark-success, 10%) !default;
|
||||
$dark-warning-light-10: lighten($dark-warning, 10%) !default;
|
||||
$dark-danger-light-10: lighten($dark-danger, 10%) !default;
|
||||
$dark-muted-light-10: lighten($dark-muted, 10%) !default;
|
||||
|
||||
$dark-primary-dark-10: darken($dark-primary, 10%) !default;
|
||||
$dark-secondary-dark-10: darken($dark-secondary, 10%) !default;
|
||||
$dark-success-dark-10: darken($dark-success, 10%) !default;
|
||||
$dark-warning-dark-10: darken($dark-warning, 10%) !default;
|
||||
$dark-danger-dark-10: darken($dark-danger, 10%) !default;
|
||||
$dark-muted-dark-10: darken($dark-muted, 10%) !default;
|
||||
|
||||
$dark-primary-shaded-70: darken($primary, 7%) !default;
|
||||
$dark-primary-shaded-50: darken($primary, 5%) !default;
|
||||
|
||||
$dark-white-dark: rgba(#fff, 0.03) !default;
|
||||
$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default;
|
||||
$dark-light-dark: rgba(#fff, 0.7) !default;
|
||||
$dark-white: rgba(#fff, 1) !default;
|
||||
$dark-main-background: rgba($primary, 1) !default;
|
||||
$dark-main-background-light: lighten($dark-main-background, 50%) !default;
|
||||
$dark-black: rgba(#000, 1) !default;
|
||||
|
||||
$dark-primary-text: $primary !default;
|
||||
$dark-secondary-text: $dark-secondary-dark-10 !default;
|
||||
$dark-success-text: $dark-success-dark-10 !default;
|
||||
$dark-warning-text: $dark-warning-dark-10 !default;
|
||||
$dark-danger-text: $dark-danger-dark-10 !default;
|
||||
$dark-muted-text: $dark-muted-dark-10 !default;
|
||||
|
||||
$dark-shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
|
||||
$dark-shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
|
||||
|
||||
$dark-primary-inverse: $primary !default;
|
||||
|
||||
|
||||
|
||||
$theme-map: (
|
||||
light: (
|
||||
primary: $primary,
|
||||
secondary: $secondary,
|
||||
success: $success,
|
||||
warning: $warning,
|
||||
danger: $danger,
|
||||
muted: $muted,
|
||||
primary-light: $primary-light,
|
||||
secondary-light:$secondary-light,
|
||||
success-light:$success-light,
|
||||
warning-light:$warning-light,
|
||||
danger-light:$danger-light,
|
||||
muted-light:$muted-light,
|
||||
primary-dark: $primary-dark,
|
||||
secondary-dark:$secondary-dark,
|
||||
success-dark:$success-dark,
|
||||
warning-dark:$warning-dark,
|
||||
danger-dark:$danger-dark,
|
||||
muted-dark:$muted-dark,
|
||||
primary-light-10:$primary-light-10,
|
||||
secondary-light-10:$secondary-light-10,
|
||||
success-light-10:$success-light-10,
|
||||
warning-light-10:$warning-light-10,
|
||||
danger-light-10:$danger-light-10,
|
||||
muted-light-10:$muted-light-10,
|
||||
primary-dark-10:$primary-dark-10,
|
||||
secondary-dark-10:$secondary-dark-10,
|
||||
success-dark-10:$success-dark-10,
|
||||
warning-dark-10:$warning-dark-10,
|
||||
danger-dark-10:$danger-dark-10,
|
||||
muted-dark-10:$muted-dark-10,
|
||||
primary-shaded-50: $primary-shaded-50,
|
||||
primary-shaded-70: $primary-shaded-70,
|
||||
white-dark:$white-dark,
|
||||
white-dark-light-80:$white-dark-light-80,
|
||||
light-dark:$light-dark,
|
||||
'white':$white,
|
||||
main-background: $main-background,
|
||||
main-background-light: $main-background-light,
|
||||
'black': $black,
|
||||
primary-text:$primary-text,
|
||||
secondary-text:$secondary-text,
|
||||
success-text:$success-text,
|
||||
warning-text:$warning-text,
|
||||
danger-text:$danger-text,
|
||||
muted-text:$muted-text,
|
||||
shadow-color-regular: $shadow-color-regular,
|
||||
shadow-color-hover: $shadow-color-hover,
|
||||
primary-inverse: $primary-inverse,
|
||||
),
|
||||
dark: (
|
||||
primary: $dark-primary,
|
||||
secondary: $dark-secondary,
|
||||
success: $dark-success,
|
||||
warning: $dark-warning,
|
||||
danger: $dark-danger,
|
||||
muted: $dark-muted,
|
||||
primary-light: $dark-primary-light,
|
||||
secondary-light:$dark-secondary-light,
|
||||
success-light:$dark-success-light,
|
||||
warning-light:$dark-warning-light,
|
||||
danger-light:$dark-danger-light,
|
||||
muted-light:$dark-muted-light,
|
||||
primary-dark: $dark-primary-dark,
|
||||
secondary-dark:$dark-secondary-dark,
|
||||
success-dark:$dark-success-dark,
|
||||
warning-dark:$dark-warning-dark,
|
||||
danger-dark:$dark-danger-dark,
|
||||
muted-dark:$dark-muted-dark,
|
||||
primary-light-10:$dark-primary-light-10,
|
||||
secondary-light-10:$dark-secondary-light-10,
|
||||
success-light-10:$dark-success-light-10,
|
||||
warning-light-10:$dark-warning-light-10,
|
||||
danger-light-10:$dark-danger-light-10,
|
||||
muted-light-10:$dark-muted-light-10,
|
||||
primary-dark-10:$dark-primary-dark-10,
|
||||
secondary-dark-10:$dark-secondary-dark-10,
|
||||
success-dark-10:$dark-success-dark-10,
|
||||
warning-dark-10:$dark-warning-dark-10,
|
||||
danger-dark-10:$dark-danger-dark-10,
|
||||
muted-dark-10:$dark-muted-dark-10,
|
||||
primary-shaded-50: $dark-primary-shaded-50,
|
||||
primary-shaded-70: $dark-primary-shaded-70,
|
||||
white-dark:$dark-white-dark,
|
||||
white-dark-light-80:$dark-white-dark-light-80,
|
||||
light-dark:$dark-light-dark,
|
||||
'white':$dark-white,
|
||||
main-background: $dark-main-background,
|
||||
main-background-light: $dark-main-background-light,
|
||||
'black': $dark-black,
|
||||
primary-text:$dark-primary-text,
|
||||
secondary-text:$dark-secondary-text,
|
||||
success-text:$dark-success-text,
|
||||
warning-text:$dark-warning-text,
|
||||
danger-text:$dark-danger-text,
|
||||
muted-text:$dark-muted-text,
|
||||
shadow-color-regular: $dark-shadow-color-regular,
|
||||
shadow-color-hover: $dark-shadow-color-hover,
|
||||
primary-inverse: $dark-primary-inverse,
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
html {
|
||||
@each $var in map-keys(map-get($theme-map, 'light')) {
|
||||
--#{$var}: #{map-get(map-get($theme-map, 'light'), $var)};
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
@each $var in map-keys(map-get($theme-map, 'dark')) {
|
||||
--#{$var}: #{map-get(map-get($theme-map, 'dark'), $var)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin color($property, $varName) {
|
||||
// IE falls back to light theme always
|
||||
#{$property}: #{map-get(map-get($theme-map, 'light'), 'primary')};
|
||||
#{$property}: var(--#{$varName});
|
||||
}
|
||||
|
||||
// Map to set your color names
|
||||
/* stylelint-disable */
|
||||
|
|
@ -53,11 +268,11 @@ $colors: (primary, $primary, $primary-light, $primary-text),
|
|||
*/
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.text-#{$colorName} {
|
||||
color: $color;
|
||||
@include color('color',#{$colorName});
|
||||
}
|
||||
|
||||
.background-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
@include color('background-color',#{$colorName}-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ hr {
|
|||
}
|
||||
|
||||
.paper {
|
||||
background-color: $main-background;
|
||||
@include color('background-color', 'main-background');
|
||||
border: 1px solid $primary-light;
|
||||
box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
|
||||
margin-bottom: 1rem;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
.border {
|
||||
border: 2px solid $primary;
|
||||
@include color('border-color','primary' );
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border,
|
||||
|
|
@ -35,11 +36,13 @@
|
|||
}
|
||||
|
||||
.child-borders>* {
|
||||
border: 2px solid $primary;
|
||||
@include color('border-color', 'primary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
border-color: $white;
|
||||
@include color('border-color', 'white');
|
||||
}
|
||||
|
||||
.border-dotted {
|
||||
|
|
@ -56,6 +59,6 @@
|
|||
|
||||
@each $colorName, $color in $colors {
|
||||
.border-#{$colorName} {
|
||||
border-color: $color;
|
||||
@include color('border-color', #{$colorName});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
// Copyright (c) 2012 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
|
||||
|
||||
// A cross-platform mechanism for determining how to run the build.
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var UNIX_BUILD_COMMAND = "./jake.sh";
|
||||
var WINDOWS_BUILD_COMMAND = "jake.bat";
|
||||
|
||||
var os = require("os");
|
||||
|
||||
exports.get = function() {
|
||||
return os.platform() === "win32" ? WINDOWS_BUILD_COMMAND : UNIX_BUILD_COMMAND;
|
||||
//return WINDOWS_BUILD_COMMAND;
|
||||
};
|
||||
|
||||
}());
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
// Karma configuration
|
||||
// Quixote-specific configuration starts with "QUIXOTE:"
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var paths = require("./paths.js");
|
||||
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
|
||||
// base path, that will be used to resolve files and exclude
|
||||
basePath: '../../..',
|
||||
|
||||
// frameworks to use
|
||||
frameworks: ['mocha', 'commonjs'],
|
||||
|
||||
middleware: ['node-modules'],
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
'tests/*.js',
|
||||
'tests/vendor/*.js',
|
||||
"node_modules/chai/chai.js",
|
||||
//'tests/**/*.js',
|
||||
//'node_modules/**/*.js',
|
||||
//'node_modules/**/*.js',
|
||||
// QUIXOTE: Serve the CSS file so we can load it in our tests
|
||||
// Mark it `included: false` so Karma doesn't load it automatically
|
||||
{ pattern: 'dist/paper.css', included: false }
|
||||
],
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [],
|
||||
|
||||
// preprocess matching files before serving them to the browser
|
||||
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: {
|
||||
'tests/*.js': ['commonjs'],
|
||||
'tests/vendor/*.js': ['commonjs'],
|
||||
},
|
||||
|
||||
// test results reporter to use
|
||||
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
|
||||
reporters: ['dots'],
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
// level of logging
|
||||
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
logLevel: config.LOG_INFO,
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
autoWatch: false,
|
||||
|
||||
// Start these browsers, currently available:
|
||||
// - Chrome
|
||||
// - ChromeCanary
|
||||
// - Firefox
|
||||
// - Opera
|
||||
// - Safari (only Mac)
|
||||
// - PhantomJS
|
||||
// - IE (only Windows)
|
||||
browsers: [],
|
||||
|
||||
// If browser does not capture in given timeout [ms], kill it
|
||||
captureTimeout: 60000,
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, it capture browsers, run tests and exit
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
|
||||
}());
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
// Copyright (c) 2015 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
|
||||
|
||||
// Lists commonly-used directories. They're all relative to the project root.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
module.exports = {
|
||||
generatedDir: "generated",
|
||||
testDir: "generated/test",
|
||||
distDir: "generated/dist",
|
||||
clientDistDir: "generated/dist/client",
|
||||
|
||||
buildDir: "build",
|
||||
clientDir: "src",
|
||||
clientEntryPoint: "src/toggle.js",
|
||||
clientDistBundle: "generated/dist/client/bundle.js"
|
||||
};
|
||||
|
||||
}());
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// Copyright (c) 2014 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
// Uncomment and modify the following list to cause the build to fail unless these browsers are tested.
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
module.exports = [
|
||||
//"IE 10.0.0 (Windows 7 0.0.0)",
|
||||
//"Firefox 41.0.0 (Mac OS X 10.10.0)",
|
||||
//"Chrome 46.0.2490 (Mac OS X 10.10.5)",
|
||||
//"Safari 9.0.1 (Mac OS X 10.10.5)",
|
||||
//"Mobile Safari 8.0.0 (iOS 8.4.0)",
|
||||
//"Chrome Mobile 44.0.2403 (Android 6.0.0)"
|
||||
];
|
||||
|
||||
}());
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
|
||||
|
||||
// Main build file. Contains all tasks needed for normal development.
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var startTime = Date.now();
|
||||
|
||||
var shell = require("../../../node_modules/shelljs/shell.js");
|
||||
var karma = require("simplebuild-karma");
|
||||
var browserify = require("../util/browserify_runner.js");
|
||||
|
||||
var browsers = require("../config/tested_browsers.js");
|
||||
var paths = require("../config/paths.js");
|
||||
|
||||
var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
|
||||
|
||||
var strict = !process.env.loose;
|
||||
|
||||
|
||||
//*** GENERAL
|
||||
|
||||
desc("Lint and test");
|
||||
task("default", [ "lint", "test" ], function() {
|
||||
var elapsedSeconds = (Date.now() - startTime) / 1000;
|
||||
console.log("\n\nBUILD OK (" + elapsedSeconds.toFixed(2) + "s)");
|
||||
});
|
||||
|
||||
desc("Start server (for manual testing)");
|
||||
task("run", [ "build" ], function() {
|
||||
jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
|
||||
}, { async: true });
|
||||
|
||||
desc("Delete generated files");
|
||||
task("clean", function() {
|
||||
shell.rm("-rf", paths.generatedDir);
|
||||
});
|
||||
|
||||
|
||||
//*** LINT
|
||||
/** */
|
||||
desc("Lint everything");
|
||||
task("lint", ["lintNode", "lintClient"]);
|
||||
|
||||
task("lintNode", function() {
|
||||
process.stdout.write("Linting Node.js code: ");
|
||||
|
||||
}, { async: false });
|
||||
|
||||
task("lintClient", function() {
|
||||
process.stdout.write("Linting browser code: ");
|
||||
|
||||
}, { async: false });
|
||||
|
||||
//*** TEST
|
||||
|
||||
desc("Start Karma server -- run this first");
|
||||
task("karma", function() {
|
||||
karma.start({
|
||||
configFile: KARMA_CONFIG
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
desc("Run tests");
|
||||
task("test", function() {
|
||||
console.log("Testing browser code: ");
|
||||
|
||||
var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
|
||||
karma.run({
|
||||
configFile: KARMA_CONFIG,
|
||||
expectedBrowsers: browsers,
|
||||
strict: strict,
|
||||
capture: browsersToCapture
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
|
||||
//*** BUILD
|
||||
|
||||
desc("Build distribution package");
|
||||
task("build", [ "prepDistDir", "buildClient" ]);
|
||||
|
||||
task("prepDistDir", function() {
|
||||
shell.rm("-rf", paths.distDir);
|
||||
});
|
||||
|
||||
task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
|
||||
console.log("Copying client code: .");
|
||||
shell.cp(
|
||||
paths.clientDir + "/*.html",
|
||||
paths.clientDir + "/*.css",
|
||||
paths.clientDir + "/*.svg",
|
||||
paths.clientDistDir
|
||||
);
|
||||
});
|
||||
|
||||
task("bundleClientJs", [ paths.clientDistDir ], function() {
|
||||
console.log("Bundling browser code with Browserify: .");
|
||||
browserify.bundle({
|
||||
entry: paths.clientEntryPoint,
|
||||
outfile: paths.clientDistBundle,
|
||||
options: {
|
||||
standalone: "toggle",
|
||||
debug: true
|
||||
}
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
|
||||
//*** CREATE DIRECTORIES
|
||||
|
||||
directory(paths.testDir);
|
||||
directory(paths.clientDistDir);
|
||||
|
||||
}());
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
|
||||
|
||||
// Main build file. Contains all tasks needed for normal development.
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var startTime = Date.now();
|
||||
|
||||
var shell = require("../../../node_modules/shelljs/shell.js");
|
||||
var karma = require("simplebuild-karma");
|
||||
var browserify = require("../util/browserify_runner.js");
|
||||
|
||||
var browsers = require("../config/tested_browsers.js");
|
||||
var paths = require("../config/paths.js");
|
||||
|
||||
var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
|
||||
|
||||
var strict = !process.env.loose;
|
||||
|
||||
|
||||
//*** GENERAL
|
||||
|
||||
desc("Lint and test");
|
||||
task("default", [ "lint", "test" ], function() {
|
||||
var elapsedSeconds = (Date.now() - startTime) / 1000;
|
||||
console.log("\n\nBUILD OK (" + elapsedSeconds.toFixed(2) + "s)");
|
||||
});
|
||||
|
||||
desc("Start server (for manual testing)");
|
||||
task("run", [ "build" ], function() {
|
||||
jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
|
||||
}, { async: true });
|
||||
|
||||
desc("Delete generated files");
|
||||
task("clean", function() {
|
||||
shell.rm("-rf", paths.generatedDir);
|
||||
});
|
||||
|
||||
|
||||
//*** LINT
|
||||
/** */
|
||||
desc("Lint everything");
|
||||
task("lint", ["lintNode", "lintClient"]);
|
||||
|
||||
task("lintNode", function() {
|
||||
process.stdout.write("Linting Node.js code: ");
|
||||
|
||||
}, { async: false });
|
||||
|
||||
task("lintClient", function() {
|
||||
process.stdout.write("Linting browser code: ");
|
||||
|
||||
}, { async: false });
|
||||
|
||||
//*** TEST
|
||||
|
||||
desc("Start Karma server -- run this first");
|
||||
task("karma", function() {
|
||||
karma.start({
|
||||
configFile: KARMA_CONFIG
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
desc("Run tests");
|
||||
task("test", function() {
|
||||
console.log("Testing browser code: ");
|
||||
|
||||
var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
|
||||
karma.run({
|
||||
configFile: KARMA_CONFIG,
|
||||
expectedBrowsers: browsers,
|
||||
strict: strict,
|
||||
capture: browsersToCapture
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
|
||||
//*** BUILD
|
||||
|
||||
desc("Build distribution package");
|
||||
task("build", [ "prepDistDir", "buildClient" ]);
|
||||
|
||||
task("prepDistDir", function() {
|
||||
shell.rm("-rf", paths.distDir);
|
||||
});
|
||||
|
||||
task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
|
||||
console.log("Copying client code: .");
|
||||
shell.cp(
|
||||
paths.clientDir + "/*.html",
|
||||
paths.clientDir + "/*.css",
|
||||
paths.clientDir + "/*.svg",
|
||||
paths.clientDistDir
|
||||
);
|
||||
});
|
||||
|
||||
task("bundleClientJs", [ paths.clientDistDir ], function() {
|
||||
console.log("Bundling browser code with Browserify: .");
|
||||
browserify.bundle({
|
||||
entry: paths.clientEntryPoint,
|
||||
outfile: paths.clientDistBundle,
|
||||
options: {
|
||||
standalone: "toggle",
|
||||
debug: true
|
||||
}
|
||||
}, complete, fail);
|
||||
}, { async: true });
|
||||
|
||||
|
||||
//*** CREATE DIRECTORIES
|
||||
|
||||
directory(paths.testDir);
|
||||
directory(paths.clientDistDir);
|
||||
|
||||
}());
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@echo off
|
||||
REM Runs Jake from node_modules directory, preventing it from needing to be installed globally
|
||||
REM Also ensures node modules have been installed
|
||||
REM There's no Quixote-specific configuration in this file.
|
||||
|
||||
if not exist node_modules\.bin\jake.cmd call npm install
|
||||
node_modules\.bin\jake %*
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
# Runs Jake from node_modules directory, preventing it from needing to be installed globally
|
||||
# Also ensures node modules have been installed
|
||||
# There's no Quixote-specific configuration in this file.
|
||||
|
||||
[ ! -f node_modules/.bin/jake ] && echo "Installing npm modules:" && npm install
|
||||
node_modules/.bin/jake $*
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
// Copyright (c) 2015 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
|
||||
|
||||
// Automatically runs build when files change.
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var nodemon = require("nodemon");
|
||||
var buildCommand = require("../config/build_command.js");
|
||||
var paths = require("../config/paths.js");
|
||||
|
||||
console.log("*** Using nodemon to run " + buildCommand.get() + ". Type 'rs<enter>' to force restart.");
|
||||
nodemon({
|
||||
ext: "sh bat json js html css",
|
||||
ignore: paths.generatedDir,
|
||||
exec: buildCommand.get() + " " + process.argv.slice(2).join(" "),
|
||||
execMap: {
|
||||
sh: "/bin/sh",
|
||||
bat: "cmd.exe /c",
|
||||
cmd: "cmd.exe /c"
|
||||
}
|
||||
}).on("restart", function(files) {
|
||||
if (files) console.log("*** Restarting due to", files);
|
||||
else console.log("*** Restarting");
|
||||
});
|
||||
|
||||
}());
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/* Copyright (c) 2014 Titanium I.T. LLC - See LICENSE.txt for license */
|
||||
|
||||
// Helper function for running Browserify
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
"use strict";
|
||||
|
||||
var fs = require("fs");
|
||||
var path = require("path");
|
||||
var browserify = require("browserify");
|
||||
|
||||
exports.bundle = function(config, success, failure) {
|
||||
var b = browserify(config.options);
|
||||
|
||||
b.add(path.resolve(config.entry));
|
||||
b.bundle(function(err, bundle) {
|
||||
if (err) return failure(err);
|
||||
fs.writeFileSync(config.outfile, bundle);
|
||||
return success();
|
||||
});
|
||||
};
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
// Copyright (c) 2012-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
|
||||
|
||||
// Helper functions for running Karma
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var path = require("path");
|
||||
var sh = require("./sh.js");
|
||||
var runner = require("karma/lib/runner");
|
||||
var server = require("karma/lib/server");
|
||||
|
||||
var KARMA = "node node_modules/karma/bin/karma";
|
||||
|
||||
exports.serve = function(configFile, success, fail) {
|
||||
var command = KARMA + " start " + configFile;
|
||||
sh.run(command, success, function () {
|
||||
fail("Could not start Karma server");
|
||||
});
|
||||
};
|
||||
|
||||
exports.runTests = function(options, success, fail) {
|
||||
options.capture = options.capture || [];
|
||||
var config = {
|
||||
configFile: path.resolve(options.configFile),
|
||||
browsers: options.capture,
|
||||
singleRun: options.capture.length > 0
|
||||
};
|
||||
|
||||
var runKarma = runner.run.bind(runner);
|
||||
if (config.singleRun) runKarma = server.start.bind(server);
|
||||
|
||||
var stdout = new CapturedStdout();
|
||||
runKarma(config, function(exitCode) {
|
||||
stdout.restore();
|
||||
|
||||
if (exitCode) return fail("Client tests failed (did you start the Karma server?)");
|
||||
var browserMissing = checkRequiredBrowsers(options.browsers, stdout);
|
||||
if (browserMissing && options.strict) return fail("Did not test all browsers");
|
||||
if (stdout.capturedOutput.indexOf("TOTAL: 0 SUCCESS") !== -1) return fail("No tests were run!");
|
||||
|
||||
return success();
|
||||
});
|
||||
};
|
||||
|
||||
function checkRequiredBrowsers(requiredBrowsers, stdout) {
|
||||
var browserMissing = false;
|
||||
requiredBrowsers.forEach(function(browser) {
|
||||
browserMissing = lookForBrowser(browser, stdout.capturedOutput) || browserMissing;
|
||||
});
|
||||
return browserMissing;
|
||||
}
|
||||
|
||||
function lookForBrowser(browser, output) {
|
||||
var missing = output.indexOf(browser + ": Executed") === -1;
|
||||
if (missing) console.log("Warning: " + browser + " was not tested!");
|
||||
return missing;
|
||||
}
|
||||
|
||||
function CapturedStdout() {
|
||||
var self = this;
|
||||
self.oldStdout = process.stdout.write;
|
||||
self.capturedOutput = "";
|
||||
|
||||
process.stdout.write = function(data) {
|
||||
self.capturedOutput += data;
|
||||
self.oldStdout.apply(this, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
CapturedStdout.prototype.restore = function() {
|
||||
process.stdout.write = this.oldStdout;
|
||||
};
|
||||
|
||||
}());
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
// Copyright (c) 2014-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
|
||||
|
||||
// Helper function for running Mocha
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var Mocha = require("mocha");
|
||||
var jake = require("jake");
|
||||
|
||||
exports.runTests = function runTests(options, success, failure) {
|
||||
var mocha = new Mocha(options.options);
|
||||
var files = deglob(options.files);
|
||||
files.forEach(mocha.addFile.bind(mocha));
|
||||
|
||||
// This is a bit of a hack. The issue is this: during test execution, if an exception is thrown inside
|
||||
// of a callback (and keep in mind that assertions throw exceptions), there's no way for Mocha to catch
|
||||
// that exception.
|
||||
// So Mocha registers an 'uncaughtException' handler on Node's process object. That way any unhandled
|
||||
// exception is passed to Mocha.
|
||||
// The problem is that Jake ALSO listens for 'uncaughtException'. Its handler and Mocha's handler don't
|
||||
// get along. Somehow the Jake handler seems to terminate Mocha's test run... not sure why. We need to
|
||||
// disable Jake's handler while Mocha is running.
|
||||
// This code disables ALL uncaughtException handlers and then restores them after Mocha is done. It's
|
||||
// very hacky and likely to cause problems in certain edge cases (for example, '.once' listeners aren't
|
||||
// restored properly), but it seems to be working for now.
|
||||
// It might be possible to create a better solution by using Node's 'domain' module. Something to look
|
||||
// into if you're reading this. Another solution is to just spawn Mocha in a separate process, but I
|
||||
// didn't want the time penalty involved. Besides, this seems to be working okay.
|
||||
var savedListeners = disableExceptionListeners();
|
||||
|
||||
var runner = mocha.run(function(failures) {
|
||||
restoreExceptionListeners(savedListeners);
|
||||
if (failures) return failure("Tests failed");
|
||||
else return success();
|
||||
});
|
||||
};
|
||||
|
||||
function deglob(globs) {
|
||||
return new jake.FileList(globs).toArray();
|
||||
}
|
||||
|
||||
function disableExceptionListeners() {
|
||||
var listeners = process.listeners("uncaughtException");
|
||||
process.removeAllListeners("uncaughtException");
|
||||
return listeners;
|
||||
}
|
||||
|
||||
function restoreExceptionListeners(listeners) {
|
||||
listeners.forEach(process.addListener.bind(process, "uncaughtException"));
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
// Copyright (c) 2012-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
|
||||
|
||||
// Helper functions for running processes.
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var jake = require("jake");
|
||||
|
||||
exports.runMany = function(commands, successCallback, failureCallback) {
|
||||
var stdout = [];
|
||||
function serializedSh(command) {
|
||||
if (command) {
|
||||
run(command, function(oneStdout) {
|
||||
stdout.push(oneStdout);
|
||||
serializedSh(commands.shift());
|
||||
}, failureCallback);
|
||||
}
|
||||
else {
|
||||
successCallback(stdout);
|
||||
}
|
||||
}
|
||||
serializedSh(commands.shift());
|
||||
};
|
||||
|
||||
var run = exports.run = function(oneCommand, successCallback, failureCallback) {
|
||||
var stdout = "";
|
||||
var child = jake.createExec(oneCommand);
|
||||
child.on("stdout", function(data) {
|
||||
process.stdout.write(data);
|
||||
stdout += data;
|
||||
});
|
||||
child.on("stderr", function(data) {
|
||||
process.stderr.write(data);
|
||||
});
|
||||
child.on("cmdEnd", function() {
|
||||
successCallback(stdout);
|
||||
});
|
||||
child.on("error", function() {
|
||||
failureCallback(stdout);
|
||||
});
|
||||
|
||||
console.log("> " + oneCommand);
|
||||
child.run();
|
||||
};
|
||||
|
||||
}());
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
// Copyright (c) 2013 Titanium I.T. LLC. All rights reserved. See LICENSE.TXT for details.
|
||||
|
||||
// Helper function for checking version numbers.
|
||||
// There's no Quixote-specific configuration in this file.
|
||||
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var semver = require("semver");
|
||||
|
||||
exports.check = function(options, success, fail) {
|
||||
if (options.strict) {
|
||||
if (semver.neq(options.actual, options.expected)) return failWithQualifier("exactly");
|
||||
}
|
||||
else {
|
||||
if (semver.lt(options.actual, options.expected)) return failWithQualifier("at least");
|
||||
if (semver.neq(options.actual, options.expected)) console.log("Warning: Newer " + options.name +
|
||||
" version than expected. Expected " + options.expected + ", but was " + options.actual + ".");
|
||||
}
|
||||
return success();
|
||||
|
||||
function failWithQualifier(qualifier) {
|
||||
return fail("Incorrect " + options.name + " version. Expected " + qualifier +
|
||||
" " + options.expected + ", but was " + options.actual + ".");
|
||||
}
|
||||
};
|
||||
|
||||
}());
|
||||
151
tests/colors.js
151
tests/colors.js
|
|
@ -1,151 +0,0 @@
|
|||
(function() {
|
||||
"use strict";
|
||||
|
||||
var quixote = require("./vendor/quixote.js");
|
||||
var assert = require("./vendor/chai.js").assert;
|
||||
|
||||
describe("Colors", function() {
|
||||
var frame;
|
||||
var media;
|
||||
var textPrimary;
|
||||
var textSecondary;
|
||||
var textSuccess;
|
||||
var textWarning;
|
||||
var textDanger;
|
||||
var textMuted;
|
||||
|
||||
var backgroundPrimary;
|
||||
var backgroundSecondary;
|
||||
var backgroundSuccess;
|
||||
var backgroundWarning;
|
||||
var backgroundDanger;
|
||||
var backgroundMuted;
|
||||
|
||||
var textOverride;
|
||||
var textNotOverride;
|
||||
|
||||
before(function(done) {
|
||||
frame = quixote.createFrame({
|
||||
stylesheet: "/base/dist/paper.css"
|
||||
}, done);
|
||||
});
|
||||
|
||||
after(function() {
|
||||
frame.remove();
|
||||
});
|
||||
|
||||
beforeEach(function() {
|
||||
frame.reset();
|
||||
|
||||
media = frame.add(
|
||||
"<div class='media'>" +
|
||||
"<div id='text'>" +
|
||||
"<p class='text-primary' id='textPrimary'>text-primary</p>" +
|
||||
"<p class='text-secondary' id='textSecondary'>text-secondary</p>" +
|
||||
"<p class='text-success' id='textSuccess'>text-success</p>" +
|
||||
"<p class='text-warning' id='textWarning'>text-warning</p>" +
|
||||
"<p class='text-danger' id='textDanger'>text-danger</p>" +
|
||||
"<p class='text-muted' id='textMuted'>text-muted</p>" +
|
||||
"</div>" +
|
||||
"<div id='background'>" +
|
||||
"<div class='background-primary' id='backgroundPrimary'>background-primary</div>" +
|
||||
"<div class='background-secondary' id='backgroundSecondary'>background-secondary</div>" +
|
||||
"<div class='background-success' id='backgroundSuccess'>background-success</div>" +
|
||||
"<div class='background-warning' id='backgroundWarning'>background-warning</div>" +
|
||||
"<div class='background-danger' id='backgroundDanger'>background-danger</div>" +
|
||||
"<div class='background-muted' id='backgroundMuted'>background-muted</div>" +
|
||||
"</div>" +
|
||||
"<div id='inheritance'>" +
|
||||
"<div class='text-primary'>" +
|
||||
"<p class='text-success' id='text-override'>text-override</p>" +
|
||||
"<p id='text-not-override'>text-not-override</p>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>",
|
||||
|
||||
"colors"
|
||||
);
|
||||
|
||||
textPrimary = frame.get("#textPrimary");
|
||||
textSecondary = frame.get("#textSecondary");
|
||||
textSuccess = frame.get("#textSuccess");
|
||||
textWarning = frame.get("#textWarning");
|
||||
textDanger = frame.get("#textDanger");
|
||||
textMuted = frame.get("#textMuted");
|
||||
|
||||
backgroundPrimary = frame.get("#backgroundPrimary");
|
||||
backgroundSecondary = frame.get("#backgroundSecondary");
|
||||
backgroundSuccess = frame.get("#backgroundSuccess");
|
||||
backgroundWarning = frame.get("#backgroundWarning");
|
||||
backgroundDanger = frame.get("#backgroundDanger");
|
||||
backgroundMuted = frame.get("#backgroundMuted");
|
||||
|
||||
textOverride = frame.get("#text-override");
|
||||
textNotOverride = frame.get("#text-not-override");
|
||||
});
|
||||
|
||||
it("Text color is set to primary", function() {
|
||||
assert.equal(textPrimary.getRawStyle("color"), "rgb(65, 64, 62)", "Primary color should be #41403E");
|
||||
});
|
||||
|
||||
it("Text color is set to secondary", function() {
|
||||
assert.equal(textSecondary.getRawStyle("color"), "rgb(0, 113, 222)", "Secondary color should be #0071DE");
|
||||
});
|
||||
|
||||
it("Text color is set to success", function() {
|
||||
assert.equal(textSuccess.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
|
||||
});
|
||||
|
||||
it("Text color is set to warning", function() {
|
||||
assert.equal(textWarning.getRawStyle("color"), "rgb(221, 205, 69)", "Warning color should be #ddcd45");
|
||||
});
|
||||
|
||||
it("Text color is set to danger", function() {
|
||||
assert.equal(textDanger.getRawStyle("color"), "rgb(167, 52, 45)", "Danger color should be #a7342d");
|
||||
});
|
||||
|
||||
it("Text color is set to muted", function() {
|
||||
assert.equal(textMuted.getRawStyle("color"), "rgb(134, 142, 150)", "Muted color should be #868e96");
|
||||
});
|
||||
|
||||
|
||||
|
||||
it("Background color is set to primary", function() {
|
||||
assert.equal(backgroundPrimary.getRawStyle("background-color"), "rgb(193, 192, 189)", "Primary color should be #C1C0BD");
|
||||
});
|
||||
|
||||
it("Background color is set to secondary", function() {
|
||||
assert.equal(backgroundSecondary.getRawStyle("background-color"), "rgb(222, 239, 255)", "Secondary color should be #DEEFFF");
|
||||
});
|
||||
|
||||
it("Background color is set to success", function() {
|
||||
assert.equal(backgroundSuccess.getRawStyle("background-color"), "rgb(208, 219, 194)", "Success color should be #D0BDC2");
|
||||
});
|
||||
|
||||
it("Background color is set to warning", function() {
|
||||
assert.equal(backgroundWarning.getRawStyle("background-color"), "rgb(245, 240, 198)", "Warning color should be #F5F0C6");
|
||||
});
|
||||
|
||||
it("Background color is set to danger", function() {
|
||||
assert.equal(backgroundDanger.getRawStyle("background-color"), "rgb(240, 203, 201)", "Danger color should be #F0CBC9");
|
||||
});
|
||||
|
||||
it("Background color is set to muted", function() {
|
||||
assert.equal(backgroundMuted.getRawStyle("background-color"), "rgb(230, 231, 233)", "Muted color should be #E6E7E9");
|
||||
});
|
||||
|
||||
it("Text overrides parent style", function(){
|
||||
assert.equal(textOverride.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
|
||||
});
|
||||
|
||||
|
||||
|
||||
it("Text overrides parent style", function(){
|
||||
assert.equal(textOverride.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
|
||||
});
|
||||
|
||||
it("Text has parent style", function(){
|
||||
assert.equal(textNotOverride.getRawStyle("color"), "rgb(65, 64, 62)", "Primary color should be #41403E");
|
||||
});
|
||||
});
|
||||
}());
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- smoke test marker: automatopia home page -->
|
||||
<head>
|
||||
<title>Agile Engineering for the Web</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./screen.css">
|
||||
|
||||
<script src="bundle.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Note: This page is for manual demonstration of the example code. It's not tested like real production code should be. -->
|
||||
|
||||
<div class="media">
|
||||
<img id="image" class="media__figure" src="icon.svg" width="25" />
|
||||
<p id="content" class="media__body invisible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var image = document.getElementById("image");
|
||||
var content = document.getElementById("content");
|
||||
toggle.init(image, content, "invisible");
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
10707
tests/vendor/chai.js
vendored
10707
tests/vendor/chai.js
vendored
File diff suppressed because it is too large
Load diff
4195
tests/vendor/quixote.js
vendored
4195
tests/vendor/quixote.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue