src/modules/market/components/market-outcomes-list/market-outcomes-list.styles.less
@import (reference) '~assets/styles/shared';
.MarketOutcomesList {
border-bottom: 1px solid @color-lightergray;
}
.MarketOutcomesList__heading {
align-items: center;
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
width: 100%;
> h2 {
&:extend(.caps--large);
}
}
.MarketOutcomesList__table {
display: table;
width: 100%;
}
.MarketOutcomesList__table-header {
&:extend(.caps--small);
color: @color-lightgray;
display: table-header-group;
> li {
display: table-cell;
padding: 0 0 0.625rem;
text-align: right;
&:first-child {
padding-left: 2rem;
text-align: left;
}
&:last-child {
padding-right: 4.5rem;
}
}
}
.MarketOutcomesList__table-body {
background-color: @color-input-background;
display: table-row-group;
font-size: @font-size-large;
line-height: @font-size-large;
}
.MarketOutcomesList__table-wrapper {
max-height: 20.5rem;
overflow-y: scroll;
}
@media @breakpoint-mobile {
.MarketOutcomesList {
border-bottom: 0;
}
.MarketOutcomesList__heading {
cursor: default;
padding: 2rem 1rem 1.5rem;
> h2 {
color: @color-white;
cursor: text;
font-size: @font-size-rather-large;
font-weight: 400;
line-height: @font-size-rather-large;
text-transform: none;
}
}
.MarketOutcomesList__table-header {
color: @color-lightgray;
> li {
&:first-child {
padding-left: 1rem;
}
&:last-child {
padding-right: 1rem;
}
}
}
.MarketOutcomesList__table-body {
background-color: transparent;
color: @color-lightgray;
}
}
@media @breakpoint-mobile-medium {
.MarketOutcomesList__heading > h2 {
font-size: @font-size-normal;
line-height: @font-size-normal;
}
.MarketOutcomesList__table-header {
font-size: @font-size-extra-small;
line-height: @font-size-medium;
> li {
text-align: left;
vertical-align: bottom;
> span {
float: right;
> span {
display: block;
}
}
}
}
}