src/modules/create-market/components/create-market-preview-categorical/create-market-preview-categorical.styles.less
@import (reference) '~assets/styles/shared';
.MarketPreviewCategorical {
min-height: 0;
overflow: hidden;
position: relative;
transition: min-height 0.3s ease;
}
.MarketPreviewCategorical__height-sentinel {
display: inline-block;
visibility: hidden;
}
.MarketPreviewCategorical__outcomes {
display: grid;
grid-gap: 0.75rem 3.75rem;
grid-template-columns: repeat(3, auto);
}
.MarketPreviewCategorical__outcomes-container {
display: inline-block;
left: 0;
max-width: 100%;
position: absolute;
top: 0;
&.show-more {
padding-right: 7.5rem;
}
}
.MarketPreviewCategorical__outcome {
align-items: center;
display: flex;
justify-content: space-between;
min-width: 0;
}
.MarketPreviewCategorical__outcome-name {
line-height: 1.3rem;
max-width: 9.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.MarketPreviewCategorical__outcome-value {
&:extend(.number--large);
margin-left: 1.75rem;
}
.MarketPreviewCategorical__show-more {
&:extend(.caps--medium);
color: @color-lightgray;
cursor: pointer;
position: absolute;
right: 0;
top: 0.3rem;
}
@media @breakpoint-mobile {
.MarketPreviewCategorical__outcomes-container.show-more {
padding-right: 6rem;
}
.MarketPreviewCategorical__outcome-value {
margin-left: 3vw;
}
.MarketPreviewCategorical__outcomes {
grid-gap: 0.75rem 7vw;
}
}
@media @breakpoint-mobile-medium {
.MarketPreviewCategorical__outcome {
align-items: flex-start;
flex-direction: column;
> span {
margin-left: 0;
margin-top: 0.7rem;
width: 100%;
&:first-child {
margin-top: 0;
order: 2;
}
&:last-child {
order: 1;
}
}
}
.MarketPreviewCategorical__height-sentinel > span {
display: block;
&:first-child { margin-top: 0.7rem; }
}
.MarketPreviewCategorical__show-more {
top: 0.75rem;
}
}