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

update: sp用にスタイルを修正

Browse Source
This commit is contained in:
yuki540 2018-04-19 16:28:27 +09:00
parent cc4c00f2f3
commit 52eecf99aa
3 changed files with 17 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/scss/modules/sp/_page-box.scss
View File

@ -1,4 +1,4 @@
@include tablet-layout { @include sp-layout {
.page-box { .page-box {
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
@ -42,9 +42,9 @@
/*** content ***/ /*** content ***/
.page-box__content { .page-box__content {
position: absolute; position: absolute;
top: 20px; left: 20px; top: 8px; left: 8px;
width: calc(100% - 40px); height: calc(100% - 40px); width: calc(100% - 16px); height: calc(100% - 16px);
border: solid 10px $theme-pink; border: solid 5px $theme-pink;
box-sizing: border-box; box-sizing: border-box;
background-color: $theme-bg; background-color: $theme-bg;
border-radius: 15px; border-radius: 15px;
@ -56,7 +56,7 @@
.page-title { .page-title {
position: relative; position: relative;
margin: 50px auto; margin: 50px auto;
width: 500px; height: 45px; width: 280px; height: 40px;
div { div {
position: absolute; position: absolute;
@ -64,18 +64,18 @@
height: 100%; height: 100%;
} }
div:nth-child(1) { width: 100%; background-color: $theme-gray; } div:nth-child(1) { width: 100%; background-color: $theme-gray; }
div:nth-child(2) { width: calc(100% - 15px); background-color: $theme-light-purple; } div:nth-child(2) { width: calc(100% - 10px); background-color: $theme-light-purple; }
div:nth-child(3) { width: calc(100% - 30px); background-color: $theme-light-pink; } div:nth-child(3) { width: calc(100% - 20px); background-color: $theme-light-pink; }
div:nth-child(4) { width: calc(100% - 45px); background-color: $theme-pink; } div:nth-child(4) { width: calc(100% - 30px); background-color: $theme-pink; }
h2 { h2 {
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
width: 100%; height: 45px; width: 100%; height: 40px;
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 45px; line-height: 40px;
} }
} }
} }
@ -84,7 +84,7 @@
.page-box__close-btn { .page-box__close-btn {
position: absolute; position: absolute;
top: 5px; right: 5px; top: 5px; right: 5px;
width: 100px; height: 100px; width: 50px; height: 50px;
display: block; display: block;
transform: translate(calc(100% + 20px), calc(-100% + -20px)); transform: translate(calc(100% + 20px), calc(-100% + -20px));
z-index: 5; z-index: 5;
@ -108,8 +108,8 @@
&::after { &::after {
content: ""; display: block; content: ""; display: block;
position: absolute; position: absolute;
top: 49px; left: 20px; top: 24px; left: 10px;
width: 60px; height: 1px; width: 30px; height: 1px;
border-top: dashed 2px $theme-purple; border-top: dashed 2px $theme-purple;
box-sizing: border-box; box-sizing: border-box;
opacity: 0.7; opacity: 0.7;

9
src/scss/modules/sp/_profile.scss
View File

@ -1,11 +1,8 @@
@include tablet-layout { @include sp-layout {
.profile-page {} .profile-page {}
/*** body ***/ /*** body ***/
.profile-page__body { .profile-page__body {
width: 600px;
margin: 0 auto;
.icon { .icon {
position: relative; position: relative;
width: 150px; height: 150px; width: 150px; height: 150px;
@ -58,14 +55,14 @@
.info-li { .info-li {
position: relative; position: relative;
width: 400px; width: 80%;
padding: 0 10px; padding: 0 10px;
margin: 0 auto; margin: 0 auto;
margin-bottom: 15px; margin-bottom: 15px;
border-bottom: solid 1px $theme-light-pink; border-bottom: solid 1px $theme-light-pink;
span { span {
font-size: 14px; font-size: 10px;
color: $theme-light-purple; color: $theme-light-purple;
margin-right: 5px; margin-right: 5px;
} }

2
src/scss/modules/sp/_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;