chore(ui): Make it easier to update both .styl and .sass files

Author: rstoenescu

ui/.stylintrc

@@ -1,13 +1,13 @@
 {
   "blocks": "never",
   "brackets": "never",
-  "colons": "never",
-  "colors": "always",
-  "commaSpace": "always",
+  "colons": "always",
+  "colors": false,
+  "commaSpace": false,
   "commentSpace": "always",
   "cssLiteral": "never",
   "depthLimit": false,
-  "duplicates": true,
+  "duplicates": false,
   "efficient": "always",
   "extendPref": false,
   "globalDupe": true,

ui/src/components/ajax-bar/QAjaxBar.sass

@@ -1,7 +1,7 @@
 .q-loading-bar
   position: fixed
   z-index: $z-max
-  transition: transform .5s cubic-bezier(0, 0, .2, 1), opacity .5s
+  transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s
 
   &--top
     left: 0 #{"/* rtl:ignore */"}

ui/src/components/ajax-bar/QAjaxBar.styl

@@ -1,26 +1,26 @@
 .q-loading-bar
-  position fixed
-  z-index $z-max
-  transition transform .5s cubic-bezier(0, 0, .2, 1), opacity .5s
+  position: fixed
+  z-index: $z-max
+  transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s
 
   &--top
-    left 0 /* rtl:ignore */
-    right 0 /* rtl:ignore */
-    top 0
-    width 100%
+    left: 0 /* rtl:ignore */
+    right: 0 /* rtl:ignore */
+    top: 0
+    width: 100%
   &--bottom
-    left 0 /* rtl:ignore */
-    right 0 /* rtl:ignore */
-    bottom 0
-    width 100%
+    left: 0 /* rtl:ignore */
+    right: 0 /* rtl:ignore */
+    bottom: 0
+    width: 100%
 
   &--right
-    top 0
-    bottom 0
-    right 0
-    height 100%
+    top: 0
+    bottom: 0
+    right: 0
+    height: 100%
   &--left
-    top 0
-    bottom 0
-    left 0
-    height 100%
+    top: 0
+    bottom: 0
+    left: 0
+    height: 100%

ui/src/components/avatar/QAvatar.styl

@@ -1,22 +1,22 @@
 .q-avatar
-  position relative
-  vertical-align middle
-  display inline-block
+  position: relative
+  vertical-align: middle
+  display: inline-block
 
-  border-radius 50%
+  border-radius: 50%
 
-  font-size 48px
-  height 1em
-  width 1em
+  font-size: 48px
+  height: 1em
+  width: 1em
 
   &__content
-    font-size .5em
-    line-height .5em
+    font-size: .5em
+    line-height: .5em
 
   &__content, img:not(.q-icon)
-    border-radius inherit
-    height inherit
-    width inherit
+    border-radius: inherit
+    height: inherit
+    width: inherit
 
 .q-avatar__content--square
-  border-radius 0
+  border-radius: 0

ui/src/components/badge/QBadge.sass

@@ -22,7 +22,7 @@
     cursor: inherit
 
   &--transparent
-    opacity: 0.8
+    opacity: .8
 
   &--outline
     background-color: transparent

ui/src/components/badge/QBadge.styl

@@ -1,29 +1,29 @@
 .q-badge
-  background-color $primary
-  background-color var(--q-color-primary)
-  color white
-  padding 2px 6px
-  border-radius $generic-border-radius
-  font-size 12px
-  line-height 12px
-  font-weight normal
-  vertical-align baseline
+  background-color: $primary
+  background-color: var(--q-color-primary)
+  color: #fff
+  padding: 2px 6px
+  border-radius: $generic-border-radius
+  font-size: 12px
+  line-height: 12px
+  font-weight: normal
+  vertical-align: baseline
 
   &--single-line
-    white-space nowrap
+    white-space: nowrap
   &--multi-line
-    word-break break-all
-    word-wrap break-word
+    word-break: break-all
+    word-wrap: break-word
 
   &--floating
-    position absolute
-    top -4px
-    right -3px
-    cursor inherit
+    position: absolute
+    top: -4px
+    right: -3px
+    cursor: inherit
 
   &--transparent
-    opacity 0.8
+    opacity: .8
 
   &--outline
-    background-color transparent
-    border 1px solid currentColor
+    background-color: transparent
+    border: 1px solid currentColor

ui/src/components/banner/QBanner.styl

@@ -1,38 +1,38 @@
 .q-banner
-  min-height 54px
-  padding 8px 16px
-  background white
+  min-height: 54px
+  padding: 8px 16px
+  background: #fff
 
   &--top-padding
-    padding-top 14px
+    padding-top: 14px
 
   &__avatar
-    min-width 1px !important
+    min-width: 1px !important
     > .q-avatar
-      font-size 46px
+      font-size: 46px
     > .q-icon
-      font-size 40px
+      font-size: 40px
 
   &__avatar:not(:empty) + &__content
-    padding-left 16px
+    padding-left: 16px
 
   &__actions
     &.col-auto
-      padding-left 16px
+      padding-left: 16px
     &.col-all
       .q-btn-item
-        margin 4px 0 0 4px
+        margin: 4px 0 0 4px
 
   &--dense
-    min-height 32px
-    padding 8px
+    min-height: 32px
+    padding: 8px
     &.q-banner--top-padding
-      padding-top 12px
+      padding-top: 12px
     .q-banner__avatar
       > .q-avatar, > .q-icon
-        font-size 28px
+        font-size: 28px
     .q-banner__avatar:not(:empty) + .q-banner__content
-      padding-left 8px
+      padding-left: 8px
     .q-banner__actions
       &.col-auto
-        padding-left 8px
+        padding-left: 8px

ui/src/components/bar/QBar.sass

@@ -1,5 +1,5 @@
 .q-bar
-  background: rgba(0, 0, 0, .2)
+  background: rgba(0,0,0,.2)
 
   > .q-icon
     margin-left: 2px
@@ -28,4 +28,4 @@
       font-size: 8px
 
   &--dark
-    background: rgba(255, 255, 255, .15)
+    background: rgba(255,255,255,.15)

ui/src/components/bar/QBar.styl

@@ -1,31 +1,31 @@
 .q-bar
-  background rgba(0, 0, 0, .2)
+  background: rgba(0,0,0,.2)
 
   > .q-icon
-    margin-left 2px
+    margin-left: 2px
   > div, > div + .q-icon
-    margin-left 8px
+    margin-left: 8px
   > .q-btn
-    margin-left 2px
+    margin-left: 2px
 
   > .q-icon:first-child, > .q-btn:first-child, > div:first-child
-    margin-left 0
+    margin-left: 0
 
   &--standard
-    padding 0 12px
-    height 32px
-    font-size 18px
+    padding: 0 12px
+    height: 32px
+    font-size: 18px
     > div
-      font-size 16px
+      font-size: 16px
     .q-btn
-      font-size 11px
+      font-size: 11px
 
   &--dense
-    padding 0 8px
-    height 24px
-    font-size 14px
+    padding: 0 8px
+    height: 24px
+    font-size: 14px
     .q-btn
-      font-size 8px
+      font-size: 8px
 
   &--dark
-    background rgba(255, 255, 255, .15)
+    background: rgba(255,255,255,.15)

ui/src/components/breadcrumbs/QBreadcrumbs.styl

@@ -1,16 +1,16 @@
 .q-breadcrumbs
 
   &__el
-    color inherit
+    color: inherit
 
   &__el-icon
-    font-size 125%
+    font-size: 125%
 
     &--with-label
-      margin-right 8px
+      margin-right: 8px
 
   &--last a
-    pointer-events none
+    pointer-events: none
 
 [dir=rtl] .q-breadcrumbs__separator .q-icon
-  transform scaleX(-1) /* rtl:ignore */
+  transform: scaleX(-1) /* rtl:ignore */