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-02-20 16:24:07 +09:00
parent cc3f07baab
commit 2bdb7dc22a
1 changed files with 218 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
src/scss/modules/pc/load-view.scss Normal file
View File

@ -0,0 +1,218 @@
@include pc-layout {
#load-view {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
min-width: $min-width; min-height: $min-height;
/**
* frame
*/
.frame {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: $theme-pink;
/*** direction ***/
.direction {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
.left,
.right {
position: absolute;
left: calc(50% - 57.5px);
width: 115px; height: 35px;
div {
float: left;
width: 0; height: 0;
margin-top: 2.5px;
margin-right: 20px;
border-top: solid 15px transparent;
border-bottom: solid 15px transparent;
opacity: 0.1;
}
div:last-child { margin-right: 0; }
&::after { content: ""; display: block; clear: both; }
}
.bottom,
.top {
position: absolute;
top: calc(50% - 57.5px);
width: 35px; height: 115px;
div {
width: 0; height: 0;
margin-left: 2.5px;
margin-bottom: 20px;
border-left: solid 15px transparent;
border-right: solid 15px transparent;
opacity: 0.1;
}
div:last-child { margin-bottom: 0; }
&::after { content: ""; display: block; clear: both; }
}
/** left **/
.left {
top: 6px;
div { border-right: solid 25px #fff; }
}
/** right **/
.right {
bottom: 6px;
div { border-left: solid 25px #fff; }
}
/** bottom **/
.bottom {
left: 6px;
div { border-top: solid 25px #fff; }
}
/** top **/
.top {
right: 6px;
div { border-bottom: solid 25px #fff; }
}
}
/*** square ***/
.square {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
div {
position: absolute;
width: 40px; height: 40px;
border: dashed 3px #fff;
box-sizing: border-box;
border-radius: 5px;
}
div:nth-child(1) { top: 10px; left: 10px; }
div:nth-child(2) { top: 10px; right: 10px; }
div:nth-child(3) { bottom: 10px; left: 10px; }
div:nth-child(4) { bottom: 10px; right: 10px; }
}
/*** line ***/
.line {
position: absolute;
top: 47px; left: 47px;
width: calc(100% - 94px);
height: calc(100% - 94px);
div { position: absolute; box-sizing: border-box; }
div:nth-child(1),
div:nth-child(2) {
width: 100%; height: 1px; left: 0;
border-top: dashed 3px #fff;
}
div:nth-child(3),
div:nth-child(4) {
width: 1px; height: 100%;
border-left: dashed 3px #fff;
}
div:nth-child(1) { top: 0; }
div:nth-child(2) { bottom: 0; }
div:nth-child(3) { left: 0; }
div:nth-child(4) { right: 0; }
}
/*** rect ***/
.rect {
position: absolute;
top: 90px; left: 90px;
width: calc(100% - 180px); height: calc(100% - 180px);
z-index: 1;
/** bar **/
.bar {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
overflow: hidden;
div {
position: absolute;
&::after {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: #fff;
content: "";
display: block;
}
}
div:nth-child(1),
div:nth-child(3) { left: 0; width: 100%; height: 3px; }
div:nth-child(2),
div:nth-child(4) { top: 0; width: 3px; height: 100%; }
div:nth-child(1) {
top: 0;
&::after { transform: translateX(100%); }
}
div:nth-child(2) {
left: 0;
&::after { transform: translateY(-100%); }
}
div:nth-child(3) {
bottom: 0;
&::after { transform: translateX(-100%); }
}
div:nth-child(4) {
right: 0;
&::after { transform: translateY(100%); }
}
}
/** effect **/
.effect {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
div:nth-child(4) {
position: absolute;
top: -23.5px; right: -23.5px;
width: 50px; height: 50px;
background-color: #fff;
border-radius: 50%;
}
div:nth-child(1),
div:nth-child(2),
div:nth-child(3) {
position: absolute;
width: 50px; height: 50px;
border-radius: 50%;
box-sizing: border-box;
border: solid 20px #fff;
opacity: 0;
}
div:nth-child(1) { top: -23.5px; left: -23.5px; }
div:nth-child(2) { bottom: -23.5px; left: -23.5px; }
div:nth-child(3) { bottom: -23.5px; right: -23.5px; }
}
}
&::after {
content: "";
display: block;
position: absolute;
top: 60px; left: 60px;
width: calc(100% - 120px); height: calc(100% - 120px);
background-color: $theme-light-pink;
}
}
}
#load-view[data-state="fin"] {
}
}