css: refactoring & fixing - day 1

src/styles/layout/job-offers/_index.scss

@@ -0,0 +1 @@
+@import 'job-offers.scss';

src/styles/layout/job-offers/job-offers.scss

@@ -0,0 +1,163 @@
+#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;
+
+    }
+  }
+
+  #offers-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;
+        padding: 3.4rem;
+        /*&:nth-child(odd) {
+        background-color: $color-210-25-95;
+      }*/
+
+        [name='user-thumb'] {
+          align-items: center;
+          display: flex;
+          margin: -0.25em;
+
+          >* {
+            margin: 0.25em;
+          }
+
+          [name='author.first_name'] {
+            color: $color-0-0-29;
+            font-weight: 600;
+          }
+
+          sib-multiple[name$='groups'] {
+            display: flex;
+
+            label {
+              display: none;
+            }
+
+            >* {
+              @extend %user-role;
+            }
+          }
+
+          sib-display-img {
+            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;
+          }
+        }
+
+        [name='send'] {
+          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;
+          }
+        }
+      }
+    }
+  }
+
+}