From e76cff77f031b2f7091e786fc5c48d3a09b9d69a Mon Sep 17 00:00:00 2001
From: Razvan Stoenescu <razvan.stoenescu@gmail.com>
Date: Thu, 29 Sep 2022 16:22:34 +0300
Subject: [PATCH] chore(ui/dev): transform stylus to sass in examples

---
 ui/dev/src/pages/components/avatar.vue        |  4 +-
 ui/dev/src/pages/components/button-group.vue  |  4 +-
 ui/dev/src/pages/components/button-toggle.vue |  4 +-
 ui/dev/src/pages/components/card.vue          |  8 +--
 .../src/pages/components/carousel-part1.vue   | 10 ++--
 .../src/pages/components/data-table-part1.vue |  6 +-
 .../src/pages/components/data-table-part2.vue |  3 -
 .../components/data-table-part5-fixed.vue     |  2 +-
 .../components/data-table-part8-expanded.vue  |  6 +-
 .../src/pages/components/intersection-4.vue   |  2 +-
 .../pages/components/list-expansion-item.vue  |  8 +--
 ui/dev/src/pages/components/list-item.vue     |  6 +-
 ui/dev/src/pages/components/menu-test.vue     |  3 -
 ui/dev/src/pages/components/no-ssr.vue        |  4 +-
 ui/dev/src/pages/components/popup-proxy.vue   | 22 ++++----
 .../components/pull-to-refresh-part1.vue      |  6 +-
 ui/dev/src/pages/components/scroll-fire.vue   | 10 ++--
 ui/dev/src/pages/components/splitter.vue      | 12 ++--
 ui/dev/src/pages/components/tabs.vue          | 26 ++++-----
 .../src/pages/components/virtual-scroll-5.vue | 16 +++---
 .../src/pages/components/virtual-scroll-6.vue | 16 +++---
 ui/dev/src/pages/css/colors.vue               | 24 ++++----
 ui/dev/src/pages/css/flex-addon.vue           | 56 +++++++++----------
 ui/dev/src/pages/css/flex-columns.vue         | 18 +++---
 ui/dev/src/pages/css/flex-gutter.vue          | 10 ++--
 ui/dev/src/pages/css/flex-rows.vue            | 20 +++----
 ui/dev/src/pages/css/flex-test.vue            | 12 ++--
 ui/dev/src/pages/css/material-ripples-1.vue   | 30 +++++-----
 ui/dev/src/pages/css/shadows.vue              | 10 ++--
 ui/dev/src/pages/css/size-addon.vue           | 55 +++++++++---------
 ui/dev/src/pages/css/typography.vue           | 22 ++++----
 ui/dev/src/pages/form/date-time-timezone.vue  |  3 -
 ui/dev/src/pages/form/editor-part1.vue        | 17 +++---
 ui/dev/src/pages/form/field.vue               | 14 +++--
 ui/dev/src/pages/form/input.vue               |  3 -
 ui/dev/src/pages/form/select-part-1.vue       |  6 +-
 ui/dev/src/pages/form/select-part-2.vue       |  6 +-
 ui/dev/src/pages/form/select-part-3.vue       | 10 ++--
 ui/dev/src/pages/global/bottom-sheet.vue      |  8 +--
 ui/dev/src/pages/global/dialog-plugin.vue     |  8 +--
 ui/dev/src/pages/layout/layout.vue            | 10 ++--
 ui/dev/src/pages/layout/pages/a.vue           |  4 +-
 ui/dev/src/pages/layout/pages/default.vue     |  4 +-
 43 files changed, 261 insertions(+), 267 deletions(-)

diff --git a/ui/dev/src/pages/components/avatar.vue b/ui/dev/src/pages/components/avatar.vue
index 19b2a76c5d9..bd67ae7fc23 100644
--- a/ui/dev/src/pages/components/avatar.vue
+++ b/ui/dev/src/pages/components/avatar.vue
@@ -47,8 +47,8 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .avatar-page .q-avatar
-  margin 4px
+  margin: 4px
   // box-shadow: $shadow-4
 </style>
diff --git a/ui/dev/src/pages/components/button-group.vue b/ui/dev/src/pages/components/button-group.vue
index bf239168c42..c2be54f2743 100644
--- a/ui/dev/src/pages/components/button-group.vue
+++ b/ui/dev/src/pages/components/button-group.vue
@@ -277,10 +277,10 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .button-group-test
   .q-btn-group
-    // margin 5px 15px
+    // margin: 5px 15px
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/components/button-toggle.vue b/ui/dev/src/pages/components/button-toggle.vue
index e8aaf1b5e0a..2d48c38f3c9 100644
--- a/ui/dev/src/pages/components/button-toggle.vue
+++ b/ui/dev/src/pages/components/button-toggle.vue
@@ -169,7 +169,7 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .button-toggle-group-test .q-btn-toggle
-  margin 15px
+  margin: 15px
 </style>
diff --git a/ui/dev/src/pages/components/card.vue b/ui/dev/src/pages/components/card.vue
index 1326199ebf7..251a89b23f8 100644
--- a/ui/dev/src/pages/components/card.vue
+++ b/ui/dev/src/pages/components/card.vue
@@ -1101,13 +1101,13 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .card-examples
   .q-card
-    width 300px
+    width: 300px
   .bigger
-    width 450px
+    width: 450px
   @media (max-width $breakpoint-xs-max)
     .q-card
-      width 100%
+      width: 100%
 </style>
diff --git a/ui/dev/src/pages/components/carousel-part1.vue b/ui/dev/src/pages/components/carousel-part1.vue
index bd298108d9d..7e5b42a6130 100644
--- a/ui/dev/src/pages/components/carousel-part1.vue
+++ b/ui/dev/src/pages/components/carousel-part1.vue
@@ -386,14 +386,14 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .docs-carousel
   p.caption:not(:first-of-type)
-    margin-top 38px
+    margin-top: 38px
   .custom-caption
-    text-align center
-    padding 12px
-    color white
+    text-align: center
+    padding: 12px
+    color: white
 .test-scroll-container
   background: rgba(255,255,255,.3)
   border-radius: $generic-border-radius
diff --git a/ui/dev/src/pages/components/data-table-part1.vue b/ui/dev/src/pages/components/data-table-part1.vue
index f131adaacd1..4f5a6531b47 100644
--- a/ui/dev/src/pages/components/data-table-part1.vue
+++ b/ui/dev/src/pages/components/data-table-part1.vue
@@ -990,9 +990,9 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .q-table + .q-table
-  margin-top 25px
+  margin-top: 25px
 .text-pre-wrap
-  white-space pre-wrap
+  white-space: pre-wrap
 </style>
diff --git a/ui/dev/src/pages/components/data-table-part2.vue b/ui/dev/src/pages/components/data-table-part2.vue
index 59c1c579494..20c878ad904 100644
--- a/ui/dev/src/pages/components/data-table-part2.vue
+++ b/ui/dev/src/pages/components/data-table-part2.vue
@@ -563,6 +563,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus">
-</style>
diff --git a/ui/dev/src/pages/components/data-table-part5-fixed.vue b/ui/dev/src/pages/components/data-table-part5-fixed.vue
index 8a2029ecfd0..5dbe6496ac9 100644
--- a/ui/dev/src/pages/components/data-table-part5-fixed.vue
+++ b/ui/dev/src/pages/components/data-table-part5-fixed.vue
@@ -304,7 +304,7 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .table-sticky
   .q-table__top,
   .q-table__bottom,
diff --git a/ui/dev/src/pages/components/data-table-part8-expanded.vue b/ui/dev/src/pages/components/data-table-part8-expanded.vue
index 45dd1eddedb..6157d0a3096 100644
--- a/ui/dev/src/pages/components/data-table-part8-expanded.vue
+++ b/ui/dev/src/pages/components/data-table-part8-expanded.vue
@@ -249,9 +249,9 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .q-table + .q-table
-  margin-top 25px
+  margin-top: 25px
 .text-pre-wrap
-  white-space pre-wrap
+  white-space: pre-wrap
 </style>
diff --git a/ui/dev/src/pages/components/intersection-4.vue b/ui/dev/src/pages/components/intersection-4.vue
index 6b1e1d590fb..0e91329e066 100644
--- a/ui/dev/src/pages/components/intersection-4.vue
+++ b/ui/dev/src/pages/components/intersection-4.vue
@@ -91,7 +91,7 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .example-item
   height: 50px
 .conversation-item-move
diff --git a/ui/dev/src/pages/components/list-expansion-item.vue b/ui/dev/src/pages/components/list-expansion-item.vue
index 4935bc8839a..7116478caa2 100644
--- a/ui/dev/src/pages/components/list-expansion-item.vue
+++ b/ui/dev/src/pages/components/list-expansion-item.vue
@@ -768,10 +768,10 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .my-expand-link
-  color $secondary
-  background alpha($secondary, .1)
+  color: $secondary
+  background: rgba($secondary, .1)
   .q-item__section--side .q-icon
-    color $secondary
+    color: $secondary
 </style>
diff --git a/ui/dev/src/pages/components/list-item.vue b/ui/dev/src/pages/components/list-item.vue
index f47f07d1975..3335927cb89 100644
--- a/ui/dev/src/pages/components/list-item.vue
+++ b/ui/dev/src/pages/components/list-item.vue
@@ -830,8 +830,8 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .my-link
-  color white
-  background $deep-orange
+  color: white
+  background: $deep-orange
 </style>
diff --git a/ui/dev/src/pages/components/menu-test.vue b/ui/dev/src/pages/components/menu-test.vue
index 265b5347373..c4e5413d073 100644
--- a/ui/dev/src/pages/components/menu-test.vue
+++ b/ui/dev/src/pages/components/menu-test.vue
@@ -42,6 +42,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus">
-</style>
diff --git a/ui/dev/src/pages/components/no-ssr.vue b/ui/dev/src/pages/components/no-ssr.vue
index aaab3c4da2d..bdb8eba9899 100644
--- a/ui/dev/src/pages/components/no-ssr.vue
+++ b/ui/dev/src/pages/components/no-ssr.vue
@@ -64,8 +64,8 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .no-ssr-page
   .q-title
-    margin-top 42px
+    margin-top: 42px
 </style>
diff --git a/ui/dev/src/pages/components/popup-proxy.vue b/ui/dev/src/pages/components/popup-proxy.vue
index 308418403e4..22fb4f782ee 100644
--- a/ui/dev/src/pages/components/popup-proxy.vue
+++ b/ui/dev/src/pages/components/popup-proxy.vue
@@ -262,20 +262,20 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .popup-surface-test
-  width 200px
-  height 50px
-  background white
-  border 1px solid #999
-  display flex
-  align-items center
-  justify-content center
-  border-radius 5px
+  width: 200px
+  height: 50px
+  background: white
+  border: 1px solid #999
+  display: flex
+  align-items: center
+  justify-content: center
+  border-radius: 5px
 
   > div
-    user-select none
+    user-select: none
 
   & + &
-    margin-top 16px
+    margin-top: 16px
 </style>
diff --git a/ui/dev/src/pages/components/pull-to-refresh-part1.vue b/ui/dev/src/pages/components/pull-to-refresh-part1.vue
index e2ff57ef1ef..92deec5f3f2 100644
--- a/ui/dev/src/pages/components/pull-to-refresh-part1.vue
+++ b/ui/dev/src/pages/components/pull-to-refresh-part1.vue
@@ -75,9 +75,9 @@
   </q-layout>
 </template>
 
-<style lang="stylus">
-  .no-height
-    height 0
+<style lang="sass">
+.no-height
+  height: 0
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/components/scroll-fire.vue b/ui/dev/src/pages/components/scroll-fire.vue
index 6c1befc7adb..f8ae82a9cd2 100644
--- a/ui/dev/src/pages/components/scroll-fire.vue
+++ b/ui/dev/src/pages/components/scroll-fire.vue
@@ -51,15 +51,15 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .animate-bounce
-  animation q-bounce 2s infinite /* rtl:ignore */
+  animation: q-bounce 2s infinite #{"/* rtl:ignore */"}
 
 @keyframes q-bounce
   0%, 20%, 50%, 80%, 100%
-    transform translateY(0)
+    transform: translateY(0)
   40%
-    transform translateY(-30px)
+    transform: translateY(-30px)
   60%
-    transform translateY(-15px)
+    transform: translateY(-15px)
 </style>
diff --git a/ui/dev/src/pages/components/splitter.vue b/ui/dev/src/pages/components/splitter.vue
index da562568c35..169e9e92c72 100644
--- a/ui/dev/src/pages/components/splitter.vue
+++ b/ui/dev/src/pages/components/splitter.vue
@@ -207,12 +207,12 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .stylish-splitter
-  border 3px solid $deep-orange
-  height 700px
+  border: 3px solid $deep-orange
+  height: 700px
 .test-separator
-  position absolute
-  left auto
-  right 0
+  position: absolute
+  left: auto
+  right: 0
 </style>
diff --git a/ui/dev/src/pages/components/tabs.vue b/ui/dev/src/pages/components/tabs.vue
index f0fdc3b1909..17b2f5c59c5 100644
--- a/ui/dev/src/pages/components/tabs.vue
+++ b/ui/dev/src/pages/components/tabs.vue
@@ -573,7 +573,7 @@ export default {
       gigi: '',
       dense: false,
       tab: 'one',
-      tabModel: null,
+      tabModel: 'five',
       vtab: 'one',
       panelTest: false,
       some: false,
@@ -662,15 +662,15 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .q-tabs.vertical-tabs
-  margin-bottom 0
+  margin-bottom: 0
 .tabs-demo
   .q-tabs
-    margin-bottom 24px
+    margin-bottom: 24px
 
   .q-toolbar .q-tabs
-    margin-bottom 0
+    margin-bottom: 0
 
   .q-tab__label
     transition: 0.3s transform
@@ -683,16 +683,16 @@ export default {
       transform: translateY(-3px)
 
 .router-link
-  display block
-  text-align center
-  text-decoration none
-  color black
-  padding 2px
-  border 1px solid black
+  display: block
+  text-align: center
+  text-decoration: none
+  color: black
+  padding: 2px
+  border: 1px solid black
 
   &-active
-    background-color #ee9
+    background-color: #ee9
 
   &-exact-active
-    background-color #9e9
+    background-color: #9e9
 </style>
diff --git a/ui/dev/src/pages/components/virtual-scroll-5.vue b/ui/dev/src/pages/components/virtual-scroll-5.vue
index 1c04b50babd..7dd3434cd57 100644
--- a/ui/dev/src/pages/components/virtual-scroll-5.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-5.vue
@@ -74,7 +74,7 @@
   </q-layout>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .test-virtual-table--fixed
   max-height: 70vh
 
@@ -86,17 +86,17 @@
 
   .thead-sticky tr > *,
   .tfoot-sticky tr > *
-    position sticky
-    opacity 1
-    z-index 1
-    background-color black
-    color white
+    position: sticky
+    opacity: 1
+    z-index: 1
+    background-color: black
+    color: white
 
   .thead-sticky tr:last-child > *
-    top 0
+    top: 0
 
   .tfoot-sticky tr:first-child > *
-    bottom 0
+    bottom: 0
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/components/virtual-scroll-6.vue b/ui/dev/src/pages/components/virtual-scroll-6.vue
index d91c500e1e0..f5712c81ddf 100644
--- a/ui/dev/src/pages/components/virtual-scroll-6.vue
+++ b/ui/dev/src/pages/components/virtual-scroll-6.vue
@@ -80,18 +80,18 @@
   </q-layout>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .thead-sticky tr > *,
 .tfoot-sticky tr > *
-  position sticky
-  opacity 1
-  z-index 1
-  background-color black
-  color white
+  position: sticky
+  opacity: 1
+  z-index: 1
+  background-color: black
+  color: white
 .thead-sticky tr:last-child > *
-  top 0
+  top: 0
 .tfoot-sticky tr:first-child > *
-  bottom 0
+  bottom: 0
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/css/colors.vue b/ui/dev/src/pages/css/colors.vue
index e51cf300cb1..67064d6e651 100644
--- a/ui/dev/src/pages/css/colors.vue
+++ b/ui/dev/src/pages/css/colors.vue
@@ -96,26 +96,26 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 #view-colors
   div.main-color
-    width 130px
-    margin 5px
-    height 40px
+    width: 130px
+    margin: 5px
+    height: 40px
 
   .detailed-color
-    width 100%
+    width: 100%
 
   div.detailed-color
-    height 55px
+    height: 55px
 
   div.detail
-    margin-bottom 25px
-    max-width 400px
-    min-width 135px
-    display inline-block
-    margin-right 5px
+    margin-bottom: 25px
+    max-width: 400px
+    min-width: 135px
+    display: inline-block
+    margin-right: 5px
 
   h5
-    margin-bottom 5px
+    margin-bottom: 5px
 </style>
diff --git a/ui/dev/src/pages/css/flex-addon.vue b/ui/dev/src/pages/css/flex-addon.vue
index 087c3b2b695..7885d6dfc44 100644
--- a/ui/dev/src/pages/css/flex-addon.vue
+++ b/ui/dev/src/pages/css/flex-addon.vue
@@ -874,50 +874,50 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .test-flex-demo
-  padding-bottom 30vh
+  padding-bottom: 30vh
   h1
-    font-size 1.5em
-    margin 1em 0 .2em 0
+    font-size: 1.5em
+    margin: 1em 0 .2em 0
     &:first-child
-      margin-top 0
+      margin-top: 0
   .test-flex
     .placeholder
-      color #ccc
+      color: #ccc
 
     :not(.placeholder)
-      position relative
+      position: relative
       &:hover:before
-        content attr(class)
-        position absolute
-        top 0
-        left 50%
-        transform translateX(-50%) translateY(-100%)
-        min-width 100%
-        padding 2px 5px
-        background-color rgba(0,0,0,.5)
-        color white
-        white-space normal
+        content: attr(class)
+        position: absolute
+        top: 0
+        left: 50%
+        transform: translateX(-50%) translateY(-100%)
+        min-width: 100%
+        padding: 2px 5px
+        background-color: rgba(0,0,0,.5)
+        color: white
+        white-space: normal
 
     [class^='column']
-      height 100%
-      background-color rgba(255, 0, 0, .05)
-      outline 1px solid #c33
+      height: 100%
+      background-color: rgba(255, 0, 0, .05)
+      outline: 1px solid #c33
       > div
-        background-color rgba(0, 255, 0, .1)
-        text-align center
-        outline 1px solid #ccc
+        background-color: rgba(0, 255, 0, .1)
+        text-align: center
+        outline: 1px solid #ccc
         > div.fit
-          background-color rgba(0, 0, 255, .2)
+          background-color: rgba(0, 0, 255, .2)
     [class^='row']
       @extends .test-flex-demo .test-flex [class^='column']
       > div
-        white-space nowrap
-        text-overflow ellipsis
+        white-space: nowrap
+        text-overflow: ellipsis
       .placeholder
-        display inline-block
-        width 2em
+        display: inline-block
+        width: 2em
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/css/flex-columns.vue b/ui/dev/src/pages/css/flex-columns.vue
index 5ef0a524c4b..3666def2f15 100644
--- a/ui/dev/src/pages/css/flex-columns.vue
+++ b/ui/dev/src/pages/css/flex-columns.vue
@@ -341,19 +341,19 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .grid-columns
   .container
-    padding 15px
+    padding: 15px
   .column
-    height 300px
+    height: 300px
   .column > div
-    padding 10px 15px
-    background rgba(86,61,124,.15)
-    border 1px solid rgba(86,61,124,.2)
+    padding: 10px 15px
+    background: rgba(86,61,124,.15)
+    border: 1px solid rgba(86,61,124,.2)
   .column + .column
-    margin-top 1rem
+    margin-top: 1rem
   .example-minheight .column
-    min-width 5rem
-    background rgba(255,0,0,.1)
+    min-width: 5rem
+    background: rgba(255,0,0,.1)
 </style>
diff --git a/ui/dev/src/pages/css/flex-gutter.vue b/ui/dev/src/pages/css/flex-gutter.vue
index db419b95beb..5e16eaa253d 100644
--- a/ui/dev/src/pages/css/flex-gutter.vue
+++ b/ui/dev/src/pages/css/flex-gutter.vue
@@ -80,13 +80,13 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .q-col-gutter-demo
   .my-container + .my-container
-    margin-top 25px
+    margin-top: 25px
   .my-container
-    border 1px solid rgba(0, 0, 0, .2)
+    border: 1px solid rgba(0, 0, 0, .2)
   .my-content
-    background rgba(0, 0, 0, .1)
-    border 1px solid black
+    background: rgba(0, 0, 0, .1)
+    border: 1px solid black
 </style>
diff --git a/ui/dev/src/pages/css/flex-rows.vue b/ui/dev/src/pages/css/flex-rows.vue
index 24134fcb899..3ced77162cf 100644
--- a/ui/dev/src/pages/css/flex-rows.vue
+++ b/ui/dev/src/pages/css/flex-rows.vue
@@ -432,19 +432,19 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .grid-rows
   .container
-    padding 15px
-    max-height 1000px
+    padding: 15px
+    max-height: 1000px
   .row > div
-    padding 10px 15px
-    background rgba(86,61,124,.15)
-    border 1px solid rgba(86,61,124,.2)
+    padding: 10px 15px
+    background: rgba(86,61,124,.15)
+    border: 1px solid rgba(86,61,124,.2)
   .row + .row
-    margin-top 1rem
+    margin-top: 1rem
   .example-minheight .row
-    min-height 5rem
-    height 0px
-    background rgba(255,0,0,.1)
+    min-height: 5rem
+    height: 0px
+    background: rgba(255,0,0,.1)
 </style>
diff --git a/ui/dev/src/pages/css/flex-test.vue b/ui/dev/src/pages/css/flex-test.vue
index ab2c5a6d924..5db05666c14 100644
--- a/ui/dev/src/pages/css/flex-test.vue
+++ b/ui/dev/src/pages/css/flex-test.vue
@@ -48,12 +48,12 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .ex
-  border 1px solid #ccc
-  padding 2px
+  border: 1px solid #ccc
+  padding: 2px
   > div
-    background #ddd
-    border 1px solid #ccc
-    padding 5px
+    background: #ddd
+    border: 1px solid #ccc
+    padding: 5px
 </style>
diff --git a/ui/dev/src/pages/css/material-ripples-1.vue b/ui/dev/src/pages/css/material-ripples-1.vue
index 4d07466fa25..bd7bbc31bfa 100644
--- a/ui/dev/src/pages/css/material-ripples-1.vue
+++ b/ui/dev/src/pages/css/material-ripples-1.vue
@@ -87,26 +87,26 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .ripple-example
-  border-radius 3px
-  cursor pointer
-  color white
-  display flex
-  align-items center
-  justify-content center
-  user-select none
+  border-radius: 3px
+  cursor: pointer
+  color: white
+  display: flex
+  align-items: center
+  justify-content: center
+  user-select: none
 
   &:focus
-    outline 1px solid $grey
-    outline-offset 3px
+    outline: 1px solid $grey
+    outline-offset: 3px
 
   & + &
-    margin-top 24px
+    margin-top: 24px
 
 .ripple-round
-  width 150px
-  height 150px
-  border-radius 50%
-  margin-top 0 !important
+  width: 150px
+  height: 150px
+  border-radius: 50%
+  margin-top: 0 !important
 </style>
diff --git a/ui/dev/src/pages/css/shadows.vue b/ui/dev/src/pages/css/shadows.vue
index 43a402af374..bc201030c76 100644
--- a/ui/dev/src/pages/css/shadows.vue
+++ b/ui/dev/src/pages/css/shadows.vue
@@ -27,10 +27,10 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .shadow-box
-  width 110px
-  height 110px
-  margin 25px
-  border-radius 5px
+  width: 110px
+  height: 110px
+  margin: 25px
+  border-radius: 5px
 </style>
diff --git a/ui/dev/src/pages/css/size-addon.vue b/ui/dev/src/pages/css/size-addon.vue
index 6ed096a2c5b..b2b0cfd5c7d 100644
--- a/ui/dev/src/pages/css/size-addon.vue
+++ b/ui/dev/src/pages/css/size-addon.vue
@@ -16,34 +16,33 @@
   </div>
 </template>
 
-<style lang="stylus">
-  .box
-    position relative
-    display inline-flex
-    margin 2em
-    background rgba(255, 150, 0, .3)
-    width 200px
-    height 200px
-    div
-      flex 1 1 100%
-      background rgba(0, 200, 0, .3)
-      &:before
-        content ''
-        display block
-        width 100%
-        height 100%
-        background rgba(0, 0, 255, .3)
-      &:after
-        content attr(class)
-        position absolute
-        bottom 0
-        left 0
-        right 0
-        transform translateY(100%)
-        padding .5em
-        background rgba(100, 100, 100, .1)
-        text-align center
-
+<style lang="sass">
+.box
+  position: relative
+  display: inline-flex
+  margin: 2em
+  background: rgba(255, 150, 0, .3)
+  width: 200px
+  height: 200px
+  div
+    flex: 1 1 100%
+    background: rgba(0, 200, 0, .3)
+    &:before
+      content: ''
+      display: block
+      width: 100%
+      height: 100%
+      background: rgba(0, 0, 255, .3)
+    &:after
+      content: attr(class)
+      position: absolute
+      bottom: 0
+      left: 0
+      right: 0
+      transform: translateY(100%)
+      padding: .5em
+      background: rgba(100, 100, 100, .1)
+      text-align: center
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/css/typography.vue b/ui/dev/src/pages/css/typography.vue
index 0f7a13e603a..332e2036164 100644
--- a/ui/dev/src/pages/css/typography.vue
+++ b/ui/dev/src/pages/css/typography.vue
@@ -58,19 +58,19 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .test-height .test-row
-  position relative
-  margin-bottom 16px
+  position: relative
+  margin-bottom: 16px
   &:after
-    position absolute
-    content ''
-    top -8px
-    bottom -8px
-    left -8px
-    right -8px
-    background-color transparent
-    border 8px solid rgba(255, 0, 0, .6)
+    position: absolute
+    content: ''
+    top: -8px
+    bottom: -8px
+    left: -8px
+    right: -8px
+    background-color: transparent
+    border: 8px solid rgba(255, 0, 0, .6)
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/form/date-time-timezone.vue b/ui/dev/src/pages/form/date-time-timezone.vue
index 87c0b32260f..502477744cc 100644
--- a/ui/dev/src/pages/form/date-time-timezone.vue
+++ b/ui/dev/src/pages/form/date-time-timezone.vue
@@ -116,6 +116,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus">
-</style>
diff --git a/ui/dev/src/pages/form/editor-part1.vue b/ui/dev/src/pages/form/editor-part1.vue
index 8e540acfd76..8fadb654780 100644
--- a/ui/dev/src/pages/form/editor-part1.vue
+++ b/ui/dev/src/pages/form/editor-part1.vue
@@ -252,13 +252,16 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .editor_token
-  background rgba(0, 0, 0, .6)
-  color white
-  padding 3px
-  &, .q-icon
-    border-radius 3px
+  background: rgba(0, 0, 0, .6)
+  color: white
+  padding: 3px
+
+  &,
+  .q-icon
+    border-radius: 3px
+
   .q-icon
-    background rgba(0, 0, 0, .2)
+    background: rgba(0, 0, 0, .2)
 </style>
diff --git a/ui/dev/src/pages/form/field.vue b/ui/dev/src/pages/form/field.vue
index 8baef0054bb..ad76df08fa1 100644
--- a/ui/dev/src/pages/form/field.vue
+++ b/ui/dev/src/pages/form/field.vue
@@ -319,12 +319,16 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .fields-border
-  .q-field, .q-item
-    border 1px solid currentColor
+  .q-field,
+  .q-item
+    border: 1px solid currentColor
 
 .fields-individual-border
-  .q-field__before, .q-field__after, .q-field__content, .q-field__bottom, .q-item
-    border 1px solid currentColor
+  .q-field__before,
+  .q-field__after,
+  .q-field__content,
+  .q-field__bottom, .q-item
+    border: 1px solid currentColor
 </style>
diff --git a/ui/dev/src/pages/form/input.vue b/ui/dev/src/pages/form/input.vue
index 617af718882..6b6b0fd7425 100644
--- a/ui/dev/src/pages/form/input.vue
+++ b/ui/dev/src/pages/form/input.vue
@@ -644,6 +644,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus">
-</style>
diff --git a/ui/dev/src/pages/form/select-part-1.vue b/ui/dev/src/pages/form/select-part-1.vue
index 883ecb91443..4067a4006e1 100644
--- a/ui/dev/src/pages/form/select-part-1.vue
+++ b/ui/dev/src/pages/form/select-part-1.vue
@@ -715,9 +715,9 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .select-card
-  transition .3s background-color
+  transition: .3s background-color
   &:not(.disabled):hover
-    background $grey-3
+    background: $grey-3
 </style>
diff --git a/ui/dev/src/pages/form/select-part-2.vue b/ui/dev/src/pages/form/select-part-2.vue
index f2b17a3a565..1aebfe9a346 100644
--- a/ui/dev/src/pages/form/select-part-2.vue
+++ b/ui/dev/src/pages/form/select-part-2.vue
@@ -1002,9 +1002,9 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .select-card
-  transition .3s background-color
+  transition: .3s background-color
   &:not(.disabled):hover
-    background $grey-3
+    background: $grey-3
 </style>
diff --git a/ui/dev/src/pages/form/select-part-3.vue b/ui/dev/src/pages/form/select-part-3.vue
index 7c141ec73fa..76622229f42 100644
--- a/ui/dev/src/pages/form/select-part-3.vue
+++ b/ui/dev/src/pages/form/select-part-3.vue
@@ -271,12 +271,12 @@
   </div>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .sticky-top
-  position sticky
-  opacity 1
-  z-index 1
-  top 0
+  position: sticky
+  opacity: 1
+  z-index: 1
+  top: 0
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/global/bottom-sheet.vue b/ui/dev/src/pages/global/bottom-sheet.vue
index fba6915351c..57c1d9eb2e1 100644
--- a/ui/dev/src/pages/global/bottom-sheet.vue
+++ b/ui/dev/src/pages/global/bottom-sheet.vue
@@ -113,9 +113,9 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .custom-bottom-sheet
-  color #33c
-  background-color #ee9
-  padding 40px
+  color: #33c
+  background-color: #ee9
+  padding: 40px
 </style>
diff --git a/ui/dev/src/pages/global/dialog-plugin.vue b/ui/dev/src/pages/global/dialog-plugin.vue
index 28e0a22524b..57e4070eea0 100644
--- a/ui/dev/src/pages/global/dialog-plugin.vue
+++ b/ui/dev/src/pages/global/dialog-plugin.vue
@@ -593,9 +593,9 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .custom-dialog
-  color #33c
-  background-color #ee9
-  padding 40px
+  color: #33c
+  background-color: #ee9
+  padding: 40px
 </style>
diff --git a/ui/dev/src/pages/layout/layout.vue b/ui/dev/src/pages/layout/layout.vue
index 49a106b8a02..724f3076c8f 100644
--- a/ui/dev/src/pages/layout/layout.vue
+++ b/ui/dev/src/pages/layout/layout.vue
@@ -463,11 +463,11 @@
   </div>
 </template>
 
-<style lang="stylus">
-  .fit-min
-    min-width 100%
-    min-height 100%
-    height 0px
+<style lang="sass">
+.fit-min
+  min-width: 100%
+  min-height: 100%
+  height: 0px
 </style>
 
 <script>
diff --git a/ui/dev/src/pages/layout/pages/a.vue b/ui/dev/src/pages/layout/pages/a.vue
index c12ddbd7ae3..b42b859dbbc 100644
--- a/ui/dev/src/pages/layout/pages/a.vue
+++ b/ui/dev/src/pages/layout/pages/a.vue
@@ -78,7 +78,7 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="sass">
 .page-a-padding
-  padding 55px 125px
+  padding: 55px 125px
 </style>
diff --git a/ui/dev/src/pages/layout/pages/default.vue b/ui/dev/src/pages/layout/pages/default.vue
index e266ec165c7..77b3eb528e2 100644
--- a/ui/dev/src/pages/layout/pages/default.vue
+++ b/ui/dev/src/pages/layout/pages/default.vue
@@ -49,9 +49,9 @@
   </q-page>
 </template>
 
-<style lang="stylus">
+<style lang="sass">
 .page-default-padding
-  padding-top calc(2.5rem + 50px)
+  padding-top: calc(2.5rem + 50px)
 </style>
 
 <script>