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

feat(component-balloons): Dark Mode - Balloons

Browse Source 
Implementation so balloons can now have `is-dark`

re #345
This commit is contained in:
Kaylum Lally
2019-10-11 19:24:29 +01:00
parent 77877e2886
commit 18e6c476fc
2 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
scss/elements/balloons.scss
View File

@@ -1,3 +1,27 @@
@mixin box-shadow($color, $fromLeft: true) {
@if $fromLeft {
// prettier-ignore
box-shadow:
-4px 0,
4px 0,
-4px 4px $color,
0 4px,
-8px 4px,
-4px 8px,
-8px 8px;
} @else {
// prettier-ignore
box-shadow:
-4px 0,
4px 0,
4px 4px $color,
0 4px,
8px 4px,
4px 8px,
8px 8px;
}
}
.nes-balloon {
@include rounded-corners();
@@ -18,6 +42,45 @@
content: "";
}
&.is-dark {
@include rounded-corners(true);
background: $base-color;
color: $background-color;
border-image-outset: 2;
box-shadow: 0px 0px 0 8px $base-color;
&.from-left,
&.from-right {
&::before {
background-color: $base-color;
border-color: $background-color;
}
&::after {
color: $background-color;
background-color: $base-color;
}
}
&.from-left {
&::before {
box-shadow: -5px 10px 0 6px $base-color;
}
&::after {
@include box-shadow($base-color);
}
}
&.from-right {
&::before {
box-shadow: 5px 10px 0 6px $base-color;
}
&::after {
@include box-shadow($base-color, false);
}
}
}
&.from-left {
&::before,
&::after {
@@ -40,15 +103,7 @@
margin-right: 8px;
color: $base-color;
background-color: $background-color;
// prettier-ignore
box-shadow:
-4px 0,
4px 0,
-4px 4px $background-color,
0 4px,
-8px 4px,
-4px 8px,
-8px 8px;
@include box-shadow($background-color);
}
}
@@ -73,15 +128,7 @@
height: 4px;
margin-left: 8px;
background-color: $background-color;
// prettier-ignore
box-shadow:
-4px 0,
4px 0,
4px 4px $background-color,
0 4px,
8px 4px,
4px 8px,
8px 8px;
@include box-shadow($background-color, false);
}
}
}