|
// ## setup |
|
$timer: 400s; |
|
|
|
$none: rgba(#fff, 0); |
|
$light: #fcf6a5; |
|
$sun: #ff7700; |
|
$base: #bc2f2f; |
|
$shadow: #4f010e; |
|
$smoke: #252529; |
|
$smoke2: #6f6f7a; |
|
$sky: #608b88; |
|
$stone: #a19372; |
|
$tre1: #683f44; |
|
$tre2: #20112a; |
|
|
|
.house.row3:checked, |
|
.shed.row3:checked { |
|
& ~ div { |
|
filter: hue-rotate(-20deg); |
|
} |
|
} |
|
|
|
.house.row2:checked, |
|
.shed.row2:checked { |
|
& ~ div { |
|
filter: hue-rotate(-35deg); |
|
} |
|
} |
|
|
|
.house.row1:checked, |
|
.shed.row1:checked { |
|
& ~ div { |
|
filter: hue-rotate(-50deg); |
|
} |
|
} |
|
|
|
$r1: adjust-hue($base, random(50) + 5); |
|
$r15: adjust-hue($base, random(50) + 10); |
|
$r2: adjust-hue($base, random(50) - 30); |
|
$r3: darken($r2, 20%); |
|
$r4: adjust-hue($base, random(50) + 50); |
|
$r41: adjust-hue($base, random(50) + 51); |
|
$r42: adjust-hue($base, random(50) + 49); |
|
$r43: darken($r42, 10%); |
|
$shadow: rgba($shadow, 0.75); |
|
$ls: rgba($shadow, 0.3); |
|
$ds: rgba($shadow, 0.9); |
|
$dark: darken($r2, 20%); |
|
$background: lighten($base, 42%); |
|
$b1: lighten($base, 4%); |
|
$b2: lighten($r1, 4%); |
|
$b3: lighten($r2, 4%); |
|
$s1: lighten($stone, 4%); |
|
$sd: darken($stone, 10%); |
|
|
|
$tre3: lighten($tre1, 10%); |
|
$vls: rgba($tre1, 0.1); |
|
|
|
html { |
|
font-size: 0.97vh; |
|
width: 100%; |
|
height: 100%; |
|
background: $background; |
|
overflow: hidden; |
|
} |
|
|
|
body { |
|
margin: 0; |
|
overflow: hidden; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient(rgba($sky, 0.5), rgba(#fff, 0.75), $none); |
|
box-shadow: inset 0 0 5rem 0 $smoke; |
|
|
|
&, |
|
*, |
|
*:before, |
|
*:after { |
|
display: block; |
|
top: 0; |
|
left: 0; |
|
box-sizing: border-box; |
|
position: absolute; |
|
content: ""; |
|
} |
|
} |
|
|
|
div, |
|
house, |
|
shed, |
|
hbtn, |
|
sbtn { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
margin: auto; |
|
width: 50rem; |
|
height: 50rem; |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-content: flex-start; |
|
|
|
label { |
|
width: calc(50rem / 4); |
|
height: calc(50rem / 4); |
|
position: relative; |
|
border: none; |
|
background: none; |
|
padding: 0; |
|
margin: 0; |
|
display: inline; |
|
cursor: pointer; |
|
box-shadow: 0 0 0 2rem $none; |
|
|
|
*, |
|
*:before, |
|
*:after { |
|
transform: translate3d(0, 0, 0); |
|
z-index: 1; |
|
left: 0; |
|
top: 0; |
|
background: none; |
|
border: none; |
|
box-shadow: none; |
|
pointer-events: none; |
|
} |
|
|
|
& > i:nth-of-type(1) { |
|
&:before, |
|
&:after { |
|
filter: blur(0.5rem); |
|
border: 1rem solid rgba($smoke2, 0.75); |
|
width: 5rem; |
|
height: 5rem; |
|
background: $smoke2; |
|
opacity: 0; |
|
border-radius: 50%; |
|
box-shadow: 2rem -1.5rem 0 1rem rgba($smoke2, 0.75), |
|
// |
|
3rem -2rem 0 1.5rem rgba($smoke2, 0.5); |
|
} |
|
} |
|
} |
|
} |
|
|
|
colour { |
|
width: 100%; |
|
height: 100%; |
|
|
|
input, |
|
br { |
|
position: relative; |
|
display: inline-block; |
|
opacity: 0.2; |
|
top: 1rem; |
|
left: 1rem; |
|
transform: scale(0.75); |
|
margin: -0.2rem; |
|
|
|
@media (max-width: 900px) { |
|
display: none; |
|
} |
|
} |
|
|
|
input:checked { |
|
opacity: 1; |
|
} |
|
|
|
br { |
|
display: block; |
|
} |
|
} |
|
|
|
input { |
|
display: none; |
|
} |
|
|
|
div.main { |
|
-webkit-box-reflect: below 4rem; |
|
} |
|
|
|
div.ss { |
|
pointer-events: none; |
|
} |
|
|
|
sbtn { |
|
height: calc(50rem - (50rem / 4)); |
|
bottom: auto; |
|
|
|
label { |
|
border: solid 1px rgba(#747474, 0.1); |
|
|
|
&:nth-of-type(1) { |
|
border-radius: 3rem 0 0 0; |
|
} |
|
|
|
&:nth-of-type(4) { |
|
border-radius: 0 3rem 0 0; |
|
} |
|
|
|
&:hover { |
|
border-color: #555; |
|
} |
|
} |
|
} |
|
|
|
hbtn label:nth-of-type(n + 12) { |
|
border: solid 1px rgba(#747474, 0.1); |
|
|
|
&:hover { |
|
border-color: #555; |
|
} |
|
} |
|
|
|
@keyframes smoke { |
|
0% { |
|
transform: scale(0.2) translate3d(0, 0, 0) rotate(-15deg); |
|
opacity: 0.075; |
|
} |
|
|
|
50% { |
|
transform: scale(1) translate3d(2rem, -4rem, 0) rotate(0); |
|
opacity: 0.15; |
|
} |
|
|
|
100% { |
|
transform: scale(2) translate3d(5rem, -5rem, 0) rotate(10deg); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
//pretty |
|
island { |
|
position: absolute; |
|
top: 76rem; |
|
top: 49.25rem; |
|
left: -50%; |
|
right: -50%; |
|
margin: auto; |
|
width: 80rem; |
|
height: 5rem; |
|
background: $r42; |
|
border-radius: 55% 55% 45% 45%; |
|
} |
|
|
|
grass { |
|
position: absolute; |
|
z-index: 500; |
|
top: 76rem; |
|
top: 49.25rem; |
|
left: -50%; |
|
right: -50%; |
|
margin: auto; |
|
width: 80rem; |
|
height: 5rem; |
|
-webkit-box-reflect: below -5rem; |
|
transform: skewX(0); |
|
|
|
&:after, |
|
&:before { |
|
top: 0.75rem; |
|
left: 0.6rem; |
|
z-index: 100; |
|
width: 0.5rem; |
|
height: 1.75rem; |
|
transform: skewY(60deg); |
|
background: $r42; |
|
box-shadow: 1rem -1.6rem 0 $r42, |
|
// |
|
2.1rem -3.6rem 0 $r42, |
|
// |
|
2.9rem -4.8rem 0 $r42, |
|
// |
|
4rem -7rem 0 $r42; |
|
filter: drop-shadow(5rem -8.3rem 0 $r42) // |
|
drop-shadow(10rem -17.3rem 0 $r42) // |
|
drop-shadow(20rem -34.5rem 0 $r42) // |
|
drop-shadow(40rem -69rem 0 $r42); |
|
} |
|
|
|
&:before { |
|
transform: skewY(-60deg); |
|
box-shadow: 1rem 1.6rem 0 $r42, |
|
// |
|
2.1rem 3.6rem 0 $r42, |
|
// |
|
2.9rem 4.8rem 0 $r42, |
|
// |
|
4rem 7rem 0 $r42; |
|
filter: drop-shadow(5rem 8.3rem 0 $r42) // |
|
drop-shadow(10rem 17.3rem 0 $r42) // |
|
drop-shadow(20rem 34.5rem 0 $r42) // |
|
drop-shadow(40rem 69rem 0 $r42); |
|
left: 0; |
|
top: 1.5rem; |
|
} |
|
} |
|
|
|
@keyframes grass { |
|
100% { |
|
transform: skewX(5deg); |
|
} |
|
} |
|
|
|
input:focus ~ div > div { |
|
animation: thud 0.1s linear; |
|
} |
|
|
|
@keyframes thud { |
|
0% { |
|
transform: translate3d(0, 1rem, 0); |
|
} |
|
|
|
60% { |
|
transform: translate3d(0, -0.5rem, 0); |
|
} |
|
|
|
80% { |
|
transform: translate3d(0, 0.25rem, 0); |
|
} |
|
} |
|
|
|
sig { |
|
z-index: 500; |
|
opacity: 0.2; |
|
|
|
&, |
|
* { |
|
height: 9.25em; |
|
overflow: hidden; |
|
border-radius: 0.5em; |
|
} |
|
|
|
font-size: 0.5rem; |
|
color: #000; |
|
width: 10em; |
|
top: auto; |
|
left: auto; |
|
bottom: 1em; |
|
right: 1em; |
|
transform: skewX(10deg) scaleY(0.45) rotate(2deg); |
|
|
|
&:before, |
|
*:before { |
|
width: 5em; |
|
height: 5em; |
|
background: currentColor; |
|
transform: translate3d(-2.5em, 0, 0) rotate(-45deg); |
|
box-shadow: -3em 3em 0 0 currentColor; |
|
border-radius: 0.5em 2em 0.5em 2em; |
|
} |
|
|
|
* { |
|
width: 5em; |
|
transform: translate3d(3.75em, 0, 0) scaleY(0.95); |
|
display: block !important; |
|
|
|
&:before { |
|
transform: translate3d(-3em, -2em, 0) rotate(-45deg); |
|
box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor; |
|
border-radius: 0.5em; |
|
} |
|
} |
|
} |
|
|
|
text { |
|
width: 95%; |
|
max-width: 70rem; |
|
bottom: 25%; |
|
color: lighten($r1, 30%); |
|
right: 0; |
|
margin: auto; |
|
height: 1rem; |
|
font-size: 2.5rem; |
|
text-align: center; |
|
font-family: Telefon, Sans-Serif; |
|
z-index: -1; |
|
transform: scale(0); |
|
font-weight: 100; |
|
letter-spacing: 0.1rem; |
|
opacity: 0; |
|
|
|
welldone, |
|
gameover { |
|
box-shadow: 0 0 5rem $sun, inset 0 0 0 0.5rem #fff; |
|
background: rgba($tre2, 0.95); |
|
padding: 5rem; |
|
border-radius: 5rem; |
|
border: 1rem solid $tre2; |
|
} |
|
|
|
welldone { |
|
display: none; |
|
} |
|
|
|
& * { |
|
position: static; |
|
} |
|
|
|
p:nth-of-type(1) { |
|
font-size: 4rem; |
|
} |
|
|
|
p:nth-of-type(odd) { |
|
color: $r2; |
|
} |
|
|
|
label { |
|
position: absolute; |
|
left: auto; |
|
right: 3rem; |
|
top: 3rem; |
|
color: $r2; |
|
padding: 2rem; |
|
border-radius: 2rem; |
|
box-shadow: 0 0 1rem $none; |
|
cursor: pointer; |
|
transition: box-shadow 0.25s ease-in-out; |
|
box-sizing: border-box; |
|
line-height: 1; |
|
|
|
&:hover, |
|
&:focus { |
|
box-shadow: 0 0 0.15rem #fff; |
|
} |
|
} |
|
|
|
a { |
|
padding: 0.5rem 1rem; |
|
border-radius: 1rem; |
|
text-decoration: none; |
|
background: $r2; |
|
color: $tre2; |
|
box-shadow: 0 0 0 1rem $none, inset 0 0 0 0 rgba(#fff, 0.2); |
|
transition: all 0.2s ease-in-out; |
|
|
|
&:hover, |
|
&:focus { |
|
box-shadow: 0 0 0 0 rgba(#fff, 0.2), inset 0 0 0 3rem rgba(#fff, 0.2); |
|
} |
|
} |
|
} |
|
|
|
#done:checked ~ text { |
|
transform: scale(0) !important; |
|
transition: all 0.5s ease-in-out; |
|
opacity: 0; |
|
} |
|
// ## sun |
|
colour > *:not(.lh):not(text) { |
|
filter: hue-rotate(0deg) brightness(100%); |
|
animation: set $timer linear infinite; |
|
} |
|
|
|
@media screen and (max-device-width: 480px) { |
|
colour > *:not(.lh):not(text) { |
|
animation: none; |
|
} |
|
} |
|
|
|
@keyframes set { |
|
15%, |
|
85% { |
|
filter: hue-rotate(0deg) brightness(100%); |
|
} |
|
|
|
30%, |
|
70% { |
|
filter: hue-rotate(-20deg) brightness(10%); |
|
} |
|
|
|
40%, |
|
60% { |
|
filter: hue-rotate(-40deg) brightness(50%); |
|
} |
|
} |
|
|
|
@function stars($a) { |
|
$random2: #f9b9c8; |
|
$value: "#{random(100 + 100)}vmin #{random(60)}vmin 0 -.#{random(2)}rem "+$random2; |
|
|
|
@for $i from 2 through $a { |
|
$random2: adjust-hue(#8beffc, random(360)); |
|
$value: "#{$value} , #{random(100 + 100)}vmin #{random(60)}vmin 0 -.#{random(2)}rem "+$random2; |
|
} |
|
|
|
@return unquote($value); |
|
} |
|
|
|
$stars: stars(50); |
|
|
|
stars { |
|
width: 220rem; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
margin: auto; |
|
animation: stars $timer linear infinite; |
|
-webkit-box-reflect: below -50rem; |
|
opacity: 0; |
|
z-index: 0; |
|
|
|
&:before { |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
box-shadow: $stars; |
|
border-radius: 50%; |
|
content: ""; |
|
position: absolute; |
|
top: 5rem; |
|
left: 5rem; |
|
} |
|
|
|
i { |
|
&:before, |
|
&:after { |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
top: 40rem; |
|
left: 40rem; |
|
background: #fff; |
|
border-radius: 50%; |
|
animation: stars 1s linear infinite; |
|
opacity: 0.5; |
|
box-shadow: 0 0 1rem #fff; |
|
} |
|
|
|
&:after { |
|
top: 20rem; |
|
left: 180rem; |
|
animation: stars 1s 0.5s linear infinite; |
|
background: #f9b9c8; |
|
} |
|
} |
|
} |
|
|
|
sky { |
|
width: 100%; |
|
height: 78.5rem; |
|
overflow: hidden; |
|
-webkit-box-reflect: below 0; |
|
z-index: 0; |
|
|
|
&:before, |
|
&:after { |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient(#323248 10%, #fbd447, #d8480f); |
|
opacity: 0; |
|
animation: sky $timer linear infinite; |
|
} |
|
|
|
&:after { |
|
background: linear-gradient(#19043f, #1a0f6c); |
|
} |
|
} |
|
|
|
time { |
|
pointer-events: none; |
|
|
|
&, |
|
sun { |
|
width: 170rem; |
|
height: 170rem; |
|
left: -100%; |
|
right: -100%; |
|
top: -100%; |
|
bottom: -170%; |
|
margin: auto; |
|
} |
|
|
|
& sun { |
|
bottom: -100%; |
|
transform: rotate(0deg); |
|
z-index: 1; |
|
animation: sun $timer linear infinite; |
|
filter: blur(1rem) brightness(400%); |
|
|
|
&:before { |
|
width: 25rem; |
|
height: 25rem; |
|
border-radius: 50%; |
|
background: radial-gradient($r1, $base); |
|
right: 0; |
|
margin: auto; |
|
transform: rotate(0deg); |
|
} |
|
//moon |
|
&:after { |
|
width: 10rem; |
|
height: 10rem; |
|
border-radius: 50%; |
|
box-shadow: inset 0 2rem 0 #5a4e38; |
|
background: rgba(#000, 0.1); |
|
left: 60%; |
|
top: auto; |
|
bottom: 0; |
|
transform: rotate(0deg); |
|
z-index: 1; |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 500px) { |
|
time, |
|
input { |
|
display: none; |
|
} |
|
} |
|
|
|
div.ss lens { |
|
top: 20rem; |
|
left: 70rem; |
|
animation: lensflair $timer linear infinite; |
|
width: 60rem; |
|
height: 60rem; |
|
filter: brightness(150%); |
|
transform: rotate(0); |
|
opacity: 0; |
|
|
|
&:before { |
|
width: 60rem; |
|
height: 60rem; |
|
border-radius: 50%; |
|
top: 0; |
|
right: -50%; |
|
left: -50%; |
|
margin: auto; |
|
box-shadow: 0 70rem 0 -20rem yellow, |
|
// |
|
0 50rem 0 -25rem yellow, |
|
// |
|
0 100rem 0 5rem #f437c5, |
|
// |
|
inset 0 0 3rem $sun; |
|
border: 1rem solid $sun; |
|
} |
|
|
|
&:after { |
|
width: 100rem; |
|
height: 100rem; |
|
border-radius: 50%; |
|
top: 140rem; |
|
right: -50%; |
|
left: -50%; |
|
margin: auto; |
|
border: 1rem solid yellow; |
|
box-shadow: 0 0 3rem red, inset 0 0 3rem blue; |
|
} |
|
} |
|
|
|
@keyframes lensflair { |
|
20%, |
|
30%, |
|
70%, |
|
80% { |
|
opacity: 0; |
|
} |
|
|
|
25%, |
|
75% { |
|
opacity: 0.05; |
|
} |
|
|
|
100% { |
|
transform: rotate(360deg); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@keyframes sun { |
|
20%, |
|
80% { |
|
filter: blur(1rem) brightness(390%); |
|
} |
|
|
|
27%, |
|
73% { |
|
filter: blur(1rem) brightness(200%); |
|
} |
|
|
|
100% { |
|
transform: rotate(360deg); |
|
} |
|
} |
|
|
|
@keyframes stars { |
|
50% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
@keyframes sky { |
|
20%, |
|
85% { |
|
filter: brightness(100%); |
|
opacity: 0; |
|
} |
|
|
|
30%, |
|
70% { |
|
filter: brightness(100%); |
|
opacity: 1; |
|
} |
|
|
|
40%, |
|
60% { |
|
filter: brightness(20%); |
|
opacity: 1; |
|
} |
|
} |
|
|
|
sunset { |
|
width: 150%; |
|
height: 20rem; |
|
left: -25%; |
|
top: 60rem; |
|
background: radial-gradient(farthest-side at 70% 100%, #ff6400, $none); |
|
filter: blur(1rem); |
|
-webkit-box-reflect: below 0; |
|
animation: sunset $timer linear infinite; |
|
opacity: 0; |
|
transform: translate3d(0, 20rem, 0); |
|
|
|
&:before { |
|
width: 100rem; |
|
height: 50rem; |
|
left: 55%; |
|
top: -10rem; |
|
border-radius: 50%; |
|
background: radial-gradient(#ff6400, $none); |
|
opacity: 0.1; |
|
} |
|
|
|
&:after { |
|
width: 50rem; |
|
height: 25rem; |
|
left: 65%; |
|
top: 5rem; |
|
border-radius: 50%; |
|
background: radial-gradient(#fffd91, $none); |
|
opacity: 0.1; |
|
} |
|
} |
|
|
|
@keyframes sunset { |
|
28%, |
|
75% { |
|
opacity: 1; |
|
transform: translate3d(0, 0, 0); |
|
} |
|
|
|
20%, |
|
35%, |
|
70%, |
|
80% { |
|
opacity: 0; |
|
transform: translate3d(0, 20rem, 0); |
|
} |
|
} |
|
|
|
text:nth-of-type(2) { |
|
animation: gameover $timer linear; |
|
} |
|
|
|
@keyframes gameover { |
|
34.8% { |
|
transform: scale(0); |
|
z-index: 0; |
|
display: block; |
|
opacity: 0; |
|
} |
|
|
|
35%, |
|
100% { |
|
transform: scale(1); |
|
z-index: 410; |
|
transition: all 0.5s 1.5s ease-in-out; |
|
opacity: 1; |
|
} |
|
} |
|
// ## trees |
|
tree:nth-of-type(1) { |
|
width: 10rem; |
|
height: 60.5rem; |
|
top: -10rem; |
|
transform: skew(-2deg); |
|
border-radius: 0 50% 2rem 0; |
|
box-shadow: 0.5rem 0 0 $tre1, 1rem 0 0 $tre3, 3rem 0 0 $tre1, 5rem 0 0 $tre2; |
|
|
|
&:before { |
|
left: 16rem; |
|
width: 10rem; |
|
height: 60.5rem; |
|
box-shadow: -2rem 0 0 $tre2, -3rem 0 0 $tre1, -4rem 0 0 $tre2; |
|
border-radius: 50% 0 0 2rem; |
|
transform: skew(4deg); |
|
} |
|
|
|
&:after { |
|
top: -4rem; |
|
width: 10rem; |
|
height: 5rem; |
|
border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%; |
|
background: $r4; |
|
box-shadow: inset -1rem -1rem 1rem $vls, |
|
// |
|
13rem 0 0 -0.2rem $vls, |
|
// |
|
9rem 1rem 0 -1rem $vls, |
|
// |
|
-2rem -3rem 0 1rem $vls, |
|
// |
|
5rem -5rem 0 -0.5rem $vls, |
|
// |
|
7rem -4rem 0 $vls, |
|
// |
|
11rem -2rem 0 -0.5rem $vls, |
|
// |
|
// |
|
12rem 0 0 -0.2rem $r42, |
|
// |
|
8rem 1rem 0 -1rem $r42, |
|
// |
|
-3rem -3rem 0 1rem $r41, |
|
// |
|
4rem -5rem 0 -0.5rem $r42, |
|
// |
|
6rem -4rem 0 $r41, |
|
// |
|
10rem -2rem 0 -0.5rem $r42; // |
|
} |
|
} |
|
|
|
tree:nth-of-type(2) { |
|
width: 10rem; |
|
height: 50.5rem; |
|
top: 0; |
|
left: 25rem; |
|
transform: skew(-3deg); |
|
border-radius: 0 50% 2rem 0; |
|
box-shadow: 0.5rem 0 0 $tre1, 1rem 0 0 $tre3, 3rem 0 0 $tre1, 5rem 0 0 $tre2; |
|
|
|
&:before { |
|
left: 16rem; |
|
width: 10rem; |
|
height: 50.5rem; |
|
box-shadow: -1.5rem 0 0 $tre2, -2.5rem 0 0 $tre1, -3rem 0 0 $tre2; |
|
border-radius: 50% 0 0 2rem; |
|
transform: skew(4deg); |
|
} |
|
|
|
&:after { |
|
top: -4rem; |
|
left: 17rem; |
|
width: 10rem; |
|
height: 5rem; |
|
border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%; |
|
background: $r4; |
|
box-shadow: inset -1rem -1rem 1rem $vls, |
|
// |
|
-19rem 1rem 0 -0.2rem $vls, |
|
// |
|
-14rem -4rem 0 -1rem $vls, |
|
// |
|
-13rem -1rem 0 1rem $vls, |
|
// |
|
-1rem -4rem 0 -0.5rem $vls, |
|
// |
|
-4rem -1rem 0 $vls, |
|
// |
|
-21rem -2rem 0 -0.5rem $vls, |
|
// |
|
-7rem -5rem 0 1rem $vls, |
|
// |
|
// |
|
-20rem 1rem 0 -0.2rem $r42, |
|
// |
|
-15rem -4rem 0 -1rem $r42, |
|
// |
|
-15rem -1rem 0 1rem $r41, |
|
// |
|
-2rem -4rem 0 -0.5rem $r42, |
|
// |
|
-5rem -1rem 0 $r41, |
|
// |
|
-22rem -2rem 0 -0.5rem $r42, |
|
// |
|
-8rem -5rem 0 1rem $r41; // |
|
} |
|
} |
|
|
|
tree i:nth-of-type(1) { |
|
&, |
|
&:before, |
|
&:after { |
|
width: 2.5rem; |
|
height: 0.5rem; |
|
background: lighten($r4, 10%); |
|
border-radius: 0 0 100% 100%; |
|
top: -5rem; |
|
filter: drop-shadow(3rem 1.5rem 0 $r43) drop-shadow(1.5rem 2.5rem 0 $r43); |
|
z-index: 1; |
|
left: -3rem; |
|
opacity: 0.5; |
|
} |
|
|
|
&:before { |
|
left: 6rem; |
|
top: -1rem; |
|
filter: drop-shadow(2rem 1.5rem 0 $r43); |
|
} |
|
|
|
&:after { |
|
left: 15rem; |
|
top: -1.5rem; |
|
filter: drop-shadow(2.5rem 0.5rem 0 $r43) drop-shadow(1rem 2rem 0 $r43); |
|
} |
|
} |
|
|
|
tree:nth-of-type(2) i:nth-of-type(1) { |
|
&:after { |
|
left: 20rem; |
|
} |
|
} |
|
|
|
tree i:nth-of-type(2) { |
|
&, |
|
&:before, |
|
&:after { |
|
width: 0.5rem; |
|
height: 0.25rem; |
|
background: $r41; |
|
border-radius: 100% 0 100% 0; |
|
top: -2rem; |
|
} |
|
|
|
&:before { |
|
left: 8rem; |
|
top: -1rem; |
|
} |
|
|
|
&:after { |
|
left: 20rem; |
|
top: 1.5rem; |
|
} |
|
} |
|
|
|
[type="radio"]:focus ~ div > div > tree { |
|
i:nth-of-type(1), |
|
&:after { |
|
animation: shake 0.3s ease-in-out; |
|
} |
|
} |
|
|
|
[type="radio"]:focus ~ div > div > tree > i:nth-of-type(2) { |
|
& { |
|
animation: fall 5s ease-in-out; |
|
} |
|
|
|
&:before { |
|
animation: fall 10s ease-in-out; |
|
} |
|
|
|
&:before { |
|
animation: fall 5s ease-in-out; |
|
} |
|
} |
|
|
|
@keyframes shake { |
|
40% { |
|
transform: translate3d(0, 0.5rem, 0); |
|
} |
|
|
|
60% { |
|
transform: translate3d(0, -0.25rem, 0); |
|
} |
|
|
|
80% { |
|
transform: translate3d(0, 0.15rem, 0); |
|
} |
|
} |
|
|
|
@keyframes fall { |
|
100% { |
|
transform: translate3d(0, 15rem, 0); |
|
opacity: 0; |
|
} |
|
} |
|
// ## water |
|
$w: #040b27; |
|
|
|
water { |
|
position: absolute; |
|
top: 78.5rem; |
|
bottom: 0; |
|
left: -100%; |
|
right: -100%; |
|
margin: auto; |
|
width: 100%; |
|
height: 25rem; |
|
background: linear-gradient(rgba($sky, 0.5), $background); |
|
z-index: 99; |
|
overflow: hidden; |
|
box-shadow: inset 0 0 5rem 0 rgba($smoke, 0.5); |
|
|
|
&:before, |
|
&:after, |
|
i { |
|
width: 80rem; |
|
height: 3rem; |
|
border-radius: 50%; |
|
opacity: 0.2; |
|
right: 0; |
|
margin: auto; |
|
transform: scaleX(1) scaleY(0); |
|
top: -1.5rem; |
|
border: 0.5rem solid #fff; |
|
box-shadow: 0 0 1rem 0.5rem $w, inset 0 0 1rem 1rem $w, inset 0 0 1rem #fff; |
|
} |
|
|
|
&:before { |
|
animation: waves 6s ease-in-out infinite; |
|
} |
|
|
|
&:after { |
|
animation: waves 8s 2s ease-in-out infinite; |
|
} |
|
} |
|
|
|
input:focus ~ water > i { |
|
animation: waves 3s 0.25s ease-out; |
|
} |
|
|
|
@keyframes waves { |
|
100% { |
|
transform: scaleX(1.5) scaleY(7); |
|
opacity: 0; |
|
} |
|
} |
|
// ## shed |
|
//treehouse |
|
|
|
shed > label { |
|
& > i:nth-of-type(5) { |
|
width: 100%; |
|
height: 100%; |
|
//ladder |
|
&:after { |
|
width: 2rem; |
|
border-left: 0.5rem solid $smoke; |
|
border-right: 0.5rem solid $smoke; |
|
background: repeating-linear-gradient( |
|
$none, |
|
$none 1.5rem, |
|
$smoke 1.5rem, |
|
$smoke 2rem |
|
); |
|
height: 325%; |
|
left: -1.5rem; |
|
transform: rotate(-1deg); |
|
top: 10.5rem; |
|
display: none; |
|
} |
|
//bridge |
|
&:before { |
|
width: 13rem; |
|
height: 3rem; |
|
top: 10.5rem; |
|
left: 12.5rem; |
|
border: 0.5rem dashed $none; |
|
border-bottom-color: $tre1; |
|
box-shadow: 0 0.25rem 0 $tre1; |
|
transform: rotate(-3deg); |
|
border-radius: 50%; |
|
display: none; |
|
} |
|
} |
|
|
|
&:nth-of-type(n + 5) > i:nth-of-type(5):after { |
|
height: 225%; |
|
} |
|
|
|
&:nth-of-type(n + 9) > i:nth-of-type(5):after { |
|
height: 15rem; |
|
} |
|
|
|
&:nth-of-type(even) > i:nth-of-type(5):after { |
|
left: 10rem; |
|
transform: rotate(2deg); |
|
} |
|
} |
|
|
|
$row: 1, 2, 3; |
|
|
|
@each $i in $row { |
|
$col: 1, 2, 3, 4; |
|
|
|
@each $x in $col { |
|
.hs.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x} { |
|
//back |
|
&:before { |
|
background: repeating-linear-gradient($r1 1rem, $tre1 2.3rem); |
|
width: 90%; |
|
height: 98%; |
|
left: 1.25rem; |
|
border-radius: 0.5rem; |
|
box-shadow: 0 0.5rem 0 0 $tre2; |
|
} |
|
//roof |
|
&:after { |
|
width: 105%; |
|
height: 5rem; |
|
background: repeating-linear-gradient( |
|
to right, |
|
$tre1 1rem, |
|
$tre2 2.1rem |
|
); |
|
top: -2rem; |
|
border-bottom: solid 0.5rem $smoke; |
|
box-shadow: 0 1.5rem 0.5rem -1rem $ds; |
|
border-radius: 0.5rem; |
|
left: auto; |
|
right: -1rem; |
|
} |
|
//window |
|
& > i:nth-of-type(4) { |
|
width: 4rem; |
|
height: 4rem; |
|
right: 0; |
|
margin: auto; |
|
background: $ls; |
|
top: 3rem; |
|
border-radius: 0.5rem; |
|
box-shadow: inset 0 0.5rem 1rem $shadow; |
|
transform: scale(0.5); |
|
|
|
&:before { |
|
width: 3.4rem; |
|
height: 0.5rem; |
|
background: $smoke; |
|
left: 0.3rem; |
|
top: 0.4rem; |
|
border-radius: 0.25rem; |
|
box-shadow: 0 1.5rem 0 $smoke, |
|
// |
|
0 |
|
3rem |
|
0 |
|
$smoke, |
|
// |
|
0 |
|
0.5rem |
|
0 |
|
#000, |
|
// |
|
0 |
|
1rem |
|
0 |
|
$ds, |
|
// |
|
0 |
|
2rem |
|
0 |
|
$ds, |
|
// |
|
0 |
|
2.5rem |
|
0 |
|
$shadow; // |
|
} |
|
|
|
&:after { |
|
width: 0.5rem; |
|
height: 3.4rem; |
|
background: $smoke; |
|
left: 0.3rem; |
|
top: 0.4rem; |
|
border-radius: 0.25rem; |
|
box-shadow: 1.5rem 0 0 $smoke, |
|
// |
|
3rem |
|
0 |
|
0 |
|
$smoke; // |
|
} |
|
} |
|
//door / chimney / fence |
|
& > i:nth-of-type(3) { |
|
//door |
|
width: 4rem; |
|
height: 9rem; |
|
right: 0; |
|
margin: auto; |
|
background: $r1; |
|
top: 3rem; |
|
border-radius: 0.5rem; |
|
box-shadow: inset 0 0.5rem 1rem $shadow; |
|
//chimney |
|
&:after { |
|
left: -4rem; |
|
border: 1rem solid $none; |
|
top: -11rem; |
|
border-bottom-color: $smoke; |
|
transform: rotate(-3deg); |
|
height: 4rem; |
|
box-shadow: 0 3.7rem 0 -0.5rem $smoke; |
|
border-radius: 0 0 1rem 1rem; |
|
} |
|
//fence |
|
&:before { |
|
width: 14.5rem; |
|
height: 4.5rem; |
|
border-top: 0.5rem solid $tre2; |
|
border-bottom: 0.5rem solid $tre2; |
|
top: 5rem; |
|
left: -5rem; |
|
background: repeating-linear-gradient( |
|
to right, |
|
$tre1, |
|
$tre2 0.5rem, |
|
$none 0.5rem, |
|
$none 1.4rem |
|
); |
|
border-radius: 0.5rem; |
|
} |
|
} |
|
//props |
|
& > i:nth-of-type(2) { |
|
&:before { |
|
width: 1rem; |
|
height: 9rem; |
|
background: $tre2; |
|
top: -7rem; |
|
} |
|
} |
|
|
|
&:nth-of-type(odd) > i:nth-of-type(2) { |
|
width: 1rem; |
|
background: $tre2; |
|
height: 3rem; |
|
border-radius: 0.25rem; |
|
top: 18.5rem; |
|
left: 10rem; |
|
transform: rotate(5deg); |
|
|
|
&:before { |
|
transform: rotate(-45deg); |
|
left: -3rem; |
|
border-radius: 0 1rem 0 0; |
|
} |
|
|
|
&:after { |
|
width: 1rem; |
|
height: 4rem; |
|
transform: rotate(45deg); |
|
background: $tre2; |
|
top: -6.5rem; |
|
left: -2rem; |
|
border-radius: 1rem 0 0 0; |
|
} |
|
} |
|
|
|
&:nth-of-type(even) > i:nth-of-type(3) { |
|
//chimney |
|
&:after { |
|
left: 7rem; |
|
transform: rotate(3deg); |
|
} |
|
} |
|
//smoke |
|
&:nth-of-type(even) > i:nth-of-type(1) { |
|
left: 11rem; |
|
} |
|
|
|
&:nth-of-type(even) > i:nth-of-type(2) { |
|
&:before { |
|
transform: rotate(45deg); |
|
left: 5rem; |
|
border-radius: 1rem 0 0 0; |
|
top: 11rem; |
|
} |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
&:before, |
|
&:after { |
|
top: -7.5rem; |
|
left: -1rem; |
|
animation: smoke 8s linear infinite; |
|
} |
|
|
|
&:before { |
|
animation: smoke 7.25s 3.75s linear infinite; |
|
} |
|
} |
|
//ladder |
|
& > i:nth-of-type(5):after { |
|
display: block; |
|
} |
|
} |
|
//no roof |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > shed > .row#{$i + 1}.col#{$x} { |
|
&:after, |
|
& > i:nth-of-type(3):after, |
|
& > i:nth-of-type(1) { |
|
display: none; |
|
} |
|
} |
|
} |
|
//no fence / door / window |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > shed > .row#{$i - 1}.col#{$x} { |
|
& > i:nth-of-type(3):before, |
|
& > i:nth-of-type(2), |
|
& > i:nth-of-type(5):after { |
|
display: none; |
|
} |
|
|
|
& > i:nth-of-type(3) { |
|
height: 0; |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
transform: scale(1); |
|
right: #{random(2)}rem; |
|
left: #{random(2)}rem; |
|
} |
|
} |
|
} |
|
//chimney |
|
.hs.shed.row#{$i}.col#{$x |
|
- |
|
3}:not(:checked) |
|
~ .hs.row#{$i}.col#{$x}:checked |
|
~ .shed.hs.row#{$i}.col#{$x |
|
+ 1}:not(:checked) |
|
~ { |
|
.hs.row#{$i - 2}.col#{$x}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(3) { |
|
//chimney |
|
&:after { |
|
left: 7rem; |
|
transform: rotate(3deg); |
|
} |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
left: 11rem; |
|
} |
|
} |
|
} |
|
} |
|
//tall back |
|
.hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i - 1}.col#{$x}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
&:before { |
|
border-top-left-radius: 0; |
|
border-top-right-radius: 0; |
|
} |
|
} |
|
|
|
div > div > shed > .row#{$i - 1}.col#{$x} { |
|
&:before { |
|
height: 12.5rem; |
|
box-shadow: none; |
|
border-bottom-left-radius: 0; |
|
border-bottom-right-radius: 0; |
|
} |
|
} |
|
} |
|
//random door |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
.hs.row#{$i}.col#{$x + 1}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(3) { |
|
height: 0; |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
transform: scale(1); |
|
right: #{random(2)}rem; |
|
left: #{random(2)}rem; |
|
} |
|
|
|
& > i:nth-of-type(5):after { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
//ladder control |
|
.hs.row#{$i + 2}.col#{$x}:checked ~ { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(5):after { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row2.col3:checked ~ .hs.row1.col2:checked ~ { |
|
div > div > shed > .row1.col2 { |
|
& > i:nth-of-type(5):after { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$i + 1}.col#{$x - 1}:checked ~ { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(5):after { |
|
display: none !important; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
.hs.row#{$i - 1}.col#{$x + 1}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(1), |
|
& > i:nth-of-type(3):after { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
//extended roof |
|
.hs.row#{$i}.col#{$x}:checked ~, |
|
.hs.row#{$i}.col#{$x + 1}:checked ~ { |
|
.hs.row#{$i - 1}.col#{$x + 1}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
&:after { |
|
width: 110%; |
|
right: -1.25rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//long back |
|
$house: 1, 2, 3; |
|
|
|
@each $x in $house { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
.hs.row#{$i}.col#{$x + 1}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
&:before { |
|
width: 110%; |
|
} |
|
} |
|
|
|
div > div > shed > .row#{$i}.col#{$x + 1} { |
|
//roof |
|
&:after { |
|
width: 120%; |
|
left: -1.25rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
///////////////////////////// |
|
//chimney |
|
|
|
$house: 2, 4; |
|
|
|
@each $x in $house { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
.hs.shed.row#{$i}.col#{$x + 1}:not(:checked) ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(3) { |
|
//chimney |
|
&:after { |
|
left: 7rem; |
|
transform: rotate(3deg); |
|
} |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
left: 11rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
$house: 2, 3; |
|
|
|
@each $x in $house { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
.hs.row#{$i}.col#{$x + 1}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
//chimney // smoke |
|
& > i:nth-of-type(3):after, |
|
& > i:nth-of-type(1) { |
|
display: none; |
|
} |
|
|
|
& > i:nth-of-type(3):before { |
|
width: 10.25rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
.hs.row#{$i}.col#{$x - 1}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(3) { |
|
//chimney |
|
&:after { |
|
left: 6rem; |
|
transform: rotate(3deg); |
|
} |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
left: 10rem; |
|
} |
|
|
|
& > i:nth-of-type(5):after { |
|
left: -2.5rem; |
|
transform: rotate(-3deg); |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 3}:checked ~, |
|
.hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 5}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
//chimney // smoke |
|
& > i:nth-of-type(3):after, |
|
& > i:nth-of-type(1) { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
//ladder |
|
.hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 3}:checked ~ { |
|
div > div > shed > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(5):after { |
|
left: 10rem; |
|
transform: rotate(2deg); |
|
} |
|
} |
|
} |
|
} |
|
//bridge |
|
|
|
.hs.shed.row#{$i}.col1:checked |
|
~ .hs.shed.row#{$i}.col2:not(:checked) |
|
~ .hs.shed.row#{$i}.col3:not(:checked) |
|
~ .hs.shed.row#{$i}.col4:checked |
|
~ { |
|
div > div > shed > .row#{$i}.col1 { |
|
& > i:nth-of-type(5):before { |
|
display: block; |
|
width: 210%; |
|
} |
|
} |
|
} |
|
|
|
.hs.shed.row#{$i}.col1:checked |
|
~ .hs.shed.row#{$i}.col2:not(:checked) |
|
~ .hs.shed.row#{$i}.col3:checked |
|
~ div |
|
> div |
|
> shed |
|
> .row#{$i}.col1, |
|
.hs.shed.row#{$i}.col2:checked |
|
~ .hs.shed.row#{$i}.col3:not(:checked) |
|
~ .hs.shed.row#{$i}.col4:checked |
|
~ div |
|
> div |
|
> shed |
|
> .row#{$i}.col2 { |
|
& > i:nth-of-type(5):before { |
|
display: block; |
|
width: 110%; |
|
} |
|
} |
|
|
|
// change bridge to rope |
|
.hs.row#{$i |
|
+ 1}.col2:checked |
|
~ .hs.shed.row#{$i}.col1:checked |
|
~ .hs.shed.row#{$i}.col2:not(:checked) |
|
~ .hs.shed.row#{$i}.col3:checked |
|
~ div |
|
> div |
|
> shed |
|
> .row#{$i}.col1, |
|
.hs.row#{$i |
|
+ 1}.col3:checked |
|
~ .hs.shed.row#{$i}.col2:checked |
|
~ .hs.shed.row#{$i}.col3:not(:checked) |
|
~ .hs.shed.row#{$i}.col4:checked |
|
~ div |
|
> div |
|
> shed |
|
> .row#{$i}.col2, |
|
.hs.row#{$i |
|
+ 1}.col3:checked |
|
~ .hs.shed.row#{$i}.col1:checked |
|
~ .hs.shed.row#{$i}.col2:not(:checked) |
|
~ .hs.shed.row#{$i}.col3:not(:checked) |
|
~ .hs.shed.row#{$i}.col4:checked |
|
~ div |
|
> div |
|
> shed |
|
> .row#{$i}.col1, |
|
.hs.row#{$i |
|
+ 1}.col2:checked |
|
~ .hs.shed.row#{$i}.col1:checked |
|
~ .hs.shed.row#{$i}.col2:not(:checked) |
|
~ .hs.shed.row#{$i}.col3:not(:checked) |
|
~ .hs.shed.row#{$i}.col4:checked |
|
~ div |
|
> div |
|
> shed |
|
> .row#{$i}.col1, |
|
.hs.shed.row#{$i |
|
+ 1}.col1:checked |
|
~ .hs.shed.row#{$i}.col1:checked |
|
~ .hs.shed.row#{$i}.col2:not(:checked) |
|
~ .hs.shed.row#{$i}.col3:checked |
|
~ div |
|
> div |
|
> shed |
|
> .row#{$i}.col1, |
|
.hs.shed.row#{$i |
|
+ 1}.col2:checked |
|
~ .hs.shed.row#{$i}.col2:checked |
|
~ .hs.shed.row#{$i}.col3:not(:checked) |
|
~ .hs.shed.row#{$i}.col4:checked |
|
~ div |
|
> div |
|
> shed |
|
> .row#{$i}.col2 { |
|
& > i:nth-of-type(5):before { |
|
top: 1rem; |
|
border: none; |
|
} |
|
} |
|
} |
|
// ## house |
|
//house |
|
|
|
div > div > house > label { |
|
& > i:nth-of-type(5) { |
|
width: 13rem; |
|
height: 3rem; |
|
top: 1rem; |
|
border-bottom-color: $tre1; |
|
box-shadow: 0 0.25rem 0 $tre1; |
|
border-radius: 50%; |
|
left: -0.5rem; |
|
z-index: 1; |
|
display: none; |
|
|
|
&:after { |
|
border: 0.5rem solid $none; |
|
border-top: 1rem solid $r1; |
|
top: 2.75rem; |
|
left: 1rem; |
|
transform: rotate(5deg); |
|
z-index: -1 !important; |
|
filter: drop-shadow(2rem 0.25rem 0 $r2) drop-shadow(2rem 0rem 0 $r1); |
|
} |
|
|
|
&:before { |
|
border: 0.5rem solid $none; |
|
border-top: 1rem solid $r4; |
|
top: 3.25rem; |
|
left: 7rem; |
|
transform: rotate(-5deg); |
|
z-index: -1 !important; |
|
filter: drop-shadow(2rem -0.25rem 0 $r2) drop-shadow(2rem 0rem 0 $r1); |
|
} |
|
} |
|
} |
|
|
|
$row: 1, 2, 3, 4; |
|
|
|
@each $i in $row { |
|
$col: 1, 2, 3, 4; |
|
|
|
@each $x in $col { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
//back |
|
&:before { |
|
width: 1.5rem; |
|
height: 1rem; |
|
background: currentColor; |
|
border-radius: 0.25rem; |
|
top: -1.35rem; |
|
left: 3rem; |
|
box-shadow: 2rem 2rem 0 currentColor; |
|
filter: hue-rotate(-10deg) brightness(1.1); |
|
opacity: 0.7; |
|
} |
|
//bricks |
|
&:after { |
|
filter: hue-rotate(-10deg) brightness(1.1); |
|
width: 2rem; |
|
height: 1rem; |
|
background: currentColor; |
|
border-radius: 0.25rem; |
|
top: 0.5rem; |
|
left: -0.15rem; |
|
box-shadow: 0 2rem 0 currentColor, |
|
// |
|
0 |
|
4rem |
|
0 |
|
currentColor, |
|
// |
|
0 |
|
6rem |
|
0 |
|
currentColor, |
|
// |
|
0 |
|
8rem |
|
0 |
|
currentColor, |
|
// |
|
0 |
|
10rem |
|
0 |
|
currentColor, |
|
// |
|
// |
|
10.75rem |
|
0 |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
2rem |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
4rem |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
6rem |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
8rem |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
10rem |
|
0 |
|
currentColor; |
|
} |
|
//window |
|
& > i:nth-of-type(4) { |
|
//window |
|
width: 5rem; |
|
right: 0; |
|
margin: auto; |
|
top: 3.5rem; |
|
background: $ds; |
|
height: 5rem; |
|
border-radius: 0.3rem; |
|
box-shadow: inset 0 0 0 0.5rem $ls, |
|
// |
|
inset |
|
0 |
|
0 |
|
0.5rem |
|
$ds, |
|
// |
|
inset |
|
0 |
|
0 |
|
0 |
|
0.5rem |
|
currentColor, |
|
// |
|
inset |
|
0 |
|
0 |
|
1rem |
|
1rem |
|
$ds, |
|
// |
|
inset |
|
1rem |
|
0 |
|
0 |
|
$r1, |
|
// |
|
inset -1.25rem |
|
0 |
|
0 |
|
$r1, |
|
// |
|
inset |
|
0 -2rem |
|
0 |
|
#000, |
|
// |
|
inset |
|
0 -3.5rem |
|
0 |
|
$tre2; |
|
|
|
&:after { |
|
width: 4.5rem; |
|
height: 0.25rem; |
|
left: 0.25rem; |
|
top: 2.4rem; |
|
background: currentColor; |
|
border-radius: 0.0001rem; |
|
box-shadow: inset 0 0 0 0.5rem $ls, |
|
// |
|
0 |
|
3rem |
|
0 |
|
0.3rem |
|
lighten($r15, 20%), |
|
// |
|
0 |
|
3.5rem |
|
0.35rem |
|
0.25rem |
|
$ds; |
|
} |
|
|
|
&:before { |
|
width: 0.25rem; |
|
height: 4.5rem; |
|
left: 2.4rem; |
|
top: 0.25rem; |
|
background: currentColor; |
|
box-shadow: inset 0 0 0 0.5rem $ls; |
|
} |
|
} |
|
//random window |
|
&.col#{random(4)} > i:nth-of-type(4) { |
|
border-radius: 2.25rem 2.25rem 0.3rem 0.3rem; |
|
} |
|
//roof |
|
& > i:nth-of-type(2) { |
|
border: solid $none 1rem; |
|
border-bottom: solid $r3 4rem; |
|
width: calc(100% + 2.1rem); |
|
left: -1rem; |
|
top: -2.5rem; |
|
box-shadow: 0 0.25rem 0 $tre2, 0 1.5rem 1rem -1rem $shadow; |
|
|
|
&:before { |
|
width: 100%; |
|
height: 3rem; |
|
border-radius: 50%; |
|
background: repeating-linear-gradient( |
|
$none, |
|
$none 0.75rem, |
|
rgba($ds, 0.4), |
|
$none 1rem |
|
); |
|
} |
|
//chimney |
|
&:after { |
|
width: 3rem; |
|
height: 4rem; |
|
border: 0.5rem solid $none; |
|
border-top: 0.5rem solid $base; |
|
top: -2rem; |
|
box-shadow: inset 0 4rem 0 $base, |
|
// |
|
0 -0.5rem |
|
0 -0.2rem |
|
$dark, |
|
// |
|
0 -3rem |
|
0 -1rem |
|
$smoke; |
|
border-radius: 0.5rem; |
|
left: -0.25rem; |
|
filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(#000, 0.15)); |
|
} |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
&:before, |
|
&:after { |
|
top: -8.5rem; |
|
left: -1rem; |
|
animation: smoke 8s linear infinite; |
|
} |
|
|
|
&:before { |
|
animation: smoke 7.25s 3.75s linear infinite; |
|
} |
|
} |
|
|
|
&:nth-of-type(even) { |
|
i:nth-of-type(2):after { |
|
left: 9.5rem; |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
left: 10rem; |
|
} |
|
} |
|
} |
|
//no roof |
|
div > div > house > .row#{$i + 1}.col#{$x} { |
|
i:nth-of-type(2), |
|
i:nth-of-type(1) { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
//shedhouse |
|
.hs.house.row#{$i |
|
+ 1}.col#{$x}:checked |
|
~ .hs.shed.row#{$i}.col#{$x}:checked |
|
~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
border-bottom: 0.25rem dashed $base; |
|
} |
|
|
|
div > div > house > .row#{$i + 1}.col#{$x} { |
|
&:before { |
|
background: $r1; |
|
} |
|
} |
|
} |
|
|
|
.hs.shed.row#{$i |
|
+ 1}.col#{$x}:checked |
|
~ .hs.house.row#{$i}.col#{$x}:checked |
|
~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
border-bottom: 0.25rem dashed $r1; |
|
} |
|
|
|
div > div > house > .row#{$i + 1}.col#{$x} { |
|
&:before { |
|
background: $base; |
|
} |
|
} |
|
} |
|
//chimney |
|
.hs.house.row#{$i}.col#{$x |
|
- |
|
3}:not(:checked) |
|
~ .hs.house.row#{$i}.col#{$x}:checked |
|
~ .hs.house.row#{$i}.col#{$x |
|
+ 1}:not(:checked) |
|
~ .hs.house.row#{$i |
|
- |
|
2}.col#{$x}:checked |
|
~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(2):after { |
|
//chimney |
|
left: 9.5rem; |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
left: 11rem; |
|
} |
|
} |
|
} |
|
//center chimney |
|
.hs.row#{$i |
|
- |
|
1}.col#{$x |
|
- |
|
1}:checked |
|
~ .hs.row#{$i |
|
- |
|
1}.col#{$x}:not(:checked) |
|
~, |
|
.hs.house.row#{$i |
|
- |
|
1}.col#{$x}:not(:checked) |
|
~ .hs.house.row#{$i |
|
- |
|
2}.col#{$x}:checked |
|
~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(2):after { |
|
//chimney |
|
left: 4.75rem; |
|
height: 3rem; |
|
box-shadow: inset 0 6rem 0 $base, |
|
// |
|
0 -0.5rem |
|
0 -0.2rem |
|
$dark, |
|
// |
|
0 -2.25rem |
|
0 -1rem |
|
$smoke; |
|
border-radius: 0 0 1rem 1rem; |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
left: 5rem; |
|
} |
|
} |
|
} |
|
//small roof |
|
.hs.row#{$i}.col#{$x |
|
- |
|
1}:checked |
|
~ .hs.row#{$i}.col#{$x}:checked |
|
~ .hs.house.row#{$i |
|
- |
|
1}.col#{$x |
|
- |
|
1}:not(:checked) |
|
~ .hs.shed.row#{$i |
|
- |
|
1}.col#{$x |
|
- |
|
1}:not(:checked) |
|
~ .hs.row#{$i |
|
- |
|
1}.col#{$x}:checked |
|
~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
i:nth-of-type(2) { |
|
display: block; |
|
left: -42%; |
|
width: 50%; |
|
} |
|
|
|
i:nth-of-type(1), |
|
i:nth-of-type(2):after { |
|
display: none; |
|
} |
|
} |
|
} |
|
// no chimney |
|
|
|
.row#{$i}.col2:checked ~ .row#{$i}.col3:checked ~ { |
|
div > div > house > .row#{$i}.col2 { |
|
i:nth-of-type(1), |
|
i:nth-of-type(2):after { |
|
display: none; |
|
} |
|
} |
|
|
|
div > div > house > .row#{$i}.col3 { |
|
& > i:nth-of-type(2):after { |
|
//chimney |
|
left: -1.5rem; |
|
} |
|
//smoke |
|
& > i:nth-of-type(1) { |
|
left: -1rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
///////////////////////////// |
|
|
|
@each $i in $row { |
|
$col: 1, 2, 3, 4; |
|
|
|
@each $x in $col { |
|
//bunting |
|
.hs.row#{$i}.col#{$x}:checked |
|
~ .hs.house.row#{$i}.col#{$x |
|
+ 1}:not(:checked) |
|
~ .hs.row#{$i}.col#{$x |
|
+ 2}:checked |
|
~ { |
|
div > div > house > .row#{$i}.col#{$x + 1} { |
|
& > i:nth-of-type(5) { |
|
display: block; |
|
width: 105%; |
|
} |
|
} |
|
} |
|
//house to shed bunting |
|
.hs.row#{$i}.col#{$x}:checked |
|
~ .hs.house.row#{$i}.col#{$x |
|
+ 1}:not(:checked) |
|
~ .hs.shed.row#{$i}.col#{$x |
|
+ 2}:checked |
|
~ { |
|
div > div > house > .row#{$i}.col#{$x + 1} { |
|
& > i:nth-of-type(5) { |
|
display: block; |
|
width: 115%; |
|
} |
|
} |
|
} |
|
} |
|
|
|
//bunting |
|
$col: 1, 2, 3, 4; |
|
|
|
@each $x in $col { |
|
.hs.row#{$i}.col#{$x}:checked |
|
~ .hs.house.row#{$i}.col#{$x |
|
+ 1}:not(:checked) |
|
~ .hs.house.row#{$i}.col#{$x |
|
+ 2}:not(:checked) |
|
~ .hs.row#{$i}.col#{$x |
|
+ 3}:checked |
|
~ { |
|
div > div > house > .row#{$i}.col#{$x + 1} { |
|
& > i:nth-of-type(5) { |
|
display: block; |
|
width: 205%; |
|
|
|
&:after { |
|
border: 0.5rem solid $none; |
|
border-top: 1rem solid $r1; |
|
top: 2.75rem; |
|
left: 3.5rem; |
|
transform: rotate(4deg); |
|
z-index: -1 !important; |
|
filter: drop-shadow(2.5rem 0.1rem 0 $r2) drop-shadow(5rem 0 0 $r1); |
|
} |
|
|
|
&:before { |
|
border: 0.5rem solid $none; |
|
border-top: 1rem solid $r4; |
|
top: 3.25rem; |
|
left: 13.5rem; |
|
transform: rotate(-4deg); |
|
z-index: -1 !important; |
|
filter: drop-shadow(2.5rem -0.1rem 0 $r2) drop-shadow(5rem 0 0 $r1); |
|
} |
|
} |
|
} |
|
} |
|
|
|
//bricks |
|
.hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x + 1}:checked ~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
//bricks |
|
&:after { |
|
box-shadow: 0 2rem 0 currentColor, |
|
// |
|
0 |
|
4rem |
|
0 |
|
currentColor, |
|
// |
|
0 |
|
6rem |
|
0 |
|
currentColor, |
|
// |
|
0 |
|
8rem |
|
0 |
|
currentColor, |
|
// |
|
0 |
|
10rem |
|
0 |
|
currentColor; |
|
} |
|
} |
|
} |
|
|
|
//fixed |
|
.hs.row#{$i}.col#{$x - 1}:checked ~ { |
|
.hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x + 1}:checked ~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
//bricks |
|
&:after { |
|
box-shadow: -2rem #{random(3) + 3}rem 0 rgba($b1, 0.5), |
|
// |
|
0 |
|
#{random(3) + |
|
5}rem |
|
0 |
|
currentColor; |
|
} |
|
} |
|
} |
|
} |
|
|
|
//bricks |
|
.hs.row#{$i}.col#{$x - 1}:checked ~ { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
&:after { |
|
box-shadow: -2rem 3rem 0 rgba($b1, 0.5), |
|
// |
|
0 |
|
5rem |
|
0 |
|
currentColor, |
|
// |
|
// |
|
10.75rem |
|
0 |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
2rem |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
4rem |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
6rem |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
8rem |
|
0 |
|
currentColor, |
|
// |
|
10.75rem |
|
10rem |
|
0 |
|
currentColor; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
$row: 1, 2, 3; |
|
|
|
@each $i in $row { |
|
$col: 1, 2, 3, 4; |
|
|
|
@each $x in $col { |
|
//prop |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
border-bottom: 0.75rem solid $tre2; |
|
|
|
& > i:nth-of-type(3) { |
|
//prop |
|
width: 2rem; |
|
height: 325%; |
|
border-left: 0.75rem solid $tre2; |
|
border-right: 0.75rem solid $tre2; |
|
top: 12rem; |
|
background: repeating-linear-gradient( |
|
$none, |
|
$none 4rem, |
|
$tre2, |
|
$tre2 4.5rem |
|
); |
|
z-index: -200; |
|
|
|
&:before { |
|
width: 12rem; |
|
height: 12rem; |
|
border: 1.15rem dashed $none; |
|
border-bottom-color: $tre2; |
|
box-shadow: 0 0.75rem 0 $tre2, inset 0 -0.75rem 0 $tre2; |
|
top: 0.5rem; |
|
border-radius: 5rem; |
|
left: -0.5rem; |
|
transform: scaleY(-1); |
|
} |
|
|
|
&:after { |
|
width: 2rem; |
|
height: 100%; |
|
border-left: 0.75rem solid $tre2; |
|
border-right: 0.75rem solid $tre2; |
|
left: 9.8rem; |
|
background: repeating-linear-gradient( |
|
$none, |
|
$none 4rem, |
|
$tre2, |
|
$tre2 4.5rem |
|
); |
|
} |
|
} |
|
|
|
&:nth-of-type(n + 5) > i:nth-of-type(3) { |
|
height: 225%; |
|
} |
|
|
|
&:nth-of-type(n + 9) > i:nth-of-type(3) { |
|
height: 13.5rem; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$i + 1}.col#{$x}:checked ~ { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
border-bottom: none; |
|
|
|
& > i:nth-of-type(3) { |
|
display: none !important; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//bottom row |
|
@for $i from 23 through 26 { |
|
[id^="cb#{$i}"]:checked ~ div > div > house > [for="ncb#{$i}"] { |
|
box-shadow: 0 0.5rem 0 $base; |
|
|
|
& > i:nth-of-type(3) { |
|
//door |
|
width: 4rem; |
|
height: 9rem; |
|
right: 0; |
|
margin: auto; |
|
top: 3.5rem; |
|
border-radius: 0.5rem; |
|
//bushes |
|
&:before { |
|
width: 7rem; |
|
height: 4rem; |
|
left: -8em; |
|
top: 6rem; |
|
border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem; |
|
background: $r4; |
|
box-shadow: 3rem 1rem 0 -1rem $r41, |
|
// |
|
14rem |
|
0.5rem |
|
0 -0.5rem |
|
$r42, |
|
// |
|
10rem |
|
1rem |
|
0 -1.25rem |
|
$r4; |
|
} |
|
//flowers |
|
&:after { |
|
width: 0.75rem; |
|
height: 0.75rem; |
|
background: #fff; |
|
border-radius: 50%; |
|
left: -5rem; |
|
top: 7rem; |
|
box-shadow: 2rem 0.5rem 0 -0.1rem #fff, |
|
// |
|
1rem |
|
1.5rem |
|
0 -0.05rem |
|
#fff, |
|
// |
|
15rem |
|
1.5rem |
|
0 -0.05rem |
|
#fff, |
|
// |
|
16rem |
|
1rem |
|
0 -0.1rem |
|
#fff; |
|
} |
|
} |
|
//differences |
|
&.col3 > i:nth-of-type(3) { |
|
//bushes |
|
&:before { |
|
height: 3rem; |
|
left: -8.5em; |
|
top: 7rem; |
|
background: $r4; |
|
box-shadow: 3rem 0.75rem 0 -1rem $r41, |
|
// |
|
14rem |
|
1rem |
|
0 |
|
0.5rem |
|
$r4, |
|
// |
|
10rem |
|
0.5rem |
|
0 -0.5rem |
|
$r42; |
|
} |
|
//flowers |
|
&:after { |
|
left: -7rem; |
|
} |
|
} |
|
|
|
&.col2 > i:nth-of-type(3) { |
|
//bushes |
|
&:before { |
|
height: 3.5rem; |
|
width: 6rem; |
|
left: -7em; |
|
top: 6.5rem; |
|
background: $r4; |
|
box-shadow: 3rem 0.75rem 0 -1rem $r41, |
|
// |
|
13rem |
|
1rem |
|
0 |
|
0.5rem |
|
$r42, |
|
// |
|
9rem |
|
0.5rem |
|
0 -0.5rem |
|
$r41; |
|
} |
|
//flowers |
|
&:after { |
|
left: -7rem; |
|
} |
|
} |
|
|
|
&.col1 > i:nth-of-type(3) { |
|
//bushes |
|
&:before { |
|
width: 6rem; |
|
height: 3rem; |
|
left: -6.5em; |
|
top: 7rem; |
|
border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem; |
|
background: $r41; |
|
box-shadow: 3rem 0.5rem 0 -0.75rem $r4, |
|
// |
|
9rem |
|
0.5rem |
|
0 -0.5rem |
|
$r4, |
|
// |
|
12rem -0.25rem |
|
0 |
|
0.5rem |
|
$r42; |
|
} |
|
//flowers |
|
&:after { |
|
width: 0.75rem; |
|
height: 0.75rem; |
|
background: #fff; |
|
border-radius: 50%; |
|
left: -5rem; |
|
top: 7rem; |
|
box-shadow: 2rem 0.5rem 0 -0.1rem #fff, |
|
// |
|
1rem |
|
0.75rem |
|
0 -0.05rem |
|
#fff, |
|
// |
|
16rem |
|
1.5rem |
|
0 -0.05rem |
|
#fff, |
|
// |
|
15rem |
|
1rem |
|
0 -0.1rem |
|
#fff; |
|
} |
|
} |
|
} |
|
|
|
#cb#{$i}:checked |
|
~ #cb#{$i |
|
+ 1}:not(:checked) |
|
~ div |
|
> div |
|
> house |
|
> [for="ncb#{$i}"], |
|
#cb23:checked |
|
~ #cb24:checked |
|
~ #cb25:checked |
|
~ #cb26:checked |
|
~ div |
|
> div |
|
> house |
|
> [for="ncb24"], |
|
#cb26:checked ~ div > div > house > [for="ncb26"] { |
|
& > i:nth-of-type(3) { |
|
//door |
|
background: radial-gradient( |
|
circle at 80% center, |
|
$r2 0.25rem, |
|
$none 0.25rem |
|
), |
|
radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), $r3; |
|
box-shadow: inset 0 0.5rem 1rem $shadow; |
|
} |
|
|
|
&.col#{random(2 + 2)} > i:nth-of-type(3) { |
|
//door |
|
background: radial-gradient( |
|
circle at 80% center, |
|
$r2 0.25rem, |
|
$none 0.25rem |
|
), |
|
radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), $tre1; |
|
} |
|
|
|
&.col#{random(2)} > i:nth-of-type(3) { |
|
//door |
|
background: radial-gradient( |
|
circle at 80% center, |
|
$r2 0.25rem, |
|
$none 0.25rem |
|
), |
|
radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), |
|
$smoke; |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
transform: scale(0.5); |
|
//window |
|
box-shadow: inset 0 0 0 0.5rem $ls, |
|
// |
|
inset |
|
0 |
|
0 |
|
0.5rem |
|
$ds, |
|
// |
|
inset |
|
0 |
|
0 |
|
0 |
|
0.5rem |
|
$r3, |
|
// |
|
inset |
|
0 |
|
0 |
|
1rem |
|
1rem |
|
$ds, |
|
// |
|
inset |
|
0 -2rem |
|
0 |
|
#000, |
|
// |
|
inset |
|
0 -3.5rem |
|
0 |
|
$tre2; |
|
|
|
&:after { |
|
height: 0.5rem; |
|
top: 2.3rem; |
|
background: $r3; |
|
box-shadow: inset 0 0 0 0.5rem $ls; |
|
} |
|
|
|
&:before { |
|
width: 0.5rem; |
|
left: 2.3rem; |
|
background: $r3; |
|
} |
|
} |
|
} |
|
} |
|
|
|
//castle |
|
|
|
.hs.house.row4.col2:not(:checked) |
|
~ .hs.row4.col3:checked |
|
~ .hs.house.row4.col4:not(:checked) |
|
~ .hs.house.row3.col2:not(:checked) |
|
~ .hs.row3.col3:checked |
|
~ .hs.house.row3.col4:not(:checked) |
|
~ .hs.house.row2.col2:not(:checked) |
|
~ .hs.row2.col3:checked |
|
~ .hs.house.row2.col4:not(:checked) |
|
~ .hs.house.row1.col2:not(:checked) |
|
~ .hs.row1.col3:checked |
|
~ .hs.house.row1.col4:not(:checked) |
|
~ { |
|
div > div > house > .row1.col3, |
|
div > div > house > .row2.col3, |
|
div > div > house > .row3.col3, |
|
div > div > house > .row4.col3 { |
|
background: $stone; |
|
color: $stone; |
|
z-index: 310; |
|
|
|
& > i:nth-of-type(4), |
|
& > i:nth-of-type(3) { |
|
border-radius: 50% 50% 0.3rem 0.3rem; |
|
} |
|
|
|
& > i:nth-of-type(3) { |
|
height: 10rem; |
|
width: 4.5rem; |
|
top: 2.5rem; |
|
|
|
&:before { |
|
top: 8rem; |
|
} |
|
|
|
&:after { |
|
top: 8rem; |
|
} |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
&:after { |
|
box-shadow: inset 0 0 0 0.5rem $ls; |
|
} |
|
} |
|
} |
|
|
|
div > div > house > .row1.col3 { |
|
& > i:nth-of-type(1) { |
|
display: none; |
|
} |
|
|
|
& > i:nth-of-type(2) { |
|
border: 1rem solid $none; |
|
border-left: 3rem solid $r1; |
|
top: -8.5rem; |
|
left: 4.25rem; |
|
box-shadow: none; |
|
|
|
&:before { |
|
top: 3.25rem; |
|
left: -8.25rem; |
|
background: $stone; |
|
width: 2.75rem; |
|
height: 5rem; |
|
border-radius: 0.25rem 0.25rem 50% 50%; |
|
box-shadow: 4rem 0 0 $stone, |
|
// |
|
8rem 0 0 $stone, |
|
// |
|
12rem 0 0 $stone; |
|
} |
|
|
|
&:after { |
|
width: 14.5rem; |
|
height: 3rem; |
|
top: 6.25rem; |
|
border-radius: 0 0 2rem 2rem; |
|
background: $stone; |
|
left: -8.25rem; |
|
filter: none; |
|
border: none; |
|
box-shadow: none; |
|
} |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
&:before { |
|
box-shadow: inset 0 0 0 0.5rem $ls, |
|
// |
|
-2rem -12.5rem 0 $tre2; |
|
} |
|
} |
|
} |
|
} |
|
|
|
//lighthouse |
|
|
|
.hs.house.row4.col1:not(:checked) |
|
~ .hs.house.row4.col2:checked |
|
~ .hs.house.row4.col3:not(:checked) |
|
~ .hs.house.row3.col1:not(:checked) |
|
~ .hs.shed.row3.col2:checked |
|
~ .hs.house.row3.col3:not(:checked) |
|
~ .hs.house.row2.col1:not(:checked) |
|
~ .hs.house.row2.col2:checked |
|
~ .hs.house.row2.col3:not(:checked) |
|
~ .hs.house.row1.col1:not(:checked) |
|
~ .hs.shed.row1.col2:checked |
|
~ .hs.house.row1.col3:not(:checked) |
|
~ { |
|
div > div > house > .row1.col2, |
|
div > div > house > .row2.col2, |
|
div > div > house > .row3.col2, |
|
div > div > house > .row4.col2 { |
|
z-index: 310; |
|
background: none; |
|
border: none; |
|
//back |
|
&:before, |
|
&:after { |
|
width: 80%; |
|
height: 105%; |
|
background: linear-gradient(to right, $s1, currentColor); |
|
transform: skewX(-2deg); |
|
border-radius: 0.1rem 0.1rem 50% 50% / 50% 50% 0.25rem 0.25rem; |
|
top: 0; |
|
left: -1rem; |
|
box-shadow: none; |
|
filter: none; |
|
opacity: 1; |
|
} |
|
|
|
&:after { |
|
left: auto; |
|
right: -1rem; |
|
transform: skewX(2deg); |
|
background: linear-gradient(to right, $none, currentColor, $sd); |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
border-radius: 50%; |
|
} |
|
|
|
& > i:nth-of-type(3) { |
|
border-radius: 2rem 2rem 0.5rem 0.5rem; |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
&:after { |
|
box-shadow: inset 0 0 0 0.5rem $ls; |
|
} |
|
} |
|
} |
|
//light |
|
div > div > house > .row1.col2 { |
|
& > i:nth-of-type(1) { |
|
display: none; |
|
} |
|
|
|
& > i:nth-of-type(2) { |
|
width: 8rem; |
|
height: 12rem; |
|
border: 0.5rem solid $none; |
|
border-top: 1rem solid $smoke; |
|
border-bottom: 6rem solid $dark; |
|
border-radius: 0.5rem 0.5rem 0 0; |
|
top: -12rem; |
|
left: 0; |
|
right: 0; |
|
margin: auto; |
|
background: repeating-linear-gradient( |
|
to right, |
|
$smoke 0.5rem, |
|
$smoke 1rem, |
|
$none 1rem, |
|
$none 3.25rem |
|
), |
|
// |
|
repeating-linear-gradient( |
|
45deg, |
|
$dark, |
|
$dark 0.2rem, |
|
$none 0.5rem, |
|
$none 1rem |
|
), |
|
// |
|
repeating-linear-gradient( |
|
-45deg, |
|
$dark, |
|
$dark 0.2rem, |
|
$none 0.5rem, |
|
$none 1rem |
|
); |
|
box-shadow: inset 0 -1rem 0 $smoke; |
|
background-size: cover; |
|
|
|
&:before { |
|
border: 3rem solid $none; |
|
width: 6.5rem; |
|
box-shadow: inset 0 3rem 0 $dark; |
|
border-bottom-color: $tre2; |
|
top: -10rem; |
|
right: 0; |
|
margin: auto; |
|
height: 9rem; |
|
border-radius: 0; |
|
background: none; |
|
} |
|
|
|
&:after { |
|
width: 12.5rem; |
|
background: repeating-linear-gradient( |
|
to right, |
|
$smoke, |
|
$smoke 0.5rem, |
|
$none 0.5rem, |
|
$none 1.32rem |
|
); |
|
height: 5rem; |
|
top: 6rem; |
|
border-radius: 0.5rem; |
|
border: none; |
|
border-bottom: 1rem solid $smoke; |
|
border-top: 0.5rem solid $smoke; |
|
left: -10rem; |
|
right: -10rem; |
|
margin: auto; |
|
box-shadow: none; |
|
display: block; |
|
} |
|
} |
|
} |
|
|
|
div > div > house > .row3.col2 { |
|
//back |
|
color: $stone; |
|
|
|
&:before, |
|
&:after { |
|
left: -0.5rem; |
|
} |
|
|
|
&:after { |
|
left: auto; |
|
right: -0.5rem; |
|
} |
|
} |
|
|
|
div > div > house > .row2.col2 { |
|
//back |
|
&:before, |
|
&:after { |
|
left: 0; |
|
} |
|
|
|
&:after { |
|
left: auto; |
|
right: 0; |
|
} |
|
} |
|
|
|
div > div > house > .row1.col2 { |
|
color: $stone; |
|
//back |
|
&:before, |
|
&:after { |
|
left: 0.5rem; |
|
} |
|
|
|
&:after { |
|
left: auto; |
|
right: 0.5rem; |
|
} |
|
} |
|
|
|
text { |
|
transform: scale(1) !important; |
|
z-index: 410; |
|
transition: all 0.5s 1s ease-in-out; |
|
opacity: 1; |
|
|
|
welldone { |
|
display: block; |
|
} |
|
|
|
gameover { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
.hs.row2.col2:checked ~ { |
|
div > div > house > .row2.col2 { |
|
& > i:nth-of-type(4) { |
|
border-radius: 50% !important; |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
&:after { |
|
box-shadow: inset 0 0 0 0.5rem $ls; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.house.row4.col2:checked ~ .hs.shed.row3.col2:checked ~ { |
|
div > div > house > .row3.col2 { |
|
& > i:nth-of-type(4) { |
|
border-radius: 50%; |
|
} |
|
|
|
& > i:nth-of-type(4) { |
|
&:after { |
|
box-shadow: inset 0 0 0 0.5rem $ls; |
|
} |
|
} |
|
} |
|
} |
|
// ## logic |
|
// |
|
// |
|
// |
|
// |
|
|
|
house label, |
|
shed label { |
|
opacity: 0; |
|
|
|
& *, |
|
&:after, |
|
&:before { |
|
transform: translate3d(0, 0, 0); |
|
} |
|
} |
|
|
|
@keyframes pop { |
|
0% { |
|
opacity: 0; |
|
transform: translate3d(0, -12rem, 0); |
|
} |
|
|
|
99% { |
|
opacity: 1; |
|
transform: translate3d(0, 0, 0); |
|
} |
|
} |
|
|
|
@keyframes popup { |
|
0% { |
|
opacity: 0; |
|
transform: translate3d(0, 12rem, 0); |
|
} |
|
|
|
99% { |
|
opacity: 1; |
|
transform: translate3d(0, 0, 0); |
|
} |
|
} |
|
|
|
$row: 1, 2, 3, 4; |
|
|
|
@each $i in $row { |
|
$col: 1, 2, 3, 4; |
|
//shed or house |
|
@each $x in $col { |
|
.shed.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x}, |
|
.house.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} { |
|
opacity: 1; |
|
|
|
&:after, |
|
& *:after { |
|
animation: pop 0.1s linear forwards; |
|
} |
|
|
|
&:before, |
|
& *:before { |
|
animation: popup 0.1s linear forwards; |
|
} |
|
} |
|
|
|
.shed.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} { |
|
& > i:nth-of-type(5) { |
|
display: none !important; |
|
} |
|
} |
|
|
|
//right |
|
.house.row#{$i}.col#{$x}:checked |
|
~ div |
|
> div |
|
> hbtn |
|
> .row#{$i}.col#{$x |
|
- |
|
1} { |
|
z-index: 100; |
|
} |
|
//left |
|
.house.row#{$i}.col#{$x}:checked |
|
~ div |
|
> div |
|
> hbtn |
|
> .row#{$i}.col#{$x |
|
+ 1} { |
|
z-index: 100; |
|
} |
|
//down |
|
.house.row#{$i}.col#{$x}:checked |
|
~ div |
|
> div |
|
> hbtn |
|
> .row#{$i |
|
+ 1}.col#{$x} { |
|
z-index: 100; |
|
} |
|
//up |
|
.house.row#{$i}.col#{$x}:checked |
|
~ div |
|
> div |
|
> hbtn |
|
> .row#{$i |
|
- |
|
1}.col#{$x} { |
|
z-index: 100; |
|
} |
|
} |
|
} |
|
|
|
$row: 1, 2, 3, 4; |
|
|
|
@each $i in $row { |
|
$col: 1, 2, 3, 4; |
|
|
|
@each $x in $col { |
|
.hs.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x} { |
|
z-index: 300; |
|
} |
|
|
|
.hs.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} { |
|
background: $base; |
|
z-index: 300; |
|
color: $base; |
|
} |
|
|
|
.hs.shed.row#{$i}.col#{$x}:checked |
|
~ div |
|
> div |
|
> house |
|
> .row#{$i}.col#{$x} { |
|
background: $r1; |
|
color: $r1; |
|
} |
|
} |
|
} |
|
|
|
$col: 1, 2, 3, 4; |
|
|
|
@each $c in $col { |
|
$row: 1, 2, 3; |
|
|
|
@each $r in $row { |
|
$hs: ( |
|
0: "shed", |
|
1: "house" |
|
); |
|
|
|
@each $y, $z in $hs { |
|
//down fix |
|
.house.row#{$r - 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
//sh |
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 1}, |
|
div > div > #{$z} > .row#{$r}.col#{$c - 1}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
//..s |
|
//.ssh |
|
//..s |
|
div > div > #{$z} > .row#{$r}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 1}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c - 1}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
//.s |
|
//sssh |
|
//.s |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c - 1}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
//s |
|
//sssh |
|
//s |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c - 2}:checked ~ { |
|
//s |
|
//s |
|
//ssh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r - 2}.col#{$c - 3}:checked ~ { |
|
//ss |
|
//s |
|
//sssh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ { |
|
//sss |
|
//s |
|
//sssh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
//ssss |
|
//s |
|
//sssh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r - 2}.col#{$c - 2}:checked ~ { |
|
//sss |
|
//.s |
|
//.ssh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
//.sss |
|
//.s |
|
//.ssh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c - 1}:checked ~ { |
|
.hs.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
//..ss |
|
//..s |
|
//..sh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c - 1}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
//sss |
|
//s.s |
|
//..sh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
//sss |
|
//s.s |
|
//s.sh |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c - 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
//..sh |
|
//..s |
|
//..s |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//.ssh |
|
//.s. |
|
//.s. |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//sssh |
|
//s |
|
//s |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 2}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r + 1}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//sssh |
|
//s |
|
//ss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
2}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//sssh |
|
//s |
|
//sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//sssh |
|
//s |
|
//ssss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 2}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r + 1}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//.ssh |
|
//.s |
|
//sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//.ssh |
|
//.s |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 2}.col#{$c - 1}:checked ~ { |
|
.hs.row#{$r + 1}.col#{$c - 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//..sh |
|
//..s |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 1}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c - 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//..sh |
|
//..s |
|
//sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c - 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//..sh |
|
//s.s |
|
//sss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//s.sh |
|
//s.s |
|
//sss |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 2}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
//..sh |
|
//.ss |
|
//ss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r |
|
+ 1}.col#{$c}:checked |
|
~ { |
|
//s |
|
//s.sh |
|
//sss |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c - 3}:checked ~ { |
|
//ss |
|
//s.sh |
|
//sss |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c - 1}:checked ~ { |
|
//.ss |
|
//..sh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r - 2}.col#{$c - 2}:checked ~ { |
|
//ss |
|
//.ss |
|
//..sh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r - 3}.col#{$c - 2}:checked ~ { |
|
//ss |
|
//.ss |
|
//..ss |
|
//...h |
|
div > div > #{$z} > .row#{$r - 3}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 3}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r - 3}.col#{$c + 2}:checked ~ { |
|
//..ss |
|
//sss |
|
//s |
|
//h |
|
div > div > #{$z} > .row#{$r - 3}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r - 3}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
//s |
|
//sss |
|
//s.sh |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
3}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
//s |
|
//sss |
|
//s.ss |
|
//...h |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 3}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
//sss |
|
//s.sh |
|
//S |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
//sss |
|
//s.sh |
|
//ss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
//sss |
|
//s.s |
|
//s.h |
|
div > div > #{$z} > .row#{$r}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 2}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
//sss |
|
//s.h |
|
//s |
|
div > div > #{$z} > .row#{$r}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 3}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
//ssss |
|
//s..h |
|
//s |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
2}:checked |
|
~ { |
|
.hs.row#{$r}.col#{$c - 3}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
//ssss |
|
//s..h |
|
//sss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .house.row#{$r}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ { |
|
//ssss |
|
//s..s |
|
//ssh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c - 1}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ { |
|
//ssss |
|
//s |
|
//sh |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ { |
|
//ssss |
|
//s..s |
|
//sh.s |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
//sss |
|
//h.ss |
|
//..s |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//ssss |
|
//h.ss |
|
//...s |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//ssss |
|
//h..s |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c + 2}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
//sss |
|
//h.s |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
//hs |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
//.sss |
|
//hs |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//...s |
|
//hs.s |
|
//.sss |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//.sss |
|
//hs.s |
|
//...s |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
//..ss |
|
//hs.s |
|
//.sss |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//.sss |
|
//hs.s |
|
//..ss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//ssss |
|
//s..s |
|
//h.ss |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
//sss |
|
//s.s |
|
//h.ss |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//.sss |
|
//ss.s |
|
//h.ss |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c - 2}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
//sss |
|
//s.h |
|
//ss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
//..sh |
|
//sss |
|
//.s. |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { |
|
//s.sh |
|
//sss |
|
//s.. |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.house.row#{$r - 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.house.row#{$r - 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 1}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.house.row#{$r - 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r - 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//h..s |
|
//s..s |
|
//ssss |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//h.s. |
|
//s.s. |
|
//sss. |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c + 2}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//h.ss |
|
//s..s |
|
//ssss |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 2}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//h.ss |
|
//s.s. |
|
//sss. |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c + 2}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 2}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//h... |
|
//s.ss |
|
//sss. |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c + 2}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//h..s |
|
//s.ss |
|
//sss. |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//h... |
|
//ss.. |
|
//.ss. |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.house.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//h... |
|
//ss.. |
|
//.sss |
|
.hs.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.house.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//h... |
|
//ss.s |
|
//.sss |
|
.hs.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.house.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//h..s |
|
//ss.s |
|
//.sss |
|
.hs.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.house.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//h.ss |
|
//ss.s |
|
//.sss |
|
.hs.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.house.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//h.ss |
|
//sss |
|
//..ss |
|
//not done yet |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.house.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
//experiment |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
//hs |
|
div > div > #{$z} > .row#{$r}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
//.s |
|
//hss |
|
//.s |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 1}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
//..s |
|
//hsss |
|
//..s |
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
//...s |
|
//hsss |
|
//...s |
|
.hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c + 1}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
//hs |
|
//.ss |
|
//.s |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 2}.col#{$c + 1}:checked ~ { |
|
.hs.row#{$r + 1}.col#{$c + 1}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
//hs |
|
//.s |
|
//sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c + 1}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
//hs |
|
//.s |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c + 1}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
//hs |
|
//.s.s |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.house.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
//hs.s |
|
//.s.s |
|
//.sss |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c + 2}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
//hss |
|
//..ss |
|
//..s |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 2}.col#{$c + 2}:checked ~ { |
|
.hs.row#{$r + 1}.col#{$c + 2}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
//hss |
|
//..s |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 1}, |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c + 2}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
//hss |
|
//..s |
|
//sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 1}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//hsss |
|
//...s |
|
//...s |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r + 2}.col#{$c + 3}:checked ~ { |
|
.hs.row#{$r + 1}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//hsss |
|
//...s |
|
//..ss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//hsss |
|
//...s |
|
//.sss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
+ 2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r + 1}.col#{$c + 3}:checked ~ { |
|
.house.row#{$r}.col#{$c}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
//hsss |
|
//...s |
|
//ssss |
|
div > div > #{$z} > .row#{$r + 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
//////////////////////////////// |
|
//UP |
|
//x... |
|
//x... |
|
//x... |
|
//x... |
|
.house.row#{$r + 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c} { |
|
opacity: $y; |
|
} |
|
//RIGHT |
|
//xxx. |
|
//x.xx |
|
//xx.x |
|
//...x |
|
.hs.row#{$r}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//xxx. |
|
//x.xx |
|
//xx.x |
|
//...x |
|
.hs.row#{$r}.col#{$c - 3}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//.... |
|
//.xxx |
|
//xx.x |
|
//...x |
|
.hs.row#{$r}.col#{$c - 2}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//.xxx |
|
//.x.x |
|
//xx.x |
|
//...x |
|
.hs.row#{$r}.col#{$c - 2}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
//RIGHT |
|
//.... |
|
//xxxx |
|
//x..x |
|
//...x |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
//RIGHT |
|
//.... |
|
//.xxx |
|
//.x.x |
|
//...x |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
//RIGHT |
|
//.xxx |
|
//.x.x |
|
//...x |
|
//...x |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//.xxx |
|
//.x.x |
|
//.x.x |
|
//...x |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
|
|
div > div > #{$z} > .row#{$r}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//.xxx |
|
//.x.x |
|
//xx.x |
|
//...x |
|
.hs.row#{$r - 2}.col#{$c - 2}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 4} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//.xxx |
|
//xx.x |
|
//x..x |
|
//...x |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//xxxx |
|
//x..x |
|
//...x |
|
//...x |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//xxxx |
|
//x..x |
|
//x..x |
|
//...x |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//LEFT |
|
//.... |
|
//.... |
|
//xxxx |
|
//x... |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
//new bit |
|
.hs.row#{$r}.col#{$c + 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
//silly down |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
//backwards |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 1}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//> |
|
.hs.row#{$r - 1}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 2}:checked ~, |
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//.... |
|
//.... |
|
//xxxx |
|
//...x |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ { |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c - 1}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 1}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//^ |
|
.hs.row#{$r}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c - 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c - 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c - 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c - 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c - 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//^ |
|
/////// |
|
/////// |
|
/////// |
|
.hs.row#{$r}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c} { |
|
opacity: $y; |
|
} |
|
//weirddown |
|
//.... |
|
//xxx. |
|
//x.xx |
|
//x... |
|
.hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ div |
|
> div |
|
> #{$z} |
|
> .row#{$r}.col#{$c |
|
+ 3} { |
|
opacity: $y; |
|
} |
|
//wierd down |
|
//xxxx |
|
//x..x |
|
//x.xx |
|
//x... |
|
.hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
//wierd down |
|
//xxx. |
|
//x.x. |
|
//x.xx |
|
//x... |
|
.hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r}.col#{$c |
|
+ 3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
} |
|
//LEFT |
|
//.... |
|
//xxxx |
|
//x... |
|
//x... |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
//DOWN |
|
//.... |
|
//xxx. |
|
//x.x. |
|
//x... |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
//DOWN |
|
//.... |
|
//xxxx |
|
//x..x |
|
//x... |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ div |
|
> div |
|
> #{$z} |
|
> .row#{$r}.col#{$c |
|
+ 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//.... |
|
//xxxx |
|
//...x |
|
//...x |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 2}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c - 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
/////// |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c - 3}, |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
3}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
///////// |
|
.hs.row#{$r - 1}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c} { |
|
opacity: $y; |
|
} |
|
//wierd down |
|
//xxx. |
|
//x.x. |
|
//x.x. |
|
//x... |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 2}, |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 1}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
.hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
//wierd down |
|
//xxx. |
|
//x.x. |
|
//x.xx |
|
//x... |
|
.hs.row#{$r}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
//wierd down |
|
//xxxx |
|
//x..x |
|
//x..x |
|
//x... |
|
.hs.row#{$r |
|
- |
|
1}.col#{$c |
|
+ 3}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
+ 3}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
//LEFT |
|
//xxxx |
|
//x... |
|
//x... |
|
//x... |
|
.hs.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 1}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
|
|
.hs.row#{$r - 2}.col#{$c + 2}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
//DOWN |
|
//xxx. |
|
//x.x. |
|
//x... |
|
//x... |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { |
|
opacity: $y; |
|
} |
|
//DOWN |
|
//xxxx |
|
//x..x |
|
//x... |
|
//x... |
|
.hs.row#{$r - 2}.col#{$c + 3}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
//RIGHT |
|
//xxxx |
|
//...x |
|
//...x |
|
//...x |
|
.hs.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
2}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c |
|
- |
|
1}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col#{$c}:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { |
|
opacity: $y; |
|
} |
|
} |
|
//DOWN |
|
//xxxx |
|
//x..x |
|
//x..x |
|
//x... |
|
.hs.row#{$r - 2}.col#{$c}:checked ~ { |
|
div > div > #{$z} > .row#{$r - 1}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
|
|
.hs.row#{$r |
|
- |
|
1}.col#{$c}:checked |
|
~ .hs.row#{$r |
|
- |
|
2}.col4:checked |
|
~ { |
|
div > div > #{$z} > .row#{$r}.col#{$c} { |
|
opacity: $y; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
// ## lights |
|
$row: 1, 2, 3, 4; |
|
|
|
@each $i in $row { |
|
$col: 1, 2, 3, 4; |
|
|
|
@each $x in $col { |
|
.hs.row#{$i}.col#{$x}:checked ~ { |
|
div > div > house > .row#{$i}.col#{$x} { |
|
//window |
|
&.col#{random(4)} > i:nth-of-type(4) { |
|
//window |
|
background: $sun; |
|
box-shadow: inset 0 0 0 0.5rem $ls, |
|
// |
|
inset |
|
0 |
|
0 |
|
0.5rem |
|
$ds, |
|
// |
|
inset |
|
0 |
|
0 |
|
0 |
|
0.5rem |
|
$tre2, |
|
// |
|
inset |
|
0 |
|
0 |
|
1rem |
|
1rem |
|
$ds, |
|
// |
|
inset |
|
1rem |
|
0 |
|
0 |
|
$r1, |
|
// |
|
inset -1.25rem |
|
0 |
|
0 |
|
$r1, |
|
// |
|
inset |
|
0 -2rem |
|
0 |
|
yellow, |
|
// |
|
inset |
|
0 -3.5rem |
|
0 |
|
#ffa200, |
|
// |
|
0 |
|
0 |
|
2rem |
|
yellow; |
|
|
|
&:after, |
|
&:before { |
|
background: $tre2; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.lh { |
|
pointer-events: none; |
|
perspective: 30rem; |
|
perspective-origin: 50% -5rem; |
|
transform: translate3d(0, 0, -100rem) scale(0); |
|
opacity: 0; |
|
} |
|
|
|
.hs.house.row4.col1:not(:checked) |
|
~ .hs.house.row4.col2:checked |
|
~ .hs.house.row4.col3:not(:checked) |
|
~ .hs.house.row3.col1:not(:checked) |
|
~ .hs.shed.row3.col2:checked |
|
~ .hs.house.row3.col3:not(:checked) |
|
~ .hs.house.row2.col1:not(:checked) |
|
~ .hs.house.row2.col2:checked |
|
~ .hs.house.row2.col3:not(:checked) |
|
~ .hs.house.row1.col1:not(:checked) |
|
~ .hs.shed.row1.col2:checked |
|
~ .hs.house.row1.col3:not(:checked) |
|
~ { |
|
div.lh { |
|
transform: translate3d(0, 0, -100rem) scale(1); |
|
/* animation: lightson $timer linear infinite;*/ |
|
light { |
|
top: -12rem; |
|
left: -6.25rem; |
|
transform: scaleX(3) rotateY(0); |
|
/* animation: light 8s linear infinite;*/ |
|
filter: blur(0.1rem); |
|
opacity: 0.5; |
|
|
|
&, |
|
&:before, |
|
&:after { |
|
background: linear-gradient(to right, $none, rgba(#fff466, 0.5), $none); |
|
width: 100%; |
|
height: 5rem; |
|
} |
|
|
|
&:before { |
|
transform: rotate(15deg) rotateY(-5deg); |
|
} |
|
|
|
&:after { |
|
transform: rotate(-15deg) rotateY(5deg); |
|
} |
|
} |
|
|
|
lens { |
|
top: -12rem; |
|
left: -6.25rem; |
|
width: 100%; |
|
height: 5rem; |
|
|
|
&:before, |
|
&:after { |
|
height: 5rem; |
|
border-radius: 50%; |
|
right: 0; |
|
margin: auto; |
|
} |
|
|
|
&:before { |
|
background: linear-gradient(to right, $none, rgba($light, 0.5), $none); |
|
width: 100%; |
|
transform: scaleX(3) rotateY(0); |
|
opacity: 0.25; |
|
filter: blur(0.1rem); |
|
} |
|
|
|
&:after { |
|
width: 5rem; |
|
background: radial-gradient($light, $none); |
|
opacity: 0.75; |
|
box-shadow: 60rem 0 15rem $light, -60rem 0 15rem $light, 0 0 3rem $light, |
|
inset 0 0 0 $light; |
|
} |
|
} |
|
} |
|
} |
|
|
|
div.lh { |
|
animation: lightson $timer linear infinite; |
|
|
|
light { |
|
animation: light 8s linear infinite; |
|
} |
|
|
|
lens { |
|
&:before { |
|
animation: light 8s linear infinite; |
|
} |
|
|
|
&:after { |
|
animation: light2 8s ease-in-out infinite; |
|
} |
|
} |
|
} |
|
|
|
@keyframes light { |
|
100% { |
|
transform: scaleX(3) rotateY(-360deg); |
|
} |
|
} |
|
|
|
@keyframes lightson { |
|
20%, |
|
80% { |
|
opacity: 0; |
|
} |
|
|
|
25%, |
|
75% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
@keyframes light2 { |
|
22%, |
|
27%, |
|
72%, |
|
77% { |
|
box-shadow: 0rem 0 15rem $light, 0rem 0 15rem $light, 0 0 3rem $light, |
|
inset 0 0 0 0 $light; |
|
} |
|
|
|
24%, |
|
74% { |
|
box-shadow: 0rem 0 15rem $light, 0rem 0 15rem $light, |
|
0 0 5rem 40rem rgba($light, 0.25), inset 0 0 0 2.5rem $light; |
|
} |
|
|
|
50% { |
|
box-shadow: -60rem 0 15rem $light, 60rem 0 15rem $light, 0 0 3rem $light, |
|
inset 0 0 0 0 $light; |
|
} |
|
} |
|
// ## gfx |
|
#graphics { |
|
top: 1rem; |
|
left: auto; |
|
right: 1rem; |
|
font-family: Telefon, Sans-Serif; |
|
font-size: 1.4rem; |
|
z-index: 1000; |
|
letter-spacing: 0.1rem; |
|
color: #fff; |
|
line-height: 1.5; |
|
max-height: 2.5rem; |
|
overflow: hidden; |
|
|
|
label { |
|
display: flex; |
|
align-content: center; |
|
justify-content: flex-end; |
|
gap: 0.5rem; |
|
padding: 0.5rem; |
|
border-radius: 1rem; |
|
cursor: pointer; |
|
transition: box-shadow 0.2s ease-in-out; |
|
box-shadow: 0 0 0 1rem $none, inset 0 0 0 0 rgba(#fff, 0.2); |
|
|
|
&:not(:nth-of-type(1)):hover { |
|
box-shadow: 0 0 0 0 rgba(#fff, 0.2), inset 0 0 0 2rem rgba(#fff, 0.2); |
|
} |
|
} |
|
|
|
* { |
|
position: static; |
|
} |
|
} |
|
|
|
#gfxmenu:checked ~ #graphics { |
|
max-height: 10rem; |
|
} |
|
|
|
#poor:checked ~ colour > div > div > house > label > i:nth-of-type(1), |
|
#poor:checked ~ colour > div > div > shed > label > i:nth-of-type(1), |
|
#poor:checked ~ colour > div > lens, |
|
#poor:checked ~ colour > water:before, |
|
#poor:checked ~ colour water:after { |
|
display: none; |
|
} |
|
|
|
#poor:checked ~ colour > div > div.main { |
|
-webkit-box-reflect: none; |
|
} |
|
|
|
#poor:checked ~ sky > time { |
|
opacity: 0; |
|
} |
|
|
|
#poor:checked ~ text > welldone, |
|
#poor:checked ~ text > gameover { |
|
box-shadow: none; |
|
} |
|
|
|
#good:checked ~ x > [for="good"], |
|
#poor:checked ~ x > [for="poor"] { |
|
box-shadow: 0 0 0 0 rgba(#fff, 0.1), inset 0 0 0 2rem rgba(#fff, 0.1); |
|
|
|
&:before { |
|
content: "✓"; |
|
position: static; |
|
} |
|
} |
|
|
|
#poor:checked ~ colour > div > div > shed > label, |
|
#poor:checked ~ colour > div > div > house > label { |
|
&:after, |
|
& *:after { |
|
animation: none !important; |
|
} |
|
|
|
&:before, |
|
& *:before { |
|
animation: none !important; |
|
} |
|
} |
|
|
|
[for="gfxmenu"]:after { |
|
border-bottom: 0.1rem solid #fff; |
|
border-right: 0.1rem solid #fff; |
|
transform: rotate(45deg) scaleY(1); |
|
position: relative; |
|
width: 0.6rem; |
|
height: 0.6rem; |
|
margin-left: 0.4rem; |
|
top: 0.5rem; |
|
transition: all 0.2s ease-in-out; |
|
} |
|
|
|
#gfxmenu:checked ~ x > [for="gfxmenu"]:after { |
|
transform: rotate(-45deg) scaleY(-1); |
|
} |
|
script { |
|
display: none; |
|
} |