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

Author: rstoenescu

ui/src/components/btn/QBtn.styl

@@ -1,8 +1,3 @@
-button.q-btn
-  -webkit-appearance button
-a.q-btn
-  display inline-flex
-
 .q-btn
   position relative
   outline 0
@@ -21,6 +16,11 @@ a.q-btn
   font-weight $button-font-weight
   text-transform uppercase
 
+  button&
+    -webkit-appearance button
+  a&
+    display inline-flex
+
   .q-icon, .q-spinner
     font-size $button-line-height
 

ui/src/components/color/QColor.sass

@@ -164,7 +164,7 @@
     color: white
 
     .q-color-picker__tune-tab input
-      border: 1px solid alpha(#fff, .3)
+      border: 1px solid rgba(#fff, .3)
 
     .q-slider
       color: $grey-5

ui/src/components/datetime/QDate.sass

@@ -107,10 +107,10 @@
     padding: 0 8px
 
   &__years-item, &__months-item
-    flex: 0 0 (round(1 / 3 * 100, 4))%
+    flex: 0 0 33.3333%
 
   &__months-content
-    flex: 0 0 (round(10 / 12 * 100, 4))%
+    flex: 0 0 83.3333%
 
   &.disabled, &--readonly
     .q-date__header, .q-date__content

ui/src/components/datetime/QTime.sass

@@ -118,21 +118,20 @@
 
   @for $pos from 0 through 11
     $degree: (270 + 30 * $pos)
+
     &__clock-pos-#{$pos}
-      top: round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
-      left: round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
+      top: (round(percentage((1 + sin($degree * 1deg)) * 100 / 2)) / 100)
+      left: (round(percentage((1 + cos($degree * 1deg)) * 100 / 2)) / 100) /* rtl:ignore */
 
-  @for $pos from 0 through 12
-    $degree: (270 + 30 * $pos)
     &__clock-pos-#{$pos}.fmt24
-      top: round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
-      left: round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
+      top: (round(percentage((1 + sin($degree * 1deg)) * 100 / 2)) / 100)
+      left: (round(percentage((1 + cos($degree * 1deg)) * 100 / 2)) / 100) /* rtl:ignore */
 
   @for $pos from 12 through 23
     $degree: (270 + 30 * $pos)
     &__clock-pos-#{$pos}.fmt24
-      top: round(15% + ((1 + sin($degree * 1deg)) * 70%) / 2, 2)
-      left: round(15% + ((1 + cos($degree * 1deg)) * 70%) / 2, 2) /* rtl:ignore */
+      top: (round(percentage((15 + ((1 + sin($degree * 1deg)) * 70)) / 2) * 100) / 100)
+      left: (round(percentage((15 + ((1 + cos($degree * 1deg)) * 70)) / 2) * 100) / 100) /* rtl:ignore */
 
   &__now-button
     background-color: $primary

ui/src/components/datetime/QTime.styl

@@ -118,15 +118,15 @@
 
   for pos in 0..11
     $degree = (270 + 30 * pos)
+
     &__clock-pos-{pos}
       top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
       left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
 
-  for pos in 0..12
-    $degree = (270 + 30 * pos)
     &__clock-pos-{pos}.fmt24
       top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
       left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
+
   for pos in 12..23
     $degree = (270 + 30 * pos)
     &__clock-pos-{pos}.fmt24

ui/src/components/dialog-bottom-sheet/BottomSheet.sass

@@ -34,8 +34,8 @@
       margin: 12px 0
 
   &__item
-    flex: 0 0 (round(1 / 3 * 100, 4))%
+    flex: 0 0 33.3333%
 
-@media (min-width $breakpoint-sm-min)
+@media (min-width: $breakpoint-sm-min)
   .q-bottom-sheet__item
-    flex: 0 0 (round(1 / 4 * 100, 4))%
+    flex: 0 0 25%

ui/src/components/field/QField.sass

@@ -6,7 +6,7 @@ $field-transition: .36s cubic-bezier(.4,0,.2,1)
     color: $input-autofill-color
 
 .q-field
-  font-size; $input-font-size
+  font-size: $input-font-size
 
   &--with-bottom
     padding-bottom: 20px

ui/src/components/slider/QSlider.sass

@@ -135,7 +135,7 @@
 
   &--dark
     .q-slider__track-container
-      background: alpha(#fff, .3)
+      background: rgba(#fff, .3)
     .q-slider__track-markers
       color: white
 

ui/src/components/virtual-scroll/QVirtualScroll.sass

@@ -0,0 +1,58 @@
+.q-virtual-scroll {
+  &:focus {
+    outline: none;
+  }
+
+  &__padding {
+    background: linear-gradient(
+      transparent,
+      transparent 20%,
+      rgba(128, 128, 128, .03) 20%,
+      rgba(128, 128, 128, .08) 50%,
+      rgba(128, 128, 128, .03) 80%,
+      transparent 80%,
+      transparent
+    );
+    background-size: 100% 50px;
+
+    .q-table & {
+      tr { height: 0 !important; }
+      td { padding: 0 !important; }
+    }
+  }
+
+  &--horizontal {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: stretch;
+
+    .q-virtual-scroll {
+      &__content {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+      }
+
+      &__padding,
+      &__content,
+      &__content > * {
+        flex: 0 0 auto;
+      }
+
+      &__padding {
+        background: linear-gradient(
+          to left,
+          transparent,
+          transparent 20%,
+          rgba(128, 128, 128, .03) 20%,
+          rgba(128, 128, 128, .08) 50%,
+          rgba(128, 128, 128, .03) 80%,
+          transparent 80%,
+          transparent
+        );
+        background-size: 50px 100%;
+      }
+    }
+  }
+}