@qooxdoo/framework 7.6.1 → 7.6.2

package/source/resource/qx/mobile/scss/theme/flat/_styles.scss

@@ -24,10 +24,10 @@ $application-text-color: $color-1;
 // Button
 
 $button-text-color: $highlight-color;
-$button-font-size: rem(15);
+$button-font-size: px-to-rem(15);
 $button-font-weight: normal;
 $button-active-text-color: $color-5;
-$button-border-radius: rem(2);
+$button-border-radius: px-to-rem(2);
 $button-border-color: $color-3;
 $button-active-border-color: $highlight-color;
 $button-background: $color-5;
@@ -35,40 +35,40 @@ $button-active-background: $highlight-color;
 
 // Carousel
 
-$carousel-pagination-size: rem(10);
+$carousel-pagination-size: px-to-rem(10);
 $carousel-pagination-background: $color-5;
 $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(5);
+$checkbox-tick-size: px-to-rem(14);
+$checkbox-tick-width: px-to-rem(5);
 $checkbox-tick-shadow: rgba(0,0,0,0);
-$checkbox-border-radius: rem(2);
+$checkbox-border-radius: px-to-rem(2);
 $checkbox-border-color: $color-3;
 $checkbox-background: $color-4;
 
 // Collapsible
 
-$collapsible-border-radius: rem(3);
+$collapsible-border-radius: px-to-rem(3);
 $collapsible-header-border-color: $color-4;
 $collapsible-header-text-color: $highlight-color;
 $collapsible-header-active-text-color: $color-5;
 $collapsible-header-background: $color-5;
 $collapsible-header-active-background: $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: $color-5;
-$collapsible-arrow-size: rem(8);
+$collapsible-arrow-size: px-to-rem(8);
 $collapsible-arrow-color: $color-3;
 $collapsible-active-arrow-color: $color-5;
 
@@ -84,9 +84,9 @@ $dialog-border-color: $highlight-color;
 $dialog-background: $color-2;
 $dialog-arrow-up-color: $color-2;
 $dialog-arrow-down-color: $color-2;
-$dialog-arrow-size: rem(12);
-$dialog-arrow-position-offset: rem(16);
-$dialog-border-radius: rem(2);
+$dialog-arrow-size: px-to-rem(12);
+$dialog-arrow-position-offset: px-to-rem(16);
+$dialog-border-radius: px-to-rem(2);
 $dialog-title-text-color: $color-5;
 $dialog-font-weight: normal;
 
@@ -96,7 +96,7 @@ $form-background: $color-5;
 $form-title-text-color: $color-1;
 $form-label-text-color: $color-1;
 $form-border-color: $color-5;
-$form-border-radius: rem(2);
+$form-border-radius: px-to-rem(2);
 $form-font-weight: normal;
 
 // Group
@@ -104,13 +104,13 @@ $form-font-weight: normal;
 $group-background: $color-5;
 $group-border-color: $color-5;
 $group-title-text-color: $color-1;
-$group-border-radius: rem(2);
+$group-border-radius: px-to-rem(2);
 
 // Input
 
 $input-text-color: $color-1;
 $input-background: $color-5;
-$input-border-radius: rem(2);
+$input-border-radius: px-to-rem(2);
 $input-border-color: $color-3;
 $input-invalid-border-color: red;
 $input-active-border-color: $highlight-color;
@@ -119,22 +119,22 @@ $input-active-border-color: $highlight-color;
 
 $list-background: $color-5;
 $list-title-text-color: $color-1;
-$list-title-font-size: rem(17);
+$list-title-font-size: px-to-rem(17);
 $list-title-font-weight: normal;
 $list-subtitle-text-color: $highlight-color;
-$list-subtitle-font-size: rem(13);
+$list-subtitle-font-size: px-to-rem(13);
 $list-border-color: $color-4;
 $list-active-background: $highlight-color;
 $list-active-text-color: $color-5;
-$list-border-radius: rem(2);
-$list-arrow-size: rem(3);
-$list-arrow-thickness: rem(2);
+$list-border-radius: px-to-rem(2);
+$list-arrow-size: px-to-rem(3);
+$list-arrow-thickness: px-to-rem(2);
 $list-arrow-color: $color-2;
 $list-active-arrow-color: $color-5;
-$list-group-header-height: rem(30);
+$list-group-header-height: px-to-rem(30);
 $list-group-header-color: $color-2;
 $list-group-header-background: $color-5;
-$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: $highlight-color;
 
 // NavigationBar
 
-$navigationbar-height: rem(35);
+$navigationbar-height: px-to-rem(35);
 $navigationbar-background: $color-2;
-$navigationbar-text-size: rem(18);
+$navigationbar-text-size: px-to-rem(18);
 $navigationbar-text-color: $color-5;
-$navigationbar-padding: rem(4);
+$navigationbar-padding: px-to-rem(4);
 $navigationbar-font-weight: normal;
 
 // NavigationBar Button
 
-$navigationbarbutton-border-radius: rem(3);
+$navigationbarbutton-border-radius: px-to-rem(3);
 $navigationbarbutton-background: $color-5;
 $navigationbarbutton-border-color: rgba(0,0,0,0);
 $navigationbarbutton-text-color: $highlight-color;
@@ -172,20 +172,20 @@ $picker-spinning-wheel-overlay: rgba($background-color,1),rgba($background-color
 $picker-spinning-wheel-text-color: $color-1;
 $picker-spinning-wheel-background: $color-5;
 $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-3;
-$picker-spinning-wheel-divider-width: rem(1);
+$picker-spinning-wheel-divider-width: px-to-rem(1);
 
 // 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);
 $radiobutton-background: $color-4;
@@ -193,7 +193,7 @@ $radiobutton-border-color: $color-3;
 
 // SelectBox
 
-$selectbox-border-radius: rem(2);
+$selectbox-border-radius: px-to-rem(2);
 $selectbox-border-color: $color-3;
 $selectbox-text-color: $highlight-color;
 $selectbox-background: $color-4;
@@ -204,14 +204,14 @@ $selectbox-item-selected-background: $highlight-color;
 
 // Slider
 
-$slider-height: rem(6);
+$slider-height: px-to-rem(6);
 $slider-background: $color-4;
 $slider-active-area: $highlight-color;
-$slider-border-radius: rem(2);
+$slider-border-radius: px-to-rem(2);
 $slider-border-color: $color-5;
-$slider-knob-border-radius: rem(15);
-$slider-knob-width: rem(40);
-$slider-knob-height: rem(30);
+$slider-knob-border-radius: px-to-rem(15);
+$slider-knob-width: px-to-rem(40);
+$slider-knob-height: px-to-rem(30);
 $slider-knob-background: $color-5;
 $slider-knob-border-color: $color-3;
 $slider-shadow: rgba(0,0,0,0);
@@ -219,13 +219,13 @@ $slider-font-color: $highlight-color;
 
 // 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: $highlight-color,$highlight-color;
 $tabbar-active-border-color: $highlight-color;
@@ -233,24 +233,24 @@ $tabbar-inactive-background: $color-3;
 $tabbar-inactive-border-color: $color-3;
 $tabbar-active-text-color: $color-5;
 $tabbar-inactive-text-color: $color-5;
-$tabbar-border-radius: rem(2);
-$tabbar-button-distance: rem(4);
+$tabbar-border-radius: px-to-rem(2);
+$tabbar-button-distance: px-to-rem(4);
 
 // ToggleButton
 
-$togglebutton-width: rem(90);
-$togglebutton-height: rem(35);
-$togglebutton-border-radius: rem(30);
+$togglebutton-width: px-to-rem(90);
+$togglebutton-height: px-to-rem(35);
+$togglebutton-border-radius: px-to-rem(30);
 $togglebutton-border-color: $color-3;
 $togglebutton-text-color: $highlight-color;
 $togglebutton-background: $color-4;
 $togglebutton-active-background: $highlight-color;
 $togglebutton-knob-background: $color-5;
-$togglebutton-knob-width: rem(35);
+$togglebutton-knob-width: px-to-rem(35);
 $togglebutton-active-text-color: $color-5;
 $togglebutton-inset-shadow: rgba(0,0,0,0);
 $togglebutton-knob-shadow: rgba(0,0,0,0.4);
-$togglebutton-font-size: rem(12);
+$togglebutton-font-size: px-to-rem(12);
 $togglebutton-font-weight: normal;
 
 // Toolbar
@@ -260,6 +260,6 @@ $toolbar-background: $color-5;
 $toolbar-active-background: $highlight-color;
 $toolbar-active-text-color: $color-5;
 $toolbar-border-color: $color-3;
-$toolbar-border-radius: rem(2);
+$toolbar-border-radius: px-to-rem(2);
 $toolbar-font-weight: normal;
-$toolbar-padding:  rem(5);
+$toolbar-padding:  px-to-rem(5);

package/source/resource/qx/mobile/scss/theme/indigo/_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/mobile/scss/ui/_button.scss

@@ -8,7 +8,7 @@
   @include border-radius($button-border-radius);
 
   color: $button-text-color;
-  border: rem(1) solid $button-border-color;
+  border: px-to-rem(1) solid $button-border-color;
 
   cursor: pointer;
 
@@ -16,20 +16,20 @@
   font-size: $button-font-size;
   text-align: center;
 
-  padding-top: rem(2);
-  padding-bottom: rem(2);
-  padding-left: rem(20);
-  padding-right: rem(20);
+  padding-top: px-to-rem(2);
+  padding-bottom: px-to-rem(2);
+  padding-left: px-to-rem(20);
+  padding-right: px-to-rem(20);
 
-  height: rem(30);
-  line-height: rem(30);
+  height: px-to-rem(30);
+  line-height: px-to-rem(30);
   width: auto;
 }
 
 .button.active {
   @include background($button-active-background);
   color:  $button-active-text-color;
-  border: rem(1) solid $button-active-border-color;
+  border: px-to-rem(1) solid $button-active-border-color;
 }
 
 .button .label {

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

@@ -46,7 +46,7 @@
   @include background($carousel-pagination-background);
   @include box-sizing(border-box);
 
-  border: rem(1) solid $carousel-pagination-border-color;
+  border: px-to-rem(1) solid $carousel-pagination-border-color;
   text-align: center;
 
   display:inline-block;
@@ -62,5 +62,5 @@
 
 .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;
 }

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

@@ -16,7 +16,7 @@
   text-align:center;
 
   position:relative;
-  border: rem(1) solid $checkbox-border-color;
+  border: px-to-rem(1) solid $checkbox-border-color;
   box-sizing:border-box;
 }
 
@@ -26,7 +26,7 @@
 
 .checkbox:after {
   @include transform(rotate(-45deg));
-  @include box-shadow(rem(-1) rem(1) rem(1) 0px $checkbox-tick-shadow);
+  @include box-shadow(px-to-rem(-1) px-to-rem(1) px-to-rem(1) 0px $checkbox-tick-shadow);
 
   box-sizing: content-box;
 

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

@@ -1,6 +1,6 @@
 .collapsible-content {
   @include background($collapsible-content-background-color);
-  border: rem(1) solid $collapsible-content-border-color;
+  border: px-to-rem(1) solid $collapsible-content-border-color;
   overflow: hidden;
 }
 
@@ -14,12 +14,12 @@
 
 .collapsible.combined .collapsible-content {
   @include border-radius-bottom($collapsible-border-radius);
-  padding: $collapsible-content-padding; 
+  padding: $collapsible-content-padding;
 }
 
 .collapsible.combined:not(.collapsed) .collapsible-content {
   border-top: 0px solid transparent;
-} 
+}
 
 .collapsible:not(.combined) .collapsible-header {
   @include border-radius($collapsible-border-radius);
@@ -35,7 +35,7 @@
   @include background($collapsible-header-background);
   position:relative;
   padding: $collapsible-header-padding;
-  border: rem(1) solid $collapsible-header-border-color;
+  border: px-to-rem(1) solid $collapsible-header-border-color;
 }
 
 .collapsible-header:not(.active) {
@@ -49,13 +49,13 @@
 
 .collapsible.collapsed .collapsible-header.label:after {
   @include triangle-down($collapsible-arrow-size,$collapsible-arrow-color);
-  
+
   position: absolute;
   top: 50%;
   right: $collapsible-header-padding;
   margin-top:-1*($collapsible-arrow-size)*0.5;
   display:block;
-  content: ""; 
+  content: "";
 }
 
 .collapsible.collapsed .collapsible-header.active.label:after {
@@ -70,7 +70,7 @@
   right: $collapsible-header-padding;
   margin-top:-1*($collapsible-arrow-size)*0.5;
   display:block;
-  content: ""; 
+  content: "";
 }
 
 .collapsible:not(.collapsed) .collapsible-header.active.label:after {