From 480815723ff0c9c35d3eebff9b95a1860da77255 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Thu, 19 Apr 2018 14:01:48 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E9=96=89=E3=81=98=E3=82=8B=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=81=A8=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=9C?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=E3=82=B9=E3=81=AB=E3=82=B9=E3=82=BF=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/keyframes/pc/_page-box.scss |  22 +++++
 src/scss/modules/pc/_page-box.scss   | 138 +++++++++++++++++++++++++++
 src/scss/modules/pc/_top-page.scss   |   2 +-
 3 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 src/scss/keyframes/pc/_page-box.scss
 create mode 100644 src/scss/modules/pc/_page-box.scss

diff --git a/src/scss/keyframes/pc/_page-box.scss b/src/scss/keyframes/pc/_page-box.scss
new file mode 100644
index 0000000..297ea44
--- /dev/null
+++ b/src/scss/keyframes/pc/_page-box.scss
@@ -0,0 +1,22 @@
+@keyframes page-box__show {
+  from { transform: rotate(90deg); }
+  to   { transform: rotate(0deg); }
+}
+@keyframes page-box__hidden {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(-90deg); }
+}
+
+@keyframes page-box__show-close-btn {
+  from { transform: translate(calc(100% + 20px), calc(-100% + -20px)); }
+  to   { transform: translate(0, 0); }
+}
+@keyframes page-box__rotate-close-btn {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(15deg); }
+}
+
+@keyframes page-box__show-content {
+  from { transform: scale(0.9); opacity: 0; }
+  to   { transform: scale(1); opacity: 1; }
+}
diff --git a/src/scss/modules/pc/_page-box.scss b/src/scss/modules/pc/_page-box.scss
new file mode 100644
index 0000000..b4d211d
--- /dev/null
+++ b/src/scss/modules/pc/_page-box.scss
@@ -0,0 +1,138 @@
+@include pc-layout {
+  .page-box {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-pink;
+    transform-origin: right top;
+    transform: rotate(90deg);
+    z-index: 1002;
+  }
+
+  /*** bg ***/
+  .page-box__bg {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    div {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      transform-origin: right top;
+      transform: rotate(90deg);
+    }
+    div:nth-child(1) {
+      background-color: $theme-light-pink;
+    }
+    div:nth-child(2) {
+      background-color: $theme-bg;
+      
+      &::after {
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        background-size: 15px;
+        background-image: url(../images/bg.png);
+        opacity: 0.4;
+      }
+    }
+  }
+
+  /*** content ***/
+  .page-box__content {
+    position: absolute;
+    top: 40px; left: 40px;
+    width: calc(100% - 80px); height: calc(100% - 80px);
+    border: solid 10px $theme-pink;
+    box-sizing: border-box;
+    background-color: $theme-bg;
+    border-radius: 15px;
+    box-shadow: 0 0 15px rgba(0,0,0,0.6) inset;
+    overflow: auto;
+    opacity: 0;
+    transition: all 0.35s ease 0s;
+  }
+
+  /*** close-btn ***/
+  .page-box__close-btn {
+    position: absolute;
+    top: 10px; right: 10px;
+    width: 100px; height: 100px;
+    display: block;
+    transform: translate(calc(100% + 20px), calc(-100% + -20px));
+    z-index: 5;
+
+    section {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      box-shadow: 0 0 5px rgba(0,0,0,0.4);
+      border-radius: 3px;
+      transition: all 0.35s ease 0s;
+    }
+    section:nth-child(1) {
+      background-color: $theme-pink;
+      transform: rotate(0deg);
+    }
+    section:nth-child(2) {
+      background-color: $theme-bg;
+
+      &::before,
+      &::after {
+        content: ""; display: block;
+        position: absolute;
+        top: 49px; left: 20px;
+        width: 60px; height: 1px;
+        border-top: dashed 2px $theme-purple;
+        box-sizing: border-box;
+        opacity: 0.7;
+      }
+      &::before { transform: rotate(45deg); }
+      &::after  { transform: rotate(-45deg); }
+    }
+  }
+  .page-box__close-btn:hover {
+    section:nth-child(1) { background-color: $theme-purple; }
+    section:nth-child(2) { background-color: #eee; }
+  }
+  .page-box__close-btn:hover ~ .page-box__content { border-color: $theme-purple; }
+
+  .page-box[data-state="true"] {
+    animation: page-box__show 0.35s ease 0s forwards;
+    
+    /*** bg ***/
+    .page-box__bg {
+      div:nth-child(1) { animation: page-box__show 0.35s ease 0.1s forwards; }
+      div:nth-child(2) { animation: page-box__show 0.35s ease 0.2s forwards; }
+    }
+
+    /*** content ***/
+    .page-box__content {
+      animation: page-box__show-content 0.6s ease 0.55s forwards;
+    }
+
+    /*** close-btn ***/
+    .page-box__close-btn {
+      animation: page-box__show-close-btn 0.6s ease 0.9s forwards;
+      section:nth-child(1) { animation: page-box__rotate-close-btn 0.6s ease 0.9s forwards; }
+    }
+  }
+  
+  .page-box[data-state="false"] {
+    transform: rotate(0deg);
+    animation: page-box__hidden 0.35s ease-in-out 0.2s forwards;
+    
+    /*** bg ***/
+    .page-box__bg {
+      div { transform: rotate(0deg); }
+      div:nth-child(1) { animation: page-box__hidden 0.35s ease-in-out 0.1s forwards; }
+      div:nth-child(2) { animation: page-box__hidden 0.35s ease-in-out 0s forwards; }
+    }
+    
+    /*** content ***/
+    .page-box__content,
+    .page-box__close-btn {
+      animation: fadeout 0.2s ease 0s forwards;
+    }
+  }
+}
diff --git a/src/scss/modules/pc/_top-page.scss b/src/scss/modules/pc/_top-page.scss
index a9d7e68..37b2146 100644
--- a/src/scss/modules/pc/_top-page.scss
+++ b/src/scss/modules/pc/_top-page.scss
@@ -5,7 +5,7 @@
     width: 100%; height: 100%;
     background-color: $theme-bg;
     overflow: hidden;
-    z-index: 996;
+    z-index: 1001;
 
     &::after {
       content: ""; display: block;