@qooxdoo/framework 7.6.1 → 7.6.2

package/source/resource/qx/mobile/scss/ui/_slider.scss

@@ -11,10 +11,10 @@
   overflow: visible;
 
   margin-bottom: $slider-knob-height;
-  margin-left: ($slider-knob-width*0.5); 
+  margin-left: ($slider-knob-width*0.5);
   margin-right: ($slider-knob-width*0.5);
 
-  border: rem(1) solid $slider-border-color;
+  border: px-to-rem(1) solid $slider-border-color;
 }
 
 // Extended touch area
@@ -41,9 +41,9 @@
 }
 
 // Knob
-.slider > div:after { 
+.slider > div:after {
   @include border-radius($slider-knob-border-radius);
-  @include box-shadow(0 0 rem(3) $slider-shadow);
+  @include box-shadow(0 0 px-to-rem(3) $slider-shadow);
   @include background($slider-knob-background);
   @include pointer-none();
 
@@ -52,7 +52,7 @@
   text-align: center;
   content: "";
 
-  border: rem(1) solid $slider-knob-border-color;
+  border: px-to-rem(1) solid $slider-knob-border-color;
 
   height: $slider-knob-height;
   width: $slider-knob-width;
@@ -62,7 +62,7 @@
   text-overflow: ellipsis;
   font-weight:normal;
 
-  top: -($slider-knob-height*0.5) + ($slider-height*0.5) - rem(1);
+  top: -($slider-knob-height*0.5) + ($slider-height*0.5) - px-to-rem(1);
   right: -1*$slider-knob-width*0.5;
 }
 
@@ -75,7 +75,7 @@
 }
 
 // Fix for IE [BUG #7814]
-.root.win .slider > div:after { 
+.root.win .slider > div:after {
   line-height: calc(unquote("#{$slider-knob-height} - 0px"));
 }
 

package/source/resource/qx/mobile/scss/ui/_tabbar.scss

@@ -1,11 +1,11 @@
 //
-// TABBAR   
+// TABBAR
 //
 .tabBar {
   padding-top: $tabbar-button-distance;
   padding-left: $tabbar-button-distance;
   padding-right: $tabbar-button-distance;
-  border-bottom: rem(3) solid $tabbar-divider-color;
+  border-bottom: px-to-rem(3) solid $tabbar-divider-color;
   min-height: $tabbar-height;
 }
 
@@ -27,7 +27,7 @@
 
   text-align: center;
 
-  $tab-button-border: rem(1) solid $tabbar-inactive-border-color;  
+  $tab-button-border: px-to-rem(1) solid $tabbar-inactive-border-color;
   border-top: $tab-button-border;
   border-left: $tab-button-border;
   border-right: $tab-button-border;
@@ -39,6 +39,6 @@
 
 .tabButton.active, .tabButton.selected {
   @include background($tabbar-active-background);
-  border: rem(1) solid $tabbar-active-border-color;
+  border: px-to-rem(1) solid $tabbar-active-border-color;
   border-bottom: 0px solid transparent;
 }

package/source/resource/qx/mobile/scss/ui/_togglebutton.scss

@@ -1,11 +1,11 @@
 //
-// TOGGLEBUTTON 
+// TOGGLEBUTTON
 //
 
-$togglebutton-label-padding: rem(3);
+$togglebutton-label-padding: px-to-rem(3);
 
 .togglebutton {
-  @include box-inset-shadow(0px rem(3) rem(2) $togglebutton-inset-shadow);
+  @include box-inset-shadow(0px px-to-rem(3) px-to-rem(2) $togglebutton-inset-shadow);
   @include border-radius($togglebutton-border-radius);
   @include background($togglebutton-background);
 
@@ -21,7 +21,7 @@ $togglebutton-label-padding: rem(3);
   height:  $togglebutton-height;
   line-height:  $togglebutton-height;
 
-  border: rem(1) solid $togglebutton-border-color;
+  border: px-to-rem(1) solid $togglebutton-border-color;
 }
 
 .togglebutton:before {
@@ -52,20 +52,20 @@ $togglebutton-label-padding: rem(3);
 }
 
 .togglebutton.checked {
-  @include box-inset-shadow(0px rem(3) rem(2) $togglebutton-inset-shadow);
+  @include box-inset-shadow(0px px-to-rem(3) px-to-rem(2) $togglebutton-inset-shadow);
   @include background($togglebutton-active-background);
 }
 
 .togglebutton.checked .togglebutton-switch {
-  @include box-shadow(rem(-2) 0px rem(2) $togglebutton-knob-shadow);
+  @include box-shadow(px-to-rem(-2) 0px px-to-rem(2) $togglebutton-knob-shadow);
   right: 0px;
 }
 
 .togglebutton-switch {
-  @include border-radius($togglebutton-border-radius - rem(1));
-  @include box-shadow(rem(2) 0 rem(2) $togglebutton-knob-shadow);
+  @include border-radius($togglebutton-border-radius - px-to-rem(1));
+  @include box-shadow(px-to-rem(2) 0 px-to-rem(2) $togglebutton-knob-shadow);
   @include background($togglebutton-knob-background);
-  
+
   display: block;
   position: absolute;
   z-index: 1;

package/source/resource/qx/mobile/scss/ui/_toolbar.scss

@@ -12,7 +12,7 @@
   overflow: hidden;
 
   color: $toolbar-text-color;
-  border: rem(1) solid $toolbar-border-color;
+  border: px-to-rem(1) solid $toolbar-border-color;
 
   cursor: pointer;
   font-weight: $toolbar-font-weight;
@@ -31,7 +31,7 @@
 }
 
 .toolbar-separator {
-  width: rem(4);
+  width: px-to-rem(4);
 }
 
 .toolbar {
@@ -39,9 +39,9 @@
 
   z-index: 1;
   padding: $toolbar-padding;
-  height: rem(50);
+  height: px-to-rem(50);
 
-  height: -moz-calc(rem(50) + $toolbar-padding);
+  height: -moz-calc(px-to-rem(50) + $toolbar-padding);
 }
 
 .toolbar-button img {
@@ -54,7 +54,7 @@
 
 .toolbar-button .label {
   height: auto;
-  padding-top:rem(2);
+  padding-top:px-to-rem(2);
   text-align:center;
   // For displaying ellipsis correctly.
   max-width:100%;

package/source/resource/qx/scss/_mixins.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 
+/// @deprecated Please use `px-to-rem()` instead.
 @function rem($value, $factor: 1.0) {
   @if ($value != 0 and $value != auto) {
     @if (unitless($value)) {
@@ -16,6 +17,32 @@
   @return $value;
 }
 
+/// Think in pixels; style with rems.
+///
+/// Converts pixel units & unitless numbers to rems.
+///
+/// @param {number} $value - The value to convert. May be a number or a pixel
+///   unit
+/// @param {number} [$factor=1] - The factor to multiply the value with. Most
+///   use cases will not set this.
+///
+/// @return {length} The converted value in rems
+@function px-to-rem($value, $factor: 1.0) {
+  @if ($value != 0 and $value != auto) {
+    @if (unitless($value)) {
+      $value: $value * 1px;
+    }
+
+    @if (unit($factor) == "%") {
+      $factor: math.div($factor, $factor * 0 + 1) * 0.01;
+    }
+
+    $value: $factor*math.div($value, 16px) * 1rem;
+  }
+
+  @return $value;
+}
+
 @mixin background-clip($args) {
   -webkit-background-clip: $args;
   -moz-background-clip: $args;

package/source/resource/qx/tool/cli/templates/skeleton/mobile/source/theme/custom/scss/_styles.scss

@@ -15,7 +15,7 @@ $color-2: mix($foreground-color, $background-color, 70%);
 $color-3: mix($foreground-color, $background-color, 50%);
 $color-4: mix($foreground-color, $background-color, 30%);
 $color-5: mix($foreground-color, $background-color, 10%);
- 
+
 // Application
 
 $application-font:  "Segoe UI","Slate Pro",sans-serif,Helvetica;
@@ -24,10 +24,10 @@ $application-text-color:  $foreground-color;
 // Button
 
 $button-text-color:  $color-1;
-$button-font-size:  rem(15);
+$button-font-size:  px-to-rem(15);
 $button-font-weight: bold;
 $button-active-text-color:  $background-color;
-$button-border-radius:  rem(4);
+$button-border-radius:  px-to-rem(4);
 $button-border-color:  $color-2;
 $button-active-border-color:  $color-2;
 $button-background:  $background-color,$color-4;
@@ -35,40 +35,40 @@ $button-active-background:  lighten($highlight-color,20%),$highlight-color;
 
 // Carousel
 
-$carousel-pagination-size:  rem(10);
+$carousel-pagination-size:  px-to-rem(10);
 $carousel-pagination-background: rgba($background-color,0.6);
 $carousel-pagination-border-color: rgba($background-color,0.6);
 $carousel-pagination-active-background: $highlight-color;
 $carousel-pagination-active-border-color: $background-color;
 $carousel-pagination-border-radius: $carousel-pagination-size;
-$carousel-pagination-font-size:  rem(1);
+$carousel-pagination-font-size:  px-to-rem(1);
 $carousel-pagination-font-color: rgba(0,0,0,0);
 
 // Checkbox
 
-$checkbox-size:  rem(30);
+$checkbox-size:  px-to-rem(30);
 $checkbox-tick-color: $highlight-color;
-$checkbox-tick-size:  rem(14);
-$checkbox-tick-width:  rem(4);
+$checkbox-tick-size:  px-to-rem(14);
+$checkbox-tick-width:  px-to-rem(4);
 $checkbox-tick-shadow: rgba(0,0,0,0.3);
-$checkbox-border-radius:  rem(4);
+$checkbox-border-radius:  px-to-rem(4);
 $checkbox-border-color:  $color-2;
 $checkbox-background: $color-4,$background-color;
 
 // Collapsible
 
-$collapsible-border-radius:  rem(4);
+$collapsible-border-radius:  px-to-rem(4);
 $collapsible-header-border-color:  $color-2;
 $collapsible-header-text-color:  $color-1;
 $collapsible-header-active-text-color: $background-color;
 $collapsible-header-background:  $background-color, $color-4;
 $collapsible-header-active-background:  lighten($highlight-color,20%),$highlight-color;
-$collapsible-header-padding:  rem(10);
-$collapsible-header-content-distance:  rem(10);
+$collapsible-header-padding:  px-to-rem(10);
+$collapsible-header-content-distance:  px-to-rem(10);
 $collapsible-content-border-color:  $color-4;
-$collapsible-content-padding:  rem(10);
+$collapsible-content-padding:  px-to-rem(10);
 $collapsible-content-background-color:  $background-color;
-$collapsible-arrow-size:  rem(8);
+$collapsible-arrow-size:  px-to-rem(8);
 $collapsible-arrow-color:  $color-1;
 $collapsible-active-arrow-color:  $background-color;
 
@@ -84,9 +84,9 @@ $dialog-border-color: $highlight-color;
 $dialog-background:  $color-2,$color-1 50%,$color-1;
 $dialog-arrow-up-color:  $color-2;
 $dialog-arrow-down-color:  $color-1;
-$dialog-arrow-size:  rem(12);
-$dialog-arrow-position-offset:  rem(16);
-$dialog-border-radius:  rem(4);
+$dialog-arrow-size:  px-to-rem(12);
+$dialog-arrow-position-offset:  px-to-rem(16);
+$dialog-border-radius:  px-to-rem(4);
 $dialog-title-text-color: $background-color;
 $dialog-font-weight: bold;
 
@@ -96,7 +96,7 @@ $form-background:  $background-color;
 $form-title-text-color:  $highlight-color;
 $form-label-text-color:  $color-1;
 $form-border-color:  $color-4;
-$form-border-radius:  rem(4);
+$form-border-radius:  px-to-rem(4);
 $form-font-weight: bold;
 
 // Group
@@ -104,13 +104,13 @@ $form-font-weight: bold;
 $group-background:  $background-color;
 $group-border-color:  $color-4;
 $group-title-text-color:  $highlight-color;
-$group-border-radius:  rem(4);
+$group-border-radius:  px-to-rem(4);
 
 // Input
 
 $input-text-color:  $color-1;
 $input-background:  $background-color;
-$input-border-radius:  rem(4);
+$input-border-radius:  px-to-rem(4);
 $input-border-color: $color-4;
 $input-invalid-border-color: red;
 $input-active-border-color: $highlight-color;
@@ -119,22 +119,22 @@ $input-active-border-color: $highlight-color;
 
 $list-background: $background-color;
 $list-title-text-color: $color-1;
-$list-title-font-size:  rem(17);
+$list-title-font-size:  px-to-rem(17);
 $list-title-font-weight: bold;
 $list-subtitle-text-color:  $highlight-color;
-$list-subtitle-font-size:  rem(14);
+$list-subtitle-font-size:  px-to-rem(14);
 $list-border-color: $color-4;
 $list-active-background:  lighten($highlight-color,20%),$highlight-color;
 $list-active-text-color:  $background-color;
-$list-border-radius:  rem(4);
-$list-arrow-size:  rem(3);
-$list-arrow-thickness:  rem(2);
+$list-border-radius:  px-to-rem(4);
+$list-arrow-size:  px-to-rem(3);
+$list-arrow-thickness:  px-to-rem(2);
 $list-arrow-color: $color-1;
 $list-active-arrow-color: $background-color;
-$list-group-header-height: rem(30);
+$list-group-header-height: px-to-rem(30);
 $list-group-header-color: $color-3;
 $list-group-header-background: $background-color;
-$list-group-header-font: normal rem(16) sans-serif;
+$list-group-header-font: normal px-to-rem(16) sans-serif;
 
 // Menu
 
@@ -143,16 +143,16 @@ $menu-item-selected-background:  lighten($highlight-color, 20%), $highlight-colo
 
 // NavigationBar
 
-$navigationbar-height:  rem(40);
+$navigationbar-height:  px-to-rem(40);
 $navigationbar-background:  $color-2,$color-1;
 $navigationbar-text-size:  $navigationbar-height*0.5;
 $navigationbar-text-color:  $background-color;
-$navigationbar-padding:  rem(4);
+$navigationbar-padding:  px-to-rem(4);
 $navigationbar-font-weight: bold;
 
 // NavigationBar Button
 
-$navigationbarbutton-border-radius:  rem(4);
+$navigationbarbutton-border-radius:  px-to-rem(4);
 $navigationbarbutton-background:  $background-color,$color-4;
 $navigationbarbutton-border-color:  $color-2;
 $navigationbarbutton-text-color:  $color-1;
@@ -172,20 +172,20 @@ $picker-spinning-wheel-overlay:  rgba($background-color,1),rgba($background-colo
 $picker-spinning-wheel-text-color:  $color-1;
 $picker-spinning-wheel-background:  $background-color;
 $picker-highlight-color:  rgba($highlight-color,0.5);
-$picker-highlight-border-width:  rem(2);
+$picker-highlight-border-width:  px-to-rem(2);
 $picker-spinning-wheel-divider-color:  $color-2;
-$picker-spinning-wheel-divider-width:  rem(2);
+$picker-spinning-wheel-divider-width:  px-to-rem(2);
 
 // Deprecated in 4.1
-$picker-spinning-wheel-border-radius: rem(2);
-$picker-label-height: rem(25);
-$picker-label-font-size: rem(16);
-$picker-height: rem(160);
+$picker-spinning-wheel-border-radius: px-to-rem(2);
+$picker-label-height: px-to-rem(25);
+$picker-label-font-size: px-to-rem(16);
+$picker-height: px-to-rem(160);
 // -----------------
 
 // RadioButton
 
-$radiobutton-size:  rem(32);
+$radiobutton-size:  px-to-rem(32);
 $radiobutton-dot-color: $highlight-color;
 $radiobutton-dot-shadow: rgba(0,0,0,0.3);
 $radiobutton-background: $color-4,$background-color;
@@ -193,7 +193,7 @@ $radiobutton-border-color: $color-2;
 
 // SelectBox
 
-$selectbox-border-radius:  rem(4);
+$selectbox-border-radius:  px-to-rem(4);
 $selectbox-border-color:  $color-2;
 $selectbox-text-color:  $color-1;
 $selectbox-background:  $background-color,$color-4;
@@ -204,14 +204,14 @@ $selectbox-item-selected-background:  lighten($highlight-color,20%), $highlight-
 
 // Slider
 
-$slider-height:  rem(7);
+$slider-height:  px-to-rem(7);
 $slider-background:  $color-4,$background-color;
 $slider-active-area:  lighten($highlight-color,20%),$highlight-color;
-$slider-border-radius:  rem(20);
+$slider-border-radius:  px-to-rem(20);
 $slider-border-color:  $color-2;
-$slider-knob-border-radius:  rem(4);
-$slider-knob-width:  rem(30);
-$slider-knob-height:  rem(30);
+$slider-knob-border-radius:  px-to-rem(4);
+$slider-knob-width:  px-to-rem(30);
+$slider-knob-height:  px-to-rem(30);
 $slider-knob-background:  $background-color,$color-4;
 $slider-knob-border-color:  $color-2;
 $slider-shadow: rgba(0,0,0,0.4);
@@ -219,13 +219,13 @@ $slider-font-color:  $color-2;
 
 // Spinner
 
-$spinner-border-thickness: rem(3);
+$spinner-border-thickness: px-to-rem(3);
 $spinner-border-color: white;
-$spinner-size: rem(14);
+$spinner-size: px-to-rem(14);
 
 // Tabbar
 
-$tabbar-height:  rem(45);
+$tabbar-height:  px-to-rem(45);
 $tabbar-divider-color:  $highlight-color;
 $tabbar-active-background:  lighten($highlight-color,20%),$highlight-color;
 $tabbar-active-border-color:  $highlight-color;
@@ -233,24 +233,24 @@ $tabbar-inactive-background:  $color-3,$color-2;
 $tabbar-inactive-border-color:  $color-3;
 $tabbar-active-text-color:  $background-color;
 $tabbar-inactive-text-color:  $background-color;
-$tabbar-border-radius:  rem(4);
-$tabbar-button-distance:  rem(4);
+$tabbar-border-radius:  px-to-rem(4);
+$tabbar-button-distance:  px-to-rem(4);
 
 // ToggleButton
 
-$togglebutton-width:  rem(100);
-$togglebutton-height:  rem(30);
-$togglebutton-border-radius:  rem(4);
+$togglebutton-width:  px-to-rem(100);
+$togglebutton-height:  px-to-rem(30);
+$togglebutton-border-radius:  px-to-rem(4);
 $togglebutton-border-color:  $color-2;
 $togglebutton-text-color:  $color-1;
 $togglebutton-background:  $color-5,$background-color;
 $togglebutton-active-background:  $highlight-color,lighten($highlight-color,20%);
 $togglebutton-knob-background:  $background-color,$color-4;
-$togglebutton-knob-width:  rem(30);
+$togglebutton-knob-width:  px-to-rem(30);
 $togglebutton-active-text-color:  $background-color;
 $togglebutton-inset-shadow:  rgba(0,0,0,0.1);
 $togglebutton-knob-shadow:  rgba(0,0,0,0.4);
-$togglebutton-font-size:  rem(13);
+$togglebutton-font-size:  px-to-rem(13);
 $togglebutton-font-weight: bold;
 
 // Toolbar
@@ -260,6 +260,6 @@ $toolbar-background:  $background-color,$color-4;
 $toolbar-active-background:  lighten($highlight-color,20%),$highlight-color;
 $toolbar-active-text-color:  $background-color;
 $toolbar-border-color:  $color-2;
-$toolbar-border-radius:  rem(4);
+$toolbar-border-radius:  px-to-rem(4);
 $toolbar-font-weight: bold;
-$toolbar-padding:  rem(5);
+$toolbar-padding:  px-to-rem(5);

package/source/resource/qx/website/scss/ui/_button.scss

@@ -1,5 +1,5 @@
 .qx-button[disabled] {
-  border: rem(1) solid $border-color;
+  border: px-to-rem(1) solid $border-color;
   color: $highlight-color-disabled;
 }
 
@@ -9,26 +9,26 @@
 
 .qx-button {
   display: inline-block;
-  padding: rem(8) rem(12);
-  margin: rem(3);
-  border: rem(1) solid $border-color;
+  padding: px-to-rem(8) px-to-rem(12);
+  margin: px-to-rem(3);
+  border: px-to-rem(1) solid $border-color;
   @include background-clip(padding-box);
-  @include border-radius(rem(2));
+  @include border-radius(px-to-rem(2));
   cursor: pointer;
-  font-size: rem(14);
+  font-size: px-to-rem(14);
   outline: none;
   background: $background-color;
   color: $highlight-color;
   line-height: normal;
-  min-height: rem(35);
+  min-height: px-to-rem(35);
 }
 
 .qx-button:hover {
-  border: rem(1) solid $highlight-color;
+  border: px-to-rem(1) solid $highlight-color;
 }
 
 .qx-button:active {
-  border: rem(1) solid darken($highlight-color, 20%);
+  border: px-to-rem(1) solid darken($highlight-color, 20%);
   background: darken($background-color, 10%);
 }
 
@@ -37,7 +37,7 @@
 }
 
 .qx-button img {
-  margin-left: rem(3);
+  margin-left: px-to-rem(3);
 }
 
 .qx-button img,span {

package/source/resource/qx/website/scss/ui/_calendar.scss

@@ -1,5 +1,5 @@
 .qx-calendar table {
-  border-width: rem(1);
+  border-width: px-to-rem(1);
   border-color: $border-color;
   border-collapse: collapse;
   text-align: center;
@@ -11,12 +11,12 @@
 }
 
 .qx-calendar button:focus {
-  -webkit-text-stroke: rem(1) $highlight-color;
+  -webkit-text-stroke: px-to-rem(1) $highlight-color;
   color: $highlight-color;
 }
 
 .qx-calendar thead {
-  border-width: rem(1);
+  border-width: px-to-rem(1);
   border-style: solid;
   border-color: $border-color;
   font-weight: bold;
@@ -31,12 +31,12 @@
 }
 
 .qx-calendar thead td {
-  padding: rem(2) rem(6);
+  padding: px-to-rem(2) px-to-rem(6);
   width: 14.3%;
 }
 
 .qx-calendar td {
-  border-width: rem(1);
+  border-width: px-to-rem(1);
   border-style: solid;
   border-color: $border-color;
   background-color: $background-color;

package/source/resource/qx/website/scss/ui/_carousel.scss

@@ -1,11 +1,11 @@
-$carousel-pagination-size: rem(17);
+$carousel-pagination-size: px-to-rem(17);
 $carousel-pagination-background: rgba($background-color,0.6);
 $carousel-pagination-background-disabled: desaturate($highlight-color, 100%);
 $carousel-pagination-border-color: rgba($background-color,0.6);
 $carousel-pagination-active-background: $highlight-color;
 $carousel-pagination-active-border-color: $background-color;
 $carousel-pagination-border-radius: $carousel-pagination-size;
-$carousel-pagination-font-size:  rem(1);
+$carousel-pagination-font-size:  px-to-rem(1);
 
 .qx-carousel {
   overflow: hidden;
@@ -33,7 +33,7 @@ $carousel-pagination-font-size:  rem(1);
   transition: transform 2s;
 
   position: relative;
-  margin-top: -$carousel-pagination-size - rem(10);
+  margin-top: -$carousel-pagination-size - px-to-rem(10);
   padding-bottom: $carousel-pagination-size*0.5;
   width: 100%;
   white-space: nowrap;
@@ -50,7 +50,7 @@ $carousel-pagination-font-size:  rem(1);
   @include box-sizing(border-box);
   @include flex(0 0);
 
-  border: rem(1) solid $carousel-pagination-border-color;
+  border: px-to-rem(1) solid $carousel-pagination-border-color;
   text-align: center;
 
   display:inline-block;
@@ -72,6 +72,6 @@ $carousel-pagination-font-size:  rem(1);
 
 .qx-carousel-pagination-label.active {
   @include background($carousel-pagination-active-background);
-  border: rem(1) solid $carousel-pagination-active-border-color;
+  border: px-to-rem(1) solid $carousel-pagination-active-border-color;
   color: $carousel-pagination-active-background;
 }

package/source/resource/qx/website/scss/ui/_datepicker.scss

@@ -1,14 +1,14 @@
 .qx-datepicker {
-  font-size: rem(14);
-  height: rem(16);
+  font-size: px-to-rem(14);
+  height: px-to-rem(16);
 }
 
 .qx-datepicker-icon {
   cursor: pointer;
   vertical-align: top;
-  margin-left: rem(4);
-  width: rem(22);
-  height: rem(22);
+  margin-left: px-to-rem(4);
+  width: px-to-rem(22);
+  height: px-to-rem(22);
 }
 
 .qx-datepicker[disabled] + .qx-datepicker-icon {

package/source/resource/qx/website/scss/ui/_menu.scss

@@ -4,13 +4,13 @@
   z-index: 1000001;
   position: absolute;
   background-color: $background-color;
-  border: rem(1) solid $border-color;
-  padding: rem(0);
-  margin: rem(0);
+  border: px-to-rem(1) solid $border-color;
+  padding: px-to-rem(0);
+  margin: px-to-rem(0);
 }
 
 .qx-menu li {
-  padding: rem(6) rem(10);
+  padding: px-to-rem(6) px-to-rem(10);
   list-style-type: none;
   cursor: pointer;
 }

package/source/resource/qx/website/scss/ui/_rating.scss

@@ -4,13 +4,13 @@ $rating-background-off: 270deg, #eee, #cfcfcf;
 $rating-color-off: #cfcfcf;
 
 .qx-rating-item {
-  font-size: rem(22);
+  font-size: px-to-rem(22);
   background-image: -webkit-linear-gradient($rating-background);
   color: #E3B64A;
   @include background-clip(text);
   -webkit-text-fill-color: transparent;
-  -webkit-text-stroke: rem(1) #BB6718;
-  margin-right: rem(10);
+  -webkit-text-stroke: px-to-rem(1) #BB6718;
+  margin-right: px-to-rem(10);
   cursor: pointer;
 }
 
@@ -19,17 +19,17 @@ $rating-color-off: #cfcfcf;
   color: $rating-color-off;
   @include background-clip(text);
   -webkit-text-fill-color: transparent;
-  -webkit-text-stroke: rem(1) $rating-color-off;
+  -webkit-text-stroke: px-to-rem(1) $rating-color-off;
 }
 
 .qx-rating-item[disabled] {
   background-image: -webkit-linear-gradient($rating-background-disabled);
-  -webkit-text-stroke: rem(1) desaturate(#BB6718, 100%);
+  -webkit-text-stroke: px-to-rem(1) desaturate(#BB6718, 100%);
   color: desaturate(#D5771D, 100%);
 }
 
 .qx-rating-item.qx-rating-item-off[disabled] {
   background-image: -webkit-linear-gradient($rating-background-off);
-  -webkit-text-stroke: rem(1) desaturate($rating-color-off, 100%);
+  -webkit-text-stroke: px-to-rem(1) desaturate($rating-color-off, 100%);
   color: $rating-color-off;
 }