@qooxdoo/framework 7.6.1 → 7.6.3

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 {

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