From cabe6f9423457db09f5cc67a70f51bbeb6ef6eac Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Fri, 20 Apr 2018 11:56:04 +0900
Subject: [PATCH] =?UTF-8?q?add:=20=E3=82=B9=E3=82=AD=E3=83=83=E3=83=97?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E3=82=B9=E3=82=BF=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=82=B7=E3=83=BC=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/modules/_skip-button.scss | 71 ++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/scss/modules/_skip-button.scss

diff --git a/src/scss/modules/_skip-button.scss b/src/scss/modules/_skip-button.scss
new file mode 100644
index 0000000..cf8b5cc
--- /dev/null
+++ b/src/scss/modules/_skip-button.scss
@@ -0,0 +1,71 @@
+@include pc-layout {
+  #skip-button {
+    position: absolute;
+    bottom: 50px; right: 0;
+    width: 160px; height: 60px;
+    background-color: $theme-mint;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    font-size: 30px;
+    color: $theme-purple;
+    text-align: center;
+    line-height: 60px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.6);
+    transform: translateX(100%);
+    transition: all 0.3s ease 0s;
+    border: none;
+    cursor: pointer;
+    z-index: 1001;
+  }
+}
+@include tablet-layout {
+  #skip-button {
+    position: absolute;
+    bottom: 50px; right: 0;
+    width: 160px; height: 60px;
+    background-color: $theme-mint;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    font-size: 30px;
+    color: $theme-purple;
+    text-align: center;
+    line-height: 60px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.6);
+    transform: translateX(100%);
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
+    z-index: 1001;
+  }
+}
+@include sp-layout {
+  #skip-button {
+    position: absolute;
+    bottom: 50px; right: 0;
+    width: 100px; height: 45px;
+    background-color: $theme-mint;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    font-size: 20px;
+    color: $theme-purple;
+    text-align: center;
+    line-height: 45px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.6);
+    transform: translateX(100%);
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
+    z-index: 1001;
+  }
+}
+
+#skip-button:hover {
+  color: #fff;
+  background-color: $theme-pink;
+}
+
+#skip-button[data-state="true"] {
+  transform: translateX(0%);
+}
+
+#skip-button[data-state="false"] {
+  transform: translateX(100%);
+}