mirror of
https://github.com/papercss/papercss
synced 2024-06-07 00:12:29 +02:00
Merge pull request #102 from afzalsayed96/feature-modals
Feature modals
This commit is contained in:
Fraham
GitHub
commit
b05900806b
61
index.html
61
index.html
|
|
@ -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">
|
||||
|
|
@ -1196,7 +1197,67 @@
|
|||
</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><div class="row flex-space child-borders">
|
||||
<a href="modal-1" class="paper-btn margin">Open Modal!</a>
|
||||
</div>
|
||||
<div class="modal row flex-space" id="modal-1">
|
||||
<div class="modal-body">
|
||||
<a class="btn-close" href="#modals">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>
|
||||
<button>Nice!</button>
|
||||
</div>
|
||||
</div></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><div class="row flex-space child-borders">
|
||||
<a href="modal-1" class="paper-btn margin">Open Modal!</a>
|
||||
</div>
|
||||
<div class="modal row flex-space" id="modal-1">
|
||||
<div class="modal-body">
|
||||
<a class="btn-close" href="#modals">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></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
97
src/modals.less
Normal file
97
src/modals.less
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
.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: flex;
|
||||
}
|
||||
.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;
|
||||
max-width: 960px;
|
||||
@media @medium-screen {
|
||||
max-width: 85%;
|
||||
}
|
||||
@media @xsmall-screen {
|
||||
max-width: 90%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,3 +19,4 @@
|
|||
@import (less) "./alerts.less";
|
||||
@import (less) "./tabs.less";
|
||||
@import (less) "./article.less";
|
||||
@import (less) "./modals.less";
|
||||
|
|
|
|||
Loading…
Reference in a new issue