UNPKG

@randstad-design/orbit-multitheme

Version:

multitheme Front-end code based on Randstad Human Forward components

162 lines (133 loc) 6.74 kB
.share-price { opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .share-price:not([class*='share-price--change']) { opacity: 0; } .share-price:not([class*='share-price--change']) .share-price__current, .share-price:not([class*='share-price--change']) .share-price__history, .share-price:not([class*='share-price--change']) .share-price__info { height: 30px; } .share-price__current { font-size: 26px; letter-spacing: -1px; line-height: 30px; } @media (min-width: 941px) { .share-price__current { font-size: 40px; letter-spacing: -2px; line-height: 45px; } } .share-price__current span + span { margin-left: 5px; } .share-price__rate { color: #6ba5b4; } .share-price__meta { font-size: 18px; letter-spacing: 0; line-height: 30px; } @media (min-width: 941px) { .share-price__meta { font-size: 32px; letter-spacing: -1px; line-height: 40px; } } .share-price__history, .share-price__info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .share-price__history { margin-top: 10px; } .share-price__info { margin-top: 5px; } .share-price__value { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .share-price__value span:first-child { margin-right: 5px; } .share-price__company, .share-price__value:first-child { margin-right: 30px; } .share-price--change-down .share-price__rate { color: #e00f0f; } .share-price--change-down .icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .share-price--change-down svg { fill: #e00f0f; } @media (min-width: 941px) { .share-price:not([class*='share-price--change']) .share-price__current, .share-price:not([class*='share-price--change']) .share-price__history, .share-price:not([class*='share-price--change']) .share-price__info { height: 45px; } .share-price__history, .share-price__info { margin-top: 20px; } } .bg-brand--blue .share-price__rate, .bg-brand--turquoise .share-price__rate, .bg-brand--yellow .share-price__rate { color: #0f1941; } .bg-brand--blue .share-price svg, .bg-brand--turquoise .share-price svg, .bg-brand--yellow .share-price svg { fill: #0f1941; } .bg-brand--red .share-price__rate { color: #03050d; } .bg-brand--red .share-price svg { fill: #03050d; } .bg-variant-brand-primary .share-price .share-price__rate, .bg-variant-brand-primary .share-price svg { color: var(--color-white); } .bg-variant-brand-primary .share-price.share-price--change-down .share-price__rate .share-price__rate, .bg-variant-brand-primary .share-price.share-price--change-down .share-price__rate { color: var(--color-white); } .bg-variant-brand-primary .share-price.share-price--change-down .share-price__rate svg, .bg-variant-brand-primary .share-price.share-price--change-down svg { fill: var(--color-white); } .bg-variant-brand-secondary .share-price .share-price__rate, .bg-variant-brand-secondary .share-price svg { color: var(--color-white); } .bg-variant-brand-secondary .share-price.share-price--change-down .share-price__rate .share-price__rate, .bg-variant-brand-secondary .share-price.share-price--change-down .share-price__rate { color: var(--color-white); } .bg-variant-brand-secondary .share-price.share-price--change-down .share-price__rate svg, .bg-variant-brand-secondary .share-price.share-price--change-down svg { fill: var(--color-white); } .bg-variant-brand-tertiary .share-price .share-price__rate, .bg-variant-brand-tertiary .share-price svg { color: var(--color-ui-positive); } .bg-variant-brand-tertiary .share-price.share-price--change-down .share-price__rate .share-price__rate, .bg-variant-brand-tertiary .share-price.share-price--change-down .share-price__rate { color: var(--color-ui-negative); } .bg-variant-brand-tertiary .share-price.share-price--change-down .share-price__rate svg, .bg-variant-brand-tertiary .share-price.share-price--change-down svg { fill: var(--color-ui-negative); } .bg-variant-white .share-price .share-price__rate, .bg-variant-white .share-price svg { color: var(--color-ui-positive); } .bg-variant-white .share-price.share-price--change-down .share-price__rate .share-price__rate, .bg-variant-white .share-price.share-price--change-down .share-price__rate { color: var(--color-ui-negative); } .bg-variant-white .share-price.share-price--change-down .share-price__rate svg, .bg-variant-white .share-price.share-price--change-down svg { fill: var(--color-ui-negative); } .bg-variant-brand-quaternary .share-price .share-price__rate, .bg-variant-brand-quaternary .share-price svg { color: var(--color-brand-secondary); } .bg-variant-brand-quaternary .share-price.share-price--change-down .share-price__rate .share-price__rate, .bg-variant-brand-quaternary .share-price.share-price--change-down .share-price__rate { color: var(--color-brand-secondary); } .bg-variant-brand-quaternary .share-price.share-price--change-down .share-price__rate svg, .bg-variant-brand-quaternary .share-price.share-price--change-down svg { fill: var(--color-brand-secondary); } .bg-variant-brand-quinary .share-price .share-price__rate, .bg-variant-brand-quinary .share-price svg { color: var(--color-brand-secondary); } .bg-variant-brand-quinary .share-price.share-price--change-down .share-price__rate .share-price__rate, .bg-variant-brand-quinary .share-price.share-price--change-down .share-price__rate { color: var(--color-brand-secondary-shade-180); } .bg-variant-brand-quinary .share-price.share-price--change-down .share-price__rate svg, .bg-variant-brand-quinary .share-price.share-price--change-down svg { fill: var(--color-brand-secondary-shade-180); } .bg-variant-brand-senary .share-price .share-price__rate, .bg-variant-brand-senary .share-price svg { color: var(--color-brand-secondary); } .bg-variant-brand-senary .share-price.share-price--change-down .share-price__rate .share-price__rate, .bg-variant-brand-senary .share-price.share-price--change-down .share-price__rate { color: var(--color-brand-secondary); } .bg-variant-brand-senary .share-price.share-price--change-down .share-price__rate svg, .bg-variant-brand-senary .share-price.share-price--change-down svg { fill: var(--color-brand-secondary); } .share-price + .button { margin-top: 30px; } @media (min-width: 941px) { .share-price + .button { float: right; } } /*# sourceMappingURL=share-price.css.map */