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

update: タブレット用にスタイルシートを修正

Browse Source
This commit is contained in:
yuki540 2018-04-19 16:11:01 +09:00
parent 70d5742a38
commit b2cb8a3afb
4 changed files with 8 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/scss/keyframes/tablet/_page-box.scss
View File

@ -1,22 +0,0 @@
@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; }
}

10
src/scss/modules/tablet/_page-box.scss
View File

@ -1,4 +1,4 @@
@include pc-layout { @include tablet-layout {
.page-box { .page-box {
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
@ -42,8 +42,8 @@
/*** content ***/ /*** content ***/
.page-box__content { .page-box__content {
position: absolute; position: absolute;
top: 40px; left: 40px; top: 20px; left: 20px;
width: calc(100% - 80px); height: calc(100% - 80px); width: calc(100% - 40px); height: calc(100% - 40px);
border: solid 10px $theme-pink; border: solid 10px $theme-pink;
box-sizing: border-box; box-sizing: border-box;
background-color: $theme-bg; background-color: $theme-bg;
@ -56,7 +56,7 @@
.page-title { .page-title {
position: relative; position: relative;
margin: 50px auto; margin: 50px auto;
width: 600px; height: 45px; width: 500px; height: 45px;
div { div {
position: absolute; position: absolute;
@ -83,7 +83,7 @@
/*** close-btn ***/ /*** close-btn ***/
.page-box__close-btn { .page-box__close-btn {
position: absolute; position: absolute;
top: 10px; right: 10px; top: 5px; right: 5px;
width: 100px; height: 100px; width: 100px; height: 100px;
display: block; display: block;
transform: translate(calc(100% + 20px), calc(-100% + -20px)); transform: translate(calc(100% + 20px), calc(-100% + -20px));

4
src/scss/modules/tablet/_profile.scss
View File

@ -1,4 +1,4 @@
@include pc-layout { @include tablet-layout {
.profile-page {} .profile-page {}
/*** body ***/ /*** body ***/
@ -65,7 +65,7 @@
border-bottom: solid 1px $theme-light-pink; border-bottom: solid 1px $theme-light-pink;
span { span {
font-size: 12px; font-size: 14px;
color: $theme-light-purple; color: $theme-light-purple;
margin-right: 5px; margin-right: 5px;
} }

2
src/scss/modules/tablet/_top-page.scss
View File

@ -5,7 +5,7 @@
width: 100%; height: 100%; width: 100%; height: 100%;
background-color: $theme-bg; background-color: $theme-bg;
overflow: hidden; overflow: hidden;
z-index: 996; z-index: 1001;
&::after { &::after {
content: ""; display: block; content: ""; display: block;