diff --git a/src/dependencies.pug b/src/dependencies.pug
index 1b4295fa471ad97c612edd9b39ac8244f1a8e8cc..305ec0e2dba42df347b19c6d05afdf3fe2d836fa 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -13,7 +13,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
//- script(type="module" src="/lib/sib-directory/sib-directory.js")
-//- script(type="module" src="/lib/sib-job-board/sib-job-board.js")
+script(type="module" src="/lib/sib-job-board/sib-job-board.js")
//- CDN
script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
@@ -22,4 +22,4 @@ script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2")
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.1")
+//-script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.1")
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 4a4360834edb735700064c99f9ed99e8e7fa5f3a..bf8f4bf26571914c020a22f79eb338e22ec64804 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -2,6 +2,20 @@ document.addEventListener('DOMContentLoaded', function (event) {
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
+ const AllConversations = document.querySelector(".jsAllConversations");
+ const conversations = Array.from(AllConversations.querySelectorAll("sib-display[data-fields='offer-detail, badge, conversation']"));
+
+ //- Open/close comments in the job-offers view
+ conversations.forEach(conversation => {
+ const button = conversation.querySelector("hd-offers-counter[name='badge']");
+ const icon = button.querySelector('div.jsIcon');
+ const conversationBlock = conversation.querySelector("sib-display.conversation");
+
+ button.addEventListener('click', e => {
+ icon.classList.toggle('is-down');
+ conversationBlock.classList.toggle('is-hidden');
+ });
+ });
//- View change event
// window.addEventListener('navigate', (event) => {
@@ -45,5 +59,4 @@ document.addEventListener('DOMContentLoaded', function (event) {
document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
}
}
-
});
\ No newline at end of file
diff --git a/src/styles/base/form.scss.orig b/src/styles/base/form.scss.orig
new file mode 100644
index 0000000000000000000000000000000000000000..d14feffd93721d8e0ebf29f0720e834e0b379bc0
--- /dev/null
+++ b/src/styles/base/form.scss.orig
@@ -0,0 +1,470 @@
+.content-box {
+
+ &.with-form {
+
+ hd-template-project-title {
+ border-bottom: 1px solid $color-221-51-90;
+ color: $color-233-18-29;
+ font-size: 1.8rem;
+ font-weight: 600;
+ padding-bottom: 1rem;
+ }
+
+ sib-form {
+ padding-bottom: 2.55rem;
+ }
+
+ h1 {
+ color: $color-233-18-29;
+ font-weight: bold;
+ font-size: 2rem;
+ text-align: center;
+ }
+
+ p.center {
+ margin: 0;
+ text-align: center;
+ }
+
+ [name$='-text'] {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ }
+
+ div[name^='block-'] {
+ display: flex;
+ flex-direction: column;
+ }
+
+ label {
+ display: flex;
+ flex-direction: column;
+
+ input,
+ textarea {
+ -webkit-tap-highlight-color: $color-244-73-62;
+ background-color: $color-222-57-95;
+ box-sizing: border-box;
+ border: 2px solid $color-222-57-95;
+ color: $color-233-18-29;
+ /*flex: 1 1 0; Problem on Firefox for input type date*/
+ line-height: 1;
+ margin-top: 0.8rem;
+ min-width: 0;
+ padding: 1rem;
+ }
+
+ input:not([type="search"]),
+ textarea {
+ border: 2px solid $color-222-57-95;
+
+ &:focus,
+ &:active {
+ border-bottom: 2px solid $color-244-73-62;
+ }
+ }
+ }
+
+ input[type='submit'] {
+ background-color: $color-233-18-29;
+ border: none;
+ border-radius: 100em;
+ color: $color-0-0-100;
+ float: right;
+ font-size: 1.4rem;
+ font-weight: bold;
+ margin-top: 6rem;
+ padding: 0.85rem 2.55rem;
+ text-transform: uppercase;
+ }
+
+ /* CLASSES Peut-être à sortir de .content-box */
+
+ .form-label {
+ flex: 1 1 auto;
+ font-weight: 600;
+
+ &.is-dark label {
+ color: $color-216-4-22;
+ margin-top: 3rem;
+ }
+
+ &.is-light label {
+ color: $color-244-10-70;
+ margin-top: 2.2rem;
+ text-transform: uppercase;
+ }
+ }
+
+ /* WIDGETS */
+
+ sib-form-date {
+ input[type="date"] {
+ background-image: url("/images/calendar.svg");
+ background-position: right 12px top 50%;
+ background-repeat: no-repeat;
+ background-size: 1.4rem;
+ color: $color-213-4-50;
+ cursor: default;
+ font-size: 1.4rem;
+ margin-top: 1.6rem;
+ max-width: 50vw;
+ padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */
+ padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */
+ position: relative;
+
+ &::-webkit-calendar-picker-indicator {
+ cursor: pointer;
+ opacity: 0;
+ position: absolute;
+ right: 8px;
+ }
+
+ &::-webkit-clear-button {
+ cursor: pointer;
+ margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
+ margin-right: 5px;
+ }
+
+ &::-webkit-inner-spin-button {
+ display: none;
+ }
+ }
+ }
+
+ sib-multiple-select {
+
+ sib-form-auto-completion > label {
+ display: flex;
+ flex-direction: column;
+
+ .ss-main {
+ margin-bottom: 7.8rem;
+ margin-top: 1.6rem;
+ max-width: 50vw;
+
+ .ss-multi-selected {
+ align-items: center;
+ background-color: $color-222-57-95;
+ border: none;
+ border-radius: 0px;
+ display: flex;
+ justify-content: flex-end;
+ min-height: 4.2rem;
+ padding-left: 1.2rem;
+
+ .ss-add {
+ font-size: 1.8rem;
+ margin: 0 18px 0 0;
+
+ span.ss-plus {
+ background: $color-244-73-62;
+
+ &::after {
+ background: $color-244-73-62;
+ }
+ }
+ }
+
+ .ss-values {
+ background: transparent;
+ position: absolute;
+ top: 6rem;
+ width: 100%;
+
+ .ss-disabled {
+ color: transparent;
+ font-size: 1.4rem;
+ left: calc(1.2rem - 5px);
+ position: absolute;
+ top: calc(-6rem + 7px);
+
+ &::before {
+ color: $color-213-4-50;
+ content: "Select skills";
+ font-weight: normal;
+ }
+ }
+
+ .ss-value {
+ @extend .skill;
+ display: flex;
+
+ .ss-value-delete {
+ font-weight: normal;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ /*
+ input {
+ -webkit-appearance: none;
+ align-items: center;
+ background: $color-222-57-95;
+ border: none;
+ color: $color-233-18-29;
+ display: inline-flex;
+ justify-content: flex-start;
+ line-height: 1.5;
+ vertical-align: top;
+ }
+
+ sib-form-auto-completion,
+ sib-form-checkbox,
+ sib-form-dropdown,
+ sib-form-label-text,
+ sib-form-multiple-dropdown,
+ sib-form-number,
+ sib-form-textarea {
+ display: flex;
+ flex-direction: column;
+
+ >label {
+ color: $color-244-10-70;
+ font-weight: 600;
+ margin: 2em 0 0.5em;
+ text-transform: uppercase;
+
+ >div {
+ padding-bottom: 1rem;
+ }
+ }
+
+ select,
+ textarea {
+ background: $color-222-57-95;
+ border: none;
+ color: $color-233-18-29;
+ line-height: 1.5;
+ width: 100%;
+
+ }
+
+ select,
+ textarea {
+ padding: 1.7rem;
+ }
+
+ select {
+ margin-bottom: 1.7rem;
+ }
+ }
+
+ sib-form-auto-completion,
+ sib-form-checkbox,
+ sib-form-multiple-dropdown {
+
+ label {
+ color: $color-216-4-22;
+ font-weight: 600;
+ text-transform: initial;
+ }
+ }
+
+ sib-form-auto-completion {
+
+ div.choices__inner {
+ background-color: inherit;
+ border: none;
+ display: flex;
+ flex-direction: column-reverse;
+ padding-left: 0;
+
+ div.choices__list {
+ margin-top: 1.7rem;
+
+ div.choices__item {
+
+ button.choices__button {
+ border-left: 1px solid $color-43-100-50;
+ opacity: 1;
+ padding-left: 0;
+ }
+ }
+ }
+
+ input[type='text'].choices__input {
+ max-width: 27.2rem;
+ min-width: 27.2rem;
+ }
+ }
+ }
+
+ sib-form-checkbox {
+ flex-direction: row;
+
+ [type='checkbox'] {
+ position: relative;
+ margin-top: 2em;
+
+ &:before {
+ border: 2px solid $color-210-5-56;
+ content: '';
+ height: 1rem;
+ left: 0;
+ margin-left: 1rem;
+ padding-bottom: 0.2rem;
+ position: absolute;
+ width: 1.2rem;
+ z-index: 1;
+ }
+
+ &:checked {
+ &:before {
+ border: 2px solid $color-210-5-56;
+ color: $color-244-73-62;
+ height: 1rem;
+ left: 0;
+ margin-left: 1rem;
+ padding-bottom: 0.2rem;
+ position: absolute;
+ width: 1.2rem;
+ z-index: 1;
+ @include mdi('check');
+ }
+ }
+
+ &:after {
+ background: $color-0-0-100;
+ content: '';
+ height: 1rem;
+ position: absolute;
+ width: 1rem;
+ }
+ }
+ }
+
+ sib-form-dropdown {
+
+ select {
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ background-image: url("/images/chevron-down.png");
+ background-position: right 12px top 60%;
+ background-repeat: no-repeat;
+ background-size: 14px 9px;
+ box-sizing: border-box;
+ }
+ }
+ */
+ /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
+ /*
+ sib-form-multiple-dropdown {
+
+ button {
+ appearance: none;
+ background-color: $color-0-0-100;
+ border: 1px solid;
+ border-radius: 100%;
+ color: $color-244-73-62;
+ font-size: 2.55rem;
+ height: 1em;
+ line-height: 0;
+ margin: 0.34rem;
+ padding: 0 0.04em 0.08em;
+ vertical-align: middle;
+ width: 1em;
+ }
+ }
+
+ sib-form-textarea {
+ align-items: stretch;
+ }
+
+ sib-multiple-form {
+
+ >label {
+ display: none;
+ }
+ }
+
+ input[type='submit'] {
+ margin-top: 6rem;
+ background-color: $color-233-18-29;
+ color: $color-0-0-100;
+ float: right;
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+ */
+ }
+ /*
+ .is-horizontal {
+ display: flex;
+ }
+
+ sib-multiple-form[name='members'] {
+
+ >div {
+ align-items: center;
+ display: flex;
+ }
+
+ >div:not(:nth-child(-n + 2)) {
+
+ label {
+
+ >div {
+ display: none;
+ }
+ }
+ }
+
+ button {
+ appearance: none;
+ background-color: $color-0-0-100;
+ border: 1px solid;
+ border-radius: 100%;
+ color: $color-244-73-62;
+ font-size: 2.55rem;
+ height: 1em;
+ line-height: 0;
+ margin: 0.34rem;
+ padding: 0 0.04em 0.08em;
+ vertical-align: middle;
+ width: 1em;
+
+ &::after {
+ content: Add;
+ }
+ }
+ }
+ */
+}
+/*
+sib-form {
+
+ form > * {
+ margin-top: 0.85rem;
+ }
+
+ // button like
+ input[type='color'],
+ input[type='file'],
+ input[type='reset'],
+ input[type='submit'] {
+ display: inline-block;
+ padding: 0.85rem 2.55rem;
+ border: none;
+ border-radius: 100em;
+ font-weight: normal;
+ }
+
+ input[type='reset'] {
+ display: none;
+ }
+}
+*/
+<<<<<<< HEAD
+=======
+
+
+
+
+
+>>>>>>> 4ae77ed... simple css edition
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 1674a7c0bedfd182d6b649628b6cee05b1fdd2de..8fa3b610762d56c249a69e9e7d14a0b86cd9b590 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -7,6 +7,10 @@ $breakpoints: (phone: 480px,
display: none !important;
}
+sib-ac-checker[hidden] {
+ display: block !important;
+}
+
* {
outline: none;
}
diff --git a/src/styles/components/comment.scss b/src/styles/components/comment.scss
new file mode 100644
index 0000000000000000000000000000000000000000..105102f6ccf5241081a9e9afd833580b0c418e0d
--- /dev/null
+++ b/src/styles/components/comment.scss
@@ -0,0 +1,115 @@
+#job-offers {
+
+ [name="badge"] {
+ color: $color-244-73-62;
+ cursor: pointer;
+ display: flex;
+ padding: 1.3rem 2.1rem;
+
+ sib-display>div:first-of-type {
+
+ span {
+ @include icon('speech');
+ font-weight: 600;
+
+ &::before {
+ margin: 0 1rem 0 0;
+ }
+ }
+ }
+
+ .icon-arrow-up {
+ margin-left: auto;
+
+ &.is-down {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ sib-conversation.conversation {
+ font-family: Open Sans;
+
+ .sib-conversation {
+
+ [name="conversation-wrapper"] {
+ display: flex;
+
+ [name='conversation-avatar'] {
+ margin-right: 6px;
+
+ .avatar {
+ height: 35px;
+ width: 35px;
+ }
+ }
+
+ [name='conversation-content'] {
+
+ [name="author_user.name"] {
+ color: $color-0-0-29;
+ font-size: 1.5rem;
+ }
+
+ .conversation__messages {
+ display: none;
+ }
+ }
+ }
+
+ >sib-display.conversation>div>sib-display:first-child {
+ margin-bottom: 4.5rem;
+ }
+
+ sib-ac-checker {
+ border-top: 1px solid $color-210-17-91;
+
+ sib-form-textarea {
+
+ >label div {
+ color: $color-210-5-56;
+ font-size: 1.4rem;
+ margin-bottom: 1rem;
+ visibility: hidden;
+
+ &::before {
+ content: 'Add a comment';
+ visibility: visible;
+ }
+ }
+
+ textarea {
+ border: none;
+ font-size: 1.5rem;
+ resize: none;
+ }
+ }
+
+ input[type="submit"] {
+ border: 1px solid $color-244-73-62;
+ border-radius: 100em;
+ color: $color-244-73-62;
+ font-size: 1.3rem;
+ padding: 0.8rem 1.5rem;
+ text-transform: lowercase;
+
+ &:hover {
+ background-color: $color-244-73-62;
+ border: 1px solid $color-244-73-62;
+ color: white;
+ }
+ }
+ }
+
+ .conversation>div>sib-display,
+ .conversation-form {
+ border: none;
+ margin: 1rem 2.1rem;
+ }
+ }
+ }
+
+ sib-display.conversation.is-hidden {
+ display: none;
+ }
+}
diff --git a/src/styles/components/filters.scss b/src/styles/components/filters.scss
index 8c3d1c0a17262f2e1378d929f15909be4d3a2ffb..dc1b60b94f81e9394855fd929b1274a86f4e05ff 100644
--- a/src/styles/components/filters.scss
+++ b/src/styles/components/filters.scss
@@ -53,7 +53,7 @@
}
.job-board, #members-list {
- sib-form {
+ sib-form[naked] {
@extend %filters;
}
}
diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss
index 8ac068117872c3de2a42ccf5b90b9f3acd08cb0e..9abbbe8cf6e534d11878bc7ff685d5918e1f59c1 100644
--- a/src/styles/layout/job-offers/job-offers.scss
+++ b/src/styles/layout/job-offers/job-offers.scss
@@ -1,3 +1,5 @@
+@import '../../components/comment';
+
.job-offers__container {
@extend %grid-layer;
}
@@ -59,125 +61,130 @@ sib-job-board {
display: block;
font-size: 1.5rem;
margin: 1.7rem 0;
- padding: 3.4rem;
+
+ [name="offer-detail"] {
+ border-bottom: 1px solid $color-210-17-91;
+ margin: 0 2.1rem;
+ padding: 2.1rem 0;
+
+ [name='user-thumb'] {
+ align-items: center;
+ display: flex;
+ margin: -0.25em;
- [name='user-thumb'] {
- align-items: center;
- display: flex;
- margin: -0.25em;
+ >* {
+ margin: 0.25em;
+ }
- >*:not(sib-action) {
- margin: 0.25em;
- }
+ [name='author.first_name'] {
+ color: $color-0-0-29;
+ font-weight: 600;
+ }
- [name='author.first_name'] {
- color: $color-0-0-29;
- font-weight: 600;
- }
+ sib-multiple[name$='groups'] {
+ display: flex;
- sib-multiple[name$='groups'] {
- display: flex;
+ label {
+ display: none;
+ }
- label {
- display: none;
+ >* {
+ @extend %user-role;
+ }
}
- >* {
- @extend %user-role;
+ author-avatar {
+ background-color: $color-0-0-100;
+ border-radius: 50%;
+ height: 4.25rem;
+ overflow: hidden;
+ position: relative;
+ width: 4.25rem;
+
+ img {
+ height: 100%;
+ left: 0;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
}
}
- author-avatar {
- background-color: $color-0-0-100;
- border-radius: 50%;
- height: 4.25rem;
- overflow: hidden;
- position: relative;
- width: 4.25rem;
-
- img {
- height: 100%;
- left: 0;
- object-fit: cover;
- position: absolute;
- top: 0;
- width: 100%;
- }
+ [name='creationDate'] {
+ display: block;
+ margin-bottom: 0.7rem;
+ margin-top: 2rem;
}
- }
- [name='creationDate'] {
- display: block;
- margin-bottom: 0.7rem;
- margin-top: 2rem;
- }
+ [name='title'] {
+ @extend h3;
+ display: block;
+ font-weight: bold;
+ line-height: 19px;
+ }
- [name='title'] {
- @extend h3;
- display: block;
- font-weight: bold;
- line-height: 19px;
- }
+ [name='description'] {
+ display: block;
+ line-height: 1.6;
+ margin-bottom: 1.6rem;
+ }
- [name='description'] {
- display: block;
- line-height: 1.6;
- margin-bottom: 1.6rem;
- }
+ [name='skills'] {
+ label {
+ display: none;
+ }
+ }
+
+ author-contact {
+ color: $color-244-73-62;
+ font-size: 1.3rem;
+ float: right;
- [name='skills'] {
- label {
- display: none;
+ >sib-link {
+ cursor: pointer;
+ @include icon('speech');
+
+ &::before {
+ font-size: 1.5rem;
+ margin-right: 1.2rem;
+ }
+ }
}
- }
- author-contact {
- color: $color-244-73-62;
- font-size: 1.3rem;
- float: right;
+ [name='status'] {
+ float: right;
+ display: flex;
+ align-items: center;
+ margin: -0.25em;
- >sib-link {
- cursor: pointer;
- @include icon('speech');
+ >* {
+ margin: 0.25em;
+ }
- &::before {
- font-size: 1.5rem;
- margin-right: 1.2rem;
+ strong {
+ background-color: $color-244-73-62;
+ border: none;
+ border-radius: 100em;
+ color: $color-0-0-100;
+ display: inline-block;
+ font-weight: normal;
+ padding: 0.85rem 1.7rem;
}
}
}
- [name='status'] {
- float: right;
+ .sib-conversation,
+ .conversation > div {
display: flex;
- align-items: center;
- margin: -0.25em;
-
- >* {
- margin: 0.25em;
- }
+ flex-direction: column-reverse;
+ }
- strong {
- background-color: $color-244-73-62;
- border: none;
- border-radius: 100em;
- color: $color-0-0-100;
- display: inline-block;
- font-weight: normal;
- padding: 0.85rem 1.7rem;
- }
+ [name="dateCreated"] {
+ display: none;
}
}
}
}
}
-sib-action[name='edit'] {
- margin-left: auto;
- color: $color-215-6-63;
-
- &>sib-link {
- @include icon('pencil');
- font-size: 2rem;
- }
-}
-
diff --git a/src/styles/layout/job-offers/job-offers.scss.orig b/src/styles/layout/job-offers/job-offers.scss.orig
new file mode 100644
index 0000000000000000000000000000000000000000..d946a7fc8d3e025f21e574903f58cc3078fde1aa
--- /dev/null
+++ b/src/styles/layout/job-offers/job-offers.scss.orig
@@ -0,0 +1,203 @@
+.job-offers__container {
+ @extend %grid-layer;
+}
+
+sib-job-board {
+ @extend %grid-layer-main;
+ @extend %containerV;
+}
+
+.job-offers__newoffer {
+ @extend %grid-layer-links;
+ @extend %containerV;
+}
+
+#job-offers {
+
+ .plus-button {
+ @extend .howto;
+ background-color: $color-43-100-50;
+ color: $color-0-0-100;
+ font-weight: bold;
+ text-transform: uppercase;
+ cursor: pointer;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+
+ .icon-plus {
+ font-size: 20px;
+ justify-content: center;
+ margin: 0.5rem 0.5rem 0.5rem 0;
+
+ }
+ }
+
+ .job-board__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: 5rem;
+ }
+
+ >sib-display {
+ @include window-style-modal();
+ display: block;
+ font-size: 1.5rem;
+ margin: 1.7rem 0;
+
+ [name="offer-detail"] {
+ padding: 2.1rem;
+ border-bottom: 1px solid $color-210-17-91;
+
+ [name='user-thumb'] {
+ align-items: center;
+ display: flex;
+ margin: -0.25em;
+
+<<<<<<< HEAD
+ >*:not(sib-action) {
+ margin: 0.25em;
+ }
+=======
+ >* {
+ margin: 0.25em;
+ }
+>>>>>>> 4ae77ed... simple css edition
+
+ [name='author.first_name'] {
+ color: $color-0-0-29;
+ font-weight: 600;
+ }
+
+ sib-multiple[name$='groups'] {
+ display: flex;
+
+ label {
+ display: none;
+ }
+
+ >* {
+ @extend %user-role;
+ }
+ }
+
+ author-avatar {
+ background-color: $color-0-0-100;
+ border-radius: 50%;
+ height: 4.25rem;
+ overflow: hidden;
+ position: relative;
+ width: 4.25rem;
+
+ img {
+ height: 100%;
+ left: 0;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+ }
+ }
+
+ [name='creationDate'] {
+ display: block;
+ margin-bottom: 0.7rem;
+ margin-top: 2rem;
+ }
+
+ [name='title'] {
+ @extend h3;
+ display: block;
+ font-weight: bold;
+ line-height: 19px;
+ }
+
+ [name='description'] {
+ display: block;
+ line-height: 1.6;
+ margin-bottom: 1.6rem;
+ }
+
+ [name='skills'] {
+ label {
+ display: none;
+ }
+ }
+
+ author-contact {
+ color: $color-244-73-62;
+ font-size: 1.3rem;
+ float: right;
+
+ >sib-link {
+ cursor: pointer;
+ @include icon('speech');
+
+ &::before {
+ font-size: 1.5rem;
+ margin-right: 1.2rem;
+ }
+ }
+ }
+
+ [name='status'] {
+ float: right;
+ display: flex;
+ align-items: center;
+ margin: -0.25em;
+
+ >* {
+ margin: 0.25em;
+ }
+
+ strong {
+ background-color: $color-244-73-62;
+ border: none;
+ border-radius: 100em;
+ color: $color-0-0-100;
+ display: inline-block;
+ font-weight: normal;
+ padding: 0.85rem 1.7rem;
+ }
+ }
+ }
+
+ .sib-conversation,
+ .conversation > div {
+ display: flex;
+ flex-direction: column-reverse;
+ }
+
+ [name="dateCreated"] {
+ display: none;
+ }
+ }
+ }
+ }
+}
+sib-action[name='edit'] {
+ margin-left: auto;
+ color: $color-215-6-63;
+
+ &>sib-link {
+ @include icon('pencil');
+ font-size: 2rem;
+ }
+}
+