UNPKG

@randstad-design/orbit-multitheme

Version:

multitheme Front-end code based on Randstad Human Forward components

307 lines (279 loc) 7.86 kB
.distance-pin { -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; } .distance-pin span + span { margin-left: 10px; } .list-items { overflow: hidden; position: relative; } .list-items::after { background: #fff; bottom: 0; content: ''; display: block; height: 1px; position: absolute; width: 100%; } @media (min-width: 941px) { .list-items { margin-left: auto; width: calc((38/43) * 100%); } .block__content--s .list-items { width: 100%; } } .list-item:first-child { margin-top: -30px; } .list-item__header { font-family: Montserrat-SemiBold, arial, sans-serif; font-size: 20px; text-transform: none; line-height: 30px; display: inline; } @media (min-width: 941px) { .list-item__header { font-family: Montserrat-SemiBold, arial, sans-serif; font-size: 26px; text-transform: none; line-height: 30px; } } .list-item__header--badge { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list-item__header--badge .list-item__link { margin-right: 10px; } .list-item__header--favorise { margin-right: 10px; } .list-item__title:not(.list-item__title--split) .list-item__controls { position: absolute; } @media (max-width: 940px) { .list-item__title:not(.list-item__title--split) { position: relative; } } .list-item__title--split { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .list-item .badge { margin-top: 3px; } .list-item__link { position: relative; } .list-item__info { margin: 30px 0; } .list-item .progress-bar { margin-top: 65px; } .list-item__controls { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-left: auto; top: -2px; right: -10px; } .list-item__controls button { cursor: pointer; height: 40px; width: 40px; } .list-item__controls .icon { top: 3px; } .list-item__save { height: 20px; top: 3px; } .list-item__save:focus { outline: 0; } .list-item__description { margin-top: 30px; } .list-item__title + .list-item__description-list { margin-top: 30px; } .list-item .icon__toggler:hover svg { fill: #f8f8f8; } .list-item__title + .list-item__meta, .progress-bar + .list-item__meta { margin-top: 20px; } .list-item__meta li { overflow-wrap: break-word; word-wrap: break-word; } .list-item__feedback { -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 20px; } .list-item__feedback .icon { margin-right: 10px; position: relative; top: 2px; } .list-item--disabled .list-item__link { pointer-events: none; } .list-item.closable--closed { border-bottom: 0 solid transparent; -webkit-transition: max-height 0.2s 0.2s, border 0.2s 0.2s; transition: max-height 0.2s 0.2s, border 0.2s 0.2s; } .list-item.closable--closed .button--m, .list-item.closable--closed .button--clean:not([data-rs-closable]), .list-item.closable--closed .badge, .list-item.closable--closed .list-item__description, .list-item.closable--closed .list-item__feedback, .list-item.closable--closed .list-item__header, .list-item.closable--closed .list-item__link, .list-item.closable--closed .list-item__meta, .list-item.closable--closed .list-item__save { opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } @media (max-width: 940px) { .list-item:last-child { margin-bottom: -29px; } .list-item__header + .distance-pin { margin-top: 10px; } .list-item__controls { margin-top: -7px; position: relative; top: 3px; } .list-item .list-item__info + .button { margin-bottom: 30px; } .list-item__title--control { padding-right: 30px; } .list-item__description-list dd + dt { margin-top: 20px; } .list-item__logo { display: none; } } @media (min-width: 941px) { .list-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .list-item:last-child { margin-bottom: -50px; } .list-item--l .list-item__info { margin-top: 50px; } .list-item--l:first-child { margin-top: -50px; } .list-item--l .list-item__controls { top: 50px; } .list-item__header--badge .list-item__link { margin-right: 20px; } .list-item .badge { margin-top: 8px; } .list-item .progress-bar { margin-top: 50px; -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .list-item__controls, .list-item__logo { top: 30px; } .list-item__controls { margin-top: 0; position: absolute; } .list-item__save, .list-item__save .icon, .list-item__save svg { height: 30px; width: 30px; } .list-item__info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 50px; max-width: 100%; } .list-item__info + .button { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; bottom: 50px; margin-left: auto; position: relative; } .list-item__info + .list-item__logo { margin-left: auto; position: inherit; } .list-item__title { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .list-item__meta { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .list-item__title .list-item__meta, .progress-bar + .list-item__meta { margin-top: 30px; } .list-item__meta--row li { display: inline-block; } .list-item__meta--row li:not(:last-child) { margin-right: 50px; } .list-item__description-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list-item__description-list dd, .list-item__description-list dt { margin-top: 5px; } .list-item__description-list dt { width: calc((13/38) * 100%); } .list-item__description-list dd { margin-left: auto; width: calc((23/38) * 100%); } .list-item__description { margin-top: 30px; -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .list-item__description p:last-child { margin-bottom: 0; } .list-item__logo { max-height: 60px; max-width: 100px; overflow: hidden; position: absolute; right: 0; } .list-item__logo img { width: 100%; } .list-item .distance-pin { position: absolute; right: 0; top: 40px; z-index: 1; } .list-item .list-item__header + .distance-pin { line-height: 0; margin-left: 30px; } .list-item__feedback { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } } .list-item--button.list-item--button { margin-bottom: 0; } .list-item--button .button { margin-top: 30px; } /*# sourceMappingURL=list-items.css.map */