Mercurial > gemma

diff client/src/components/Main.vue @ 5629:84d01a536bec 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Transformed scss and sass styles into css
author Luisa Beerboom <lbeerboom@intevation.de>
date Thu, 11 May 2023 13:23:52 +0200
parents fa7dc3f31ef3
children
line wrap: on
line diff
--- a/client/src/components/Main.vue	Tue May 09 13:20:28 2023 +0200
+++ b/client/src/components/Main.vue	Thu May 11 13:23:52 2023 +0200
@@ -22,28 +22,34 @@
   </div>
 </template>
 
-<style lang="sass">
-#panes
-  top: -1px
-  right: -1px
-  bottom: -1px
-  left: -1px
-  z-index: 1
-  &.rotate1
-    flex-wrap: wrap
-    flex-direction: row
-  &.rotate2
-    flex-wrap: wrap-reverse
-    flex-direction: column
-  &.rotate3
-    flex-wrap: wrap-reverse
-    flex-direction: row-reverse
-  &.rotate4
-    flex-wrap: wrap
-    flex-direction: column-reverse
-  .pane
-    border: solid 1px #dee2e6
-    background: #fff
+<style>
+#panes {
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: 1;
+}
+#panes.rotate1 {
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+#panes.rotate2 {
+  flex-wrap: wrap-reverse;
+  flex-direction: column;
+}
+#panes.rotate3 {
+  flex-wrap: wrap-reverse;
+  flex-direction: row-reverse;
+}
+#panes.rotate4 {
+  flex-wrap: wrap;
+  flex-direction: column-reverse;
+}
+#panes .pane {
+  border: solid 1px #dee2e6;
+  background: #fff;
+}
 </style>
 
 <script>