Added light and black versions of close, maximize and restore icons (#11544)

Change-Id: Id8463fbd18741edc2f52190feb14fd8c67657154

21 files changed, 156 insertions, 96 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/close-active.png b/WebContent/VAADIN/themes/reindeer/window/img/black/close-active.png
new file mode 100644
index 0000000000..07a837b619
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/close-active.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/close-hover.png b/WebContent/VAADIN/themes/reindeer/window/img/black/close-hover.png
new file mode 100644
index 0000000000..bb0a080373
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/close-hover.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/close.png b/WebContent/VAADIN/themes/reindeer/window/img/black/close.png
new file mode 100644
index 0000000000..b26cfb5d57
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/close.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/maximize-active.png b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize-active.png
new file mode 100644
index 0000000000..526563c94f
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize-active.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/maximize-hover.png b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize-hover.png
new file mode 100644
index 0000000000..76d0fdf040
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize-hover.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/maximize.png b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize.png
new file mode 100644
index 0000000000..ecf4cbed35
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/restore-active.png b/WebContent/VAADIN/themes/reindeer/window/img/black/restore-active.png
new file mode 100644
index 0000000000..96f9672605
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/restore-active.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/restore-hover.png b/WebContent/VAADIN/themes/reindeer/window/img/black/restore-hover.png
new file mode 100644
index 0000000000..b319f07684
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/restore-hover.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/black/restore.png b/WebContent/VAADIN/themes/reindeer/window/img/black/restore.png
new file mode 100644
index 0000000000..b440383b91
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/black/restore.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/close-light-hover.png b/WebContent/VAADIN/themes/reindeer/window/img/light/close-hover.png
index 17ac9b8457..17ac9b8457 100644
--- a/WebContent/VAADIN/themes/reindeer/window/img/close-light-hover.png
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/close-hover.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/close-light-pressed.png b/WebContent/VAADIN/themes/reindeer/window/img/light/close-pressed.png
index 2c84b5bcfb..2c84b5bcfb 100644
--- a/WebContent/VAADIN/themes/reindeer/window/img/close-light-pressed.png
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/close-pressed.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/close-light.png b/WebContent/VAADIN/themes/reindeer/window/img/light/close.png
index 4bbc89cee9..4bbc89cee9 100644
--- a/WebContent/VAADIN/themes/reindeer/window/img/close-light.png
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/close.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/content-bg-light.png b/WebContent/VAADIN/themes/reindeer/window/img/light/content-bg.png
index b38c902d83..b38c902d83 100644
--- a/WebContent/VAADIN/themes/reindeer/window/img/content-bg-light.png
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/content-bg.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/maximize-active.png b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize-active.png
new file mode 100644
index 0000000000..5ca4e2e6eb
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize-active.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/maximize-hover.png b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize-hover.png
new file mode 100644
index 0000000000..c7930c2f4a
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize-hover.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/maximize.png b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize.png
new file mode 100644
index 0000000000..a4965ef19c
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/resize-light.png b/WebContent/VAADIN/themes/reindeer/window/img/light/resize.png
index 0c0c9123b9..0c0c9123b9 100644
--- a/WebContent/VAADIN/themes/reindeer/window/img/resize-light.png
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/resize.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/restore-active.png b/WebContent/VAADIN/themes/reindeer/window/img/light/restore-active.png
new file mode 100644
index 0000000000..d135c4d66c
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/restore-active.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/restore-hover.png b/WebContent/VAADIN/themes/reindeer/window/img/light/restore-hover.png
new file mode 100644
index 0000000000..b03639c001
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/restore-hover.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/restore.png b/WebContent/VAADIN/themes/reindeer/window/img/light/restore.png
new file mode 100644
index 0000000000..1c3fba4020
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/light/restore.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/window.scss b/WebContent/VAADIN/themes/reindeer/window/window.scss
index 7a05e52aec..e8f0011397 100644
--- a/WebContent/VAADIN/themes/reindeer/window/window.scss
+++ b/WebContent/VAADIN/themes/reindeer/window/window.scss
@@ -95,45 +95,71 @@
  Light style window -----------------------------
 **/
 
-.#{$primaryStyleName}-light .#{$primaryStyleName}-outerheader {
-	background: transparent;
-	padding: 15px 32px 0 18px;
-	height: 23px;
-}
-.#{$primaryStyleName}-light .#{$primaryStyleName}-header {
-	font-size: 16px;
-	color: #292e34;
-	text-shadow: none;
-}
-.#{$primaryStyleName}-light .#{$primaryStyleName}-resizebox {
-	width: 12px;
-	height: 12px;
-	background-image: url(img/resize-light.png); /** sprite-ref: verticals */
-}
-.#{$primaryStyleName}-light .#{$primaryStyleName}-footer {
-	background: transparent;
-	height: 12px;
-}
-.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox {
-	right: 1px;
-	top: 17px;
-	width: 19px;
-	height: 15px;
-	background-image: url(img/close-light.png); /** sprite-ref: verticals */
-}
-.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox:hover {
-	background-image: url(img/close-light-hover.png); /** sprite-ref: verticals */
-}
-.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox:active {
-	background-image: url(img/close-light-pressed.png); /** sprite-ref: verticals */
-}
-.#{$primaryStyleName}-light .#{$primaryStyleName}-contents {
-	background: transparent;
-}
-/* This must be the last sprite added to the verticals-sprite image */
-.#{$primaryStyleName}-light .#{$primaryStyleName}-wrap {
-	background: #f7f7f8 repeat-x;
-	background-image: url(img/content-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+.#{$primaryStyleName}-light {
+	.#{$primaryStyleName}-outerheader {
+		background: transparent;
+		padding: 15px 52px 0 18px;
+	}
+	.#{$primaryStyleName}-header {
+		font-size: 16px;
+		color: #292e34;
+		text-shadow: none;
+	}
+	.#{$primaryStyleName}-resizebox {
+		width: 12px;
+		height: 12px;
+		background-image: url(img/light/resize.png); /** sprite-ref: verticals */
+	}
+	.#{$primaryStyleName}-footer {
+		background: transparent;
+		height: 12px;
+	}
+	.#{$primaryStyleName}-closebox {
+		right: 1px;
+		top: 17px;
+		width: 19px;
+		height: 15px;
+		
+		background-image: url(img/light/close.png); /** sprite-ref: verticals */
+		&:hover {
+			background-image: url(img/light/close-hover.png); /** sprite-ref: verticals */
+		}
+		&:active {
+			background-image: url(img/light/close-pressed.png); /** sprite-ref: verticals */
+		}
+	}
+	
+	.#{$primaryStyleName}-maximizebox {
+		top: 17px;
+		
+		background-image: url(img/light/maximize.png); /** sprite-ref: verticals */
+		&:hover {
+			background-image: url(img/light/maximize-hover.png); /** sprite-ref: verticals */
+		}
+		&:active {
+			background-image: url(img/light/maximize-active.png); /** sprite-ref: verticals */
+		}
+	}
+	.#{$primaryStyleName}-restorebox {
+		top: 17px;
+	
+		background-image: url(img/light/restore.png); /** sprite-ref: verticals */
+		&:hover {
+			background-image: url(img/light/restore-hover.png); /** sprite-ref: verticals */
+		}
+		&:active {
+			background-image: url(img/light/restore-active.png); /** sprite-ref: verticals */
+		}
+	}
+	
+	.#{$primaryStyleName}-contents {
+		background: transparent;
+	}
+	/* This must be the last sprite added to the verticals-sprite image */
+	.#{$primaryStyleName}-wrap {
+		background: #f7f7f8 repeat-x;
+		background-image: url(img/light/content-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+	}
 }
 
 
@@ -141,63 +167,97 @@
  Black style window -----------------------------
 **/
 
-.#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
-	border-color: #2e3030;
-	border-radius: 8px;
-	-webkit-border-radius: 8px;
-	-moz-border-radius: 8px;
-	overflow: hidden;
-}
-.v-sa & .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap,
-.v-op & .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
-	border-color: rgba(0,0,0,.8);
-}
-.#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
-	background-color: #1d2021;
-	-moz-border-radius: 7px;
-	-webkit-border-radius: 7px;
-}
-.v-sa & .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap,
-.v-op & .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
-	background-color: rgba(29,32,33,.9);
-}
-.#{$primaryStyleName}-black .#{$primaryStyleName}-outerheader {
-	height: 29px;
-	padding: 7px 14px;
-	background: transparent repeat-x;
-	background-image: url(img/black/header-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
-	text-align: center;
-	-moz-border-radius-topright: 7px;
-	-moz-border-radius-topleft: 7px;
-	-webkit-border-top-right-radius: 7px;
-	-webkit-border-top-left-radius: 7px;
-	overflow: hidden;
-	border: none;
-}
-.#{$primaryStyleName}-black .#{$primaryStyleName}-header {
-	font-size: 12px;
-	font-weight: normal;
-	color: #dddfe1;
-}
-.#{$primaryStyleName}-black .#{$primaryStyleName}-closebox {
-	top: 8px;
-}
-.#{$primaryStyleName}-black .#{$primaryStyleName}-footer {
-	background: transparent;
-	border: none;
-	height: 14px;
-}
-.#{$primaryStyleName}-black .#{$primaryStyleName}-resizebox {
-	background: transparent no-repeat;
-	background-image: url(img/black/resize.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 4px */
-	width: 14px;
-	height: 14px;
-}
-/* Must be last to make this image last in the sprites */
-.#{$primaryStyleName}-black .#{$primaryStyleName}-contents {
-	border: none;
-	background: transparent repeat-x;
-	background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
+.#{$primaryStyleName}-black {
+	.#{$primaryStyleName}-wrap {
+		border-color: #2e3030;
+		border-radius: 8px;
+		-webkit-border-radius: 8px;
+		-moz-border-radius: 8px;
+		overflow: hidden;
+	}
+	.v-sa & .#{$primaryStyleName}-wrap,
+	.v-op & .#{$primaryStyleName}-wrap {
+		border-color: rgba(0,0,0,.8);
+	}
+	
+	.#{$primaryStyleName}-wrap {
+		background-color: #1d2021;
+		-moz-border-radius: 7px;
+		-webkit-border-radius: 7px;
+	}
+	.v-sa & .#{$primaryStyleName}-wrap,
+	.v-op & .#{$primaryStyleName}-wrap {
+		background-color: rgba(29,32,33,.9);
+	}
+	.#{$primaryStyleName}-outerheader {
+		height: 29px;
+		padding: 7px 14px;
+		background: transparent repeat-x;
+		background-image: url(img/black/header-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
+		text-align: center;
+		-moz-border-radius-topright: 7px;
+		-moz-border-radius-topleft: 7px;
+		-webkit-border-top-right-radius: 7px;
+		-webkit-border-top-left-radius: 7px;
+		overflow: hidden;
+		border: none;
+	}
+	.#{$primaryStyleName}-header {
+		font-size: 12px;
+		font-weight: normal;
+		color: #dddfe1;
+	}
+ 	.#{$primaryStyleName}-closebox {
+		top: 8px;
+		
+		background-image: url(img/black/close.png); /** sprite-ref: verticals */
+		&:hover {
+			background-image: url(img/black/close-hover.png); /** sprite-ref: verticals */
+		}
+		&:active {
+			background-image: url(img/black/close-pressed.png); /** sprite-ref: verticals */
+		}
+	}
+	.#{$primaryStyleName}-footer {
+		background: transparent;
+		border: none;
+		height: 14px;
+	}
+	.#{$primaryStyleName}-resizebox {
+		background: transparent no-repeat;
+		background-image: url(img/black/resize.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 4px */
+		width: 14px;
+		height: 14px;
+	}
+	.#{$primaryStyleName}-maximizebox {
+		top: 8px;
+		
+		background-image: url(img/black/maximize.png); /** sprite-ref: verticals */
+		&:hover {
+			background-image: url(img/black/maximize-hover.png); /** sprite-ref: verticals */
+		}
+		&:active {
+			background-image: url(img/black/maximize-active.png); /** sprite-ref: verticals */
+		}
+	}
+	.#{$primaryStyleName}-restorebox {
+		top: 8px;
+	
+		background-image: url(img/black/restore.png); /** sprite-ref: verticals */
+		&:hover {
+			background-image: url(img/black/restore-hover.png); /** sprite-ref: verticals */
+		}
+		&:active {
+			background-image: url(img/black/restore-active.png); /** sprite-ref: verticals */
+		}
+	}
+	
+	/* Must be last to make this image last in the sprites */
+	.#{$primaryStyleName}-contents {
+		border: none;
+		background: transparent repeat-x;
+		background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
+	}
 }
 
 }
\ No newline at end of file