mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-31 09:41:47 +02:00
👍 バルーンを追加
This commit is contained in:
@@ -6,3 +6,4 @@
|
||||
@import "container.scss";
|
||||
@import "checkbox.scss";
|
||||
@import "description.scss";
|
||||
@import "balloon.scss";
|
||||
|
94
scss/elements/balloon.scss
Normal file
94
scss/elements/balloon.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user