mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-31 09:41:47 +02:00
Code Issues Releases Wiki Activity

👍 バルーンを追加

Browse Source
This commit is contained in:
BcRikko
2018-09-29 09:51:09 +09:00
parent a8ed29a414
commit 590494a983
7 changed files with 176 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/elements/_index.scss
View File

@@ -6,3 +6,4 @@
@import "container.scss";
@import "checkbox.scss";
@import "description.scss";
@import "balloon.scss";

94
scss/elements/balloon.scss Normal file
View File

@@ -0,0 +1,94 @@
.balloon {
position: relative;
display: inline-block;
padding: 1rem;
margin-bottom: 26px;
// prettier-ignore
box-shadow:
0 -4px $background-color,
0 -8px $black,
4px 0 $background-color,
4px -4px $black,
8px 0 $black,
0 4px $background-color,
0 8px $black,
-4px 0 $background-color,
-4px 4px $black,
-8px 0 $black,
-4px -4px $black,
4px 4px $black;
&::before,
&::after {
position: absolute;
display: block;
content: "";
}
&.-right {
&::before,
&::after {
right: 2rem;
}
&::before {
bottom: -14px;
width: 26px;
height: 10px;
background-color: $background-color;
border-right: 4px solid $black;
border-left: 4px solid $black;
}
&::after {
bottom: -18px;
width: 18px;
height: 3px;
margin-left: 8px;
background-color: $background-color;
// prettier-ignore
box-shadow:
-4px 0 $black,
4px 0 $black,
4px 4px $background-color,
0 4px $black,
8px 4px $black,
4px 8px $black,
8px 8px $black;
}
}
&.-left {
&::before,
&::after {
left: 2rem;
}
&::before {
bottom: -14px;
width: 26px;
height: 10px;
background-color: $background-color;
border-right: 4px solid $black;
border-left: 4px solid $black;
}
&::after {
bottom: -18px;
width: 18px;
height: 3px;
margin-right: 8px;
background-color: $background-color;
// prettier-ignore
box-shadow:
-4px 0 $black,
4px 0 $black,
-4px 4px $background-color,
0 4px $black,
-8px 4px $black,
-4px 8px $black,
-8px 8px $black;
}
}
}