mirror of
https://github.com/papercss/papercss
synced 2024-06-01 21:42:22 +02:00
updated with new feature and fixed position bug
This commit is contained in:
koester
parent
37fa4c57d3
commit
f9c7e027e6
|
|
@ -7,15 +7,17 @@ description: PaperCSS Modals
|
|||
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.
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<a href="#modal-1" class="paper-btn margin">Open Modal!</a>
|
||||
<label class="paper-btn margin" for="modal-1">Open Modal!</label>
|
||||
</div>
|
||||
<div class="modal row flex-spaces" id="modal-1">
|
||||
<input class="modal-state" id="modal-1" type="checkbox">
|
||||
<div class="modal">
|
||||
<label class="modal-bg" for="modal-1"></label>
|
||||
<div class="modal-body">
|
||||
<a href="#modals" class="btn-close">x</a>
|
||||
<label class="btn-close" for="modal-1">X</label>
|
||||
<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>
|
||||
<label for="modal-1" class="paper-btn">Nice!</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -23,15 +25,17 @@ This can be used to implement modals along with features like title, subtitle, t
|
|||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<a href="modal-1" class="paper-btn margin">Open Modal!</a>
|
||||
<label class="paper-btn margin" for="modal-1">Open Modal!</label>
|
||||
</div>
|
||||
<div class="modal row flex-spaces" id="modal-1">
|
||||
<input class="modal-state" id="modal-1" type="checkbox">
|
||||
<div class="modal">
|
||||
<label class="modal-bg" for="modal-1"></label>
|
||||
<div class="modal-body">
|
||||
<a class="btn-close" href="#modals">x</a>
|
||||
<label class="btn-close" for="modal-1">X</label>
|
||||
<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>
|
||||
<label for="modal-1">Nice!</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -39,33 +43,37 @@ This can be used to implement modals along with features like title, subtitle, t
|
|||
### Modal with title, text and links
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<a href="#modal-2" class="paper-btn margin">Another Modal!</a>
|
||||
<label class="paper-btn margin" for="modal-2">Another Modal!</label>
|
||||
</div>
|
||||
<div class="modal row flex-spaces" id="modal-2">
|
||||
<input class="modal-state" id="modal-2" type="checkbox">
|
||||
<div class="modal">
|
||||
<label class="modal-bg" for="modal-2"></label>
|
||||
<div class="modal-body">
|
||||
<a href="#modals" class="btn-close">x</a>
|
||||
<label class="btn-close" for="modal-2">X</label>
|
||||
<h4 class="modal-title">Modal Title</h4>
|
||||
<h5 class="modal-subtitle">Modal Subtitle</h5>
|
||||
<p class="modal-text">This is another 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>
|
||||
<label for="modal-2" class="modal-link">OK</label>
|
||||
<label for="modal-2" class="modal-link">Close</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-space child-borders">
|
||||
<a href="modal-1" class="paper-btn margin">Open Modal!</a>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<label class="paper-btn margin" for="modal-2">Another Modal!</label>
|
||||
</div>
|
||||
<div class="modal row flex-space" id="modal-1">
|
||||
<input class="modal-state" id="modal-2" type="checkbox">
|
||||
<div class="modal">
|
||||
<label class="modal-bg" for="modal-2"></label>
|
||||
<div class="modal-body">
|
||||
<a class="btn-close" href="#modals">x</a>
|
||||
<label class="btn-close" for="modal-2">X</label>
|
||||
<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>
|
||||
<p class="modal-text">This is another example of modal which is implemented with pure CSS! :D</p>
|
||||
<label for="modal-2" class="modal-link">OK</label>
|
||||
<label for="modal-2" class="modal-link">Close</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,79 +1,121 @@
|
|||
.modal{
|
||||
.modal {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
background: rgba(black, 0.6);
|
||||
z-index: 12;
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
@include transition(opacity, 130ms);
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
display: none;
|
||||
background: rgba(black,.6);
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 10;
|
||||
// modal background
|
||||
&-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:target{
|
||||
&:before{
|
||||
display: flex;
|
||||
}
|
||||
.modal-body{
|
||||
@include translate(0, 0);
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
flex: 1 1 auto;
|
||||
padding: 1.25rem;
|
||||
.modal-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
background: $white;
|
||||
border: 2px solid $muted-light;
|
||||
word-wrap: break-word;
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
max-width: 960px;
|
||||
@include translate(0, -5000%);
|
||||
@include transition(transform);
|
||||
padding: 1.25rem;
|
||||
backface-visibility: hidden;
|
||||
@include translate(-50%, -50%);
|
||||
@include transition;
|
||||
|
||||
@include resp(medium) {
|
||||
max-width: 85%;
|
||||
}
|
||||
@include resp(xsmall) {
|
||||
max-width: 90%;
|
||||
@include resp(sm) {
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close{
|
||||
.btn-close {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
cursor: pointer;
|
||||
color: $primary-light;
|
||||
font-size: 30px;
|
||||
text-decoration: none;
|
||||
position: absolute; right: 0; top: 0;
|
||||
@extend .margin;
|
||||
background: inherit;
|
||||
&:hover{
|
||||
color: $muted;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
@include transition;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title, h4 {
|
||||
h4,
|
||||
.modal-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-subtitle, h5 {
|
||||
h5,
|
||||
.modal-subtitle {
|
||||
@extend .text-secondary;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-text, p {
|
||||
p,
|
||||
.modal-text {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal-link + .modal-link,
|
||||
a + a {
|
||||
.modal-link+.modal-link,
|
||||
a+a {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
a button {
|
||||
label[for],
|
||||
.paper-btn {
|
||||
text-decoration: none;
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.modal-link, 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%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-state {
|
||||
display: none;
|
||||
|
||||
&:checked+.modal {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
.modal-body {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue