feat(ui): Sass/SCSS work in progress quasarframework#5049

Author: rstoenescu

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

@@ -0,0 +1,26 @@
+.q-loading-bar
+  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%
+  &--bottom
+    left: 0 /* rtl:ignore */
+    right: 0 /* rtl:ignore */
+    bottom: 0
+    width: 100%
+
+  &--right
+    top: 0
+    bottom: 0
+    right: 0
+    height: 100%
+  &--left
+    top: 0
+    bottom: 0
+    left: 0
+    height: 100%

ui/src/components/ajax-bar/ajax-bar.styl ui/src/components/ajax-bar/QAjaxBar.stylui/src/components/ajax-bar/ajax-bar.styl renamed to ui/src/components/ajax-bar/QAjaxBar.styl

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

ui/src/components/avatar/QAvatar.sass

@@ -0,0 +1,25 @@
+.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
+
+  &--single-line
+    white-space: nowrap
+  &--multi-line
+    word-break: break-all
+    word-wrap: break-word
+
+  &--floating
+    position: absolute
+    top: -4px
+    right: -3px
+    cursor: inherit
+
+  &--transparent
+    opacity: 0.8

ui/src/components/avatar/avatar.styl ui/src/components/avatar/QAvatar.stylui/src/components/avatar/avatar.styl renamed to ui/src/components/avatar/QAvatar.styl

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

ui/src/components/badge/QBadge.sass

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