@limetech/lime-elements 39.0.1 → 39.0.2

package/dist/collection/components/code-editor/code-editor.css

@@ -1,6 +1,92 @@
 @charset "UTF-8";
+/**
+* Note! This file is exported to `dist/scss/` in the published
+* node module, for consumer projects to import.
+* That means this file cannot import from any file that isn't
+* also exported, keeping the same relative path.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /* BASICS */
-
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
@@ -10,10 +96,10 @@
 }
 
 /* PADDING */
-
 .CodeMirror-lines {
   padding: 4px 0; /* Vertical padding around content */
 }
+
 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like {
   padding: 0 4px; /* Horizontal padding of content */
@@ -24,13 +110,12 @@
 }
 
 /* GUTTER */
-
 .CodeMirror-gutters {
   border-right: 1px solid #ddd;
   background-color: #f7f7f7;
   white-space: nowrap;
 }
-.CodeMirror-linenumbers {}
+
 .CodeMirror-linenumber {
   padding: 0 3px 0 5px;
   min-width: 20px;
@@ -39,117 +124,222 @@
   white-space: nowrap;
 }
 
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
+.CodeMirror-guttermarker {
+  color: black;
+}
 
-/* CURSOR */
+.CodeMirror-guttermarker-subtle {
+  color: #999;
+}
 
+/* CURSOR */
 .CodeMirror-cursor {
   border-left: 1px solid black;
   border-right: none;
   width: 0;
 }
+
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
   border-left: 1px solid silver;
 }
+
 .cm-fat-cursor .CodeMirror-cursor {
   width: auto;
   border: 0 !important;
   background: #7e7;
 }
+
 .cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
+
 .cm-fat-cursor .CodeMirror-line::selection,
-.cm-fat-cursor .CodeMirror-line > span::selection, 
-.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
+.cm-fat-cursor .CodeMirror-line > span::selection,
+.cm-fat-cursor .CodeMirror-line > span > span::selection {
+  background: transparent;
+}
+
 .cm-fat-cursor .CodeMirror-line::-moz-selection,
 .cm-fat-cursor .CodeMirror-line > span::-moz-selection,
-.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
-.cm-fat-cursor { caret-color: transparent; }
+.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
+  background: transparent;
+}
+
+.cm-fat-cursor {
+  caret-color: transparent;
+}
+
 @-moz-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
+  50% {
+    background-color: transparent;
+  }
 }
 @-webkit-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
+  50% {
+    background-color: transparent;
+  }
 }
 @keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
+  50% {
+    background-color: transparent;
+  }
 }
-
 /* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror-overwrite .CodeMirror-cursor {}
-
-.cm-tab { display: inline-block; text-decoration: inherit; }
+.cm-tab {
+  display: inline-block;
+  text-decoration: inherit;
+}
 
 .CodeMirror-rulers {
   position: absolute;
-  left: 0; right: 0; top: -50px; bottom: 0;
+  left: 0;
+  right: 0;
+  top: -50px;
+  bottom: 0;
   overflow: hidden;
 }
+
 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
-  top: 0; bottom: 0;
+  top: 0;
+  bottom: 0;
   position: absolute;
 }
 
 /* DEFAULT THEME */
+.cm-s-default .cm-header {
+  color: blue;
+}
+
+.cm-s-default .cm-quote {
+  color: #090;
+}
+
+.cm-negative {
+  color: #d44;
+}
+
+.cm-positive {
+  color: #292;
+}
+
+.cm-header, .cm-strong {
+  font-weight: bold;
+}
+
+.cm-em {
+  font-style: italic;
+}
+
+.cm-link {
+  text-decoration: underline;
+}
+
+.cm-strikethrough {
+  text-decoration: line-through;
+}
+
+.cm-s-default .cm-keyword {
+  color: #708;
+}
+
+.cm-s-default .cm-atom {
+  color: #219;
+}
+
+.cm-s-default .cm-number {
+  color: #164;
+}
+
+.cm-s-default .cm-def {
+  color: #00f;
+}
+
+.cm-s-default .cm-variable-2 {
+  color: #05a;
+}
+
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
+  color: #085;
+}
+
+.cm-s-default .cm-comment {
+  color: #a50;
+}
+
+.cm-s-default .cm-string {
+  color: #a11;
+}
+
+.cm-s-default .cm-string-2 {
+  color: #f50;
+}
+
+.cm-s-default .cm-meta {
+  color: #555;
+}
+
+.cm-s-default .cm-qualifier {
+  color: #555;
+}
+
+.cm-s-default .cm-builtin {
+  color: #30a;
+}
+
+.cm-s-default .cm-bracket {
+  color: #997;
+}
+
+.cm-s-default .cm-tag {
+  color: #170;
+}
+
+.cm-s-default .cm-attribute {
+  color: #00c;
+}
+
+.cm-s-default .cm-hr {
+  color: #999;
+}
 
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
-
-.CodeMirror-composing { border-bottom: 2px solid; }
+.cm-s-default .cm-link {
+  color: #00c;
+}
+
+.cm-s-default .cm-error {
+  color: #f00;
+}
+
+.cm-invalidchar {
+  color: #f00;
+}
+
+.CodeMirror-composing {
+  border-bottom: 2px solid;
+}
 
 /* Default styles for common addons */
+div.CodeMirror span.CodeMirror-matchingbracket {
+  color: #0b0;
+}
 
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  color: #a22;
+}
 
-/* STOP */
+.CodeMirror-matchingtag {
+  background: rgba(255, 150, 0, 0.3);
+}
+
+.CodeMirror-activeline-background {
+  background: #e8f2ff;
+}
 
+/* STOP */
 /* The rest of this file contains styles related to the mechanics of
    the editor. You probably shouldn't touch them. */
-
 .CodeMirror {
   position: relative;
   overflow: hidden;
@@ -160,13 +350,15 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   overflow: scroll !important; /* Things will break if this is overridden */
   /* 50px is the magic margin used to hide the element's real scrollbars */
   /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -50px; margin-right: -50px;
+  margin-bottom: -50px;
+  margin-right: -50px;
   padding-bottom: 50px;
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
   z-index: 0;
 }
+
 .CodeMirror-sizer {
   position: relative;
   border-right: 50px solid transparent;
@@ -181,28 +373,39 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   display: none;
   outline: none;
 }
+
 .CodeMirror-vscrollbar {
-  right: 0; top: 0;
+  right: 0;
+  top: 0;
   overflow-x: hidden;
   overflow-y: scroll;
 }
+
 .CodeMirror-hscrollbar {
-  bottom: 0; left: 0;
+  bottom: 0;
+  left: 0;
   overflow-y: hidden;
   overflow-x: scroll;
 }
+
 .CodeMirror-scrollbar-filler {
-  right: 0; bottom: 0;
+  right: 0;
+  bottom: 0;
 }
+
 .CodeMirror-gutter-filler {
-  left: 0; bottom: 0;
+  left: 0;
+  bottom: 0;
 }
 
 .CodeMirror-gutters {
-  position: absolute; left: 0; top: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
   min-height: 100%;
   z-index: 3;
 }
+
 .CodeMirror-gutter {
   white-space: normal;
   height: 100%;
@@ -210,33 +413,46 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   vertical-align: top;
   margin-bottom: -50px;
 }
+
 .CodeMirror-gutter-wrapper {
   position: absolute;
   z-index: 4;
   background: none !important;
   border: none !important;
 }
+
 .CodeMirror-gutter-background {
   position: absolute;
-  top: 0; bottom: 0;
+  top: 0;
+  bottom: 0;
   z-index: 4;
 }
+
 .CodeMirror-gutter-elt {
   position: absolute;
   cursor: default;
   z-index: 4;
 }
-.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
-.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-gutter-wrapper ::selection {
+  background-color: transparent;
+}
+
+.CodeMirror-gutter-wrapper ::-moz-selection {
+  background-color: transparent;
+}
 
 .CodeMirror-lines {
   cursor: text;
   min-height: 1px; /* prevents collapsing before first draw */
 }
+
 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like {
   /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
   border-width: 0;
   background: transparent;
   font-family: inherit;
@@ -253,6 +469,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   -webkit-font-variant-ligatures: contextual;
   font-variant-ligatures: contextual;
 }
+
 .CodeMirror-wrap pre.CodeMirror-line,
 .CodeMirror-wrap pre.CodeMirror-line-like {
   word-wrap: break-word;
@@ -262,7 +479,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
 
 .CodeMirror-linebackground {
   position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   z-index: 0;
 }
 
@@ -272,9 +492,9 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   padding: 0.1px; /* Force widget margins to stay inside of the container */
 }
 
-.CodeMirror-widget {}
-
-.CodeMirror-rtl pre { direction: rtl; }
+.CodeMirror-rtl pre {
+  direction: rtl;
+}
 
 .CodeMirror-code {
   outline: none;
@@ -302,13 +522,17 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   position: absolute;
   pointer-events: none;
 }
-.CodeMirror-measure pre { position: static; }
+
+.CodeMirror-measure pre {
+  position: static;
+}
 
 div.CodeMirror-cursors {
   visibility: hidden;
   position: relative;
   z-index: 3;
 }
+
 div.CodeMirror-dragcursors {
   visibility: visible;
 }
@@ -317,19 +541,35 @@ div.CodeMirror-dragcursors {
   visibility: visible;
 }
 
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-.CodeMirror-crosshair { cursor: crosshair; }
-.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+.CodeMirror-selected {
+  background: #d9d9d9;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+  background: #d7d4f0;
+}
+
+.CodeMirror-crosshair {
+  cursor: crosshair;
+}
+
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
+  background: #d7d4f0;
+}
+
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
+  background: #d7d4f0;
+}
 
 .cm-searching {
   background-color: #ffa;
-  background-color: rgba(255, 255, 0, .4);
+  background-color: rgba(255, 255, 0, 0.4);
 }
 
 /* Used to force a border model for a node */
-.cm-force-border { padding-right: .1px; }
+.cm-force-border {
+  padding-right: 0.1px;
+}
 
 @media print {
   /* Hide the cursor when printing */
@@ -337,12 +577,15 @@ div.CodeMirror-dragcursors {
     visibility: hidden;
   }
 }
-
 /* See issue #2901 */
-.cm-tab-wrap-hack:after { content: ''; }
+.cm-tab-wrap-hack:after {
+  content: "";
+}
 
 /* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
+span.CodeMirror-selectedtext {
+  background: none;
+}
 
 /* The lint marker gutter */
 .CodeMirror-lint-markers {
@@ -364,11 +607,11 @@ span.CodeMirror-selectedtext { background: none; }
   z-index: 100;
   max-width: 600px;
   opacity: 0;
-  transition: opacity .4s;
-  -moz-transition: opacity .4s;
-  -webkit-transition: opacity .4s;
-  -o-transition: opacity .4s;
-  -ms-transition: opacity .4s;
+  transition: opacity 0.4s;
+  -moz-transition: opacity 0.4s;
+  -webkit-transition: opacity 0.4s;
+  -o-transition: opacity 0.4s;
+  -ms-transition: opacity 0.4s;
 }
 
 .CodeMirror-lint-mark {
@@ -413,7 +656,8 @@ span.CodeMirror-selectedtext { background: none; }
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
   background-repeat: no-repeat;
   background-position: right bottom;
-  width: 100%; height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .CodeMirror-lint-line-error {
@@ -428,110 +672,27 @@ span.CodeMirror-selectedtext { background: none; }
   color: blue;
   text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
   font-family: arial;
-  line-height: .3;
+  line-height: 0.3;
   cursor: pointer;
 }
+
 .CodeMirror-foldgutter {
-  width: .7em;
+  width: 0.7em;
 }
+
 .CodeMirror-foldgutter-open,
 .CodeMirror-foldgutter-folded {
   cursor: pointer;
 }
+
 .CodeMirror-foldgutter-open:after {
-  content: "\25BE";
+  content: "▾";
 }
+
 .CodeMirror-foldgutter-folded:after {
-  content: "\25B8";
+  content: "▸";
 }
 
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
  * @prop --code-editor-font-size: Defines the font size of the code, defaults to `0.8125rem`.