filters section almost ok
This commit is contained in:
parent
6dfd234ee9
commit
535f5d07f7
@ -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?
|
||||||
|
@ -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
56
src/styles/filters.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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)
|
|
||||||
}
|
|
||||||
|
@ -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';
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user