@qooxdoo/framework 7.6.1 → 7.6.2

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

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

@@ -1,48 +1,48 @@
 .qx-toolbar {
   overflow: hidden;
-  border-bottom: rem(1) solid rgb(187, 187, 187);
-  border-top: rem(1) solid rgb(187, 187, 187);
-  padding: rem(7);
+  border-bottom: px-to-rem(1) solid rgb(187, 187, 187);
+  border-top: px-to-rem(1) solid rgb(187, 187, 187);
+  padding: px-to-rem(7);
   @include box-sizing(border-box);
   width: 100%;
   background-color: #F7F7F7;
 }
 
-@media all and (max-width: rem(850)) {
+@media all and (max-width: px-to-rem(850)) {
   .qx-toolbar {
-    padding: rem(0);
+    padding: px-to-rem(0);
   }
 
   .qx-toolbar .qx-button {
     display: block;
     width: 100%;
     background: none;
-    border: rem(0);
-    border-top: rem(1) solid rgb(187, 187, 187);
+    border: px-to-rem(0);
+    border-top: px-to-rem(1) solid rgb(187, 187, 187);
   }
 
   .qx-toolbar .qx-button-disabled {
     display: block;
     width: 100%;
-    border: rem(0) !important;
+    border: px-to-rem(0) !important;
     background-image: none !important;
-    border-top: rem(1) solid rgb(187, 187, 187) !important;
+    border-top: px-to-rem(1) solid rgb(187, 187, 187) !important;
   }
 
   .qx-toolbar .qx-button:hover {
-    border: rem(0) solid rgb(147, 147, 147);
+    border: px-to-rem(0) solid rgb(147, 147, 147);
     text-decoration: underline;
-    border-top: rem(1) solid rgb(187, 187, 187);
+    border-top: px-to-rem(1) solid rgb(187, 187, 187);
   }
 
   .qx-toolbar .qx-button:active {
-    border: rem(0);
+    border: px-to-rem(0);
     background-color: transparent;
     background-image: none;
-    border-top: rem(1) solid rgb(187, 187, 187);
+    border-top: px-to-rem(1) solid rgb(187, 187, 187);
   }
 
   .qx-toolbar .qx-button:focus {
-    border: rem(0);
+    border: px-to-rem(0);
   }
 }