oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor Room button styles to remove cruft and clean up

Browse source
This commit is contained in:
sorrelbri 2020-04-11 21:43:48 -07:00
parent a9025aca8f
commit a9243840a6
1 changed files with 41 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
packages/play-node-go/src/components/Button/Room/Room.scss
View file

@ -3,18 +3,16 @@
div.RoomButton { div.RoomButton {
display: grid; display: grid;
grid-template-columns: [left] 1fr [right];
grid-template-rows: [top] 1fr [middle] 4fr [bottom];
height: 20vh; height: 20vh;
padding: 1vw; padding: 1vw;
width: 20vh; width: 20vh;
grid-template-columns: [left] 1fr [right];
grid-template-rows: [top] 1fr [middle] 4fr [bottom];
.RoomButton__room-link { .RoomButton__room-link {
@include gameViewLabel;
align-self: self-end; align-self: self-end;
grid-area: top/left/middle/right; grid-area: top/left/middle/right;
// margin: 0 auto;
@include gameViewLabel;
// text-transform: capitalize;
max-width: fit-content; max-width: fit-content;
z-index: 1; z-index: 1;
@ -24,76 +22,76 @@ div.RoomButton {
} }
div.small-room { div.small-room {
display: grid;
grid-area: top/left/bottom/right; grid-area: top/left/bottom/right;
grid-template-rows: [sky-start] 4vh [roof-start] 5vh [body-start] 1fr [body-end];
height: 100%; height: 100%;
width: 100%; width: 100%;
// background-color: #f00;
display: grid;
grid-template-rows: [sky-start] 4vh [roof-start] 5vh [body-start] 1fr [body-end];
.small-room__roof { .small-room__roof {
display: grid; display: grid;
grid-row: roof-start / body-start; grid-row: roof-start / body-start;
height: 100%;
max-width: 20vh;
grid-template-columns: [left] 10vh [middle] 10vh [right]; grid-template-columns: [left] 10vh [middle] 10vh [right];
grid-template-rows: 1fr; grid-template-rows: 1fr;
height: 100%;
max-width: 20vh;
.small-room__roof-top { .small-room__roof-top {
background: map-get($small-room, "roof");
box-shadow: 0 0.35vh 0.75vh map-get($colors, "home");
grid-row: 1 / 2;
height: 0.7vh; height: 0.7vh;
width: 12vh;
position: relative; position: relative;
top: 3vh; top: 3vh;
background: map-get($small-room, "roof"); width: 12vh;
grid-row: 1 / 2;
box-shadow: 0 0.35vh 0.75vh map-get($colors, "home");
&--left { &--left {
grid-column: left / middle; grid-column: left / middle;
transform: rotate(-26deg);
left: -1.2vh; left: -1.2vh;
transform: rotate(-26deg);
} }
&--right { &--right {
grid-column: middle / right; grid-column: middle / right;
transform: rotate(26deg);
left: -0.8vh; left: -0.8vh;
transform: rotate(26deg);
} }
} }
&--left { &--left {
border-right: map-get($small-room, "body") solid 10vh; border-right: map-get($small-room, "body") solid 10vh;
border-top: map-get($colors, "home") solid 5vh; border-top: map-get($colors, "home") solid 5vh;
height: 0;
grid-column: left / middle; grid-column: left / middle;
height: 0;
} }
&--right { &--right {
border-left: map-get($small-room, "body") solid 10vh; border-left: map-get($small-room, "body") solid 10vh;
border-top: map-get($colors, "home") solid 5vh; border-top: map-get($colors, "home") solid 5vh;
height: 0;
grid-column: middle / right; grid-column: middle / right;
height: 0;
} }
} }
.small-room__body { .small-room__body {
grid-row: body-start / body-end;
background-color: map-get($small-room, "body"); background-color: map-get($small-room, "body");
width: 80%;
justify-self: center;
display: grid; display: grid;
grid-template-rows: 1fr 1vh 5fr 0.75vh; grid-row: body-start / body-end;
grid-template-columns: 0.5vh 1vh 2fr 1vh 3fr 1vh 2fr 1vh 0.5vh;
grid-template-areas: grid-template-areas:
"trim-left gap-left top-left gap-mid-left top-mid gap-mid-right top-right gap-right trim-right" "trim-left gap-left top-left gap-mid-left top-mid gap-mid-right top-right gap-right trim-right"
"trim-left gap-left top-left gap-mid-left top-mid gap-mid-right top-right gap-right trim-right" "trim-left gap-left top-left gap-mid-left top-mid gap-mid-right top-right gap-right trim-right"
"trim-left gap-left window--left gap-mid-left door gap-mid-right window--right gap-right trim-right" "trim-left gap-left window--left gap-mid-left door gap-mid-right window--right gap-right trim-right"
"trim-left trim--bottom-left trim--bottom-left trim--bottom-left door trim--bottom-right trim--bottom-right trim--bottom-right trim-right"; "trim-left trim--bottom-left trim--bottom-left trim--bottom-left door trim--bottom-right trim--bottom-right trim--bottom-right trim-right";
grid-template-columns: 0.5vh 1vh 2fr 1vh 3fr 1vh 2fr 1vh 0.5vh;
grid-template-rows: 1fr 1vh 5fr 0.75vh;
justify-self: center;
width: 80%;
} }
.small-room__trim { .small-room__trim {
width: 100%;
height: 100%;
background-color: map-get($small-room, "frame"); background-color: map-get($small-room, "frame");
height: 100%;
width: 100%;
&--left { &--left {
grid-area: trim-left; grid-area: trim-left;
@ -115,16 +113,16 @@ div.RoomButton {
} }
.small-room__sign { .small-room__sign {
grid-area: top-mid;
background-color: map-get($small-room, "sign"); background-color: map-get($small-room, "sign");
width: 2vh;
height: 2vh;
display: grid; display: grid;
padding: 0.1vh;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
gap: 0.1vh; gap: 0.1vh;
grid-area: top-mid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 2vh;
justify-self: center; justify-self: center;
padding: 0.1vh;
width: 2vh;
.small-room__sign__stone { .small-room__sign__stone {
border-radius: 100%; border-radius: 100%;
@ -141,12 +139,12 @@ div.RoomButton {
.small-room__window { .small-room__window {
align-self: center; align-self: center;
height: 60%;
width: 100%;
background: map-get($small-room, "window-x"), map-get($small-room, "window-y"); background: map-get($small-room, "window-x"), map-get($small-room, "window-y");
display: grid; display: grid;
grid-template-rows: 1fr 5fr 1fr 5fr 1fr;
grid-template-columns: 1fr 5fr 1fr 5fr 1fr; grid-template-columns: 1fr 5fr 1fr 5fr 1fr;
grid-template-rows: 1fr 5fr 1fr 5fr 1fr;
height: 60%;
width: 100%;
&--left { &--left {
grid-area: window--left; grid-area: window--left;
@ -157,8 +155,8 @@ div.RoomButton {
.small-room__window-frame { .small-room__window-frame {
background-color: map-get($small-room, "frame"); background-color: map-get($small-room, "frame");
width: 100%;
height: 100%; height: 100%;
width: 100%;
&--top { &--top {
grid-area: 1/1/2/6; grid-area: 1/1/2/6;
@ -189,22 +187,22 @@ div.RoomButton {
.small-room__door { .small-room__door {
grid-area: door; grid-area: door;
background: map-get($small-room, "door"); background: map-get($small-room, "door");
width: 100%;
height: 100%;
display: grid; display: grid;
grid-template-columns: 0.5vh 1fr 0.5vh; grid-template-columns: 0.5vh 1fr 0.5vh;
grid-template-rows: 0.5vh 1fr; grid-template-rows: 0.5vh 1fr;
height: 100%;
width: 100%;
.small-room__door-handle { .small-room__door-handle {
height: 0.75vh;
width: 0.75vh;
border-radius: 50%;
background: map-get($small-room, "door-handle");
grid-area: 2/2/3/3;
align-self: center; align-self: center;
background: map-get($small-room, "door-handle");
border-radius: 50%;
box-shadow: 0.1vh 0.25vh 0.4vh rgba(30, 30, 30, 0.7);
grid-area: 2/2/3/3;
height: 0.75vh;
justify-self: end; justify-self: end;
margin: 0.5vh 0.5vh 0 0; margin: 0.5vh 0.5vh 0 0;
box-shadow: 0.1vh 0.25vh 0.4vh rgba(30, 30, 30, 0.7); width: 0.75vh;
} }
.small-room__door-frame { .small-room__door-frame {