right panel ok

This commit is contained in:
Gaelle Morin 2018-12-09 19:56:56 +01:00
parent 237df22d66
commit a192db463c
5 changed files with 65 additions and 63 deletions

View File

@ -1,7 +1,7 @@
div.grid-layer div.grid-layer
div.grid-layer-main.containerV div.grid-layer-main.containerV
h2 New offers h2 Nouvelles offres
span Here you can find and post offers span Tu trouveras ici des offres de missions
sib-display#offers-list( sib-display#offers-list(
data-src=`${sdn}/job-offers/`, data-src=`${sdn}/job-offers/`,
data-fields='date, user-thumb, title, description, skills', data-fields='date, user-thumb, title, description, skills',
@ -16,11 +16,11 @@ div.grid-layer
) )
div.grid-layer-links.containerV div.grid-layer-links.containerV
sib-link(next="job-offer-create").containerH.containerCenter.action-link sib-link(next="job-offer-create").containerH.containerCenter.action-link
div.containerV.fix.icon-plus div.icon-plus
div.containerV.fix Post a new offer div Poster une offre
sib-link().containerH.containerCenter.how-link sib-link().containerH.containerCenter.how-link
div.containerV.fix.icon-idea div.icon-idea
div.containerV.grow How To find a new offer div.grow Comment trouver une offre ?
sib-link().containerH.containerCenter.how-link sib-link().containerH.containerCenter.how-link
div.containerV.fix.icon-idea div.icon-idea
div.containerV.grow How to set notification ? div.grow Comment programmer des notifications ?

View File

@ -452,57 +452,6 @@ hdapp-available {
} }
} }
.right-link {
padding: 0.5em;
margin-bottom: 1em;
margin-left: 1em;
flex-basis: content;
border-radius: 2em;
div[class*="icon-"] {
margin-right: 1em;
}
}
.how-link {
@extend .right-link;
background-color: $color-white;
color: $color-black;
flex-wrap: nowrap;
.icon-idea {
background-color: $color-yellow-light;
border-radius: 100%;
flex-shrink: 0;
flex-grow: 0;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
width: 1.8em;
height: 1.8em;
//margin-right: 1em;
}
}
.action-link {
@extend .right-link;
background-color: $color-yellow;
color: $color-white;
font-weight: bold;
text-transform: uppercase;
.icon-plus {
flex-shrink: 0;
flex-grow: 0;
justify-content: center;
align-items: center;
display: flex;
&:before {
//font-size: 1.3em;
}
}
}
/* /*
label { label {
@extend h2; @extend h2;

View File

@ -8,6 +8,7 @@
@import 'main'; @import 'main';
@import 'form'; @import 'form';
@import 'content'; @import 'content';
@import 'right-panel';
// @import 'members'; // @import 'members';
@import 'header'; @import 'header';

View File

@ -49,11 +49,11 @@ h1 {
} }
h2 { h2 {
font-size: 1.04em; font-size: 20px;
} }
h3 { h3 {
font-size: 0.84em; font-size: 20px;
} }
h4 { h4 {
@ -276,16 +276,19 @@ sib-trigger.back {
.grid-layer{ .grid-layer{
display: grid; display: grid;
grid-template-columns: [start]auto[middle]20em[end]; font-size: 16px;
grid-template-rows: [start]10em[middle]auto[end]; grid-template-columns: [start]auto[middle]25%[end];
grid-template-rows: [start]13em[middle]auto[end];
} }
.grid-layer-main{ .grid-layer-main{
background: green;
grid-column-start: start; grid-column-start: start;
grid-column-end: end; grid-column-end: end;
grid-row-start: start; grid-row-start: start;
grid-row-end: end; grid-row-end: end;
} }
.grid-layer-links{ .grid-layer-links{
background: pink;
grid-column-start: middle; grid-column-start: middle;
grid-column-end: end; grid-column-end: end;
grid-row-start: start; grid-row-start: start;

View File

@ -0,0 +1,49 @@
.right-link {
padding: 0.5em;
margin-bottom: 1em;
margin-left: 5em;
flex-basis: auto;
border-radius: 2em;
div[class*="icon-"] {
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}
}
.how-link {
@extend .right-link;
background-color: $color-white;
color: $color-black;
flex-wrap: nowrap;
.icon-idea {
background-color: $color-yellow-light;
border-radius: 100%;
justify-content: center;
margin-right: 0.7em;
//flex-direction: column;
width: 1.8em;
height: 1.8em;
//margin-right: 1em;
}
}
.action-link {
@extend .right-link;
background-color: $color-yellow;
color: $color-white;
font-weight: bold;
text-transform: uppercase;
.icon-plus {
font-size: 20px;
justify-content: center;
margin: 0.3em 0.3em 0.3em 0;
&:before {
//font-size: 1.3em;
}
}
}