Fixed font-size issues in Chameleon, Runo and Liferay (#10606, #10587)

Change-Id: Iaaa626553030af44eaab57067acf9f022dc75e6b

WebContent/VAADIN/themes/base/datefield/datefield.scss

@@ -42,7 +42,7 @@
 .#{$primaryStyleName}-calendarpanel-weeknumber {
 	color: #999;
 	border-right: 1px solid #ddd;
-	font-size: 0.9em;
+	font-size: 11.7px;
 }
 .#{$primaryStyleName}-calendarpanel-day,
 .#{$primaryStyleName}-calendarpanel-day-today {

WebContent/VAADIN/themes/base/menubar/menubar.scss

@@ -48,7 +48,7 @@
 	right: 0;
 	width: 1em;
 	height: 1em;
-	font-size: 0.9em;
+	font-size: 11.7px;
 }
 .#{$primaryStyleName}-menuitem-disabled,
 .#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:hover,

WebContent/VAADIN/themes/chameleon/common/common.scss

@@ -25,7 +25,7 @@ $chameleon-line-height: 1.4;
 		border: 1px solid #c0c0b9;
 		padding: 1px 5px;
 		color: #222;
-		font-size: 0.9em;
+		font-size: 11.7px;
 		line-height: normal;
 		-webkit-border-radius: 4px;
 		-moz-border-radius: 4px;

WebContent/VAADIN/themes/chameleon/components/button/button.scss

@@ -79,7 +79,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
  * Big
  ******************************************************************************/
 .#{$primaryStyleName}-big {
-	font-size: 1.2em;
+	font-size: 15.6px;
 	}
 
 
@@ -87,7 +87,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
  * Small
  ******************************************************************************/
 .#{$primaryStyleName}-small {
-	font-size: 0.85em;
+	font-size: 11.05px;
 	font-weight: normal;
 	}
 

WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss

@@ -69,7 +69,7 @@ input.#{$primaryStyleName}-textfield {
 	margin: 0;
 	padding: 0;
 	height: auto !important;
-	font-size: 0.9em;
+	font-size: 11.7px;
 	}
 
 .#{$primaryStyleName}-month .#{$primaryStyleName}-textfield {
@@ -134,7 +134,7 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	}
 
 .#{$primaryStyleName}-calendarpanel-header button {
-	font-size: 1em;
+	font-size: 13px;
 	line-height: normal;
 	width: 100%;
 	padding: 0 .8em;
@@ -205,7 +205,7 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 .#{$primaryStyleName}-calendarpanel-weekdays strong {
 	display: block;
 	text-align: right;
-	font-size: 0.8em;
+	font-size: 10.4px;
 	padding: .3em .5em .35em 0;
 	height: 1.1em;
 	color: #fff;
@@ -272,7 +272,7 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 
 .#{$primaryStyleName}-calendarpanel-time select {
 	padding: 0;
-	font-size: 0.9em;
+	font-size: 11.7px;
 	margin: 0;
 	}
 

WebContent/VAADIN/themes/chameleon/components/label/label.scss

@@ -18,25 +18,25 @@
 .#{$primaryStyleName}-h1,
 .#{$primaryStyleName} h1 {
 	padding: .75em 0 .5em 0;
-	font-size: 1.85em;
+	font-size: 24.05px;
 	}
 
 .#{$primaryStyleName}-h2,
 .#{$primaryStyleName} h2 {
 	padding: .67em 0 .33em 0;
-	font-size: 1.4em;
+	font-size: 18.2px;
 	}
 
 .#{$primaryStyleName}-h3,
 .#{$primaryStyleName} h3 {
 	margin: .71em 0 .29em 0;
-	font-size: 1.1em;
+	font-size: 14.3px;
 	}
 
 .#{$primaryStyleName}-h4,
 .#{$primaryStyleName} h4 {
 	padding: .23em 0;
-	font-size: 1em;
+	font-size: 13px;
 	}
 
 
@@ -44,7 +44,7 @@
  * Big
  ******************************************************************************/
 .#{$primaryStyleName}-big {
-	font-size: 1.2em;
+	font-size: 15.6px;
 	}
 
 
@@ -52,7 +52,7 @@
  * Small
  ******************************************************************************/
 .#{$primaryStyleName}-small {
-	font-size: 0.9em;
+	font-size: 11.7px;
 	line-height: 1.3;
 	opacity: .8;
 	filter: alpha(opacity=80);
@@ -63,7 +63,7 @@
  * Tiny
  ******************************************************************************/
 .#{$primaryStyleName}-tiny {
-	font-size: 0.85em;
+	font-size: 11.05px;
 	line-height: 1.2;
 	opacity: .7;
 	filter: alpha(opacity=70);

WebContent/VAADIN/themes/chameleon/components/notification/notification.scss

@@ -4,7 +4,7 @@ div.#{$primaryStyleName} {
 	-moz-border-radius: 0;
 	-webkit-border-radius: 0;
 	border-radius: 0;
-	font-size: 16px; 
+	font-size: 16px;
 	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.7);
 	-moz-box-shadow: 0 2px 5px rgba(0,0,0,.7);
 	box-shadow: 0 2px 5px rgba(0,0,0,.7);

WebContent/VAADIN/themes/chameleon/components/panel/panel.scss

@@ -2,7 +2,7 @@
 
 .#{$primaryStyleName}-caption {
 	background: #b9dcff;
-	font-size: 1.2em;
+	font-size: 15.6px;
 	border: 1px solid #b3b3b3;
 	border-bottom: none;
 	padding: .2em .6em;
@@ -84,7 +84,7 @@ div.#{$primaryStyleName}-content-light {
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 	margin: 1px 0;
-	font-size: 1em;
+	font-size: 13px;
 	line-height: 1.2;
 	padding: .3em .6em;
 	}

WebContent/VAADIN/themes/chameleon/components/selects/selects.scss

@@ -53,11 +53,11 @@
 }	
 
 &.v-app .#{$primaryStyleName}-suggestpopup-small td {
-	font-size: .85em;
+	font-size: 11.05px;
 	}
 
 &.v-app .#{$primaryStyleName}-suggestpopup-big td {
-	font-size: 1.1em;
+	font-size: 14.3px;
 	}
 
 .#{$primaryStyleName}-big .#{$primaryStyleName}-button {
@@ -112,7 +112,7 @@
 	}
 
 .#{$primaryStyleName}-status {
-	font-size: .85em;
+	font-size: 11.05px;
 	margin: 1px 0 -3px;
 	user-select: none;
 	-webkit-user-select: none;
@@ -126,19 +126,19 @@
 	}
 
 .#{$primaryStyleName}-suggestpopup-small .#{$primaryStyleName}-status {
-	font-size: .8em;
+	font-size: 10.4px;
 	}
 
 .#{$primaryStyleName}-suggestpopup-big .#{$primaryStyleName}-status {
-	font-size: .9em;
+	font-size: 11.7px;
 	}
 
 .v-select-small .v-select-select {
-	font-size: 0.8em;
+	font-size: 10.4px;
 	}
 
 .v-select-big .v-select-select {
-	font-size: 1.2em;
+	font-size: 15.6px;
 	}
 
 

WebContent/VAADIN/themes/chameleon/components/table/table.scss

@@ -96,7 +96,7 @@ div.#{$primaryStyleName}-focus-slot-right {
 	}
 
 .#{$primaryStyleName}-scrollposition {
-	font-size: 0.9em;
+	font-size: 11.7px;
 	opacity: .85;
 	filter: alpha(opacity=85);
 	}
@@ -106,7 +106,7 @@ div.#{$primaryStyleName}-focus-slot-right {
  ******************************************************************************/
 .#{$primaryStyleName}-small .#{$primaryStyleName}-caption-container,
 .#{$primaryStyleName}-small .#{$primaryStyleName}-body {
-	font-size: 0.85em;
+	font-size: 11.05px;
 	}
 
 .#{$primaryStyleName}-small .#{$primaryStyleName}-resizer, 
@@ -124,7 +124,7 @@ div.#{$primaryStyleName}-focus-slot-right {
  ******************************************************************************/
 .#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container,
 .#{$primaryStyleName}-big .#{$primaryStyleName}-body {
-	font-size: 1.2em;
+	font-size: 15.6px;
 	}
 
 .#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container {

WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss

@@ -74,7 +74,7 @@ textarea.v-textarea-readonly {
 .v-datefield-small .v-datefield-textfield,
 .v-datefield-small .v-datefield-button,
 .v-filterselect-small .v-filterselect-input {
-	font-size: 0.85em;
+	font-size: 11.05px;
 	}
 
 
@@ -86,7 +86,7 @@ textarea.v-textarea-readonly {
 .v-datefield-big .v-datefield-textfield,
 .v-datefield-big .v-datefield-button,
 .v-filterselect-big .v-filterselect-input {
-	font-size: 1.2em;
+	font-size: 15.6px;
 	}
 
 input.#{$primaryStyleName}-big[type=text],

WebContent/VAADIN/themes/chameleon/compound/compound.scss

@@ -66,7 +66,7 @@
 	
 	.sidebar-menu {
 		.v-label {
-			font-size: 0.85em;
+			font-size: 11.05px;
 			text-transform: uppercase;
 			font-weight: bold;
 			letter-spacing: 0.03em;

WebContent/VAADIN/themes/liferay/button/button.scss

@@ -28,7 +28,7 @@
 .v-button .v-button-wrap,
 .v-disabled.v-button .v-button-wrap {
 	display: block;
-	font-size: 11px;
+	font-size: $font-size;
 	font-weight: bold;
 	border: 1px solid #c8c9ca;
 	border-right-color: #9e9e9e;
@@ -75,7 +75,7 @@ button.v-nativebutton-link-pressed,
 	border-style: none;
 	background: transparent;
 	padding: 0;
-	font-size: inherit;
+	font-size: $font-size;
 	-webkit-box-shadow: none;
 	-mox-box-shadow: none;
 	-webkit-border-radius: 0;

WebContent/VAADIN/themes/runo/common/common.scss

@@ -4,8 +4,8 @@
 	background: #e9eced url(img/main-bg.png) repeat-x;
 	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	color: #464f52;
-	font-size: 13px;
-	line-height: 18px;
+	font-size: $font-size;
+	line-height: $line-height;
 }
 /* Global font styles */
 &.v-app,
@@ -32,7 +32,7 @@
 .v-drag-element {
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	color: #464f52;
-	font-size: 13px;
+	font-size: $font-size;
 }
 &.v-app select,
 .v-window select {

WebContent/VAADIN/themes/runo/label/label.scss

@@ -47,7 +47,7 @@
 }
 
 .#{$primaryStyleName}-small {
-	font-size: .87em;
+	font-size: 11.31px;
 	line-height: 1.4;
 	color: #707679;
 }

WebContent/VAADIN/themes/runo/notification/notification.scss

@@ -10,7 +10,7 @@
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
 	overflow: hidden;
-	font-size: 1.2em;
+	font-size: 15.6px;
 	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.3);
 	-moz-box-shadow: 0 3px 10px rgba(0,0,0,.3);
 	margin: 10px;
@@ -46,7 +46,7 @@
 .#{$primaryStyleName}-tray h1 {
 	display: block;
 	font-weight: bold;
-	font-size: 0.9em;
+	font-size: 11.7px;
 	line-height: 1;
 	background: #3b4245;
 	padding: 2px 10px;
@@ -57,14 +57,14 @@
 }
 .#{$primaryStyleName}-tray p {
 	display: block;
-	font-size: 0.8em;
+	font-size: 10.4px;
 	line-height: 1.2;
 	margin: 4px 10px 5px 10px;
 	color: #e4e7ea;
 }
 .#{$primaryStyleName}-system {
 	background-color: #ff0a0a;
-	font-size: .9em;
+	font-size: 11.7px;
 	padding: 14px 32px;
 }