mirror of
https://github.com/tobspr/shapez.io.git
synced 2026-03-02 03:39:21 +00:00
Initial commit
This commit is contained in:
Tobias Springer
8
src/css/ingame_hud/beta_overlay.scss
Normal file
8
src/css/ingame_hud/beta_overlay.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
#ingame_HUD_BetaOverlay {
|
||||
position: fixed;
|
||||
@include S(top, 10px);
|
||||
@include S(right, 15px);
|
||||
color: $colorRedBright;
|
||||
@include Heading;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
8
src/css/ingame_hud/blur_overlay.scss
Normal file
8
src/css/ingame_hud/blur_overlay.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
body.ingameDialogOpen {
|
||||
#ingame_Canvas,
|
||||
#ingame_HUD_GameMenu,
|
||||
#ingame_HUD_KeybindingOverlay,
|
||||
#ingame_HUD_buildings_toolbar {
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
35
src/css/ingame_hud/building_placer.scss
Normal file
35
src/css/ingame_hud/building_placer.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
#ingame_HUD_building_placer {
|
||||
position: fixed;
|
||||
@include S(bottom, 60px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include S(padding, 6px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $ingameHudBg;
|
||||
@include S(border-radius, 4px);
|
||||
background: #333;
|
||||
@include S(width, 300px);
|
||||
|
||||
.buildingLabel {
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
@include S(margin-bottom, 2px);
|
||||
}
|
||||
|
||||
.instructions,
|
||||
.description {
|
||||
text-align: center;
|
||||
color: mix($accentColorDark, $accentColorBright, 50%);
|
||||
@include SuperSmallText;
|
||||
}
|
||||
|
||||
@include StyleBelowWidth(700px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
181
src/css/ingame_hud/buildings_toolbar.scss
Normal file
181
src/css/ingame_hud/buildings_toolbar.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
#ingame_HUD_buildings_toolbar {
|
||||
position: fixed;
|
||||
@include S(bottom, 0px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
$toolbarBg: rgba($accentColorBright, 0.9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $toolbarBg;
|
||||
// border: $ingameHudBorder;
|
||||
border-bottom-width: 0;
|
||||
|
||||
@include S(border-radius, 4px, 4px, 0, 0);
|
||||
// box-shadow: 0 0 0 #{D(2px)} rgba(darken($toolbarBg, 20), 0.5);
|
||||
transition: transform 0.12s ease-in-out;
|
||||
|
||||
&:not(.visible) {
|
||||
transform: translateX(-50%) translateY(#{D(100px)});
|
||||
}
|
||||
|
||||
.buildings {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(padding, 0, 5px);
|
||||
|
||||
.building {
|
||||
color: $accentColorDark;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(padding, 5px);
|
||||
@include S(padding-bottom, 7px);
|
||||
$buildingIconSize: 32px;
|
||||
|
||||
&:not(.unlocked) {
|
||||
@include S(width, 30px);
|
||||
.tooltip {
|
||||
display: none !important;
|
||||
}
|
||||
.keybinding,
|
||||
.iconWrap {
|
||||
opacity: 0.01;
|
||||
}
|
||||
&::before {
|
||||
opacity: 0.5;
|
||||
content: " ";
|
||||
background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
// &:first-child .tooltip {
|
||||
// display: flex;
|
||||
// }
|
||||
|
||||
pointer-events: all;
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
&.unlocked:hover {
|
||||
background: rgba($accentColorDark, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.iconWrap {
|
||||
position: relative;
|
||||
@include S(width, $buildingIconSize);
|
||||
@include S(height, $buildingIconSize);
|
||||
@include S(margin-top, 3px);
|
||||
@include S(margin-bottom, 6px);
|
||||
}
|
||||
|
||||
.label {
|
||||
@include SuperSmallText;
|
||||
display: none;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
// position: relative;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
@include S(bottom, 2pxpx);
|
||||
}
|
||||
|
||||
&[data-tilewidth="2"] {
|
||||
.iconWrap {
|
||||
@include S(width, 2 * $buildingIconSize);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
background: #333;
|
||||
@include S(padding, 7px);
|
||||
bottom: calc(100% + #{D(10px)});
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: content-box;
|
||||
@include SuperSmallText;
|
||||
@include S(width, 200px);
|
||||
@include S(border-radius, 4px);
|
||||
|
||||
box-shadow: #{D(1px)} #{D(1px)} 0 0 rgba(0, 10, 25, 0.2);
|
||||
|
||||
display: none;
|
||||
z-index: 9999;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
@include PlainText;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #aaa;
|
||||
@include SuperSmallText;
|
||||
margin-bottom: 10px;
|
||||
strong {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tutorialImage {
|
||||
display: inline-block;
|
||||
@include S(width, 200px);
|
||||
@include S(height, 200px);
|
||||
@include S(border-radius, 4px);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-top-color: #333;
|
||||
@include S(border-width, 5px);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .tooltip {
|
||||
display: flex;
|
||||
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
90% {
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
transform: translate(-50%, 5%) scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
63
src/css/ingame_hud/dialogs.scss
Normal file
63
src/css/ingame_hud/dialogs.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
.ingameDialog {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: all;
|
||||
background: $modalDialogBg;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.visible {
|
||||
.dialogInner {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dialogInner {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
> .dialogInner {
|
||||
background: #fff;
|
||||
@include S(min-width, 500px);
|
||||
max-width: calc(100vw - #{D(50px)});
|
||||
max-height: calc(100vh - #{D(50px)});
|
||||
@include S(border-radius, 4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(padding, 15px);
|
||||
pointer-events: all;
|
||||
|
||||
> .title {
|
||||
@include Heading;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(margin-bottom, 10px);
|
||||
|
||||
> .closeButton {
|
||||
opacity: 0.7;
|
||||
@include S(width, 20px);
|
||||
@include S(height, 20px);
|
||||
background: uiResource("icons/close.png") center center / 60% no-repeat;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
src/css/ingame_hud/game_menu.scss
Normal file
59
src/css/ingame_hud/game_menu.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
#ingame_HUD_GameMenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: grid;
|
||||
transform: translateX(-50%);
|
||||
@include S(grid-gap, 3px);
|
||||
grid-auto-flow: column;
|
||||
|
||||
button {
|
||||
background: $colorGreenBright;
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
@include S(padding, 5px, 5px, 5px);
|
||||
transition: all 0.12s ease-in-out;
|
||||
transition-property: opacity, transform;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
@include IncreasedClickArea(10px);
|
||||
@include ButtonText;
|
||||
border: #{D(2px)} solid rgba(0, 10, 20, 0.2);
|
||||
@include S(border-width, 2px);
|
||||
border-radius: 0 0 #{D(4px)} #{D(4px)};
|
||||
@include S(border-top-width, 10px);
|
||||
@include S(padding-left, 30px);
|
||||
@include S(margin-top, -5px);
|
||||
@include S(letter-spacing, 1px, $important: true);
|
||||
background: center #{D(10px)} / #{D(20px)} no-repeat;
|
||||
@include S(min-height, 47px);
|
||||
|
||||
&[data-button-id="shop"] {
|
||||
background-color: rgb(141, 70, 223);
|
||||
background-image: uiResource("icons/shop.png");
|
||||
}
|
||||
&[data-button-id="stats"] {
|
||||
background-color: rgb(53, 235, 113);
|
||||
background-image: uiResource("icons/statistics.png");
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
border: 0;
|
||||
color: #fff;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
bottom: unset;
|
||||
// background: rgba(0, 10, 20, 0.5);
|
||||
background: transparent;
|
||||
@include S(top, -5px);
|
||||
right: unset;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
78
src/css/ingame_hud/keybindings_overlay.scss
Normal file
78
src/css/ingame_hud/keybindings_overlay.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
#ingame_HUD_KeybindingOverlay {
|
||||
position: absolute;
|
||||
@include S(top, 10px);
|
||||
@include S(left, 10px);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
> .binding {
|
||||
display: inline-grid;
|
||||
@include PlainText;
|
||||
align-items: center;
|
||||
@include S(margin-bottom, 3px);
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 2px);
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
@include S(height, 10px);
|
||||
width: 1px;
|
||||
@include S(margin, 0, 3px);
|
||||
background-color: #ccc;
|
||||
transform: rotate(10deg);
|
||||
// @include S(margin, 0, 3px);
|
||||
}
|
||||
|
||||
code {
|
||||
position: relative;
|
||||
top: unset;
|
||||
left: unset;
|
||||
margin: 0;
|
||||
&.rightMouse {
|
||||
background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;
|
||||
}
|
||||
|
||||
&.leftMouse {
|
||||
background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
|
||||
}
|
||||
}
|
||||
label {
|
||||
color: $accentColorDark;
|
||||
@include SuperSmallText;
|
||||
text-transform: uppercase;
|
||||
@include S(margin-left, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.placementActive) .binding.placementOnly {
|
||||
display: none;
|
||||
}
|
||||
&.placementActive .binding.noPlacementOnly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.binding.placementOnly,
|
||||
&:not(.placementActive) .binding.noPlacementOnly {
|
||||
transform-origin: 0% 50%;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
color: $colorRedBright;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shift .keybinding {
|
||||
transition: all 0.1s ease-in-out;
|
||||
transition-property: background-color, color, border-color;
|
||||
background: $colorRedBright;
|
||||
border-color: $colorRedBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.shiftDown .shift .keybinding {
|
||||
border-color: darken($colorRedBright, 40);
|
||||
}
|
||||
}
|
||||
180
src/css/ingame_hud/shop.scss
Normal file
180
src/css/ingame_hud/shop.scss
Normal file
@@ -0,0 +1,180 @@
|
||||
#ingame_HUD_Shop {
|
||||
.content {
|
||||
@include S(padding-right, 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.upgrade {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: #eee;
|
||||
@include S(border-radius, 3px);
|
||||
@include S(margin-bottom, 4px);
|
||||
@include S(padding, 5px, 10px);
|
||||
@include S(grid-row-gap, 5px);
|
||||
@include S(height, 95px);
|
||||
grid-template-rows: #{D(20px)} auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include Heading;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tier {
|
||||
@include S(margin-left, 5px);
|
||||
background: $colorGreenBright;
|
||||
@include S(border-radius, 4px);
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
@include S(margin-top, 1px);
|
||||
|
||||
@include S(padding, 0px, 5px);
|
||||
|
||||
&[data-tier="0"] {
|
||||
background-color: rgb(73, 186, 190);
|
||||
}
|
||||
&[data-tier="1"] {
|
||||
background-color: rgb(73, 94, 190);
|
||||
}
|
||||
&[data-tier="2"] {
|
||||
background-color: rgb(186, 73, 190);
|
||||
}
|
||||
&[data-tier="3"] {
|
||||
background-color: rgb(96, 190, 73);
|
||||
}
|
||||
&[data-tier="4"] {
|
||||
background-color: rgb(190, 91, 73);
|
||||
}
|
||||
&[data-tier="5"] {
|
||||
background-color: rgb(219, 184, 29);
|
||||
}
|
||||
&[data-tier="6"] {
|
||||
background-color: rgb(190, 73, 73);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
background: center center / contain no-repeat;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 4;
|
||||
@include S(margin-right, 20px);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
color: #aaa;
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.requirements {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 3 / 4;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 15px);
|
||||
justify-content: start;
|
||||
|
||||
.requirement {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
canvas {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
}
|
||||
|
||||
.amount {
|
||||
@include S(margin-top, 4px);
|
||||
z-index: 10;
|
||||
@include SuperSmallText;
|
||||
letter-spacing: 0;
|
||||
background: #e2e4e6;
|
||||
|
||||
@include S(line-height, 13px);
|
||||
@include S(border-radius, 2px);
|
||||
@include S(padding, 0, 2px, 3px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include S(min-width, 50px);
|
||||
overflow: hidden;
|
||||
|
||||
.progressBar {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@include S(border-radius, 2px);
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
z-index: -1;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: width, background-color;
|
||||
background: #bdbfca;
|
||||
|
||||
&.complete {
|
||||
background-color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.buy {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 3 / 4;
|
||||
align-self: end;
|
||||
justify-self: end;
|
||||
// @include S(padding, 4px, 5px);
|
||||
// @include PlainText;
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: background-color, opacity;
|
||||
|
||||
&:not(.buyable) {
|
||||
background-color: #aaa;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
&.maxLevel {
|
||||
button.buy {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.requirements {
|
||||
display: none;
|
||||
}
|
||||
.description {
|
||||
// grid-column: 2 / 4;
|
||||
// grid-row: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
color: $colorGreenBright;
|
||||
text-transform: uppercase;
|
||||
@include S(margin-top, 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
134
src/css/ingame_hud/unlock_notification.scss
Normal file
134
src/css/ingame_hud/unlock_notification.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
#ingame_HUD_UnlockNotification {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
pointer-events: all;
|
||||
@include InlineAnimation(0.1s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: rgba(#333539, 0.5);
|
||||
@include S(padding, 30px);
|
||||
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
.title,
|
||||
.subTitle {
|
||||
@include SuperHeading;
|
||||
text-transform: uppercase;
|
||||
@include S(font-size, 50px);
|
||||
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateY(-50vh);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(5vh);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-2vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include Heading;
|
||||
background: $colorGreenBright;
|
||||
display: inline-block;
|
||||
@include S(padding, 1px, 6px);
|
||||
@include S(margin, 20px, 0, 20px);
|
||||
|
||||
@include S(border-radius, 4px);
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateY(-60vh);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(6vh);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-3vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
@include S(width, 400px);
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateX(-100vw);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5vw);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(-2vw);
|
||||
}
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(grid-gap, 10px);
|
||||
|
||||
.reward {
|
||||
grid-column: 1 / 3;
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateX(200vw);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-10vw);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(4vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buildingExplanation {
|
||||
@include S(width, 200px);
|
||||
@include S(height, 200px);
|
||||
display: inline-block;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
@include S(border-radius, 4px);
|
||||
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
button.close {
|
||||
border: 0;
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateY(50vh);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5vh);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(2vh);
|
||||
}
|
||||
}
|
||||
@include S(margin-top, 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user