deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-20 14:45:01 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'release-1.6.0'

Browse source
This commit is contained in:
rhyneav 2018-10-21 17:52:16 -04:00
parent 0b41ef467c fb9262553a
commit 50dc605b36
18 changed files with 725 additions and 304 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.browserslistrc Normal file
View file

@ -0,0 +1,3 @@
# Browsers that we support (see https://browserl.ist/)
defaults

2
.stylelintrc.json
View file

@ -5,8 +5,6 @@
],
"rules": {
"max-nesting-depth": 5,
"property-no-vendor-prefix": null,
"value-no-vendor-prefix": null,
"selector-no-qualifying-type": null,
"selector-max-compound-selectors": null,
"scss/selector-no-redundant-nesting-selector": null,

14
docs/content/_index.md
View file

@ -6,18 +6,18 @@ weight: -270
#### Download
Download the latest version (1.5.4) using either of the links below. Or
Download the latest version (1.6.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.5.4/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.5.4/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.6.0/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.6.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.5.4. Install with <code>npm install papercss --save</code> and find the CSS in:
PaperCSS is available on NPM, current version 1.6.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.5.4. 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.5.4/dist/paper.css](https://unpkg.com/papercss@1.5.4/dist/paper.css)
* [https://unpkg.com/papercss@1.5.4/dist/paper.min.css](https://unpkg.com/papercss@1.5.4/dist/paper.min.css)
* [https://unpkg.com/papercss@1.6.0/dist/paper.css](https://unpkg.com/papercss@1.6.0/dist/paper.css)
* [https://unpkg.com/papercss@1.6.0/dist/paper.min.css](https://unpkg.com/papercss@1.6.0/dist/paper.min.css)
Here's a quck snippet to get started with PaperCSS:
@ -39,7 +39,7 @@ Here's a quck 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.5.4/dist/paper.min.css">
<link rel="stylesheet" href="https://unpkg.com/papercss@1.6.0/dist/paper.min.css">
<title>Document</title>
</head>
<body>

64
docs/content/docs/components/alerts.md
View file

@ -2,6 +2,8 @@
title: Alerts
description: PaperCSS Alerts
---
### Simple alerts
<div class="row flex-spaces">
<div class="alert alert-primary">
Alert-primary
@ -31,3 +33,65 @@ description: PaperCSS Alerts
<div class="alert alert-danger">Alert-danger</div>
</div>
```
### Dismissible alerts
<div class="row flex-spaces">
<input class="alert-state" id="alert-1" type="checkbox">
<div class="alert alert-primary dismissible">
Alert-primary
<label class="btn-close" for="alert-1">X</label>
</div>
<input class="alert-state" id="alert-2" type="checkbox">
<div class="alert alert-secondary dismissible">
Alert-secondary
<label class="btn-close" for="alert-2">X</label>
</div>
<input class="alert-state" id="alert-3" type="checkbox">
<div class="alert alert-success dismissible">
Alert-success
<label class="btn-close" for="alert-3">X</label>
</div>
<input class="alert-state" id="alert-4" type="checkbox">
<div class="alert alert-warning dismissible">
Alert-warning
<label class="btn-close" for="alert-4">X</label>
</div>
<input class="alert-state" id="alert-5" type="checkbox">
<div class="alert alert-danger dismissible">
Alert-danger
<label class="btn-close" for="alert-5">X</label>
</div>
</div>
#### Code:
```html
<div class="row flex-spaces">
<input class="alert-state" id="alert-1" type="checkbox">
<div class="alert alert-primary dismissible">
Alert-primary
<label class="btn-close" for="alert-1">X</label>
</div>
<input class="alert-state" id="alert-2" type="checkbox">
<div class="alert alert-secondary dismissible">
Alert-secondary
<label class="btn-close" for="alert-2">X</label>
</div>
<input class="alert-state" id="alert-3" type="checkbox">
<div class="alert alert-success dismissible">
Alert-success
<label class="btn-close" for="alert-3">X</label>
</div>
<input class="alert-state" id="alert-4" type="checkbox">
<div class="alert alert-warning dismissible">
Alert-warning
<label class="btn-close" for="alert-4">X</label>
</div>
<input class="alert-state" id="alert-5" type="checkbox">
<div class="alert alert-danger dismissible">
Alert-danger
<label class="btn-close" for="alert-5">X</label>
</div>
</div>
```

196
docs/content/docs/components/progress.md Normal file
View file

@ -0,0 +1,196 @@
---
title: Progress
description: PaperCSS Progress Bars
---
Progress components are built with two HTML elements:
* A `.progress` wrapper element.
* A `.bar` element to show the progress so far.
### Basic usage
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-0"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-50"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-75"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-100"></div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-0"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-50"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-75"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-100"></div>
</div>
</div>
```
Note how we can specify the width using `.w-50`, `.w-75`, etc. If a width class is not provided then 0% is used as default.
### Backgrounds
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar secondary w-40"></div>
</div>
<div class="progress margin-bottom">
<div class="bar success w-55"></div>
</div>
<div class="progress margin-bottom">
<div class="bar warning w-70"></div>
</div>
<div class="progress margin-bottom">
<div class="bar danger w-85"></div>
</div>
<div class="progress margin-bottom">
<div class="bar muted w-100"></div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar secondary w-40"></div>
</div>
<div class="progress margin-bottom">
<div class="bar success w-55"></div>
</div>
<div class="progress margin-bottom">
<div class="bar warning w-70"></div>
</div>
<div class="progress margin-bottom">
<div class="bar danger w-85"></div>
</div>
<div class="progress margin-bottom">
<div class="bar muted w-100"></div>
</div>
</div>
```
### Labels
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-25">25%</div>
</div>
<div class="progress margin-bottom">
<div class="bar secondary w-40">40%</div>
</div>
<div class="progress margin-bottom">
<div class="bar success w-55">55%</div>
</div>
<div class="progress margin-bottom">
<div class="bar warning w-70">70%</div>
</div>
<div class="progress margin-bottom">
<div class="bar danger w-85">85%</div>
</div>
<div class="progress margin-bottom">
<div class="bar muted w-100">100%</div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-25">25%</div>
</div>
<div class="progress margin-bottom">
<div class="bar secondary w-40">40%</div>
</div>
<div class="progress margin-bottom">
<div class="bar success w-55">55%</div>
</div>
<div class="progress margin-bottom">
<div class="bar warning w-70">70%</div>
</div>
<div class="progress margin-bottom">
<div class="bar danger w-85">85%</div>
</div>
<div class="progress margin-bottom">
<div class="bar muted w-100">100%</div>
</div>
</div>
```
### Striped
<div class="row">
<div class="progress margin-bottom">
<div class="bar striped w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped secondary w-40"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped success w-55"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped warning w-70"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped danger w-85"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped muted w-100"></div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="bar striped w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped secondary w-40"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped success w-55"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped warning w-70"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped danger w-85"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped muted w-100"></div>
</div>
</div>
```

5
gulpfile.js
View file

@ -7,11 +7,13 @@ const gulp = require('gulp'),
exec = require('child_process').execFile,
optional = require('optional'),
hugo = optional('hugo-bin'),
gulpStylelint = optional('gulp-stylelint');
gulpStylelint = optional('gulp-stylelint'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
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'))
@ -49,6 +51,7 @@ gulp.task('hugo-build', function (cb) {
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'));

286
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "papercss",
"version": "1.5.4",
"version": "1.6.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -164,6 +164,14 @@
"string-width": "1.0.2"
}
},
"ansi-colors": {
"version": "1.1.0",
"resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
"integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
"requires": {
"ansi-wrap": "0.1.0"
}
},
"ansi-cyan": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/ansi-cyan/-/ansi-cyan-0.1.1.tgz",
@ -1705,7 +1713,6 @@
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
"integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
@ -1713,8 +1720,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-support": {
"version": "1.1.3",
@ -4775,8 +4781,8 @@
"dev": true,
"optional": true,
"requires": {
"delegates": "1.0.0",
"readable-stream": "2.3.6"
"delegates": "^1.0.0",
"readable-stream": "^2.0.6"
}
},
"balanced-match": {
@ -4789,7 +4795,7 @@
"bundled": true,
"dev": true,
"requires": {
"balanced-match": "1.0.0",
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
}
},
@ -4853,7 +4859,7 @@
"dev": true,
"optional": true,
"requires": {
"minipass": "2.2.4"
"minipass": "^2.2.1"
}
},
"fs.realpath": {
@ -4868,14 +4874,14 @@
"dev": true,
"optional": true,
"requires": {
"aproba": "1.2.0",
"console-control-strings": "1.1.0",
"has-unicode": "2.0.1",
"object-assign": "4.1.1",
"signal-exit": "3.0.2",
"string-width": "1.0.2",
"strip-ansi": "3.0.1",
"wide-align": "1.1.2"
"aproba": "^1.0.3",
"console-control-strings": "^1.0.0",
"has-unicode": "^2.0.0",
"object-assign": "^4.1.0",
"signal-exit": "^3.0.0",
"string-width": "^1.0.1",
"strip-ansi": "^3.0.1",
"wide-align": "^1.1.0"
}
},
"glob": {
@ -4884,12 +4890,12 @@
"dev": true,
"optional": true,
"requires": {
"fs.realpath": "1.0.0",
"inflight": "1.0.6",
"inherits": "2.0.3",
"minimatch": "3.0.4",
"once": "1.4.0",
"path-is-absolute": "1.0.1"
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"has-unicode": {
@ -4904,7 +4910,7 @@
"dev": true,
"optional": true,
"requires": {
"safer-buffer": "2.1.2"
"safer-buffer": "^2.1.0"
}
},
"ignore-walk": {
@ -4913,7 +4919,7 @@
"dev": true,
"optional": true,
"requires": {
"minimatch": "3.0.4"
"minimatch": "^3.0.4"
}
},
"inflight": {
@ -4922,8 +4928,8 @@
"dev": true,
"optional": true,
"requires": {
"once": "1.4.0",
"wrappy": "1.0.2"
"once": "^1.3.0",
"wrappy": "1"
}
},
"inherits": {
@ -4942,7 +4948,7 @@
"bundled": true,
"dev": true,
"requires": {
"number-is-nan": "1.0.1"
"number-is-nan": "^1.0.0"
}
},
"isarray": {
@ -4956,7 +4962,7 @@
"bundled": true,
"dev": true,
"requires": {
"brace-expansion": "1.1.11"
"brace-expansion": "^1.1.7"
}
},
"minimist": {
@ -4969,8 +4975,8 @@
"bundled": true,
"dev": true,
"requires": {
"safe-buffer": "5.1.1",
"yallist": "3.0.2"
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
}
},
"minizlib": {
@ -4979,7 +4985,7 @@
"dev": true,
"optional": true,
"requires": {
"minipass": "2.2.4"
"minipass": "^2.2.1"
}
},
"mkdirp": {
@ -5002,9 +5008,9 @@
"dev": true,
"optional": true,
"requires": {
"debug": "2.6.9",
"iconv-lite": "0.4.21",
"sax": "1.2.4"
"debug": "^2.1.2",
"iconv-lite": "^0.4.4",
"sax": "^1.2.4"
}
},
"node-pre-gyp": {
@ -5013,16 +5019,16 @@
"dev": true,
"optional": true,
"requires": {
"detect-libc": "1.0.3",
"mkdirp": "0.5.1",
"needle": "2.2.0",
"nopt": "4.0.1",
"npm-packlist": "1.1.10",
"npmlog": "4.1.2",
"rc": "1.2.7",
"rimraf": "2.6.2",
"semver": "5.5.0",
"tar": "4.4.1"
"detect-libc": "^1.0.2",
"mkdirp": "^0.5.1",
"needle": "^2.2.0",
"nopt": "^4.0.1",
"npm-packlist": "^1.1.6",
"npmlog": "^4.0.2",
"rc": "^1.1.7",
"rimraf": "^2.6.1",
"semver": "^5.3.0",
"tar": "^4"
}
},
"nopt": {
@ -5031,8 +5037,8 @@
"dev": true,
"optional": true,
"requires": {
"abbrev": "1.1.1",
"osenv": "0.1.5"
"abbrev": "1",
"osenv": "^0.1.4"
}
},
"npm-bundled": {
@ -5047,8 +5053,8 @@
"dev": true,
"optional": true,
"requires": {
"ignore-walk": "3.0.1",
"npm-bundled": "1.0.3"
"ignore-walk": "^3.0.1",
"npm-bundled": "^1.0.1"
}
},
"npmlog": {
@ -5057,10 +5063,10 @@
"dev": true,
"optional": true,
"requires": {
"are-we-there-yet": "1.1.4",
"console-control-strings": "1.1.0",
"gauge": "2.7.4",
"set-blocking": "2.0.0"
"are-we-there-yet": "~1.1.2",
"console-control-strings": "~1.1.0",
"gauge": "~2.7.3",
"set-blocking": "~2.0.0"
}
},
"number-is-nan": {
@ -5079,7 +5085,7 @@
"bundled": true,
"dev": true,
"requires": {
"wrappy": "1.0.2"
"wrappy": "1"
}
},
"os-homedir": {
@ -5100,8 +5106,8 @@
"dev": true,
"optional": true,
"requires": {
"os-homedir": "1.0.2",
"os-tmpdir": "1.0.2"
"os-homedir": "^1.0.0",
"os-tmpdir": "^1.0.0"
}
},
"path-is-absolute": {
@ -5122,10 +5128,10 @@
"dev": true,
"optional": true,
"requires": {
"deep-extend": "0.5.1",
"ini": "1.3.5",
"minimist": "1.2.0",
"strip-json-comments": "2.0.1"
"deep-extend": "^0.5.1",
"ini": "~1.3.0",
"minimist": "^1.2.0",
"strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
@ -5142,13 +5148,13 @@
"dev": true,
"optional": true,
"requires": {
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
"process-nextick-args": "2.0.0",
"safe-buffer": "5.1.1",
"string_decoder": "1.1.1",
"util-deprecate": "1.0.2"
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
"isarray": "~1.0.0",
"process-nextick-args": "~2.0.0",
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
}
},
"rimraf": {
@ -5157,7 +5163,7 @@
"dev": true,
"optional": true,
"requires": {
"glob": "7.1.2"
"glob": "^7.0.5"
}
},
"safe-buffer": {
@ -5200,9 +5206,9 @@
"bundled": true,
"dev": true,
"requires": {
"code-point-at": "1.1.0",
"is-fullwidth-code-point": "1.0.0",
"strip-ansi": "3.0.1"
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
"strip-ansi": "^3.0.0"
}
},
"string_decoder": {
@ -5211,7 +5217,7 @@
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.1.1"
"safe-buffer": "~5.1.0"
}
},
"strip-ansi": {
@ -5219,7 +5225,7 @@
"bundled": true,
"dev": true,
"requires": {
"ansi-regex": "2.1.1"
"ansi-regex": "^2.0.0"
}
},
"strip-json-comments": {
@ -5234,13 +5240,13 @@
"dev": true,
"optional": true,
"requires": {
"chownr": "1.0.1",
"fs-minipass": "1.2.5",
"minipass": "2.2.4",
"minizlib": "1.1.0",
"mkdirp": "0.5.1",
"safe-buffer": "5.1.1",
"yallist": "3.0.2"
"chownr": "^1.0.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.2.4",
"minizlib": "^1.1.0",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.1",
"yallist": "^3.0.2"
}
},
"util-deprecate": {
@ -5255,7 +5261,7 @@
"dev": true,
"optional": true,
"requires": {
"string-width": "1.0.2"
"string-width": "^1.0.2"
}
},
"wrappy": {
@ -5754,6 +5760,106 @@
}
}
},
"gulp-autoprefixer": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-6.0.0.tgz",
"integrity": "sha512-MyLymXKVGTVBx/okQSBqmdhwhyqi3igBmZBwgpZp0GRbY1LY8VctOTLzwkQ18bZKJkSDnOKR5u32TMY9wSYdqQ==",
"requires": {
"autoprefixer": "9.1.5",
"fancy-log": "1.3.2",
"plugin-error": "1.0.1",
"postcss": "7.0.4",
"through2": "2.0.3",
"vinyl-sourcemaps-apply": "0.2.1"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"requires": {
"color-convert": "1.9.1"
}
},
"autoprefixer": {
"version": "9.1.5",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.1.5.tgz",
"integrity": "sha512-kk4Zb6RUc58ld7gdosERHMF3DzIYJc2fp5sX46qEsGXQQy5bXsu8qyLjoxuY1NuQ/cJuCYnx99BfjwnRggrYIw==",
"requires": {
"browserslist": "4.1.1",
"caniuse-lite": "1.0.30000888",
"normalize-range": "0.1.2",
"num2fraction": "1.2.2",
"postcss": "7.0.4",
"postcss-value-parser": "3.3.0"
}
},
"browserslist": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.1.1.tgz",
"integrity": "sha512-VBorw+tgpOtZ1BYhrVSVTzTt/3+vSE3eFUh0N2GCFK1HffceOaf32YS/bs6WiFhjDAblAFrx85jMy3BG9fBK2Q==",
"requires": {
"caniuse-lite": "1.0.30000888",
"electron-to-chromium": "1.3.72",
"node-releases": "1.0.0-alpha.12"
}
},
"caniuse-lite": {
"version": "1.0.30000888",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000888.tgz",
"integrity": "sha512-vftg+5p/lPsQGpnhSo/yBuYL36ai/cyjLvU3dOPJY1kkKrekLWIy8SLm+wzjX0hpCUdFTasC4/ZT7uqw4rKOnQ=="
},
"chalk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
"integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
"requires": {
"ansi-styles": "3.2.1",
"escape-string-regexp": "1.0.5",
"supports-color": "5.5.0"
}
},
"electron-to-chromium": {
"version": "1.3.72",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.72.tgz",
"integrity": "sha512-OFbXEC01Lq7A66e3UywkvWYNN00HO1I9MAPereGe0NIXrt2MeaovL1bbY+951HKG0euUdPBe0L7yfKxgqxBMMw=="
},
"plugin-error": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
"requires": {
"ansi-colors": "1.1.0",
"arr-diff": "4.0.0",
"arr-union": "3.1.0",
"extend-shallow": "3.0.2"
}
},
"postcss": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.4.tgz",
"integrity": "sha512-Bg1BrMZGKNOI0mkn8NtjJrOrZKgoHrl+geKJ45mTOkeY4WCsYq/mjd1BUWRgRvydHP/lA07Ys2n9m6Va5FsEsw==",
"requires": {
"chalk": "2.4.1",
"source-map": "0.6.1",
"supports-color": "5.5.0"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"requires": {
"has-flag": "3.0.0"
}
}
}
},
"gulp-batch": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/gulp-batch/-/gulp-batch-1.0.1.tgz",
@ -6234,8 +6340,7 @@
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
},
"has-gulplog": {
"version": "0.1.0",
@ -8990,6 +9095,14 @@
}
}
},
"node-releases": {
"version": "1.0.0-alpha.12",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.0-alpha.12.tgz",
"integrity": "sha512-VPB4rTPqpVyWKBHbSa4YPFme3+8WHsOSpvbp0Mfj0bWsC8TEjt4HQrLl1hsBDELlp1nB4lflSgSuGTYiuyaP7Q==",
"requires": {
"semver": "5.5.0"
}
},
"node-sass": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.0.tgz",
@ -9474,8 +9587,7 @@
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"dev": true
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
},
"normalize-selector": {
"version": "0.2.0",
@ -12892,8 +13004,7 @@
"num2fraction": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
"dev": true
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
},
"number-is-nan": {
"version": "1.0.1",
@ -13859,8 +13970,7 @@
"postcss-value-parser": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
"dev": true
"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
},
"pre-commit": {
"version": "1.2.2",

3
package.json
View file

@ -1,6 +1,6 @@
{
"name": "papercss",
"version": "1.5.4",
"version": "1.6.0",
"description": "The less formal CSS framework.",
"main": "index.js",
"scripts": {
@ -22,6 +22,7 @@
"homepage": "https://www.getpapercss.com",
"dependencies": {
"gulp": "3.9.1",
"gulp-autoprefixer": "^6.0.0",
"gulp-clean-css": "3.9.0",
"gulp-connect": "5.0.0",
"gulp-plumber": "1.1.0",

42
src/components/_alerts.scss
View file

@ -1,9 +1,34 @@
@mixin btn-close-color($base-color) {
color: lighten($base-color, 10%);
&:hover,
&:active,
&:focus {
color: darken($base-color, 10%);
}
}
.alert {
@include border-style();
border: 2px solid $primary;
margin-bottom: 20px;
padding: 15px;
width: 100%;
&.dismissible {
@include transition;
display: flex;
justify-content: space-between;
max-height: 48rem;
overflow: hidden;
}
.btn-close {
@include transition;
@include btn-close-color($primary);
cursor: pointer;
margin-left: 0.75rem;
}
}
@each $colorName, $color, $color-light in $colors {
@ -11,5 +36,22 @@
background-color: $color-light;
border-color: $color;
color: $color;
.btn-close {
@include btn-close-color($color);
}
}
}
.alert-state {
display: none;
&:checked + .dismissible {
border-width: 0;
margin: 0;
max-height: 0;
opacity: 0;
padding-bottom: 0;
padding-top: 0;
}
}

2
src/components/_buttons.scss
View file

@ -44,8 +44,6 @@ button,
&:focus {
border: 2px solid $secondary;
-webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
-moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
}

2
src/components/_modals.scss
View file

@ -25,7 +25,6 @@
.modal-body {
@include transition;
@include translate(-50%, -50%);
backface-visibility: hidden;
background: $white;
border: 2px solid $muted-light;
@ -33,6 +32,7 @@
padding: 1.25rem;
position: absolute;
top: 0;
transform: translate(-50%, -50%);
@include resp(sm) {
box-sizing: border-box;

2
src/components/_navbar.scss
View file

@ -25,7 +25,6 @@ nav {
.collapsible input[id^=collapsible]:checked + button {
.bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
transform: rotate(-45deg) translate(-9px, 7px);
}
@ -34,7 +33,6 @@ nav {
}
.bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -9px);
transform: rotate(45deg) translate(-8px, -9px);
}
}

47
src/components/_progress.scss Normal file
View file

@ -0,0 +1,47 @@
.progress {
@include border-style(5);
border: 2px solid $primary;
box-shadow: $shadow-hover;
height: 1.2rem;
overflow: hidden;
width: 100%;
.bar {
@include border-style(5);
@include transition;
background-color: $primary-light;
border-right: 2px solid $primary;
display: flex;
flex-direction: column;
font-size: 0.6rem;
height: 100%;
justify-content: center;
text-align: center;
width: 0%;
&.striped {
@include striped-background($primary-light);
}
@each $colorName, $color, $color-light in $colors {
&.#{$colorName} {
background-color: $color-light;
&.striped {
@include striped-background($color-light);
}
}
}
@for $i from 0 through 100 {
&.w-#{$i} {
width: $i + %;
}
}
&.w-0,
&.w-100 {
border-right: 0;
}
}
}

161
src/core/_config.scss
View file

@ -78,164 +78,3 @@ $shadow-small: 10px 19px 17px -13px $shadow-color-regular !default;
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default;
$shadow-large: 20px 38px 34px -26px $shadow-color-regular !default;
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
// Mixins
/**
Assign a border style to a component selector.
@param integer
@default 1
*/
@mixin border-style($style: 1) {
@if $style==1 {
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
}
@if $style==2 {
border-bottom-left-radius: 185px 25px;
border-bottom-right-radius: 20px 205px;
border-top-left-radius: 125px 25px;
border-top-right-radius: 10px 205px;
}
@if $style==3 {
border-bottom-left-radius: 225px 15px;
border-bottom-right-radius: 15px 255px;
border-top-left-radius: 15px 225px;
border-top-right-radius: 255px 15px;
}
@if $style==4 {
border-bottom-left-radius: 25px 115px;
border-bottom-right-radius: 155px 25px;
border-top-left-radius: 15px 225px;
border-top-right-radius: 25px 150px;
}
@if $style==5 {
border-bottom-left-radius: 20px 115px;
border-bottom-right-radius: 15px 105px;
border-top-left-radius: 250px 15px;
border-top-right-radius: 25px 80px;
}
@if $style==6 {
border-bottom-left-radius: 15px 225px;
border-bottom-right-radius: 20px 205px;
border-top-left-radius: 28px 125px;
border-top-right-radius: 100px 30px;
}
}
/**
Mixin for setting responsive breakpoints
@param string | integer
@default null
*/
@mixin resp($max:null, $min:null) {
@if $max == large or $max == lg { $max: $large-screen; }
@if $max == medium or $max == md { $max: $medium-screen; }
@if $max == small or $max == sm { $max: $small-screen; }
@if $max == xsmall or $max == xs { $max: $xsmall-screen; }
@if ($min != null and $max != null) { @media only screen and (max-width: $max) and (min-width: $min) { @content; } }
@else if($max != null and $min == null) { @media only screen and (max-width: $max) { @content; } }
@else if($min != null and $max == null) { @media only screen and (min-width: $min) { @content; } }
@else { @error 'no matching size found';}
}
/**
Useful helper mixins
*/
@mixin hr-after() {
color: lighten($primary, 30%);
content: '~~~';
display: block;
font-size: 1.5rem;
position: relative;
text-align: center;
}
@mixin center-all() {
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
@mixin col-size($percent) {
-webkit-box-flex: 0;
-webkit-flex: 0 0 $percent;
-ms-flex: 0 0 $percent;
flex: 0 0 $percent;
max-width: $percent;
}
@mixin li-bullet($char) {
li::before {
content: $char;
}
}
/*
Add transform: translate() with browser prefixes.
Same syntax for translate() and translate3d()
To get 3D add a $z value and set 'true'
@param string | boolean
@default 0 | false
*/
@mixin translate($x, $y, $z: 0, $transform3d: false) {
@if $transform3d {
-webkit-transform: translate3d($x, $y, $z);
-ms-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
} @else {
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y);
transform: translate($x, $y);
}
}
/*
Add global transition styles to selector
@param string
@default all | 235ms | ease-in-out | 0
*/
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
-webkit-transition: $name $duration $animation $delay;
-moz-transition: $name $duration $animation $delay;
-o-transition: $name $duration $animation $delay;
transition: $name $duration $animation $delay;
}
/**
Set the shadow type for a component
@param string
@default regular
*/
@mixin shadow($type: regular) {
@if $type == hover {
@include translate(0, 2px, 0, true);
box-shadow: $shadow-hover;
} @else if $type == small {
@include transition($animation: ease);
box-shadow: $shadow-small;
} @else if $type == regular {
@include transition($animation: ease);
box-shadow: $shadow-regular;
} @else if $type == large {
@include transition($animation: ease);
box-shadow: $shadow-large;
} @else {
@error 'wrong $type. available types: small | regular | large | hover';
}
}
//function for string replacement
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}

159
src/core/_mixins.scss Normal file
View file

@ -0,0 +1,159 @@
/**
PaperCSS Mixins
*/
/**
Assign a border style to a component selector.
@param integer
@default 1
*/
@mixin border-style($style: 1) {
@if $style==1 {
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
}
@if $style==2 {
border-bottom-left-radius: 185px 25px;
border-bottom-right-radius: 20px 205px;
border-top-left-radius: 125px 25px;
border-top-right-radius: 10px 205px;
}
@if $style==3 {
border-bottom-left-radius: 225px 15px;
border-bottom-right-radius: 15px 255px;
border-top-left-radius: 15px 225px;
border-top-right-radius: 255px 15px;
}
@if $style==4 {
border-bottom-left-radius: 25px 115px;
border-bottom-right-radius: 155px 25px;
border-top-left-radius: 15px 225px;
border-top-right-radius: 25px 150px;
}
@if $style==5 {
border-bottom-left-radius: 20px 115px;
border-bottom-right-radius: 15px 105px;
border-top-left-radius: 250px 15px;
border-top-right-radius: 25px 80px;
}
@if $style==6 {
border-bottom-left-radius: 15px 225px;
border-bottom-right-radius: 20px 205px;
border-top-left-radius: 28px 125px;
border-top-right-radius: 100px 30px;
}
}
/**
Mixin for setting responsive breakpoints
@param string | integer
@default null
*/
@mixin resp($max:null, $min:null) {
@if $max == large or $max == lg { $max: $large-screen; }
@if $max == medium or $max == md { $max: $medium-screen; }
@if $max == small or $max == sm { $max: $small-screen; }
@if $max == xsmall or $max == xs { $max: $xsmall-screen; }
@if ($min != null and $max != null) { @media only screen and (max-width: $max) and (min-width: $min) { @content; } }
@else if($max != null and $min == null) { @media only screen and (max-width: $max) { @content; } }
@else if($min != null and $max == null) { @media only screen and (min-width: $min) { @content; } }
@else { @error 'no matching size found';}
}
/**
Useful helper mixins
*/
@mixin hr-after() {
color: lighten($primary, 30%);
content: '~~~';
display: block;
font-size: 1.5rem;
position: relative;
text-align: center;
}
@mixin center-all() {
align-items: center;
justify-content: center;
}
@mixin col-size($percent) {
flex: 0 0 $percent;
max-width: $percent;
}
@mixin li-bullet($char) {
li::before {
content: $char;
}
}
/*
Add transform: translate() with browser prefixes.
Same syntax for translate() and translate3d()
To get 3D add a $z value and set 'true'
@param string | boolean
@default 0 | false
*/
@mixin translate($x, $y, $z: 0, $transform3d: false) {
@if $transform3d {
transform: translate3d($x, $y, $z);
} @else {
transform: translate($x, $y);
}
}
/*
Add global transition styles to selector
@param string
@default all | 235ms | ease-in-out | 0
*/
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
transition: $name $duration $animation $delay;
}
/**
Set the shadow type for a component
@param string
@default regular
*/
@mixin shadow($type: regular) {
@if $type == hover {
@include translate(0, 2px, 0, true);
box-shadow: $shadow-hover;
} @else if $type == small {
@include transition($animation: ease);
box-shadow: $shadow-small;
} @else if $type == regular {
@include transition($animation: ease);
box-shadow: $shadow-regular;
} @else if $type == large {
@include transition($animation: ease);
box-shadow: $shadow-large;
} @else {
@error 'wrong $type. available types: small | regular | large | hover';
}
}
//function for string replacement
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/**
Sets a striped background on a component
@param string
*/
@mixin striped-background($base-color) {
$color-dark: darken($base-color, 10%);
background: repeating-linear-gradient(45deg, $base-color, $base-color 0.25rem, $color-dark 0.25rem, $color-dark 0.5rem);
}

2
src/layout/_container.scss
View file

@ -33,8 +33,6 @@ hr {
.paper {
background-color: $main-background;
border: 1px solid $primary-light;
-moz-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
-webkit-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
margin-bottom: 1rem;
margin-top: 1rem;

37
src/layout/_flexbox.scss
View file

@ -4,9 +4,6 @@ $number-columns: 12;
@include resp($min: $breakpoint) {
@for $i from 1 through $number-columns {
.#{$colName}-#{$i} {
-webkit-box-flex: 0;
-webkit-flex: 0 0 $i * 100% / $number-columns;
-ms-flex: 0 0 $i * 100% / $number-columns;
flex: 0 0 $i * 100% / $number-columns;
max-width: $i * 100% / $number-columns;
}
@ -15,65 +12,38 @@ $number-columns: 12;
}
.row {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-bottom: 1rem;
margin-left: auto;
margin-right: auto;
&.flex-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
&.flex-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
&.flex-edges {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
&.flex-spaces {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
&.flex-top {
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
}
&.flex-middle {
-webkit-align-items: center;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
}
&.flex-bottom {
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
}
}
@ -97,22 +67,15 @@ $number-columns: 12;
@include create-flex-classes(lg, $large-screen);
.align-top {
-webkit-align-self: flex-start;
align-self: flex-start;
-ms-flex-item-align: start;
}
.align-middle {
-webkit-align-self: center;
align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
}
.align-bottom {
-webkit-align-self: flex-end;
align-self: flex-end;
-ms-flex-item-align: end;
}
.container {

2
src/styles.scss
View file

@ -2,6 +2,7 @@
/* PaperCSS core */
@import 'core/config';
@import 'core/mixins';
@import 'core/reset';
/* Layout styling */
@ -29,6 +30,7 @@
@import 'components/forms';
@import 'components/modals';
@import 'components/popovers';
@import 'components/progress';
@import 'components/tabs';
@import 'components/utilities';
@import 'components/navbar';