Merge branch 'master' into feature/marker-updates

Author: shockey

src/plugins/editor/components/editor.less

@@ -1,7 +1,11 @@
-#ace-editor {
-  height:~"calc(100vh - 46px)" !important;
-}
+#swagger-editor {
+  #ace-editor {
+    height:~"calc(100vh - 46px)" !important;
+  }
 
-.SplitPane {
-  height: ~"calc(100% - 46px)" !important;
+  .SplitPane {
+    height: ~"calc(100% - 46px)" !important;
+  }
 }
+
+@import './read-only-watermark.less';

src/plugins/editor/components/read-only-watermark.less

@@ -0,0 +1,38 @@
+.editor-wrapper {
+
+  .editor-readonly-watermark {
+    position: absolute;
+    top: 0;
+    height: 40px;
+    left: 0;
+    right: 0;
+    padding-right: 20px;
+    padding-top: 10px;
+    margin: 0;
+
+    z-index: 2;
+    color: #fff;
+    font-weight: bold;
+    text-align: right;
+    user-select: none;
+    pointer-events: none;
+
+    &:before {
+      z-index: 1;
+      pointer-events: none;
+      position: absolute;
+      content: ' ';
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      background: linear-gradient(
+        to right,
+        rgba(255,255,255,0) 60%,
+        rgba(145, 145, 145, 0.31) 74%,
+        rgba(255, 255, 255, 0.17) 100%);
+
+    }
+  }
+}

src/standalone/topbar/topbar.less

@@ -1,96 +1,98 @@
-.topbar {
-  background-color: #89bf04;
-  width: 100%;
-}
+#swagger-editor {
+  .topbar {
+    background-color: #89bf04;
+    width: 100%;
+  }
 
-.topbar-wrapper {
-  padding: 0.7em;
-  display: flex;
+  .topbar-wrapper {
+    padding: 0.7em;
+    display: flex;
 
-  & > * {
-    margin-left: 1em;
-    margin-right: 1em;
-    align-self: center;
-    color: white;
-    font-size: 1.0em;
-    font-weight: 500;
-  }
+    & > * {
+      margin-left: 1em;
+      margin-right: 1em;
+      align-self: center;
+      color: white;
+      font-size: 1.0em;
+      font-weight: 500;
+    }
 
-  & .menu-item {
-    cursor: pointer;
-    font-size:14px;
+    & .menu-item {
+      cursor: pointer;
+      font-size:14px;
 
-    &::after {
-      content: '▼';
-      margin-left: 6px;
-      font-size: 8px;
+      &::after {
+        content: '▼';
+        margin-left: 6px;
+        font-size: 8px;
+      }
     }
   }
-}
 
-.topbar-logo__img {
-  float: left;
-}
+  .topbar-logo__img {
+    float: left;
+  }
 
-.topbar-logo__title {
-  display: inline-block;
-  color: #fff;
-  font-size: 1.5em;
-  font-weight: bold;
-  margin: 0.1em 1.2em 0 0.5em;
-}
+  .topbar-logo__title {
+    display: inline-block;
+    color: #fff;
+    font-size: 1.5em;
+    font-weight: bold;
+    margin: 0.1em 1.2em 0 0.5em;
+  }
 
-.dd-menu {
-  &.long {
-    display: flex;
-    flex-wrap: wrap;
-    max-width:800px;
-    .dd-menu-items {
-      width:600px;
-      .dd-items-left {
-        display: flex;
-        flex-wrap: wrap;
-        margin: 1.7em 0 0!important;
-        li {
-          flex:22%;
+  .dd-menu {
+    &.long {
+      display: flex;
+      flex-wrap: wrap;
+      max-width:800px;
+      .dd-menu-items {
+        width:600px;
+        .dd-items-left {
+          display: flex;
+          flex-wrap: wrap;
+          margin: 1.7em 0 0!important;
+          li {
+            flex:22%;
+          }
         }
       }
     }
-  }
 
-  .dd-menu-items {
-    margin: 1.1em 0 0 0 !important;
-    ol,ul {
-      border-radius:0 0 4px 4px;
+    .dd-menu-items {
+      margin: 1.1em 0 0 0 !important;
+      ol,ul {
+        border-radius:0 0 4px 4px;
 
-      li {
-        &:last-of-type {
-          &:hover {
-            border-radius:0 0 4px 4px;
+        li {
+          &:last-of-type {
+            &:hover {
+              border-radius:0 0 4px 4px;
+            }
           }
         }
       }
     }
   }
-}
 
-.modal {
-  padding: 1em;
-  padding-bottom: 3em;
-  position: relative;
-  min-height: 12em;
+  .modal {
+    padding: 1em;
+    padding-bottom: 3em;
+    position: relative;
+    min-height: 12em;
 
-  div.container {
-    height: 100%;
-  }
+    div.container {
+      height: 100%;
+    }
 
-  .right {
-    margin: 1em;
-    position: absolute;
-    right: 0;
-  }
+    .right {
+      margin: 1em;
+      position: absolute;
+      right: 0;
+    }
 
-  button {
-    margin-left: 1em;
+    button {
+      margin-left: 1em;
+    }
   }
 }