first load

styles/_request.scss

@@ -0,0 +1,183 @@
+/***** Request *****/
+.request {
+  &-container {
+    @include desktop {
+      align-items: flex-start;
+      flex-direction: row;
+    }
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .comment-container {
+      min-width: 0;
+    }
+  }
+
+  &-breadcrumbs {
+    @include desktop { margin-bottom: 60px; }
+    margin-bottom: 40px;
+  }
+
+  &-main {
+    flex: 1 0 auto;
+    order: 1;
+
+    .comment-fields, .request-submit-comment {
+      display: none;
+    }
+
+    .comment-fields.shown { display: block; }
+    .request-submit-comment.shown { display: inline; }
+
+    @include desktop {
+      flex: 0 0 66%; // 4% spacing
+      order: 0;
+      min-width: 0; // Tricky detail to show truncated text https://css-tricks.com/flexbox-truncated-text/
+    }
+
+    .comment-form-controls {
+      display: block;
+    }
+    .comment-ccs { display: block; }
+
+    .comment-show-container {
+      border-radius: 2px;
+      border: 1px solid $low-contrast-border-color;
+      color: $secondary-text-color;
+      text-align: inherit;
+      padding: 8px 25px;
+      width: 100%;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .form-field.comment-ccs {
+      & > ul {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: 0;
+
+        &[data-hc-focus="true"] {
+          border: 1px solid $brand_color;
+        }
+      }
+
+      & > input[type="text"] {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: 0;
+      }
+    }
+
+    .comment-ccs + textarea {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      margin-top: 0;
+
+      &:focus {
+        border-top: 1px solid $brand_color;
+      }
+    }
+
+    input#mark_as_solved { display: none; }
+  }
+
+  &-title {
+    @include desktop {
+      border-bottom: 1px solid $low-contrast-border-color;
+      margin-bottom: 0;
+      max-width: 66%; //Same as main container
+      padding-bottom: 20px;
+    }
+
+    width: 100%;
+  }
+
+  &-sidebar {
+    @include desktop {
+      background-color: $primary-shade;
+      border: 0;
+      font-size: $font-size-small;
+      flex: 0 0 auto;
+      padding: 0 20px;
+      width: 30%; //IE11 fix
+    }
+
+    border-bottom: 1px solid $low-contrast-border-color;
+    border-top: 1px solid $low-contrast-border-color;
+    flex: 1 0 auto;
+    order: 0; //Bring to top
+
+    h2 {
+      @include desktop {
+        display: none;
+      }
+
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+      position: relative;
+    }
+  }
+
+  &-details {
+    border-bottom: 1px solid $low-contrast-border-color;
+    font-size: 0; // To remove whitespace and do a 40%/60% split
+    margin: 0;
+    padding-bottom: 20px;
+
+    &:last-child { border: 0; }
+
+    dt, dd {
+      display: inline-block;
+      vertical-align: top;
+      font-size: $font-size-small;
+      margin: 20px 0 0 0;
+    }
+
+    dd {
+      padding: 0 10px;
+      width: 60%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &::after {
+        content: "\A";
+        white-space: pre;
+      }
+    }
+
+    dt {
+      line-break: strict;
+      color: $secondary-text-color;
+      width: 40%;
+    }
+
+    .request-collaborators {
+      display: inline-block;
+    }
+  }
+
+  &-attachments {
+    dt, dd {
+      width: 100%;
+    }
+
+    dd {
+      margin: 10px 0 0 0;
+    }
+  }
+
+  &-form textarea {
+    min-height: 120px;
+  }
+
+  &-follow-up {
+    padding-top: 20px;
+  }
+}