hubl/src/styles/layout/job-offers/job-offers.scss
Gaëlle Morin 7880c62f61 feature(job-offers): sib-job-board component added
job-offers pug, css and dependancies file are updated.
2019-06-11 11:01:57 +02:00

173 lines
3.3 KiB
SCSS

.job-offers__container {
@extend %grid-layer;
}
sib-job-board {
@extend %grid-layer-main;
@extend %containerV;
}
.job-offers__newoffer {
@extend %grid-layer-links;
@extend %containerV;
}
#job-offers {
.plus-button {
@extend .howto;
background-color: $color-43-100-50;
color: $color-0-0-100;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.icon-plus {
font-size: 20px;
justify-content: center;
margin: 0.5rem 0.5rem 0.5rem 0;
}
}
.job-board__list {
@extend %grid-layer;
>sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
>div {
grid-column-start: start;
grid-column-end: end;
grid-row-start: middle;
grid-row-end: end;
&:first-of-type {
margin-top: 5rem;
}
>sib-display {
@include window-style-modal();
display: block;
font-size: 1.5rem;
margin: 1.7rem 0;
padding: 3.4rem;
[name='user-thumb'] {
align-items: center;
display: flex;
margin: -0.25em;
>* {
margin: 0.25em;
}
[name='author.first_name'] {
color: $color-0-0-29;
font-weight: 600;
}
sib-multiple[name$='groups'] {
display: flex;
label {
display: none;
}
>* {
@extend %user-role;
}
}
author-avatar {
background-color: $color-0-0-100;
border-radius: 50%;
height: 4.25rem;
overflow: hidden;
position: relative;
width: 4.25rem;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
[name='creationDate'] {
display: block;
margin-bottom: 0.7rem;
margin-top: 2rem;
}
[name='title'] {
@extend h3;
display: block;
font-weight: bold;
line-height: 19px;
}
[name='description'] {
display: block;
line-height: 1.6;
margin-bottom: 1.6rem;
}
[name='skills'] {
label {
display: none;
}
}
author-contact {
color: $color-244-73-62;
font-size: 1.3rem;
float: right;
>sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 1.5rem;
margin-right: 1.2rem;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
>* {
margin: 0.25em;
}
strong {
background-color: $color-244-73-62;
border: none;
border-radius: 100em;
color: $color-0-0-100;
display: inline-block;
font-weight: normal;
padding: 0.85rem 1.7rem;
}
}
}
}
}
}