src/modules/market/components/market-header/market-header.styles.less
@import (reference) '~assets/styles/shared';
@import (reference) '~modules/market/components/market-view/market-view.styles';
.MarketHeader {
color: @color-lightgray;
display: flex;
flex: 1;
flex-direction: column;
}
.MarketHeader__AdditionalDetails-text,
.MarketHeader__AdditionalDetails-text:disabled {
background: none;
border: 0;
color: @color-white;
margin: 0;
margin-top: -10px;
max-height: 89px;
overflow: hidden;
padding: 0.25rem 0;
padding-top: 0;
resize: none;
text-transform: none;
transition: max-height @animation-speed-normal @animation-default-type;
white-space: pre-wrap;
> p {
margin-top: 0;
}
}
.MarketHeader__AdditionalDetails-tall {
max-height: 1000px;
overflow-y: auto;
}
.MarketHeader__nav {
margin: 0 0 1rem;
}
.MarketHeader__back-button {
.caps--small();
display: flex;
svg {
height: 1em;
margin-right: 0.2em;
polyline {
stroke: @color-lightgray;
}
}
}
.MarketHeader__main-values {
display: flex;
flex: 1;
margin-bottom: 1.25rem;
}
.MarketHeader__description {
color: @color-white;
flex-grow: 1;
}
.MarketHeader__descriptionContainer {
background-color: rgba(55, 46, 75, 0.41);
border-radius: 4px;
overflow-y: auto;
padding: 1em;
padding-bottom: 0;
> p {
margin-bottom: 0;
}
}
.MarketHeader__descriptionContainer:focus {
outline: none;
}
.MarketHeader__readMoreButton {
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 700;
padding-bottom: 1rem;
padding-top: 0.3rem;
text-decoration: underline;
text-transform: none;
}
.MarketHeader__descContainer {
flex: 2.5;
margin-right: 1.25rem;
}
.MarketHeader__details-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 1.2rem;
}
.MarketHeader__details-button {
&:extend(.caps--small);
align-self: flex-start;
padding: 0.5em 0 0.625rem;
svg {
height: 1em;
margin-left: 0.2em;
polyline {
stroke: @color-lightgray;
}
}
}
.MarketHeader__details-container {
background-color: @color-darkpurple;
font-size: @font-size-small;
line-height: @font-size-medium;
overflow: auto;
}
.MarketHeader__details {
&:extend(.caps--small);
padding: 0;
h4 {
display: block;
padding-bottom: 0.5rem;
padding-right: 0.5em;
}
span,
p,
textarea {
color: @color-white !important;
text-transform: none;
@media @breakpoint-mobile-small {
display: block;
white-space: normal;
}
}
}
.MarketHeader__properties {
display: flex;
flex: 2;
}
.MarketHeader__resolution-source--empty_details {
margin-bottom: 1.2rem;
}
.MarketHeader__nav-isForking {
margin-top: 1.4rem;
}
@media @breakpoint-mobile {
.MarketHeader {
margin-top: 3rem;
}
.MarketHeader__descContainer {
margin-bottom: 1.25rem;
}
.MarketHeader__main-values {
flex-direction: column;
}
.MarketHeader__properties {
flex-direction: column;
margin-bottom: 1.25rem;
margin-left: 0;
}
.MarketHeader__property {
margin-bottom: 1rem;
}
.MarketHeader__nav-isForking {
margin-top: 0;
}
}