diff --git a/src/header.pug b/src/header.pug
index 45aff5ac515c5968cc806fdbb5e092511536042d..a4ce606f69e0faf611681177a4736aefecbea883 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -8,7 +8,7 @@
//- i#close-search-icon.icon-close(aria-hidden='true')
sib-notifications(
- id-suffix="inbox",
+ id-suffix="inbox"
bind-user
)
@@ -17,10 +17,12 @@ include templates/hd-user-avatar.pug
details#user-controls
summary(tabindex='0' role='button')
sib-display#user-controls__profile(
- data-fields='first_name, account.picture',
- widget-account.picture='hd-user-avatar',
+ data-fields='first_name, account.picture'
+ widget-account.picture='hd-user-avatar'
bind-user
)
+ #user-controls__panel
+ include page-user-panel.pug
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
diff --git a/src/index.pug b/src/index.pug
index 527915cf5e11508a00d4a9500357a48fe27c69b9..2e31896f6eab2bb665be6fc621acd68393f6648b 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -37,3 +37,6 @@ html(lang="en")
#messages(hidden).with-sidebar
include page-messages.pug
+
+ #my-profile(hidden).no-sidebar
+ include page-user-profile.pug
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 5671911b9d63d36d5a527aed145ef4a31da5749a..79cc956f5f6fa9ced44e5f2b842d7fdcef2e1cfb 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -64,4 +64,5 @@ nav#main__menu
)
div.divider
+ sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
diff --git a/src/page-circle-chat.pug b/src/page-circle-chat.pug
index 606e5a7327d19b5e2a4778545643aecc9a3dcbb9..48a1c7f9e4988b1a765df74d562c38475ab0d136 100644
--- a/src/page-circle-chat.pug
+++ b/src/page-circle-chat.pug
@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',
diff --git a/src/page-circle-create.pug b/src/page-circle-create.pug
index f446f1100c083aa8c395f9fe41c39e48343180a5..cfc2a83a81532a4b7dfb9d6811922e3ffa55c3e9 100644
--- a/src/page-circle-create.pug
+++ b/src/page-circle-create.pug
@@ -1,4 +1,4 @@
-.content-box.with-form.full-width
+.content-box.with-padding.with-form.full-width
h1 New group
p Here you can create a new group according to your interests, what you want to share, etc.
diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index a6edfedf56320d54018a5b36c5bc23e9da328c52..b27226de02ce932fd42f8901921bdcb293bbacd3 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -1,4 +1,4 @@
-#circle-edit.content-box.with-form.full-width
+#circle-edit.content-box.with-padding.with-form.full-width
h1 Edit group
sib-form.block(
range-owner=`${endpoints.users}`,
diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug
index 7784abfeab123add0c3832e80daf27ea6a30f4bb..70260fac813709b9211b27f7c3edfab87aadb5f4 100644
--- a/src/page-circle-profile.pug
+++ b/src/page-circle-profile.pug
@@ -1,4 +1,4 @@
-.content-box.full-width
+.content-box.with-padding.full-width
h2 Channel's name:
sib-display(
data-fields='name',
diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug
index 9e7cb2e7321d5156ab0a808e9276ca3e77a9b0f6..f2186445534c41afd357a767d7cc779aa818d27f 100644
--- a/src/page-job-offer-create.pug
+++ b/src/page-job-offer-create.pug
@@ -1,4 +1,4 @@
-.content-box.with-form
+.content-box.with-padding.with-form
h1 Post a new job offer
p.center This form allows you to share an offer to all members of the network.
diff --git a/src/page-job-offer-edit.pug b/src/page-job-offer-edit.pug
index 362a9defca5301e93c8149871fda0a5f55cb33c9..bce315ca5a74bb5099f6650334a92a769ef4599f 100644
--- a/src/page-job-offer-edit.pug
+++ b/src/page-job-offer-edit.pug
@@ -1,4 +1,4 @@
-.content-box.with-form
+.content-box.with-padding.with-form
h1 Edit your job offer
sib-form.block(
diff --git a/src/page-messages.pug b/src/page-messages.pug
index fdc62b265c8c2633ca05edb40e20e8b4566d940b..8f90ba4f67846c6f141d3fd2073cdbf8fc2217de 100644
--- a/src/page-messages.pug
+++ b/src/page-messages.pug
@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',
diff --git a/src/page-project-chat.pug b/src/page-project-chat.pug
index fdc62b265c8c2633ca05edb40e20e8b4566d940b..8f90ba4f67846c6f141d3fd2073cdbf8fc2217de 100644
--- a/src/page-project-chat.pug
+++ b/src/page-project-chat.pug
@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',
diff --git a/src/page-project-create.pug b/src/page-project-create.pug
index f7c3f77c6c8eed484e976862697121d33e6f93bd..29f271cea1f6d9531f66301ea9cc877f9416d006 100644
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@@ -1,4 +1,4 @@
-.content-box.with-form.full-width
+.content-box.with-padding.with-form.full-width
h1 New project
p Here you can create your project, add members and assign them a job.
diff --git a/src/page-project-drive.pug b/src/page-project-drive.pug
index 852dbf88e0d0d6aef3bea398ba835196460fb1fb..0e2a9f36dc5c23a2c1b72628812ae2ef66873dda 100644
--- a/src/page-project-drive.pug
+++ b/src/page-project-drive.pug
@@ -3,7 +3,7 @@ sib-widget(name='hd-drive')
iframe.drive.chat-view(
src='https://drive.google.com/embeddedfolderview?id=${value}'
)
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
sib-display(
bind-resources=""
data-fields="driveID"
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index ad0bbd9f841c6fb42a5a4e6e4d4de341deae7114..ecb101b7c820d73ede3ae720fb8d2dac6326f88d 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -1,6 +1,6 @@
-.content-box.with-form.full-width
+.content-box.with-padding.with-form.full-width
h1 Edit your project
p Here you can edit your projet's details
diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug
index fb8cf934e1c28ed62fcd63ace06e0ae1a4597993..a25bbab23fa53cf535b827d6cd5253798166395b 100644
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@@ -1,4 +1,4 @@
-.content-box.full-width
+.content-box.with-padding.full-width
include templates/template-business-provider.pug
include templates/template-customer.pug
diff --git a/src/page-user-panel.pug b/src/page-user-panel.pug
index 0cb52533ac46c9d4db4a7f512c0200913169ee3a..988cf84a9f31a6739ba48eaa7836af8286d95865 100644
--- a/src/page-user-panel.pug
+++ b/src/page-user-panel.pug
@@ -1,13 +1,9 @@
-//- nav(role="user's functionalities menu")
-//- sib-router
-//- ul
-//- sib-route(name='user-profile')
-//- li
-//- a(href='#') My profile
-//- sib-route(name='user-settings')
-//- li
-//- a(href='#') Settings
-//- sib-route(name='user-admin')
-//- li
-//- a Admin
-//- button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
+nav(role="user's functionalities menu")
+ ul
+ li
+ sib-link(next='my-profile') My profile
+ //-li
+ sib-link(next='user-settings') Settings
+ //-li
+ sib-link(name='user-admin') Admin
+ //-button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
diff --git a/src/page-user-profile.pug b/src/page-user-profile.pug
new file mode 100644
index 0000000000000000000000000000000000000000..ed4a578fe17b5297e3e5585066daac394edcb383
--- /dev/null
+++ b/src/page-user-profile.pug
@@ -0,0 +1,78 @@
+include templates/template-groups.pug
+
+.content-box.with-form.user-profile__container
+
+ .section.user-bio
+
+ sib-display.avatar-display(
+ bind-user=''
+ data-fields='account.picture'
+ label-account.picture=''
+ widget-account.picture='sib-display-img'
+ )
+
+ sib-display.name-diplay(
+ bind-user=''
+ data-fields='user-name-groups, username'
+ set-user-name-groups='name, groups'
+
+ class-name='name'
+
+ label-groups=''
+ multiple-groups=''
+ widget-groups='groups-name'
+
+ class-username='username'
+ )
+
+ sib-form.info-form(
+ bind-user=''
+ data-fields='profile.bio, inline-1, inline-2, inline-3, account.picture, instruction'
+
+ set-inline-1='profile.city, email'
+
+ set-inline-2='profile.phone, profile.website'
+
+ set-inline-3='profile.available'
+
+ class-profile.bio='form-label is-light'
+ label-profile.bio='short description'
+
+ class-profile.city='form-label is-light'
+ label-profile.city='your cell'
+
+ class-email='form-label is-light'
+
+ class-profile.phone='form-label is-light'
+ label-profile.phone='phone'
+
+ class-profile.website='form-label is-light'
+ label-profile.website='your website'
+
+ class-profile.available='form-label is-light'
+ label-profile.available='your availability'
+
+ class-account.picture='form-label is-light'
+ label-account.picture='your picture'
+
+ widget-instruction='hd-instruction'
+ )
+
+ .section.user-skills
+
+ sib-form(
+ bind-user=''
+ range-skills=`${endpoints.skills}`
+ data-fields='skills'
+
+ class-skills='form-label is-dark'
+ label-skills='Your main skills (4 max.):'
+ multiple-skills='sib-multiple-select'
+ widget-skills='sib-form-auto-completion'
+ )
+
+
+ sib-widget(name='hd-instruction')
+ template
+ span Show us your most beautiful smile
+ p Pictures help us to know ourselves and also to recognize ourselves, so don't be afraid to show your pretty face and avoid strange avatars.
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index 7da580214bb4a5b74cfe210701ebc25d38863856..3abbbe1e1da33b1af4bcf4043cd234c55e8ceed8 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -18,4 +18,5 @@ div#viewport {
@import 'layout/job-offers/index';
@import 'layout/project-profile/index';
@import 'layout/circle-profile/index';
+ @import 'layout/user/index';
}
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index 79eb075be3ccc39de403e6215240eb145f4ad4d2..a2b0c07b3df9e4d1e5f6bd076c3d43a8073b7973 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -1,7 +1,7 @@
.content-box {
&.with-form {
-
+
hd-template-project-title {
border-bottom: 1px solid $color-221-51-90;
color: $color-233-18-29;
@@ -11,7 +11,6 @@
}
sib-form {
- border-bottom: 1px solid $color-210-17-91;
padding-bottom: 2.55rem;
}
@@ -66,7 +65,7 @@
}
}
- input[type="submit"] {
+ input[type='submit'] {
background-color: $color-233-18-29;
border: none;
border-radius: 100em;
@@ -82,6 +81,7 @@
/* CLASSES Peut-être à sortir de .content-box */
.form-label {
+ flex: 1 1 auto;
font-weight: 600;
&.is-dark label {
@@ -133,6 +133,7 @@
}
sib-multiple-select {
+
sib-form-auto-completion > label {
display: flex;
flex-direction: column;
@@ -199,7 +200,7 @@
}
}
- /*
+ /*
input {
-webkit-appearance: none;
align-items: center;
@@ -352,7 +353,7 @@
}
*/
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
- /*
+ /*
sib-form-multiple-dropdown {
button {
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 6acb80a560e3a67bb25e2b84918aaadb36c3e95d..360531f3de0b3941cd83f22c0def7117941e92a6 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -1,207 +1,222 @@
#header {
- max-height: 51px;
- height: 51px;
+ max-height: 83px;
+ height: 83px;
align-items: center;
background-color: $color-0-0-100;
color: $color-216-4-22;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
display: flex;
flex-shrink: 0;
- padding: 1.6rem 0.64rem;
+ // padding: 1.6rem 0.64rem;
position: relative;
z-index: 1;
> *:not(sib-widget) {
padding: 0 2.5rem;
}
-}
-#logo {
- flex: 1 1 0;
-}
-
-#search-bar {
- position: relative;
+ #logo {
+ flex: 1 1 0;
+ }
- #search-input {
- border-radius: 10em;
- padding: 0.64rem 1.28rem;
- border: 1px solid $color-215-9-73;
- height: 3.8rem;
- width: 28rem;
- -webkit-appearance: textfield;
-
- & ~ #close-search-icon,
- & ~ #search-icon {
- color: $color-215-9-73;
- display: block;
- font-size: 1.7rem;
- margin: auto;
- position: absolute;
- right: 3.7rem;
- top: 50%;
- transform: translateY(-50%);
- -webkit-text-stroke: 1px $color-215-9-73;
+ #search-bar {
+ position: relative;
+
+ #search-input {
+ border-radius: 10em;
+ padding: 0.64rem 1.28rem;
+ border: 1px solid $color-215-9-73;
+ height: 3.8rem;
+ width: 28rem;
+ -webkit-appearance: textfield;
+
+ & ~ #close-search-icon,
+ & ~ #search-icon {
+ color: $color-215-9-73;
+ display: block;
+ font-size: 1.7rem;
+ margin: auto;
+ position: absolute;
+ right: 3.7rem;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-text-stroke: 1px $color-215-9-73;
+ }
+
+ & ~ #close-search-icon {
+ opacity: 0;
+ }
+
+ &:focus {
+ & ~ #close-search-icon {
+ opacity: 1;
+ }
+
+ & ~ #search-icon {
+ visibility: hidden;
+ }
+ }
}
+ }
- & ~ #close-search-icon {
- opacity: 0;
- }
+ details {
+ margin-right: 2.5rem;
- &:focus {
- & ~ #close-search-icon {
- opacity: 1;
+ summary {
+
+ &::-moz-list-bullet {
+ list-style-type: none;
}
- & ~ #search-icon {
- visibility: hidden;
+ &::-webkit-details-marker {
+ display: none;
}
}
}
-}
-
-details {
- // cursor: pointer;
-
- summary {
-
- &::-moz-list-bullet {
- list-style-type: none;
- }
-
- &::-webkit-details-marker {
- display: none;
- }
- }
-}
-
-details {
- position: relative;
-
- .sib-notifications__button {
- @include icon('bell');
- font-size: 3rem;
-
- &::before {
- margin-left: 0;
- }
-
- img {
- display: none;
+
+ details {
+ position: relative;
+
+ .sib-notifications__button {
+ @include icon('bell');
+ font-size: 3rem;
+
+ &::before {
+ margin-left: 0;
+ }
+
+ img {
+ display: none;
+ }
+
+ .sib-notifications__counter {
+ left: 2.1rem;
+ position: absolute;
+ top: -3px;
+ }
}
-
- .sib-notifications__counter {
- left: 2.1rem;
+
+ .sib-notifications__list {
position: absolute;
- top: -3px;
+ right: 0;
+ top: 5.6rem;
}
}
-
- .sib-notifications__list {
- position: absolute;
- right: 0;
- top: 5.6rem;
- }
-}
-
-details#user-controls {
-
- // summary:focus {
- // background-color: $color-233-18-29;
- // color: $color-0-0-100;
- // outline: none;
- // }
-
- #user-controls__profile {
- div {
- display: flex;
- flex-direction: row-reverse;
-
- > * {
- vertical-align: middle;
- }
-
- img {
- border-radius: 100%;
- height: 4.8rem;
- margin-right: 2rem;
- object-fit: cover;
- object-position: center;
- width: 4.8rem;
+
+ details#user-controls {
+ padding: 0;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ summary {
+ padding: 16px;
+ cursor: pointer;
+ &:focus {
+ background-color: $color-233-18-29;
+ color: $color-0-0-100;
+ outline: none;
}
-
- sib-display-value[name='first_name'] {
- // @include icon('arrow-down');
- align-items: center;
+ }
+
+ #user-controls__profile {
+ div {
display: flex;
flex-direction: row-reverse;
- font-size: 1.8rem;
- font-weight: 600;
-
- &::before {
- margin-left: 1.5rem;
+
+ > * {
+ vertical-align: middle;
+ }
+
+ img {
+ border-radius: 100%;
+ height: 4.8rem;
+ margin-right: 2rem;
+ object-fit: cover;
+ object-position: center;
+ width: 4.8rem;
+ }
+
+ sib-display-value[name='first_name'] {
+ @include icon('arrow-down');
+ align-items: center;
+ display: flex;
+ flex-direction: row-reverse;
+ font-size: 1.8rem;
+ font-weight: 600;
+
+ &::before {
+ margin-left: 1.5rem;
+ }
}
}
}
- }
-
- #user-controls__panel {
- height: 0;
- position: absolute;
- right: 0;
- z-index: 1;
-
- > nav {
- background-color: $color-0-0-100;
- box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+
+ #user-controls__panel {
+ height: 0;
position: absolute;
right: 0;
- top: 0;
- width: 208px;
+ z-index: 1;
+ width: 100%;
+ top: 83px;
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
+ > nav {
+ background-color: $color-0-0-100;
+ box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
- li {
- border-bottom: 1px solid $color-213-20-91;
- margin-right: 0;
- padding: 1.6rem 1.3rem;
-
- a {
- color: $color-213-4-50;
- text-decoration: none;
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+
+ sib-link {
+ color: $color-213-4-50;
+ display: block;
+ border-bottom: 1px solid $color-213-20-91;
+ margin-right: 0;
+ padding: 1.6rem 1.3rem;
+ &:hover {
+ color: $color-244-73-62;
+ }
+ }
}
}
+
+ button {
+ color: $color-213-4-50;
+ padding: 1.6rem 1.3rem;
+ text-align: left;
+ width: 100%;
+ }
}
-
- button {
- color: $color-213-4-50;
- padding: 1.6rem 1.3rem;
- text-align: left;
- width: 100%;
+ }
+
+ &[open] {
+ background-color: $color-233-18-29;
+ color: $color-0-0-100;
+
+ #user-controls__profile {
+
+ div {
+
+ sib-display-value[name='first_name'] {
+ @include icon('close');
+
+ &::before {
+ margin-left: 1.5rem;
+ }
+ }
+ }
}
}
}
-
- // &[open] {
- // background-color: $color-233-18-29;
- // color: $color-0-0-100;
-
- // #user-controls__profile {
-
- // div {
-
- // sib-display-value[name='first_name'] {
- // @include icon('close');
-
- // &::before {
- // margin-left: 1.5rem;
- // }
- // }
- // }
- // }
- // }
-}
-
+
+}
\ No newline at end of file
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index a64ec03d5fed6bf77fdf15680459001fdc1cecca..1674a7c0bedfd182d6b649628b6cee05b1fdd2de 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -63,7 +63,7 @@ h6 {
}
h1 {
- font-size: 2.1rem;
+ font-size: 2rem;
}
h2 {
@@ -107,7 +107,6 @@ a {
.content-box {
@include window-style-modal();
- @extend %padding-main;
display: flex;
flex-direction: column;
flex-grow: 1;
@@ -120,6 +119,10 @@ a {
margin: 0 auto;
min-height: calc(100vh - 84px);
}
+
+ &.with-padding {
+ @extend %padding-main;
+ }
}
.drive {
@@ -144,6 +147,24 @@ a {
}
}
+.name {
+ color: $color-216-4-22;
+ font-size: 2rem;
+ font-weight: bold;
+}
+
+.username {
+
+ &::before {
+ content: '@';
+ }
+}
+
+.section {
+ border-bottom: 1px solid $color-221-51-90;
+ padding: 4.5rem;
+}
+
// Compatibility layer for non-updated components
@import 'compat';
// Other base components
diff --git a/src/styles/layout/members/member-profile.scss b/src/styles/layout/members/member-profile.scss
index b0942b295efee21181682ec39cf150b0d0c39f3d..211f1180f0fbb1419487afd4b06fd77b86aed5d4 100644
--- a/src/styles/layout/members/member-profile.scss
+++ b/src/styles/layout/members/member-profile.scss
@@ -12,14 +12,12 @@
.member-bio {
div[name='member-profile__bio'] {
- border-bottom: 1px solid $color-221-51-90;
display: grid;
grid-template-areas: "avatar name status"
"avatar pseudo status"
"avatar bio status"
"avatar list button";
grid-template-columns: 1fr 2fr 1fr;
- padding: 4.5rem;
div[name='member-img'] {
grid-area: avatar;
diff --git a/src/styles/layout/user/_index.scss b/src/styles/layout/user/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1174ebde920a6b979a990edf5071beb8cf3daf38
--- /dev/null
+++ b/src/styles/layout/user/_index.scss
@@ -0,0 +1 @@
+@import 'user-profile';
\ No newline at end of file
diff --git a/src/styles/layout/user/user-profile.scss b/src/styles/layout/user/user-profile.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ec48e1be897e051cb544880ac4529fd9fb356440
--- /dev/null
+++ b/src/styles/layout/user/user-profile.scss
@@ -0,0 +1,77 @@
+.user-profile__container {
+
+ .user-bio {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-areas: "avatar name"
+ "avatar information";
+ grid-template-columns: minmax(300px, 400px) 2fr;
+
+ .avatar-display {
+ grid-area: avatar;
+ overflow: hidden;
+ position: relative;
+
+ img {
+ width: 300px;
+ height: 300px;
+ object-fit: cover;
+ border-radius: 50%;
+ overflow: hidden;
+ object-position: center;
+
+ }
+ }
+
+ .name-diplay {
+ grid-area: name;
+
+ [name='user-name-groups'] {
+ align-items: baseline;
+ align-self: end;
+ display: flex;
+
+ sib-multiple {
+ display: flex;
+ padding-left: 1.4rem;
+
+ groups-name {
+ @extend %user-role;
+ }
+ }
+ }
+ }
+
+ .info-form {
+ grid-area: information;
+
+ /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
+ [name="account.picture"] {
+ margin-bottom: 1rem;
+ }
+
+ hd-instruction {
+ margin-left: 1rem;
+
+ span {
+ color: $color-233-18-29;
+ font-weight: bold;
+ }
+
+ p {
+ margin-left: 1rem;
+ }
+ }
+ /* Fin commentaire sur upload photos */
+ }
+
+ [name^="inline-"] {
+ display: flex;
+ justify-content: flex-start;
+
+ >*:not(:last-child) {
+ margin-right: 3rem;
+ }
+ }
+ }
+}