@randstad-design/orbit-multitheme
Version:
multitheme Front-end code based on Randstad Human Forward components
315 lines (291 loc) • 8.95 kB
CSS
.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 ; }
@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 */