mirror of
https://github.com/papercss/papercss
synced 2026-03-16 23:45:51 +01:00
Compare commits
No commits in common. "master" and "1.0.1" have entirely different histories.
117 changed files with 9155 additions and 13530 deletions
|
|
@ -1,3 +0,0 @@
|
|||
# Browsers that we support (see https://browserl.ist/)
|
||||
|
||||
defaults
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
quote_type = single
|
||||
15
.github/PULL_REQUEST_TEMPLATE.md
vendored
15
.github/PULL_REQUEST_TEMPLATE.md
vendored
|
|
@ -1,15 +0,0 @@
|
|||
## Brief description
|
||||
|
||||
...
|
||||
|
||||
## Developer Certificate of Origin
|
||||
|
||||
- [ ] I certify that these changes according to the Developer Certificate of Origin 1.1 as described at <https://developercertificate.org/>.
|
||||
|
||||
## Sample pictures
|
||||
|
||||
...
|
||||
|
||||
## Further details
|
||||
|
||||
...
|
||||
9
.gitignore
vendored
9
.gitignore
vendored
|
|
@ -1,10 +1,3 @@
|
|||
/node_modules
|
||||
npm-debug.log
|
||||
/tests/node_modules
|
||||
.DS_Store
|
||||
/public
|
||||
.vscode
|
||||
|
||||
# Ignore compiled CSS
|
||||
/docs/static/assets/paper.css
|
||||
/docs/static/assets/paper.min.css
|
||||
/dist
|
||||
13
.npmignore
13
.npmignore
|
|
@ -1,13 +0,0 @@
|
|||
/.github
|
||||
/build
|
||||
/docs
|
||||
/img
|
||||
/node_modules
|
||||
/public
|
||||
.browserslistrc
|
||||
.editorconfig
|
||||
.stylelintrc.json
|
||||
CODE_OF_CONDUCT.md
|
||||
CONTRIBUTING.md
|
||||
netlify.toml
|
||||
npm-debug.log
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"extends": "stylelint-config-sass-guidelines",
|
||||
"plugins": [
|
||||
"stylelint-scss"
|
||||
],
|
||||
"rules": {
|
||||
"max-nesting-depth": 5,
|
||||
"selector-no-qualifying-type": null,
|
||||
"selector-max-compound-selectors": null,
|
||||
"scss/selector-no-redundant-nesting-selector": null,
|
||||
"scss/at-extend-no-missing-placeholder": null
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at getpapercss@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
[version]: http://contributor-covenant.org/version/1/4/
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
## Contributing
|
||||
|
||||
Check out what's been added but not yet released at [develop.getpapercss.com](https://develop.getpapercss.com)
|
||||
|
||||
This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
|
||||
|
||||
Please before sending a PR, make sure you are properly using the `.editorconfig` file with your IDE. If your IDE doesn't natively support `editorconfig` files, you can use an extension/package/module. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime Text](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ...
|
||||
|
||||
Once you are ready to contribute, here the workflow you should follow:
|
||||
|
||||
- Fork the repo then clone it: `git clone git@github.com:[your_username]/papercss.git`
|
||||
- `cd papercss` then install dependencies: `npm install`
|
||||
- Change your current branch to `develop`: `git checkout develop`
|
||||
- Create your new branch where you will write your code: `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
|
||||
- Write some code!
|
||||
- To build the scss (in `src/`) to css (in `dist/`), run `npm run css:build`. Note: you will need to re-run this command to include the latest changes in `src/`.
|
||||
- To preview your changes, you can run `npm start`. This will start a `localhost` server.
|
||||
- Check to make sure your code is following style rules with `npm run stylelint`
|
||||
- Once done commit and push your changes to your fork. The linter is also run as a pre-commit hook.
|
||||
- Open a pull request on the origin papercss repo. Be sure to include any pictures and/or details on what you have done; it will help reviewers **a lot**!
|
||||
- When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone regarding features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
|
||||
|
||||
Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-thing master`. The changes will be merged into both the master and develop to keep the branches consistent.
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
For distributing a new version to Github, NPM, and the CDN
|
||||
|
||||
1. Ensure the build is up to date with `npm run build`
|
||||
2. Update all version numbers in the app using [Semantic Versioning](https://semver.org/). Ex renaming `1.8.0` to `1.8.1` for a patch.
|
||||
1. package.json
|
||||
2. package-lock.json
|
||||
3. docs/content/_index.md
|
||||
3. Create commit of the new version with the changed version files: `v1.8.3`
|
||||
4. Push to master
|
||||
5. Create new release in the Github UI
|
||||
1. Create a new tag with the same name as the commit: `v1.8.3`
|
||||
2. Add details about the additions and fixes
|
||||
3. Upload the files in `dist` to the "Attach Binaries" section (`paper.css` and `paper.min.css`)
|
||||
6. Publish to NPM with `npm publish`. The CDN will automatically pick up the new files
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
## ISC Licence
|
||||
|
||||
Copyright (c) 2017–2018, Rhyne Vlaservich <rhyneav@gmail.com>
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
132
README.md
132
README.md
|
|
@ -1,109 +1,55 @@
|
|||
<p align="center">
|
||||
<a href="https://getpapercss.com">
|
||||
<img src="https://raw.githubusercontent.com/papercss/papercss/master/docs/static/favicon.ico?raw=true" alt="PaperCSS logo">
|
||||
</a>
|
||||
# PaperCSS
|
||||
### The Less Formal CSS Framework
|
||||
|
||||
<h3 align="center">PaperCSS</h3>
|
||||
## Demo & Docs
|
||||
View the demo & docs at [getpapercss.com](https://www.getpapercss.com)
|
||||
|
||||
|
||||
<p align="center">The less formal CSS framework, with a quick and easy integration.</p>
|
||||
</p>
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [Table of contents](#table-of-contents)
|
||||
- [Quick-start](#quick-start)
|
||||
- [Content of the framework](#content-of-the-framework)
|
||||
- [Documentation](#documentation)
|
||||
- [Customizing](#customizing)
|
||||
- [Contributing](#contributing)
|
||||
- [About](#about)
|
||||
- [Resources](#resources)
|
||||
- [Credits and license](#credits-and-license)
|
||||
|
||||
## Quick-start
|
||||
|
||||
There are several options available:
|
||||
|
||||
- You can [download the latest release](https://github.com/papercss/papercss/releases).
|
||||
- Clone the repo: `git clone https://github.com/papercss/papercss.git`
|
||||
- Install with npm: `npm install papercss`
|
||||
- Install with yarn: `yarn add papercss`
|
||||
- Import it using a CDN (it will automatically download the latest version):
|
||||
- `https://unpkg.com/papercss/dist/paper.min.css`
|
||||
- `https://unpkg.com/papercss/dist/paper.css`
|
||||
|
||||
## Content of the framework
|
||||
|
||||
We provide compiled CSS (`paper.css`) as well as minified CSS (`paper.min.css`).
|
||||
|
||||
You can choose which components you may want to use. Only the components that get imported into `src/styles.scss` will be compiled into `dist/paper.css`.
|
||||
|
||||
You can also play with original, source files, written in SCSS, in `src/`.
|
||||
|
||||
## Documentation
|
||||
|
||||
You can view the docs at [getpapercss.com](https://www.getpapercss.com). Those are directly from the `master` branch; this means those features are stable and ready to be used in your project.
|
||||
|
||||
You can also view the develop branch at [develop.getpapercss.com](https://develop.getpapercss.com), this includes new features that are coming soon in the master branch. Be warned, a feature in develop can be removed without any prevention.
|
||||
|
||||
## Customizing
|
||||
|
||||
You can customize PaperCSS easily, clone the repo, run `npm install` and make any changes to `.scss` files in `src/`.
|
||||
|
||||
The main place you might want to make changes would be `core/_config.scss`, where you can specify new colors or fonts for your CSS build.
|
||||
|
||||
After you make changes, be sure to build the new CSS files. Do so by running `npm run css:build` and get them from the `dist/` folder.
|
||||
|
||||
## Contributing
|
||||
|
||||
This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
|
||||
|
||||
Please before sending a PR, make sure you are properly using the `.editorconfig` file with your IDE. If your IDE doesn't natively support `editorconfig` files, you can use an extension/package/module. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime Text](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ...
|
||||
|
||||
Once you are ready to contribute, here the workflow you should follow:
|
||||
|
||||
- Fork the repo then clone it: `git clone git@github.com:[your_username]/papercss.git`
|
||||
- `cd papercss` then install dependencies: `npm install`
|
||||
- Change your current branch to `develop`: `git checkout develop`
|
||||
- Create your new branch where you will write your code: `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
|
||||
- Write some code!
|
||||
- To build the scss (in `src/`) to css (in `dist/`), run `npm run css:build`. Note: you will need to re-run this command to include the latest changes in `src/`.
|
||||
- To preview your changes, you can run `npm start`. This will start a `localhost` server.
|
||||
- Check to make sure your code is following style rules with `npm run stylelint`
|
||||
- Once done commit and push your changes to your fork. The linter is also run as a pre-commit hook.
|
||||
- Open a pull request on the origin papercss repo. Be sure to include any pictures and/or details on what you have done; it will help reviewers **a lot**!
|
||||
- When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone regarding features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
|
||||
|
||||
Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-thing master`. The changes will be merged into both the master and develop to keep the branches consistent.
|
||||
## Download
|
||||
[][download]
|
||||
[][download-minified]
|
||||
|
||||
## About
|
||||
|
||||
PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). It is currently maintained by the [PaperCSS team](https://github.com/orgs/papercss/people).
|
||||
I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made PaperCSS to solve these two challenges of mine :)
|
||||
|
||||
The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
|
||||
|
||||
Feel free to use it for wireframes, web apps, blogs, or whatever else you can think of!
|
||||
While I'm proud of how it's turned out so far, I think there's a lot that can still be done to make it better. Such things as refactoring, adding more utility classes and more border types (like dashed/dotted) could really polish off this framework. That's why it's open sourced and available for pull requests!
|
||||
|
||||
If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.
|
||||
If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.
|
||||
|
||||
## Resources
|
||||
## Customizing
|
||||
To customize PaperCSS, clone the Git repo, run `npm install`, and make any chages to the .less files within /src
|
||||
|
||||
Components:
|
||||
The main places you might want to make changes would be colors.less or fonts.less. Here, you can specify new colors or fonts for your CSS build.
|
||||
|
||||
- [react-papercss-design](https://hacker0limbo.github.io/react-papercss-design/en-US) a React component library based on PaperCSS
|
||||
- [Spaper](https://oli8.github.io/spaper/) PaperCSS components for Svelte
|
||||
- [vue-papercss](https://github.com/papercss/vue-papercss) A vue-plugin for the less formal CSS framework
|
||||
- [RailsPapercss](https://github.com/papercss/rails_papercss_gem) Rails gem for Papercss framework
|
||||
- [react-native-paper-css](https://github.com/papercss/react-native-paper-css) PaperCSS for react-native
|
||||
- [React PaperCSS](https://papercss.github.io/React-Paper-CSS-Page/) Another react component library implementation for PaperCSS
|
||||
After you make changes, be sure to build the new CSS files. Do so by running `npm run build` and get them from the /dist folder.
|
||||
|
||||
Icons:
|
||||
Here's the full workflow for customization:
|
||||
- Make sure you have Git, Node, and NPM
|
||||
- run `git clone https://github.com/rhyneav/papercss.git`
|
||||
- change directories to papercss `cd papercss`
|
||||
- run `npm install`
|
||||
- _make changes to .less files within source_
|
||||
- preview changes with `npm start` and go to http://localhost:8080 (changes are automatically reloaded on page)
|
||||
- OR run `npm run build` to create the new CSS in the /dist folder
|
||||
|
||||
- [handdrawn.css](https://fxaeberhard.github.io/handdrawn.css/) Another hand-drawn css library with rich icons included
|
||||
- [hand-drawn-icons](https://github.com/nikhilol/hand-drawn-icons) Icon pack with a hand-drawn style
|
||||
## Contributing
|
||||
This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
|
||||
|
||||
## Credits and license
|
||||
Similar to customizing, make sure you have Git, Node, and NPM on your system.
|
||||
- fork the repo via the fork button in the upper left
|
||||
- run `git clone https://github.com/[your_username]/papercss.git`
|
||||
- change directories to papercss `cd papercss`
|
||||
- run `npm install`
|
||||
- create a new branch for your contribution `git checkout -b my-feature`
|
||||
- Start the local server to view changes with `npm start`
|
||||
- _code and stuff_
|
||||
- Once done, commit and push your changes to your fork
|
||||
- Finally, open a pull request on this repo. Be sure to include any pictures and details on what you changed!
|
||||
|
||||
Code and documentation under [ISC license](https://github.com/papercss/papercss/blob/master/license).
|
||||
## Credits
|
||||
Shouts outs to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX
|
||||
|
||||
Shout out to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX
|
||||
[download]: https://github.com/rhyneav/papercss/releases/download/v1.0.0/paper.css
|
||||
[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.0.0/paper.min.css
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
const fs = require('fs');
|
||||
const sass = require('sass');
|
||||
const write = require('write');
|
||||
const rimraf = require('rimraf');
|
||||
const postcss = require('postcss');
|
||||
const cssnano = require('cssnano');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
const constants = require('./constants');
|
||||
const log = require('./log');
|
||||
|
||||
async function build() {
|
||||
log('Starting PaperCSS build...');
|
||||
log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
|
||||
|
||||
rimraf.sync('dist', { disableGlob: true });
|
||||
|
||||
if (fs.existsSync(constants.PAPER_DOCS_PATH)) {
|
||||
fs.unlinkSync(constants.PAPER_DOCS_PATH);
|
||||
}
|
||||
|
||||
log('Compiling SCSS to CSS, entrypoint:', constants.ENTRYPOINT_PATH);
|
||||
|
||||
const compiledCSS = sass.renderSync({ file: constants.ENTRYPOINT_PATH });
|
||||
|
||||
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 });
|
||||
|
||||
log('Writing paper.css and paper.min.css files to dist/ and docs/ folders...');
|
||||
|
||||
write(constants.PAPER_DIST_PATH, autoprefixedCSS.css);
|
||||
write(constants.PAPER_DIST_MIN_PATH, minifiedCSS.css);
|
||||
write(constants.PAPER_DOCS_PATH, autoprefixedCSS.css);
|
||||
|
||||
log('Build done!');
|
||||
}
|
||||
|
||||
build();
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
ENTRYPOINT_PATH: path.resolve(__dirname, '../src/styles.scss'),
|
||||
PAPER_DIST_PATH: path.resolve(__dirname, '../dist/paper.css'),
|
||||
PAPER_DIST_MIN_PATH: path.resolve(__dirname, '../dist/paper.min.css'),
|
||||
PAPER_DOCS_PATH: path.resolve(__dirname, '../docs/static/assets/paper.css'),
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
const util = require('util');
|
||||
const sass = require('sass');
|
||||
const write = require('write');
|
||||
const postcss = require('postcss');
|
||||
const chokidar = require('chokidar');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
const constants = require('./constants');
|
||||
const log = require('./log');
|
||||
|
||||
const sassRenderPromisified = util.promisify(sass.render);
|
||||
|
||||
function compile() {
|
||||
sassRenderPromisified({ file: constants.ENTRYPOINT_PATH })
|
||||
.then((compiledCSS) => postcss([autoprefixer]).process(compiledCSS.css.toString(), { from: undefined }))
|
||||
.then((autoprefixedCSS) => write(constants.PAPER_DOCS_PATH, autoprefixedCSS.css))
|
||||
.then(() => log('Compiled CSS in docs/ folder.'));
|
||||
}
|
||||
|
||||
chokidar.watch('./src/**/*.scss').on('change', (event) => {
|
||||
log(`Detected file change (${event}), compiling SCSS to CSS...`);
|
||||
compile();
|
||||
});
|
||||
|
||||
// Do initial compilation.
|
||||
compile();
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
const chalk = require('chalk');
|
||||
|
||||
function log(...args) {
|
||||
return console.log('📦 ', chalk.cyan(...args));
|
||||
}
|
||||
|
||||
module.exports = log;
|
||||
13
demo.css
Normal file
13
demo.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
body {
|
||||
background-image: url("/img/geometry2.png")
|
||||
}
|
||||
.demo .row .col {
|
||||
background-color: #eee;
|
||||
}
|
||||
.demo .row .col:nth-child(even) {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.docs {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
3328
dist/paper.css
vendored
3328
dist/paper.css
vendored
File diff suppressed because it is too large
Load diff
2
dist/paper.min.css
vendored
2
dist/paper.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
title: "{{ replace .TranslationBaseName "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: true
|
||||
---
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
baseURL = "https://getpapercss.com"
|
||||
title = "PaperCSS"
|
||||
|
||||
# Directories
|
||||
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"
|
||||
title404 = "Nothing's here!"
|
||||
|
||||
[params.seo]
|
||||
# Title Separator: - – — · • * ⋆ | ~ « » < >
|
||||
titleSeparator = "•"
|
||||
|
||||
[markup]
|
||||
defaultMarkdownHandler = "blackfriday"
|
||||
[markup.blackFriday]
|
||||
hrefTargetBlank = true
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
---
|
||||
title: Get PaperCSS
|
||||
menu: main
|
||||
weight: -270
|
||||
---
|
||||
|
||||
#### Download
|
||||
|
||||
Download the latest version (1.9.2) 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.9.2/paper.css">CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.2/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.9.2. 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
|
||||
|
||||
#### CDN
|
||||
|
||||
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.9.2/dist/paper.css](https://unpkg.com/papercss@1.9.2/dist/paper.css)
|
||||
- [https://unpkg.com/papercss@1.9.2/dist/paper.min.css](https://unpkg.com/papercss@1.9.2/dist/paper.min.css)
|
||||
|
||||
Here's a quick snippet to get started with PaperCSS:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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.9.2/dist/paper.min.css"
|
||||
/>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="paper container">
|
||||
<h1>Some Fresh Title</h1>
|
||||
<p>This is where some content would go.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Build it Yourself
|
||||
|
||||
If you'd rather customize things, you can build the CSS yourself via the git repo
|
||||
|
||||
```sh
|
||||
git clone https://github.com/papercss/papercss.git
|
||||
cd papercss
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
Grab the CSS out of the /dist folder created
|
||||
|
||||
You can also go into src/core/\_config.scss before building to change around the global styles of your new CSS.
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
title: About
|
||||
slug: about
|
||||
menu: main
|
||||
weight: -90
|
||||
---
|
||||
|
||||
PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). In addition to the original creator, it is maintained by [@Fraham](https://github.com/Fraham) and [@TotomInc](https://github.com/TotomInc).
|
||||
|
||||
The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
|
||||
|
||||
Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/LICENSE.md), so use it wherever you want to.
|
||||
|
||||
If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. Check out the [Git repo](https://github.com/papercss/papercss) for more info!
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
title: Documentation
|
||||
menu: main
|
||||
weight: -240
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Components
|
||||
description: PaperCSS Components
|
||||
---
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
---
|
||||
title: Alerts
|
||||
description: PaperCSS Alerts
|
||||
---
|
||||
### Simple alerts
|
||||
|
||||
<div class="row flex-spaces">
|
||||
<div class="alert alert-primary">
|
||||
Alert-primary
|
||||
</div>
|
||||
<div class="alert alert-secondary">
|
||||
Alert-secondary
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
Alert-success
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
Alert-warning
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
Alert-danger
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces">
|
||||
<div class="alert alert-primary">Alert-primary</div>
|
||||
<div class="alert alert-secondary">Alert-secondary</div>
|
||||
<div class="alert alert-success">Alert-success</div>
|
||||
<div class="alert alert-warning">Alert-warning</div>
|
||||
<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>
|
||||
```
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
---
|
||||
title: Articles
|
||||
description: PaperCSS Articles
|
||||
---
|
||||
<article class="article">
|
||||
<h1 class="article-title">
|
||||
<a href="#">Article Title</a>
|
||||
</h1>
|
||||
<p class="article-meta">
|
||||
Written by <a href="#">Super User</a> on 24 November 2017. Posted in <a href="#">Blog</a>
|
||||
</p>
|
||||
<p class="text-lead">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellendus excepturi, consequatur illo rerum, non sint asperiores dolore sapiente, vitae blanditiis. Officiis at quaerat modi earum, fugiat magni impedit, aperiam.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<button>Read More</button>
|
||||
<button>5 Comments</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<article class="article">
|
||||
<h1 class="article-title"><a href="">Article Title</a></h1>
|
||||
<p class="article-meta">Written by <a href="#">Super User</a></p>
|
||||
<p class="text-lead"> Lorem... </p>
|
||||
<p>Lorem...</p>
|
||||
|
||||
<div class="row">
|
||||
<button>Read More</button>
|
||||
<button>5 Comments</button>
|
||||
</div>
|
||||
</article>
|
||||
```
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
---
|
||||
title: Badges
|
||||
description: PaperCSS Badges
|
||||
---
|
||||
### Default
|
||||
|
||||
You can customize badges colors with secondary, success, warning, danger classes.
|
||||
|
||||
# Example h1 heading <span class="badge">123</span>
|
||||
|
||||
## Example h2 heading <span class="badge secondary">123</span>
|
||||
|
||||
### Example h3 heading <span class="badge success">123</span>
|
||||
|
||||
#### Example h4 heading <span class="badge warning">123</span>
|
||||
|
||||
##### Example h5 heading <span class="badge danger">123</span>
|
||||
|
||||
###### Example h6 heading <span class="badge">123</span>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<h1>Example h1 heading <span class="badge">123</span></h1>
|
||||
<h2>Example h2 heading <span class="badge secondary">123</span></h2>
|
||||
<h3>Example h3 heading <span class="badge success">123</span></h3>
|
||||
<h4>Example h4 heading <span class="badge warning">123</span></h4>
|
||||
<h5>Example h5 heading <span class="badge danger">123</span></h5>
|
||||
<h6>Example h6 heading <span class="badge">123</span></h6>
|
||||
```
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
title: Breadcrumb
|
||||
description: PaperCSS Breadcrumb
|
||||
---
|
||||
|
||||
<ul class="breadcrumb border">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li>Breadcrumb</li>
|
||||
</ul>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<ul class="breadcrumb border">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li>Breadcrumb</li>
|
||||
</ul>
|
||||
```
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
---
|
||||
title: Buttons
|
||||
description: PaperCSS Buttons
|
||||
---
|
||||
|
||||
Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)
|
||||
|
||||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button>
|
||||
<a href="#" class="paper-btn">Link</a>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6 col">
|
||||
<button class="btn-block">Block level</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="disabled">Disabled</button>
|
||||
<button disabled>Disabled</button>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p>Inspired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imperfect Buttons</a></p>
|
||||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button>
|
||||
<a href="#" class="paper-btn">Link</a>
|
||||
<div class="row">
|
||||
<div class="col-6 col">
|
||||
<button class="btn-block">Block level</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="disabled">Disabled</button>
|
||||
<button disabled>Disabled</button>
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
||||
<input type="button" class="paper-btn btn-primary" value="Primary"/>
|
||||
<input type="button" class="btn-secondary" value="Secondary"/>
|
||||
<button class="btn-success">Success</button>
|
||||
<button class="btn-warning">Warning</button>
|
||||
<button class="btn-danger">Danger</button>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<input type="button" class="paper-btn btn-primary" value="Primary"/>
|
||||
<input type="button" class="btn-secondary" value="Secondary"/>
|
||||
<button class="btn-success">Success</button>
|
||||
<button class="btn-warning">Warning</button>
|
||||
<button class="btn-danger">Danger</button>
|
||||
```
|
||||
|
||||
### Outline colors
|
||||
|
||||
<input type="button" class="paper-btn btn-primary-outline" value="Primary"/>
|
||||
<input type="button" class="btn-secondary-outline" value="Secondary"/>
|
||||
<button class="btn-success-outline">Success</button>
|
||||
<button class="btn-warning-outline">Warning</button>
|
||||
<a href="#" class="paper-btn btn-danger-outline">Danger</a>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<input type="button" class="paper-btn btn-primary-outline" value="Primary"/>
|
||||
<input type="button" class="btn-secondary-outline" value="Secondary"/>
|
||||
<button class="btn-success-outline">Success</button>
|
||||
<button class="btn-warning-outline">Warning</button>
|
||||
<a href="#" class="paper-btn btn-danger-outline">Danger</a>
|
||||
```
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
---
|
||||
title: Cards
|
||||
description: PaperCSS Cards
|
||||
---
|
||||
### Full card example
|
||||
|
||||
It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, ... But instead the framework will recognize the element properly if it's a h4, h5, p, ... And you need to put all this content on a div with card class.
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<img class="image-top" src="https://picsum.photos/768" alt="Card example image">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 20rem;">
|
||||
<img src="https://picsum.photos/768" alt="Card example image">
|
||||
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Card title, text, links
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.</p>
|
||||
<a class="card-link" href="#">First link</a>
|
||||
<a class="card-link" href="#">Second link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.</p>
|
||||
<a class="card-link" href="#">First link</a>
|
||||
<a class="card-link" href="#">Second link</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Image on top or bottom
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
|
||||
</div>
|
||||
```
|
||||
|
||||
### Header and footer
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
---
|
||||
title: Collapsibles
|
||||
description: PaperCSS Collapsibles
|
||||
---
|
||||
|
||||
Collapsibles are elements that expand when you click on them. You can hide/reveal content back on clicking.
|
||||
|
||||
<div class="row">
|
||||
<div class="collapsible">
|
||||
<input id="collapsible1" type="checkbox" name="collapsible">
|
||||
<label for="collapsible1">First</label>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible2" type="checkbox" name="collapsible">
|
||||
<label for="collapsible2">Second</label>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible3" type="checkbox" name="collapsible">
|
||||
<label for="collapsible3">Third</label>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible4" type="checkbox" name="collapsible">
|
||||
<label for="collapsible4">Fourth</label>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="collapsible">
|
||||
<input id="collapsible1" type="checkbox" name="collapsible">
|
||||
<label for="collapsible1">First</label>
|
||||
<div class="collapsible-body">
|
||||
<span>Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible2" type="checkbox" name="collapsible">
|
||||
<label for="collapsible2">Second</label>
|
||||
<div class="collapsible-body">
|
||||
<span>Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible3" type="checkbox" name="collapsible">
|
||||
<label for="collapsible3">Third</label>
|
||||
<div class="collapsible-body">
|
||||
<span>Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible4" type="checkbox" name="collapsible">
|
||||
<label for="collapsible4">Fourth</label>
|
||||
<div class="collapsible-body">
|
||||
<span>Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Accordions
|
||||
|
||||
Use `input type="radio"` when you want to keep only one element collapsed at a time.
|
||||
|
||||
<div class="row">
|
||||
<div class="collapsible">
|
||||
<input id="collapsible5" type="radio" name="collapsible">
|
||||
<label for="collapsible5">First</label>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible6" type="radio" name="collapsible">
|
||||
<label for="collapsible6">Second</label>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible7" type="radio" name="collapsible">
|
||||
<label for="collapsible7">Third</label>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible8" type="radio" name="collapsible">
|
||||
<label for="collapsible8">Fourth</label>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="collapsible">
|
||||
<input id="collapsible5" type="radio" name="collapsible">
|
||||
<label for="collapsible5">First</label>
|
||||
<div class="collapsible-body">
|
||||
<span>Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible6" type="radio" name="collapsible">
|
||||
<label for="collapsible6">Second</label>
|
||||
<div class="collapsible-body">
|
||||
<span>Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible7" type="radio" name="collapsible">
|
||||
<label for="collapsible7">Third</label>
|
||||
<div class="collapsible-body">
|
||||
<span>Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible8" type="radio" name="collapsible">
|
||||
<label for="collapsible8">Fourth</label>
|
||||
<div class="collapsible-body">
|
||||
<span>Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,347 +0,0 @@
|
|||
---
|
||||
title: Forms
|
||||
description: PaperCSS Forms
|
||||
---
|
||||
<div class="form-group">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sm-4">
|
||||
<div class="form-group">
|
||||
<label for="paperInputs2">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-8">
|
||||
<div class="form-group">
|
||||
<label for="paperInputs3">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperInputs4">Disabled</label>
|
||||
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="large-input">Large Input</label>
|
||||
<textarea id="large-input" placeholder="Large input"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="no-resize">No Resize</label>
|
||||
<textarea class="no-resize" id="no-resize" placeholder="No resize"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperSelects1">Select</label>
|
||||
<select id="paperSelects1">
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Radio Buttons</legend>
|
||||
<label for="paperRadios1" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios1" value="option 1">
|
||||
<span>This is the first option</span>
|
||||
</label>
|
||||
<label for="paperRadios2" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios2" value="option 2">
|
||||
<span>This is the second option</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Check Boxes</legend>
|
||||
<label for="paperChecks1" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks1" value="option 1">
|
||||
<span>This is the first check</span>
|
||||
</label>
|
||||
<label for="paperChecks2" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2">
|
||||
<span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Switch</legend>
|
||||
<p>Default - standard outline style (square & circle)</p>
|
||||
<label class="paper-switch">
|
||||
<input id="paperSwitch4" name="paperSwitch4" type="checkbox" />
|
||||
<span class="paper-switch-slider"></span>
|
||||
</label>
|
||||
<label for="paperSwitch4" class="paper-switch-label">
|
||||
Square switch
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="paperSwitch5" class="paper-switch-label">
|
||||
Square switch
|
||||
</label>
|
||||
<label class="paper-switch">
|
||||
<input id="paperSwitch5" name="paperSwitch5" type="checkbox" checked />
|
||||
<span class="paper-switch-slider"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label class="paper-switch">
|
||||
<input id="paperSwitch6" name="paperSwitch6" type="checkbox" checked />
|
||||
<span class="paper-switch-slider round"></span>
|
||||
</label>
|
||||
<label for="paperSwitch6" class="paper-switch-label">
|
||||
Circle switch
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="paperSwitch7" class="paper-switch-label">
|
||||
Circle switch
|
||||
</label>
|
||||
<label class="paper-switch">
|
||||
<input id="paperSwitch7" name="paperSwitch7" type="checkbox" />
|
||||
<span class="paper-switch-slider round"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<p>Type2 - inline style (square & circle)</p>
|
||||
<label class="paper-switch-2">
|
||||
<input id="paperSwitch8" name="paperSwitch8" type="checkbox" checked />
|
||||
<span class="paper-switch-slider"></span>
|
||||
</label>
|
||||
<label for="paperSwitch8" class="paper-switch-2-label">
|
||||
Square switch
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="paperSwitch9" class="paper-switch-2-label">
|
||||
Square switch
|
||||
</label>
|
||||
<label class="paper-switch-2">
|
||||
<input id="paperSwitch9" name="paperSwitch9" type="checkbox" />
|
||||
<span class="paper-switch-slider"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label class="paper-switch-2">
|
||||
<input id="paperSwitch10" name="paperSwitch10" type="checkbox" />
|
||||
<span class="paper-switch-slider round"></span>
|
||||
</label>
|
||||
<label for="paperSwitch10" class="paper-switch-2-label">
|
||||
Circle switch
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="paperSwitch11" class="paper-switch-2-label">
|
||||
Circle switch
|
||||
</label>
|
||||
<label class="paper-switch-2">
|
||||
<input id="paperSwitch11" name="paperSwitch11" type="checkbox" checked />
|
||||
<span class="paper-switch-slider round"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<p>Type3 - Tile style</p>
|
||||
<label for="paperSwitch1" class="paper-switch-tile">
|
||||
<input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
|
||||
<div class="paper-switch-tile-card border">
|
||||
<div class="paper-switch-tile-card-front border">Front</div>
|
||||
<div class="paper-switch-tile-card-back border background-primary">Back</div>
|
||||
</div>
|
||||
</label>
|
||||
<label for="paperSwitch2" class="paper-switch-tile">
|
||||
<input id="paperSwitch2" name="paperSwitch2" type="checkbox" />
|
||||
<div class="paper-switch-tile-card border">
|
||||
<div class="paper-switch-tile-card-front border background-warning">Off</div>
|
||||
<div class="paper-switch-tile-card-back border background-secondary">On</div>
|
||||
</div>
|
||||
</label>
|
||||
<label for="paperSwitch3" class="paper-switch-tile">
|
||||
<input id="paperSwitch3" name="paperSwitch3" type="checkbox" />
|
||||
<div class="paper-switch-tile-card border">
|
||||
<div class="paper-switch-tile-card-front border background-danger">Declined</div>
|
||||
<div class="paper-switch-tile-card-back border background-success">Accepted</div>
|
||||
</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:
|
||||
|
||||
```html
|
||||
<div class="form-group">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sm-4">
|
||||
<div class="form-group">
|
||||
<label for="paperInputs2">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-8">
|
||||
<div class="form-group">
|
||||
<label for="paperInputs3">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperInputs4">Disabled</label>
|
||||
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="large-input">Large Input</label>
|
||||
<textarea id="large-input" placeholder="Large input"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="no-resize">No Resize</label>
|
||||
<textarea class="no-resize" id="no-resize" placeholder="No resize"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperSelects1">Select</label>
|
||||
<select id="paperSelects1">
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Radio Buttons</legend>
|
||||
<label for="paperRadios1" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios1" value="option 1"> <span>This is the first option</span>
|
||||
</label>
|
||||
<label for="paperRadios2" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios2" value="option 2"> <span>This is the second option</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Check Boxes</legend>
|
||||
<label for="paperChecks1" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks1" value="option 1"> <span>This is the first check</span>
|
||||
</label>
|
||||
<label for="paperChecks2" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Switch</legend>
|
||||
<p>Default - standard outline style (square & circle)</p>
|
||||
<label class="paper-switch">
|
||||
<input id="paperSwitch4" name="paperSwitch4" type="checkbox" />
|
||||
<span class="paper-switch-slider"></span>
|
||||
</label>
|
||||
<label for="paperSwitch4" class="paper-switch-label">
|
||||
Square switch
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="paperSwitch5" class="paper-switch-label">
|
||||
Square switch
|
||||
</label>
|
||||
<label class="paper-switch">
|
||||
<input id="paperSwitch5" name="paperSwitch5" type="checkbox" checked />
|
||||
<span class="paper-switch-slider"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label class="paper-switch">
|
||||
<input id="paperSwitch6" name="paperSwitch6" type="checkbox" checked />
|
||||
<span class="paper-switch-slider round"></span>
|
||||
</label>
|
||||
<label for="paperSwitch6" class="paper-switch-label">
|
||||
Circle switch
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="paperSwitch7" class="paper-switch-label">
|
||||
Circle switch
|
||||
</label>
|
||||
<label class="paper-switch">
|
||||
<input id="paperSwitch7" name="paperSwitch7" type="checkbox" />
|
||||
<span class="paper-switch-slider round"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<p>Type2 - inline style (square & circle)</p>
|
||||
<label class="paper-switch-2">
|
||||
<input id="paperSwitch8" name="paperSwitch8" type="checkbox" checked />
|
||||
<span class="paper-switch-slider"></span>
|
||||
</label>
|
||||
<label for="paperSwitch8" class="paper-switch-2-label">
|
||||
Square switch
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="paperSwitch9" class="paper-switch-2-label">
|
||||
Square switch
|
||||
</label>
|
||||
<label class="paper-switch-2">
|
||||
<input id="paperSwitch9" name="paperSwitch9" type="checkbox" />
|
||||
<span class="paper-switch-slider"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label class="paper-switch-2">
|
||||
<input id="paperSwitch10" name="paperSwitch10" type="checkbox" />
|
||||
<span class="paper-switch-slider round"></span>
|
||||
</label>
|
||||
<label for="paperSwitch10" class="paper-switch-2-label">
|
||||
Circle switch
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="paperSwitch11" class="paper-switch-2-label">
|
||||
Circle switch
|
||||
</label>
|
||||
<label class="paper-switch-2">
|
||||
<input id="paperSwitch11" name="paperSwitch11" type="checkbox" checked />
|
||||
<span class="paper-switch-slider round"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<p>Type3 - Tile style</p>
|
||||
<label for="paperSwitch1" class="paper-switch-tile">
|
||||
<input id="paperSwitch1" name="paperSwitch1" type="checkbox" />
|
||||
<div class="paper-switch-tile-card border">
|
||||
<div class="paper-switch-tile-card-front border">Front</div>
|
||||
<div class="paper-switch-tile-card-back border background-primary">Back</div>
|
||||
</div>
|
||||
</label>
|
||||
<label for="paperSwitch2" class="paper-switch-tile">
|
||||
<input id="paperSwitch2" name="paperSwitch2" type="checkbox" />
|
||||
<div class="paper-switch-tile-card border">
|
||||
<div class="paper-switch-tile-card-front border background-warning">Off</div>
|
||||
<div class="paper-switch-tile-card-back border background-secondary">On</div>
|
||||
</div>
|
||||
</label>
|
||||
<label for="paperSwitch3" class="paper-switch-tile">
|
||||
<input id="paperSwitch3" name="paperSwitch3" type="checkbox" />
|
||||
<div class="paper-switch-tile-card border">
|
||||
<div class="paper-switch-tile-card-front border background-danger">Declined</div>
|
||||
<div class="paper-switch-tile-card-back border background-success">Accepted</div>
|
||||
</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>
|
||||
```
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
---
|
||||
title: Modals
|
||||
description: PaperCSS Modals
|
||||
---
|
||||
### Simple modal example
|
||||
|
||||
This can be used to implement modals along with features like title, subtitle, text, button and links. Just use whichever component you need for your modal with proper classes and leave the rest on the framework.
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<label class="paper-btn margin" for="modal-1">Open Modal!</label>
|
||||
</div>
|
||||
<input class="modal-state" id="modal-1" type="checkbox">
|
||||
<div class="modal">
|
||||
<label class="modal-bg" for="modal-1"></label>
|
||||
<div class="modal-body">
|
||||
<label class="btn-close" for="modal-1">X</label>
|
||||
<h4 class="modal-title">Modal Title</h4>
|
||||
<h5 class="modal-subtitle">Modal Subtitle</h5>
|
||||
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
|
||||
<label for="modal-1" class="paper-btn">Nice!</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<label class="paper-btn margin" for="modal-1">Open Modal!</label>
|
||||
</div>
|
||||
<input class="modal-state" id="modal-1" type="checkbox">
|
||||
<div class="modal">
|
||||
<label class="modal-bg" for="modal-1"></label>
|
||||
<div class="modal-body">
|
||||
<label class="btn-close" for="modal-1">X</label>
|
||||
<h4 class="modal-title">Modal Title</h4>
|
||||
<h5 class="modal-subtitle">Modal Subtitle</h5>
|
||||
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
|
||||
<label for="modal-1">Nice!</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Modal with title, text and links
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<label class="paper-btn margin" for="modal-2">Another Modal!</label>
|
||||
</div>
|
||||
<input class="modal-state" id="modal-2" type="checkbox">
|
||||
<div class="modal">
|
||||
<label class="modal-bg" for="modal-2"></label>
|
||||
<div class="modal-body">
|
||||
<label class="btn-close" for="modal-2">X</label>
|
||||
<h4 class="modal-title">Modal Title</h4>
|
||||
<h5 class="modal-subtitle">Modal Subtitle</h5>
|
||||
<p class="modal-text">This is another example of modal which is implemented with pure CSS! :D</p>
|
||||
<a href="/#download">Get PaperCSS</a>
|
||||
<label for="modal-2" class="modal-link">Close</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<label class="paper-btn margin" for="modal-2">Another Modal!</label>
|
||||
</div>
|
||||
<input class="modal-state" id="modal-2" type="checkbox">
|
||||
<div class="modal">
|
||||
<label class="modal-bg" for="modal-2"></label>
|
||||
<div class="modal-body">
|
||||
<label class="btn-close" for="modal-2">X</label>
|
||||
<h4 class="modal-title">Modal Title</h4>
|
||||
<h5 class="modal-subtitle">Modal Subtitle</h5>
|
||||
<p class="modal-text">This is another example of modal which is implemented with pure CSS! :D</p>
|
||||
<a href="/#download">Get PaperCSS</a>
|
||||
<label for="modal-2" class="modal-link">Close</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
---
|
||||
title: Navbar
|
||||
description: PaperCSS Navbar
|
||||
---
|
||||
|
||||
<nav class="border fixed split-nav">
|
||||
<div class="nav-brand">
|
||||
<h3><a href="/">Get PaperCSS</a></h3>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible0" type="checkbox" name="collapsible0">
|
||||
<label for="collapsible0">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="/docs/">Documentation</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
<li><a href="https://github.com/rhyneav/papercss" target="_blank">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="border split-nav">
|
||||
<div class="nav-brand">
|
||||
<h3><a href="#">Get PaperCSS</a></h3>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible1" type="checkbox" name="collapsible1">
|
||||
<label for="collapsible1">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
#### Code:
|
||||
|
||||
Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the whole page. It's also mobile responsive and will show a hamburger menu on small screens. No JavaScript required!
|
||||
|
||||
```html
|
||||
<nav class="border fixed split-nav">
|
||||
<div class="nav-brand">
|
||||
<h3><a href="#">Get PaperCSS</a></h3>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible1" type="checkbox" name="collapsible1">
|
||||
<label for="collapsible1">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Not Split Navbar
|
||||
|
||||
<nav class="border">
|
||||
<div class="nav-brand">
|
||||
<h3><a href="#">Get PaperCSS</a></h3>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible2" type="checkbox" name="collapsible2">
|
||||
<label for="collapsible2">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<nav class="border fixed">
|
||||
<div class="nav-brand">
|
||||
<h4><a href="#">Get PaperCSS</a></h4>
|
||||
</div>
|
||||
<div class="collapsible">
|
||||
<input id="collapsible2" type="checkbox" name="collapsible2">
|
||||
<label for="collapsible2">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</label>
|
||||
<div class="collapsible-body">
|
||||
<ul class="inline">
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
---
|
||||
title: Popovers
|
||||
description: PaperCSS Popovers
|
||||
---
|
||||
### Basic usage
|
||||
|
||||
You can add popovers, also called tooltips, on your elements. popover attribute is the popover text content, popover-position attribute can be: top, left, right, bottom.
|
||||
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col">
|
||||
<p popover-left="Popover on left">Popover left position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover-top="Popover on top">Popover top position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover-bottom="Popover on bottom">Popover bottom position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover-right="Popover on right">Popover right position</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p popover-left="Popover on left">Popover left position</p>
|
||||
<p popover-top="Popover on top">Popover top position</p>
|
||||
<p popover-bottom="Popover on bottom">Popover bottom position</p>
|
||||
<p popover-right="Popover on right">Popover right position</p>
|
||||
```
|
||||
|
||||
But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="sm-6 col">
|
||||
<button popover-top="Popover on top">Popover on top and on a button!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<button popover-top="Popover on top">Popover on top and on a button!</button>
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -1,196 +0,0 @@
|
|||
---
|
||||
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>
|
||||
```
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
---
|
||||
title: Tabs
|
||||
description: PaperCSS Tabs
|
||||
---
|
||||
<div class="row flex-spaces tabs">
|
||||
<input id="tab1" type="radio" name="tabs" checked>
|
||||
<label for="tab1">Tab 1</label>
|
||||
<input id="tab2" type="radio" name="tabs">
|
||||
<label for="tab2">Tab 2</label>
|
||||
<input id="tab3" type="radio" name="tabs">
|
||||
<label for="tab3">Tab 3</label>
|
||||
<input id="tab4" type="radio" name="tabs">
|
||||
<label for="tab4">Tab 4</label>
|
||||
<div class="content" id="content1">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter
|
||||
rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
</p>
|
||||
<p>
|
||||
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump.
|
||||
Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content" id="content2">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball
|
||||
t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine
|
||||
chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock.
|
||||
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork
|
||||
chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank.
|
||||
Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami
|
||||
beef ribs.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content" id="content3">
|
||||
<p>
|
||||
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump.
|
||||
Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
|
||||
</p>
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter
|
||||
rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content" id="content4">
|
||||
<p>
|
||||
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork
|
||||
chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank.
|
||||
Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami
|
||||
beef ribs.
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball
|
||||
t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine
|
||||
chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces tabs">
|
||||
<input id="tab1" type="radio" name="tabs" checked>
|
||||
<label for="tab1">Tab 1</label>
|
||||
|
||||
<input id="tab2" type="radio" name="tabs">
|
||||
<label for="tab2">Tab 2</label>
|
||||
|
||||
<input id="tab3" type="radio" name="tabs">
|
||||
<label for="tab3">Tab 3</label>
|
||||
|
||||
<input id="tab4" type="radio" name="tabs">
|
||||
<label for="tab4">Tab 4</label>
|
||||
|
||||
<div class="content" id="content1">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
|
||||
</p>
|
||||
<p>
|
||||
Brisket meatball turkey short loin boudin leberkas meatloaf...
|
||||
</p>
|
||||
</div>
|
||||
<div class="content" id="content2">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket...
|
||||
</p>
|
||||
</div>
|
||||
<div class="content" id="content3">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
|
||||
</p>
|
||||
<p>
|
||||
Brisket meatball turkey short loin boudin leberkas meatloaf...
|
||||
</p>
|
||||
</div>
|
||||
<div class="content" id="content4">
|
||||
<p>
|
||||
Bacon ipsum dolor sit amet landjaeger sausage brisket...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Content
|
||||
description: PaperCSS Content
|
||||
---
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
---
|
||||
title: Code
|
||||
description: PaperCSS Code
|
||||
---
|
||||
Let's make some pretty `<code>`
|
||||
|
||||
Print files backwards using <kbd>tac</kbd>
|
||||
|
||||
To stop a process, hit <kbd>ctrl + c</kbd>
|
||||
|
||||
<pre><code>function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p>Let's make some pretty <code><code></code></p>
|
||||
<p>Print files backwards using <kbd>tac</kbd></p>
|
||||
<p>To stop a process, hit <kbd>ctrl + c</kbd></p>
|
||||
|
||||
<pre><code>function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
</code></pre>
|
||||
```
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
---
|
||||
title: Images
|
||||
description: PaperCSS Images
|
||||
---
|
||||
### Responsive
|
||||
|
||||
Images by default are responsive
|
||||
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash">
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash">
|
||||
```
|
||||
|
||||
### Float
|
||||
|
||||
You can also float responsive images to fit neatly with your text
|
||||
|
||||
<img src="https://unsplash.it/200" alt="Smaller Unsplash" class="float-left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non elit sed lorem vulputate consectetur sed vel orci. Nunc orci metus, hendrerit viverra diam a, viverra efficitur nisi. Suspendisse ante sapien, porta vitae augue et, pulvinar posuere nibh. Suspendisse id commodo sem, vestibulum malesuada erat. Duis luctus est sit amet nisl maximus porta. Curabitur tempor nisi tincidunt ultricies rutrum. Nam finibus turpis ut nibh dignissim, in tincidunt mauris suscipit. Curabitur sollicitudin mi quis orci semper, nec egestas nibh mollis. Aenean pellentesque lectus rutrum, ultrices felis malesuada, finibus purus. Morbi eleifend pellentesque justo, quis vestibulum mi. Donec porta ipsum tellus, ac scelerisque lectus pellentesque eget. Etiam quis rutrum dui. Nulla facilisi. Donec imperdiet mattis mi nec fringilla. Donec mollis augue sed viverra placerat. Donec varius, sem sed porttitor euismod, est nunc varius tellus, eget molestie urna arcu ac turpis. Phasellus id sem elit. Vivamus pellentesque mauris vel ex laoreet varius. Vivamus non tempor libero. Nam consectetur nisi erat, ac varius elit porttitor quis. Morbi ullamcorper, tortor in sagittis tempus, justo ipsum pretium urna, ut bibendum nisl orci et eros. Quisque ut ipsum neque. Integer sapien dolor, vestibulum id maximus ac, pharetra eu augue.
|
||||
<img src="https://unsplash.it/100" alt="Smallerer Unsplash" class="float-right"> Aenean mauris tellus, facilisis sed quam non, tincidunt rutrum risus. Fusce quam urna, commodo vitae nunc condimentum, efficitur commodo libero. Sed dignissim odio enim, ac pharetra dui laoreet id. Suspendisse nec accumsan erat. Integer sit amet leo arcu. Proin sagittis blandit tempor. Vivamus at egestas lectus. Mauris eros tellus, egestas ac neque eget, lacinia sagittis ante. Phasellus faucibus suscipit erat, eget malesuada neque congue non.
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p>
|
||||
<img src="https://unsplash.it/200" class="float-left">
|
||||
Lorem ipsum dolor.......
|
||||
<img src="https://unsplash.it/100" class="float-right">
|
||||
Aenean mauris tellus......
|
||||
</p>
|
||||
```
|
||||
|
||||
### No Responsive & No Borders
|
||||
|
||||
If you don't like the default, you can just add the class `no-responsive` to prevent the image from being responsive. You can also remove the default border with `no-border`.
|
||||
|
||||
<img src="https://unsplash.it/300" alt="Not responsive Unsplash" class="no-responsive no-border">
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<img src="https://unsplash.it/300" class="no-responsive no-border">
|
||||
```
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
---
|
||||
title: Lists
|
||||
description: PaperCSS Lists
|
||||
---
|
||||
|
||||
### Ordered Lists
|
||||
|
||||
<ol>
|
||||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
<li>Finally this</li>
|
||||
<li>Then we'll go one deeper
|
||||
<ol>
|
||||
<li>Dillon</li>
|
||||
<li>Francis
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
|
||||
### Unordered Lists
|
||||
|
||||
<ul>
|
||||
<li>Let's try this</li>
|
||||
<li>Let's try this again
|
||||
<ul>
|
||||
<li>And now we are nested</li>
|
||||
<li>Pretty cool?
|
||||
<ul>
|
||||
<li>The list items are just text</li>
|
||||
<li>From this font
|
||||
<ul>
|
||||
<li>We'll keep going</li>
|
||||
<li>Until we hit
|
||||
<ul>
|
||||
<li>LEVEL 5</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>And now we're are the top!</li>
|
||||
</ul>
|
||||
|
||||
### Inline List
|
||||
|
||||
<ul class="inline">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
<li>Item 4</li>
|
||||
</ul>
|
||||
|
||||
#### Codes:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
<li>Finally this</li>
|
||||
<li>Then we'll go one deeper
|
||||
<ol>
|
||||
<li>Dillon</li>
|
||||
<li>Francis
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
|
||||
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! -->
|
||||
|
||||
<!-- For inline lists -->
|
||||
<ul class="inline">...</ul>
|
||||
```
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
---
|
||||
title: Tables
|
||||
description: PaperCSS Tables
|
||||
---
|
||||
### Regular
|
||||
|
||||
<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>
|
||||
|
||||
### Hover
|
||||
|
||||
<table class="table-hover">
|
||||
<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>
|
||||
|
||||
### Alternating
|
||||
|
||||
<table class="table-alternating">
|
||||
<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>
|
||||
|
||||
#### Code:
|
||||
```html
|
||||
<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>
|
||||
|
||||
<!-- Add table-hover or table-alternating to change the style of the table -->
|
||||
<table class="table-hover">
|
||||
<table class="table-alternating">
|
||||
```
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
---
|
||||
title: Typography
|
||||
description: PaperCSS Typography
|
||||
---
|
||||
|
||||
How pretty is the text?
|
||||
|
||||
# Heading 1
|
||||
|
||||
## Heading 2
|
||||
|
||||
### Heading 3
|
||||
|
||||
#### Heading 4
|
||||
|
||||
##### Heading 5
|
||||
|
||||
###### Heading 6
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultrices, eros
|
||||
non elementum accumsan, massa nulla aliquam libero, ut posuere justo nibh ac
|
||||
ipsum. Aliquam blandit commodo justo at laoreet. Suspendisse potenti. Duis magna
|
||||
neque, venenatis non libero a, tincidunt convallis diam. Donec vel fermentum
|
||||
ante. Quisque diam nisl, vestibulum imperdiet sapien nec, interdum fringilla
|
||||
lorem. Morbi sed arcu facilisis, maximus justo vel, porttitor nisl. Nam suscipit
|
||||
metus facilisis iaculis vestibulum.
|
||||
|
||||
```html
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Lorem ipsum dolor....</p>
|
||||
```
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Layout
|
||||
description: PaperCSS Layout
|
||||
---
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
---
|
||||
title: Container
|
||||
description: PaperCSS Container
|
||||
---
|
||||
|
||||
The container is usually at the root of the HTML and holds all of the content in a fixed size. PaperCSS supports a few
|
||||
different sizes to make setting your content within a certain max-width easy. Don't forget to add the `.paper` class to
|
||||
give you site some extra paper flair!
|
||||
|
||||
<div class='paper container margin-bottom-large'>
|
||||
<h4>Responsive Container!</h4>
|
||||
<p>The default</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
||||
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class='paper container container-lg margin-bottom-large'>
|
||||
<h4>Large Container!</h4>
|
||||
<p>Using <code>container-lg</code><p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
||||
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class='paper container container-md margin-bottom-large'>
|
||||
<h4>Medium Container!</h4>
|
||||
<p>Using <code>container-md</code><p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
||||
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class='paper container container-sm margin-bottom-large'>
|
||||
<h4>Small Container!</h4>
|
||||
<p>Using <code>container-sm</code><p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
||||
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class='paper container container-xs margin-bottom-large'>
|
||||
<h4>Extra Small Container!</h4>
|
||||
<p>Using <code>container-xs</code><p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
|
||||
erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
---
|
||||
title: Flexbox
|
||||
description: PaperCSS Flexbox
|
||||
---
|
||||
|
||||
### Flexgrid
|
||||
|
||||
The flexgrid is a grid system that supports up to 12 columns per row. Because it
|
||||
uses flexbox (rather than just %widths), we also get the benefit of the fun
|
||||
parts of flexbox like alignment in more complex ways than normal.
|
||||
|
||||
<div class="demo">
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col">col-3 col</div>
|
||||
<div class="col-9 col">col-9 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-6 md-8 lg-10 col">sm-6 md-8 lg-10 col</div>
|
||||
<div class="sm-6 md-4 lg-2 col">sm-6 md-4 lg-2 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-5 col">sm-5 col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Left (default)</div>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Center (flex-center)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to edges (flex-edges)</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
|
||||
</div>
|
||||
<div class="row flex-top">
|
||||
<div class="sm-4 col">Aligned top</div>
|
||||
<div class="sm-4 col">Aligned top</div>
|
||||
<div class="sm-4 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-middle">
|
||||
<div class="sm-4 col">Aligned middle</div>
|
||||
<div class="sm-4 col">Aligned middle</div>
|
||||
<div class="sm-4 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-bottom">
|
||||
<div class="sm-4 col">Aligned bottom</div>
|
||||
<div class="sm-4 col">Aligned bottom</div>
|
||||
<div class="sm-4 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-3 col align-bottom">Align bottom</div>
|
||||
<div class="sm-3 col align-middle">Align middle</div>
|
||||
<div class="sm-3 col align-top">Align top</div>
|
||||
<div class="sm-3 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col">col-3 col</div>
|
||||
<div class="col-9 col">col-9 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-6 md-8 lg-10 col">sm-6 md-8 lg-10 col</div>
|
||||
<div class="sm-6 md-4 lg-2 col">sm-6 md-4 lg-2 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-5 col">sm-5 col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Left (default)</div>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Center (flex-center)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to edges (flex-edges)</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
|
||||
</div>
|
||||
<div class="row flex-top">
|
||||
<div class="sm-6 col">Aligned top</div>
|
||||
<div class="sm-6 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-middle">
|
||||
<div class="sm-6 col">Aligned middle</div>
|
||||
<div class="sm-6 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-bottom">
|
||||
<div class="sm-6 col">Aligned bottom</div>
|
||||
<div class="sm-6 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-3 col align-bottom">Align bottom</div>
|
||||
<div class="sm-3 col align-middle">Align middle</div>
|
||||
<div class="sm-3 col align-top">Align top</div>
|
||||
<div class="sm-3 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Utilities
|
||||
description: PaperCSS Utilities
|
||||
---
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
---
|
||||
title: Borders & Shadows
|
||||
slug: borders
|
||||
description: PaperCSS Borders & Shadows
|
||||
---
|
||||
### Borders
|
||||
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-primary">Default Border</div>
|
||||
<div class="sm-3 col border border-2 border-primary">Border-2</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-3</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-4 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-5</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-primary">Default Border</div>
|
||||
<div class="sm-3 col border border-2 border-primary">Border-2</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-3</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-4 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-5</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Border Colors
|
||||
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<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 border-white">Border white</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<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 border-white">Border white</div>
|
||||
</div>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<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 border-white">Border white</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Child Borders
|
||||
|
||||
Use this if you want all children to have a border. This will alternate through the different border styles defined above instead of having to add the border class for each element.
|
||||
|
||||
<div class="row flex-center child-borders">
|
||||
<div class="sm-2 col">1</div>
|
||||
<div class="sm-2 col">2</div>
|
||||
<div class="sm-2 col">3</div>
|
||||
<div class="sm-2 col">4</div>
|
||||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-center child-borders">
|
||||
<div class="sm-2 col">1</div>
|
||||
<div class="sm-2 col">2</div>
|
||||
<div class="sm-2 col">3</div>
|
||||
<div class="sm-2 col">4</div>
|
||||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Border Styles
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col border-dashed">Dashed</div>
|
||||
<div class="sm-3 col border-dotted">Dotted</div>
|
||||
<div class="sm-3 col border-dashed border-thick">Dashed Thick</div>
|
||||
<div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col border-dashed">Dashed</div>
|
||||
<div class="sm-3 col border-dotted">Dotted</div>
|
||||
<div class="sm-3 col border-dashed border-thick">Dashed Thick</div>
|
||||
<div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Shadows
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col shadow shadow-large">Large</div>
|
||||
<div class="sm-3 col shadow">Default</div>
|
||||
<div class="sm-3 col shadow shadow-small">Small</div>
|
||||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col shadow shadow-large">Large</div>
|
||||
<div class="sm-3 col shadow">Default</div>
|
||||
<div class="sm-3 col shadow shadow-small">Small</div>
|
||||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Child Shadows
|
||||
|
||||
Use this if you want all children to have a shadow.
|
||||
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col shadow-none">No Shadow</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col shadow-none">No Shadow</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Child Shadows Hover
|
||||
|
||||
Use this if you want all children to have a shadow... that changes on hover
|
||||
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
---
|
||||
title: Colors
|
||||
description: PaperCSS Colors
|
||||
---
|
||||
### Text
|
||||
|
||||
<p class="text-primary">Text primary</p>
|
||||
<p class="text-secondary">Text secondary</p>
|
||||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p>
|
||||
<p class="text-muted">Text muted</p>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p class="text-primary">Text primary</p>
|
||||
<p class="text-secondary">Text secondary</p>
|
||||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p>
|
||||
<p class="text-muted">Text muted</p>
|
||||
```
|
||||
|
||||
### Backgrounds
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="sm-2 col background-primary">Background primary</div>
|
||||
<div class="sm-2 col background-secondary">Background secondary</div>
|
||||
<div class="sm-2 col background-success">Background success</div>
|
||||
<div class="sm-2 col background-warning">Background warning</div>
|
||||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-center">
|
||||
<div class="sm-2 col background-primary">Background primary</div>
|
||||
<div class="sm-2 col background-secondary">Background secondary</div>
|
||||
<div class="sm-2 col background-success">Background success</div>
|
||||
<div class="sm-2 col background-warning">Background warning</div>
|
||||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
---
|
||||
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,38 +0,0 @@
|
|||
---
|
||||
title: Spacing
|
||||
description: PaperCSS Spacing
|
||||
---
|
||||
### Margin
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col margin">Margin</div>
|
||||
<div class="sm-3 col margin-large">Margin-large</div>
|
||||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col margin">Margin</div>
|
||||
<div class="sm-3 col margin-large">Margin-large</div>
|
||||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Padding
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col padding-small">Padding-small</div>
|
||||
<div class="sm-3 col padding-none">Padding-none</div>
|
||||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col padding-small">Padding-small</div>
|
||||
<div class="sm-3 col padding-none">Padding-none</div>
|
||||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<div class='col sm-6 md-4'>
|
||||
<div class='card'>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{- .Title -}}</h4>
|
||||
<div class="card-text">
|
||||
{{- .Params.description -}}
|
||||
</div>
|
||||
<a class='paper-btn btn-block' href='{{ .Permalink | relURL }}'>
|
||||
Let's see!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
<div class='section'>
|
||||
<h2>{{ .Title }}</h2>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
<div class='row flex-spaces'>
|
||||
|
||||
{{ range .Sections }}
|
||||
<div class='collapsible full-width'>
|
||||
<input id='collapsible-section-{{ .Title | urlize }}' type='checkbox' name='collapsible-section' checked>
|
||||
<label for="collapsible-section-{{ .Title | urlize }}">{{ .Title }}</label>
|
||||
<div class='collapsible-body'>
|
||||
<div class="row child-borders">
|
||||
{{ range .Pages }}
|
||||
<a class="paper-btn margin" href='{{ .Permalink | relURL }}'>{{- .Title -}}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ range .Pages }}
|
||||
{{ .Render "li" }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ partial "footer" . }}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
<div class='section'>
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
{{ partial "footer" . }}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
<div class='section'>
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
{{ partial "footer" . }}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
{{- $title := ( .Title ) -}}
|
||||
{{- $siteTitle := ( .Site.Title ) -}}
|
||||
{{- $title404 := ( .Site.Params.info.title404 | default $title ) -}}
|
||||
{{- $sep := ( .Site.Params.seo.titleSeparator | default "•" ) -}}
|
||||
|
||||
{{- if .IsHome -}}
|
||||
{{ print $siteTitle " " $sep " " $.Site.Params.info.description }}
|
||||
{{- else if eq .Kind "404" -}}
|
||||
{{ $title404 }} {{ $sep }} {{ $siteTitle }}
|
||||
{{- else -}}
|
||||
{{ $title }} {{ $sep }} {{ $siteTitle }}
|
||||
{{- end -}}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
</div>
|
||||
</div>
|
||||
{{ partial "nav/sidebar" . }}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<head>
|
||||
{{ partial "head/meta" . }}
|
||||
|
||||
<title>{{ partial "data/title" . }}</title>
|
||||
<link rel='canonical' href='{{ .Permalink }}'>
|
||||
|
||||
{{ partial "head/includes" . }}
|
||||
</head>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!-- Styles -->
|
||||
<link rel='stylesheet' href='/assets/paper.css'>
|
||||
<link rel='stylesheet' href='/assets/demo.css'>
|
||||
<link rel='stylesheet' href='/assets/syntax.css'>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<meta name='description' content='The less formal CSS framework.'>
|
||||
<meta name='author' content='Rhyneav and PaperCSS contributors.'>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel='shortcut icon' href='/favicon.ico' type='image/x-icon'>
|
||||
|
||||
{{ partial "head/opengraph" . }}
|
||||
|
||||
{{ hugo.Generator }}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<!-- Twitter -->
|
||||
<meta name="twitter:description" content="The less formal CSS framework">
|
||||
<meta name="twitter:title" content="PaperCSS">
|
||||
|
||||
<!-- OpenGraph -->
|
||||
<meta property="og:url" content="https://www.getpapercss.com/">
|
||||
<meta property="og:title" content="PaperCSS">
|
||||
<meta property="og:description" content="The less formal CSS framework">
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
{{ partial "head/head" . }}
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div id='top' class='row site'>
|
||||
<div class='sm-12 md-8 col'>
|
||||
<div class='paper'>
|
||||
<div class='demo-title'>
|
||||
<div class='row flex-center'>
|
||||
<div class='text-center'>
|
||||
<h1>{{ .Site.Title }}</h1>
|
||||
<h3>{{ .Site.Params.info.description }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ partial "nav/main" . }}
|
||||
</div>
|
||||
<div class="to-top">
|
||||
<a href="#top" class="paper-btn margin">^</a>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<div class="row flex-center child-borders">
|
||||
{{ range .Site.Menus.main }}
|
||||
{{- $isCurrent := ( or ( $.IsMenuCurrent "main" . ) ( $.HasMenuCurrent "main" . ) ) -}}
|
||||
<a class='paper-btn margin{{- if $isCurrent }} current{{- end -}}' href='{{ .URL }}'>
|
||||
{{- .Name -}}
|
||||
</a>
|
||||
{{ end }}
|
||||
<a href="https://github.com/rhyneav/papercss" target="_blank" class="paper-btn margin">Github</a>
|
||||
</div>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<div class='sm-12 md-4 col sidebar'>
|
||||
{{ range .Site.Sections }}
|
||||
<div class='paper'>
|
||||
<h3 class='sidebar-title' style='text-align:center'>
|
||||
<a href='/docs'>Documentation</a>
|
||||
</h3>
|
||||
<div class='row'>
|
||||
{{ range .Sections }}
|
||||
<div class='collapsible full-width'>
|
||||
<input id='collapsible-{{ .Title | urlize }}' type='radio' name='collapsible'>
|
||||
<label for="collapsible-{{ .Title | urlize }}">{{ .Title }}</label>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
{{ range .Pages }}
|
||||
<li>
|
||||
<a href='{{ .Permalink | relURL }}'>{{ .Title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class='paper'>
|
||||
<div class="row flex-center">
|
||||
<p>Made with 💛 by <a href="https://vlaservich.com" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<button {{- with .Get 0 }} class='btn-{{- . -}}' {{- end -}}>
|
||||
{{ .Inner }}
|
||||
</button>
|
||||
51
docs/static/assets/demo.css
vendored
51
docs/static/assets/demo.css
vendored
|
|
@ -1,51 +0,0 @@
|
|||
body {
|
||||
background-image: url("/img/geometry2.png")
|
||||
}
|
||||
html.dark body {
|
||||
background: #41403e;
|
||||
}
|
||||
#top {
|
||||
max-width: 1440px;
|
||||
}
|
||||
.demo .row .col {
|
||||
background-color: #eee;
|
||||
}
|
||||
.demo .row .col:nth-child(even) {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.docs {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.summary a {
|
||||
color: #41403e;
|
||||
}
|
||||
img.no-responsive {
|
||||
max-width: -webkit-fill-available;
|
||||
max-width: -moz-available;
|
||||
}
|
||||
.to-top {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
right: 1em
|
||||
}
|
||||
.to-top .paper-btn {
|
||||
padding: .6em 1em;
|
||||
border-top-left-radius: 185px 160px;
|
||||
border-top-right-radius: 200px 195px;
|
||||
border-bottom-right-radius: 160px 195px;
|
||||
border-bottom-left-radius: 185px 190px
|
||||
}
|
||||
.demo-title:hover + .to-top {
|
||||
opacity: 0
|
||||
}
|
||||
.sidebar-title a {
|
||||
color: inherit;
|
||||
background: none;
|
||||
}
|
||||
.collapsible.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
365
docs/static/assets/syntax.css
vendored
365
docs/static/assets/syntax.css
vendored
|
|
@ -1,365 +0,0 @@
|
|||
/* 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;
|
||||
}
|
||||
|
||||
BIN
docs/static/favicon.ico
vendored
BIN
docs/static/favicon.ico
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
34
gulpfile.js
Normal file
34
gulpfile.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
var gulp = require('gulp'),
|
||||
connect = require('gulp-connect'),
|
||||
less = require('gulp-less'),
|
||||
cleanCSS = require('gulp-clean-css'),
|
||||
rename = require('gulp-rename');
|
||||
|
||||
gulp.task('webserver', function() {
|
||||
connect.server({
|
||||
livereload: true
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('less', function() {
|
||||
gulp.src('src/styles.less')
|
||||
.pipe(less())
|
||||
.pipe(cleanCSS({format: 'beautify'}))
|
||||
.pipe(rename('paper.css'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(connect.reload());
|
||||
});
|
||||
|
||||
gulp.task('watch', function() {
|
||||
gulp.watch('src/*.less', ['less']);
|
||||
});
|
||||
|
||||
gulp.task('minify-css', () => {
|
||||
gulp.src('dist/paper.css')
|
||||
.pipe(cleanCSS())
|
||||
.pipe(rename('paper.min.css'))
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['less', 'webserver', 'watch']);
|
||||
gulp.task('build', ['less', 'minify-css'])
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
838
index.html
Normal file
838
index.html
Normal file
|
|
@ -0,0 +1,838 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/dist/paper.css">
|
||||
<link rel="stylesheet" href="/demo.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container paper">
|
||||
<div class="demo-title">
|
||||
<div class="row flex-center">
|
||||
<div class="text-center">
|
||||
<h1>PaperCSS</h1>
|
||||
<h3>the less formal css framework</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-center child-borders">
|
||||
<a href="#download" class="paper-btn margin">Download</a>
|
||||
<a href="#flexbox" class="paper-btn margin">Docs</a>
|
||||
<a href="#about" class="paper-btn margin">About</a>
|
||||
<a href="https://github.com/rhyneav/papercss" class="paper-btn margin">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="flexbox" class="section">
|
||||
<h2>Flexbox</h2>
|
||||
<h4>Flexgrid</h4>
|
||||
<p>The flexgrid is a grid system that supports up to 12 columns per row. Because it uses flexbox (rather than just %widths), we also get the benefit of the fun parts of flexbox like alignment in more complex ways than normal.</p>
|
||||
<div class="demo">
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col">col-3 col</div>
|
||||
<div class="col-9 col">col-9 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-6 md-8 lg-10 col">sm-6 md-8 lg-10 col</div>
|
||||
<div class="sm-6 md-4 lg-2 col">sm-6 md-4 lg-2 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-5 col">sm-5 col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Left (default)</div>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Center (flex-center)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to edges (flex-edges)</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
|
||||
</div>
|
||||
<div class="row flex-top">
|
||||
<div class="sm-4 col">Aligned top</div>
|
||||
<div class="sm-4 col">Aligned top</div>
|
||||
<div class="sm-4 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-middle">
|
||||
<div class="sm-4 col">Aligned middle</div>
|
||||
<div class="sm-4 col">Aligned middle</div>
|
||||
<div class="sm-4 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-bottom">
|
||||
<div class="sm-4 col">Aligned bottom</div>
|
||||
<div class="sm-4 col">Aligned bottom</div>
|
||||
<div class="sm-4 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-3 col align-bottom">Align bottom</div>
|
||||
<div class="sm-3 col align-middle">Align middle</div>
|
||||
<div class="sm-3 col align-top">Align top</div>
|
||||
<div class="sm-3 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col">col-3 col</div>
|
||||
<div class="col-9 col">col-9 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-6 md-8 lg-10 col">sm-6 md-8 lg-10 col</div>
|
||||
<div class="sm-6 md-4 lg-2 col">sm-6 md-4 lg-2 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-5 col">sm-5 col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Left (default)</div>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to edges (flex-edges)</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
|
||||
</div>
|
||||
<div class="row flex-top">
|
||||
<div class="sm-6 col">Aligned top</div>
|
||||
<div class="sm-6 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-middle">
|
||||
<div class="sm-6 col">Aligned middle</div>
|
||||
<div class="sm-6 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-bottom">
|
||||
<div class="sm-6 col">Aligned bottom</div>
|
||||
<div class="sm-6 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-3 col align-bottom">Align bottom</div>
|
||||
<div class="sm-3 col align-middle">Align middle</div>
|
||||
<div class="sm-3 col align-top">Align top</div>
|
||||
<div class="sm-3 col">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Typography</h2>
|
||||
<p>How pretty is the text?</p>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultrices, eros non elementum accumsan, massa nulla
|
||||
aliquam libero, ut posuere justo nibh ac ipsum. Aliquam blandit commodo justo at laoreet. Suspendisse potenti. Duis
|
||||
magna neque, venenatis non libero a, tincidunt convallis diam. Donec vel fermentum ante. Quisque diam nisl, vestibulum
|
||||
imperdiet sapien nec, interdum fringilla lorem. Morbi sed arcu facilisis, maximus justo vel, porttitor nisl. Nam
|
||||
suscipit metus facilisis iaculis vestibulum.</p>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Lorem ipsum dolor....</p></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Buttons</h2>
|
||||
<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imprefect Buttons</a></p>
|
||||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button>
|
||||
<a href="#" class="paper-btn">Link</a>
|
||||
<div class="row">
|
||||
<div class="col-6 col">
|
||||
<button class="btn-block">Block level</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imprefect Buttons</a></p>
|
||||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button>
|
||||
<a href="#" class="paper-btn">Link</a>
|
||||
<div class="row">
|
||||
<div class="col-6 col">
|
||||
<button class="btn-block">Block level</button>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Forms</h2>
|
||||
<div class="form-group">
|
||||
<label>Input</label>
|
||||
<input type="text" placeholder="Nice input">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sm-4">
|
||||
<div class="form-group">
|
||||
<label>Block Level</label>
|
||||
<input class="input-block" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-8">
|
||||
<div class="form-group">
|
||||
<label>Block Level</label>
|
||||
<input class="input-block" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
<select>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Radio Buttons</legend>
|
||||
<label for="paperRadios1" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios1" value="option 1"> <span>This is the first option<span>
|
||||
</label>
|
||||
<label for="paperRadios2" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios2" value="option 2"> <span>This is the second option<span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Check Boxes</legend>
|
||||
<label for="paperChecks1" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks1" value="option 1"> <span>This is the first check</span>
|
||||
</label>
|
||||
<label for="paperChecks2" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="form-group">
|
||||
<label>Input</label>
|
||||
<input type="text" placeholder="Nice input">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sm-4">
|
||||
<div class="form-group">
|
||||
<label>Block Level</label>
|
||||
<input class="input-block" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-8">
|
||||
<div class="form-group">
|
||||
<label>Block Level</label>
|
||||
<input class="input-block" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
<select>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Radio Buttons</legend>
|
||||
<label for="paperRadios1" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios1" value="option 1"> <span>This is the first option<span>
|
||||
</label>
|
||||
<label for="paperRadios2" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios2" value="option 2"> <span>This is the second option<span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Check Boxes</legend>
|
||||
<label for="paperChecks1" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks1" value="option 1"> <span>This is the first check</span>
|
||||
</label>
|
||||
<label for="paperChecks2" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Lists</h2>
|
||||
<h4>Ordered Lists</h4>
|
||||
<ol>
|
||||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
<li>Finally this</li>
|
||||
<li>Then we'll go one deeper</li>
|
||||
<ol>
|
||||
<li>Dillon</li>
|
||||
<li>Francis</li>
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?</li>
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel</li>
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
<h4>Unordered Lists</h4>
|
||||
<ul>
|
||||
<li>Let's try this</li>
|
||||
<li>Let's try this again</li>
|
||||
<ul>
|
||||
<li>And now we are nested</li>
|
||||
<li>Pretty cool?</li>
|
||||
<ul>
|
||||
<li>The list items are just text</li>
|
||||
<li>From this font</li>
|
||||
<ul>
|
||||
<li>We'll keep going</li>
|
||||
<li>Until we hit</li>
|
||||
<ul>
|
||||
<li>LEVEL 5</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</ul>
|
||||
</ul>
|
||||
<li>And now we're are the top!</li>
|
||||
</ul>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<ol>
|
||||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
<li>Finally this</li>
|
||||
<li>Then we'll go one deeper</li>
|
||||
<ol>
|
||||
<li>Dillon</li>
|
||||
<li>Francis</li>
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?</li>
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel</li>
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
|
||||
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Code</h2>
|
||||
<p>Let's make some pretty <code><code></code></p>
|
||||
<p>Print files backwards using <kbd>tac</kbd></p>
|
||||
<p>To stop a process, hit <kbd>ctrl + c</kbd></p>
|
||||
<pre>
|
||||
function add(x, y) {
|
||||
return x + y;
|
||||
} </pre>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<p>Let's make some pretty <code>&lt;code&gt;</code></p>
|
||||
<p>Print files backwards using <kbd>tac</kbd></p>
|
||||
<p>To stop a process, hit <kbd>ctrl + c</kbd></p>
|
||||
<pre>
|
||||
function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
</pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Tables</h2>
|
||||
<h4>Regular</h4>
|
||||
<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>
|
||||
<h4>Hover</h4>
|
||||
<table class="table-hover">
|
||||
<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>
|
||||
<h4>Alternating</h4>
|
||||
<table class="table-alternating">
|
||||
<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>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<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>
|
||||
|
||||
<!-- Add table-hover or table-alternating to change the style of the table -->
|
||||
<table class="table-hover">
|
||||
<table class="table-alternating"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Popovers</h2>
|
||||
<h4>Basic usage</h4>
|
||||
<p>You can add popovers, also called tooltips, on your elements. popover attribute is the popover text content, popover-position attribute can be: top, left, right, bottom.</p>
|
||||
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on left" popover-position="left">Popover left position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on top" popover-position="top">Popover top position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on right" popover-position="right">Popover right position</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<p popover="Popover on left" popover-position="left">Popover left position</p>
|
||||
<p popover="Popover on top" popover-position="top">Popover top position</p>
|
||||
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
|
||||
<p popover="Popover on right" popover-position="right">Popover right position</p></pre>
|
||||
</div>
|
||||
|
||||
<p>But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...</p>
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="sm-6 col">
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Colors</h2>
|
||||
<h4>Text</h4>
|
||||
<p class="text-primary">Text primary</p>
|
||||
<p class="text-secondary">Text secondary</p>
|
||||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<p class="text-primary">Text primary</p>
|
||||
<p class="text-secondary">Text secondary</p>
|
||||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p> </pre>
|
||||
</div>
|
||||
<h4>Backgrounds</h4>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-2 col background-primary">Background primary</div>
|
||||
<div class="sm-2 col background-secondary">Background secondary</div>
|
||||
<div class="sm-2 col background-success">Background success</div>
|
||||
<div class="sm-2 col background-warning">Background warning</div>
|
||||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-2 col background-primary">Background primary</div>
|
||||
<div class="sm-2 col background-secondary">Background secondary</div>
|
||||
<div class="sm-2 col background-success">Background success</div>
|
||||
<div class="sm-2 col background-warning">Background warning</div>
|
||||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Borders & Shadows</h2>
|
||||
<h4>Borders</h4>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-primary">Default Border</div>
|
||||
<div class="sm-3 col border border-2 border-primary">Border-2</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-3</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-4 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-5</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-primary">Default Border</div>
|
||||
<div class="sm-3 col border border-2 border-primary">Border-2</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-3</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-4 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-5</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Border Colors</h4>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<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>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<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>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<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></pre>
|
||||
</div>
|
||||
<h4>Child Borders</h4>
|
||||
<p>Use this if you want all children to have a border. This will alternate through the different border styles defined above instead of having to add the border class for each element.</p>
|
||||
<div class="row flex-center child-borders">
|
||||
<div class="sm-2 col">1</div>
|
||||
<div class="sm-2 col">2</div>
|
||||
<div class="sm-2 col">3</div>
|
||||
<div class="sm-2 col">4</div>
|
||||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-center child-borders">
|
||||
<div class="sm-2 col">1</div>
|
||||
<div class="sm-2 col">2</div>
|
||||
<div class="sm-2 col">3</div>
|
||||
<div class="sm-2 col">4</div>
|
||||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Shadows</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col shadow shadow-large">Large</div>
|
||||
<div class="sm-3 col shadow">Default</div>
|
||||
<div class="sm-3 col shadow shadow-small">Small</div>
|
||||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col shadow shadow-large">Large</div>
|
||||
<div class="sm-3 col shadow">Default</div>
|
||||
<div class="sm-3 col shadow shadow-small">Small</div>
|
||||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Child Shadows</h4>
|
||||
<p>Use this if you want all children to have a shadow.</p>
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Child Shadows Hover</h4>
|
||||
<p>Use this if you want all children to have a shadow... that changes on hover</p>
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Utilities</h2>
|
||||
<h4>Margin</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col margin">Margin</div>
|
||||
<div class="sm-3 col margin-large">Margin-large</div>
|
||||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col margin">Margin</div>
|
||||
<div class="sm-3 col margin-large">Margin-large</div>
|
||||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Padding</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col padding-small">Padding-small</div>
|
||||
<div class="sm-3 col padding-none">Padding-none</div>
|
||||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col padding-small">Padding-small</div>
|
||||
<div class="sm-3 col padding-none">Padding-none</div>
|
||||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Images</h2>
|
||||
<h4>Responsive</h4>
|
||||
<p>Images by default are responsive</p>
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash">
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash"></pre>
|
||||
</div>
|
||||
<h4>Float</h4>
|
||||
<p>You can also float responsive images to fit neatly with your text</p>
|
||||
<p>
|
||||
<img src="https://unsplash.it/200" alt="Smaller Unsplash" class="float-left">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non elit sed lorem vulputate consectetur sed vel orci. Nunc orci metus, hendrerit viverra diam a, viverra efficitur nisi. Suspendisse ante sapien, porta vitae augue et, pulvinar posuere nibh. Suspendisse id commodo sem, vestibulum malesuada erat. Duis luctus est sit amet nisl maximus porta. Curabitur tempor nisi tincidunt ultricies rutrum. Nam finibus turpis ut nibh dignissim, in tincidunt mauris suscipit. Curabitur sollicitudin mi quis orci semper, nec egestas nibh mollis. Aenean pellentesque lectus rutrum, ultrices felis malesuada, finibus purus.
|
||||
Morbi eleifend pellentesque justo, quis vestibulum mi. Donec porta ipsum tellus, ac scelerisque lectus pellentesque eget. Etiam quis rutrum dui. Nulla facilisi. Donec imperdiet mattis mi nec fringilla. Donec mollis augue sed viverra placerat. Donec varius, sem sed porttitor euismod, est nunc varius tellus, eget molestie urna arcu ac turpis. Phasellus id sem elit. Vivamus pellentesque mauris vel ex laoreet varius. Vivamus non tempor libero. Nam consectetur nisi erat, ac varius elit porttitor quis. Morbi ullamcorper, tortor in sagittis tempus, justo ipsum pretium urna, ut bibendum nisl orci et eros. Quisque ut ipsum neque. Integer sapien dolor, vestibulum id maximus ac, pharetra eu augue.
|
||||
<img src="https://unsplash.it/100" alt="Smallerer Unsplash" class="float-right">
|
||||
Aenean mauris tellus, facilisis sed quam non, tincidunt rutrum risus. Fusce quam urna, commodo vitae nunc condimentum, efficitur commodo libero. Sed dignissim odio enim, ac pharetra dui laoreet id. Suspendisse nec accumsan erat. Integer sit amet leo arcu. Proin sagittis blandit tempor. Vivamus at egestas lectus. Mauris eros tellus, egestas ac neque eget, lacinia sagittis ante. Phasellus faucibus suscipit erat, eget malesuada neque congue non.
|
||||
</p>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<p>
|
||||
<img src="https://unsplash.it/200" class="float-left">
|
||||
Lorem ipsum dolor.......
|
||||
<img src="https://unsplash.it/100" class="float-right">
|
||||
Aenean mauris tellus......
|
||||
</p></pre>
|
||||
</div>
|
||||
<h4>No Responsive & No Borders</h4>
|
||||
<p>If you don't like the default, you can just add the class <code>no-responsive</code> to prevent the image from being responsive. You can also remove the default border with <code>no-border</code>.</p>
|
||||
<img src="https://unsplash.it/300" alt="Not responsive Unsplash" class="no-responsive no-border">
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<img src="https://unsplash.it/300" class="no-responsive no-border"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 id="download">Download</h2>
|
||||
<p>Download the latest version (0.0.0) using either of the links below. Or download an older release via Github.</p>
|
||||
<div class="row flex-spaces text-center">
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.0.0/paper.css">CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.0.0/paper.min.css">Minified CSS File</a>
|
||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
|
||||
</div>
|
||||
<p>If you'd rather customize things, you can build the CSS yourself via the git repo</p>
|
||||
<ol>
|
||||
<li><code>git clone [repo url]</code></li>
|
||||
<li><code>npm install</code></li>
|
||||
<li><code>npm run build</code></li>
|
||||
<li>Grab the CSS out of the /dist folder created</li>
|
||||
</ol>
|
||||
<p>You can also go into src/colors.less before building to change around the colors of your new CSS.</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 id="about">About</h2>
|
||||
<p>I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made PaperCSS to solve these two challenges of mine :)</p>
|
||||
<p>The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as <code>paper-button</code>. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.</p>
|
||||
<p>While I'm proud of how it's turned out so far, I think there's a lot that can still be done to make it better. Such things as refactoring, adding more utility classes and more border types (like dashed/dotted) could really polish off this framework. That's why it's open sourced and available for pull requests!</p>
|
||||
<p>If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. Check out the Git repo for more info!</p>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[build]
|
||||
publish = "public"
|
||||
12172
package-lock.json
generated
12172
package-lock.json
generated
File diff suppressed because it is too large
Load diff
61
package.json
61
package.json
|
|
@ -1,50 +1,35 @@
|
|||
{
|
||||
"name": "papercss",
|
||||
"version": "1.9.2",
|
||||
"description": "The less formal CSS framework.",
|
||||
"main": "dist/paper.css",
|
||||
"version": "1.0.0",
|
||||
"description": "Another CSS framework",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "npm run css:build && npm run hugo:build",
|
||||
"css:build": "node ./build/build.js",
|
||||
"dev": "concurrently --kill-others \"npm run dev:hot-reload\" \"npm run hugo:serve\"",
|
||||
"dev:hot-reload": "node ./build/hot-reload.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"
|
||||
"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"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/papercss/papercss.git"
|
||||
"url": "git+https://github.com/rhyneav/papercss.git"
|
||||
},
|
||||
"author": "Rhyne Vlaservich <rhyneav@gmail.com>",
|
||||
"author": "rhyneav",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/papercss/papercss/issues"
|
||||
"url": "https://github.com/rhyneav/papercss/issues"
|
||||
},
|
||||
"homepage": "https://www.getpapercss.com",
|
||||
"dependencies": {},
|
||||
"homepage": "https://github.com/rhyneav/papercss#readme",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.8.6",
|
||||
"chai": "^4.1.2",
|
||||
"chalk": "^4.1.0",
|
||||
"chokidar": "^3.4.2",
|
||||
"concurrently": "^5.3.0",
|
||||
"cssnano": "^4.1.10",
|
||||
"hugo-bin": "^0.62.3",
|
||||
"postcss": "^7.0.32",
|
||||
"pre-commit": "^1.2.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.26.10",
|
||||
"stylelint": "^13.7.2",
|
||||
"stylelint-config-sass-guidelines": "^7.1.0",
|
||||
"stylelint-config-standard": "^20.0.0",
|
||||
"stylelint-order": "^4.1.0",
|
||||
"stylelint-scss": "^3.18.0",
|
||||
"write": "^2.0.0"
|
||||
},
|
||||
"pre-commit": [
|
||||
"stylelint"
|
||||
]
|
||||
"gulp": "3.9.1",
|
||||
"gulp-clean-css": "3.9.0",
|
||||
"gulp-connect": "5.0.0",
|
||||
"gulp-less": "3.3.2",
|
||||
"gulp-plumber": "1.1.0",
|
||||
"gulp-rename": "1.2.2",
|
||||
"gulp-watch-less": "1.0.1",
|
||||
"install": "0.10.1",
|
||||
"less": "2.7.2",
|
||||
"normalize.css": "7.0.0",
|
||||
"npm": "5.3.0",
|
||||
"webpack-dev-server": "2.7.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
58
src/borders.less
Normal file
58
src/borders.less
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
.border, .border-1, .child-borders > *:nth-child(6n+1) {
|
||||
border: 2px solid @primary;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
}
|
||||
.border-2, .child-borders > *:nth-child(6n+2) {
|
||||
border-top-left-radius: 125px 25px;
|
||||
border-top-right-radius: 10px 205px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 185px 25px;
|
||||
}
|
||||
.border-3, .child-borders > *:nth-child(6n+3) {
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 255px 15px;
|
||||
border-bottom-left-radius: 225px 15px;
|
||||
border-bottom-right-radius: 15px 255px;
|
||||
}
|
||||
.border-4, .child-borders > *:nth-child(6n+4) {
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 25px 150px;
|
||||
border-bottom-left-radius: 25px 115px;
|
||||
border-bottom-right-radius: 155px 25px;
|
||||
}
|
||||
.border-5, .child-borders > *:nth-child(6n+5) {
|
||||
border-top-left-radius: 250px 15px;
|
||||
border-top-right-radius: 25px 80px;
|
||||
border-bottom-left-radius: 20px 115px;
|
||||
border-bottom-right-radius: 15px 105px;
|
||||
}
|
||||
.border-6, .child-borders > *:nth-child(6n+6) {
|
||||
border-top-left-radius: 28px 125px;
|
||||
border-top-right-radius: 100px 30px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 15px 225px;
|
||||
}
|
||||
.child-borders > * {
|
||||
border: 2px solid @primary;
|
||||
}
|
||||
.border-primary {
|
||||
border-color: @primary;
|
||||
}
|
||||
.border-secondary {
|
||||
border-color: @secondary;
|
||||
}
|
||||
.border-success {
|
||||
border-color: @success;
|
||||
}
|
||||
.border-warning {
|
||||
border-color: @warning;
|
||||
}
|
||||
.border-danger {
|
||||
border-color: @danger;
|
||||
}
|
||||
.border-white {
|
||||
border-color: #FFF;
|
||||
}
|
||||
8
src/boxreset.less
Normal file
8
src/boxreset.less
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// Why is box sizing not the default?
|
||||
// https://www.paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
46
src/buttons.less
Normal file
46
src/buttons.less
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
button, .paper-btn {
|
||||
align-self:center;
|
||||
background:transparent;
|
||||
transition:all .5s ease;
|
||||
color: @primary;
|
||||
outline:none;
|
||||
border:solid 2px @primary;
|
||||
.border;
|
||||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
.shadow;
|
||||
&.btn-large {
|
||||
.shadow-large;
|
||||
font-size:2rem;
|
||||
padding:1rem 1rem;
|
||||
}
|
||||
&.btn-small {
|
||||
.shadow-small;
|
||||
font-size: .75rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover{
|
||||
.shadow-hover;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
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-repeat:repeat-x;
|
||||
background-size: 4px 3px;
|
||||
background-position:0 90%;
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
color: @primary;
|
||||
}
|
||||
}
|
||||
27
src/code.less
Normal file
27
src/code.less
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
color: @secondary;
|
||||
background-color: lighten(@primary, 70%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
color: #fff;
|
||||
background-color: @primary;
|
||||
border-radius: 3px;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
color: @primary;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: lighten(@primary, 73%);
|
||||
border: 1px solid lighten(@primary, 50%);
|
||||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
48
src/colors.less
Normal file
48
src/colors.less
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
@primary: #41403E;
|
||||
@secondary: #0071DE;
|
||||
|
||||
@success: #86a361;
|
||||
@warning: #ddcd45;
|
||||
@danger: #a7342d;
|
||||
|
||||
@main-colors: @primary, @secondary, @success, @warning, @danger;
|
||||
|
||||
@primary-light: lighten(@primary, 50%);
|
||||
@secondary-light: lighten(@secondary, 50%);
|
||||
@success-light: lighten(@success, 30%);
|
||||
@warning-light: lighten(@warning, 30%);
|
||||
@danger-light: lighten(@danger, 45%);
|
||||
|
||||
// Mixin to create colors from list
|
||||
.text-primary {
|
||||
color: @primary;
|
||||
}
|
||||
.text-secondary {
|
||||
color: @secondary;
|
||||
}
|
||||
.text-success {
|
||||
color: @success;
|
||||
}
|
||||
.text-warning {
|
||||
color: @warning;
|
||||
}
|
||||
.text-danger {
|
||||
color: @danger;
|
||||
}
|
||||
.background {
|
||||
&-primary {
|
||||
background-color: @primary-light;
|
||||
}
|
||||
&-secondary {
|
||||
background-color: @secondary-light;
|
||||
}
|
||||
&-success {
|
||||
background-color: @success-light;
|
||||
}
|
||||
&-warning {
|
||||
background-color: @warning-light;
|
||||
}
|
||||
&-danger {
|
||||
background-color: @danger-light;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
.collapsible {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
@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;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
margin: 0;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
@include color('color', 'primary');
|
||||
}
|
||||
|
||||
&[id^='collapsible']:checked~div.collapsible-body {
|
||||
margin: 0;
|
||||
max-height: 960px;
|
||||
opacity: 1;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
> label {
|
||||
@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;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
@include color('color', 'muted');
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
@mixin btn-close-color($base-color-name) {
|
||||
@include color('color', #{$base-color-name}-text);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include color('color', #{$base-color-name}-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
@include color('border-color', 'primary');
|
||||
@include border-style();
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
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 $color-name, $color, $color-light, $color-text in $colors {
|
||||
.alert-#{$color-name} {
|
||||
@include color('color', #{$color-name}-text);
|
||||
@include color('background-color', #{$color-name}-light);
|
||||
@include color('border-color', $color-name);
|
||||
|
||||
.btn-close {
|
||||
@include btn-close-color($color-name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-state {
|
||||
display: none;
|
||||
|
||||
&:checked + .dismissible {
|
||||
border-width: 0;
|
||||
margin: 0;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
article {
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
@include color(color, 'muted-text');
|
||||
font-size: 15px;
|
||||
|
||||
a {
|
||||
@include color(color, 'muted-text');
|
||||
background-image: none;
|
||||
|
||||
&:hover {
|
||||
@include color(color, 'light-dark');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-lead {
|
||||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
margin: 35px;
|
||||
}
|
||||
|
||||
button {
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 2rem;
|
||||
@include resp(xs) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.badge {
|
||||
@include border-style();
|
||||
@include color('color', 'white');
|
||||
@include color('background-color', 'muted');
|
||||
@include color('border-color', 'primary');
|
||||
border: 2px solid;
|
||||
border-color: transparent;
|
||||
display: inline-block;
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 0.25em 0.4em;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@each $colorName, $color in $colors {
|
||||
.badge.#{$colorName} {
|
||||
@include color('background-color', #{$colorName});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
ul.breadcrumb {
|
||||
list-style: none;
|
||||
padding: 10px 16px;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
font-size: 20px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
a {
|
||||
@include color('color', 'secondary');
|
||||
background-image: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li + li::before {
|
||||
content: '/\00a0';
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
button,
|
||||
.paper-btn,
|
||||
[type='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-image: none;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
padding: 0.75rem;
|
||||
|
||||
@include resp(520px) {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.btn-large {
|
||||
@include shadow(large);
|
||||
font-size: 2rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&.btn-small {
|
||||
@include shadow(small);
|
||||
font-size: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include color('border-color', 'secondary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: hsla(0, 0%, 0%, 0.2);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
background-size: 4px 3px;
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
@include color('color', 'primary');
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@each $colorName, $color, $color-light, $color-text in $colors {
|
||||
button.btn-#{$colorName},
|
||||
.paper-btn.btn-#{$colorName},
|
||||
[type='button'].btn-#{$colorName} {
|
||||
@include color('color', #{$colorName}-text);
|
||||
@include color('background-color', #{$colorName}-light);
|
||||
@include color('border-color', #{$colorName});
|
||||
|
||||
&:hover {
|
||||
&:active {
|
||||
background-color: darken($color-light, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $colorName, $color, $color-light, $color-text in $colors {
|
||||
button.btn-#{$colorName}-outline,
|
||||
.paper-btn.btn-#{$colorName}-outline,
|
||||
[type='button'].btn-#{$colorName}-outline {
|
||||
@include color('background-color', main-background);
|
||||
@include color('color', #{$colorName});
|
||||
@include color('border-color', #{$colorName});
|
||||
|
||||
&:hover {
|
||||
background-color: $color-light;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:active {
|
||||
background-color: darken($color-light, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
.card {
|
||||
@include shadow;
|
||||
@include color('border-color', 'muted-light');
|
||||
backface-visibility: hidden;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
will-change: transform;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
@include color('background-color', 'white-dark');
|
||||
@include color('border-color', 'muted-light');
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top-style: solid;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 1.25rem;
|
||||
|
||||
.card-title,
|
||||
h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-subtitle,
|
||||
h5 {
|
||||
color: $secondary;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-text,
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-link + .card-link,
|
||||
a + a {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image-top,
|
||||
.image-bottom,
|
||||
img {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,443 +0,0 @@
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
@include color('color', 'primary');
|
||||
@include color('border-color', 'primary');
|
||||
background: transparent;
|
||||
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;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
padding: 0.5rem;
|
||||
|
||||
&:focus {
|
||||
@include color('border-color', 'secondary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
@extend .disabled;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
height: 2.35rem;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
> label,
|
||||
legend {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.input-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
max-height: 90vh;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
textarea.no-resize {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
// TODO: make these classes implicit. We can find out what class to apply based on its type
|
||||
.paper-radio,
|
||||
.paper-check {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
/* the basic, unchecked style */
|
||||
input {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
& + span {
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
@include color('border-color', 'primary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
margin-right: 0.75em;
|
||||
position: relative;
|
||||
vertical-align: -0.25em;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* radio styles */
|
||||
&[type='radio'] {
|
||||
& + span::before {
|
||||
border-bottom-left-radius: 0.7rem 1rem;
|
||||
border-bottom-right-radius: 1rem 0.9rem;
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem 0.6rem;
|
||||
}
|
||||
|
||||
&:checked + span::before {
|
||||
$radio-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'#{$secondary}'%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";
|
||||
background: url('#{str-replace($radio-fill, "#", "%23")}') left center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
/* checkbox styles */
|
||||
&[type='checkbox'] {
|
||||
& + span::before {
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
}
|
||||
|
||||
/* checked */
|
||||
&:checked + span::before {
|
||||
$check-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20stroke%3D'#{$secondary}'%20fill-opacity%3D'0'%20stroke-width%3D'16'%20d%3D'm13,62c0.61067,1.6%201.3045,2.3045%201.75717,2.75716c0.72683,0.72684%201.24283,1.24284%202.07617,2.07617c0.54133,0.54133%201.04116,1.06035%201.82833,1.82383c0.5781,0.5607%201.00502,0.96983%202.02633,1.74417c0.55877,0.42365%201.191,0.84034%201.884,1.284c1.16491,0.74577%201.59777,1.00147%202.5,1.55067c0.4692,0.28561%201.43689,0.86868%201.93067,1.16534c0.99711,0.59904%201.99667,1.19755%202.49283,1.49866c0.98501,0.59779%201.47073,0.89648%201.94733,1.2c1.3971,0.88972%201.83738,1.19736%202.7,1.7955c0.42201,0.29262%201.24022,0.87785%202.05583,1.41917c0.79531,0.52785%201.59376,1.0075%202.38,1.43867c0.74477,0.40842%201.45167,0.75802%202.37817,1.22517c0.76133,0.38387%201.54947,0.82848%202.40717,1.41084c0.7312,0.49647%201.49563,1.08231%202.27884,1.258c0.35564,0.07978%200.14721,-0.95518%200.35733,-1.86867c0.18092,-0.78651%200.98183,-1.2141%200.99983,-2.07867c0.02073,-0.99529%200.07916,-1.79945%200.42533,-2.56133c0.43607,-0.95973%200.53956,-1.66774%200.79617,-2.68183c0.18888,-0.74645%200.39764,-1.31168%200.7785,-2.6235c0.20865,-0.71867%200.41483,-1.48614%200.708,-2.28c0.15452,-0.41843%200.77356,-1.73138%201.348,-2.64133c0.30581,-0.48443%200.65045,-0.97043%201.0065,-1.4745c0.74776,-1.05863%201.1531,-1.60163%201.9375,-2.77084c0.40621,-0.60548%200.80272,-1.23513%201.2045,-1.8765c0.40757,-0.65062%200.81464,-1.31206%201.2315,-1.9755c0.41946,-0.66757%200.83374,-1.34258%201.73067,-2.648c0.44696,-0.65053%200.91436,-1.28356%201.386,-1.9095c0.46972,-0.6234%200.94725,-1.2364%201.422,-1.8465c0.94116,-1.20947%201.86168,-2.40844%202.30367,-3.0105c0.438,-0.59664%200.86246,-1.19396%201.27501,-1.7895c0.40743,-0.58816%200.80352,-1.17234%201.185,-1.7535c1.10526,-1.68381%201.44079,-2.23511%201.77633,-2.7705c0.32878,-0.52461%200.96306,-1.5459%201.27467,-2.04c0.60654,-0.96177%201.20782,-1.88193%201.51051,-2.325c0.59013,-0.86381%201.17888,-1.68032%201.46416,-2.075c0.5498,-0.76063%201.31747,-1.8231%201.77883,-2.4895c0.43918,-0.63437%200.85266,-1.25267%201.45717,-2.15717c0.59549,-0.891%200.96531,-1.46814%201.51466,-2.22933c0.58413,-0.80936%201.12566,-1.40253%201.83801,-2.12333c0.61304,-0.62031%200.45171,-1.48306%200.7045,-2.34733c0.25668,-0.87762%200.75447,-1.62502%201,-2.40983c0.25128,-0.8032%200.7633,-1.39453%201.33217,-2.25417c0.54528,-0.82398%200.73415,-1.6714%201.31516,-2.336c0.55639,-0.63644%201.38658,-1.22588%201.8595,-1.9c0.5082,-0.72441%200.78867,-1.4%201.60266,-1.56667l0.71184,-0.4905'%3E%3C/path%3E%3C/svg%3E";
|
||||
background: url('#{str-replace($check-fill, "#", "%23")}') left center no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paper-switch-label,
|
||||
.paper-switch-2-label {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.paper-switch-label {
|
||||
margin: -6px 10px 0 0;
|
||||
}
|
||||
|
||||
.paper-switch-2-label {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.paper-switch,
|
||||
.paper-switch-2 {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
|
||||
&:checked + .paper-switch-slider {
|
||||
@include color('background-color', 'success-light');
|
||||
}
|
||||
|
||||
&:checked + .paper-switch-slider::before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
&:focus + .paper-switch-slider {
|
||||
box-shadow: 0 0 3px $secondary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paper-switch-slider {
|
||||
@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;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 0.4s;
|
||||
|
||||
&::before {
|
||||
@include color('background', 'secondary');
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
content: '';
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paper-switch-slider.round {
|
||||
@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;
|
||||
border-bottom-left-radius: 0.7rem 1rem;
|
||||
border-bottom-right-radius: 1rem 0.9rem;
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem 0.6rem;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paper-switch {
|
||||
height: 12px;
|
||||
width: 60px;
|
||||
|
||||
.paper-switch-slider {
|
||||
&::before {
|
||||
bottom: -6px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paper-switch-slider.round {
|
||||
&::before {
|
||||
bottom: -7px;
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paper-switch-2 {
|
||||
height: 22px;
|
||||
width: 50px;
|
||||
|
||||
.paper-switch-slider {
|
||||
&::before {
|
||||
bottom: 2px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paper-switch-slider.round {
|
||||
&::before {
|
||||
bottom: 2px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paper-switch-tile {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin: 40px 0 0 40px;
|
||||
perspective: 1000px;
|
||||
position: relative;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-style: preserve-3d;
|
||||
width: 80px;
|
||||
|
||||
&:hover {
|
||||
.paper-switch-tile-card {
|
||||
box-shadow: 2px 8px 4px -5px rgba(0, 0, 0, 0.2);
|
||||
transform: rotateX(30deg);
|
||||
}
|
||||
|
||||
&:checked + .paper-switch-tile-card {
|
||||
background-color: transparent;
|
||||
box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.9);
|
||||
transform: rotateX(150deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + .paper-switch-tile-card {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paper-switch-tile-card {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
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);
|
||||
height: 100%;
|
||||
line-height: 70px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paper-switch-tile-card-back {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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 {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
.modal {
|
||||
@include transition(opacity);
|
||||
background: rgba(#000, 0.6);
|
||||
bottom: 0;
|
||||
flex: 1 1 auto;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
word-wrap: break-word;
|
||||
z-index: 200;
|
||||
|
||||
// modal background
|
||||
&-bg {
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@include color('color', 'primary');
|
||||
@include color('background', 'main-background');
|
||||
@include color('border-color', 'muted-light');
|
||||
@include transition;
|
||||
backface-visibility: hidden;
|
||||
|
||||
border: 2px solid;
|
||||
left: 50%;
|
||||
padding: 1.25rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
@include resp(sm) {
|
||||
box-sizing: border-box;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
@include color('color', 'primary-light');
|
||||
@include transition;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
height: 1.1rem;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
text-decoration: none;
|
||||
top: 1rem;
|
||||
width: 1.1rem;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include color('color', 'primary');
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
.modal-title {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h5,
|
||||
.modal-subtitle {
|
||||
@include color('color', 'secondary');
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
.modal-text {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.modal-link+.modal-link,
|
||||
a+a {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.paper-btn {
|
||||
@include color('background', 'main-background');
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.modal-link,
|
||||
a {
|
||||
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;
|
||||
background-size: 4px 3px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:visited {
|
||||
@include color('color', 'primary');
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-state {
|
||||
display: none;
|
||||
|
||||
&:checked+.modal {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
.modal-body {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,174 +0,0 @@
|
|||
nav {
|
||||
@include color('background-color', 'main-background');
|
||||
display: flex;
|
||||
padding: 0.3rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
|
||||
@include resp(small) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
@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;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 5px;
|
||||
margin: 6px 0;
|
||||
transition: 0.4s;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.collapsible input[id^=collapsible]:checked + button, // Leaving for backwards compatibility. See docs for proper usage
|
||||
.collapsible input[id^=collapsible]:checked + label {
|
||||
.bar1 {
|
||||
transform: rotate(-45deg) translate(-9px, 7px);
|
||||
}
|
||||
|
||||
.bar2 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bar3 {
|
||||
transform: rotate(45deg) translate(-8px, -9px);
|
||||
}
|
||||
}
|
||||
|
||||
&.split-nav {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
ul.inline {
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.inline li {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
@include resp(small) {
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include color('color', 'primary');
|
||||
@include color('border-bottom-color', 'primary');
|
||||
background-image: none;
|
||||
border-bottom-left-radius: 15px 3px;
|
||||
border-bottom-right-radius: 15px 5px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 5px;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@include color('border-color', 'primary-light');
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 5px;
|
||||
}
|
||||
|
||||
ul.inline li a {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
ul.inline li::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
ul {
|
||||
@include resp(medium) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
@include resp(small) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible input[id^=collapsible]:checked ~ div.collapsible-body {
|
||||
margin: 0;
|
||||
max-height: 960px;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapsible:nth-of-type(1),
|
||||
.collapsible .collapsible-body {
|
||||
border: 0;
|
||||
|
||||
@include resp(null, $small-screen + 1px) {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
div.collapsible-body {
|
||||
padding: none;
|
||||
}
|
||||
|
||||
.collapsible label {
|
||||
@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
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.collapsible > button, // Leaving for backwards compatibility. See docs for proper usage
|
||||
.collapsible > label {
|
||||
@include color('background-color', 'main-background');
|
||||
display: none;
|
||||
font-size: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
padding: 0.25rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
@include resp(small) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
// Core popovers
|
||||
[popover-top],
|
||||
[popover-right],
|
||||
[popover-bottom],
|
||||
[popover-left] {
|
||||
margin: 24px;
|
||||
position: relative;
|
||||
|
||||
// Popover hover trigger
|
||||
&:hover {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transition: opacity 235ms ease-in-out, visibility 0s linear;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Creating popover::after element
|
||||
&::after {
|
||||
@include border-style();
|
||||
@include color('background-color', 'light-dark');
|
||||
@include color('border-color', 'light-dark');
|
||||
@include color('color', 'primary-inverse');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
font-size: 0.7em;
|
||||
left: 50%;
|
||||
min-width: 80px;
|
||||
opacity: 0;
|
||||
padding: 4px 2px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: -6px;
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
transition: opacity 235ms ease-in-out, visibility 0s linear 235ms;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover positioning: left, right, top, bottom
|
||||
[popover-left] {
|
||||
&::before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(popover-left);
|
||||
left: 0;
|
||||
margin-left: -8px;
|
||||
top: 50%;
|
||||
transform: translateX(-100%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
[popover-right] {
|
||||
&::before {
|
||||
left: 100%;
|
||||
margin-left: 1px;
|
||||
top: 50%;
|
||||
transform: translatey(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(popover-right);
|
||||
left: 100%;
|
||||
margin-left: 8px;
|
||||
top: 50%;
|
||||
transform: translateX(0%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
[popover-top] {
|
||||
&::before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(popover-top);
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
[popover-bottom] {
|
||||
&::before {
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
transform: translateX(-50%) translatey(-100%) rotate(-180deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(popover-bottom);
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
transform: translateX(-50%) translateY(0%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
.progress {
|
||||
@include border-style(5);
|
||||
@include color('border-color', 'primary');
|
||||
border: 2px solid;
|
||||
box-shadow: $shadow-hover;
|
||||
height: 1.2rem;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
.bar {
|
||||
@include border-style(5);
|
||||
@include transition;
|
||||
@include color('background-color', 'primary-light');
|
||||
@include color('border-color', 'primary');
|
||||
border-right: 2px solid;
|
||||
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} {
|
||||
@include color('background-color', #{$colorName}-light);
|
||||
|
||||
&.striped {
|
||||
@include striped-background($color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 100 {
|
||||
&.w-#{$i} {
|
||||
width: $i * 1%;
|
||||
}
|
||||
}
|
||||
|
||||
&.w-0,
|
||||
&.w-100 {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
.tabs {
|
||||
.content {
|
||||
display: none;
|
||||
flex-basis: 100%;
|
||||
padding: 0.75rem 0 0;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&: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 {
|
||||
&[id$='tab#{$num}']:checked~div[id$='content#{$num}'] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@include color('color', primary-light);
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin: 0 0 -1px;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
@include color('color', muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
$base: 1rem;
|
||||
$large: 2rem;
|
||||
$small: 0.5rem;
|
||||
|
||||
.margin {
|
||||
margin: $base;
|
||||
|
||||
&-top {
|
||||
margin-top: $base;
|
||||
|
||||
&-large {
|
||||
margin-top: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin-top: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
margin-right: $base;
|
||||
|
||||
&-large {
|
||||
margin-right: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin-right: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
margin-bottom: $base;
|
||||
|
||||
&-large {
|
||||
margin-bottom: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin-bottom: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
margin-left: $base;
|
||||
|
||||
&-large {
|
||||
margin-left: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin-left: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-large {
|
||||
margin: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
margin: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: $base;
|
||||
|
||||
&-top {
|
||||
padding-top: $base;
|
||||
|
||||
&-large {
|
||||
padding-top: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding-top: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
padding-right: $base;
|
||||
|
||||
&-large {
|
||||
padding-right: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding-right: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
padding-bottom: $base;
|
||||
|
||||
&-large {
|
||||
padding-bottom: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding-bottom: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
padding-left: $base;
|
||||
|
||||
&-large {
|
||||
padding-left: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding-left: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-large {
|
||||
padding: $large;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
&-none {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
56
src/container.less
Normal file
56
src/container.less
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
@large-screen: ~"screen and (max-width: 1200px)";
|
||||
@medium-screen: ~"screen and (max-width: 992px)";
|
||||
@small-screen: ~"screen and (max-width: 768px)";
|
||||
@xsmall-screen: ~"screen and (max-width: 480px)";
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
@media @medium-screen {
|
||||
width: 85%;
|
||||
}
|
||||
@media @xsmall-screen {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.hr-after() {
|
||||
text-align: center;
|
||||
color: lighten(@primary, 30%);
|
||||
display: block;
|
||||
content: "~~~";
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.section {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.section:after {
|
||||
.hr-after;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
}
|
||||
hr:after {
|
||||
.hr-after;
|
||||
top: -.75rem;
|
||||
}
|
||||
.paper {
|
||||
border: 1px solid @primary-light;
|
||||
background-color: #FFF;
|
||||
padding: 2rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
-webkit-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
|
||||
-moz-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
|
||||
box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
|
||||
@media @xsmall-screen {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
code {
|
||||
@include color('color', 'secondary');
|
||||
@include color('background-color', 'primary-shaded-70');
|
||||
border-radius: 3px;
|
||||
font-size: 80%;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
@include color('color', 'primary-inverse');
|
||||
@include color('background-color', 'primary');
|
||||
border-radius: 3px;
|
||||
font-size: 80%;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
@include color('color', 'inverse-primary');
|
||||
@include color('background-color', 'primary-shaded-70');
|
||||
@include color('border-color', 'primary-shaded-50');
|
||||
|
||||
border-radius: 3px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
white-space: pre;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
|
||||
code {
|
||||
@include color('color', 'inverse-primary');
|
||||
background: transparent;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
padding: initial;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
html {
|
||||
@include color('color', 'primary');
|
||||
font-family: $body-font, sans-serif;
|
||||
font-size: $global-font-size;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
button,
|
||||
li,
|
||||
table,
|
||||
thead,
|
||||
tbody,
|
||||
th,
|
||||
tr,
|
||||
td,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
option {
|
||||
font-family: $body-font, sans-serif;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $header-font, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
img {
|
||||
@include border-style();
|
||||
@include color('border-color', 'primary');
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
||||
&.float-left {
|
||||
float: left;
|
||||
margin: 1rem 1rem 1rem 0;
|
||||
}
|
||||
|
||||
&.float-right {
|
||||
float: right;
|
||||
margin: 1rem 0 1rem 1rem;
|
||||
}
|
||||
|
||||
&.no-responsive {
|
||||
display: initial;
|
||||
height: initial;
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
&.no-border {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
ol {
|
||||
list-style-type: decimal;
|
||||
|
||||
ol {
|
||||
list-style-type: upper-alpha;
|
||||
|
||||
ol {
|
||||
list-style-type: upper-roman;
|
||||
|
||||
ol {
|
||||
list-style-type: lower-alpha;
|
||||
|
||||
ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include li-bullet('-');
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
text-indent: -7px;
|
||||
|
||||
.badge,
|
||||
[popover-bottom]::after,
|
||||
[popover-left]::after,
|
||||
[popover-right]::after,
|
||||
[popover-top]::after {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: -7px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include li-bullet('+');
|
||||
|
||||
ul {
|
||||
@include li-bullet('~');
|
||||
|
||||
ul {
|
||||
@include li-bullet('⤍');
|
||||
|
||||
ul {
|
||||
@include li-bullet('⁎');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inline li {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
table {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
|
||||
@include resp(xsmall) {
|
||||
thead tr th {
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
tbody tr td {
|
||||
padding: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
line-height: 1.5;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
tbody tr td {
|
||||
border-top: 1px dashed lighten($primary, 60%);
|
||||
line-height: 1.5;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.table-hover tbody tr:hover {
|
||||
@include color('color', 'secondary');
|
||||
}
|
||||
|
||||
&.table-alternating tbody tr:nth-of-type(even) {
|
||||
color: lighten($primary, 25%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,300 +0,0 @@
|
|||
/**
|
||||
Global PaperCSS Config
|
||||
*/
|
||||
|
||||
// The src for fonts (false to disable)
|
||||
$font-src: 'https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC&display=swap' !default;
|
||||
|
||||
// Imports
|
||||
@if $font-src {
|
||||
@import url($font-src);
|
||||
}
|
||||
|
||||
// Set theme colors
|
||||
$primary: #41403e !default;
|
||||
$secondary: #0b74d5 !default;
|
||||
|
||||
$success: #86a361 !default;
|
||||
$warning: #ddcd45 !default;
|
||||
$danger: #a7342d !default;
|
||||
$muted: #868e96 !default;
|
||||
|
||||
$primary-light: lighten($primary, 55%) !default;
|
||||
$secondary-light: lighten($secondary, 48%) !default;
|
||||
$success-light: lighten($success, 32%) !default;
|
||||
$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, 23%) !default;
|
||||
$warning-dark-10: darken($warning, 30%) !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: $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: #5595ce !default;
|
||||
|
||||
$dark-success: #70c272 !default;
|
||||
$dark-warning: #d4c252 !default;
|
||||
$dark-danger: #df4c57 !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, 30%) !default;
|
||||
$dark-success-dark: darken($dark-success, 35%) !default;
|
||||
$dark-warning-dark: darken($dark-warning, 30%) !default;
|
||||
$dark-danger-dark: darken($dark-danger, 30%) !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 !default;
|
||||
$dark-success-text: $dark-success-dark !default;
|
||||
$dark-warning-text: $dark-warning-dark !default;
|
||||
$dark-danger-text: $dark-danger-dark !default;
|
||||
$dark-muted-text: $dark-muted-light !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 */
|
||||
$colors: (primary, $primary, $primary-light, $primary-text),
|
||||
(secondary, $secondary, $secondary-light, $secondary-text),
|
||||
(success, $success, $success-light, $success-text),
|
||||
(warning, $warning, $warning-light, $warning-text),
|
||||
(danger, $danger, $danger-light, $danger-text),
|
||||
(muted, $muted, $muted-light, $muted-text);
|
||||
/* stylelint-enable */
|
||||
|
||||
/**
|
||||
This Loop will generate the various .text- and .background- classes
|
||||
based on the $colors map above.
|
||||
*/
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.text-#{$colorName} {
|
||||
@include color('color',#{$colorName});
|
||||
}
|
||||
|
||||
.background-#{$colorName} {
|
||||
@include color('background-color',#{$colorName}-light);
|
||||
}
|
||||
}
|
||||
|
||||
// Font settings
|
||||
$global-font-size: 20px !default;
|
||||
$header-font: 'Patrick Hand SC' !default;
|
||||
$body-font: 'Neucha' !default;
|
||||
$font-color: $primary !default;
|
||||
|
||||
// Responsive breakpoints
|
||||
$large-screen: 1200px !default;
|
||||
$medium-screen: 992px !default;
|
||||
$small-screen: 768px !default;
|
||||
$xsmall-screen: 480px !default;
|
||||
|
||||
// Sizes for shadows
|
||||
$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;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue