Newer
Older
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
.temperatureComparison {
display: flex;
box-shadow: 0px 4px 16px 0px $black-shadow;
background-position: bottom right;
background-repeat: no-repeat;
height: 60px;
transition: all 0.3s ease-in-out;
&.loading {
justify-content: center;
}
&.hot {
background-image: url('../../../assets/png/temperatures/hot.svg'),
linear-gradient(259deg, rgba(6, 29, 62, 0) 25.28%, #77aee0 121.36%),
radial-gradient(
185.82% 146.65% at 50% 79.83%,
rgba(6, 29, 62, 0) 0%,
#e0bc77 100%
);
}
&.cold {
background-image: url('../../../assets/png/temperatures/cold.svg'),
radial-gradient(
185.82% 146.65% at 50% 79.83%,
rgba(6, 29, 62, 0) 0%,
#77a3e0 100%
);
}
.tc-content {
text-align: left;
flex-grow: 1;
color: $white;
}
.buttonContainer {
display: flex;
align-items: flex-start;
height: 100%;
.info-icon {
align-items: flex-start;
padding: 0;
position: relative;
top: -4px;
stroke: $white;
}