mirror of
https://github.com/papercss/papercss
synced 2024-06-01 13:32:42 +02:00
fix for pre code tags
This commit is contained in:
Afzal Sayed
parent
62c7309296
commit
6b7c8340ee
121
index.html
121
index.html
|
|
@ -137,7 +137,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
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>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="typography" class="section">
|
||||
|
|
@ -220,14 +220,14 @@
|
|||
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>
|
||||
<pre><code>
|
||||
<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>
|
||||
<p>Lorem ipsum dolor....</p></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="buttons" class="section">
|
||||
|
|
@ -245,7 +245,7 @@
|
|||
<button class="disabled">Disabled</button>
|
||||
<button disabled>Disabled</button>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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>
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<button class="disabled">Disabled</button>
|
||||
<button disabled>Disabled</button></pre>
|
||||
<button disabled>Disabled</button></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="forms" class="section">
|
||||
|
|
@ -311,7 +311,7 @@
|
|||
</label>
|
||||
</fieldset>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<div class="form-group">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
|
|
@ -360,7 +360,7 @@
|
|||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</pre>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lists" class="section">
|
||||
|
|
@ -411,7 +411,7 @@
|
|||
<li>And now we're are the top!</li>
|
||||
</ul>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<ol>
|
||||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
|
|
@ -436,7 +436,7 @@
|
|||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
|
||||
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --></pre>
|
||||
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="code" class="section">
|
||||
|
|
@ -449,7 +449,7 @@ function add(x, y) {
|
|||
return x + y;
|
||||
} </pre>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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>
|
||||
|
|
@ -457,7 +457,7 @@ function add(x, y) {
|
|||
function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
</pre></pre>
|
||||
</pre></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tables" class="section">
|
||||
|
|
@ -556,7 +556,7 @@ function add(x, y) {
|
|||
</tbody>
|
||||
</table>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -590,7 +590,7 @@ function add(x, y) {
|
|||
|
||||
<!-- Add table-hover or table-alternating to change the style of the table -->
|
||||
<table class="table-hover">
|
||||
<table class="table-alternating"></pre>
|
||||
<table class="table-alternating"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="popovers" class="section">
|
||||
|
|
@ -614,11 +614,11 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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>
|
||||
<p popover="Popover on right" popover-position="right">Popover right position</p></code></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>
|
||||
|
|
@ -630,8 +630,8 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button></pre>
|
||||
<pre><code>
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -653,7 +653,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<div class="card" style="width: 20rem;">
|
||||
<img src="https://picsum.photos/768" alt="Card example image">
|
||||
|
||||
|
|
@ -663,7 +663,7 @@ function add(x, y) {
|
|||
<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></pre>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Card title, text, links</h4>
|
||||
|
|
@ -680,7 +680,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
|
|
@ -689,7 +689,7 @@ function add(x, y) {
|
|||
<a class="card-link" href="#">First link</a>
|
||||
<a class="card-link" href="#">Second link</a>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Image on top or bottom</h4>
|
||||
|
|
@ -706,7 +706,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
|
|
@ -715,7 +715,7 @@ function add(x, y) {
|
|||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
|
||||
</div></pre>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Header and footer</h4>
|
||||
|
|
@ -733,7 +733,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
|
|
@ -744,7 +744,7 @@ function add(x, y) {
|
|||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
</pre>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -761,13 +761,13 @@ function add(x, y) {
|
|||
<h6>Example h6 heading <span class="badge">123</span></h6>
|
||||
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></pre>
|
||||
<h6>Example h6 heading <span class="badge">123</span></h6></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -781,13 +781,13 @@ function add(x, y) {
|
|||
<p class="text-danger">Text danger</p>
|
||||
<p class="text-muted">Text muted</p>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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> </pre>
|
||||
<p class="text-muted">Text muted</p> </code></pre>
|
||||
</div>
|
||||
<h4>Backgrounds</h4>
|
||||
<div class="row flex-center">
|
||||
|
|
@ -798,14 +798,14 @@ function add(x, y) {
|
|||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="borders" class="section">
|
||||
|
|
@ -822,7 +822,7 @@ function add(x, y) {
|
|||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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>
|
||||
|
|
@ -832,7 +832,7 @@ function add(x, y) {
|
|||
<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></code></pre>
|
||||
</div>
|
||||
<h4>Border Colors</h4>
|
||||
<div class="row child-borders">
|
||||
|
|
@ -844,7 +844,7 @@ function add(x, y) {
|
|||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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>
|
||||
|
|
@ -860,7 +860,7 @@ function add(x, y) {
|
|||
<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></code></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>
|
||||
|
|
@ -873,7 +873,7 @@ function add(x, y) {
|
|||
<div class="sm-2 col">6</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<div class="row flex-center child-borders">
|
||||
<div class="sm-2 col">1</div>
|
||||
<div class="sm-2 col">2</div>
|
||||
|
|
@ -881,7 +881,7 @@ function add(x, y) {
|
|||
<div class="sm-2 col">4</div>
|
||||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div></pre>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
<h4>Border Styles</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
|
|
@ -891,13 +891,13 @@ function add(x, y) {
|
|||
<div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></pre>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
<h4>Shadows</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
|
|
@ -907,13 +907,13 @@ function add(x, y) {
|
|||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></code></pre>
|
||||
</div>
|
||||
<h4>Child Shadows</h4>
|
||||
<p>Use this if you want all children to have a shadow.</p>
|
||||
|
|
@ -923,12 +923,12 @@ function add(x, y) {
|
|||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></code></pre>
|
||||
</div>
|
||||
<h4>Child Shadows Hover</h4>
|
||||
<p>Use this if you want all children to have a shadow... that changes on hover</p>
|
||||
|
|
@ -938,12 +938,12 @@ function add(x, y) {
|
|||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="utilities" class="section">
|
||||
|
|
@ -955,12 +955,12 @@ function add(x, y) {
|
|||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></code></pre>
|
||||
</div>
|
||||
<h4>Padding</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
|
|
@ -969,12 +969,12 @@ function add(x, y) {
|
|||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="images" class="section">
|
||||
|
|
@ -983,8 +983,8 @@ function add(x, y) {
|
|||
<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>
|
||||
<pre><code>
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash"></code></pre>
|
||||
</div>
|
||||
<h4>Float</h4>
|
||||
<p>You can also float responsive images to fit neatly with your text</p>
|
||||
|
|
@ -996,20 +996,20 @@ function add(x, y) {
|
|||
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>
|
||||
<pre><code>
|
||||
<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>
|
||||
</p></code></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>
|
||||
<pre><code>
|
||||
<img src="https://unsplash.it/300" class="no-responsive no-border"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="alerts" class="section">
|
||||
|
|
@ -1032,14 +1032,14 @@ function add(x, y) {
|
|||
</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<pre><code>
|
||||
<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></pre>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
|
|
@ -1065,8 +1065,7 @@ function add(x, y) {
|
|||
</ul>
|
||||
<p>Here's a quck snippet to get started with PaperCSS:</p>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<!DOCTYPE html>
|
||||
<pre><code><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
|
@ -1081,7 +1080,7 @@ function add(x, y) {
|
|||
<p>This is where some content would go.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html></pre>
|
||||
</html></code></pre>
|
||||
</div>
|
||||
<h4>Build it Yourself</h4>
|
||||
<p>If you'd rather customize things, you can build the CSS yourself via the git repo</p>
|
||||
|
|
|
|||
|
|
@ -25,4 +25,12 @@ pre {
|
|||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
pre code{
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
white-space: pre;
|
||||
margin-top: -1.50em;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
}
|
||||
Loading…
Reference in a new issue