chore(ui/dev): transform stylus to sass in examples

quasarframework · Sep 29, 2022 · e76cff7 · e76cff7
1 parent 64d71a9
commit e76cff7
Show file tree

Hide file tree

Showing 43 changed files with 261 additions and 267 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>