@qooxdoo/framework 7.6.1 → 7.6.2

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

@@ -10,7 +10,7 @@
 
 .drawer.below {
   @include background($drawer-below-background);
-  @include box-inset-shadow(0px 0px rem(10) rem(5) rgba(0,0,0,0.35));
+  @include box-inset-shadow(0px 0px px-to-rem(10) px-to-rem(5) rgba(0,0,0,0.35));
   z-index:-1;
 }
 
@@ -63,23 +63,23 @@
 }
 
 .drawer.above:not(.master-detail-master):not(.hidden) {
-  @include box-shadow(0px 0px rem(10) rem(5) rgba(0,0,0,0.5));
+  @include box-shadow(0px 0px px-to-rem(10) px-to-rem(5) rgba(0,0,0,0.5));
 }
 
 .drawer.top:not(.master-detail-master) {
-  border-bottom:rem(1) solid $drawer-border-color;
+  border-bottom:px-to-rem(1) solid $drawer-border-color;
 }
 
 .drawer.left:not(.master-detail-master) {
-  border-right:rem(1) solid $drawer-border-color;
+  border-right:px-to-rem(1) solid $drawer-border-color;
 }
 
 .drawer.right:not(.master-detail-master) {
-  border-left:rem(1) solid $drawer-border-color;
+  border-left:px-to-rem(1) solid $drawer-border-color;
 }
 
 .drawer.bottom:not(.master-detail-master) {
-  border-top:rem(1) solid $drawer-border-color;
+  border-top:px-to-rem(1) solid $drawer-border-color;
 }
 
 // Hide drawer when NavigationPage is animated

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

@@ -4,7 +4,7 @@
 
 .form {
   @include background-clip(padding-box);
-  margin-bottom: rem(10);
+  margin-bottom: px-to-rem(10);
   background-color:transparent;
   border: none;
   padding: 0;
@@ -13,10 +13,10 @@
 
 .form-row {
   list-style-type: none;
-  padding: rem(5) rem(0) rem(5) rem(0);
+  padding: px-to-rem(5) px-to-rem(0) px-to-rem(5) px-to-rem(0);
 
   label {
-    padding-right: rem(10);
+    padding-right: px-to-rem(10);
   }
 
   * {
@@ -38,22 +38,22 @@
 }
 
 .form-row.qx-vbox * + * {
-  margin-top: rem(10);
+  margin-top: px-to-rem(10);
 }
 
 .text-area {
   @include background-clip(padding-box);
   @include background($input-background);
   @include border-radius($input-border-radius);
-  border: rem(1) solid $input-border-color;
+  border: px-to-rem(1) solid $input-border-color;
   resize: none;
   outline: none;
 
   width:100%;
-  height: rem(150);
-  min-height: rem(150);
+  height: px-to-rem(150);
+  min-height: px-to-rem(150);
 
-  padding:rem(10);
+  padding:px-to-rem(10);
   box-sizing:border-box;
 
   color:  $input-text-color;
@@ -61,10 +61,10 @@
 
 .form-row-scroll {
   @include border-radius($input-border-radius);
-  border: rem(1) solid $input-border-color;
+  border: px-to-rem(1) solid $input-border-color;
 
   overflow:hidden !important;
-  height: rem(150);
+  height: px-to-rem(150);
   width: 100%;
 
   .text-area {
@@ -83,24 +83,24 @@
 .form-title {
   color: $group-title-text-color;
   font-weight: normal;
-  line-height: rem(20);
-  font-size: rem(16);
-  text-indent: rem(5);
-  margin-top: rem(10);
-  margin-bottom: rem(10);
+  line-height: px-to-rem(20);
+  font-size: px-to-rem(16);
+  text-indent: px-to-rem(5);
+  margin-top: px-to-rem(10);
+  margin-bottom: px-to-rem(10);
 }
 
 .form-separation-row {
   padding: 0px;
   background-color: $form-border-color;
-  height: rem(1);
+  height: px-to-rem(1);
 }
 
 .form-element-error {
   color: red;
   text-align: right;
   border-top: 0;
-  padding: 0px rem(10) rem(10) rem(10);
+  padding: 0px px-to-rem(10) px-to-rem(10) px-to-rem(10);
 }
 
 .form-row-group-title {
@@ -112,18 +112,18 @@
 .form.single-placeholder {
   @include background($form-background);
   @include border-radius($form-border-radius);
-  border:rem(1) solid $form-border-color;
-  padding: rem(10);
+  border:px-to-rem(1) solid $form-border-color;
+  padding: px-to-rem(10);
 
   .form-row-group-title {
     font-weight: $form-font-weight;
-    padding: rem(0) rem(0) rem(10) rem(0);
+    padding: px-to-rem(0) px-to-rem(0) px-to-rem(10) px-to-rem(0);
   }
 
   .form-row {
     .slider  {
       width: 50%;
-      margin-left: rem(20);
+      margin-left: px-to-rem(20);
     }
   }
 }
@@ -137,13 +137,13 @@
   }
 
   .form-row-group-title {
-    padding: rem(10) rem(10) rem(10) rem(10);
+    padding: px-to-rem(10) px-to-rem(10) px-to-rem(10) px-to-rem(10);
   }
 
   .form-row-content, .form-element-error {
     @include background($form-background);
-    border-left:rem(1) solid $form-border-color;
-    border-right:rem(1) solid $form-border-color;
+    border-left:px-to-rem(1) solid $form-border-color;
+    border-right:px-to-rem(1) solid $form-border-color;
   }
 
   .form-row-content .label {
@@ -152,7 +152,7 @@
 
   .form-row-content {
     border-top: 0;
-    padding: rem(10) rem(10) rem(10) rem(10);
+    padding: px-to-rem(10) px-to-rem(10) px-to-rem(10) px-to-rem(10);
   }
 
   .form-row-content + .form-row-content {
@@ -166,30 +166,30 @@
 }
 
 .form-row-group-title:nth-child(n+2) {
-  margin-top: rem(20);
+  margin-top: px-to-rem(20);
 }
 
 .form-row-group-first,
 .form-row-group-last {
   @include background($form-background);
   height: 0px;
-  padding: rem(2);
+  padding: px-to-rem(2);
   position: relative;
 }
 
 .form-row-group-first {
   @include border-radius-top($form-border-radius);
-  border-top: rem(1) solid $form-border-color;
-  border-left: rem(1) solid $form-border-color;
-  border-right: rem(1) solid $form-border-color;
-  top: rem(2);
+  border-top: px-to-rem(1) solid $form-border-color;
+  border-left: px-to-rem(1) solid $form-border-color;
+  border-right: px-to-rem(1) solid $form-border-color;
+  top: px-to-rem(2);
 }
 
 .form-row-group-last {
   @include border-radius-bottom($form-border-radius);
   border-top: 0px transparent;
-  border-bottom: rem(1) solid $form-border-color;
-  border-left: rem(1) solid $form-border-color;
-  border-right: rem(1) solid $form-border-color;
-  top: rem(-2);
+  border-bottom: px-to-rem(1) solid $form-border-color;
+  border-left: px-to-rem(1) solid $form-border-color;
+  border-right: px-to-rem(1) solid $form-border-color;
+  top: px-to-rem(-2);
 }

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

@@ -4,12 +4,12 @@
 
 .mobile {
   input.invalid {
-    border: rem(1) solid $input-invalid-border-color !important;
+    border: px-to-rem(1) solid $input-invalid-border-color !important;
   }
 
   input:focus
   {
-    @include box-shadow(rem(0) rem(0) rem(2) rem(1) $input-active-border-color);
+    @include box-shadow(px-to-rem(0) px-to-rem(0) px-to-rem(2) px-to-rem(1) $input-active-border-color);
   }
 
   input, select {
@@ -18,27 +18,27 @@
 
   input, select, .text-area {
     font-family: $application-font;
-    font-size: rem(15);
+    font-size: px-to-rem(15);
   }
 }
 
 .text-field, .number-field, .password-field {
   @include background-clip(padding-box);
   @include box-sizing(border-box);
-  text-indent: rem(4);
-  height: rem(26);
+  text-indent: px-to-rem(4);
+  height: px-to-rem(26);
 }
 
 .text-field, .password-field, .number-field {
   @include border-radius($input-border-radius);
   @include background($input-background);
 
-  border: rem(1) solid $input-border-color;
+  border: px-to-rem(1) solid $input-border-color;
   color:  $input-text-color;
   width: 100%;
   outline: none;
 }
 
 .text-field.invalid, .checkbox.invalid, .radio.invalid, .password-field.invalid, .text-area.invalid {
-  border: rem(1) solid $input-invalid-border-color !important;
+  border: px-to-rem(1) solid $input-invalid-border-color !important;
 }

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

@@ -17,11 +17,11 @@
 .list-item {
   @include background($list-background);
   list-style-type: none;
-  padding: rem(10) rem(25) rem(10) rem(10);
+  padding: px-to-rem(10) px-to-rem(25) px-to-rem(10) px-to-rem(10);
   position: relative;
   color: $list-title-text-color;
-  border: rem(1) solid $list-border-color;
-  margin-top: rem(-1);
+  border: px-to-rem(1) solid $list-border-color;
+  margin-top: px-to-rem(-1);
   z-index:0;
 }
 
@@ -50,7 +50,7 @@
   height: $list-arrow-size*2;
 
   position: absolute;
-  right: rem(16);
+  right: px-to-rem(16);
   top: 50%;
   margin-top: -1.5*($list-arrow-size);
 }
@@ -61,7 +61,7 @@
 
 .list-item:first-child, .list-item:first-child a {
   @include border-radius-top($list-border-radius);
-  border-top: rem(1) solid $list-border-color;
+  border-top: px-to-rem(1) solid $list-border-color;
 }
 
 .list-item:last-child, .list-item:last-child a {
@@ -81,7 +81,7 @@
 }
 
 .list-item-image {
-  margin-right: rem(8);
+  margin-right: px-to-rem(8);
 }
 
 .group-item {
@@ -90,7 +90,7 @@
   @include background-clip(padding-box);
   @include sticky(0px);
 
-  padding: rem(5) rem(25) rem(5) rem(10);
+  padding: px-to-rem(5) px-to-rem(25) px-to-rem(5) px-to-rem(10);
   height: $list-group-header-height;
   line-height: $list-group-header-height;
   color: $list-group-header-color;
@@ -103,7 +103,7 @@
 }
 
 .group-item-image {
-  margin-right: rem(8);
+  margin-right: px-to-rem(8);
 }
 
 // Special treatment of first group-item because of border-radius and sticky position.

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

@@ -19,7 +19,7 @@
 }
 
 .content:not(.group) .form-title {
-  text-indent:rem(15);
+  text-indent:px-to-rem(15);
 }
 
 .root, .scroll {
@@ -28,30 +28,30 @@
 }
 
 .group {
-  padding: rem(10);
+  padding: px-to-rem(10);
 }
 
 .group.bordered {
   @include border-radius($group-border-radius);
   @include background($group-background);
 
-  border: rem(1) solid $group-border-color;
-  margin: rem(10);
+  border: px-to-rem(1) solid $group-border-color;
+  margin: px-to-rem(10);
 }
 
 .qx-hbox:not(.qx-flex-reverse) > .gap:not(.exclude) + .gap {
-  margin-left: rem(5);
+  margin-left: px-to-rem(5);
 }
 
 div:not(.qx-hbox):not(.qx-flex-reverse) > .gap:not(.exclude) + .gap {
-  margin-top: rem(5);
+  margin-top: px-to-rem(5);
 }
 
 .qx-hbox.qx-flex-reverse > .gap:not(.exclude) + .gap {
-  margin-right: rem(5);
+  margin-right: px-to-rem(5);
 }
 
 div:not(.qx-hbox).qx-flex-reverse > .gap:not(.exclude) + .gap {
-  margin-bottom: rem(5);
+  margin-bottom: px-to-rem(5);
 }
 

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

@@ -15,21 +15,21 @@
 }
 
 .master-detail-master.right {
-  border-left: rem(1) solid $navigationpage-border-color;
+  border-left: px-to-rem(1) solid $navigationpage-border-color;
 }
 
 .master-detail-master.left {
-  border-right: rem(1) solid $navigationpage-border-color;
+  border-right: px-to-rem(1) solid $navigationpage-border-color;
 }
 
 .master-detail-master.top {
-  border-bottom: rem(1) solid $navigationpage-border-color;
+  border-bottom: px-to-rem(1) solid $navigationpage-border-color;
 }
 
 .master-detail-master.bottom {
-  border-top: rem(1) solid $navigationpage-border-color;
+  border-top: px-to-rem(1) solid $navigationpage-border-color;
 }
 
 .root.portrait .master-detail-master:not(.hidden) {
-  @include box-shadow(0px 0px rem(10) rem(5) rgba(0,0,0,0.5));
+  @include box-shadow(0px 0px px-to-rem(10) px-to-rem(5) rgba(0,0,0,0.5));
 }

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

@@ -1,10 +1,10 @@
 //
 // MENU
-// 
+//
 
 .menu {
   @extend .popup;
-  min-width: rem(140);
+  min-width: px-to-rem(140);
 }
 
 

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

@@ -1,5 +1,5 @@
 //
-// NAVIGATIONBAR 
+// NAVIGATIONBAR
 //
 
 .navigationbar {
@@ -9,16 +9,16 @@
 
   min-height: $navigationbar-height;
   height: $navigationbar-height;
-  color: $navigationbar-text-color; 
+  color: $navigationbar-text-color;
 
-  padding-left: rem(16);
-  padding-right: rem(16);
+  padding-left: px-to-rem(16);
+  padding-right: px-to-rem(16);
   position: relative;
 
   z-index:1;
 }
 
-// Fix for WP8 rendering problem on drawer. 
+// Fix for WP8 rendering problem on drawer.
 .root:not(.android):not(.ios) {
   outline: 1px solid rgba(0,0,0,0);
 }
@@ -43,20 +43,20 @@
   display:block;
 
   color: $navigationbarbutton-text-color;
-  border: rem(1) solid $navigationbarbutton-border-color;
+  border: px-to-rem(1) solid $navigationbarbutton-border-color;
 
   text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;
   font-weight: $navigationbarbutton-font-weight;
-  font-size: rem(12);
+  font-size: px-to-rem(12);
 
-  padding-left: rem(5);
-  padding-right: rem(5);
+  padding-left: px-to-rem(5);
+  padding-right: px-to-rem(5);
 
   height: $navigationbar-height - $navigationbar-padding * 2;
 
-  min-width: rem(50);
+  min-width: px-to-rem(50);
 }
 
 .left-container, .right-container {
@@ -71,6 +71,6 @@
 .navigationbar-button.active, .navigationbar-backbutton.active {
   @include background($navigationbarbutton-active-background);
   color: $navigationbarbutton-active-text-color;
-  border: rem(1) solid $navigationbarbutton-active-border-color;
+  border: px-to-rem(1) solid $navigationbarbutton-active-border-color;
 }
 

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

@@ -10,7 +10,7 @@
 
   .list-item {
     @include border-radius(0);
-    padding: rem(10);
+    padding: px-to-rem(10);
     border-top: none;
     border-bottom: none;
     border: none;
@@ -128,9 +128,9 @@
     white-space: nowrap;
     font-size: $picker-label-font-size;
     line-height: $picker-label-height;
-    padding-left: rem(5);
-    padding-right: rem(5);
-    
+    padding-left: px-to-rem(5);
+    padding-right: px-to-rem(5);
+
     top: -$picker-label-height * 0.5;
   }
 
@@ -154,7 +154,7 @@
     background-color:transparent !important;
     background-size: 100% $picker-height;
 
-    
+
     width: 100%;
     height: 100%;
     z-index: 1000;
@@ -168,12 +168,12 @@
     border-right:  $picker-spinning-wheel-divider-width solid $picker-spinning-wheel-divider-color;
   }
 
-  // Selected Area Overlay 
+  // Selected Area Overlay
   .picker-container:before {
     @include pointer-none();
 
     content:"";
-    
+
     position:absolute;
     width:100%;
     z-index:1001;
@@ -181,7 +181,7 @@
     top: $picker-height*0.5;
     left: 0px;
 
-    height: $picker-label-height; 
+    height: $picker-label-height;
     margin-top: -($picker-label-height*0.5) - ($picker-highlight-border-width);
 
     border-top:  $picker-highlight-border-width solid $picker-highlight-color;

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

@@ -2,7 +2,7 @@
 // POPUP
 //
 
-$dialog-arrow-space: rem(2);
+$dialog-arrow-space: px-to-rem(2);
 
 .popup {
   @include background($dialog-background);
@@ -11,7 +11,7 @@ $dialog-arrow-space: rem(2);
 
   position: absolute;
   width: auto;
-  padding: rem(6);
+  padding: px-to-rem(6);
   max-width: 90%;
   z-index: 101;
   clear: both;
@@ -19,8 +19,8 @@ $dialog-arrow-space: rem(2);
   // Fallback if no gradient could be set.
   background-color: nth($dialog-background,1);
 
-  border: rem(2) solid $dialog-border-color;
-  color: $dialog-title-text-color; 
+  border: px-to-rem(2) solid $dialog-border-color;
+  color: $dialog-title-text-color;
 }
 
 .anchor-target {
@@ -28,18 +28,18 @@ $dialog-arrow-space: rem(2);
 }
 
 .root.ios .popup {
-  -webkit-filter: drop-shadow(0 rem(2) rem(7) rgba(0,0,0,0.5));
+  -webkit-filter: drop-shadow(0 px-to-rem(2) px-to-rem(7) rgba(0,0,0,0.5));
 }
 
 .root:not(.ios) .popup {
-  @include box-shadow(0px rem(2) rem(7) 0px rgba(0,0,0,0.5));
+  @include box-shadow(0px px-to-rem(2) px-to-rem(7) 0px rgba(0,0,0,0.5));
 }
 
 .popup-title {
   font-weight: $dialog-font-weight;
-  font-size: rem(16);
-  margin-bottom: rem(3);
-} 
+  font-size: px-to-rem(16);
+  margin-bottom: px-to-rem(3);
+}
 
 .popup-content {
   height : 100%;
@@ -87,7 +87,7 @@ $dialog-arrow-space: rem(2);
 }
 
 .anchor.top.left:before {
-  top:-($dialog-arrow-size + rem(3));
+  top:-($dialog-arrow-size + px-to-rem(3));
   left: $dialog-arrow-position-offset;
 }
 
@@ -97,7 +97,7 @@ $dialog-arrow-space: rem(2);
 }
 
 .anchor.bottom.left:before {
-  bottom:-($dialog-arrow-size + rem(3));
+  bottom:-($dialog-arrow-size + px-to-rem(3));
   left: $dialog-arrow-position-offset;
 }
 
@@ -108,7 +108,7 @@ $dialog-arrow-space: rem(2);
 
 .anchor.top.right:before {
   right: $dialog-arrow-position-offset;
-  top:-($dialog-arrow-size + rem(3));
+  top:-($dialog-arrow-size + px-to-rem(3));
 }
 
 .anchor.top.right:after {
@@ -117,11 +117,11 @@ $dialog-arrow-space: rem(2);
 }
 
 .anchor.bottom.right:before {
-  bottom:-($dialog-arrow-size + rem(3));
+  bottom:-($dialog-arrow-size + px-to-rem(3));
   right: $dialog-arrow-position-offset;
 }
 
 .anchor.bottom.right:after {
   bottom: -($dialog-arrow-size);
   right: $dialog-arrow-position-offset + $dialog-arrow-space;
-} 
+}

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

@@ -9,14 +9,14 @@
   height: $radiobutton-size;
   min-width: $radiobutton-size;
   min-height: $radiobutton-size;
-  border: rem(1) solid $radiobutton-border-color;
+  border: px-to-rem(1) solid $radiobutton-border-color;
 
   text-align: center;
   position: relative;
 
   z-index: 1;
 
-  margin: rem(2) auto;
+  margin: px-to-rem(2) auto;
 
   box-sizing: border-box;
 }
@@ -24,7 +24,7 @@
 // Color dot
 .radio:after {
   @include border-radius($radiobutton-size);
-  @include box-shadow(rem(1) rem(1)  rem(1) 0 $radiobutton-dot-shadow);
+  @include box-shadow(px-to-rem(1) px-to-rem(1)  px-to-rem(1) 0 $radiobutton-dot-shadow);
 
   position: absolute;
   display: block;

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

@@ -15,11 +15,11 @@
   cursor:pointer;
 
   vertical-align:middle;
-  height: rem(32);
+  height: px-to-rem(32);
 
-  text-indent: rem(5);
+  text-indent: px-to-rem(5);
 
-  border: rem(1) solid $selectbox-border-color;
+  border: px-to-rem(1) solid $selectbox-border-color;
   color: $selectbox-text-color;
 }