Upgrade form & input elements to use newer flex box model.

Fixes dankurka#62 dankurka#60
ankon · Aug 17, 2014 · 4ba97e0 · 4ba97e0
1 parent a69003f
commit 4ba97e0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 50 deletions.
diff --git a/src/main/java/com/googlecode/mgwt/ui/client/widget/form/form.css b/src/main/java/com/googlecode/mgwt/ui/client/widget/form/form.css
@@ -14,44 +14,41 @@
   width: 100%;
 }
 
-.mgwt-Form-Entry {
-  position: relative;
-  list-style-type: none;
-  display: block;
-  overflow: hidden;
-  width: auto;
-}
-
 .mgwt-Form-round {
   margin: 12px;
 }
 
-.mgwt-Form-Entry-first {
-}
-
-.mgwt-Form-Entry-last {
-}
-
-.mgwt-Form-Entry{
-}
-
-
 @if user.agent safari {
   .mgwt-Form-Entry {
-    display: -webkit-box;
+    display: -webkit-box; /* iOS < 7 && Android < 4.4*/
+    display: -webkit-flex;
+    -webkit-box-pack: center; /* iOS < 7 && Android < 4.4*/
+    -webkit-justify-content: center;
   }
 }
 
 @if user.agent gecko1_8 {
   .mgwt-Form-Entry {
     width: 100%;
+    -moz-justify-content: center;
+    display: -moz-box;
+    display: -ms-flexbox; /* IE is in FF permutation */
   }
 }
 
-.mgwt-Form-Entry-label {
-  padding: 10px;
-  overflow:hidden;
-  text-overflow: ellipsis;
+.mgwt-Form-Entry {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  list-style-type: none;
+  overflow: hidden;
+  width: auto;
+}
+
+.mgwt-Form-Entry-first {
+}
+
+.mgwt-Form-Entry-last {
 }
 
 @if user.agent safari {
@@ -67,11 +64,15 @@
   }
 }
 
-.mgwt-Form-Entry-container {
+.mgwt-Form-Entry-label {
   padding: 10px;
-  background-color: #e5e9e8;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  display: flex;
 }
 
+
+
 @if user.agent safari {
   .mgwt-Form-Entry-container {
     -webkit-box-flex: 1;
@@ -88,6 +89,14 @@
   }
 }
 
+.mgwt-Form-Entry-container {
+  padding: 10px;
+  background-color: #e5e9e8;
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+}
+
 .mgwt-Form-Entry-invalid{}
 
 .mgwt-Form-Entry {

diff --git a/src/main/java/com/googlecode/mgwt/ui/client/widget/input/input.css b/src/main/java/com/googlecode/mgwt/ui/client/widget/input/input.css
@@ -5,8 +5,8 @@
 
 
 @if user.agent safari {
-  .mgwt-TextBox .mgwt-InputBox-box,.mgwt-PasswordTextBox,
-  .mgwt-InputBox-box,.mgwt-TextArea .mgwt-InputBox-box {
+  .mgwt-TextBox, .mgwt-InputBox-box, .mgwt-PasswordTextBox,
+  .mgwt-InputBox-box, .mgwt-TextArea, .mgwt-InputBox-box {
     display: -webkit-box;
     -webkit-box-flex: 1;
     -webkit-appearance: none;
@@ -17,45 +17,28 @@
 }
 
 @if user.agent gecko1_8 {
-  .mgwt-TextBox .mgwt-InputBox-box,.mgwt-PasswordTextBox,
-  .mgwt-InputBox-box,.mgwt-TextArea, .mgwt-InputBox-box {
+  .mgwt-TextBox, .mgwt-InputBox-box, .mgwt-PasswordTextBox,
+  .mgwt-InputBox-box, .mgwt-TextArea, .mgwt-InputBox-box {
     display: -moz-box;
     -moz-box-flex: 1;
     -moz-appearance: none;
     -moz-user-select: text;
   }
 }
 
-.mgwt-TextBox .mgwt-InputBox-box,.mgwt-PasswordTextBox,
-.mgwt-InputBox-box,.mgwt-TextArea .mgwt-InputBox-box {
+.mgwt-TextBox, .mgwt-InputBox-box, .mgwt-PasswordTextBox,
+.mgwt-InputBox-box, .mgwt-TextArea, .mgwt-InputBox-box {
   color: #777;
   border: 0;
   font: normal 17px Helvetica;
   padding: 0;
-  display: inline-block;
+  display: flex;
+  flex: 1;
   margin-left: 0px;
   background-color: #e5e9e8;
-}
-
-.mgwt-TextBox,.mgwt-PasswordTextBox,.mgwt-TextArea {
   position: relative;
 }
 
-
-@if user.agent safari {
-  .mgwt-TextBox,.mgwt-PasswordTextBox,.mgwt-TextArea {
-    display: -webkit-box;
-    -webkit-box-flex: 1;
-  }
-}
-
-@if user.agent gecko1_8 {
-  .mgwt-TextBox,.mgwt-PasswordTextBox,.mgwt-TextArea {
-    display: -moz-box;
-    -moz-box-flex: 1;
-  }
-}
-
 /*todo*/
 .mgwt-InputBox-disabled {	
 }