From 169bdcb05dd6c8c5322ca9f558f9fd1fa22c8c3f Mon Sep 17 00:00:00 2001 From: Artur Signell Date: Tue, 23 Apr 2013 09:05:05 +0300 Subject: Added light and black versions of close, maximize and restore icons (#11544) Change-Id: Id8463fbd18741edc2f52190feb14fd8c67657154 --- .../reindeer/window/img/black/close-active.png | Bin 0 -> 359 bytes .../reindeer/window/img/black/close-hover.png | Bin 0 -> 369 bytes .../themes/reindeer/window/img/black/close.png | Bin 0 -> 318 bytes .../reindeer/window/img/black/maximize-active.png | Bin 0 -> 245 bytes .../reindeer/window/img/black/maximize-hover.png | Bin 0 -> 245 bytes .../themes/reindeer/window/img/black/maximize.png | Bin 0 -> 185 bytes .../reindeer/window/img/black/restore-active.png | Bin 0 -> 295 bytes .../reindeer/window/img/black/restore-hover.png | Bin 0 -> 296 bytes .../themes/reindeer/window/img/black/restore.png | Bin 0 -> 249 bytes .../reindeer/window/img/close-light-hover.png | Bin 600 -> 0 bytes .../reindeer/window/img/close-light-pressed.png | Bin 631 -> 0 bytes .../themes/reindeer/window/img/close-light.png | Bin 549 -> 0 bytes .../reindeer/window/img/content-bg-light.png | Bin 208 -> 0 bytes .../reindeer/window/img/light/close-hover.png | Bin 0 -> 600 bytes .../reindeer/window/img/light/close-pressed.png | Bin 0 -> 631 bytes .../themes/reindeer/window/img/light/close.png | Bin 0 -> 549 bytes .../reindeer/window/img/light/content-bg.png | Bin 0 -> 208 bytes .../reindeer/window/img/light/maximize-active.png | Bin 0 -> 268 bytes .../reindeer/window/img/light/maximize-hover.png | Bin 0 -> 271 bytes .../themes/reindeer/window/img/light/maximize.png | Bin 0 -> 271 bytes .../themes/reindeer/window/img/light/resize.png | Bin 0 -> 222 bytes .../reindeer/window/img/light/restore-active.png | Bin 0 -> 360 bytes .../reindeer/window/img/light/restore-hover.png | Bin 0 -> 366 bytes .../themes/reindeer/window/img/light/restore.png | Bin 0 -> 366 bytes .../themes/reindeer/window/img/resize-light.png | Bin 222 -> 0 bytes .../VAADIN/themes/reindeer/window/window.scss | 252 +++++++++++++-------- 26 files changed, 156 insertions(+), 96 deletions(-) create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/close-active.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/close-hover.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/close.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/maximize-active.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/maximize-hover.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/maximize.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/restore-active.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/restore-hover.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/black/restore.png delete mode 100644 WebContent/VAADIN/themes/reindeer/window/img/close-light-hover.png delete mode 100644 WebContent/VAADIN/themes/reindeer/window/img/close-light-pressed.png delete mode 100644 WebContent/VAADIN/themes/reindeer/window/img/close-light.png delete mode 100644 WebContent/VAADIN/themes/reindeer/window/img/content-bg-light.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/close-hover.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/close-pressed.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/close.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/content-bg.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/maximize-active.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/maximize-hover.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/maximize.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/resize.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/restore-active.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/restore-hover.png create mode 100644 WebContent/VAADIN/themes/reindeer/window/img/light/restore.png delete mode 100644 WebContent/VAADIN/themes/reindeer/window/img/resize-light.png (limited to 'WebContent') 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/close-active.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/close-hover.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/close.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize-active.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize-hover.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/maximize.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/restore-active.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/restore-hover.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/black/restore.png differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/close-light-hover.png b/WebContent/VAADIN/themes/reindeer/window/img/close-light-hover.png deleted file mode 100644 index 17ac9b8457..0000000000 Binary files a/WebContent/VAADIN/themes/reindeer/window/img/close-light-hover.png and /dev/null differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/close-light-pressed.png b/WebContent/VAADIN/themes/reindeer/window/img/close-light-pressed.png deleted file mode 100644 index 2c84b5bcfb..0000000000 Binary files a/WebContent/VAADIN/themes/reindeer/window/img/close-light-pressed.png and /dev/null differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/close-light.png b/WebContent/VAADIN/themes/reindeer/window/img/close-light.png deleted file mode 100644 index 4bbc89cee9..0000000000 Binary files a/WebContent/VAADIN/themes/reindeer/window/img/close-light.png and /dev/null differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/content-bg-light.png b/WebContent/VAADIN/themes/reindeer/window/img/content-bg-light.png deleted file mode 100644 index b38c902d83..0000000000 Binary files a/WebContent/VAADIN/themes/reindeer/window/img/content-bg-light.png and /dev/null differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/close-hover.png b/WebContent/VAADIN/themes/reindeer/window/img/light/close-hover.png new file mode 100644 index 0000000000..17ac9b8457 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/close-hover.png differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/close-pressed.png b/WebContent/VAADIN/themes/reindeer/window/img/light/close-pressed.png new file mode 100644 index 0000000000..2c84b5bcfb Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/close-pressed.png differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/close.png b/WebContent/VAADIN/themes/reindeer/window/img/light/close.png new file mode 100644 index 0000000000..4bbc89cee9 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/close.png differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/content-bg.png b/WebContent/VAADIN/themes/reindeer/window/img/light/content-bg.png new file mode 100644 index 0000000000..b38c902d83 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/content-bg.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize-active.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize-hover.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/maximize.png differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/light/resize.png b/WebContent/VAADIN/themes/reindeer/window/img/light/resize.png new file mode 100644 index 0000000000..0c0c9123b9 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/resize.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/restore-active.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/restore-hover.png differ 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 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/window/img/light/restore.png differ diff --git a/WebContent/VAADIN/themes/reindeer/window/img/resize-light.png b/WebContent/VAADIN/themes/reindeer/window/img/resize-light.png deleted file mode 100644 index 0c0c9123b9..0000000000 Binary files a/WebContent/VAADIN/themes/reindeer/window/img/resize-light.png and /dev/null differ 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 -- cgit v1.2.3