From e63a6cbbacc6a4c0143aee68fc2be17e591349a4 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Sun, 15 Apr 2018 14:41:56 +0900
Subject: [PATCH] =?UTF-8?q?add:=20calling=E3=81=AE=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E3=81=AB=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E9=81=A9?=
 =?UTF-8?q?=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/keyframes/pc/_calling.scss |  0
 src/scss/modules/pc/_calling.scss   | 55 +++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/scss/keyframes/pc/_calling.scss
 create mode 100644 src/scss/modules/pc/_calling.scss

diff --git a/src/scss/keyframes/pc/_calling.scss b/src/scss/keyframes/pc/_calling.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss
new file mode 100644
index 0000000..8b04d16
--- /dev/null
+++ b/src/scss/modules/pc/_calling.scss
@@ -0,0 +1,55 @@
+@include pc-layout {
+  .calling {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    min-width: $min-width; min-height: $min-height;
+    background-color: $theme-purple;
+    z-index: 1001;
+  }
+
+  /*** bg ***/
+  .calling__bg {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    div {
+      position: relative;
+      float: left;
+      width: 25%; height: 25%;
+      overflow: hidden;
+
+      &::after {
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        background-color: #333;
+        transform: translateX(-100%);
+      }
+    }
+
+    &::after { content: ""; display: block; clear: both; }
+  }
+
+  .calling[data-state="start"] {
+    /*** bg ***/
+    .calling__bg {
+      div:nth-child(1):after,
+      div:nth-child(2):after,
+      div:nth-child(3):after,
+      div:nth-child(4):after { animation: slide-right 0.4s ease 0s forwards; }
+      div:nth-child(5):after,
+      div:nth-child(6):after,
+      div:nth-child(7):after,
+      div:nth-child(8):after { animation: slide-right 0.4s ease 0.1s forwards; }
+      div:nth-child(9):after,
+      div:nth-child(10):after,
+      div:nth-child(11):after,
+      div:nth-child(12):after { animation: slide-right 0.4s ease 0.2s forwards; }
+      div:nth-child(13):after,
+      div:nth-child(14):after,
+      div:nth-child(15):after,
+      div:nth-child(16):after { animation: slide-right 0.4s ease 0.3s forwards; }
+    }
+  }
+}