From d9af4be0896255d3497e58942031a5f8057317b3 Mon Sep 17 00:00:00 2001
From: koester <koester69@gmail.com>
Date: Mon, 8 Jan 2018 14:24:23 +0100
Subject: [PATCH 1/4] updated with new feature and fixed position bug

---
 docs/content/docs/components/modals.md |  48 +++++----
 src/components/_modals.scss            | 129 ++++++++++++++++---------
 2 files changed, 113 insertions(+), 64 deletions(-)

diff --git a/docs/content/docs/components/modals.md b/docs/content/docs/components/modals.md
index 5068545..c1af521 100644
--- a/docs/content/docs/components/modals.md
+++ b/docs/content/docs/components/modals.md
@@ -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" class="paper-btn">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>
 ```
diff --git a/src/components/_modals.scss b/src/components/_modals.scss
index 98aae6a..9a5d74c 100644
--- a/src/components/_modals.scss
+++ b/src/components/_modals.scss
@@ -1,79 +1,120 @@
-.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 {
+  .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%;
+    }
   }
 }

From f9c7e027e664db60fbe5f9a88e0fea701574a1c1 Mon Sep 17 00:00:00 2001
From: koester <koester69@gmail.com>
Date: Mon, 8 Jan 2018 14:24:23 +0100
Subject: [PATCH 2/4] updated with new feature and fixed position bug

---
 docs/content/docs/components/modals.md |  48 +++++----
 src/components/_modals.scss            | 130 ++++++++++++++++---------
 2 files changed, 114 insertions(+), 64 deletions(-)

diff --git a/docs/content/docs/components/modals.md b/docs/content/docs/components/modals.md
index 5068545..6c62036 100644
--- a/docs/content/docs/components/modals.md
+++ b/docs/content/docs/components/modals.md
@@ -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>
 ```
diff --git a/src/components/_modals.scss b/src/components/_modals.scss
index 98aae6a..dace867 100644
--- a/src/components/_modals.scss
+++ b/src/components/_modals.scss
@@ -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%;
+    }
   }
 }

From c6a849b646f3dca3c473c227bda351c42d52b5f1 Mon Sep 17 00:00:00 2001
From: koester <koester69@gmail.com>
Date: Mon, 8 Jan 2018 14:31:49 +0100
Subject: [PATCH 3/4] minor fix

---
 src/components/_modals.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/_modals.scss b/src/components/_modals.scss
index dace867..570ff81 100644
--- a/src/components/_modals.scss
+++ b/src/components/_modals.scss
@@ -11,7 +11,7 @@
   z-index: 12;
   flex: 1 1 auto;
   word-wrap: break-word;
-  @include transition(opacity, 130ms);
+  @include transition(opacity);
 
   // modal background
   &-bg {
@@ -83,7 +83,7 @@
     margin-left: 1.25rem;
   }
 
-  label[for],
+  label[for]:not(.modal-bg),
   .paper-btn {
     text-decoration: none;
     background: $white;

From ed69a36c1941d139d87df6980f412a2393cd1fb8 Mon Sep 17 00:00:00 2001
From: koester <koester69@gmail.com>
Date: Mon, 8 Jan 2018 14:52:47 +0100
Subject: [PATCH 4/4] added link to modal-2

---
 docs/content/docs/components/modals.md | 4 ++--
 src/components/_modals.scss            | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/content/docs/components/modals.md b/docs/content/docs/components/modals.md
index 6c62036..34c4f06 100644
--- a/docs/content/docs/components/modals.md
+++ b/docs/content/docs/components/modals.md
@@ -53,7 +53,7 @@ This can be used to implement modals along with features like title, subtitle, t
     <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>
-    <label for="modal-2" class="modal-link">OK</label>
+    <a href="/#download">Get PaperCSS</a>
     <label for="modal-2" class="modal-link">Close</label>
   </div>
 </div>
@@ -72,7 +72,7 @@ This can be used to implement modals along with features like title, subtitle, t
     <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>
-    <label for="modal-2" class="modal-link">OK</label>
+    <a href="/#download">Get PaperCSS</a>
     <label for="modal-2" class="modal-link">Close</label>
   </div>
 </div>
diff --git a/src/components/_modals.scss b/src/components/_modals.scss
index 570ff81..ae88a12 100644
--- a/src/components/_modals.scss
+++ b/src/components/_modals.scss
@@ -83,7 +83,6 @@
     margin-left: 1.25rem;
   }
 
-  label[for]:not(.modal-bg),
   .paper-btn {
     text-decoration: none;
     background: $white;