Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/ui: déplacer bouton rechercher formulaire offres #3145

Merged
merged 9 commits into from
Jul 12, 2024
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
@use "@styles/utilities";
sylviamoreno marked this conversation as resolved.
Show resolved Hide resolved
@use "@styles/components/form/variables";
@use "@styles/theme/variables" as theme-variables;

$border-width: 1px;

.rechercheOffreForm {
display: flex;
flex-direction: column;
gap: variables.$form-submit-button-vertical-gap-mobile;
display: grid;
grid-template-rows: 1fr;
sylviamoreno marked this conversation as resolved.
Show resolved Hide resolved
grid-gap: variables.$form-submit-button-vertical-gap-mobile;
padding-bottom: 1rem;
}

Expand All @@ -18,8 +21,38 @@
gap: variables.$form-vertical-gap-mobile;
}

.buttonRechercher > button {
width: 100%;
.buttonRechercher {
position: relative;
display: flex;
justify-content: center;

@include utilities.media(small) {
&::before,
&::after {
content: '';
position: absolute;
border-top: $border-width solid theme-variables.$color-background-border;
top: 50%;
height: 1px;
width: calc(50% - 130px);
}

&::before {
left: 0;
}

&::after {
right: 0;
}
}

> button {
width: 100%;

@include utilities.media(small) {
width: auto;
}
}
}

.champsObligatoires {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
@use "@styles/utilities";
@use "@styles/components/form/variables";
// FIXME (DORO - 2023-10-02): Duplication de FormulaireRechercheAlternance.module.scss et FormulaireRechercheOffreEmploi.module.scss
@use "@styles/theme/variables" as theme-variables;

$color-border-filters: lighten(utilities.$color-primary, 15%);
$border-width: 1px;

.rechercheOffreForm {
display: flex;
flex-direction: column;
gap: variables.$form-submit-button-vertical-gap-mobile;
display: grid;
grid-template-columns: 1fr;
grid-gap: variables.$form-submit-button-vertical-gap-mobile;
}

.filtresRechercherOffre {
Expand Down Expand Up @@ -50,8 +52,38 @@ $color-border-filters: lighten(utilities.$color-primary, 15%);
}
}

.buttonRechercher > button {
width: 100%;
.buttonRechercher {
position: relative;
display: flex;
justify-content: center;

@include utilities.media(small) {
&::before,
&::after {
content: '';
position: absolute;
border-top: $border-width solid theme-variables.$color-background-border;
top: 50%;
height: 1px;
width: calc(50% - 130px);
}

&::before {
left: 0;
}

&::after {
right: 0;
}
}

> button {
width: 100%;

@include utilities.media(small) {
width: auto;
}
}
}

@include utilities.media(medium) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@use "sass:color";
@use "@styles/utilities";
@use "@styles/components/form/variables";
@use "@styles/theme/variables" as theme-variables;

$color-border-filters: lighten(utilities.$color-primary, 15%);
$border-width: 1px;

.rechercheOffreForm {
display: grid;
Expand All @@ -11,7 +13,6 @@ $color-border-filters: lighten(utilities.$color-primary, 15%);
grid-gap: variables.$form-submit-button-vertical-gap-mobile;

@include utilities.media(medium) {
grid-template-columns: 1fr auto;
grid-gap: variables.$form-horizontal-gap;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
Expand All @@ -34,12 +35,40 @@ $color-border-filters: lighten(utilities.$color-primary, 15%);
}

& .buttonRechercher {
position: relative;
display: flex;
justify-content: center;

@include utilities.media(small) {
&::before,
&::after {
content: '';
position: absolute;
border-top: $border-width solid theme-variables.$color-background-border;
top: 50%;
height: 1px;
width: calc(50% - 130px);
}

&::before {
left: 0;
}

&::after {
right: 0;
}
}

@include utilities.media(medium) {
margin-top: utilities.pixel-to-rem(28);
}

> button {
width: 100%;

@include utilities.media(small) {
width: auto;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@use "sass:color";
@use "@styles/utilities";
@use "@styles/components/form/variables";
@use "@styles/theme/variables" as theme-variables;

$color-border-filters: lighten(utilities.$color-primary, 15%);
$border-width: 1px;

.rechercheOffreForm {
display: grid;
Expand All @@ -11,7 +13,6 @@ $color-border-filters: lighten(utilities.$color-primary, 15%);
grid-gap: variables.$form-submit-button-vertical-gap-mobile;

@include utilities.media(medium) {
grid-template-columns: 1fr auto;
grid-gap: variables.$form-horizontal-gap;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
Expand All @@ -34,12 +35,40 @@ $color-border-filters: lighten(utilities.$color-primary, 15%);
}

& .buttonRechercher {
position: relative;
display: flex;
justify-content: center;

@include utilities.media(small) {
&::before,
&::after {
content: '';
position: absolute;
border-top: $border-width solid theme-variables.$color-background-border;
top: 50%;
height: 1px;
width: calc(50% - 130px);
}

&::before {
left: 0;
}

&::after {
right: 0;
}
}

@include utilities.media(medium) {
margin-top: utilities.pixel-to-rem(28);
}

> button {
width: 100%;

@include utilities.media(small) {
width: auto;
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
@use "sass:color";
@use "@styles/utilities";
@use "@styles/components/form/variables";
@use "@styles/theme/variables" as theme-variables;

$color-border-filters: lighten(utilities.$color-primary, 15%);
$border-width: 1px;

.rechercheOffreForm {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-rows: 1fr;
grid-gap: variables.$form-submit-button-vertical-gap-mobile;

@include utilities.media(medium) {
grid-template-columns: 1fr auto;
grid-template-columns: 1fr;
grid-gap: variables.$form-horizontal-gap;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
Expand Down Expand Up @@ -56,8 +58,36 @@ $color-border-filters: lighten(utilities.$color-primary, 15%);
}

& .buttonRechercher {
display: flex;
justify-content: center;
position: relative;

@include utilities.media(small) {
&::before,
&::after {
content: '';
position: absolute;
border-top: $border-width solid theme-variables.$color-background-border;
top: 50%;
height: 1px;
width: calc(50% - 130px);
}

&::before {
left: 0;
}

&::after {
right: 0;
}
}

> button {
width: 100%;

@include utilities.media(small) {
width: auto;
}
}

@include utilities.media(medium) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
@use "sass:color";
@use "@styles/utilities";
@use "@styles/components/form/variables";
@use "@styles/theme/variables" as theme-variables;

$color-border-filters: lighten(utilities.$color-primary, 15%);
$color-message-champs-obligatoires: utilities.$color-primary;
$border-width: 1px;

.champsInformation{
color: $color-message-champs-obligatoires;
@include utilities.text-large;
}

.rechercheOffreForm {
display: flex;
flex-direction: column;
display: grid;
grid-template-rows: 1fr;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
gap: variables.$form-submit-button-vertical-gap-mobile;
grid-gap: variables.$form-submit-button-vertical-gap-mobile;
}

.filtresRechercherOffre {
Expand All @@ -31,8 +33,38 @@ $color-message-champs-obligatoires: utilities.$color-primary;
}
}

.buttonRechercher > button {
width: 100%;
.buttonRechercher {
position: relative;
display: flex;
justify-content: center;

@include utilities.media(small) {
&::before,
&::after {
content: '';
position: absolute;
border-top: $border-width solid theme-variables.$color-background-border;
top: 50%;
height: 1px;
width: calc(50% - 130px);
}

&::before {
left: 0;
}

&::after {
right: 0;
}
}

> button {
width: 100%;

@include utilities.media(small) {
width: auto;
}
}
}

@include utilities.media(medium) {
Expand Down
4 changes: 1 addition & 3 deletions src/client/components/layouts/Header/Header.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,4 @@
}
}
}
}


}