MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: スキップボタンのスタイルシートを追加

Browse Source
This commit is contained in:
yuki540 2018-04-20 11:56:04 +09:00
parent 02b5057247
commit cabe6f9423
1 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/scss/modules/_skip-button.scss Normal file
View File

@ -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%);
}