mirror of
https://github.com/papercss/papercss
synced 2024-06-08 17:02:14 +02:00
Removing margin
This commit is contained in:
Afzal Sayed
parent
ab7bae8f4c
commit
674b7ca428
93
index.html
93
index.html
|
|
@ -141,8 +141,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row">
|
||||
<pre><code><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>
|
||||
|
|
@ -224,8 +223,7 @@
|
|||
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><code>
|
||||
<h1>Heading 1</h1>
|
||||
<pre><code><h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
|
|
@ -249,8 +247,7 @@
|
|||
<button class="disabled">Disabled</button>
|
||||
<button disabled>Disabled</button>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imperfect Buttons</a></p>
|
||||
<pre><code><p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imperfect Buttons</a></p>
|
||||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button>
|
||||
|
|
@ -270,8 +267,7 @@
|
|||
<button class="btn-warning">Warning</button>
|
||||
<button class="btn-danger">Danger</button>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<input type="button" class="paper-btn btn-primary" value="Primary"/>
|
||||
<pre><code> <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>
|
||||
|
|
@ -338,8 +334,7 @@
|
|||
</label>
|
||||
</fieldset>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="form-group">
|
||||
<pre><code><div class="form-group">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
</div>
|
||||
|
|
@ -446,8 +441,7 @@
|
|||
<li>And now we're are the top!</li>
|
||||
</ul>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<ol>
|
||||
<pre><code><ol>
|
||||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
<li>Finally this</li>
|
||||
|
|
@ -484,8 +478,7 @@ function add(x, y) {
|
|||
return x + y;
|
||||
} </pre>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<p>Let's make some pretty <code>&lt;code&gt;</code></p>
|
||||
<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>
|
||||
<pre>
|
||||
|
|
@ -591,8 +584,7 @@ function add(x, y) {
|
|||
</tbody>
|
||||
</table>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<table>
|
||||
<pre><code><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
|
|
@ -649,8 +641,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<p popover-left="Popover on left">Popover left position</p>
|
||||
<pre><code><p popover-left="Popover on left">Popover left position</p>
|
||||
<p popover-top="Popover on top">Popover top position</p>
|
||||
<p popover-bottom="Popover on bottom">Popover bottom position</p>
|
||||
<p popover-right="Popover on right">Popover right position</p></code></pre>
|
||||
|
|
@ -665,8 +656,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<button popover-top="Popover on top">Popover on top and on a button!</button></code></pre>
|
||||
<pre><code><button popover-top="Popover on top">Popover on top and on a button!</button></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -688,8 +678,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="card" style="width: 20rem;">
|
||||
<pre><code><div class="card" style="width: 20rem;">
|
||||
<img src="https://picsum.photos/768" alt="Card example image">
|
||||
|
||||
<div class="card-body">
|
||||
|
|
@ -715,8 +704,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="card" style="width: 20rem;">
|
||||
<pre><code><div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
|
|
@ -741,8 +729,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="card" style="width: 20rem;">
|
||||
<pre><code><div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
|
|
@ -768,8 +755,7 @@ function add(x, y) {
|
|||
</div>
|
||||
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="card" style="width: 20rem;">
|
||||
<pre><code><div class="card" style="width: 20rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
|
|
@ -796,8 +782,7 @@ function add(x, y) {
|
|||
<h6>Example h6 heading <span class="badge">123</span></h6>
|
||||
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<h1>Example h1 heading <span class="badge">123</span></h1>
|
||||
<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>
|
||||
|
|
@ -816,8 +801,7 @@ function add(x, y) {
|
|||
<p class="text-danger">Text danger</p>
|
||||
<p class="text-muted">Text muted</p>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<p class="text-primary">Text primary</p>
|
||||
<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>
|
||||
|
|
@ -833,8 +817,7 @@ function add(x, y) {
|
|||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-center">
|
||||
<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>
|
||||
|
|
@ -857,8 +840,7 @@ function add(x, y) {
|
|||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-spaces">
|
||||
<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>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-3</div>
|
||||
|
|
@ -879,8 +861,7 @@ function add(x, y) {
|
|||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row child-borders">
|
||||
<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>
|
||||
<div class="sm-2 col border border-success">Border success</div>
|
||||
|
|
@ -908,8 +889,7 @@ function add(x, y) {
|
|||
<div class="sm-2 col">6</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-center child-borders">
|
||||
<pre><code><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>
|
||||
|
|
@ -926,8 +906,7 @@ function add(x, y) {
|
|||
<div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<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>
|
||||
|
|
@ -942,8 +921,7 @@ function add(x, y) {
|
|||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<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>
|
||||
|
|
@ -958,8 +936,7 @@ function add(x, y) {
|
|||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
<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>
|
||||
|
|
@ -973,8 +950,7 @@ function add(x, y) {
|
|||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
<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>
|
||||
|
|
@ -990,8 +966,7 @@ function add(x, y) {
|
|||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<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>
|
||||
|
|
@ -1004,8 +979,7 @@ function add(x, y) {
|
|||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<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>
|
||||
|
|
@ -1018,8 +992,7 @@ function add(x, y) {
|
|||
<p>Images by default are responsive</p>
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash">
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash"></code></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>
|
||||
|
|
@ -1031,8 +1004,7 @@ 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><code>
|
||||
<p>
|
||||
<pre><code><p>
|
||||
<img src="https://unsplash.it/200" class="float-left">
|
||||
Lorem ipsum dolor.......
|
||||
<img src="https://unsplash.it/100" class="float-right">
|
||||
|
|
@ -1043,8 +1015,7 @@ function add(x, y) {
|
|||
<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><code>
|
||||
<img src="https://unsplash.it/300" class="no-responsive no-border"></code></pre>
|
||||
<pre><code><img src="https://unsplash.it/300" class="no-responsive no-border"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="alerts" class="section">
|
||||
|
|
@ -1067,8 +1038,7 @@ function add(x, y) {
|
|||
</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<div class="row flex-spaces">
|
||||
<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>
|
||||
|
|
@ -1098,8 +1068,7 @@ function add(x, y) {
|
|||
</article>
|
||||
|
||||
<div class="docs">
|
||||
<pre><code>
|
||||
<article class="article">
|
||||
<pre><code><article class="article">
|
||||
<h1 class="article-title"><a href="">Article Title</a></h1>
|
||||
<p class="article-meta">Written by <a href="#">Super User</a></p>
|
||||
<p class="text-lead"> Lorem... </p>
|
||||
|
|
|
|||
|
|
@ -29,11 +29,8 @@ pre {
|
|||
pre code{
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
margin-top: -1.50em;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
padding: initial;
|
||||
white-space:pre;
|
||||
word-break:break-all;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue