1 files changed, 76 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss
new file mode 100644
index 00000000000..a967d9a71f1
--- /dev/null
+++ b/app/assets/stylesheets/framework/source_editor.scss
@@ -0,0 +1,76 @@
+[data-editor-loading] {
+  @include gl-relative;
+  @include gl-display-flex;
+  @include gl-justify-content-center;
+  @include gl-align-items-center;
+  @include gl-z-index-0;
+
+  > * {
+    filter: blur(5px);
+  }
+
+  &::before {
+    content: '';
+    @include spinner-deprecated(32px, 3px);
+    @include gl-absolute;
+    @include gl-z-index-1;
+  }
+
+  pre {
+    opacity: 0;
+  }
+}
+
+[id^='source-editor-'] {
+  height: 500px;
+}
+
+.monaco-editor.gl-source-editor {
+  .margin-view-overlays {
+    .line-numbers {
+      @include gl-display-flex;
+      @include gl-justify-content-end;
+      @include gl-relative;
+
+      &::before {
+        @include gl-visibility-hidden;
+        @include gl-align-self-center;
+        @include gl-bg-gray-400;
+        @include gl-mr-2;
+        @include gl-w-4;
+        @include gl-h-4;
+        mask-image: asset_url('icons-stacked.svg#link');
+        mask-repeat: no-repeat;
+        mask-size: cover;
+        mask-position: center;
+        content: '';
+      }
+
+      &:hover {
+        @include gl-text-decoration-underline;
+        cursor: pointer !important;
+      }
+
+      &:hover::before {
+        @include gl-visibility-visible;
+      }
+
+      &:focus::before {
+        @include gl-visibility-visible;
+        outline: auto;
+      }
+
+      .link-anchor {
+        @include gl-display-block;
+        @include gl-absolute;
+        @include gl-w-full;
+        @include gl-h-full;
+      }
+    }
+  }
+}
+
+.active-line-text {
+  @include gl-bg-orange-600;
+  @include gl-opacity-3;
+}