new system note design for commit discussion

1 files changed, 120 insertions, 0 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e66c1f8d072..538ad22daa4 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -172,6 +172,126 @@ ul.notes {
       &.timeline-entry {
         padding: 14px 10px;
       }
+
+      .system-note {
+        font-size: 14px;
+        padding: 0;
+        clear: both;
+
+        &.timeline-entry::after {
+          clear: none;
+        }
+
+        .system-note-message {
+          display: inline-block;
+
+          &::first-letter {
+            text-transform: lowercase;
+          }
+
+          a {
+            color: $gl-link-color;
+            text-decoration: none;
+          }
+
+          p {
+            display: inline-block;
+            margin: 0;
+
+            &::first-letter {
+              text-transform: lowercase;
+            }
+          }
+        }
+
+        .timeline-content {
+          padding: 14px 12px;
+        }
+
+        .note-body {
+          overflow: hidden;
+
+          .system-note-commit-list-toggler {
+            display: none;
+            padding: 10px 0 0;
+            cursor: pointer;
+            position: relative;
+            z-index: 2;
+
+            &:hover {
+              color: $gl-link-color;
+              text-decoration: underline;
+            }
+          }
+
+          .note-text {
+            & p:first-child {
+              display: none;
+            }
+
+            &.system-note-commit-list {
+              max-height: 63px;
+              overflow: hidden;
+              display: block;
+
+              ul {
+                margin: 3px 0 3px 15px !important;
+
+                li {
+                  font-family: $monospace_font;
+                  font-size: 12px;
+                }
+              }
+
+              p:first-child {
+                display: none;
+              }
+
+              p:last-child {
+                a {
+                  color: $gl-text-color;
+
+                  &:hover {
+                    color: $gl-link-color;
+                  }
+                }
+              }
+
+              &::after {
+                content: '';
+                width: 100%;
+                height: 67px;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                background: linear-gradient(rgba($gray-light, 0.1) -100px, $white-light 100%);
+              }
+
+              &.hide-shade {
+                max-height: 100%;
+                overflow: auto;
+
+                &::after {
+                  display: none;
+                  background: transparent;
+                }
+              }
+            }
+          }
+        }
+
+        .timeline-icon {
+          display: none;
+
+          .avatar {
+            visibility: hidden;
+
+            .discussion-body & {
+              visibility: visible;
+            }
+          }
+        }
+      }
     }
 
     &.is-editting {