filters section almost ok

This commit is contained in:
Gaelle Morin 2018-12-11 13:42:53 +01:00
parent 6dfd234ee9
commit 535f5d07f7
7 changed files with 67 additions and 98 deletions

View File

@ -1,7 +1,7 @@
div.grid-layer div.grid-layer
div.grid-layer-main.containerV div.grid-layer-main.containerV
h2 Nouvelles offres h2 New offers
span Tu trouveras ici des offres de missions span Here you can find and post offers
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',
@ -18,10 +18,10 @@ 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.icon-plus div.icon-plus
div Poster une offre div Post a new offer
sib-link().containerH.containerCenter.how-link sib-link().containerH.containerCenter.how-link
div.icon-idea div.icon-idea
div.grow Comment trouver une offre ? div.grow How To find a new offer?
sib-link().containerH.containerCenter.how-link sib-link().containerH.containerCenter.how-link
div.icon-idea div.icon-idea
div.grow Comment programmer des notifications ? div.grow How to set notification?

View File

@ -319,33 +319,6 @@ hdapp-available {
grid-row-end: end; grid-row-end: end;
} }
} }
#offers-list > sib-form > form {
background-color: orangered;
//display: grid;
//grid-template-columns: 1fr 1fr;
//grid-gap: 20px;
sib-form-label-text {
display: flex;
flex-direction: column;
}
label {
//flex-basis: 5em;
//flex-shrink: 0;
display: block;
}
input, select {
//flex-grow: 1;
//min-width: 0;
//box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
}
input[type="submit"] {
display: none;
}
}
#member-profile, #member-profile,
#profiles-list { #profiles-list {

56
src/styles/filters.scss Normal file
View File

@ -0,0 +1,56 @@
#offers-list > sib-form > form {
border-bottom: 1px solid $color-grey1;
display: grid;
grid-gap: 0px 24px;
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;
display: inline-block;
padding: 0.5em 12.5em 0.5em 1em;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
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;
}
}
#

View File

@ -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 { sib-form {
// text like // text like
textarea, 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']) { 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; border: none;
@extend %shadow; @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)
}

View File

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

View File

@ -280,67 +280,15 @@ sib-trigger.back {
grid-template-columns: [start]auto[middle]25%[end]; grid-template-columns: [start]auto[middle]25%[end];
grid-template-rows: [start]13em[middle]auto[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;
grid-row-end: middle; grid-row-end: middle;
} }
#offers-list > sib-form > form {
select {
background: white;
display: inline-block;
line-height: 1.5em;
padding: 0.5em 12.5em 0.5em 1em;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 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-size:
5px 6px,
5px 6px,
1px 1.5em;
background-repeat: no-repeat;
}
}
sib-form-label-text {
background: aqua;
}
form {
background-color: orangered;
display: grid;
grid-template-columns: 33% auto;
grid-gap: 24px;
label {
display: block;
}
input, select {
margin-top: 1em;
}
}

View File

@ -1,6 +1,7 @@
// colors // colors
$color-white: #fff; $color-white: #fff;
$color-black: #36383b; $color-black: #36383b;
$color-grey1: #d7dbe0;
$color-grey: #898f95; $color-grey: #898f95;
$color-grey-mid: #abaaba; $color-grey-mid: #abaaba;
$color-grey-light4: #b4b9c0; $color-grey-light4: #b4b9c0;