You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.3 KiB
Svelte
111 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import type { PlantData } from "$lib/plants";
|
|
|
|
export let temp: PlantData["temp"];
|
|
</script>
|
|
|
|
<div
|
|
class="temp-bar"
|
|
title="Tolerates temperatures between {temp.lower}°C and {temp.upper}°C. Dies below {temp.death}°C."
|
|
>
|
|
<div
|
|
class="temp lower-temp-death"
|
|
style="width: {temp.death / (4 / 10)}%"
|
|
aria-hidden="true"
|
|
>
|
|
<p>
|
|
<i class="ri-skull-fill icon" aria-hidden="true" /> < {temp.death}} °C
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="temp lower-temp-live"
|
|
aria-hidden="true"
|
|
style="width: {(temp.lower - temp.death) / (4 / 10)}%"
|
|
/>
|
|
<div
|
|
class="temp temp-live"
|
|
aria-hidden="true"
|
|
style="width: {(temp.upper - temp.lower) / (4 / 10)}%"
|
|
>
|
|
<p>
|
|
<i class="ri-plant-fill icon" aria-hidden="true" />{temp.lower}°C - {temp.upper}°C
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="temp upper-temp-live"
|
|
aria-hidden="true"
|
|
style="width: {(40 - temp.upper) / (4 / 10)}%"
|
|
/>
|
|
<div class="shadow-pseudo" />
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use "../../../colors.scss";
|
|
|
|
.temp-bar {
|
|
height: 1em;
|
|
width: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
margin-bottom: 0.5em;
|
|
|
|
.temp {
|
|
height: 1em;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
p {
|
|
font-size: 0.85em;
|
|
display: flex;
|
|
margin: -0.1em auto 0;
|
|
white-space: nowrap;
|
|
z-index: 3;
|
|
|
|
.icon {
|
|
padding-right: 0.25em;
|
|
margin-top: 0.15em;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shadow-pseudo {
|
|
height: 1em;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-shadow: 0.35em 0.35em colors.$highlight;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.lower-temp-death {
|
|
text-align: right;
|
|
border-radius: 1em 0 0 1em;
|
|
background-image: linear-gradient(to right, colors.$red, colors.$yellow);
|
|
|
|
p {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.lower-temp-live {
|
|
background-image: linear-gradient(to right, colors.$yellow, colors.$blue);
|
|
}
|
|
|
|
.temp-live {
|
|
background-color: colors.$blue;
|
|
text-align: center;
|
|
}
|
|
|
|
.upper-temp-live {
|
|
background-image: linear-gradient(to right, colors.$blue, colors.$yellow);
|
|
border-radius: 0 1em 1em 0;
|
|
|
|
p {
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|