mirror of
https://github.com/papercss/papercss
synced 2024-05-17 21:26:42 +02:00
The big bad initial commit
This commit is contained in:
rhyneav
parent
91d379151f
commit
b4c2e9ea3a
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/node_modules
|
||||
1
colors.less
Normal file
1
colors.less
Normal file
|
|
@ -0,0 +1 @@
|
|||
//https://v4-alpha.getbootstrap.com/components/list-group/
|
||||
9
demo.css
Normal file
9
demo.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
body {
|
||||
background-image: url("/img/geometry2.png")
|
||||
}
|
||||
.demo .row .col {
|
||||
background-color: #eee;
|
||||
}
|
||||
.demo .row .col:nth-child(even) {
|
||||
background-color: #ddd;
|
||||
}
|
||||
1545
dist/styles.css
vendored
Normal file
1545
dist/styles.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
22
gulpfile.js
Normal file
22
gulpfile.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
var gulp = require('gulp'),
|
||||
connect = require('gulp-connect'),
|
||||
less = require('gulp-less');
|
||||
|
||||
gulp.task('webserver', function() {
|
||||
connect.server({
|
||||
livereload: true
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('less', function() {
|
||||
gulp.src('src/styles.less')
|
||||
.pipe(less())
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(connect.reload());
|
||||
});
|
||||
|
||||
gulp.task('watch', function() {
|
||||
gulp.watch('src/*.less', ['less']);
|
||||
})
|
||||
|
||||
gulp.task('default', ['less', 'webserver', 'watch']);
|
||||
BIN
img/geometry2.png
Normal file
BIN
img/geometry2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
420
index.html
Normal file
420
index.html
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/dist/styles.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>Paper CSS</h1>
|
||||
<h3>the less formal css framework</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-center child-borders">
|
||||
<a href="#flexbox" 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="" class="paper-btn margin">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="flexbox" class="section">
|
||||
<h2>Flexbox</h2>
|
||||
<h4>Flexgrid</h4>
|
||||
<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">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>
|
||||
</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>
|
||||
<div class="section">
|
||||
<h2>Buttons</h2>
|
||||
<p>Borrowed from <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>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Forms</h2>
|
||||
<div class="form-group">
|
||||
<label>Input</label>
|
||||
<input type="text">
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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 Claption</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 Claption</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 Claption</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>
|
||||
<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>
|
||||
<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>
|
||||
<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-1</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-2</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-4 border-primary">Border-3</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-5</div>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<h4>Child Shadows</h4>
|
||||
<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>
|
||||
<h4>Child Shadows Hover</h4>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<div class="section">
|
||||
<h2 id="about">About</h2>
|
||||
<p>I got tired of straight lines and clean pages on the internet. I also wanted to learn more about flexbox and less. So I made Paper CSS to solve these two challenges of mine :)</p>
|
||||
<p>The goal of Paper CSS 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 Paper CSS 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/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!</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>
|
||||
8677
package-lock.json
generated
Normal file
8677
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
32
package.json
Normal file
32
package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "papercss",
|
||||
"version": "1.0.0",
|
||||
"description": "Another CSS framework",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node_modules/gulp/bin/gulp.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rhyneav/papercss.git"
|
||||
},
|
||||
"author": "rhyneav",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rhyneav/papercss/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rhyneav/papercss#readme",
|
||||
"devDependencies": {
|
||||
"gulp": "3.9.1",
|
||||
"gulp-connect": "5.0.0",
|
||||
"gulp-less": "3.3.2",
|
||||
"gulp-plumber": "1.1.0",
|
||||
"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;
|
||||
}
|
||||
42
src/buttons.less
Normal file
42
src/buttons.less
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
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;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
26
src/code.less
Normal file
26
src/code.less
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
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: #41403E;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: lighten(@primary, 70%);
|
||||
border: 1px solid lighten(@primary, 50%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
40
src/container.less
Normal file
40
src/container.less
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
@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 {
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
@media @medium-screen {
|
||||
width: 85%;
|
||||
}
|
||||
@media @xsmall-screen {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.section {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid lighten(@primary, 60%);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
137
src/flexbox.less
Normal file
137
src/flexbox.less
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
.center-all() {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.col-size(@percent) {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 @percent;
|
||||
-ms-flex: 0 0 @percent;
|
||||
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;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-flow: row wrap;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 1rem;
|
||||
&.flex-right {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.flex-center {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&.flex-edges {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.flex-spaces {
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
&.flex-top {
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&.flex-middle {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.flex-bottom {
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
.col {
|
||||
padding: 1rem;
|
||||
@media (max-width: 767px) {
|
||||
// Stack for mobile
|
||||
.col-size(100%);
|
||||
}
|
||||
}
|
||||
.col-fill {
|
||||
width: auto;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
.generate-columns(12);
|
||||
.align-top {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.align-middle {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
.align-bottom {
|
||||
-webkit-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
46
src/fonts.less
Normal file
46
src/fonts.less
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
||||
|
||||
@global-font-size: 20px;
|
||||
@header-font: 'Patrick Hand SC';
|
||||
@body-font: 'Neucha';
|
||||
@font-color: @primary;
|
||||
|
||||
html {
|
||||
font-size: @global-font-size;
|
||||
font-family: @body-font, sans-serif;
|
||||
color: @font-color;
|
||||
}
|
||||
p, a, button, table, thead, tbody, th, tr, td, input, 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: .8rem;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
76
src/forms.less
Normal file
76
src/forms.less
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
input, select {
|
||||
display: block;
|
||||
background:transparent;
|
||||
color:#41403E;
|
||||
outline:none;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius:15px 255px;
|
||||
font-size: 1rem;
|
||||
padding: .5rem .5rem;
|
||||
border: 2px solid @primary;
|
||||
&:focus {
|
||||
border: 2px solid @secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
> label, legend {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.paper-radio, .paper-check {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
cursor: pointer;
|
||||
input {
|
||||
border: 0;
|
||||
height: 1px; margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
input + span {
|
||||
display: block;
|
||||
}
|
||||
/* the basic, unchecked style */
|
||||
input + span:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: -.25rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid @primary;
|
||||
margin-right: 0.75em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
input[type="radio"] + span:before {
|
||||
border-top-left-radius: 1rem 1rem;
|
||||
border-top-right-radius: 1rem .6rem;
|
||||
border-bottom-right-radius: 1rem .9rem;
|
||||
border-bottom-left-radius: .7rem 1rem;
|
||||
}
|
||||
input[type="checkbox"] + span:before {
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius:15px 255px;
|
||||
}
|
||||
|
||||
/* the checked style using the :checked pseudo class */
|
||||
input[type="radio"]:checked + span:before {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><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" style="stroke-dasharray: 586.364, 586.364; stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s ease-in 0s;"></path></svg>');
|
||||
}
|
||||
input[type="checkbox"]:checked + span:before {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path 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" id="svg_2" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="1009.6, 1009.6" stroke-width="16" stroke="@{secondary}" fill="none"/></svg>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset.form-group {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
23
src/images.less
Normal file
23
src/images.less
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
.border;
|
||||
&.float-left {
|
||||
float: left;
|
||||
margin: 1rem 1rem 1rem 0rem;
|
||||
}
|
||||
&.float-right {
|
||||
float: right;
|
||||
margin: 1rem 0rem 1rem 1rem;
|
||||
}
|
||||
&.no-responsive {
|
||||
max-width: initial;
|
||||
height: initial;
|
||||
display: initial;
|
||||
}
|
||||
&.no-border {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
44
src/lists.less
Normal file
44
src/lists.less
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.li-bullet(@char) {
|
||||
li:before {
|
||||
content: @char;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
li {
|
||||
text-indent: -7px;
|
||||
}
|
||||
li:before {
|
||||
position: relative;
|
||||
left: -7px;
|
||||
}
|
||||
.li-bullet("-");
|
||||
ul {
|
||||
.li-bullet("+");
|
||||
ul {
|
||||
.li-bullet("~");
|
||||
ul {
|
||||
.li-bullet("⤍");
|
||||
ul {
|
||||
.li-bullet("⁎")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
src/responsive.less
Normal file
0
src/responsive.less
Normal file
30
src/shadows.less
Normal file
30
src/shadows.less
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.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;
|
||||
&.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);
|
||||
}
|
||||
&.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);
|
||||
}
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.child-shadows > * {
|
||||
.shadow;
|
||||
}
|
||||
.child-shadows-hover > * {
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
}
|
||||
23
src/styles.less
Normal file
23
src/styles.less
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// 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;
|
||||
}
|
||||
|
||||
@import (less) "../node_modules/normalize.css/normalize.css";
|
||||
@import (less) "./colors.less";
|
||||
@import (less) "./fonts.less";
|
||||
@import (less) "./borders.less";
|
||||
@import (less) "./shadows.less";
|
||||
@import (less) "./flexbox.less";
|
||||
@import (less) "./container.less";
|
||||
@import (less) "./buttons.less";
|
||||
@import (less) "./forms.less";
|
||||
@import (less) "./lists.less";
|
||||
@import (less) "./code.less";
|
||||
@import (less) "./tables.less";
|
||||
@import (less) "./images.less";
|
||||
@import (less) "./utilities.less";
|
||||
23
src/tables.less
Normal file
23
src/tables.less
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
table {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
thead tr th {
|
||||
vertical-align: bottom;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
tbody tr td {
|
||||
padding: 8px;
|
||||
line-height: 1.5;
|
||||
vertical-align: top;
|
||||
border-top: 1px dashed lighten(@primary, 60%);
|
||||
}
|
||||
&.table-hover tbody tr:hover {
|
||||
color: @secondary;
|
||||
}
|
||||
&.table-alternating tbody tr:nth-of-type(even) {
|
||||
color: lighten(@primary, 25%);
|
||||
}
|
||||
}
|
||||
124
src/utilities.less
Normal file
124
src/utilities.less
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
@base: 1rem;
|
||||
@large: 2rem;
|
||||
@small: .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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue