@qooxdoo/framework 7.6.1 → 7.6.3

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;
 }

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

@@ -10,7 +10,7 @@ $slider-knob-background-active : darken(#F7F7F7, 25%), darken(#E8E8E8, 25%);
   overflow-y: visible;
   overflow-x: visible;
   cursor: pointer;
-  padding: 0 rem(18);
+  padding: 0 px-to-rem(18);
 }
 
 .qx-slider:before {
@@ -18,12 +18,12 @@ $slider-knob-background-active : darken(#F7F7F7, 25%), darken(#E8E8E8, 25%);
   content: '';
   width: 100%;
   line-height: 0.3;
-  border: rem(1) solid $slider-border;
+  border: px-to-rem(1) solid $slider-border;
   display: inline-block;
-  @include border-radius(rem(3));
+  @include border-radius(px-to-rem(3));
   @include background($slider-background);
-  top: rem(26);
-  height: rem(7);
+  top: px-to-rem(26);
+  height: px-to-rem(7);
   @include box-sizing(border-box);
 }
 
@@ -34,15 +34,15 @@ $slider-knob-background-active : darken(#F7F7F7, 25%), darken(#E8E8E8, 25%);
 
   @include user-select(none);
 
-  width: rem(36);
-  height: rem(36);
+  width: px-to-rem(36);
+  height: px-to-rem(36);
 
   font-weight: bold;
   text-align: center;
 
-  border: rem(1) solid $slider-border;
+  border: px-to-rem(1) solid $slider-border;
   @include background($slider-knob-background);
-  @include border-radius(rem(60));
+  @include border-radius(px-to-rem(60));
 
   line-height: 0;
   padding: 0;
@@ -54,12 +54,12 @@ $slider-knob-background-active : darken(#F7F7F7, 25%), darken(#E8E8E8, 25%);
 }
 
 .qx-slider[disabled]:before {
-  border: rem(1) solid lighten($slider-border, 40%);
+  border: px-to-rem(1) solid lighten($slider-border, 40%);
   @include background($slider-background-disabled);
 }
 
 .qx-slider-knob[disabled] {
-  border: rem(1) solid lighten($slider-border, 30%);
+  border: px-to-rem(1) solid lighten($slider-border, 30%);
   @include background($slider-knob-background-disabled);
   color: lighten($slider-border, 25%);
 }

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

@@ -27,8 +27,8 @@
   outline: none;
   cursor: pointer;
   background-color: transparent;
-  padding: rem(8) rem(12);
-  font-size: rem(13);
+  padding: px-to-rem(8) px-to-rem(12);
+  font-size: px-to-rem(13);
 }
 
 .qx-tabs .qx-tabs-button > button:focus,
@@ -58,7 +58,7 @@
 
 .qx-tabs .qx-tabs-page,
 .qx-accordion .qx-accordion-page {
-  padding: rem(10);
+  padding: px-to-rem(10);
   @include user-select(text);
   background-color: white;
 }
@@ -66,43 +66,43 @@
 // horizontal orientation:
 
 .qx-tabs-horizontal > ul > .qx-tabs-button:first-child {
-  margin-left: rem(0);
+  margin-left: px-to-rem(0);
 }
 
 .qx-tabs-horizontal > ul > .qx-tabs-button {
-  margin-bottom: rem(-1);
-  margin-left: rem(3);
-  border: rem(1) solid transparent;
+  margin-bottom: px-to-rem(-1);
+  margin-left: px-to-rem(3);
+  border: px-to-rem(1) solid transparent;
 }
 
 .qx-tabs-horizontal > ul > .qx-tabs-button-active {
-  border: rem(1) solid $border-color;
-  @include border-radius(rem(2) rem(2) 0 0);
+  border: px-to-rem(1) solid $border-color;
+  @include border-radius(px-to-rem(2) px-to-rem(2) 0 0);
 }
 
 .qx-tabs-horizontal > ul > .qx-tabs-button-active:after {
   display: block;
   position: relative;
-  top: rem(1);
+  top: px-to-rem(1);
   content: " ";
   background-color: $background-color;
   width: 100%;
-  height: rem(1);
+  height: px-to-rem(1);
 }
 
 .qx-tabs-horizontal > ul > .qx-tabs-button:hover {
-  border-bottom: rem(1) solid $border-color;
-  @include border-radius(rem(2) rem(2) 0 0);
+  border-bottom: px-to-rem(1) solid $border-color;
+  @include border-radius(px-to-rem(2) px-to-rem(2) 0 0);
 }
 
 .qx-tabs-horizontal > ul > .qx-tabs-button-active:hover {
-  border: rem(1) solid $border-color;
-  border-bottom: rem(1) solid $background-color;
+  border: px-to-rem(1) solid $border-color;
+  border-bottom: px-to-rem(1) solid $background-color;
 }
 
 .qx-tabs-horizontal > .qx-tabs-container {
   clear: both;
-  border: rem(1) solid $border-color;
+  border: px-to-rem(1) solid $border-color;
 }
 
 .qx-tabs-horizontal > ul > .qx-tabs-button.qx-flex1 {
@@ -124,7 +124,7 @@
   text-align: center;
   border-bottom-color: transparent;
   position: relative;
-  @include transform(translate(0,rem(1.2)));
+  @include transform(translate(0,px-to-rem(1.2)));
 }
 
 .qx-tabs-horizontal.qx-tabs-justify > ul > .qx-tabs-button {
@@ -140,15 +140,15 @@
 
 .qx-tabs-vertical,
 .qx-accordion-vertical {
-  border-right: rem(1) solid $border-color;
-  border-bottom: rem(1) solid $border-color;
-  border-left: rem(1) solid $border-color;
+  border-right: px-to-rem(1) solid $border-color;
+  border-bottom: px-to-rem(1) solid $border-color;
+  border-left: px-to-rem(1) solid $border-color;
 }
 
 .qx-tabs-vertical .qx-tabs-button,
 .qx-accordion-vertical .qx-accordion-button {
   margin-left: 0;
-  border-top: rem(1) solid $border-color;
+  border-top: px-to-rem(1) solid $border-color;
 }
 
 .qx-tabs-vertical .qx-tabs-button > button,
@@ -163,6 +163,6 @@
 .qx-accordion-vertical .qx-accordion-page {
   overflow: hidden;
   @include box-sizing(border-box);
-  padding: rem(8) rem(12);
+  padding: px-to-rem(8) px-to-rem(12);
   @include transition(height 500ms, padding-top 500ms, padding-bottom 500ms, margin-top 500ms, margin-bottom 500ms);
 }