deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-08 08:52:25 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into fix-code-tag

Browse source
This commit is contained in:
Afzal Sayed 2017-12-05 19:42:19 +05:30 committed by GitHub
parent 80b8ae0174 a6b5efb55f
commit ea5babaf39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 366 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.editorconfig Normal file
View file

@ -0,0 +1,9 @@
root = true
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

26
README.md
View file

@ -11,14 +11,14 @@ View the demo & docs at [getpapercss.com](https://www.getpapercss.com)
[![Download](/img/screenshots/download-minified.PNG)][download-minified]
### NPM
PaperCSS is now available on NPM as of version 1.1.0. Install with `npm install papercss --save` and find the CSS in:
PaperCSS is now available on NPM as of version 1.2.0. Install with `npm install papercss --save` 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. You can use either:
- https://unpkg.com/papercss@1.1.0/dist/paper.css
- https://unpkg.com/papercss@1.1.0/dist/paper.min.css
- https://unpkg.com/papercss@1.2.0/dist/paper.css
- https://unpkg.com/papercss@1.2.0/dist/paper.min.css
## Quick Start
```html
@ -28,13 +28,15 @@ Don't want to download it? That's cool. You can just link to PaperCSS via unpkg'
<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.1.0/dist/paper.min.css">
<link rel="stylesheet" href="https://unpkg.com/papercss@1.2.0/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 class="container">
<div class="paper">
<h1>Some Fresh Title</h1>
<p>This is where some content would go.</p>
</div>
</div>
</body>
</html>
@ -64,10 +66,12 @@ Here's the full workflow for customization:
- Once `npm start` or `npm run build` has been run then it will create the new css so that the new color can be used as a text, border or background
## Contributing
Check out what's been added but not yet releases at [develop.getpapercss.com](https://develop.getpapercss.com)
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 using the `.editorconfig` file with your IDE. If your IDE doesn't natively support editorconfig files, you can use an extension. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ...
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`
@ -81,7 +85,7 @@ Similar to customizing, make sure you have Git, Node, and NPM on your system.
- Finally, open a pull request on this repo. Be sure to include any pictures and details on what you changed!
- Once approved, your changes will be merged to the develop branch where it will eventually be added to a release that ends up in the master branch. 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, create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-1.X.X master`
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-1.X.X master`. The changes will be merged into both master and develop to keep the branches consistent.
## About
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 :)
@ -95,5 +99,5 @@ If you are new to Git or Less, this would be a great project to get your feet we
## Credits
Shouts outs 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.1.0/paper.css
[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.min.css
[download]: https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.css
[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.min.css

BIN
img/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

131
index.html
View file

@ -4,9 +4,12 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PaperCSS · the less formal CSS framework</title>
<!-- Favicon -->
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<meta name="description" content="The less formal CSS framework.">
<meta name="author" content="Rhyneav and PaperCSS contributors.">
@ -20,13 +23,13 @@
<meta property="og:description" content="The less formal CSS framework">
<!-- Styles -->
<link rel="stylesheet" href="/dist/paper.css">
<link rel="stylesheet" href="/demo.css">
<link rel="stylesheet" href="./dist/paper.css">
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="container paper">
<div class="container">
<div class=" paper">
<div class="demo-title">
<div class="row flex-center">
<div class="text-center">
@ -60,6 +63,7 @@
<li><a href="#utilities">Utilities</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#article">Article</a></li>
</ul>
</div>
@ -259,6 +263,21 @@
&lt;button class="disabled"&gt;Disabled&lt;/button&gt;
&lt;button disabled&gt;Disabled&lt;/button&gt;</code></pre>
</div>
<h4>Colors</h4>
<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>
<div class="docs">
<pre>
&lt;input type="button" class="paper-btn btn-primary" value="Primary"/&gt;
&lt;input type="button" class="btn-secondary" value="Secondary"/&gt;
&lt;button class="btn-success"&gt;Success&lt;/button&gt;
&lt;button class="btn-warning"&gt;Warning&lt;/button&gt;
&lt;button class="btn-danger"&gt;Danger&lt;/button&gt;
</pre>
</div>
</div>
<div id="forms" class="section">
<h2>Forms</h2>
@ -284,6 +303,14 @@
<label for="paperInputs4">Disabled</label>
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
</div>
<div class="form-group">
<label>Large Input</label>
<textarea placeholder="Large input"></textarea>
</div>
<div class="form-group">
<label>No Resize</label>
<textarea class="no-resize" placeholder="No resize"></textarea>
</div>
<div class="form-group">
<label for="paperSelects1">Select</label>
<select id="paperSelects1">
@ -334,6 +361,14 @@
&lt;label for="paperInputs4"&gt;Disabled&lt;/label&gt;
&lt;input type="text" placeholder="Disabled" id="paperInputs4" disabled&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Large Input&lt;/label&gt;
&lt;textarea placeholder="Large input"&gt; &lt;/textarea&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;No Resize&lt;/label&gt;
&lt;textarea class="no-resize" placeholder="No resize"&gt; &lt;/textarea&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label for="paperSelects1"&gt;Select&lt;/label&gt;
&lt;select id="paperSelects1"&gt;
@ -596,42 +631,42 @@ function add(x, y) {
<div id="popovers" 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>
<p>You can add popovers, also called tooltips, on your elements. popover-[position] attribute is the popover text content and it 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>
<p popover-left="Popover on left">Popover left position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on top" popover-position="top">Popover top position</p>
<p popover-top="Popover on top">Popover top position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
<p popover-bottom="Popover on bottom">Popover bottom position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on right" popover-position="right">Popover right position</p>
<p popover-right="Popover on right">Popover right position</p>
</div>
</div>
<div class="docs">
<pre><code>
&lt;p popover="Popover on left" popover-position="left"&gt;Popover left position&lt;/p&gt;
&lt;p popover="Popover on top" popover-position="top"&gt;Popover top position&lt;/p&gt;
&lt;p popover="Popover on bottom" popover-position="bottom"&gt;Popover bottom position&lt;/p&gt;
&lt;p popover="Popover on right" popover-position="right"&gt;Popover right position&lt;/p&gt;</code></pre>
&lt;p popover-left="Popover on left"&gt;Popover left position&lt;/p&gt;
&lt;p popover-top="Popover on top"&gt;Popover top position&lt;/p&gt;
&lt;p popover-bottom="Popover on bottom"&gt;Popover bottom position&lt;/p&gt;
&lt;p popover-right="Popover on right"&gt;Popover right position&lt;/p&gt;</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>
<button popover-top="Popover on top">Popover on top and on a button!</button>
</div>
</div>
<div class="docs">
<pre><code>
&lt;button popover="Popover on top" popover-position="top"&gt;Popover on top and on a button!&lt;/button&gt;</code></pre>
&lt;button popover-top="Popover on top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
</div>
</div>
@ -1042,17 +1077,58 @@ function add(x, y) {
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="article" class="section">
<h2>Article</h2>
<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>
<div class="docs">
<pre>
&lt;article class="article"&gt;
&lt;h1 class="article-title"&gt;&lt;a href=""&gt;Article Title&lt;/a&gt;&lt;/h1&gt;
&lt;p class="article-meta"&gt;Written by &lt;a href="#"&gt;Super User&lt;/a&gt;&lt;/p&gt;
&lt;p class="text-lead"&gt; Lorem... &lt;/p&gt;
&lt;p&gt;Lorem...&lt;/p&gt;
&lt;div class="row"&gt;
&lt;button&gt;Read More&lt;/button&gt;
&lt;button&gt;5 Comments&lt;/button&gt;
&lt;/div&gt;
&lt;/article&gt;
</pre>
</div>
</div>
<div class="section">
<h2 id="download">Download and Link</h2>
<h4>Download</h4>
<p>Download the latest version (1.1.0) using either of the links below. Or download an older release via Github.</p>
<p>Download the latest version (1.2.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.1.0/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
</div>
<h4>NPM</h4>
<p>PaperCSS is now available on NPM as of version 1.1.0. Install with <code>npm install papercss --save</code> and find the CSS in:</p>
<p>PaperCSS is now available on NPM as of version 1.2.0. Install with <code>npm install papercss --save</code> and find the CSS in:</p>
<ul>
<li>node_modules/papercss/dist/paper.css</li>
<li>node_modules/papercss/dist/paper.min.css</li>
@ -1060,8 +1136,8 @@ function add(x, y) {
<h4>CDN</h4>
<p>Don't want to download it? That's cool. You can just link to PaperCSS via <a href="https://unpkg.com/#/">unpkg's CDN</a>. You can use either:</p>
<ul>
<li><a href="https://unpkg.com/papercss@1.1.0/dist/paper.css">https://unpkg.com/papercss@1.1.0/dist/paper.css</a></li>
<li><a href="https://unpkg.com/papercss@1.1.0/dist/paper.min.css">https://unpkg.com/papercss@1.1.0/dist/paper.min.css</a></li>
<li><a href="https://unpkg.com/papercss@1.2.0/dist/paper.css">https://unpkg.com/papercss@1.2.0/dist/paper.css</a></li>
<li><a href="https://unpkg.com/papercss@1.2.0/dist/paper.min.css">https://unpkg.com/papercss@1.2.0/dist/paper.min.css</a></li>
</ul>
<p>Here's a quck snippet to get started with PaperCSS:</p>
<div class="docs">
@ -1071,13 +1147,15 @@ function add(x, y) {
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/papercss@1.1.0/dist/paper.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/papercss@1.2.0/dist/paper.min.css&quot;&gt;
&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;paper container&quot;&gt;
&lt;h1&gt;Some Fresh Title&lt;/h1&gt;
&lt;p&gt;This is where some content would go.&lt;/p&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;paper&quot;&gt;
&lt;h1&gt;Some Fresh Title&lt;/h1&gt;
&lt;p&gt;This is where some content would go.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
@ -1103,6 +1181,7 @@ function add(x, y) {
<p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
</div>
</div>
</div>
</body>
</html>

2
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "papercss",
"version": "1.0.0",
"version": "1.2.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "papercss",
"version": "1.1.0",
"version": "1.2.0",
"description": "Another CSS framework",
"main": "index.js",
"scripts": {

26
src/article.less Normal file
View file

@ -0,0 +1,26 @@
article {
.article-title {
font-size: 3rem;
}
.article-meta {
font-size: 15px;
color: @muted;
a {
color: @muted-text;
background-image: none;
&:hover {
color: @light-dark;
}
}
}
.text-lead {
font-size: 30px;
line-height: 1.3;
margin: 35px 0px;
}
}

26
src/badges.less
View file

@ -12,24 +12,14 @@
background-color: @muted;
color: white;
border-color: transparent;
}
&.primary {
background-color: @primary;
.make-badge-color-classes(@i: length(@colors)) when (@i > 0) {
.make-badge-color-classes(@i - 1);
@color: extract(@colors, @i);
.badge.@{color} {
background-color: @@color;
}
}
&.secondary {
background-color: @secondary;
}
&.success {
background-color: @success;
}
&.warning {
background-color: @warning;
}
&.danger {
background-color: @danger;
}
}
.make-badge-color-classes();

2
src/borders.less
View file

@ -41,7 +41,7 @@
border: 2px solid @primary;
}
.border-white {
border-color: #FFF;
border-color: @white;
}
.border-dotted {
border-style: dotted;

39
src/buttons.less
View file

@ -1,8 +1,10 @@
button, .paper-btn, input[type="button"] {
button, .paper-btn, [type="button"] {
.shadow;
align-self:center;
background:transparent;
transition:all .5s ease;
transition:all .5s ease, background-color .1s ease;
color: @primary;
display: inline;
outline:none;
border:solid 2px @primary;
.border;
@ -10,6 +12,7 @@ button, .paper-btn, input[type="button"] {
padding: .75rem .75rem;
cursor: pointer;
.shadow;
.shadow-hover;
&.btn-large {
.shadow-large;
font-size:2rem;
@ -24,10 +27,20 @@ button, .paper-btn, input[type="button"] {
display: block;
width: 100%;
}
&:hover{
&:hover {
.shadow-hover;
}
&.disabled, &[disabled]{
&:focus{
border: 2px solid @secondary;
-webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
-moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
}
&:active {
border-color: hsla(0,0%,0%,.2);
transition: none;
}
&.disabled, &[disabled] {
.disabled;
}
}
@ -46,4 +59,20 @@ a {
text-decoration: none;
color: @primary;
}
}
}
.make-button-color-classes(@i: length(@colors)) when (@i > 0) {
.make-button-color-classes(@i - 1);
@color: extract(@colors, @i);
button.btn-@{color}, .paper-btn.btn-@{color}, [type="button"].btn-@{color} {
border-color: @@color;
background-color: ~"@{@{color}-light}";
color: ~"@{@{color}-text}";
&:hover:active{
@darkcolour: ~"@{color}-light";
background-color: darken(@@darkcolour, 10%);
}
}
}
.make-button-color-classes();

7
src/cards.less
View file

@ -1,15 +1,12 @@
.card {
.shadow;
.shadow-hover;
position: relative;
display: flex;
flex-direction: column;
word-wrap: break-word;
border: 2px solid @muted-light;
&:hover {
.shadow-hover;
}
border: 2px solid @muted-light;
.card-header,
.card-footer {

2
src/code.less
View file

@ -8,7 +8,7 @@ code {
kbd {
padding: 2px 4px;
font-size: 80%;
color: #fff;
color: @white;
background-color: @primary;
border-radius: 3px;
}

12
src/colors.less
View file

@ -13,7 +13,17 @@
@danger-light: lighten(@danger, 45%);
@muted-light: lighten(@muted, 35%);
@white-dark: rgba(0, 0, 0, .03);
@white-dark: rgba(0, 0, 0, 0.03);
@light-dark: rgba(0, 0, 0, 0.7);
@white: rgba(255, 255, 255, 1);
@main-background: rgba(255, 255, 255, 1);
@primary-text: #FFF;
@secondary-text: @primary;
@success-text: @primary;
@warning-text: @primary;
@danger-text: @primary;
@muted-text: @primary;
@colors: primary, secondary, success, warning, danger, muted;

2
src/container.less
View file

@ -39,7 +39,7 @@ hr:after {
}
.paper {
border: 1px solid @primary-light;
background-color: #FFF;
background-color: @main-background;
padding: 2rem;
margin-top: 1rem;
margin-bottom: 1rem;

67
src/flexbox.less
View file

@ -1,3 +1,27 @@
@columnNames: col, sm, md, lg;
@columnSizes: 0px, 768px, 992px, 1200px;
@numberOfColumns: 12;
.make-column-class(@name, @size, @n, @p: 1) when (@p =< @n) {
@percent: (@p * 100% / @n);
.@{name}-@{p} {
.col-size(@percent);
}
.make-column-class(@name, @size, @n, (@p + 1));
}
.make-column-classes(@n, @j: 1) when (@j =< length(@columnNames)) {
@columnName: extract(@columnNames, @j);
@columnSize: extract(@columnSizes, @j);
@media (min-width: @columnSize) {
.make-column-class(@columnName, @columnSize, @n);
}
.make-column-classes(@n, @j + 1);
}
.center-all() {
-webkit-align-items: center;
align-items: center;
@ -11,47 +35,6 @@
flex: 0 0 @percent;
max-width: @percent;
}
.generate-col(@n, @i: 1) when (@i =< @n) {
@percent: (@i * 100% / @n);
.col-@{i} {
.col-size(@percent);
}
.generate-col(@n, (@i + 1));
}
.generate-sm(@n, @i: 1) when (@i =< @n) {
@percent: (@i * 100% / @n);
@media (min-width: 768px) {
.sm-@{i} {
.col-size(@percent);
}
}
.generate-sm(@n, (@i + 1));
}
.generate-md(@n, @i: 1) when (@i =< @n) {
@percent: (@i * 100% / @n);
@media (min-width: 992px) {
.md-@{i} {
.col-size(@percent);
}
}
.generate-md(@n, (@i + 1));
}
.generate-lg(@n, @i: 1) when (@i =< @n) {
@percent: (@i * 100% / @n);
@media (min-width: 1200px) {
.lg-@{i} {
.col-size(@percent);
}
}
.generate-lg(@n, (@i + 1));
}
.generate-columns(@n) {
.generate-col(@n);
.generate-sm(@n);
.generate-md(@n);
.generate-lg(@n);
}
.row {
margin-right: auto;
margin-left: auto;
@ -118,7 +101,7 @@
width: auto;
flex: 1 1 0px;
}
.generate-columns(12);
.make-column-classes(@numberOfColumns);
.align-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;

2
src/fonts.less
View file

@ -10,7 +10,7 @@ html {
font-family: @body-font, sans-serif;
color: @font-color;
}
p, a, button, table, thead, tbody, th, tr, td, input, select, option {
p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option {
font-family: @body-font, sans-serif;
}
h1, h2, h3, h4, h5, h6 {

24
src/forms.less
View file

@ -1,7 +1,7 @@
input, select {
input, select, textarea {
display: block;
background:transparent;
color:#41403E;
color:@primary;
outline:none;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
@ -32,6 +32,16 @@ input, select {
.input-block {
width: 100%;
}
textarea{
max-width: 100%;
max-height: 90vh;
}
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 {
display: block;
@ -75,15 +85,13 @@ input, select {
/* the checked style using the :checked pseudo class */
input[type="radio"]:checked + span:before {
// We need to escape the color because the "#" found in a hex color will cause the Firefox to not render the image
@escaped-color: escape(@secondary);
@radio-fill: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='@{escaped-color}' d='M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.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 c9.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 c-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 c-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 c3.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 c0.643,4.698,0.646,10.775-3.811,13.746'></path></svg>";
@escaped-svg: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='@{secondary}' d='M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.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 c9.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 c-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 c-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 c3.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 c0.643,4.698,0.646,10.775-3.811,13.746'></path></svg>");
@radio-fill: "data:image/svg+xml,@{escaped-svg}";
background: url(@radio-fill) left center no-repeat;
}
input[type="checkbox"]:checked + span:before {
// We need to escape the color because the "#" found in a hex color will cause the Firefox to not render the image
@escaped-color: escape(@secondary);
@check-fill: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path stroke='@{escaped-color}' fill-opacity='0' stroke-width='16' d='m13,62c0.61067,1.6 1.3045,2.3045 1.75717,2.75716c0.72683,0.72684 1.24283,1.24284 2.07617,2.07617c0.54133,0.54133 1.04116,1.06035 1.82833,1.82383c0.5781,0.5607 1.00502,0.96983 2.02633,1.74417c0.55877,0.42365 1.191,0.84034 1.884,1.284c1.16491,0.74577 1.59777,1.00147 2.5,1.55067c0.4692,0.28561 1.43689,0.86868 1.93067,1.16534c0.99711,0.59904 1.99667,1.19755 2.49283,1.49866c0.98501,0.59779 1.47073,0.89648 1.94733,1.2c1.3971,0.88972 1.83738,1.19736 2.7,1.7955c0.42201,0.29262 1.24022,0.87785 2.05583,1.41917c0.79531,0.52785 1.59376,1.0075 2.38,1.43867c0.74477,0.40842 1.45167,0.75802 2.37817,1.22517c0.76133,0.38387 1.54947,0.82848 2.40717,1.41084c0.7312,0.49647 1.49563,1.08231 2.27884,1.258c0.35564,0.07978 0.14721,-0.95518 0.35733,-1.86867c0.18092,-0.78651 0.98183,-1.2141 0.99983,-2.07867c0.02073,-0.99529 0.07916,-1.79945 0.42533,-2.56133c0.43607,-0.95973 0.53956,-1.66774 0.79617,-2.68183c0.18888,-0.74645 0.39764,-1.31168 0.7785,-2.6235c0.20865,-0.71867 0.41483,-1.48614 0.708,-2.28c0.15452,-0.41843 0.77356,-1.73138 1.348,-2.64133c0.30581,-0.48443 0.65045,-0.97043 1.0065,-1.4745c0.74776,-1.05863 1.1531,-1.60163 1.9375,-2.77084c0.40621,-0.60548 0.80272,-1.23513 1.2045,-1.8765c0.40757,-0.65062 0.81464,-1.31206 1.2315,-1.9755c0.41946,-0.66757 0.83374,-1.34258 1.73067,-2.648c0.44696,-0.65053 0.91436,-1.28356 1.386,-1.9095c0.46972,-0.6234 0.94725,-1.2364 1.422,-1.8465c0.94116,-1.20947 1.86168,-2.40844 2.30367,-3.0105c0.438,-0.59664 0.86246,-1.19396 1.27501,-1.7895c0.40743,-0.58816 0.80352,-1.17234 1.185,-1.7535c1.10526,-1.68381 1.44079,-2.23511 1.77633,-2.7705c0.32878,-0.52461 0.96306,-1.5459 1.27467,-2.04c0.60654,-0.96177 1.20782,-1.88193 1.51051,-2.325c0.59013,-0.86381 1.17888,-1.68032 1.46416,-2.075c0.5498,-0.76063 1.31747,-1.8231 1.77883,-2.4895c0.43918,-0.63437 0.85266,-1.25267 1.45717,-2.15717c0.59549,-0.891 0.96531,-1.46814 1.51466,-2.22933c0.58413,-0.80936 1.12566,-1.40253 1.83801,-2.12333c0.61304,-0.62031 0.45171,-1.48306 0.7045,-2.34733c0.25668,-0.87762 0.75447,-1.62502 1,-2.40983c0.25128,-0.8032 0.7633,-1.39453 1.33217,-2.25417c0.54528,-0.82398 0.73415,-1.6714 1.31516,-2.336c0.55639,-0.63644 1.38658,-1.22588 1.8595,-1.9c0.5082,-0.72441 0.78867,-1.4 1.60266,-1.56667l0.71184,-0.4905'></path></svg>";
@escaped-svg: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path stroke='@{secondary}' fill-opacity='0' stroke-width='16' d='m13,62c0.61067,1.6 1.3045,2.3045 1.75717,2.75716c0.72683,0.72684 1.24283,1.24284 2.07617,2.07617c0.54133,0.54133 1.04116,1.06035 1.82833,1.82383c0.5781,0.5607 1.00502,0.96983 2.02633,1.74417c0.55877,0.42365 1.191,0.84034 1.884,1.284c1.16491,0.74577 1.59777,1.00147 2.5,1.55067c0.4692,0.28561 1.43689,0.86868 1.93067,1.16534c0.99711,0.59904 1.99667,1.19755 2.49283,1.49866c0.98501,0.59779 1.47073,0.89648 1.94733,1.2c1.3971,0.88972 1.83738,1.19736 2.7,1.7955c0.42201,0.29262 1.24022,0.87785 2.05583,1.41917c0.79531,0.52785 1.59376,1.0075 2.38,1.43867c0.74477,0.40842 1.45167,0.75802 2.37817,1.22517c0.76133,0.38387 1.54947,0.82848 2.40717,1.41084c0.7312,0.49647 1.49563,1.08231 2.27884,1.258c0.35564,0.07978 0.14721,-0.95518 0.35733,-1.86867c0.18092,-0.78651 0.98183,-1.2141 0.99983,-2.07867c0.02073,-0.99529 0.07916,-1.79945 0.42533,-2.56133c0.43607,-0.95973 0.53956,-1.66774 0.79617,-2.68183c0.18888,-0.74645 0.39764,-1.31168 0.7785,-2.6235c0.20865,-0.71867 0.41483,-1.48614 0.708,-2.28c0.15452,-0.41843 0.77356,-1.73138 1.348,-2.64133c0.30581,-0.48443 0.65045,-0.97043 1.0065,-1.4745c0.74776,-1.05863 1.1531,-1.60163 1.9375,-2.77084c0.40621,-0.60548 0.80272,-1.23513 1.2045,-1.8765c0.40757,-0.65062 0.81464,-1.31206 1.2315,-1.9755c0.41946,-0.66757 0.83374,-1.34258 1.73067,-2.648c0.44696,-0.65053 0.91436,-1.28356 1.386,-1.9095c0.46972,-0.6234 0.94725,-1.2364 1.422,-1.8465c0.94116,-1.20947 1.86168,-2.40844 2.30367,-3.0105c0.438,-0.59664 0.86246,-1.19396 1.27501,-1.7895c0.40743,-0.58816 0.80352,-1.17234 1.185,-1.7535c1.10526,-1.68381 1.44079,-2.23511 1.77633,-2.7705c0.32878,-0.52461 0.96306,-1.5459 1.27467,-2.04c0.60654,-0.96177 1.20782,-1.88193 1.51051,-2.325c0.59013,-0.86381 1.17888,-1.68032 1.46416,-2.075c0.5498,-0.76063 1.31747,-1.8231 1.77883,-2.4895c0.43918,-0.63437 0.85266,-1.25267 1.45717,-2.15717c0.59549,-0.891 0.96531,-1.46814 1.51466,-2.22933c0.58413,-0.80936 1.12566,-1.40253 1.83801,-2.12333c0.61304,-0.62031 0.45171,-1.48306 0.7045,-2.34733c0.25668,-0.87762 0.75447,-1.62502 1,-2.40983c0.25128,-0.8032 0.7633,-1.39453 1.33217,-2.25417c0.54528,-0.82398 0.73415,-1.6714 1.31516,-2.336c0.55639,-0.63644 1.38658,-1.22588 1.8595,-1.9c0.5082,-0.72441 0.78867,-1.4 1.60266,-1.56667l0.71184,-0.4905'></path></svg>");
@check-fill: "data:image/svg+xml,@{escaped-svg}";
background: url(@check-fill) left center no-repeat;
}
}

142
src/popovers.less
View file

@ -1,80 +1,94 @@
// Core popover
[popover] {
// Core popovers
[popover-top],
[popover-right],
[popover-bottom],
[popover-left]{
position: relative;
margin: 24px;
}
// Popover hover trigger
[popover]:hover {
// Popover hover trigger
&:hover {
&::after {
transition: opacity .2s ease-out;
opacity: 1;
}
}
// Creating popover::after element
&::after {
transition: opacity .2s ease-out;
opacity: 1;
position: absolute;
top: -6px;
left: 50%;
opacity: 0;
padding: 4px 2px;
min-width: 80px;
font-size: 0.7em;
text-align: center;
color: @white;
background: @light-dark;
transition: opacity .25s ease-out;
transform: translateX(-50%) translateY(-100%);
.border;
}
}
// Creating popover::after element
[popover]::after {
content: attr(popover);
position: absolute;
top: -6px;
left: 50%;
opacity: 0;
padding: 4px 2px;
min-width: 80px;
font-size: 0.7em;
text-align: center;
color: #fff;
background: rgba(0,0,0,0.7);
transition: opacity .25s ease-out;
transform: translateX(-50%) translateY(-100%);
.border;
}
// Popover positioning: left, right, top, bottom
[popover-position='left']::before {
left: 0%;
top: 50%;
margin-left: -12px;
transform: translatey(-50%) rotate(-90deg);
[popover-left] {
&::before {
left: 0;
top: 50%;
margin-left: -12px;
transform: translatey(-50%) rotate(-90deg);
}
&::after {
content: attr(popover-left);
left: 0;
top: 50%;
margin-left: -8px;
transform: translateX(-100%) translateY(-50%);
}
}
[popover-position='left']::after {
left: 0%;
top: 50%;
margin-left: -8px;
transform: translateX(-100%) translateY(-50%);
[popover-right] {
&::before {
left: 100%;
top: 50%;
margin-left: 1px;
transform: translatey(-50%) rotate(90deg);
}
&::after {
content: attr(popover-right);
left: 100%;
top: 50%;
margin-left: 8px;
transform: translateX(0%) translateY(-50%);
}
}
[popover-position='top']::before {
left: 50%;
[popover-top] {
&::before {
left: 50%;
}
&::after {
content: attr(popover-top);
left: 50%;
}
}
[popover-position='top']::after {
left: 50%;
}
[popover-bottom] {
&::before {
top:100%;
margin-top: 8px;
transform: translateX(-50%) translatey(-100%) rotate(-180deg);
}
[popover-position='bottom']::before {
top:100%;
margin-top: 8px;
transform: translateX(-50%) translatey(-100%) rotate(-180deg);
}
[popover-position='bottom']::after {
top: 100%;
margin-top: 8px;
transform: translateX(-50%) translateY(0%);
}
[popover-position='right']::before {
left: 100%;
top: 50%;
margin-left: 1px;
transform: translatey(-50%) rotate(90deg);
}
[popover-position='right']::after {
left: 100%;
top: 50%;
margin-left: 8px;
transform: translateX(0%) translateY(-50%);
&::after {
content: attr(popover-bottom);
top: 100%;
margin-top: 8px;
transform: translateX(-50%) translateY(0%);
}
}

35
src/shadows.less
View file

@ -1,23 +1,32 @@
@shadow-color-regular: hsla(0,0%,0%,.2);
@shadow-color-hover: hsla(0,0%,0%,.3);
@shadow-small: 10px 19px 17px -13px @shadow-color-regular;
@shadow-regular: 15px 28px 25px -18px @shadow-color-regular;
@shadow-large: 20px 38px 34px -26px @shadow-color-regular;
@shadow-hover: 2px 8px 8px -5px @shadow-color-hover;
.shadow {
-webkit-box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
-moz-box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
transition:all .5s ease;
-webkit-box-shadow: @shadow-regular;
-moz-box-shadow: @shadow-regular;
box-shadow: @shadow-regular;
transition: all .5s ease;
&.shadow-large {
-webkit-box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
-moz-box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
-webkit-box-shadow: @shadow-large;
-moz-box-shadow: @shadow-large;
box-shadow: @shadow-large;
}
&.shadow-small {
-webkit-box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
-moz-box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
-webkit-box-shadow: @shadow-small;
-moz-box-shadow: @shadow-small;
box-shadow: @shadow-small;
}
&.shadow-hover {
&:hover{
-webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
-moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
-webkit-box-shadow: @shadow-hover;
-moz-box-shadow: @shadow-hover;
box-shadow: @shadow-hover;
transform: translate(0, 2px);
}
}
}

1
src/styles.less
View file

@ -17,3 +17,4 @@
@import (less) "./cards.less";
@import (less) "./badges.less";
@import (less) "./alerts.less";
@import (less) "./article.less";

8
src/tables.less
View file

@ -14,6 +14,14 @@ table {
vertical-align: top;
border-top: 1px dashed lighten(@primary, 60%);
}
@media screen and (max-width:480px) {
thead tr th {
padding: 2%;
}
tbody tr td {
padding: 2%;
}
}
&.table-hover tbody tr:hover {
color: @secondary;
}