Ensure popup datefield width setting works in all themes (#10485)

Change-Id: I9f0891fb363e49d59b5ab2b1af53ba4bf9bca21e

10 files changed, 77 insertions, 62 deletions

diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss
index 21f544cb72..4099123764 100644
--- a/WebContent/VAADIN/themes/base/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss
@@ -14,7 +14,12 @@
 
 .#{$primaryStyleName}-button {
 	cursor: pointer;
+	vertical-align: top;
+}
+.v-has-width > input.#{$primaryStyleName}-textfield {
+	width: 100%;
 }
+
 .#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
 	color: #999;
 	font-style: italic;
@@ -80,6 +85,11 @@
 .#{$primaryStyleName}-popup {
 	background: #fff;
 }
+.#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
 /* Disabled by default
 .#{$primaryStyleName}-error .v-textfield,
 .#{$primaryStyleName}-error .#{$primaryStyleName}-calendarpanel {
diff --git a/WebContent/VAADIN/themes/chameleon/common/common.scss b/WebContent/VAADIN/themes/chameleon/common/common.scss
index 2f3dc53ef3..382dff3325 100644
--- a/WebContent/VAADIN/themes/chameleon/common/common.scss
+++ b/WebContent/VAADIN/themes/chameleon/common/common.scss
@@ -4,6 +4,8 @@ $chameleon-app-background: transparent;
 
 $chameleon-font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
 $chameleon-font-size: 13px;
+$chameleon-font-size-small: 11.05px;
+$chameleon-font-size-big: 15.6px;
 $chameleon-line-height: 1.4;
 
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/button/button.scss b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
index cfb5ab2917..f2b597c59a 100644
--- a/WebContent/VAADIN/themes/chameleon/components/button/button.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
@@ -79,7 +79,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
  * Big
  ******************************************************************************/
 .#{$primaryStyleName}-big {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 
@@ -87,7 +87,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
  * Small
  ******************************************************************************/
 .#{$primaryStyleName}-small {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	font-weight: normal;
 	}
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
index 3d550c8690..2947a71896 100644
--- a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss
@@ -1,5 +1,12 @@
 @mixin chameleon-datefield($primaryStyleName : v-datefield) {
 
+$popupdatefield-button-width: 25px;
+$negative-popupdatefield-button-width: -25px;
+
+$popupdatefield-height: 1.7em; 
+$popupdatefield-small-height: 1.6em; 
+$popupdatefield-big-height: 1.9em; 
+
 .#{$primaryStyleName}-button {
 	background: #dadada url(../../img/date-btn.png) repeat-x 50% 0;
 	border: 1px solid gray;
@@ -7,59 +14,56 @@
 	-webkit-border-bottom-right-radius: 3px;
 	-moz-border-radius-topright: 3px;
 	-moz-border-radius-bottomright: 3px;
-	width: 25px;
-	height: 1.2em;
+	width: $popupdatefield-button-width;
+	margin-right: $negative-popupdatefield-button-width;
+	height: $popupdatefield-height; 
 	padding: .2em 0;
-	-webkit-box-sizing: content-box;
-	-moz-box-sizing: content-box;
-	-ms-box-sizing: content-box;
-	box-sizing: content-box;
-	}
-
-.#{$primaryStyleName}-small .#{$primaryStyleName}-button {
-	height: 1.2em;
-	}
-
-.#{$primaryStyleName}-big .#{$primaryStyleName}-button {
-	padding: .3em 0;
-	height: 1.2em;
-	}
-
-.v-ie8 & .#{$primaryStyleName}-button {
-	height: 1.6em;
-	padding: 0;
 	}
 
-.v-ie8 & .#{$primaryStyleName}-big .#{$primaryStyleName}-button {
-	height: 1.8em;
-	}
 
-input.#{$primaryStyleName}-textfield {
+input.#{$primaryStyleName}-textfield[type="text"] {
 	border-right: none;
 	-webkit-border-top-right-radius: 0;
 	-webkit-border-bottom-right-radius: 0;
 	-moz-border-radius-topright: 0;
 	-moz-border-radius-bottomright: 0;
+	height: $popupdatefield-height;
 	}
 
-
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.#{$primaryStyleName}-big .#{$primaryStyleName}-button {
-	width: 32px;
-	background-image: url(../../img/date-btn-big.png);
+.#{$primaryStyleName}-big {
+	.#{$primaryStyleName}-button {
+		padding: .3em 0;
+		height: $popupdatefield-big-height;
+		width: 32px;
+		background-image: url(../../img/date-btn-big.png);
+		font-size: $chameleon-font-size-big;
+	}
+	input.#{$primaryStyleName}-textfield[type="text"] {
+		height: $popupdatefield-big-height;
+		font-size: $chameleon-font-size-big;
 	}
+}
 
 
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.#{$primaryStyleName}-small .#{$primaryStyleName}-button {
-	width: 19px;
-	background-position: 50% -2px;
+.#{$primaryStyleName}-small {
+	.#{$primaryStyleName}-button {
+		height: $popupdatefield-small-height;
+		width: 19px;
+		background-position: 50% -2px;
+		font-size: $chameleon-font-size-small;
 	}
-
+	input.#{$primaryStyleName}-textfield[type="text"] {
+		height: $popupdatefield-small-height;
+		font-size: $chameleon-font-size-small;
+	}
+	
+}
 
 /*******************************************************************************
  * Calendar panel
@@ -73,11 +77,11 @@ input.#{$primaryStyleName}-textfield {
 	}
 
 .#{$primaryStyleName}-month .#{$primaryStyleName}-textfield {
-	width: 6em;
+	width: 6.4em;
 	}
 
 .#{$primaryStyleName}-year .#{$primaryStyleName}-textfield {
-	width: 4em;
+	width: 4.4em;
 	}
 
 .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth,
@@ -108,21 +112,22 @@ span.#{$primaryStyleName}-calendarpanel-month {
 	}
 
 .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month {
-	width: 5em;
+	width: 5.4em;
 	}
 
 .#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month,
 .#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month,
 .#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month {
-	width: 9em;
+	width: 9.4em;
 	}
 
 .#{$primaryStyleName}-popupcalendar {
 	min-width: 0;
-	}
+	padding-right: $popupdatefield-button-width;
+}
 
 .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel {
-	width: 8em;
+	width: 8.4em;
 	}
 
 td.#{$primaryStyleName}-calendarpanel-prevyear {
diff --git a/WebContent/VAADIN/themes/chameleon/components/label/label.scss b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
index 736c29f075..5afcbd584a 100644
--- a/WebContent/VAADIN/themes/chameleon/components/label/label.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
@@ -44,7 +44,7 @@
  * Big
  ******************************************************************************/
 .#{$primaryStyleName}-big {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 
@@ -63,7 +63,7 @@
  * Tiny
  ******************************************************************************/
 .#{$primaryStyleName}-tiny {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	line-height: 1.2;
 	opacity: .7;
 	filter: alpha(opacity=70);
diff --git a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
index 7dac94fe9d..76ff1acfef 100644
--- a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
@@ -53,7 +53,7 @@
 }	
 
 &.v-app .#{$primaryStyleName}-suggestpopup-small td {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	}
 
 &.v-app .#{$primaryStyleName}-suggestpopup-big td {
@@ -138,7 +138,7 @@
 	}
 
 .v-select-big .v-select-select {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/table/table.scss b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
index 41f6b2edba..f224e898f1 100644
--- a/WebContent/VAADIN/themes/chameleon/components/table/table.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
@@ -106,7 +106,7 @@ div.#{$primaryStyleName}-focus-slot-right {
  ******************************************************************************/
 .#{$primaryStyleName}-small .#{$primaryStyleName}-caption-container,
 .#{$primaryStyleName}-small .#{$primaryStyleName}-body {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	}
 
 .#{$primaryStyleName}-small .#{$primaryStyleName}-resizer, 
@@ -124,7 +124,7 @@ div.#{$primaryStyleName}-focus-slot-right {
  ******************************************************************************/
 .#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container,
 .#{$primaryStyleName}-big .#{$primaryStyleName}-body {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 .#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container {
diff --git a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
index 787a4a4f91..7c5c72c1df 100644
--- a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
@@ -71,22 +71,17 @@ textarea.v-textarea-readonly {
  ******************************************************************************/
 &.v-app input.#{$primaryStyleName}-small,
 &.v-app textarea.v-textarea-small,
-.v-datefield-small .v-datefield-textfield,
-.v-datefield-small .v-datefield-button,
 .v-filterselect-small .v-filterselect-input {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	}
 
-
 /*******************************************************************************
  * Big (and big search)
  ******************************************************************************/
 &.v-app input.#{$primaryStyleName}-big,
 &.v-app textarea.v-textarea-big,
-.v-datefield-big .v-datefield-textfield,
-.v-datefield-big .v-datefield-button,
 .v-filterselect-big .v-filterselect-input {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 input.#{$primaryStyleName}-big[type=text],
diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
index 20bc1fe478..d486316419 100644
--- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
@@ -233,9 +233,6 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 .v-op & .#{$primaryStyleName}-popup {
 	background: rgba(255,255,255,.95);
 }
-.v-has-width > input.#{$primaryStyleName}-textfield {
-	width: 100%;
-}
 .#{$primaryStyleName}-year > .#{$primaryStyleName}-textfield {
 	width: 4.5em;
 }
@@ -255,9 +252,6 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	-webkit-border-top-right-radius: 0;
 	-webkit-border-bottom-right-radius: 0;
 	height: 23px;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
 }
 .#{$primaryStyleName}.v-readonly input.#{$primaryStyleName}-textfield {
 	border-right-width: 1px;
diff --git a/WebContent/VAADIN/themes/runo/datefield/datefield.scss b/WebContent/VAADIN/themes/runo/datefield/datefield.scss
index 2f9fe19cc0..d89fdf786e 100644
--- a/WebContent/VAADIN/themes/runo/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/runo/datefield/datefield.scss
@@ -1,19 +1,28 @@
 @mixin runo-datefield($primaryStyleName : v-datefield) {
 
+$popupdatefield-button-width: 22px;
+$negative-popupdatefield-button-width: -22px;
+
 .#{$primaryStyleName} input.v-textfield,
 .#{$primaryStyleName} input.v-textfield[type=text] {
-	height: 18px;
+	height: 22px; // 18px height + 2*2px padding
+	
 }
 .#{$primaryStyleName}-button {
 	font-size:13px;
-	width: 22px;
+	width: $popupdatefield-button-width;
+	margin-right: $negative-popupdatefield-button-width;
 	height: 24px;
 	padding: 0;
 	overflow: hidden;
 	border: none;
 	background: transparent url(img/open-button.png) no-repeat right 0;
-	vertical-align: top;
 }
+.#{$primaryStyleName}-popupcalendar {
+	min-width: 0;
+	padding-right: $popupdatefield-button-width;
+}
+
 .#{$primaryStyleName}-popup {
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	color: #464f52;