vft 0.0.142 → 0.0.145

package/theme-style/src/md-vue-playground.scss

@@ -8,26 +8,136 @@ $name: md-vue-playground;
 }
 
 @include b($name) {
-  overflow: hidden;
+  @keyframes blink {
+    0% {
+    }
+
+    50% {
+      background-color: transparent;
+    }
+
+    100% {
+    }
+  }
+
+  @keyframes blink {
+    0% {
+    }
+
+    50% {
+      background-color: transparent;
+    }
 
+    100% {
+    }
+  }
+
+  @keyframes blink {
+    0% {
+    }
+
+    50% {
+      background-color: transparent;
+    }
+
+    100% {
+    }
+  }
+
+  overflow: hidden;
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 1px solid var(--c-border, #ddd);
   border-radius: 6px;
 
+  /* vertical */
+  @media (width >= 721px) {
+    .split-pane.vertical[data-v-3102671e] {
+      display: block;
+    }
+
+    .split-pane.vertical.dragging[data-v-3102671e] {
+      cursor: ns-resize;
+    }
+
+    .vertical .dragger[data-v-3102671e] {
+      top: auto;
+      height: 10px;
+      width: 100%;
+      left: 0;
+      right: 0;
+      bottom: -5px;
+      cursor: ns-resize;
+    }
+
+    .vertical .left[data-v-3102671e],
+    .vertical .right[data-v-3102671e] {
+      width: 100%;
+    }
+
+    .vertical .left[data-v-3102671e] {
+      border-right: none;
+      border-bottom: 1px solid var(--border);
+    }
+  }
+
+  /* mobile */
+  @media (width <= 720px) {
+    .left[data-v-3102671e],
+    .right[data-v-3102671e] {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .dragger[data-v-3102671e] {
+      display: none;
+    }
+
+    .split-pane .toggler[data-v-3102671e] {
+      display: block;
+    }
+
+    .split-pane .right[data-v-3102671e] {
+      display: none;
+    }
+
+    .split-pane.show-output .right[data-v-3102671e] {
+      display: block;
+    }
+
+    .split-pane.show-output .left[data-v-3102671e] {
+      display: none;
+    }
+  }
+
+  @media print {
+    /* Hide the cursor when printing */
+    .CodeMirror div.CodeMirror-cursors {
+      visibility: hidden;
+    }
+  }
+
+  @media (width <= 720px) {
+    .dismiss[data-v-92411507] {
+      top: -9px;
+      right: -9px;
+    }
+
+    .msg[data-v-92411507] {
+      bottom: 50px;
+    }
+  }
+
   .title-wrapper {
     display: flex;
     flex-flow: row wrap;
     align-items: center;
-
     padding: 8px 10px;
     border-bottom: 1px solid var(--c-border, #ddd);
-
     background: var(--playground-header-bg-color, #eee);
-
     font-weight: 500;
-
-    transition: background var(--t-color, 0.3s ease) border-color var(--t-color, 0.3s ease);
+    transition: background var(--t-color, 0.3s ease) border-color
+      var(--t-color, 0.3s ease);
   }
 
   .title {
@@ -58,7 +168,6 @@ $name: md-vue-playground;
     display: flex;
     align-items: center;
     justify-content: center;
-
     background: var(--grey15);
     transition: background var(--t-color, 0.3s ease);
 
@@ -66,7 +175,6 @@ $name: md-vue-playground;
       width: 4em;
       height: 4em;
       margin: 2.5em auto;
-
       color: var(--c-brand, #3eaf7c);
       transition: color var(--t-color, 0.3s ease);
     }
@@ -85,13 +193,9 @@ $name: md-vue-playground;
   // stylelint-disable max-nesting-depth
   .repl-container {
     position: relative;
-
     overflow: hidden;
-
     height: auto;
-
     background: var(--c-bg, #fff);
-
     transition: background var(--t-color, 0.3s ease);
 
     iframe {
@@ -139,27 +243,31 @@ $name: md-vue-playground;
     border-radius: 0;
   }
 
-
   .split-pane[data-v-3102671e] {
     display: flex;
     height: 100%;
     position: relative;
   }
+
   .split-pane.dragging[data-v-3102671e] {
     cursor: ew-resize;
   }
+
   .dragging .left[data-v-3102671e],
   .dragging .right[data-v-3102671e] {
     pointer-events: none;
   }
+
   .left[data-v-3102671e],
   .right[data-v-3102671e] {
     position: relative;
     height: 100%;
   }
+
   .left[data-v-3102671e] {
     border-right: 1px solid var(--border);
   }
+
   .dragger[data-v-3102671e] {
     position: absolute;
     z-index: 3;
@@ -169,6 +277,7 @@ $name: md-vue-playground;
     width: 10px;
     cursor: ew-resize;
   }
+
   .toggler[data-v-3102671e] {
     display: none;
     z-index: 3;
@@ -182,61 +291,11 @@ $name: md-vue-playground;
     transform: translateX(-50%);
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
   }
+
   .dark .toggler[data-v-3102671e] {
     background-color: var(--bg);
   }
 
-  /* vertical */
-  @media (min-width: 721px) {
-    .split-pane.vertical[data-v-3102671e] {
-      display: block;
-    }
-    .split-pane.vertical.dragging[data-v-3102671e] {
-      cursor: ns-resize;
-    }
-    .vertical .dragger[data-v-3102671e] {
-      top: auto;
-      height: 10px;
-      width: 100%;
-      left: 0;
-      right: 0;
-      bottom: -5px;
-      cursor: ns-resize;
-    }
-    .vertical .left[data-v-3102671e],
-    .vertical .right[data-v-3102671e] {
-      width: 100%;
-    }
-    .vertical .left[data-v-3102671e] {
-      border-right: none;
-      border-bottom: 1px solid var(--border);
-    }
-  }
-
-  /* mobile */
-  @media (max-width: 720px) {
-    .left[data-v-3102671e],
-    .right[data-v-3102671e] {
-      width: 100% !important;
-      height: 100% !important;
-    }
-    .dragger[data-v-3102671e] {
-      display: none;
-    }
-    .split-pane .toggler[data-v-3102671e] {
-      display: block;
-    }
-    .split-pane .right[data-v-3102671e] {
-      display: none;
-    }
-    .split-pane.show-output .right[data-v-3102671e] {
-      display: block;
-    }
-    .split-pane.show-output .left[data-v-3102671e] {
-      display: none;
-    }
-  }
-
   .file-selector[data-v-cbb0a4e5] {
     display: flex;
     box-sizing: border-box;
@@ -248,18 +307,23 @@ $name: md-vue-playground;
     position: relative;
     height: var(--header-height);
   }
+
   .file-selector[data-v-cbb0a4e5]::-webkit-scrollbar {
     height: 1px;
   }
+
   .file-selector[data-v-cbb0a4e5]::-webkit-scrollbar-track {
     background-color: var(--border);
   }
+
   .file-selector[data-v-cbb0a4e5]::-webkit-scrollbar-thumb {
     background-color: var(--color-branding);
   }
+
   .file-selector.has-import-map .add[data-v-cbb0a4e5] {
     margin-right: 10px;
   }
+
   .file[data-v-cbb0a4e5] {
     display: inline-block;
     font-size: 13px;
@@ -267,16 +331,19 @@ $name: md-vue-playground;
     color: var(--text-light);
     box-sizing: border-box;
   }
+
   .file.active[data-v-cbb0a4e5] {
     color: var(--color-branding);
     border-bottom: 3px solid var(--color-branding);
     cursor: text;
   }
+
   .file span[data-v-cbb0a4e5] {
     display: inline-block;
     padding: 8px 10px 6px;
     line-height: 20px;
   }
+
   .file.pending input[data-v-cbb0a4e5] {
     width: 90px;
     height: 30px;
@@ -289,6 +356,7 @@ $name: md-vue-playground;
     margin-left: 6px;
     font-size: 12px;
   }
+
   .file .remove[data-v-cbb0a4e5] {
     display: inline-block;
     vertical-align: middle;
@@ -296,6 +364,7 @@ $name: md-vue-playground;
     cursor: pointer;
     padding-left: 0;
   }
+
   .add[data-v-cbb0a4e5] {
     font-size: 18px;
     color: #999;
@@ -304,12 +373,15 @@ $name: md-vue-playground;
     position: relative;
     top: -1px;
   }
+
   .add[data-v-cbb0a4e5]:hover {
     color: var(--color-branding);
   }
+
   .icon[data-v-cbb0a4e5] {
     margin-top: -1px;
   }
+
   .import-map-wrapper[data-v-cbb0a4e5] {
     position: sticky;
     margin-left: auto;
@@ -318,25 +390,26 @@ $name: md-vue-playground;
     padding-left: 30px;
     background-color: var(--bg);
     background: linear-gradient(
-        90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 1) 25%
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 25%
     );
   }
+
   .dark .import-map-wrapper[data-v-cbb0a4e5] {
     background: linear-gradient(
-        90deg,
-        rgba(26, 26, 26, 0) 0%,
-        rgba(26, 26, 26, 1) 25%
+      90deg,
+      rgba(26, 26, 26, 0) 0%,
+      rgba(26, 26, 26, 1) 25%
     );
   }
+
   /* BASICS */
 
   .CodeMirror {
-    color: var(--symbols);
     --symbols: #777;
     --base: #545281;
-    --comment: hsl(210, 25%, 60%);
+    --comment: hsl(210deg, 25%, 60%);
     --keyword: #af4ab1;
     --variable: var(--base);
     --function: #c25205;
@@ -348,17 +421,16 @@ $name: md-vue-playground;
     --important: var(--string);
     --attribute: #9c3eda;
     --property: #6182b8;
-
     --selected-bg: #d7d4f0;
     --selected-bg-non-focus: #d9d9d9;
     --cursor: #000;
 
+    color: var(--symbols);
     direction: ltr;
     height: auto;
   }
 
   .dark .CodeMirror {
-    color: var(--symbols);
     --symbols: #89ddff;
     --base: #a6accd;
     --comment: #6d6d6d;
@@ -371,9 +443,10 @@ $name: md-vue-playground;
     --property: #f07178;
     --attribute: #c792ea;
     --cursor: #fff;
-
     --selected-bg: rgba(255, 255, 255, 0.1);
     --selected-bg-non-focus: rgba(255, 255, 255, 0.15);
+
+    color: var(--symbols);
   }
 
   /* PADDING */
@@ -381,6 +454,7 @@ $name: md-vue-playground;
   .CodeMirror-lines {
     padding: 4px 0; /* Vertical padding around content */
   }
+
   .CodeMirror pre {
     padding: 0 4px; /* Horizontal padding of content */
   }
@@ -397,6 +471,7 @@ $name: md-vue-playground;
     background-color: transparent;
     white-space: nowrap;
   }
+
   .CodeMirror-linenumber {
     padding: 0 3px 0 5px;
     min-width: 20px;
@@ -409,6 +484,7 @@ $name: md-vue-playground;
   .CodeMirror-guttermarker {
     color: black;
   }
+
   .CodeMirror-guttermarker-subtle {
     color: #999;
   }
@@ -418,19 +494,22 @@ $name: md-vue-playground;
   .CodeMirror-foldmarker {
     color: #414141;
     text-shadow: #f96 1px 1px 2px, #f96 -1px -1px 2px, #f96 1px -1px 2px,
-    #f96 -1px 1px 2px;
+      #f96 -1px 1px 2px;
     line-height: 0.3;
     cursor: pointer;
   }
+
   .CodeMirror-foldgutter {
     width: 0.7em;
   }
+
   .CodeMirror-foldgutter-open,
   .CodeMirror-foldgutter-folded {
     cursor: pointer;
   }
-  .CodeMirror-foldgutter-open:after,
-  .CodeMirror-foldgutter-folded:after {
+
+  .CodeMirror-foldgutter-open::after,
+  .CodeMirror-foldgutter-folded::after {
     content: '>';
     font-size: 0.8em;
     opacity: 0.8;
@@ -440,7 +519,8 @@ $name: md-vue-playground;
     position: relative;
     transform: rotate(90deg);
   }
-  .CodeMirror-foldgutter-folded:after {
+
+  .CodeMirror-foldgutter-folded::after {
     transform: none;
   }
 
@@ -451,24 +531,29 @@ $name: md-vue-playground;
     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-mark {
     background-color: rgba(20, 255, 20, 0.5);
     -webkit-animation: blink 1.06s steps(1) infinite;
     -moz-animation: blink 1.06s steps(1) infinite;
     animation: blink 1.06s steps(1) infinite;
   }
+
   .cm-animate-fat-cursor {
     width: auto;
     border: 0;
@@ -477,33 +562,6 @@ $name: md-vue-playground;
     animation: blink 1.06s steps(1) infinite;
     background-color: #7e7;
   }
-  @-moz-keyframes blink {
-    0% {
-    }
-    50% {
-      background-color: transparent;
-    }
-    100% {
-    }
-  }
-  @-webkit-keyframes blink {
-    0% {
-    }
-    50% {
-      background-color: transparent;
-    }
-    100% {
-    }
-  }
-  @keyframes blink {
-    0% {
-    }
-    50% {
-      background-color: transparent;
-    }
-    100% {
-    }
-  }
 
   .cm-tab {
     display: inline-block;
@@ -518,6 +576,7 @@ $name: md-vue-playground;
     bottom: -20px;
     overflow: hidden;
   }
+
   .CodeMirror-ruler {
     border-left: 1px solid #ccc;
     top: 0;
@@ -529,28 +588,36 @@ $name: md-vue-playground;
   .cm-s-default.CodeMirror {
     background-color: transparent;
   }
+
   .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;
   }
@@ -562,53 +629,69 @@ $name: md-vue-playground;
   .cm-s-default .cm-punctuation {
     color: var(--base);
   }
+
   .cm-s-default .cm-property {
     color: var(--property);
   }
+
   .cm-s-default .cm-hr,
   .cm-s-default .cm-comment {
     color: var(--comment);
   }
+
   .cm-s-default .cm-attribute {
     color: var(--attribute);
   }
+
   .cm-s-default .cm-keyword {
     color: var(--keyword);
   }
+
   .cm-s-default .cm-variable {
     color: var(--variable);
   }
+
   .cm-s-default .cm-tag {
     color: var(--tags);
   }
+
   .cm-s-default .cm-bracket {
     color: var(--brackets);
   }
+
   .cm-s-default .cm-number {
     color: var(--number);
   }
+
   .cm-s-default .cm-string,
   .cm-s-default .cm-string-2 {
     color: var(--string);
   }
+
   .cm-s-default .cm-type {
     color: #085;
   }
+
   .cm-s-default .cm-meta {
     color: #555;
   }
+
   .cm-s-default .cm-qualifier {
     color: var(--qualifier);
   }
+
   .cm-s-default .cm-builtin {
     color: #7539ff;
   }
+
   .cm-s-default .cm-link {
     color: var(--flash);
   }
+
   .cm-s-default .cm-error {
     color: #ff008c;
   }
+
   .cm-invalidchar {
     color: #ff008c;
   }
@@ -622,12 +705,15 @@ $name: md-vue-playground;
   div.CodeMirror span.CodeMirror-matchingbracket {
     color: #0b0;
   }
+
   div.CodeMirror span.CodeMirror-nonmatchingbracket {
     color: #a22;
   }
+
   .CodeMirror-matchingtag {
     background: rgba(255, 150, 0, 0.3);
   }
+
   .CodeMirror-activeline-background {
     background: #e8f2ff;
   }
@@ -645,7 +731,9 @@ $name: md-vue-playground;
 
   .CodeMirror-scroll {
     overflow: scroll !important; /* Things will break if this is overridden */
+
     /* 30px is the magic margin used to hide the element's real scrollbars */
+
     /* See overflow: hidden in .CodeMirror */
     margin-bottom: -30px;
     margin-right: -30px;
@@ -654,6 +742,7 @@ $name: md-vue-playground;
     outline: none; /* Prevent dragging from highlighting the element */
     position: relative;
   }
+
   .CodeMirror-sizer {
     position: relative;
     border-right: 30px solid transparent;
@@ -670,22 +759,26 @@ $name: md-vue-playground;
     z-index: 6;
     display: none;
   }
+
   .CodeMirror-vscrollbar {
     right: 0;
     top: 0;
     overflow-x: hidden;
     overflow-y: scroll;
   }
+
   .CodeMirror-hscrollbar {
     bottom: 0;
     left: 0;
     overflow-y: hidden;
     overflow-x: scroll;
   }
+
   .CodeMirror-scrollbar-filler {
     right: 0;
     bottom: 0;
   }
+
   .CodeMirror-gutter-filler {
     left: 0;
     bottom: 0;
@@ -698,6 +791,7 @@ $name: md-vue-playground;
     min-height: 100%;
     z-index: 3;
   }
+
   .CodeMirror-gutter {
     white-space: normal;
     height: 100%;
@@ -705,27 +799,32 @@ $name: md-vue-playground;
     vertical-align: top;
     margin-bottom: -30px;
   }
+
   .CodeMirror-gutter-wrapper {
     position: absolute;
     z-index: 4;
     background: none !important;
     border: none !important;
   }
+
   .CodeMirror-gutter-background {
     position: absolute;
     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 {
+
+  .CodeMirrorwrapper ::-moz-selection {
     background-color: transparent;
   }
 
@@ -733,6 +832,7 @@ $name: md-vue-playground;
     cursor: text;
     min-height: 1px; /* prevents collapsing before first draw */
   }
+
   .CodeMirror pre {
     /* Reset some styles that the rest of the page might have set */
     -moz-border-radius: 0;
@@ -750,6 +850,7 @@ $name: md-vue-playground;
     -webkit-font-variant-ligatures: contextual;
     font-variant-ligatures: contextual;
   }
+
   .CodeMirror-wrap pre {
     word-wrap: break-word;
     white-space: pre-wrap;
@@ -801,6 +902,7 @@ $name: md-vue-playground;
     position: absolute;
     pointer-events: none;
   }
+
   .CodeMirror-measure pre {
     position: static;
   }
@@ -810,6 +912,7 @@ $name: md-vue-playground;
     position: relative;
     z-index: 3;
   }
+
   div.CodeMirror-dragcursors {
     visibility: visible;
   }
@@ -821,18 +924,22 @@ $name: md-vue-playground;
   .CodeMirror-selected {
     background: var(--selected-bg-non-focus);
   }
+
   .CodeMirror-focused .CodeMirror-selected {
     background: var(--selected-bg);
   }
+
   .CodeMirror-crosshair {
     cursor: crosshair;
   }
+
   .CodeMirror-line::selection,
   .CodeMirror-line > span::selection,
   .CodeMirror-line > span > span::selection {
     background: var(--selected-bg);
   }
-  .CodeMirror-line::-moz-selection,
+
+  .CodeMirror-line::selection,
   .CodeMirror-line > span::-moz-selection,
   .CodeMirror-line > span > span::-moz-selection {
     background: var(--selected-bg);
@@ -848,15 +955,8 @@ $name: md-vue-playground;
     padding-right: 0.1px;
   }
 
-  @media print {
-    /* Hide the cursor when printing */
-    .CodeMirror div.CodeMirror-cursors {
-      visibility: hidden;
-    }
-  }
-
   /* See issue #2901 */
-  .cm-tab-wrap-hack:after {
+  .cm-tab-wrap-hack::after {
     content: '';
   }
 
@@ -871,6 +971,7 @@ $name: md-vue-playground;
     width: 100%;
     overflow: hidden;
   }
+
   .CodeMirror {
     line-height: 1.5;
     height: 100%;
@@ -891,11 +992,13 @@ $name: md-vue-playground;
     display: flex;
     align-items: stretch;
   }
+
   pre[data-v-92411507] {
     margin: 0;
     padding: 12px 20px;
     overflow: auto;
   }
+
   .dismiss[data-v-92411507] {
     position: absolute;
     top: 2px;
@@ -911,33 +1014,30 @@ $name: md-vue-playground;
     background-color: red;
     color: #fff;
   }
-  @media (max-width: 720px) {
-    .dismiss[data-v-92411507] {
-      top: -9px;
-      right: -9px;
-    }
-    .msg[data-v-92411507] {
-      bottom: 50px;
-    }
-  }
+
   .msg.err[data-v-92411507] {
     color: red;
     border-color: red;
     background-color: #ffd7d7;
   }
+
   .msg.warn[data-v-92411507] {
     --color: rgb(105, 95, 27);
+
     color: var(--color);
     border-color: var(--color);
     background-color: rgb(247, 240, 205);
   }
+
   .msg.warn .dismiss[data-v-92411507] {
     background-color: var(--color);
   }
+
   .fade-enter-active[data-v-92411507],
   .fade-leave-active[data-v-92411507] {
     transition: all 0.15s ease-out;
   }
+
   .fade-enter-from[data-v-92411507],
   .fade-leave-to[data-v-92411507] {
     opacity: 0;
@@ -963,6 +1063,7 @@ $name: md-vue-playground;
     overflow: hidden;
     position: relative;
   }
+
   .tab-buttons[data-v-5d2df9cb] {
     box-sizing: border-box;
     border-bottom: 1px solid var(--border);
@@ -970,10 +1071,12 @@ $name: md-vue-playground;
     height: var(--header-height);
     overflow: hidden;
   }
+
   .tab-buttons button[data-v-5d2df9cb] {
     padding: 0;
     box-sizing: border-box;
   }
+
   .tab-buttons span[data-v-5d2df9cb] {
     font-size: 13px;
     text-transform: uppercase;
@@ -982,17 +1085,18 @@ $name: md-vue-playground;
     padding: 8px 16px 6px;
     line-height: 20px;
   }
+
   button.active[data-v-5d2df9cb] {
     color: var(--color-branding-dark);
     border-bottom: 3px solid var(--color-branding-dark);
   }
 
-  .vue-repl{
+  .vue-repl {
     --bg: #fff;
     --bg-soft: #f8f8f8;
     --border: #ddd;
     --text-light: #888;
-    --font-code: Menlo, Monaco, Consolas, 'Courier New', monospace;
+    --font-code: menlo, monaco, consolas, 'Courier New', monospace;
     --color-branding: #42b883;
     --color-branding-dark: #416f9c;
     --header-height: 38px;
@@ -1002,7 +1106,8 @@ $name: md-vue-playground;
     overflow: hidden;
     background-color: var(--bg-soft);
   }
-  .dark .vue-repl{
+
+  .dark .vue-repl {
     --bg: #1a1a1a;
     --bg-soft: #242424;
     --border: #383838;
@@ -1010,6 +1115,7 @@ $name: md-vue-playground;
     --color-branding: #42d392;
     --color-branding-dark: #89ddff;
   }
+
   button {
     border: none;
     outline: none;