diff options
Diffstat (limited to 'WebContent/VAADIN/themes/reindeer/window/window.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/reindeer/window/window.scss | 252 |
1 files changed, 156 insertions, 96 deletions
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 |