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

Adding modal section

Browse source
This commit is contained in:
Afzal Sayed 2017-12-06 21:42:17 +05:30
parent 03981cadb5
commit 33fd6b7290
3 changed files with 181 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
index.html
View file

@ -65,6 +65,7 @@
<li><a href="#alerts">Alerts</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#article">Article</a></li>
<li><a href="#modals">Modals</a></li>
</ul>
</div>
<div class="to-top">
@ -1229,7 +1230,96 @@ function add(x, y) {
</div>
</div>
<div id="modals" class="section">
<h2>Modals</h2>
<h4>Simple modal example</h4>
<p>This can be used to implement modals along with features like title, subtitle, text, button and links. Just use whichever component you need for your modal with proper classes and leave the rest on the framework.</p>
<div class="row flex-spaces child-borders">
<a href="#modal-1" class="paper-btn margin">Open Modal!</a>
</div>
<div class="modal row flex-spaces" id="modal-1">
<div class="modal-body">
<a href="#modals" class="btn-close">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<a href="#modals"><button>Nice!</button></a>
</div>
</div>
<div class="docs">
<pre><code>&lt;div class="row flex-space child-borders"&gt;
&lt;a href="modal-1" class="paper-btn margin"&gt;Open Modal!&lt;/a&gt;
&lt;/div&gt;
&lt;div class="modal row flex-space" id="modal-1"&gt;
&lt;div class="modal-body"&gt;
&lt;a class="btn-close" href="#modals"&gt;x&lt;/a&gt;
&lt;h4 class="modal-title"&gt;Modal Title&lt;/h4&gt;
&lt;h5 class="modal-subtitle"&gt;Modal Subtitle&lt;/h5&gt;
&lt;p class="modal-text"&gt;This is an example of modal which is implemented with pure CSS! :D&lt;/p&gt;
&lt;button&gt;Nice!&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
<h4>Modal with title, text and links</h4>
<div class="row flex-spaces child-borders">
<a href="#modal-2" class="paper-btn margin">Another Modal!</a>
</div>
<div class="modal row flex-spaces" id="modal-2">
<div class="modal-body">
<a href="#modals" class="btn-close">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<a class="modal-link" href="#modals">OK</a>
<a class="modal-link" href="#modals">Close</a>
</div>
</div>
<div class="docs">
<pre><code>&lt;div class="row flex-space child-borders"&gt;
&lt;a href="modal-1" class="paper-btn margin"&gt;Open Modal!&lt;/a&gt;
&lt;/div&gt;
&lt;div class="modal row flex-space" id="modal-1"&gt;
&lt;div class="modal-body"&gt;
&lt;a class="btn-close" href="#modals"&gt;x&lt;/a&gt;
&lt;h4 class="modal-title"&gt;Modal Title&lt;/h4&gt;
&lt;h5 class="modal-subtitle"&gt;Modal Subtitle&lt;/h5&gt;
&lt;p class="modal-text"&gt;This is an example of modal which is implemented with pure CSS! :D&lt;/p&gt;
&lt;a class="modal-link" href="#modals"&gt;OK&lt;/a&gt;
&lt;a class="modal-link" href="#modals"&gt;Close&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
<h4>Paper border</h4>
<div class="row flex-spaces child-borders">
<a href="#modal-3" class="paper-btn margin">Paper Modal!</a>
</div>
<div class="modal row flex-spaces" id="modal-3">
<div class="modal-body border">
<a href="#modals" class="btn-close">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<a href="#modals"><button>Nice!</button></a>
</div>
</div>
<div class="docs">
<pre><code>&lt;div class="row flex-space child-borders"&gt;
&lt;a href="modal-1" class="paper-btn margin"&gt;Open Modal!&lt;/a&gt;
&lt;/div&gt;
&lt;div class="modal row flex-space" id="modal-1"&gt;
&lt;div class="modal-body border"&gt;
&lt;a class="btn-close" href="#modals"&gt;x&lt;/a&gt;
&lt;h4 class="modal-title"&gt;Modal Title&lt;/h4&gt;
&lt;h5 class="modal-subtitle"&gt;Modal Subtitle&lt;/h5&gt;
&lt;p class="modal-text"&gt;This is an example of modal which is implemented with pure CSS! :D&lt;/p&gt;
&lt;button&gt;Nice!&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

90
src/modals.less Normal file
View file

@ -0,0 +1,90 @@
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
.modal{
&:before{
content: "";
display: none;
background: rgba(0,0,0,.6);
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 10;
}
&:target{
&:before{
display: block;
}
.modal-body{
.translate(0, 0);
top: 20%;
}
}
.modal-body{
flex: 1 1 auto;
padding: 1.25rem;
background: @white;
border: 2px solid @muted-light;
word-wrap: break-word;
position: fixed;
z-index: 11;
.translate(0, -500%);
.transition-transform(~"0.3s ease-out");
}
.btn-close{
color: @primary-light;
font-size: 30px;
text-decoration: none;
position: absolute; right: 0; top: 0;
.margin;
background: inherit;
&:hover{
color: @muted;
}
}
.modal-title, h4 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.modal-subtitle, h5 {
.text-secondary;
margin-top: 0;
margin-bottom: 0.5rem;
}
.modal-text, p {
margin-top: 0;
margin-bottom: 1rem;
}
.modal-link + .modal-link,
a + a {
margin-left: 1.25rem;
}
a button {
text-decoration: none;
background: @white;
}
}

1
src/styles.less
View file

@ -19,3 +19,4 @@
@import (less) "./alerts.less";
@import (less) "./tabs.less";
@import (less) "./article.less";
@import (less) "./modals.less";