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-02-23 11:56:43 +09:00
parent a8294346ee
commit c567501392
1 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/scss/modules/pc/load-view.scss
View File

@ -680,6 +680,59 @@
.arrow:nth-child(2) { div { width: 360px; } }
}
}
/**
* ribbons
*/
.ribbons {
position: absolute;
top: 80px; left: 80px;
width: calc(100% - 160px); height: calc(100% - 160px);
z-index: 5;
.ribbon {
position: absolute;
div {
position: absolute;
overflow: hidden;
&::after {
content: ""; display: block; position: absolute;
width: 100%; height: 100%; top: 0; left: 0;
}
}
div:nth-child(1),
div:nth-child(3) { left: 0; width: 100%; height: 8px; }
div:nth-child(2),
div:nth-child(4) { top: 0; width: 8px; 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%); }
}
}
.ribbon:nth-child(1) {
top: 0; left: 0;
width: calc(100% - 20px); height: calc(100% - 20px);
div { &::after { background-color: $theme-light-purple; } }
}
.ribbon:nth-child(2) {
bottom: 0px; right: 0px;
width: calc(100% - 20px); height: calc(100% - 20px);
div { &::after { background-color: #C27F91; } }
}
}
}
#load-view[data-state="fin"] {