Merge branch 'gm-job-offers'
This commit is contained in:
Gaelle Morin
@ -7,28 +7,6 @@
|
||||
// //float: right;
|
||||
// }
|
||||
|
||||
#offers-list {
|
||||
> div {
|
||||
> sib-display {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
@extend %frame;
|
||||
padding: 2em;
|
||||
/*&:nth-child(odd) {
|
||||
background-color: $color-grey-light;
|
||||
}*/
|
||||
sib-display-div[name='title'] {
|
||||
display: block;
|
||||
@extend h2;
|
||||
}
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[name='user-thumb'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -304,41 +282,6 @@ hdapp-available {
|
||||
}
|
||||
}
|
||||
|
||||
#offers-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;
|
||||
}
|
||||
}
|
||||
#offers-list > sib-form > form {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 3.5em 3.5em;
|
||||
|
||||
label {
|
||||
flex-basis: 5em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
input, select {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#member-profile,
|
||||
#profiles-list {
|
||||
ul {
|
||||
@ -465,57 +408,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 {
|
||||
@extend h2;
|
||||
@ -524,3 +416,4 @@ label {
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
47
src/styles/filters.scss
Normal file
47
src/styles/filters.scss
Normal file
@ -0,0 +1,47 @@
|
||||
#offers-list > sib-form > form {
|
||||
border-bottom: 1px solid $color-grey1;
|
||||
display: grid;
|
||||
grid-gap: 0px 30px;
|
||||
grid-template-columns: 33% auto;
|
||||
padding-bottom: 3em;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, select {
|
||||
border-style: none;
|
||||
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select {
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
padding: 0.5em 12.5em 0.5em 1em;
|
||||
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, $color-grey 50%),
|
||||
linear-gradient(135deg, $color-grey 50%, transparent 50%),
|
||||
linear-gradient(to right, white, white);
|
||||
background-position:
|
||||
calc(100% - 20px) calc(1em + 2px),
|
||||
calc(100% - 15px) calc(1em + 2px),
|
||||
calc(100% - 2.5em) 0.5em;
|
||||
background-repeat: no-repeat;
|
||||
background-size:
|
||||
5px 6px,
|
||||
5px 6px,
|
||||
1px 1.5em;
|
||||
}
|
||||
|
||||
sib-form-label-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -13,9 +13,9 @@
|
||||
padding: 1em;
|
||||
}
|
||||
sib-display sib-form form {
|
||||
margin: -0.5em;
|
||||
//margin: -0.5em;
|
||||
> * {
|
||||
margin: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
sib-form.block {
|
||||
@ -64,11 +64,12 @@ sib-form.block {
|
||||
}
|
||||
}
|
||||
|
||||
//fix: style à mignrer dans filter.scss ? => A voir si ces styles sont utilisés ailleurs que pour les filtres.
|
||||
sib-form {
|
||||
// text like
|
||||
textarea,
|
||||
input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) {
|
||||
padding: 0.5em;
|
||||
padding: 0.7em;
|
||||
border: none;
|
||||
@extend %shadow;
|
||||
}
|
||||
@ -105,14 +106,3 @@ sib-form {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-label-text,sib-form-dropdown{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
select{
|
||||
background-color: $color-white;
|
||||
border-style: none;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15)
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
padding: 1em 0.4em;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
padding: 0 1.8rem;
|
||||
|
||||
@ -8,6 +8,9 @@
|
||||
@import 'main';
|
||||
@import 'form';
|
||||
@import 'content';
|
||||
@import 'filters';
|
||||
@import 'right-panel';
|
||||
@import 'job-offers';
|
||||
|
||||
// @import 'members';
|
||||
@import 'header';
|
||||
|
||||
57
src/styles/job-offers.scss
Normal file
57
src/styles/job-offers.scss
Normal file
@ -0,0 +1,57 @@
|
||||
#offers-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: 3em;
|
||||
}
|
||||
|
||||
> sib-display {
|
||||
@extend %frame;
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 2em;
|
||||
/*&:nth-child(odd) {
|
||||
background-color: $color-grey-light;
|
||||
}*/
|
||||
sib-display-div[name='title'] {
|
||||
@extend h2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[name='user-thumb'] {
|
||||
align-items: center;
|
||||
color: $color-black-light;
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
margin: -0.25em;
|
||||
|
||||
> * {
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
sib-display-img {
|
||||
border-radius: 100%;
|
||||
height: 2.5em;
|
||||
overflow: hidden;
|
||||
width: 2.5em;
|
||||
}
|
||||
}
|
||||
@ -48,8 +48,7 @@ h1 {
|
||||
font-size: 1.24em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
h2 { font-size: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -68,77 +67,6 @@ h4 {
|
||||
@extend %frame;
|
||||
padding: 1em;
|
||||
}
|
||||
/*
|
||||
#header {
|
||||
background-color: $color-white;
|
||||
color: $color-black;
|
||||
//position: relative;
|
||||
//@include border-shadow(bottom);
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
|
||||
border: solid $color-white;
|
||||
border-width: 1px 0;
|
||||
display: flex;
|
||||
//flex-grow: 0;
|
||||
//flex-basis : 150px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
padding: 1em 0;
|
||||
|
||||
> * {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#button-toggle {
|
||||
@include icon('menu');
|
||||
display: none;
|
||||
color: $color-black;
|
||||
font-size: 2em;
|
||||
padding: 0.72em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#logo {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
#notifications-button {
|
||||
@include icon(bell);
|
||||
font-size: 2em;
|
||||
cursor: pointer;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#notifications {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#profile {
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 0.5em;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.menu-notification {
|
||||
//flex-basis: 3em;
|
||||
@ -347,18 +275,17 @@ sib-trigger.back {
|
||||
|
||||
.grid-layer{
|
||||
display: grid;
|
||||
font-size: 16px;
|
||||
grid-template-columns: [start]auto[middle]25%[end];
|
||||
grid-template-rows: [start]10em[middle]auto[end];
|
||||
grid-template-rows: [start]13em[middle]auto[end];
|
||||
}
|
||||
.grid-layer-main{
|
||||
background: green;
|
||||
.grid-layer-main {
|
||||
grid-column-start: start;
|
||||
grid-column-end: end;
|
||||
grid-row-start: start;
|
||||
grid-row-end: end;
|
||||
}
|
||||
.grid-layer-links{
|
||||
background: pink;
|
||||
.grid-layer-links {
|
||||
grid-column-start: middle;
|
||||
grid-column-end: end;
|
||||
grid-row-start: start;
|
||||
|
||||
49
src/styles/right-panel.scss
Normal file
49
src/styles/right-panel.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,8 @@
|
||||
// colors
|
||||
$color-white: #fff;
|
||||
$color-black: #36383b;
|
||||
$color-black-light: #4a4a4a;
|
||||
$color-grey1: #d7dbe0;
|
||||
$color-grey: #898f95;
|
||||
$color-grey-mid: #abaaba;
|
||||
$color-grey-light4: #b4b9c0;
|
||||
|
||||
Reference in New Issue
Block a user