Merge branch 'development' of github.com:BookStackApp/BookStack into development

[bookstack] / resources / sass / _codemirror.scss
diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss

index 0fd347cf893a3bc37f1f5379e849aa6140f552a9..a516b4426a33e782e0fae1b53bd6cc4fce3a310a 100644 (file)
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
  /**
   * Custom CodeMirror BookStack overrides
   */
  /**
   * Custom CodeMirror BookStack overrides
   */
@@ -6,7 +9,7 @@
    font-size: 12px;
    border: 1px solid #ddd;
    line-height: 1.4;
    font-size: 12px;
    border: 1px solid #ddd;
    line-height: 1.4;
-  margin-bottom: $-l;
+  margin-bottom: vars.$l;
  }
  
  .page-content .cm-editor,
  }
  
  .page-content .cm-editor,
@@ -14,6 +17,14 @@
    border-radius: 4px;
  }
  
    border-radius: 4px;
  }
  
+.cm-editor .cm-line {
+  line-height: 1.6;
+}
+
+.cm-editor .cm-line, .cm-editor .cm-gutter {
+  font-family: var(--font-code);
+}
+
  // Manual dark-mode definition so that it applies to code blocks within the shadow
  // dom which are used within the WYSIWYG editor, as the .dark-mode on the parent
  // <html> node are not applies so instead we have the class on the parent element.
  // Manual dark-mode definition so that it applies to code blocks within the shadow
  // dom which are used within the WYSIWYG editor, as the .dark-mode on the parent
  // <html> node are not applies so instead we have the class on the parent element.
@@ -30,13 +41,13 @@
    align-items: center;
    justify-content: center;
    top: -1px;
    align-items: center;
    justify-content: center;
    top: -1px;
-  right: -1px;
+  inset-inline-end: -1px;
    background-color: #EEE;
    border: 1px solid #DDD;
    background-color: #EEE;
    border: 1px solid #DDD;
-  border-radius: 0 4px 0 0;
-  @include lightDark(background-color, #eee, #333);
-  @include lightDark(border-color, #ddd, #444);
-  @include lightDark(color, #444, #888);
+  border-start-end-radius: 4px;
+  @include mixins.lightDark(background-color, #eee, #333);
+  @include mixins.lightDark(border-color, #ddd, #444);
+  @include mixins.lightDark(color, #444, #888);
    line-height: 0;
    cursor: pointer;
    z-index: 5;
    line-height: 0;
    cursor: pointer;
    z-index: 5;
@@ -50,7 +61,7 @@
      fill: currentColor;
    }
    &.success {
      fill: currentColor;
    }
    &.success {
-    background: $positive;
+    background: var(--color-positive);
      color: #FFF;
    }
    &:focus {
      color: #FFF;
    }
    &:focus {