UNPKG

@randstad-design/orbit-multitheme

Version:

multitheme Front-end code based on Randstad Human Forward components

315 lines (291 loc) 8.95 kB
.subscript { font-size: 16px; letter-spacing: 0; line-height: 25px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .subscript-video--title { font-size: 20px; letter-spacing: 0; line-height: 30px; } .subscript-video--runtime { font-size: 18px; letter-spacing: 0; line-height: 30px; } @media (max-width: 940px) { .subscript--info { display: block; margin-top: 5px; } } @media (min-width: 941px) { .subscript { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .subscript--text { -webkit-box-flex: 2; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; } .subscript--info { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .subscript .subscript--text + .subscript--info { margin-left: 10px; } } .preview figure { height: 100%; width: 100px; } .preview .preview-link-only { text-decoration: underline; } .preview .preview-link-only:hover { text-decoration: none; } .preview .button--icon-text { margin-left: -5px; } @media (max-width: 940px) { figure + .preview--content { margin-top: 30px; } } @media (min-width: 941px) { .preview { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding: 50px; } .preview figure { min-width: 100px; } .preview figure + .preview--content { margin: 0 0 0 30px; } .preview--content { -webkit-flex-shrink: 3; -ms-flex-negative: 3; flex-shrink: 3; } .preview .button--icon-text:hover .icon { -webkit-animation: none; animation: none; } } .section-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .section-header h2, .section-header__chapter { font-size: 32px; letter-spacing: -1px; line-height: 40px; } @media (min-width: 941px) { .section-header h2, .section-header__chapter { font-size: 40px; letter-spacing: -2px; line-height: 45px; } } .section-header .block__header + .block__content { margin-top: 0; } @media (min-width: 941px) { .section-header { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding-top: 130px; padding-bottom: 50px; } } .section-header__chapter { color: var(--color-brand-primary); } .bg-variant-brand-primary .section-header__chapter { color: var(--color-brand-secondary); } .bg-variant-brand-secondary .section-header__chapter { color: var(--color-brand-primary); } .bg-variant-brand-tertiary .section-header__chapter { color: var(--color-brand-primary); } .bg-variant-white .section-header__chapter { color: var(--color-brand-primary); } .bg-variant-brand-quaternary .section-header__chapter { color: var(--color-brand-secondary); } .bg-variant-brand-quinary .section-header__chapter { color: var(--color-brand-secondary-shade-180); } .bg-variant-brand-senary .section-header__chapter { color: var(--color-brand-secondary); } .section-header__title { color: var(--color-brand-secondary); } .bg-variant-brand-primary .section-header__title { color: var(--color-white); } .bg-variant-brand-secondary .section-header__title { color: var(--color-white); } .bg-variant-brand-tertiary .section-header__title { color: var(--color-brand-secondary); } .bg-variant-white .section-header__title { color: var(--color-brand-secondary); } .bg-variant-brand-quaternary .section-header__title { color: var(--color-brand-secondary); } .bg-variant-brand-quinary .section-header__title { color: var(--color-brand-secondary-shade-180); } .bg-variant-brand-senary .section-header__title { color: var(--color-brand-secondary); } .quote--s { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .quote--s .quote__media { width: calc((3/28) * 100%); } .quote--s .quote__content { margin-left: auto; width: calc((23/28) * 100%); } .quote--s .quote__text { font-size: 20px; letter-spacing: 0; line-height: 30px; margin: 0; } @media (min-width: 941px) { .quote--s .quote__text { font-size: 26px; letter-spacing: -1px; line-height: 30px; } } .quote--s .quote__author { font-size: 18px; letter-spacing: 0; line-height: 30px; margin: 10px 0 0; } @media (min-width: 941px) { .quote--s .quote__media { width: calc((3/33) * 100%); } .quote--s .quote__content { width: calc((28/33) * 100%); } .quote--s .quote__author { margin-top: 20px; } } .quote--xs img { width: 60px; } @media (min-width: 941px) { .quote--xs { padding: 50px; } } .side-nav-sticky { background: #fff; margin: 0 -25px; padding: 0 25px; top: 0; z-index: 1; position: relative; } @media (min-width: 501px) { .side-nav-sticky { margin: 0 -50px; padding: 0 50px; } } @media (min-width: 941px) { .side-nav-sticky { margin: 0; padding: 0; top: 40px; position: -webkit-sticky; position: sticky; } } .side-nav-sticky--is-sticky { position: fixed; width: 100%; } .side-nav-sticky__header { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; min-height: 50px; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; z-index: 1; } @media (min-width: 941px) { .side-nav-sticky__header { min-height: 30px; padding-bottom: 20px; } } .side-nav-sticky__header svg { fill: #2175d9; } .side-nav-sticky__header:after { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; content: ''; opacity: 0; } .side-nav-sticky__list { counter-reset: li; list-style: none; -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: scroll; scrollbar-width: none; z-index: 1; } .side-nav-sticky__list::-webkit-scrollbar { display: none; } .side-nav-sticky__list[data-rs-collapsible-content='expanded'] { max-height: 300px !important; } @media (min-width: 941px) { .side-nav-sticky__list[data-rs-collapsible-content='expanded'] { max-height: unset; } } .side-nav-sticky__list:after { -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; content: ''; opacity: 0; } .side-nav-sticky__list-item { border-bottom: 1px solid var(--color-brand-tertiary-tint-80); cursor: pointer; counter-increment: li; min-height: 40px; padding: 15px 5px 15px 23px; position: relative; } @media (min-width: 941px) { .side-nav-sticky__list-item { padding: 10px 5px 9px 27px; } } .side-nav-sticky__list-item:last-child { border-bottom: none; margin-bottom: 10px; } @media (min-width: 941px) { .side-nav-sticky__list-item:last-child { margin-bottom: unset; } } .side-nav-sticky__list-item:before { color: var(--color-brand-primary); content: counter(li) "." " "; display: inline-block; left: 0; position: absolute; } .side-nav-sticky__list-item a { text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .side-nav-sticky__list-item:hover a, .side-nav-sticky__list-item:hover:before { color: var(--color-brand-secondary); -webkit-transition: all 0.3s; transition: all 0.3s; } .side-nav-sticky__list-item.is-active a, .side-nav-sticky__list-item.is-active:before { color: var(--color-brand-secondary); -webkit-transition: all 0.3s; transition: all 0.3s; } .side-nav-sticky__list-item--unordered { padding: 15px 5px 15px 5px; } @media (min-width: 941px) { .side-nav-sticky__list-item--unordered { padding: 10px 5px 9px 3px; } } .side-nav-sticky__list-item--unordered:before { content: none; } /*# sourceMappingURL=content-items.css.map */