Add CSS fixes and progress styling

Author: constantine-nikolaou

app/assets/stylesheets/custom.scss

@@ -7,7 +7,7 @@
 }
 
 .content-wrap {
-  padding-bottom: 0px;
+  padding:0px;
 }
 
 .button-directory {
@@ -85,4 +85,210 @@ p.member_profile_invalid {
 .filter-title {
   padding-top:8px;
   margin:0px;
+}
+
+.page-actions {
+  border-bottom: #e8e8e8 solid 1px;
+  background-color: #fcfcfc;
+}
+
+.break-word {
+  word-wrap:break-word;
+
+  li {
+    word-wrap:break-word;
+  }
+}
+
+.button-container {
+  width:100%;
+  height:40px;
+  margin:auto;
+}
+
+// Job Description
+.job-description {
+  border: 1px solid #e8e8e8;
+  background-color: #fcfcfc;
+  padding: 20px;
+  margin-top: 20px;
+  border-radius: 6px;
+}
+
+// Progress Bar
+.progress-all ::before {
+  box-sizing: unset;
+}
+
+.progress-all {
+  margin: 8px;
+  font-family: 'Open Sans', sans-serif;
+
+  color: var(--color-black);
+  --color-white: #fff;
+  --color-black: #333;
+  --color-gray: #75787b;
+  --color-gray-light: #bbb;
+  --color-gray-disabled: #e8e8e8;
+  --color-green: #53a318;
+  --color-green-dark: #383;
+  --font-size-small: 10px
+  --font-size-default: 12px;
+  
+  h2 {
+    color: var(--color-gray);
+    font-size: var(--font-size-small);
+    line-height: 1.5;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+  }
+}
+
+.progress-section section {
+  margin-bottom: 12px;
+}
+
+.progress-bar-2 {
+  display: flex;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 24px 0;
+}
+
+.progress-bar-2 li {
+  flex: 2;
+  position: relative;
+  padding: 0 0 14px 0;
+  font-size: var(--font-size-default);
+  line-height: 1.5;
+  color: var(--color-green);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: visible;
+  min-width: 0;
+  text-align: center;
+  border-bottom: 2px solid var(--color-gray-disabled);
+}
+.progress-bar-2 li:first-child,
+.progress-bar-2 li:last-child {
+  flex: 1;
+  text-align: left;
+}
+.progress-bar-2 li:last-child {
+  text-align: right;
+}
+.progress-bar-2 li:before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-gray-disabled);
+  border-radius: 50%;
+  border: 2px solid var(--color-white);
+  position: absolute;
+  left: calc(50% - 6px);
+  bottom: -7px;
+  z-index: 3;
+  transition: all .2s ease-in-out;
+}
+.progress-bar-2 li:first-child:before {
+  left: 0;
+}
+.progress-bar-2 li:last-child:before {
+  right: 0;
+  left: auto;
+}
+.progress-bar-2 span {
+  transition: opacity .3s ease-in-out;
+}
+.progress-bar-2 li:not(.is-active) span {
+  color: #bbb;
+}
+.progress-bar-2 .is-complete:not(:first-child):after,
+.progress-bar-2 .is-active:not(:first-child):after {
+  content: "";
+  display: block;
+  width: 100%;
+  position: absolute;
+  bottom: -2px;
+  left: -50%;
+  z-index: 2;
+  border-bottom: 2px solid var(--color-green);
+}
+.progress-bar-2 li:last-child span {
+  width: 200%;
+  display: inline-block;
+  position: absolute;
+  left: -100%;
+}
+
+.progress-bar-2 .is-complete:last-child:after,
+.progress-bar-2 .is-active:last-child:after {
+  width: 200%;
+  left: -100%;
+}
+
+.progress-bar-2 .is-complete:before {
+  background-color: var(--color-green);
+}
+
+.progress-bar-2 .is-active:before,
+.progress-bar-2 li:hover:before,
+.progress-bar-2 .is-hovered:before {
+  background-color: var(--color-white);
+  border-color: var(--color-green);
+}
+.progress-bar-2 li:hover:before,
+.progress-bar-2 .is-hovered:before {
+  transform: scale(1.33);
+}
+
+.progress-bar-2 li:hover span,
+.progress-bar-2 li.is-hovered span {
+  opacity: 1;
+}
+
+.progress-bar-2:hover li:not(:hover) span {
+  opacity: 0;
+}
+
+.x-ray .progress-bar-2,
+.x-ray .progress-bar-2 li {
+  border: 1px dashed red;
+}
+
+.progress-bar-2 .has-changes {
+  opacity: 1 !important;
+}
+.progress-bar-2 .has-changes:before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: calc(50% - 4px);
+  bottom: -20px;
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%208%22%3E%3Cpath%20fill%3D%22%23ed1c24%22%20d%3D%22M4%200l4%208H0z%22%2F%3E%3C%2Fsvg%3E');
+}
+
+// Entry customisation
+.entry {
+  margin: 0 0 10px;
+  padding: 0 0 10px;
+  border:0px;
+}
+
+.job-post-user-actions {
+  height:100px;
+}
+
+.style-msg .sb-msg {
+  border-left: 3px solid rgba(255, 255, 255, 0.5);
+  border-right: 3px solid rgba(255, 255, 255, 0.5);
+}
+
+.add-content-margin {
+  margin-top: 25px;
 }

app/assets/stylesheets/responsive.scss

@@ -1389,11 +1389,15 @@
     }
   }
   #page-title {
-    padding: 20px 0 25px;
+    padding: 20px 0 5px;
     text-align: center;
     h1 {
       line-height: 1.5;
-      font-size: 24px;
+      font-size: 20px;
+    }
+    h2 {
+      line-height: 1.2;
+      font-size: 18px;
     }
     .breadcrumb {
       position: relative !important;

app/assets/stylesheets/style.scss

@@ -169,7 +169,7 @@ h1, h2, h3, h4, h5, h6 {
   color: #444;
   font-weight: 600;
   line-height: 1.5;
-  margin: 0 0 30px 0;
+  margin: 0 0 5px 0;
   font-family: 'Raleway', sans-serif;
 }
 
@@ -3918,7 +3918,7 @@ body {
     font-weight: 600;
     letter-spacing: 1px;
     color: #333;
-    font-size: 28px;
+    font-size: 24px;
     text-transform: uppercase;
   }
   span {